Update script to handle duplicated tokens

packages/semantic-tokens/scripts/tokenGen.ts

@@ -26,7 +26,7 @@ interface ComponentTokenMap {
 }
 
 // ToDo, make this dynamic to handle all needed variables imported after/during files generation
-function exportImportHeaders() {
+function generateImportHeaders() {
   const esLintDisable = '// eslint-disable-next-line no-restricted-imports\n';
   const importFluent = "import { tokens } from '@fluentui/tokens';\n\n";
   return esLintDisable + importFluent;
@@ -110,9 +110,9 @@ function toCamelCase(str: string) {
 function generateTokenVariables() {
   // Default our files to token imports
   // TODO: Add raw token imports
-  let optionalTokens = exportImportHeaders();
-  let controlTokens = exportImportHeaders();
-  let nullableTokens = exportImportHeaders();
+  let optionalTokens = generateImportHeaders();
+  let controlTokens = generateImportHeaders();
+  let nullableTokens = generateImportHeaders();
   const componentTokens: ComponentTokenMap = {};
   for (const token in tokensJSON) {
     const tokenData: Token = tokensJSON[token];
@@ -143,7 +143,7 @@ function generateTokenVariables() {
 
     let resolvedTokenFallback = `var(${escapeInlineToken(tokenNameRaw)})`;
     // TODO: Check if a token has a FST reference that falls back to another FST/fluent fallback?
-    if (tokenFallback && tokenSemanticRef) {
+    if (tokenFallback && tokenSemanticRef && tokenFallback !== tokenSemanticRef) {
       // Token has both a FST fallback and a Fluent fallback
       resolvedTokenFallback = `var(${escapeInlineToken(tokenNameRaw)}, var(${escapeInlineToken(
         tokenSemanticRef,
@@ -160,7 +160,7 @@ function generateTokenVariables() {
       // 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] = generateImportHeaders();
       }
       componentTokens[component] += `export const ${token} = '${resolvedTokenFallback}';\n`;
     } else {

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

@@ -1,7 +1,8 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlAvatarSize = 'var(${ctrlAvatarSizeRaw}, var(${sizeCtrlDefaultRaw}, ${📦 sizeAvatarSizeRaw}))';
-export const ctrlAvatarCornerItem = 'var(${ctrlAvatarCornerItemRaw}, var(${cornerCircularRaw}, ${cornerCircularRaw}))';
+export const ctrlAvatarCornerItem = 'var(${ctrlAvatarCornerItemRaw}, ${cornerCircularRaw})';
 export const ctrlAvatarBackground = 'var(${ctrlAvatarBackgroundRaw}, ${neutralBackground6RestRaw})';
 export const ctrlAvatarForeground = 'var(${ctrlAvatarForegroundRaw}, ${neutralForeground3RestRaw})';
 export const ctrlAvatarIconSize = 'var(${ctrlAvatarIconSizeRaw}, ${sizeCtrlIconRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlBadgeTextPaddingTop = 'var(${ctrlBadgeTextPaddingTopRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlBooleanSelectionhint = 'var(${ctrlBooleanSelectionhintRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlChoicePaddingHorizontal = 'var(${ctrlChoicePaddingHorizontalRaw}, ${horizontalSRaw})';
@@ -26,8 +27,8 @@ export const ctrlChoiceForegroundIndeterminatePressed = 'var(${ctrlChoiceForegro
 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 ctrlChoiceRadioCorner = 'var(${ctrlChoiceRadioCornerRaw}, ${cornerCircularRaw})';
+export const ctrlChoiceSwitchCorner = 'var(${ctrlChoiceSwitchCornerRaw}, ${cornerCircularRaw})';
 export const ctrlChoiceRadioDotSizeRest = 'var(${ctrlChoiceRadioDotSizeRestRaw})';
 export const ctrlChoiceRadioDotSizeHover = 'var(${ctrlChoiceRadioDotSizeHoverRaw}, ${ctrlChoiceRadioDotSizeRestRaw})';
 export const ctrlChoiceRadioDotSizePressed = 'var(${ctrlChoiceRadioDotSizePressedRaw}, ${ctrlChoiceRadioDotSizeRestRaw})';
@@ -39,14 +40,14 @@ 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 ctrlChoiceSwitchThumbShadowKeyX = 'var(${ctrlChoiceSwitchThumbShadowKeyXRaw}, ${nullNumberRaw})';
+export const ctrlChoiceSwitchThumbShadowKeyY = 'var(${ctrlChoiceSwitchThumbShadowKeyYRaw}, ${nullNumberRaw})';
+export const ctrlChoiceSwitchThumbShadowKeyBlur = 'var(${ctrlChoiceSwitchThumbShadowKeyBlurRaw}, ${nullNumberRaw})';
+export const ctrlChoiceSwitchThumbShadowKeyColor = 'var(${ctrlChoiceSwitchThumbShadowKeyColorRaw}, ${nullColorRaw})';
+export const ctrlChoiceSwitchThumbShadowAmbientX = 'var(${ctrlChoiceSwitchThumbShadowAmbientXRaw}, ${nullNumberRaw})';
+export const ctrlChoiceSwitchThumbShadowAmbientY = 'var(${ctrlChoiceSwitchThumbShadowAmbientYRaw}, ${nullNumberRaw})';
+export const ctrlChoiceSwitchThumbShadowAmbientBlur = 'var(${ctrlChoiceSwitchThumbShadowAmbientBlurRaw}, ${nullNumberRaw})';
+export const ctrlChoiceSwitchThumbShadowAmbientColor = 'var(${ctrlChoiceSwitchThumbShadowAmbientColorRaw}, ${nullColorRaw})';
 export const ctrlChoiceSmBaseSize = 'var(${ctrlChoiceSmBaseSizeRaw}, ${sizeCtrlSmIconRaw})';
 export const ctrlChoiceSmCheckboxIconSize = 'var(${ctrlChoiceSmCheckboxIconSizeRaw}, ${sizeCtrlIconsecondaryRaw})';
 export const ctrlChoiceSmCheckboxCorner = 'var(${ctrlChoiceSmCheckboxCornerRaw}, ${smallRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlDialogBackground = 'var(${ctrlDialogBackgroundRaw}, ${neutralBackground1RestRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlDividerFixedlineLength = 'var(${ctrlDividerFixedlineLengthRaw}, ${paddingContentAlignDefaultRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlDragBackgroundSolid = 'var(${ctrlDragBackgroundSolidRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlFabBackgroundRest = 'var(${ctrlFabBackgroundRestRaw}, ${neutralBackground1RestRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlFocusPositionFigmaOnly = 'var(${ctrlFocusPositionFigmaOnlyRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlInputBackgroundRest = 'var(${ctrlInputBackgroundRestRaw}, var(${backgroundCtrlNeutralRestRaw}, ${neutralBackground1RestRaw}))';

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

@@ -1,15 +1,16 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
-export const ctrlLinkForegroundNeutralRest = 'var(${ctrlLinkForegroundNeutralRestRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${foregroundCtrlNeutralPrimaryRestRaw}))';
+export const ctrlLinkForegroundNeutralRest = 'var(${ctrlLinkForegroundNeutralRestRaw}, ${foregroundCtrlNeutralPrimaryRestRaw})';
 export const ctrlLinkInlineStrokewidthRest = 'var(${ctrlLinkInlineStrokewidthRestRaw}, var(${strokewidthDefaultRaw}, ${thinRaw}))';
 export const ctrlLinkInlineStrokewidthHover = 'var(${ctrlLinkInlineStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}, ${thinRaw}))';
 export const ctrlLinkInlineUnderlineDashed = 'var(${ctrlLinkInlineUnderlineDashedRaw})';
 export const ctrlLinkInlineUnderlineSolidFigmaOnly = 'var(${ctrlLinkInlineUnderlineSolidFigmaOnlyRaw})';
 export const ctrlLinkForegroundNeutralHover = 'var(${ctrlLinkForegroundNeutralHoverRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${foregroundCtrlNeutralPrimaryHoverRaw}))';
 export const ctrlLinkForegroundNeutralPressed = 'var(${ctrlLinkForegroundNeutralPressedRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${foregroundCtrlNeutralPrimaryPressedRaw}))';
-export const ctrlLinkForegroundBrandRest = 'var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${foregroundCtrlBrandRestRaw}))';
-export const ctrlLinkForegroundBrandHover = 'var(${ctrlLinkForegroundBrandHoverRaw}, var(${foregroundCtrlBrandHoverRaw}, ${foregroundCtrlBrandHoverRaw}))';
-export const ctrlLinkForegroundBrandPressed = 'var(${ctrlLinkForegroundBrandPressedRaw}, var(${foregroundCtrlBrandPressedRaw}, ${foregroundCtrlBrandPressedRaw}))';
+export const ctrlLinkForegroundBrandRest = 'var(${ctrlLinkForegroundBrandRestRaw}, ${foregroundCtrlBrandRestRaw})';
+export const ctrlLinkForegroundBrandHover = 'var(${ctrlLinkForegroundBrandHoverRaw}, ${foregroundCtrlBrandHoverRaw})';
+export const ctrlLinkForegroundBrandPressed = 'var(${ctrlLinkForegroundBrandPressedRaw}, ${foregroundCtrlBrandPressedRaw})';
 export const ctrlLinkOnpageStrokewidthRest = 'var(${ctrlLinkOnpageStrokewidthRestRaw}, var(${strokewidthDefaultRaw}, ${thinRaw}))';
 export const ctrlLinkOnpageStrokewidthHover = 'var(${ctrlLinkOnpageStrokewidthHoverRaw}, var(${strokewidthDefaultRaw}, ${thinRaw}))';
 export const ctrlLinkOnpageUnderlineDashed = 'var(${ctrlLinkOnpageUnderlineDashedRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlListPillWidth = 'var(${ctrlListPillWidthRaw}, ${thickerRaw})';
@@ -14,10 +15,10 @@ export const ctrlListCornerPressed = 'var(${ctrlListCornerPressedRaw}, var(${cor
 export const ctrlListIndentLevel1 = 'var(${ctrlListIndentLevel1Raw}, ${paddingCtrlHorizontalDefaultRaw})';
 export const ctrlListIndentLevel2 = 'var(${ctrlListIndentLevel2Raw})';
 export const ctrlListIndentLevel3 = 'var(${ctrlListIndentLevel3Raw})';
-export const ctrlListBackgroundSelectedRest = 'var(${ctrlListBackgroundSelectedRestRaw}, var(${backgroundCtrlSubtleRestRaw}, ${backgroundCtrlSubtleRestRaw}))';
-export const ctrlListBackgroundSelectedHover = 'var(${ctrlListBackgroundSelectedHoverRaw}, var(${backgroundCtrlSubtleHoverRaw}, ${backgroundCtrlSubtleHoverRaw}))';
-export const ctrlListBackgroundSelectedPressed = 'var(${ctrlListBackgroundSelectedPressedRaw}, var(${backgroundCtrlSubtlePressedRaw}, ${backgroundCtrlSubtlePressedRaw}))';
-export const ctrlListBackgroundSelectedDisabled = 'var(${ctrlListBackgroundSelectedDisabledRaw}, var(${backgroundCtrlSubtleDisabledRaw}, ${backgroundCtrlSubtleDisabledRaw}))';
+export const ctrlListBackgroundSelectedRest = 'var(${ctrlListBackgroundSelectedRestRaw}, ${backgroundCtrlSubtleRestRaw})';
+export const ctrlListBackgroundSelectedHover = 'var(${ctrlListBackgroundSelectedHoverRaw}, ${backgroundCtrlSubtleHoverRaw})';
+export const ctrlListBackgroundSelectedPressed = 'var(${ctrlListBackgroundSelectedPressedRaw}, ${backgroundCtrlSubtlePressedRaw})';
+export const ctrlListBackgroundSelectedDisabled = 'var(${ctrlListBackgroundSelectedDisabledRaw}, ${backgroundCtrlSubtleDisabledRaw})';
 export const ctrlListChoiceBackgroundRest = 'var(${ctrlListChoiceBackgroundRestRaw}, var(${nullColorRaw}, ${neutralBackgroundTransparentRestRaw}))';
 export const ctrlListChoiceStrokeRest = 'var(${ctrlListChoiceStrokeRestRaw}, var(${nullColorRaw}, ${neutralStrokeTransparentRestRaw}))';
 export const ctrlListChoiceStrokeDisabled = 'var(${ctrlListChoiceStrokeDisabledRaw}, var(${nullColorRaw}, ${neutralStrokeTransparentDisabledRestRaw}))';

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

@@ -1,6 +1,7 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
-export const ctrlLitefilterBackgroundSelected = 'var(${ctrlLitefilterBackgroundSelectedRaw}, var(${backgroundCtrlBrandRestRaw}, ${backgroundCtrlBrandRestRaw}))';
-export const ctrlLitefilterStrokeSelected = 'var(${ctrlLitefilterStrokeSelectedRaw}, var(${strokeCtrlOnbrandRestRaw}, ${strokeCtrlOnbrandRestRaw}))';
-export const ctrlLitefilterForegroundSelected = 'var(${ctrlLitefilterForegroundSelectedRaw}, var(${foregroundCtrlOnbrandRestRaw}, ${foregroundCtrlOnbrandRestRaw}))';
+export const ctrlLitefilterBackgroundSelected = 'var(${ctrlLitefilterBackgroundSelectedRaw}, ${backgroundCtrlBrandRestRaw})';
+export const ctrlLitefilterStrokeSelected = 'var(${ctrlLitefilterStrokeSelectedRaw}, ${strokeCtrlOnbrandRestRaw})';
+export const ctrlLitefilterForegroundSelected = 'var(${ctrlLitefilterForegroundSelectedRaw}, ${foregroundCtrlOnbrandRestRaw})';
 export const ctrlLitefilterStrokewidthSelected = 'var(${ctrlLitefilterStrokewidthSelectedRaw}, var(${strokewidthDefaultRaw}, ${thinRaw}))';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlProgressBackgroundEmpty = 'var(${ctrlProgressBackgroundEmptyRaw}, ${neutralBackground6RestRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlRatingIconTheme = 'var(${ctrlRatingIconThemeRaw}, ${iconthemeCtrlDefaultRestRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlSegmentedBackgroundRest = 'var(${ctrlSegmentedBackgroundRestRaw}, var(${backgroundCtrlOutlineRestRaw}, ${neutralBackgroundTransparentRestRaw}))';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlSliderBarHeight = 'var(${ctrlSliderBarHeightRaw}, ${ctrlProgressHeightFilledRaw})';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlSpinnerSize = 'var(${ctrlSpinnerSizeRaw}, var(${sizeCtrlDefaultRaw}, ${📦 sizeSpinnerSizeRaw}))';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlSplitDividerStrokewidth = 'var(${ctrlSplitDividerStrokewidthRaw}, var(${strokewidthDefaultRaw}, ${thinRaw}))';

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlTooltipShadowKeyX = 'var(${ctrlTooltipShadowKeyXRaw}, ${ctrlFabShadowRest(key)(x)Raw})';

packages/semantic-tokens/src/components/🚧 composer/tokens.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { tokens } from '@fluentui/tokens';
 
 export const ctrlComposerInputBottomStrokeWidthSelectedRest = 'var(${ctrlComposerInputBottomStrokeWidthSelectedRestRaw})';

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

@@ -10,10 +10,10 @@ export const textStyleQuoteHeaderCase = 'var(${textStyleQuoteHeaderCaseRaw}, ${n
 export const strokeLayer = 'var(${strokeLayerRaw}, var(${nullColorRaw}, ${neutralStrokeTransparentRestRaw}))';
 export const strokeImage = 'var(${strokeImageRaw}, var(${nullColorRaw}, ${neutralStrokeTransparentRestRaw}))';
 export const strokeFlyout = 'var(${strokeFlyoutRaw}, var(${nullColorRaw}, ${neutralStrokeTransparentRestRaw}))';
-export const strokeCtrlOnbrandRest = 'var(${strokeCtrlOnbrandRestRaw}, var(${nullColorRaw}, ${nullColorRaw}))';
-export const strokeCtrlOnbrandHover = 'var(${strokeCtrlOnbrandHoverRaw}, var(${nullColorRaw}, ${nullColorRaw}))';
-export const strokeCtrlOnbrandPressed = 'var(${strokeCtrlOnbrandPressedRaw}, var(${nullColorRaw}, ${nullColorRaw}))';
-export const strokeCtrlOnbrandDisabled = 'var(${strokeCtrlOnbrandDisabledRaw}, var(${nullColorRaw}, ${nullColorRaw}))';
+export const strokeCtrlOnbrandRest = 'var(${strokeCtrlOnbrandRestRaw}, ${nullColorRaw})';
+export const strokeCtrlOnbrandHover = 'var(${strokeCtrlOnbrandHoverRaw}, ${nullColorRaw})';
+export const strokeCtrlOnbrandPressed = 'var(${strokeCtrlOnbrandPressedRaw}, ${nullColorRaw})';
+export const strokeCtrlOnbrandDisabled = 'var(${strokeCtrlOnbrandDisabledRaw}, ${nullColorRaw})';
 export const strokeCtrlOnneutralRest = 'var(${strokeCtrlOnneutralRestRaw}, var(${nullColorRaw}, ${neutralStroke1RestRaw}))';
 export const strokeCtrlOnneutralHover = 'var(${strokeCtrlOnneutralHoverRaw}, var(${nullColorRaw}, ${neutralStroke1HoverRaw}))';
 export const strokeCtrlOnneutralPressed = 'var(${strokeCtrlOnneutralPressedRaw}, var(${nullColorRaw}, ${neutralStroke1PressedRaw}))';
@@ -70,4 +70,4 @@ export const shadowLayerAmbientX = 'var(${shadowLayerAmbientXRaw}, ${nullNumberR
 export const shadowLayerAmbientY = 'var(${shadowLayerAmbientYRaw}, ${nullNumberRaw})';
 export const shadowLayerAmbientBlur = 'var(${shadowLayerAmbientBlurRaw}, ${nullNumberRaw})';
 export const shadowLayerAmbientColor = 'var(${shadowLayerAmbientColorRaw}, ${nullColorRaw})';
-export const ctrlListShadowSelectedKeyY2 = 'var(${ctrlListShadowSelectedKeyY2Raw}, var(${nullNumberRaw}, ${nullNumberRaw}))';
+export const ctrlListShadowSelectedKeyY2 = 'var(${ctrlListShadowSelectedKeyY2Raw}, ${nullNumberRaw})';