V9 tokens - Should the semantic border tokens be color palette agnostic?

[osfprieto]

In this set of tokens, most semantic colors reference only the semantic part of the UX without attaching to a specific color palette.

That's not the case with the border tokens where each border token is bound to the color palette:

fluentui/packages/react-components/react-theme/src/tokens.ts

Line 153 in 8ec3d32

colorPaletteAnchorBorderActive: 'var(--colorPaletteAnchorBorderActive)',

Should it be considered to add a set of semantic tokens specific only for the border states?

+ colorBorderActive: 'var(--colorBorderActive)',
+ colorBorder1: 'var(--colorBorder1)',
+ colorBorder2: 'var(--colorBorder2)',

[osfprieto]

@TristanWatanabe - FYI

Is this the best place to discuss this?

[khmakoto]

@osfprieto this is a distinction between global and alias tokens.

Our global color tokens come from a specified palette of colors and include tokens such as colorPaletteAnchorBorderActive above. You can normally notice which ones are global based on if they include the word palette in them or not. Other examples are colorPaletteBlueBackground1 and colorPaletteTealForeground2.

We also have alias color tokens, which depend on the global tokens and a provided brand ramp. These are the other type of tokens you see, such as colorNeutralForeground1.

Regarding your question about semantic tokens for border states, we do have them, they are just called stroke instead of border as they can also be used for other things such as outline. These tokens are:

  colorNeutralStrokeAccessible,
  colorNeutralStrokeAccessibleHover,
  colorNeutralStrokeAccessiblePressed,
  colorNeutralStrokeAccessibleSelected,
  colorNeutralStroke1,
  colorNeutralStroke1Hover,
  colorNeutralStroke1Pressed,
  colorNeutralStroke1Selected,
  colorNeutralStroke2,
  colorNeutralStroke3,
  colorNeutralStrokeOnBrand,
  colorNeutralStrokeOnBrand2,
  colorNeutralStrokeOnBrand2Hover,
  colorNeutralStrokeOnBrand2Pressed,
  colorNeutralStrokeOnBrand2Selected,
  colorBrandStroke1,
  colorBrandStroke2,
  colorCompoundBrandStroke,
  colorCompoundBrandStrokeHover,
  colorCompoundBrandStrokePressed,
  colorNeutralStrokeDisabled,
  colorNeutralStrokeInvertedDisabled,
  colorTransparentStroke,
  colorTransparentStrokeInteractive,
  colorTransparentStrokeDisabled,
  colorStrokeFocus1,
  colorStrokeFocus2,

I hope this helps answer your question, let me know if there is anything else you have doubts about.

[miroslavstastny]

Actually, even the colorPaletteAnchorBorderActive is a semantic alias token - "border active" tells the semantic usage, the hex value of the color is different across themes, therefore "alias".
Most of the application should use neutral tokens https://react.fluentui.dev/?path=/docs/theme-colors--colors, there are special cases where colorPalette tokens are used - custom colors in a calendar, text highlight colors, computed Avatar background, presence dots...

[osfprieto]

Thank you, this helps a lot!