Initial script gen

microsoft · Mitch-At-Work · Feb 11, 2025 · Feb 12, 2025 · Feb 12, 2025 · Feb 14, 2025
commit 44bfcdfb66839529bf01ddc79789919155388507
@@ -25,16 +25,23 @@ interface ComponentTokenMap {
   [component: string]: string;
 }
 
+function exportImportHeaders() {
+  const esLintDisable = '// eslint-disable-next-line no-restricted-imports\n';
+  const importFluent = "import { tokens } from '@fluentui/tokens';\n\n";
+  return esLintDisable + importFluent;
+}
+
 function generateTokens() {
   console.log('Generating tokens...');
-  console.log('Imported JSON:', tokensJSON);
-  const ParsedJSON = JSON.stringify(tokensJSON);
-  console.log('ParsedJSON:', ParsedJSON);
   // Simple for now, just generate the raw strings and variables
   generateTokenRawStrings();
   generateTokenVariables();
 }
 
+function escapeInlineToken(token: string) {
+  return `\$\{${token}\}`;
+}
+
 function generateTokenRawStrings() {
   let optionalRawTokens = '';
   let controlRawTokens = '';
@@ -43,13 +50,13 @@ function generateTokenRawStrings() {
   for (const token in tokensJSON) {
     const tokenData: Token = tokensJSON[token];
     const tokenName = '--smtc-' + tokenData.name.split('/').join('-').toLowerCase();
-    const tokenRawString = `export const ${tokenData.name}Raw = '${tokenName}';\n`;
+    const tokenRawString = `export const ${token}Raw = '${tokenName}';\n`;
 
     if (tokenData.name.startsWith('CTRL/')) {
       // We have a component level control token
       const component = tokenData.name.split('/')[1];
       if (!componentTokens[component]) {
-        componentTokens[component] = "import { tokens } from '@fluentui/tokens';\n\n";
+        componentTokens[component] = '';
       }
       componentTokens[component] += tokenRawString;
     } else {
@@ -63,12 +70,17 @@ function generateTokenRawStrings() {
     }
   }
 
-  fs.writeFileSync('./optional/variables.ts', optionalRawTokens);
-  fs.writeFileSync('./control/variables.ts', controlRawTokens);
-  fs.writeFileSync('./nullable/variables.ts', nullableRawTokens);
+  fs.writeFileSync('./src/optional/variables.ts', optionalRawTokens);
+  fs.writeFileSync('./src/control/variables.ts', controlRawTokens);
+  fs.writeFileSync('./src/nullable/variables.ts', nullableRawTokens);
 
   for (const component in componentTokens) {
-    fs.writeFileSync(`../components/${component}/tokens.ts`, componentTokens[component]);
+    var dir = `./src/components/${component}/`;
+
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+    fs.writeFileSync(`./src/components/${component}/tokens.ts`, componentTokens[component]);
   }
 }
 
@@ -89,9 +101,9 @@ function toCamelCase(str: string) {
 function generateTokenVariables() {
   // Default our files to token imports
   // TODO: Add raw token imports
-  let optionalTokens = "import { tokens } from '@fluentui/tokens';\n\n";
-  let controlTokens = "import { tokens } from '@fluentui/tokens';\n\n";
-  let nullableTokens = "import { tokens } from '@fluentui/tokens';\n\n";
+  let optionalTokens = exportImportHeaders();
+  let controlTokens = exportImportHeaders();
+  let nullableTokens = exportImportHeaders();
   const componentTokens: ComponentTokenMap = {};
   for (const token in tokensJSON) {
     const tokenData: Token = tokensJSON[token];
@@ -110,6 +122,10 @@ function generateTokenVariables() {
         const tokenFallbackArr = tokenData.fallback.split('/');
         const tokenFallbackVal = tokenFallbackArr[tokenFallbackArr.length - 1];
         tokenFallback = `tokens.lineHeightBase${tokenFallbackVal}`;
+      } else if (tokenData.fallback.startsWith('Font-size')) {
+        const tokenFallbackArr = tokenData.fallback.split('/');
+        const tokenFallbackVal = tokenFallbackArr[tokenFallbackArr.length - 1];
+        tokenFallback = `tokens.fontSizeBase${tokenFallbackVal}`;
       } else {
         // handle base case
         tokenFallback = toCamelCase(tokenData.fallback) + 'Raw';
@@ -120,13 +136,15 @@ function generateTokenVariables() {
     // TODO: Check if a token has a FST reference that falls back to another FST/fluent fallback?
     if (tokenFallback && tokenSemanticRef) {
       // Token has both a FST fallback and a Fluent fallback
-      resolvedTokenFallback = `var(${tokenNameRaw}, var(${tokenSemanticRef}, ${tokenFallback}))`;
+      resolvedTokenFallback = `var(${escapeInlineToken(tokenNameRaw)}, var(${escapeInlineToken(
+        tokenSemanticRef,
+      )}, ${escapeInlineToken(tokenFallback)}))`;
     } else if (tokenSemanticRef) {
       // Token just has a FST reference fallback
-      resolvedTokenFallback = `var(${tokenNameRaw}, ${tokenSemanticRef})`;
+      resolvedTokenFallback = `var(${escapeInlineToken(tokenNameRaw)}, ${escapeInlineToken(tokenSemanticRef)})`;
     } else if (tokenFallback) {
       // Just in case a token falls back directly to a Fluent fallback
-      resolvedTokenFallback = `var(${tokenNameRaw}, ${tokenFallback})`;
+      resolvedTokenFallback = `var(${escapeInlineToken(tokenNameRaw)}, ${escapeInlineToken(tokenFallback)})`;
     }
 
     if (tokenData.name.startsWith('CTRL/')) {
@@ -135,25 +153,30 @@ function generateTokenVariables() {
       if (!componentTokens[component]) {
         componentTokens[component] = "import { tokens } from '@fluentui/tokens';\n\n";
       }
-      componentTokens[component] += `export const ${tokenData.name} = '${resolvedTokenFallback}';\n`;
+      componentTokens[component] += `export const ${token} = '${resolvedTokenFallback}';\n`;
     } else {
       // We have a global token
       if (tokenData.optional) {
-        optionalTokens += `export const ${tokenData.name} = '${resolvedTokenFallback}';\n`;
+        optionalTokens += `export const ${token} = '${resolvedTokenFallback}';\n`;
       } else if (tokenData.nullable) {
-        nullableTokens += `export const ${tokenData.name} = '${resolvedTokenFallback}';\n`;
+        nullableTokens += `export const ${token} = '${resolvedTokenFallback}';\n`;
       } else {
-        controlTokens += `export const ${tokenData.name} = '${resolvedTokenFallback}';\n`;
+        controlTokens += `export const ${token} = '${resolvedTokenFallback}';\n`;
       }
     }
   }
 
-  fs.writeFileSync('./optional/tokens.ts', optionalTokens);
-  fs.writeFileSync('./control/tokens.ts', controlTokens);
-  fs.writeFileSync('./nullable/tokens.ts', nullableTokens);
+  fs.writeFileSync('./src/optional/tokens.ts', optionalTokens);
+  fs.writeFileSync('./src/control/tokens.ts', controlTokens);
+  fs.writeFileSync('./src/nullable/tokens.ts', nullableTokens);
 
   for (const component in componentTokens) {
-    fs.writeFileSync(`../components/${component}/tokens.ts`, componentTokens[component]);
+    var dir = `./src/components/${component}/`;
+
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+    fs.writeFileSync(`./src/components/${component}/tokens.ts`, componentTokens[component]);
   }
 }
 

@@ -0,0 +1,19 @@
+import { tokens } from '@fluentui/tokens';
+
+export const ctrlAvatarSize = 'var(${ctrlAvatarSizeRaw}, var(${sizeCtrlDefaultRaw}, ${📦 sizeAvatarSizeRaw}))';
+export const ctrlAvatarCornerItem = 'var(${ctrlAvatarCornerItemRaw}, var(${cornerCircularRaw}, ${cornerCircularRaw}))';
+export const ctrlAvatarBackground = 'var(${ctrlAvatarBackgroundRaw}, ${neutralBackground6RestRaw})';
+export const ctrlAvatarForeground = 'var(${ctrlAvatarForegroundRaw}, ${neutralForeground3RestRaw})';
+export const ctrlAvatarIconSize = 'var(${ctrlAvatarIconSizeRaw}, ${sizeCtrlIconRaw})';
+export const ctrlAvatarPresencebadgeSize = 'var(ctrlAvatarPresencebadgeSizeRaw)';
+export const ctrlAvatarActiveringSize = 'var(ctrlAvatarActiveringSizeRaw)';
+export const ctrlAvatarPresencebadgePaddingBottomrightoffset = 'var(${ctrlAvatarPresencebadgePaddingBottomrightoffsetRaw}, ${strokewidthDefaultRaw})';
+export const ctrlAvatarCornerGroup = 'var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}, ${📦 sizeAvatarCornerGroupRaw}))';
+export const ctrlAvatarActiveringStrokewidth = 'var(ctrlAvatarActiveringStrokewidthRaw)';
+export const ctrlAvatarPresencebadgeStrokewidth = 'var(${ctrlAvatarPresencebadgeStrokewidthRaw}, ${strokewidthDefaultRaw})';
+export const ctrlAvatarTextFontsize = 'var(${ctrlAvatarTextFontsizeRaw}, ${textGlobalBody3FontsizeRaw})';
+export const ctrlAvatarTextLineheight = 'var(${ctrlAvatarTextLineheightRaw}, ${textGlobalBody3LineheightRaw})';
+export const ctrlAvatarTextPaddingTopoffset = 'var(${ctrlAvatarTextPaddingTopoffsetRaw}, ${nullNumberRaw})';
+export const ctrlAvatarActiveringStroke = 'var(${ctrlAvatarActiveringStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${📦 colorAvatarActive ringRaw}))';
+export const ctrlAvatarShowcutout = 'var(ctrlAvatarShowcutoutRaw)';
+export const ctrlAvatarPresencebadgeBackgroundBehindbadge = 'var(${ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw}, ${backgroundLayerPrimary (solid)Raw})';
@@ -0,0 +1,26 @@
+import { tokens } from '@fluentui/tokens';
+
+export const ctrlBadgeTextPaddingTop = 'var(ctrlBadgeTextPaddingTopRaw)';
+export const ctrlBadgeTextPaddingBottom = 'var(${ctrlBadgeTextPaddingBottomRaw}, ${ctrlBadgeTextPaddingTopRaw})';
+export const ctrlBadgeSmTextPaddingTop = 'var(ctrlBadgeSmTextPaddingTopRaw)';
+export const ctrlBadgeSmTextPaddingBottom = 'var(${ctrlBadgeSmTextPaddingBottomRaw}, ${ctrlBadgeSmTextPaddingTopRaw})';
+export const ctrlBadgeLgTextPaddingTop = 'var(ctrlBadgeLgTextPaddingTopRaw)';
+export const ctrlBadgeLgTextPaddingBottom = 'var(${ctrlBadgeLgTextPaddingBottomRaw}, ${ctrlBadgeLgTextPaddingTopRaw})';
+export const ctrlBadgeIconTheme = 'var(${ctrlBadgeIconThemeRaw}, ${iconthemeCtrlDefaultRestRaw})';
+export const ctrlBadgeBeaconSize = 'var(ctrlBadgeBeaconSizeRaw)';
+export const ctrlBadgeSize = 'var(ctrlBadgeSizeRaw)';
+export const ctrlBadgeCorner = 'var(ctrlBadgeCornerRaw)';
+export const ctrlBadgeIconSizeFigmaOnly = 'var(ctrlBadgeIconSizeFigmaOnlyRaw)';
+export const ctrlBadgeGap = 'var(ctrlBadgeGapRaw)';
+export const ctrlBadgeIconSize = 'var(ctrlBadgeIconSizeRaw)';
+export const ctrlBadgePadding = 'var(ctrlBadgePaddingRaw)';
+export const ctrlBadgeSmSize = 'var(ctrlBadgeSmSizeRaw)';
+export const ctrlBadgeSmCorner = 'var(ctrlBadgeSmCornerRaw)';
+export const ctrlBadgeSmIconSizeFigmaOnly = 'var(ctrlBadgeSmIconSizeFigmaOnlyRaw)';
+export const ctrlBadgeSmIconSize = 'var(ctrlBadgeSmIconSizeRaw)';
+export const ctrlBadgeSmPadding = 'var(ctrlBadgeSmPaddingRaw)';
+export const ctrlBadgeLgSize = 'var(ctrlBadgeLgSizeRaw)';
+export const ctrlBadgeLgIconSizeFigmaOnly = 'var(ctrlBadgeLgIconSizeFigmaOnlyRaw)';
+export const ctrlBadgeLgIconSize = 'var(ctrlBadgeLgIconSizeRaw)';
+export const ctrlBadgeLgCorner = 'var(ctrlBadgeLgCornerRaw)';
+export const ctrlBadgeLgPadding = 'var(ctrlBadgeLgPaddingRaw)';
@@ -0,0 +1,3 @@
+import { tokens } from '@fluentui/tokens';
+
+export const ctrlBooleanSelectionhint = 'var(ctrlBooleanSelectionhintRaw)';
@@ -0,0 +1,71 @@
+import { tokens } from '@fluentui/tokens';
+
+export const ctrlChoicePaddingHorizontal = 'var(${ctrlChoicePaddingHorizontalRaw}, ${horizontalSRaw})';
+export const ctrlChoicePaddingVertical = 'var(${ctrlChoicePaddingVerticalRaw}, ${verticalNoneRaw})';
+export const ctrlChoiceBaseSize = 'var(${ctrlChoiceBaseSizeRaw}, ${sizeCtrlIconRaw})';
+export const ctrlChoiceIconTheme = 'var(ctrlChoiceIconThemeRaw)';
+export const ctrlChoiceBaseBackgroundRest = 'var(${ctrlChoiceBaseBackgroundRestRaw}, var(${backgroundCtrlOutlineRestRaw}, ${neutralBackgroundTransparentRestRaw}))';
+export const ctrlChoiceBaseBackgroundHover = 'var(${ctrlChoiceBaseBackgroundHoverRaw}, var(${backgroundCtrlOutlineHoverRaw}, ${neutralBackgroundTransparentHoverRaw}))';
+export const ctrlChoiceBaseBackgroundPressed = 'var(${ctrlChoiceBaseBackgroundPressedRaw}, var(${backgroundCtrlOutlinePressedRaw}, ${neutralBackgroundTransparentPressedRaw}))';
+export const ctrlChoiceBaseBackgroundDisabled = 'var(${ctrlChoiceBaseBackgroundDisabledRaw}, var(${backgroundCtrlOutlineDisabledRaw}, ${neutralBackgroundTransparentPressedRaw}))';
+export const ctrlChoiceBaseBackgroundIndeterminateRest = 'var(${ctrlChoiceBaseBackgroundIndeterminateRestRaw}, var(${backgroundCtrlBrandRestRaw}, ${neutralBackgroundTransparentRestRaw}))';
+export const ctrlChoiceBaseBackgroundIndeterminateHover = 'var(${ctrlChoiceBaseBackgroundIndeterminateHoverRaw}, var(${backgroundCtrlBrandHoverRaw}, ${neutralBackgroundTransparentHoverRaw}))';
+export const ctrlChoiceBaseBackgroundIndeterminatePressed = 'var(${ctrlChoiceBaseBackgroundIndeterminatePressedRaw}, var(${backgroundCtrlBrandPressedRaw}, ${neutralBackgroundTransparentPressedRaw}))';
+export const ctrlChoiceBaseBackgroundIndeterminateDisabled = 'var(${ctrlChoiceBaseBackgroundIndeterminateDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}, ${neutralBackgroundTransparentPressedRaw}))';
+export const ctrlChoiceBaseStrokeRest = 'var(${ctrlChoiceBaseStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${neutralStrokeAccessibleRestRaw}))';
+export const ctrlChoiceBaseStrokeHover = 'var(${ctrlChoiceBaseStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${neutralStrokeAccessibleHoverRaw}))';
+export const ctrlChoiceBaseStrokePressed = 'var(${ctrlChoiceBaseStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${neutralStrokeAccessiblePressedRaw}))';
+export const ctrlChoiceBaseStrokeDisabled = 'var(${ctrlChoiceBaseStrokeDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}, ${neutralStrokeDisabledRestRaw}))';
+export const ctrlChoiceBaseStrokeIndeterminateRest = 'var(${ctrlChoiceBaseStrokeIndeterminateRestRaw}, var(${backgroundCtrlBrandRestRaw}, ${neutralBackgroundTransparentRestRaw}))';
+export const ctrlChoiceBaseStrokeIndeterminateHover = 'var(${ctrlChoiceBaseStrokeIndeterminateHoverRaw}, var(${backgroundCtrlBrandHoverRaw}, ${neutralBackgroundTransparentHoverRaw}))';
+export const ctrlChoiceBaseStrokeIndeterminatePressed = 'var(${ctrlChoiceBaseStrokeIndeterminatePressedRaw}, var(${backgroundCtrlBrandPressedRaw}, ${neutralBackgroundTransparentPressedRaw}))';
+export const ctrlChoiceBaseStrokeIndeterminateDisabled = 'var(${ctrlChoiceBaseStrokeIndeterminateDisabledRaw}, var(${backgroundCtrlBrandDisabledRaw}, ${neutralBackgroundTransparentPressedRaw}))';
+export const ctrlChoiceForegroundIndeterminateRest = 'var(${ctrlChoiceForegroundIndeterminateRestRaw}, var(${foregroundCtrlOnbrandRestRaw}, ${neutralBackgroundTransparentRestRaw}))';
+export const ctrlChoiceForegroundIndeterminateHover = 'var(${ctrlChoiceForegroundIndeterminateHoverRaw}, var(${foregroundCtrlOnbrandHoverRaw}, ${neutralBackgroundTransparentHoverRaw}))';
+export const ctrlChoiceForegroundIndeterminatePressed = 'var(${ctrlChoiceForegroundIndeterminatePressedRaw}, var(${foregroundCtrlOnbrandPressedRaw}, ${neutralBackgroundTransparentPressedRaw}))';
+export const ctrlChoiceForegroundIndeterminateDisabled = 'var(${ctrlChoiceForegroundIndeterminateDisabledRaw}, var(${foregroundCtrlOnbrandDisabledRaw}, ${neutralBackgroundTransparentPressedRaw}))';
+export const ctrlChoiceCheckboxIconSize = 'var(${ctrlChoiceCheckboxIconSizeRaw}, ${sizeCtrlIconsecondaryRaw})';
+export const ctrlChoiceCheckboxCorner = 'var(${ctrlChoiceCheckboxCornerRaw}, ${smallRaw})';
+export const ctrlChoiceRadioCorner = 'var(${ctrlChoiceRadioCornerRaw}, var(${cornerCircularRaw}, ${cornerCircularRaw}))';
+export const ctrlChoiceSwitchCorner = 'var(${ctrlChoiceSwitchCornerRaw}, var(${cornerCircularRaw}, ${cornerCircularRaw}))';
+export const ctrlChoiceRadioDotSizeRest = 'var(ctrlChoiceRadioDotSizeRestRaw)';
+export const ctrlChoiceRadioDotSizeHover = 'var(${ctrlChoiceRadioDotSizeHoverRaw}, ${ctrlChoiceRadioDotSizeRestRaw})';
+export const ctrlChoiceRadioDotSizePressed = 'var(${ctrlChoiceRadioDotSizePressedRaw}, ${ctrlChoiceRadioDotSizeRestRaw})';
+export const ctrlChoiceSwitchPaddingRest = 'var(ctrlChoiceSwitchPaddingRestRaw)';
+export const ctrlChoiceSwitchPaddingHover = 'var(${ctrlChoiceSwitchPaddingHoverRaw}, ${ctrlChoiceSwitchPaddingRestRaw})';
+export const ctrlChoiceSwitchPaddingPressed = 'var(${ctrlChoiceSwitchPaddingPressedRaw}, ${ctrlChoiceSwitchPaddingRestRaw})';
+export const ctrlChoiceSwitchHeight = 'var(${ctrlChoiceSwitchHeightRaw}, ${sizeCtrlIconRaw})';
+export const ctrlChoiceSwitchWidth = 'var(ctrlChoiceSwitchWidthRaw)';
+export const ctrlChoiceSwitchThumbWidthRest = 'var(ctrlChoiceSwitchThumbWidthRestRaw)';
+export const ctrlChoiceSwitchThumbWidthHover = 'var(${ctrlChoiceSwitchThumbWidthHoverRaw}, ${ctrlChoiceSwitchThumbWidthRestRaw})';
+export const ctrlChoiceSwitchThumbWidthPressed = 'var(${ctrlChoiceSwitchThumbWidthPressedRaw}, ${ctrlChoiceSwitchThumbWidthRestRaw})';
+export const ctrlChoiceSwitchThumbShadowKeyX = 'var(${ctrlChoiceSwitchThumbShadowKeyXRaw}, var(${nullNumberRaw}, ${nullNumberRaw}))';
+export const ctrlChoiceSwitchThumbShadowKeyY = 'var(${ctrlChoiceSwitchThumbShadowKeyYRaw}, var(${nullNumberRaw}, ${nullNumberRaw}))';
+export const ctrlChoiceSwitchThumbShadowKeyBlur = 'var(${ctrlChoiceSwitchThumbShadowKeyBlurRaw}, var(${nullNumberRaw}, ${nullNumberRaw}))';
+export const ctrlChoiceSwitchThumbShadowKeyColor = 'var(${ctrlChoiceSwitchThumbShadowKeyColorRaw}, var(${nullColorRaw}, ${nullColorRaw}))';
+export const ctrlChoiceSwitchThumbShadowAmbientX = 'var(${ctrlChoiceSwitchThumbShadowAmbientXRaw}, var(${nullNumberRaw}, ${nullNumberRaw}))';
+export const ctrlChoiceSwitchThumbShadowAmbientY = 'var(${ctrlChoiceSwitchThumbShadowAmbientYRaw}, var(${nullNumberRaw}, ${nullNumberRaw}))';
+export const ctrlChoiceSwitchThumbShadowAmbientBlur = 'var(${ctrlChoiceSwitchThumbShadowAmbientBlurRaw}, var(${nullNumberRaw}, ${nullNumberRaw}))';
+export const ctrlChoiceSwitchThumbShadowAmbientColor = 'var(${ctrlChoiceSwitchThumbShadowAmbientColorRaw}, var(${nullColorRaw}, ${nullColorRaw}))';
+export const ctrlChoiceSmBaseSize = 'var(${ctrlChoiceSmBaseSizeRaw}, ${sizeCtrl-smIconRaw})';
+export const ctrlChoiceSmCheckboxIconSize = 'var(${ctrlChoiceSmCheckboxIconSizeRaw}, ${sizeCtrlIconsecondaryRaw})';
+export const ctrlChoiceSmCheckboxCorner = 'var(${ctrlChoiceSmCheckboxCornerRaw}, ${smallRaw})';
+export const ctrlChoiceSmCheckboxIconSizeFigmaOnly = 'var(ctrlChoiceSmCheckboxIconSizeFigmaOnlyRaw)';
+export const ctrlChoiceSmRadioDotSize = 'var(ctrlChoiceSmRadioDotSizeRaw)';
+export const ctrlChoiceSmSwitchWidth = 'var(ctrlChoiceSmSwitchWidthRaw)';
+export const ctrlChoiceSmSwitchHeight = 'var(${ctrlChoiceSmSwitchHeightRaw}, ${sizeCtrl-smIconRaw})';
+export const ctrlChoiceSmSwitchThumbWidthRest = 'var(ctrlChoiceSmSwitchThumbWidthRestRaw)';
+export const ctrlChoiceSmSwitchThumbWidthHover = 'var(${ctrlChoiceSmSwitchThumbWidthHoverRaw}, ${ctrlChoiceSmSwitchThumbWidthRestRaw})';
+export const ctrlChoiceSmSwitchThumbWidthPressed = 'var(${ctrlChoiceSmSwitchThumbWidthPressedRaw}, ${ctrlChoiceSmSwitchThumbWidthRestRaw})';
+export const ctrlChoiceLgBaseSize = 'var(${ctrlChoiceLgBaseSizeRaw}, ${sizeCtrl-lgIconRaw})';
+export const ctrlChoiceLgCheckboxCorner = 'var(${ctrlChoiceLgCheckboxCornerRaw}, ${smallRaw})';
+export const ctrlChoiceLgCheckboxIconSize = 'var(${ctrlChoiceLgCheckboxIconSizeRaw}, ${sizeCtrlIconsecondaryRaw})';
+export const ctrlChoiceLgCheckboxIconSizeFigmaOnly = 'var(ctrlChoiceLgCheckboxIconSizeFigmaOnlyRaw)';
+export const ctrlChoiceLgRadioDotSizeRest = 'var(ctrlChoiceLgRadioDotSizeRestRaw)';
+export const ctrlChoiceLgRadioDotSizeHover = 'var(${ctrlChoiceLgRadioDotSizeHoverRaw}, ${ctrlChoiceLgRadioDotSizeRestRaw})';
+export const ctrlChoiceLgRadioDotSizePressed = 'var(${ctrlChoiceLgRadioDotSizePressedRaw}, ${ctrlChoiceLgRadioDotSizeRestRaw})';
+export const ctrlChoiceLgSwitchWidth = 'var(ctrlChoiceLgSwitchWidthRaw)';
+export const ctrlChoiceLgSwitchHeight = 'var(${ctrlChoiceLgSwitchHeightRaw}, ${sizeCtrl-lgIconRaw})';
+export const ctrlChoiceLgSwitchThumbWidthRest = 'var(ctrlChoiceLgSwitchThumbWidthRestRaw)';
+export const ctrlChoiceLgSwitchThumbWidthHover = 'var(${ctrlChoiceLgSwitchThumbWidthHoverRaw}, ${ctrlChoiceLgSwitchThumbWidthRestRaw})';
+export const ctrlChoiceLgSwitchThumbWidthPressed = 'var(${ctrlChoiceLgSwitchThumbWidthPressedRaw}, ${ctrlChoiceLgSwitchThumbWidthRestRaw})';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { tokens } from '@fluentui/tokens';

		export const ctrlBooleanSelectionhint = 'var(ctrlBooleanSelectionhintRaw)';