Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Semantic-Tokens: Generate from token JSON export #33931

Draft
wants to merge 37 commits into
base: master
Choose a base branch
from
+25,096 −15
Draft

Semantic-Tokens: Generate from token JSON export #33931

Changes from 1 commit
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
7a48bb0
Stash initial for now
Mitch-At-Work Feb 11, 2025
13424bc
Add initial Link tokens as example
Mitch-At-Work Feb 12, 2025
5badbf8
Add tsconfig for semantic-tokens
Mitch-At-Work Feb 12, 2025
36cc985
Update indexing and add token vars as exports
Mitch-At-Work Feb 14, 2025
88cc6f4
Change files
Mitch-At-Work Feb 18, 2025
6b008bd
Fix version of react-tokens
Mitch-At-Work Feb 18, 2025
8dba624
Update and connect local build artifacts
Mitch-At-Work Feb 18, 2025
4a8db31
Lint and fix exports
Mitch-At-Work Feb 19, 2025
e2aa7f2
Update E2E for semantic tokens to a dummy test (for now)
Mitch-At-Work Feb 20, 2025
96ef49f
Fix up extra bracket and brand ref color
Mitch-At-Work Feb 20, 2025
1d6d672
remove console
Mitch-At-Work Feb 21, 2025
f478839
Alphebetize order
Mitch-At-Work Feb 24, 2025
bb81096
Update tokens so far
Mitch-At-Work Feb 28, 2025
940f605
Add script to generate
Mitch-At-Work Feb 28, 2025
44bfcdf
Initial script gen
Mitch-At-Work Feb 28, 2025
57c7867
Update tokens and script
Mitch-At-Work Feb 28, 2025
81f1e05
Update script to handle duplicated tokens
Mitch-At-Work Feb 28, 2025
6035592
Add strokeWidthThin fallback
Mitch-At-Work Feb 28, 2025
83f6a0a
Set variable path correctly
Mitch-At-Work Mar 1, 2025
e5671d7
Update latest
Mitch-At-Work Mar 3, 2025
0ed592f
Update with better fallback logic
Mitch-At-Work Mar 3, 2025
c81c862
Update script to handle fallbacks and f2 tokens better
Mitch-At-Work Mar 3, 2025
4d4bd3f
Update naming to handle brackets and spacings
Mitch-At-Work Mar 3, 2025
4609e99
Ensure fallbacks work correctly for FST
Mitch-At-Work Mar 3, 2025
9c3a7fe
Simplify script to match design and add custom fluent fallback map
Mitch-At-Work Mar 5, 2025
032d3b7
Add missing imports structure
Mitch-At-Work Mar 5, 2025
a750369
Fix imports
Mitch-At-Work Mar 5, 2025
a55568e
Update script to add exports
Mitch-At-Work Mar 5, 2025
5658e2d
Update script to handle imports/exports
Mitch-At-Work Mar 5, 2025
56e1102
Token script fixed
Mitch-At-Work Mar 5, 2025
e3a0bba
Update tokens and script
Mitch-At-Work Mar 6, 2025
58bac11
Fix token reference fallback
Mitch-At-Work Mar 6, 2025
791a838
Update api
Mitch-At-Work Mar 6, 2025
9c1c981
Fix port
Mitch-At-Work Mar 6, 2025
8884ea1
Lint all files
Mitch-At-Work Mar 6, 2025
a5bb059
Update and remove eslint rule
Mitch-At-Work Mar 6, 2025
c4719f4
Fix up the ESLint rule
Mitch-At-Work Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update tokens and script
  • Loading branch information
@Mitch-At-Work
Mitch-At-Work committed Feb 28, 2025
commit 57c786732b484f4ec0cec67058dbf574e4abd0bb
13 changes: 11 additions & 2 deletions packages/semantic-tokens/scripts/tokenGen.ts
View file
Original file line number Diff line number Diff line change
@@ -25,6 +25,7 @@ interface ComponentTokenMap {
[component: string]: string;
}

// ToDo, make this dynamic to handle all needed variables imported after/during files generation
function exportImportHeaders() {
const esLintDisable = '// eslint-disable-next-line no-restricted-imports\n';
const importFluent = "import { tokens } from '@fluentui/tokens';\n\n";
@@ -42,6 +43,14 @@ function escapeInlineToken(token: string) {
return `\$\{${token}\}`;
}

function cleanFSTTokenName(originalTokenName: string) {
// Handle any name housekeeping or small token name fixes

const newtokenName = originalTokenName.replace('-', '/');

return newtokenName;
}

function generateTokenRawStrings() {
let optionalRawTokens = '';
let controlRawTokens = '';
@@ -113,7 +122,7 @@ function generateTokenVariables() {
let tokenSemanticRef: null | string = null;

if (tokenData.fst_reference.length > 0) {
tokenSemanticRef = toCamelCase(tokenData.fst_reference) + 'Raw';
tokenSemanticRef = toCamelCase(cleanFSTTokenName(tokenData.fst_reference)) + 'Raw';
}

// Token fallback may be a fluent 2 token or new FST, let's check known fluent 2 tokens
@@ -132,7 +141,7 @@ function generateTokenVariables() {
}
}

let resolvedTokenFallback = `var(${tokenNameRaw})`;
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) {
// Token has both a FST fallback and a Fluent fallback
8 changes: 4 additions & 4 deletions packages/semantic-tokens/src/components/avatar/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -5,15 +5,15 @@ export const ctrlAvatarCornerItem = 'var(${ctrlAvatarCornerItemRaw}, var(${corne
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 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 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 ctrlAvatarShowcutout = 'var(${ctrlAvatarShowcutoutRaw})';
export const ctrlAvatarPresencebadgeBackgroundBehindbadge = 'var(${ctrlAvatarPresencebadgeBackgroundBehindbadgeRaw}, ${backgroundLayerPrimary (solid)Raw})';
40 changes: 20 additions & 20 deletions packages/semantic-tokens/src/components/badge/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import { tokens } from '@fluentui/tokens';

export const ctrlBadgeTextPaddingTop = 'var(ctrlBadgeTextPaddingTopRaw)';
export const ctrlBadgeTextPaddingTop = 'var(${ctrlBadgeTextPaddingTopRaw})';
export const ctrlBadgeTextPaddingBottom = 'var(${ctrlBadgeTextPaddingBottomRaw}, ${ctrlBadgeTextPaddingTopRaw})';
export const ctrlBadgeSmTextPaddingTop = 'var(ctrlBadgeSmTextPaddingTopRaw)';
export const ctrlBadgeSmTextPaddingTop = 'var(${ctrlBadgeSmTextPaddingTopRaw})';
export const ctrlBadgeSmTextPaddingBottom = 'var(${ctrlBadgeSmTextPaddingBottomRaw}, ${ctrlBadgeSmTextPaddingTopRaw})';
export const ctrlBadgeLgTextPaddingTop = 'var(ctrlBadgeLgTextPaddingTopRaw)';
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)';
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})';
2 changes: 1 addition & 1 deletion packages/semantic-tokens/src/components/boolean/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { tokens } from '@fluentui/tokens';

export const ctrlBooleanSelectionhint = 'var(ctrlBooleanSelectionhintRaw)';
export const ctrlBooleanSelectionhint = 'var(${ctrlBooleanSelectionhintRaw})';
34 changes: 17 additions & 17 deletions packages/semantic-tokens/src/components/choice/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ 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 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}))';
@@ -28,15 +28,15 @@ export const ctrlChoiceCheckboxIconSize = 'var(${ctrlChoiceCheckboxIconSizeRaw},
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 ctrlChoiceRadioDotSizeRest = 'var(${ctrlChoiceRadioDotSizeRestRaw})';
export const ctrlChoiceRadioDotSizeHover = 'var(${ctrlChoiceRadioDotSizeHoverRaw}, ${ctrlChoiceRadioDotSizeRestRaw})';
export const ctrlChoiceRadioDotSizePressed = 'var(${ctrlChoiceRadioDotSizePressedRaw}, ${ctrlChoiceRadioDotSizeRestRaw})';
export const ctrlChoiceSwitchPaddingRest = 'var(ctrlChoiceSwitchPaddingRestRaw)';
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 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}))';
@@ -47,25 +47,25 @@ export const ctrlChoiceSwitchThumbShadowAmbientX = 'var(${ctrlChoiceSwitchThumbS
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 ctrlChoiceSmBaseSize = 'var(${ctrlChoiceSmBaseSizeRaw}, ${sizeCtrlSmIconRaw})';
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 ctrlChoiceSmCheckboxIconSizeFigmaOnly = 'var(${ctrlChoiceSmCheckboxIconSizeFigmaOnlyRaw})';
export const ctrlChoiceSmRadioDotSize = 'var(${ctrlChoiceSmRadioDotSizeRaw})';
export const ctrlChoiceSmSwitchWidth = 'var(${ctrlChoiceSmSwitchWidthRaw})';
export const ctrlChoiceSmSwitchHeight = 'var(${ctrlChoiceSmSwitchHeightRaw}, ${sizeCtrlSmIconRaw})';
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 ctrlChoiceLgBaseSize = 'var(${ctrlChoiceLgBaseSizeRaw}, ${sizeCtrlLgIconRaw})';
export const ctrlChoiceLgCheckboxCorner = 'var(${ctrlChoiceLgCheckboxCornerRaw}, ${smallRaw})';
export const ctrlChoiceLgCheckboxIconSize = 'var(${ctrlChoiceLgCheckboxIconSizeRaw}, ${sizeCtrlIconsecondaryRaw})';
export const ctrlChoiceLgCheckboxIconSizeFigmaOnly = 'var(ctrlChoiceLgCheckboxIconSizeFigmaOnlyRaw)';
export const ctrlChoiceLgRadioDotSizeRest = 'var(ctrlChoiceLgRadioDotSizeRestRaw)';
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 ctrlChoiceLgSwitchWidth = 'var(${ctrlChoiceLgSwitchWidthRaw})';
export const ctrlChoiceLgSwitchHeight = 'var(${ctrlChoiceLgSwitchHeightRaw}, ${sizeCtrlLgIconRaw})';
export const ctrlChoiceLgSwitchThumbWidthRest = 'var(${ctrlChoiceLgSwitchThumbWidthRestRaw})';
export const ctrlChoiceLgSwitchThumbWidthHover = 'var(${ctrlChoiceLgSwitchThumbWidthHoverRaw}, ${ctrlChoiceLgSwitchThumbWidthRestRaw})';
export const ctrlChoiceLgSwitchThumbWidthPressed = 'var(${ctrlChoiceLgSwitchThumbWidthPressedRaw}, ${ctrlChoiceLgSwitchThumbWidthRestRaw})';
18 changes: 9 additions & 9 deletions packages/semantic-tokens/src/components/dialog/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -3,13 +3,13 @@ import { tokens } from '@fluentui/tokens';
export const ctrlDialogBackground = 'var(${ctrlDialogBackgroundRaw}, ${neutralBackground1RestRaw})';
export const ctrlDialogStroke = 'var(${ctrlDialogStrokeRaw}, var(${nullColorRaw}, ${neutralStroke2RestRaw}))';
export const ctrlDialogBaseCorner = 'var(${ctrlDialogBaseCornerRaw}, var(${cornerCardRestRaw}, ${x-largeRaw}))';
export const ctrlDialogBaseShadowKeyX = 'var(ctrlDialogBaseShadowKeyXRaw)';
export const ctrlDialogBaseShadowKeyY = 'var(ctrlDialogBaseShadowKeyYRaw)';
export const ctrlDialogBaseShadowKeyBlur = 'var(ctrlDialogBaseShadowKeyBlurRaw)';
export const ctrlDialogBaseShadowKeyColor = 'var(ctrlDialogBaseShadowKeyColorRaw)';
export const ctrlDialogBaseShadowAmbientX = 'var(ctrlDialogBaseShadowAmbientXRaw)';
export const ctrlDialogBaseShadowAmbientY = 'var(ctrlDialogBaseShadowAmbientYRaw)';
export const ctrlDialogBaseShadowAmbientBlur = 'var(ctrlDialogBaseShadowAmbientBlurRaw)';
export const ctrlDialogBaseShadowAmbientColor = 'var(ctrlDialogBaseShadowAmbientColorRaw)';
export const ctrlDialogBaseShadowKeyX = 'var(${ctrlDialogBaseShadowKeyXRaw})';
export const ctrlDialogBaseShadowKeyY = 'var(${ctrlDialogBaseShadowKeyYRaw})';
export const ctrlDialogBaseShadowKeyBlur = 'var(${ctrlDialogBaseShadowKeyBlurRaw})';
export const ctrlDialogBaseShadowKeyColor = 'var(${ctrlDialogBaseShadowKeyColorRaw})';
export const ctrlDialogBaseShadowAmbientX = 'var(${ctrlDialogBaseShadowAmbientXRaw})';
export const ctrlDialogBaseShadowAmbientY = 'var(${ctrlDialogBaseShadowAmbientYRaw})';
export const ctrlDialogBaseShadowAmbientBlur = 'var(${ctrlDialogBaseShadowAmbientBlurRaw})';
export const ctrlDialogBaseShadowAmbientColor = 'var(${ctrlDialogBaseShadowAmbientColorRaw})';
export const ctrlDialogLayerBackground = 'var(${ctrlDialogLayerBackgroundRaw}, var(${backgroundLayerPrimary (solid)Raw}, ${neutralBackground1RestRaw}))';
export const ctrlDialogLayerPaddingBottom = 'var(ctrlDialogLayerPaddingBottomRaw)';
export const ctrlDialogLayerPaddingBottom = 'var(${ctrlDialogLayerPaddingBottomRaw})';
2 changes: 1 addition & 1 deletion packages/semantic-tokens/src/components/drag/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { tokens } from '@fluentui/tokens';

export const ctrlDragBackgroundSolid = 'var(ctrlDragBackgroundSolidRaw)';
export const ctrlDragBackgroundSolid = 'var(${ctrlDragBackgroundSolidRaw})';
export const ctrlDragBackgroundColorblend = 'var(${ctrlDragBackgroundColorblendRaw}, ${neutralBackground1RestRaw})';
export const ctrlDragBackgroundLumblend = 'var(${ctrlDragBackgroundLumblendRaw}, ${neutralBackground1RestRaw})';
24 changes: 12 additions & 12 deletions packages/semantic-tokens/src/components/fab/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -5,22 +5,22 @@ export const ctrlFabBackgroundHover = 'var(${ctrlFabBackgroundHoverRaw}, ${neutr
export const ctrlFabBackgroundPressed = 'var(${ctrlFabBackgroundPressedRaw}, ${neutralBackground1PressedRaw})';
export const ctrlFabBackgroundDisabled = 'var(${ctrlFabBackgroundDisabledRaw}, ${neutralBackgroundDisabledRestRaw})';
export const ctrlFabCornerRest = 'var(${ctrlFabCornerRestRaw}, var(${cornerCircularRaw}, ${circularRaw}))';
export const ctrlFabShadowRestKeyX = 'var(ctrlFabShadowRestKeyXRaw)';
export const ctrlFabShadowRestKeyY = 'var(ctrlFabShadowRestKeyYRaw)';
export const ctrlFabShadowRestKeyBlur = 'var(ctrlFabShadowRestKeyBlurRaw)';
export const ctrlFabShadowRestKeyColor = 'var(ctrlFabShadowRestKeyColorRaw)';
export const ctrlFabShadowRestAmbientX = 'var(ctrlFabShadowRestAmbientXRaw)';
export const ctrlFabShadowRestAmbientY = 'var(ctrlFabShadowRestAmbientYRaw)';
export const ctrlFabShadowRestAmbientBlur = 'var(ctrlFabShadowRestAmbientBlurRaw)';
export const ctrlFabShadowRestAmbientColor = 'var(ctrlFabShadowRestAmbientColorRaw)';
export const ctrlFabShadowRestKeyX = 'var(${ctrlFabShadowRestKeyXRaw})';
export const ctrlFabShadowRestKeyY = 'var(${ctrlFabShadowRestKeyYRaw})';
export const ctrlFabShadowRestKeyBlur = 'var(${ctrlFabShadowRestKeyBlurRaw})';
export const ctrlFabShadowRestKeyColor = 'var(${ctrlFabShadowRestKeyColorRaw})';
export const ctrlFabShadowRestAmbientX = 'var(${ctrlFabShadowRestAmbientXRaw})';
export const ctrlFabShadowRestAmbientY = 'var(${ctrlFabShadowRestAmbientYRaw})';
export const ctrlFabShadowRestAmbientBlur = 'var(${ctrlFabShadowRestAmbientBlurRaw})';
export const ctrlFabShadowRestAmbientColor = 'var(${ctrlFabShadowRestAmbientColorRaw})';
export const ctrlFabShadowHoverKeyX = 'var(${ctrlFabShadowHoverKeyXRaw}, ${shadowFlyout(key)(x)Raw})';
export const ctrlFabShadowHoverKeyY = 'var(${ctrlFabShadowHoverKeyYRaw}, ${shadowFlyout(key)(y)Raw})';
export const ctrlFabShadowHoverKeyBlur = 'var(${ctrlFabShadowHoverKeyBlurRaw}, ${shadowFlyout(key)(blur)Raw})';
export const ctrlFabShadowHoverKeyColor = 'var(${ctrlFabShadowHoverKeyColorRaw}, ${shadowFlyout(key)(color)Raw})';
export const ctrlFabShadowPressedKeyX = 'var(ctrlFabShadowPressedKeyXRaw)';
export const ctrlFabShadowPressedKeyY = 'var(ctrlFabShadowPressedKeyYRaw)';
export const ctrlFabShadowPressedKeyBlur = 'var(ctrlFabShadowPressedKeyBlurRaw)';
export const ctrlFabShadowPressedKeyColor = 'var(ctrlFabShadowPressedKeyColorRaw)';
export const ctrlFabShadowPressedKeyX = 'var(${ctrlFabShadowPressedKeyXRaw})';
export const ctrlFabShadowPressedKeyY = 'var(${ctrlFabShadowPressedKeyYRaw})';
export const ctrlFabShadowPressedKeyBlur = 'var(${ctrlFabShadowPressedKeyBlurRaw})';
export const ctrlFabShadowPressedKeyColor = 'var(${ctrlFabShadowPressedKeyColorRaw})';
export const ctrlFabShadowDisabledKeyX = 'var(${ctrlFabShadowDisabledKeyXRaw}, ${ctrlFabShadowPressed(key)(x)Raw})';
export const ctrlFabShadowDisabledKeyY = 'var(${ctrlFabShadowDisabledKeyYRaw}, ${ctrlFabShadowPressed(key)(y)Raw})';
export const ctrlFabShadowDisabledKeyBlur = 'var(${ctrlFabShadowDisabledKeyBlurRaw}, ${ctrlFabShadowPressed(key)(blur)Raw})';
Loading
Oops, something went wrong.
Loading
Oops, something went wrong.