[Action] Evaluate need to provide an alternative style for active state

[geospatialem]

Description

One of three issues stemmed from #4813.

Determine if there is a need for differing styles to further emphasize an active state. Currently a light gray state is provided in light mode, and dark gray for dark mode. Could additional context be provided to users?

Acceptance Criteria

• Research active state vs other states in the action component, and possibly across components
• Provide design recommendations for an active state across components
• Implement an alternative style for the active state across components

Relevant Info

This issue surfaced from discussion of the action component, which has a similar appearance when in an active state that is depicted on the :focus/:active/:hover states.

So it isn't clear if the active state is true, or not when focused. While the indicator attribute can be used alongside, there should be more visual prominence that the action is in an :active state.

cc @macandcheese

Which Component

Specifically with action, but could impact other components.

Example Use Case

Example with action: https://codepen.io/geospatialem/pen/QWmWdoQ.

[macandcheese]

Note: explore if a "subtle" and "loud" (... with better names) could work, or if a single state such as the bordered example above is best. Note that users can always customize both the indicator and the action active state through css vars, so that may be a justification for a single one)...

[webmapLee]

const action = document.querySelector('calcite-action').shadowRoot
action.querySelector('.button').setAttribute('style','padding:0.5em;')

is it can help？

[ashetland]

Also to explore: using foreground-current for the active state