[Tokens] Implement a --calcite-color-focus global variable across the design system

[COV-GIS]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Provide a global token/CSS variable that enables designers and developers to set the focus color, which could be named --calcite-color-focus.

The above is currently achievable via the deprecated --calcite-ui-focus-color CSS variable, but its usage doesn't apply to the use case, Calcite should instead opt to provide support for focus and brand color variables.

Workaround example with --calcite-ui-focus-color (Note: this is a deprecated CSS variable): https://codepen.io/geospatialem/pen/poMNgbO

Acceptance Criteria

• Allow developers to use a global --calcite-color-focus token that allows customization of the focus in apps.
  • For instance, support Button's focus color to match button color when kind is danger

Relevant Info

No response

Which Component

Across components

Example Use Case

Allow developers to use a global --calcite-color-focus token that allows customization of the focus in apps. For instance, support Button's focus color to match button color when kind is danger.

Priority impact

impact - p3 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

N/A

[geospatialem]

@COV-GIS This is currently achievable using the deprecated --calcite-ui-focus-color CSS variable when specifying the kind attribute or providing a class selector, for instance: https://codepen.io/geospatialem/pen/poMNgbO

calcite-button[kind="danger"] {
  --calcite-ui-focus-color:var(--calcite-color-status-danger);
}

With the above in mind we will work towards a more streamlined implementation using a new CSS variable/token of --calcite-color-focus and provide additional documentation in the future. Will be updating the title and scope, as we do not plan to provide specific support on component's kind attr/prop, as it would be up to developers to achieve.

cc: @alisonailea @brittneytewks

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with Chromatic via https://codepen.io/geospatialem/pen/MWNGoey using the new --calcite-color-focus global token/CSS variable.

[COV-GIS]

Awesome! Thanks folks.