fix(tokens): restore --calcite-color-focus

[matgalla]

Related Issue: #11713 #11711

Summary

Restores the --calcite-color-focus token in both light and dark semantic color JSON files.

Noteworthy changes

• includes the new focus token in all outputs except index.(s)css
• adds new components.css design tokens output for inclusion in calcite-components shadow DOM (host)
  • defines internal custom CSS property for use by focus utility styles (--calcite-internal-color-focus)
• exports invert util from calcite-tailwind-preset (internal) – can be moved to internal shared utils
• overrides Tailwind focus utilities in calcite-components – avoids depending on internal CSS props when using the preset
• restores ts/color/css/hexrgba transform override to support focus color token value structure
• extracts shared utilities across calcite-design-tokens format outputs
• enhances dictionary utility to support filtered tokens
• all components define the internal focus CSS prop, which might not be necessary in all cases – we can address this in Use styles object for shared component styles #12106 and only include it in components that are focusable.

BEGIN_COMMIT_OVERRIDE
omitted from changelog
END_COMMIT_OVERRIDE

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[jcfranco]

Belated update, taking another look at this once since the current updates will reintroduce a regression since it won't allow component-level overrides to take place.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[jcfranco]

Belated update, taking another look at this once since the current updates will reintroduce a regression since it won't allow component-level overrides to take place.

One way we could approach this is to:

1. add a new output file (e.g., component)
2. exclude it from the components build (e.g., index or core token outputs)
3. use it in the Tailwind preset as the fallback value for focus utils (example) via the es6 output:

   import { calciteColorFocus } from "@esri/calcite-design-tokens/dist/es6/component";
   // ...
   ".focus-normal": {
      outline: `2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, ${calciteColorFocus}))`,
    },

We could alternatively include it in global/semantic output, but we would need to avoid adding it to :root (default), which would have the same issue seen above.

Thoughts? cc @matgalla @macandcheese @driskull @alisonailea

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[matgalla]

@jcfranco The proposed solution seems okay to me, just maybe a bit odd to have a file dedicated to a single token. Are there any other tokens that would potentially fit into that file eventually?

And we don't need the focus color variable from a design/Figma standpoint, so no need to go that route.

[jcfranco]

@matgalla Yes, sorry for not adding that detail earlier. The component output file would host semantic tokens that need to support being overridden at the component level due to fallback behavior.

The main issue is that the CSS output defines most custom CSS props on :root, which limits overriding/fallback patterns that need to be scoped to the component, like in this case.

.And we don't need the focus color variable from a design/Figma standpoint, so no need to go that route.

Definitely an option. The main purpose was to restore the token representing the design decision for focus to use the brand color.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[driskull]

👍

[driskull]

should we use a var for 2px? Maybe the border width var? var(--calcite-spacing-base)

[jcfranco]

Good idea. I'll do that in a follow-up since I'll also have to update the preset utils.

[jcfranco]

PR submitted! #12348

[macandcheese]

🏅