Update tokens so far

packages/semantic-tokens/etc/semantic-tokens.api.md

@@ -11,58 +11,58 @@ export const ctrlFocusOuterStroke: string;
 export const ctrlLinkForegroundBrandHover: string;
 
 // @public (undocumented)
-export const ctrlLinkForegroundBrandHoverRaw = "--ctrl-link-foreground-brand-hover";
+export const ctrlLinkForegroundBrandHoverRaw = "--smtc-ctrl-link-foreground-brand-hover";
 
 // @public (undocumented)
 export const ctrlLinkForegroundBrandPressed: string;
 
 // @public (undocumented)
-export const ctrlLinkForegroundBrandPressedRaw = "--ctrl-link-foreground-brand-pressed";
+export const ctrlLinkForegroundBrandPressedRaw = "--smtc-ctrl-link-foreground-brand-pressed";
 
 // @public (undocumented)
 export const ctrlLinkForegroundBrandRest: string;
 
 // @public (undocumented)
-export const ctrlLinkForegroundBrandRestRaw = "--ctrl-link-foreground-brand-rest";
+export const ctrlLinkForegroundBrandRestRaw = "--smtc-ctrl-link-foreground-brand-rest";
 
 // @public (undocumented)
 export const ctrlLinkForegroundNeutralHover: string;
 
 // @public (undocumented)
-export const ctrlLinkForegroundNeutralHoverRaw = "--ctrl-link-foreground-neutral-hover";
+export const ctrlLinkForegroundNeutralHoverRaw = "--smtc-ctrl-link-foreground-neutral-hover";
 
 // @public (undocumented)
 export const ctrlLinkForegroundNeutralPressed: string;
 
 // @public (undocumented)
-export const ctrlLinkForegroundNeutralPressedRaw = "--ctrl-link-foreground-neutral-pressed";
+export const ctrlLinkForegroundNeutralPressedRaw = "--smtc-ctrl-link-foreground-neutral-pressed";
 
 // @public (undocumented)
 export const ctrlLinkForegroundNeutralRest: string;
 
 // @public (undocumented)
-export const ctrlLinkForegroundNeutralRestRaw = "--ctrl-link-foreground-neutral-rest";
+export const ctrlLinkForegroundNeutralRestRaw = "--smtc-ctrl-link-foreground-neutral-rest";
 
 // @public (undocumented)
-export const foregroundCtrlBrandHoverRaw = "--foreground-ctrl-brand-hover";
+export const foregroundCtrlBrandHoverRaw = "--smtc-foreground-ctrl-brand-hover";
 
 // @public (undocumented)
-export const foregroundCtrlBrandPressedRaw = "--foreground-ctrl-brand-pressed";
+export const foregroundCtrlBrandPressedRaw = "--smtc-foreground-ctrl-brand-pressed";
 
 // @public (undocumented)
-export const foregroundCtrlBrandRestRaw = "--foreground-ctrl-brand-rest";
+export const foregroundCtrlBrandRestRaw = "--smtc-foreground-ctrl-brand-rest";
 
 // @public (undocumented)
 export const foregroundCtrlNeutralPrimaryDisabled: string;
 
 // @public (undocumented)
-export const foregroundCtrlNeutralPrimaryHoverRaw = "--foreground-ctrl-neutral-primary-hover";
+export const foregroundCtrlNeutralPrimaryHoverRaw = "--smtc-foreground-ctrl-neutral-primary-hover";
 
 // @public (undocumented)
-export const foregroundCtrlNeutralPrimaryPressedRaw = "--foreground-ctrl-neutral-primary-pressed";
+export const foregroundCtrlNeutralPrimaryPressedRaw = "--smtc-foreground-ctrl-neutral-primary-pressed";
 
 // @public (undocumented)
-export const foregroundCtrlNeutralPrimaryRestRaw = "--foreground-ctrl-neutral-primary-rest";
+export const foregroundCtrlNeutralPrimaryRestRaw = "--smtc-foreground-ctrl-neutral-primary-rest";
 
 // @public (undocumented)
 export const foregroundCtrlOntransparentDisabled: string;

packages/semantic-tokens/playwright.config.ts

@@ -32,7 +32,7 @@ const config: PlaywrightTestConfig = {
     // },
   ],
   webServer: {
-    command: `node scripts/server.js --port 6006`,
+    command: `node scripts/server.js --smtc-port 6006`,
     port: 6006,
     reuseExistingServer: process.env.CI ? false : true,
   },

packages/semantic-tokens/src/components/link/tokens.ts

@@ -10,17 +10,17 @@ import {
 } from '../../control/variables';
 
 // Brand colors (Used as default Link control colors in Fluent 2)
-export const ctrlLinkForegroundBrandRestRaw = '--ctrl-link-foreground-brand-rest';
-export const ctrlLinkForegroundBrandHoverRaw = '--ctrl-link-foreground-brand-hover';
-export const ctrlLinkForegroundBrandPressedRaw = '--ctrl-link-foreground-brand-pressed';
+export const ctrlLinkForegroundBrandRestRaw = '--smtc-ctrl-link-foreground-brand-rest';
+export const ctrlLinkForegroundBrandHoverRaw = '--smtc-ctrl-link-foreground-brand-hover';
+export const ctrlLinkForegroundBrandPressedRaw = '--smtc-ctrl-link-foreground-brand-pressed';
 export const ctrlLinkForegroundBrandRest = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw},${tokens.colorBrandForegroundLink}))`;
 export const ctrlLinkForegroundBrandHover = `var(${ctrlLinkForegroundBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw},${tokens.colorBrandForegroundLinkHover}))`;
 export const ctrlLinkForegroundBrandPressed = `var(${ctrlLinkForegroundBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw},${tokens.colorBrandForegroundLinkPressed}))`;
 
 // Neutral colors (for non-branded use aka fluent2 'subtle')
-export const ctrlLinkForegroundNeutralRestRaw = '--ctrl-link-foreground-neutral-rest';
-export const ctrlLinkForegroundNeutralHoverRaw = '--ctrl-link-foreground-neutral-hover';
-export const ctrlLinkForegroundNeutralPressedRaw = '--ctrl-link-foreground-neutral-pressed';
+export const ctrlLinkForegroundNeutralRestRaw = '--smtc-ctrl-link-foreground-neutral-rest';
+export const ctrlLinkForegroundNeutralHoverRaw = '--smtc-ctrl-link-foreground-neutral-hover';
+export const ctrlLinkForegroundNeutralPressedRaw = '--smtc-ctrl-link-foreground-neutral-pressed';
 // In the design specs, this falls back to colorNeutralForeground1, but in fluent2 it falls back to colorNeutralForeground2
 export const ctrlLinkForegroundNeutralRest = `var(${ctrlLinkForegroundNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw},${tokens.colorNeutralForeground2}))`;
 export const ctrlLinkForegroundNeutralHover = `var(${ctrlLinkForegroundNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryHoverRaw},${tokens.colorNeutralForeground2Hover}))`;

packages/semantic-tokens/src/control/tokens.ts

@@ -5,16 +5,65 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
+import {
+  textGlobalBody1FontsizeRaw,
+  textGlobalBody1LineheightRaw,
+  textGlobalBody2FontsizeRaw,
+  textGlobalBody2LineheightRaw,
+  textGlobalBody3FontsizeRaw,
+  textGlobalBody3LineheightRaw,
+  textGlobalCaption1FontsizeRaw,
+  textGlobalCaption1LineheightRaw,
+  textGlobalCaption2FontsizeRaw,
+  textGlobalCaption2LineheightRaw,
+  textGlobalDisplay1FontsizeRaw,
+  textGlobalDisplay1LineheightRaw,
+  textGlobalDisplay2FontsizeRaw,
+  textGlobalDisplay2LineheightRaw,
+  textGlobalSubtitle1FontsizeRaw,
+  textGlobalSubtitle1LineheightRaw,
+  textGlobalSubtitle2FontsizeRaw,
+  textGlobalSubtitle2LineheightRaw,
+  textGlobalTitle1FontsizeRaw,
+  textGlobalTitle1LineheightRaw,
+  textGlobalTitle2FontsizeRaw,
+  textGlobalTitle2LineheightRaw,
+  textStyleDefaultHeaderWeightRaw,
+  textStyleDefaultRegularFontfamilyRaw,
+  textStyleDefaultRegularLetterspacingRaw,
+  textStyleDefaultRegularWeightRaw,
+} from './variables';
 
-// Text
-export const textStyleDefaultRegularFontfamily = `var(--text-style-default-regular-fontfamily, ${tokens.fontFamilyBase})`;
-export const textGlobalBody3Fontsize = `var(--text-global-body3-fontsize, ${tokens.fontSizeBase300})`;
-export const textStyleDefaultRegularWeight = `var(--text-style-default-regular-weight, ${tokens.fontWeightRegular})`;
+// Font sizes and line heights
+// TODO: Check fallbacks for below font size fallbacks (some unknowns)
+export const textGlobalDisplay1Fontsize = `var(${textGlobalDisplay1FontsizeRaw})`;
+export const textGlobalDisplay1Lineheight = `var(${textGlobalDisplay1LineheightRaw})`;
+export const textGlobalDisplay2Fontsize = `var(${textGlobalDisplay2FontsizeRaw})`;
+export const textGlobalDisplay2Lineheight = `var(${textGlobalDisplay2LineheightRaw})`;
+export const textGlobalTitle1Fontsize = `var(${textGlobalTitle1FontsizeRaw})`;
+export const textGlobalTitle1Lineheight = `var(${textGlobalTitle1LineheightRaw})`;
+export const textGlobalTitle2Fontsize = `var(${textGlobalTitle2FontsizeRaw})`;
+export const textGlobalTitle2Lineheight = `var(${textGlobalTitle2LineheightRaw})`;
+export const textGlobalSubtitle1Fontsize = `var(${textGlobalSubtitle1FontsizeRaw})`;
+export const textGlobalSubtitle1Lineheight = `var(${textGlobalSubtitle1LineheightRaw})`;
+export const textGlobalSubtitle2Fontsize = `var(${textGlobalSubtitle2FontsizeRaw})`;
+export const textGlobalSubtitle2Lineheight = `var(${textGlobalSubtitle2LineheightRaw})`;
+// TODO: Unknown font fallbacks end here
 
-// Stroke
-export const strokewidthDefault = `var(--strokewidth-default, ${tokens.strokeWidthThin})`;
-export const ctrlFocusOuterStroke = `var(--ctrl-focus-outer-stroke, ${tokens.colorStrokeFocus2})`;
+// Body and caption fonts
+export const textGlobalBody1Fontsize = `var(${textGlobalBody1FontsizeRaw})`;
+export const textGlobalBody1Lineheight = `var(${textGlobalBody1LineheightRaw})`;
+export const textGlobalBody2Fontsize = `var(${textGlobalBody2FontsizeRaw})`;
+export const textGlobalBody2Lineheight = `var(${textGlobalBody2LineheightRaw})`;
+export const textGlobalBody3Fontsize = `var(${textGlobalBody3FontsizeRaw})`;
+export const textGlobalBody3Lineheight = `var(${textGlobalBody3LineheightRaw})`;
+export const textGlobalCaption1Fontsize = `var(${textGlobalCaption1FontsizeRaw})`;
+export const textGlobalCaption1Lineheight = `var(${textGlobalCaption1LineheightRaw})`;
+export const textGlobalCaption2Fontsize = `var(${textGlobalCaption2FontsizeRaw})`;
+export const textGlobalCaption2Lineheight = `var(${textGlobalCaption2LineheightRaw})`;
 
-// Disabled
-export const foregroundCtrlOntransparentDisabled = `var(--foreground-ctrl-ontransparent-disabled, ${tokens.colorNeutralForegroundDisabled})`;
-export const foregroundCtrlNeutralPrimaryDisabled = `var(--foreground-ctrl-neutral-primary-disabled, ${tokens.colorNeutralForegroundDisabled})`;
+// Font family and weight
+export const textStyleDefaultRegularFontfamily = `var(${textStyleDefaultRegularFontfamilyRaw}, ${tokens.fontFamilyBase})`;
+export const textStyleDefaultRegularWeight = `var(${textStyleDefaultRegularWeightRaw}, ${tokens.fontWeightRegular})`;
+export const textStyleDefaultRegularLetterspacing = `var(${textStyleDefaultRegularLetterspacingRaw}, 'normal')`;
+export const textStyleDefaultHeaderWeight = `var(${textStyleDefaultHeaderWeightRaw})`;

packages/semantic-tokens/src/control/variables.ts

@@ -1,9 +1,26 @@
-// Brand control foreground CSS vars
-export const foregroundCtrlBrandRestRaw = '--foreground-ctrl-brand-rest';
-export const foregroundCtrlBrandHoverRaw = '--foreground-ctrl-brand-hover';
-export const foregroundCtrlBrandPressedRaw = '--foreground-ctrl-brand-pressed';
-
-// Control foreground CSS vars
-export const foregroundCtrlNeutralPrimaryRestRaw = '--foreground-ctrl-neutral-primary-rest';
-export const foregroundCtrlNeutralPrimaryHoverRaw = '--foreground-ctrl-neutral-primary-hover';
-export const foregroundCtrlNeutralPrimaryPressedRaw = '--foreground-ctrl-neutral-primary-pressed';
+export const textGlobalDisplay1FontsizeRaw = '--smtc-text-global-display1-fontsize';
+export const textGlobalDisplay2FontsizeRaw = '--smtc-text-global-display2-fontsize';
+export const textGlobalDisplay1LineheightRaw = '--smtc-text-global-display1-lineheight';
+export const textGlobalDisplay2LineheightRaw = '--smtc-text-global-display2-lineheight';
+export const textGlobalTitle1FontsizeRaw = '--smtc-text-global-title1-fontsize';
+export const textGlobalTitle1LineheightRaw = '--smtc-text-global-title1-lineheight';
+export const textGlobalTitle2FontsizeRaw = '--smtc-text-global-title2-fontsize';
+export const textGlobalTitle2LineheightRaw = '--smtc-text-global-title2-lineheight';
+export const textGlobalSubtitle1FontsizeRaw = '--smtc-text-global-subtitle1-fontsize';
+export const textGlobalSubtitle1LineheightRaw = '--smtc-text-global-subtitle1-lineheight';
+export const textGlobalSubtitle2FontsizeRaw = '--smtc-text-global-subtitle2-fontsize';
+export const textGlobalSubtitle2LineheightRaw = '--smtc-text-global-subtitle2-lineheight';
+export const textGlobalBody1FontsizeRaw = '--smtc-text-global-body1-fontsize';
+export const textGlobalBody1LineheightRaw = '--smtc-text-global-body1-lineheight';
+export const textGlobalBody2FontsizeRaw = '--smtc-text-global-body2-fontsize';
+export const textGlobalBody2LineheightRaw = '--smtc-text-global-body2-lineheight';
+export const textGlobalBody3FontsizeRaw = '--smtc-text-global-body3-fontsize';
+export const textGlobalBody3LineheightRaw = '--smtc-text-global-body3-lineheight';
+export const textGlobalCaption1FontsizeRaw = '--smtc-text-global-caption1-fontsize';
+export const textGlobalCaption1LineheightRaw = '--smtc-text-global-caption1-lineheight';
+export const textGlobalCaption2FontsizeRaw = '--smtc-text-global-caption2-fontsize';
+export const textGlobalCaption2LineheightRaw = '--smtc-text-global-caption2-lineheight';
+export const textStyleDefaultRegularFontfamilyRaw = '--smtc-text-style-default-regular-fontfamily';
+export const textStyleDefaultRegularWeightRaw = '--smtc-text-style-default-regular-weight';
+export const textStyleDefaultRegularLetterspacingRaw = '--smtc-text-style-default-regular-letterspacing';
+export const textStyleDefaultHeaderWeightRaw = '--smtc-text-style-default-header-weight';

packages/semantic-tokens/src/nullable/tokens.ts

@@ -0,0 +1,16 @@
+import {
+  textStyleAiHeaderCaseRaw,
+  textStyleArticleHeaderCaseRaw,
+  textStyleCodeHeaderCaseRaw,
+  textStyleDatavizHeaderCaseRaw,
+  textStyleDefaultHeaderCaseRaw,
+  textStyleQuoteHeaderCaseRaw,
+} from './variables';
+
+// TODO: Check header default? undefined? uppercase?
+export const textStyleDefaultHeaderCase = `var(${textStyleDefaultHeaderCaseRaw}, 'uppercase')`;
+export const textStyleCodeHeaderCase = `var(${textStyleCodeHeaderCaseRaw}, 'uppercase')`;
+export const textStyleAiHeaderCase = `var(${textStyleAiHeaderCaseRaw}, 'uppercase')`;
+export const textStyleArticleHeaderCase = `var(${textStyleArticleHeaderCaseRaw}, 'uppercase')`;
+export const textStyleDatavizHeaderCase = `var(${textStyleDatavizHeaderCaseRaw}, 'uppercase')`;
+export const textStyleQuoteHeaderCase = `var(${textStyleQuoteHeaderCaseRaw}, 'uppercase')`;

packages/semantic-tokens/src/nullable/variables.ts

@@ -0,0 +1,6 @@
+export const textStyleDefaultHeaderCaseRaw = '--smtc-text-style-default-header-case';
+export const textStyleCodeHeaderCaseRaw = '--smtc-text-style-code-header-case';
+export const textStyleAiHeaderCaseRaw = '--smtc-text-style-ai-header-case';
+export const textStyleArticleHeaderCaseRaw = '--smtc-text-style-article-header-case';
+export const textStyleDatavizHeaderCaseRaw = '--smtc-text-style-dataviz-header-case';
+export const textStyleQuoteHeaderCaseRaw = '--smtc-text-style-quote-header-case';