Semantic Tokens: Generate token baseline

packages/semantic-tokens/scripts/tokenGen.ts

@@ -20,6 +20,8 @@ const tokensJSON = dedupeShadowTokens(tokensJSONRaw);
 const fluentFallbacks: FluentOverrides = fluentFallbacksRaw;
 // Store exports so we can add them to index.ts at the end
 const exportList: Record<string, string[]> = {};
+// Add an automated header warning to each file to prevent direct modifications
+const headerWarning = '// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE\n';
 
 const generateTokens = () => {
   console.log('Generating tokens...');
@@ -234,7 +236,7 @@ const generateTokenVariables = () => {
     });
 
     // Format our text to match prettier rules
-    sourceFile.replaceWithText(formattedText);
+    sourceFile.replaceWithText(headerWarning + formattedText);
   });
 
   // Save changes so far
@@ -266,7 +268,7 @@ const generateTokenVariables = () => {
   });
 
   // Format our text to match prettier rules
-  indexSourceFile.replaceWithText(formattedText);
+  indexSourceFile.replaceWithText(headerWarning + formattedText);
 
   // Save exports
   project.saveSync();

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

@@ -0,0 +1,49 @@
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+import {
+  sizeCtrlDefaultRaw,
+  cornerCircularRaw,
+  sizeCtrlIconRaw,
+  strokewidthDefaultRaw,
+  cornerCtrlRestRaw,
+  textGlobalBody3FontsizeRaw,
+  textGlobalBody3LineheightRaw,
+  backgroundCtrlBrandRestRaw,
+  backgroundLayerPrimarySolidRaw,
+} from '../../control/variables';
+import {
+  ctrlAvatarSizeRaw,
+  ctrlAvatarCornerItemRaw,
+  ctrlAvatarBackgroundRaw,
+  ctrlAvatarForegroundRaw,
+  ctrlAvatarIconSizeRaw,
+  ctrlAvatarPresencebadgeSizeRaw,
+  ctrlAvatarActiveringSizeRaw,
+  ctrlAvatarPresencebadgePaddingBottomrightoffsetRaw,
+  ctrlAvatarCornerGroupRaw,
+  ctrlAvatarActiveringStrokewidthRaw,
+  ctrlAvatarPresencebadgeStrokewidthRaw,
+  ctrlAvatarTextFontsizeRaw,
+  ctrlAvatarTextLineheightRaw,
+  ctrlAvatarTextPaddingTopoffsetRaw,
+  ctrlAvatarActiveringStrokeRaw,
+  ctrlAvatarShowcutoutRaw,
+  ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw,
+} from './variables';
+
+export const ctrlAvatarSize = `var(${ctrlAvatarSizeRaw}, var(${sizeCtrlDefaultRaw}))`;
+export const ctrlAvatarCornerItem = `var(${ctrlAvatarCornerItemRaw}, var(${cornerCircularRaw}))`;
+export const ctrlAvatarBackground = `var(${ctrlAvatarBackgroundRaw})`;
+export const ctrlAvatarForeground = `var(${ctrlAvatarForegroundRaw})`;
+export const ctrlAvatarIconSize = `var(${ctrlAvatarIconSizeRaw}, var(${sizeCtrlIconRaw}))`;
+export const ctrlAvatarPresencebadgeSize = `var(${ctrlAvatarPresencebadgeSizeRaw})`;
+export const ctrlAvatarActiveringSize = `var(${ctrlAvatarActiveringSizeRaw})`;
+export const ctrlAvatarPresencebadgePaddingBottomrightoffset = `var(${ctrlAvatarPresencebadgePaddingBottomrightoffsetRaw}, var(${strokewidthDefaultRaw}))`;
+export const ctrlAvatarCornerGroup = `var(${ctrlAvatarCornerGroupRaw}, var(${cornerCtrlRestRaw}))`;
+export const ctrlAvatarActiveringStrokewidth = `var(${ctrlAvatarActiveringStrokewidthRaw})`;
+export const ctrlAvatarPresencebadgeStrokewidth = `var(${ctrlAvatarPresencebadgeStrokewidthRaw}, var(${strokewidthDefaultRaw}))`;
+export const ctrlAvatarTextFontsize = `var(${ctrlAvatarTextFontsizeRaw}, var(${textGlobalBody3FontsizeRaw}))`;
+export const ctrlAvatarTextLineheight = `var(${ctrlAvatarTextLineheightRaw}, var(${textGlobalBody3LineheightRaw}))`;
+export const ctrlAvatarTextPaddingTopoffset = `var(${ctrlAvatarTextPaddingTopoffsetRaw}, unset)`;
+export const ctrlAvatarActiveringStroke = `var(${ctrlAvatarActiveringStrokeRaw}, var(${backgroundCtrlBrandRestRaw}))`;
+export const ctrlAvatarShowcutout = `var(${ctrlAvatarShowcutoutRaw})`;
+export const ctrlAvatarPresencebadgeBackgroundBehindbadge = `var(${ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw}, var(${backgroundLayerPrimarySolidRaw}))`;

packages/semantic-tokens/src/components/avatar/variables.ts

@@ -0,0 +1,20 @@
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+export const ctrlAvatarSizeRaw = '--smtc-ctrl-avatar-size';
+export const ctrlAvatarCornerItemRaw = '--smtc-ctrl-avatar-corner-item';
+export const ctrlAvatarBackgroundRaw = '--smtc-ctrl-avatar-background';
+export const ctrlAvatarForegroundRaw = '--smtc-ctrl-avatar-foreground';
+export const ctrlAvatarIconSizeRaw = '--smtc-ctrl-avatar-icon-size';
+export const ctrlAvatarPresencebadgeSizeRaw = '--smtc-ctrl-avatar-presencebadge-size';
+export const ctrlAvatarActiveringSizeRaw = '--smtc-ctrl-avatar-activering-size';
+export const ctrlAvatarPresencebadgePaddingBottomrightoffsetRaw =
+  '--smtc-ctrl-avatar-presencebadge-padding-bottomrightoffset';
+export const ctrlAvatarCornerGroupRaw = '--smtc-ctrl-avatar-corner-group';
+export const ctrlAvatarActiveringStrokewidthRaw = '--smtc-ctrl-avatar-activering-strokewidth';
+export const ctrlAvatarPresencebadgeStrokewidthRaw = '--smtc-ctrl-avatar-presencebadge-strokewidth';
+export const ctrlAvatarTextFontsizeRaw = '--smtc-ctrl-avatar-text-fontsize';
+export const ctrlAvatarTextLineheightRaw = '--smtc-ctrl-avatar-text-lineheight';
+export const ctrlAvatarTextPaddingTopoffsetRaw = '--smtc-ctrl-avatar-text-padding-topoffset';
+export const ctrlAvatarActiveringStrokeRaw = '--smtc-ctrl-avatar-activering-stroke';
+export const ctrlAvatarShowcutoutRaw = '--smtc-ctrl-avatar-showcutout';
+export const ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw =
+  '--smtc-ctrl-avatar-presencebadge-background-behindbadge';

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

@@ -0,0 +1,53 @@
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+import { iconthemeCtrlDefaultRestRaw } from '../../control/variables';
+import {
+  ctrlBadgeTextPaddingTopRaw,
+  ctrlBadgeTextPaddingBottomRaw,
+  ctrlBadgeSmTextPaddingTopRaw,
+  ctrlBadgeSmTextPaddingBottomRaw,
+  ctrlBadgeLgTextPaddingTopRaw,
+  ctrlBadgeLgTextPaddingBottomRaw,
+  ctrlBadgeIconThemeRaw,
+  ctrlBadgeBeaconSizeRaw,
+  ctrlBadgeSizeRaw,
+  ctrlBadgeCornerRaw,
+  ctrlBadgeIconSizeFigmaonlyRaw,
+  ctrlBadgeGapRaw,
+  ctrlBadgeIconSizeRaw,
+  ctrlBadgePaddingRaw,
+  ctrlBadgeSmSizeRaw,
+  ctrlBadgeSmCornerRaw,
+  ctrlBadgeSmIconSizeFigmaonlyRaw,
+  ctrlBadgeSmIconSizeRaw,
+  ctrlBadgeSmPaddingRaw,
+  ctrlBadgeLgSizeRaw,
+  ctrlBadgeLgIconSizeFigmaonlyRaw,
+  ctrlBadgeLgIconSizeRaw,
+  ctrlBadgeLgCornerRaw,
+  ctrlBadgeLgPaddingRaw,
+} from './variables';
+
+export const ctrlBadgeTextPaddingTop = `var(${ctrlBadgeTextPaddingTopRaw})`;
+export const ctrlBadgeTextPaddingBottom = `var(${ctrlBadgeTextPaddingBottomRaw}, var(${ctrlBadgeTextPaddingTopRaw}))`;
+export const ctrlBadgeSmTextPaddingTop = `var(${ctrlBadgeSmTextPaddingTopRaw})`;
+export const ctrlBadgeSmTextPaddingBottom = `var(${ctrlBadgeSmTextPaddingBottomRaw}, var(${ctrlBadgeSmTextPaddingTopRaw}))`;
+export const ctrlBadgeLgTextPaddingTop = `var(${ctrlBadgeLgTextPaddingTopRaw})`;
+export const ctrlBadgeLgTextPaddingBottom = `var(${ctrlBadgeLgTextPaddingBottomRaw}, var(${ctrlBadgeLgTextPaddingTopRaw}))`;
+export const ctrlBadgeIconTheme = `var(${ctrlBadgeIconThemeRaw}, var(${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})`;

packages/semantic-tokens/src/components/badge/variables.ts

@@ -0,0 +1,25 @@
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+export const ctrlBadgeTextPaddingTopRaw = '--smtc-ctrl-badge-text-padding-top';
+export const ctrlBadgeTextPaddingBottomRaw = '--smtc-ctrl-badge-text-padding-bottom';
+export const ctrlBadgeSmTextPaddingTopRaw = '--smtc-ctrl-badge-sm-text-padding-top';
+export const ctrlBadgeSmTextPaddingBottomRaw = '--smtc-ctrl-badge-sm-text-padding-bottom';
+export const ctrlBadgeLgTextPaddingTopRaw = '--smtc-ctrl-badge-lg-text-padding-top';
+export const ctrlBadgeLgTextPaddingBottomRaw = '--smtc-ctrl-badge-lg-text-padding-bottom';
+export const ctrlBadgeIconThemeRaw = '--smtc-ctrl-badge-icon-theme';
+export const ctrlBadgeBeaconSizeRaw = '--smtc-ctrl-badge-beacon-size';
+export const ctrlBadgeSizeRaw = '--smtc-ctrl-badge-size';
+export const ctrlBadgeCornerRaw = '--smtc-ctrl-badge-corner';
+export const ctrlBadgeIconSizeFigmaonlyRaw = '--smtc-ctrl-badge-icon-sizefigmaonly';
+export const ctrlBadgeGapRaw = '--smtc-ctrl-badge-gap';
+export const ctrlBadgeIconSizeRaw = '--smtc-ctrl-badge-icon-size';
+export const ctrlBadgePaddingRaw = '--smtc-ctrl-badge-padding';
+export const ctrlBadgeSmSizeRaw = '--smtc-ctrl-badge-sm-size';
+export const ctrlBadgeSmCornerRaw = '--smtc-ctrl-badge-sm-corner';
+export const ctrlBadgeSmIconSizeFigmaonlyRaw = '--smtc-ctrl-badge-sm-icon-sizefigmaonly';
+export const ctrlBadgeSmIconSizeRaw = '--smtc-ctrl-badge-sm-icon-size';
+export const ctrlBadgeSmPaddingRaw = '--smtc-ctrl-badge-sm-padding';
+export const ctrlBadgeLgSizeRaw = '--smtc-ctrl-badge-lg-size';
+export const ctrlBadgeLgIconSizeFigmaonlyRaw = '--smtc-ctrl-badge-lg-icon-sizefigmaonly';
+export const ctrlBadgeLgIconSizeRaw = '--smtc-ctrl-badge-lg-icon-size';
+export const ctrlBadgeLgCornerRaw = '--smtc-ctrl-badge-lg-corner';
+export const ctrlBadgeLgPaddingRaw = '--smtc-ctrl-badge-lg-padding';

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

@@ -0,0 +1,4 @@
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+import { ctrlBooleanSelectionhintRaw } from './variables';
+
+export const ctrlBooleanSelectionhint = `var(${ctrlBooleanSelectionhintRaw})`;

packages/semantic-tokens/src/components/boolean/variables.ts

@@ -0,0 +1,2 @@
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+export const ctrlBooleanSelectionhintRaw = '--smtc-ctrl-boolean-selectionhint';

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

@@ -0,0 +1,12 @@
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+import {
+  ctrlCardStateRestRaw,
+  ctrlCardStateHoverRaw,
+  ctrlCardStatePressedRaw,
+  ctrlCardStateDisabledRaw,
+} from './variables';
+
+export const ctrlCardStateRest = `var(${ctrlCardStateRestRaw})`;
+export const ctrlCardStateHover = `var(${ctrlCardStateHoverRaw})`;
+export const ctrlCardStatePressed = `var(${ctrlCardStatePressedRaw})`;
+export const ctrlCardStateDisabled = `var(${ctrlCardStateDisabledRaw})`;

packages/semantic-tokens/src/components/card/variables.ts

@@ -0,0 +1,5 @@
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+export const ctrlCardStateRestRaw = '--smtc-ctrl-card-state-rest';
+export const ctrlCardStateHoverRaw = '--smtc-ctrl-card-state-hover';
+export const ctrlCardStatePressedRaw = '--smtc-ctrl-card-state-pressed';
+export const ctrlCardStateDisabledRaw = '--smtc-ctrl-card-state-disabled';

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

@@ -0,0 +1,127 @@
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+import {
+  sizeCtrlIconRaw,
+  foregroundCtrlNeutralSecondaryRestRaw,
+  foregroundCtrlNeutralSecondaryDisabledRaw,
+  sizeCtrlIconsecondaryRaw,
+  cornerCircularRaw,
+  sizeCtrlSmIconRaw,
+  sizeCtrlLgIconRaw,
+} from '../../control/variables';
+import {
+  backgroundCtrlOutlineRestRaw,
+  backgroundCtrlOutlineHoverRaw,
+  backgroundCtrlOutlinePressedRaw,
+  backgroundCtrlOutlineDisabledRaw,
+} from '../../nullable/variables';
+import {
+  ctrlChoicePaddingHorizontalRaw,
+  ctrlChoicePaddingVerticalRaw,
+  ctrlChoiceBaseSizeRaw,
+  ctrlChoiceIconThemeRaw,
+  ctrlChoiceBaseBackgroundRestRaw,
+  ctrlChoiceBaseBackgroundHoverRaw,
+  ctrlChoiceBaseBackgroundPressedRaw,
+  ctrlChoiceBaseBackgroundDisabledRaw,
+  ctrlChoiceBaseStrokeRestRaw,
+  ctrlChoiceBaseStrokeHoverRaw,
+  ctrlChoiceBaseStrokePressedRaw,
+  ctrlChoiceBaseStrokeDisabledRaw,
+  ctrlChoiceCheckboxIconSizeRaw,
+  ctrlChoiceCheckboxCornerRaw,
+  ctrlChoiceCheckboxIndeterminateCornerRaw,
+  ctrlChoiceCheckboxIndeterminateHeightRaw,
+  ctrlChoiceCheckboxIndeterminateWidthRaw,
+  ctrlChoiceRadioCornerRaw,
+  ctrlChoiceSwitchCornerRaw,
+  ctrlChoiceRadioDotSizeRestRaw,
+  ctrlChoiceRadioDotSizeHoverRaw,
+  ctrlChoiceRadioDotSizePressedRaw,
+  ctrlChoiceSwitchPaddingRestRaw,
+  ctrlChoiceSwitchPaddingHoverRaw,
+  ctrlChoiceSwitchPaddingPressedRaw,
+  ctrlChoiceSwitchHeightRaw,
+  ctrlChoiceSwitchWidthRaw,
+  ctrlChoiceSwitchThumbWidthRestRaw,
+  ctrlChoiceSwitchThumbWidthHoverRaw,
+  ctrlChoiceSwitchThumbWidthPressedRaw,
+  ctrlChoiceSmBaseSizeRaw,
+  ctrlChoiceSmCheckboxCornerRaw,
+  ctrlChoiceSmCheckboxIconSizeRaw,
+  ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw,
+  ctrlChoiceSmRadioDotSizeRaw,
+  ctrlChoiceSmSwitchWidthRaw,
+  ctrlChoiceSmSwitchHeightRaw,
+  ctrlChoiceSmSwitchThumbWidthRestRaw,
+  ctrlChoiceSmSwitchThumbWidthHoverRaw,
+  ctrlChoiceSmSwitchThumbWidthPressedRaw,
+  ctrlChoiceLgBaseSizeRaw,
+  ctrlChoiceLgCheckboxCornerRaw,
+  ctrlChoiceLgCheckboxIconSizeRaw,
+  ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw,
+  ctrlChoiceLgRadioDotSizeRestRaw,
+  ctrlChoiceLgRadioDotSizeHoverRaw,
+  ctrlChoiceLgRadioDotSizePressedRaw,
+  ctrlChoiceLgSwitchWidthRaw,
+  ctrlChoiceLgSwitchHeightRaw,
+  ctrlChoiceLgSwitchThumbWidthRestRaw,
+  ctrlChoiceLgSwitchThumbWidthHoverRaw,
+  ctrlChoiceLgSwitchThumbWidthPressedRaw,
+  ctrlChoiceSwitchThumbShadowKeyRaw,
+  ctrlChoiceSwitchThumbShadowAmbientRaw,
+} from './variables';
+
+export const ctrlChoicePaddingHorizontal = `var(${ctrlChoicePaddingHorizontalRaw})`;
+export const ctrlChoicePaddingVertical = `var(${ctrlChoicePaddingVerticalRaw})`;
+export const ctrlChoiceBaseSize = `var(${ctrlChoiceBaseSizeRaw}, var(${sizeCtrlIconRaw}))`;
+export const ctrlChoiceIconTheme = `var(${ctrlChoiceIconThemeRaw})`;
+export const ctrlChoiceBaseBackgroundRest = `var(${ctrlChoiceBaseBackgroundRestRaw}, var(${backgroundCtrlOutlineRestRaw}))`;
+export const ctrlChoiceBaseBackgroundHover = `var(${ctrlChoiceBaseBackgroundHoverRaw}, var(${backgroundCtrlOutlineHoverRaw}))`;
+export const ctrlChoiceBaseBackgroundPressed = `var(${ctrlChoiceBaseBackgroundPressedRaw}, var(${backgroundCtrlOutlinePressedRaw}))`;
+export const ctrlChoiceBaseBackgroundDisabled = `var(${ctrlChoiceBaseBackgroundDisabledRaw}, var(${backgroundCtrlOutlineDisabledRaw}))`;
+export const ctrlChoiceBaseStrokeRest = `var(${ctrlChoiceBaseStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`;
+export const ctrlChoiceBaseStrokeHover = `var(${ctrlChoiceBaseStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`;
+export const ctrlChoiceBaseStrokePressed = `var(${ctrlChoiceBaseStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`;
+export const ctrlChoiceBaseStrokeDisabled = `var(${ctrlChoiceBaseStrokeDisabledRaw}, var(${foregroundCtrlNeutralSecondaryDisabledRaw}))`;
+export const ctrlChoiceCheckboxIconSize = `var(${ctrlChoiceCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`;
+export const ctrlChoiceCheckboxCorner = `var(${ctrlChoiceCheckboxCornerRaw})`;
+export const ctrlChoiceCheckboxIndeterminateCorner = `var(${ctrlChoiceCheckboxIndeterminateCornerRaw}, var(${cornerCircularRaw}))`;
+export const ctrlChoiceCheckboxIndeterminateHeight = `var(${ctrlChoiceCheckboxIndeterminateHeightRaw})`;
+export const ctrlChoiceCheckboxIndeterminateWidth = `var(${ctrlChoiceCheckboxIndeterminateWidthRaw})`;
+export const ctrlChoiceRadioCorner = `var(${ctrlChoiceRadioCornerRaw}, var(${cornerCircularRaw}))`;
+export const ctrlChoiceSwitchCorner = `var(${ctrlChoiceSwitchCornerRaw}, var(${cornerCircularRaw}))`;
+export const ctrlChoiceRadioDotSizeRest = `var(${ctrlChoiceRadioDotSizeRestRaw})`;
+export const ctrlChoiceRadioDotSizeHover = `var(${ctrlChoiceRadioDotSizeHoverRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`;
+export const ctrlChoiceRadioDotSizePressed = `var(${ctrlChoiceRadioDotSizePressedRaw}, var(${ctrlChoiceRadioDotSizeRestRaw}))`;
+export const ctrlChoiceSwitchPaddingRest = `var(${ctrlChoiceSwitchPaddingRestRaw})`;
+export const ctrlChoiceSwitchPaddingHover = `var(${ctrlChoiceSwitchPaddingHoverRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}))`;
+export const ctrlChoiceSwitchPaddingPressed = `var(${ctrlChoiceSwitchPaddingPressedRaw}, var(${ctrlChoiceSwitchPaddingRestRaw}))`;
+export const ctrlChoiceSwitchHeight = `var(${ctrlChoiceSwitchHeightRaw}, var(${sizeCtrlIconRaw}))`;
+export const ctrlChoiceSwitchWidth = `var(${ctrlChoiceSwitchWidthRaw})`;
+export const ctrlChoiceSwitchThumbWidthRest = `var(${ctrlChoiceSwitchThumbWidthRestRaw})`;
+export const ctrlChoiceSwitchThumbWidthHover = `var(${ctrlChoiceSwitchThumbWidthHoverRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}))`;
+export const ctrlChoiceSwitchThumbWidthPressed = `var(${ctrlChoiceSwitchThumbWidthPressedRaw}, var(${ctrlChoiceSwitchThumbWidthRestRaw}))`;
+export const ctrlChoiceSmBaseSize = `var(${ctrlChoiceSmBaseSizeRaw}, var(${sizeCtrlSmIconRaw}))`;
+export const ctrlChoiceSmCheckboxCorner = `var(${ctrlChoiceSmCheckboxCornerRaw})`;
+export const ctrlChoiceSmCheckboxIconSize = `var(${ctrlChoiceSmCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`;
+export const ctrlChoiceSmCheckboxIconSizeFigmaonly = `var(${ctrlChoiceSmCheckboxIconSizeFigmaonlyRaw})`;
+export const ctrlChoiceSmRadioDotSize = `var(${ctrlChoiceSmRadioDotSizeRaw})`;
+export const ctrlChoiceSmSwitchWidth = `var(${ctrlChoiceSmSwitchWidthRaw})`;
+export const ctrlChoiceSmSwitchHeight = `var(${ctrlChoiceSmSwitchHeightRaw}, var(${sizeCtrlSmIconRaw}))`;
+export const ctrlChoiceSmSwitchThumbWidthRest = `var(${ctrlChoiceSmSwitchThumbWidthRestRaw})`;
+export const ctrlChoiceSmSwitchThumbWidthHover = `var(${ctrlChoiceSmSwitchThumbWidthHoverRaw}, var(${ctrlChoiceSmSwitchThumbWidthRestRaw}))`;
+export const ctrlChoiceSmSwitchThumbWidthPressed = `var(${ctrlChoiceSmSwitchThumbWidthPressedRaw}, var(${ctrlChoiceSmSwitchThumbWidthRestRaw}))`;
+export const ctrlChoiceLgBaseSize = `var(${ctrlChoiceLgBaseSizeRaw}, var(${sizeCtrlLgIconRaw}))`;
+export const ctrlChoiceLgCheckboxCorner = `var(${ctrlChoiceLgCheckboxCornerRaw})`;
+export const ctrlChoiceLgCheckboxIconSize = `var(${ctrlChoiceLgCheckboxIconSizeRaw}, var(${sizeCtrlIconsecondaryRaw}))`;
+export const ctrlChoiceLgCheckboxIconSizeFigmaonly = `var(${ctrlChoiceLgCheckboxIconSizeFigmaonlyRaw})`;
+export const ctrlChoiceLgRadioDotSizeRest = `var(${ctrlChoiceLgRadioDotSizeRestRaw})`;
+export const ctrlChoiceLgRadioDotSizeHover = `var(${ctrlChoiceLgRadioDotSizeHoverRaw}, var(${ctrlChoiceLgRadioDotSizeRestRaw}))`;
+export const ctrlChoiceLgRadioDotSizePressed = `var(${ctrlChoiceLgRadioDotSizePressedRaw}, var(${ctrlChoiceLgRadioDotSizeRestRaw}))`;
+export const ctrlChoiceLgSwitchWidth = `var(${ctrlChoiceLgSwitchWidthRaw})`;
+export const ctrlChoiceLgSwitchHeight = `var(${ctrlChoiceLgSwitchHeightRaw}, var(${sizeCtrlLgIconRaw}))`;
+export const ctrlChoiceLgSwitchThumbWidthRest = `var(${ctrlChoiceLgSwitchThumbWidthRestRaw})`;
+export const ctrlChoiceLgSwitchThumbWidthHover = `var(${ctrlChoiceLgSwitchThumbWidthHoverRaw}, var(${ctrlChoiceLgSwitchThumbWidthRestRaw}))`;
+export const ctrlChoiceLgSwitchThumbWidthPressed = `var(${ctrlChoiceLgSwitchThumbWidthPressedRaw}, var(${ctrlChoiceLgSwitchThumbWidthRestRaw}))`;
+export const ctrlChoiceSwitchThumbShadowKey = `var(${ctrlChoiceSwitchThumbShadowKeyRaw}, unset)`;
+export const ctrlChoiceSwitchThumbShadowAmbient = `var(${ctrlChoiceSwitchThumbShadowAmbientRaw}, unset)`;