Add Control Tokens with Alias & Global Fallbacks

The main idea is to complete the Design Tokens spec by introducing the Control Tokens

Doing this through the use of var(--semanticToken, ${tokens.aliasToken} so that if the semanticTokens (control tokens) are not provided then we have Alias/Global fallbacks.

If they are provided, then it's starts becoming a pay-to-play system. Meaning the more semantic token one uses the more CSS Vars get introduced. They can be introduced at the root level or for better DOM Reflow they ought to be introduced at the lowest parent node. I.E for an app within another app 👀. Therefore it is our hypothesis that it would not affect DOM Reflow as much as having loads of Global/Alias tokens.

Prototypes & Staging links of concern:

https://fluentuipr.z22.web.core.windows.net/pull/31330/public-docsite-v9/storybook/index.html?path=/docs/components-button-button--default#appearance

https://fluentuipr.z22.web.core.windows.net/pull/31330/public-docsite-v9/storybook/index.html?path=/docs/components-button-togglebutton--default#appearance

https://fluentuipr.z22.web.core.windows.net/pull/31330/public-docsite-v9/storybook/index.html?path=/docs/components-switch--default#checked

https://fluentuipr.z22.web.core.windows.net/pull/31330/public-docsite-v9/storybook/index.html?path=/docs/components-combobox--default#appearance

Address concerns:

Here's a list of questions based on the notes:
Here is the cleaned-up list of questions and answers with duplicates merged:

1. How can we ensure that:

   • Existing themes built with current tokens continue to work?
     • Through var(semantic_token, alias_token) fallbacks
   • Theme generation continues to work?
     • Working closely with folks on the Theme Designer team (Mason, Ankit, Prasanna)
     • Incorporating it into the tokens pipeline
     • Aligning with Figma (Spencer, Ethan, Jeremy)
   • Default theme needs continue to work?
     • Everything will fall back to Alias and Globals
   • UI built with FST works without it being explicitly provided?
     • Fallbacks ensure this

2. What should the prototypes demonstrate to show how FST should work?

   • Build themes like Win11, NXT, and others

3. How can we handle customized tokens added to teams without causing accessibility issues?

   • Unit tests should warn against mistakes

4. How do we handle "theme creep" to ensure theme shape remains consistent?

   • Release in waves and only release semantic tokens that serve a purpose
   • Start with groups of semantic tokens like ButtonGroupForegroundColor

5. How can we ensure that all UI continues to work in the base theme?

   • Semantic tokens fall back to Alias and Globals by default

6. How does adding FST (Fluent Semantic Tokens) impact existing customers from a theming performance standpoint?

   • Should not impact performance since var fallbacks mean no extra CSS vars are added

7. What could go wrong with FST implementation, and how can users potentially misuse it?

   • If users make extensive use of all the semantic tokens, CSS Var usage will increase significantly ("pay to play")

8. How should we communicate to the Fluent Core team about extending the original tokens spec?

   • Introduce the "Control Token" step

9. Did the team consider using var() as a fallback option previously?

   • Instances of var fallback exist throughout the code, but not clear if it was considered for creating semantic/control/component design tokens
   • Check with Miro

10. How do we keep token creep under control?

• Base Fluent 2 tokens on current tokens

11. How can Fluent 2 tokens be based on the current tokens?

• Default values will still be Alias/Global tokens

12. How should we govern the process of exposing more and more granular tokens to components, especially regarding var() fallbacks?

• Should be based on real product demand; add only with a genuine use case for multiple Fluent consumers

13. Should component groups solve this at the expense of fidelity?

• Perhaps start with Colors for Semantic Groups first

14. Should product teams contribute controls that use component-level tokens?

• Convert Alias and Global usages within component variants to semantic tokens per naming convention

15. How do we ensure that all components have alias token fallbacks if component tokens are not always present?

• Package the semantic tokens with components, ensuring each has the necessary group semantic tokens

16. How do we handle increased bundle size due to additional verbose strings caused by bundling?

• Perhaps hash like the Alias and Globals
• ❓ Not sure, needs further exploration