From 81a365d448bd1649933cf6f371482ad8d13f9856 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Tue, 14 Dec 2021 12:21:26 -0800 Subject: [PATCH 1/6] react-theme: Exporting token to css variable mapping. --- packages/react-theme/etc/react-theme.api.md | 3 + packages/react-theme/src/global/index.ts | 1 + packages/react-theme/src/global/tokens.ts | 744 ++++++++++++++++++++ packages/react-theme/src/index.ts | 2 + 4 files changed, 750 insertions(+) create mode 100644 packages/react-theme/src/global/tokens.ts diff --git a/packages/react-theme/etc/react-theme.api.md b/packages/react-theme/etc/react-theme.api.md index 46327534dab0a..e3ded6b1c57c9 100644 --- a/packages/react-theme/etc/react-theme.api.md +++ b/packages/react-theme/etc/react-theme.api.md @@ -409,6 +409,9 @@ export const teamsLightTheme: Theme; // @public (undocumented) export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens; +// @public (undocumented) +export const tokens: Record; + // @public (undocumented) export const webDarkTheme: Theme; diff --git a/packages/react-theme/src/global/index.ts b/packages/react-theme/src/global/index.ts index 9b7f112709b0f..2f7d15dcb9abb 100644 --- a/packages/react-theme/src/global/index.ts +++ b/packages/react-theme/src/global/index.ts @@ -2,3 +2,4 @@ export * from './colors'; export * from './fonts'; export * from './strokeWidths'; export * from './borderRadius'; +export * from './tokens'; diff --git a/packages/react-theme/src/global/tokens.ts b/packages/react-theme/src/global/tokens.ts new file mode 100644 index 0000000000000..044a99d4dfb66 --- /dev/null +++ b/packages/react-theme/src/global/tokens.ts @@ -0,0 +1,744 @@ +import type { Theme } from '../types'; + +export const tokens: Record = { + // Color tokens + colorNeutralForeground1: 'var(--colorNeutralForeground1)', + colorNeutralForeground1Hover: 'var(--colorNeutralForeground1Hover)', + colorNeutralForeground1Pressed: 'var(--colorNeutralForeground1Pressed)', + colorNeutralForeground1Selected: 'var(--colorNeutralForeground1Selected)', + colorNeutralForeground2: 'var(--colorNeutralForeground2)', + colorNeutralForeground2Hover: 'var(--colorNeutralForeground2Hover)', + colorNeutralForeground2Pressed: 'var(--colorNeutralForeground2Pressed)', + colorNeutralForeground2Selected: 'var(--colorNeutralForeground2Selected)', + colorNeutralForeground2BrandHover: 'var(--colorNeutralForeground2BrandHover)', + colorNeutralForeground2BrandPressed: 'var(--colorNeutralForeground2BrandPressed)', + colorNeutralForeground2BrandSelected: 'var(--colorNeutralForeground2BrandSelected)', + colorNeutralForeground3: 'var(--colorNeutralForeground3)', + colorNeutralForeground3Hover: 'var(--colorNeutralForeground3Hover)', + colorNeutralForeground3Pressed: 'var(--colorNeutralForeground3Pressed)', + colorNeutralForeground3Selected: 'var(--colorNeutralForeground3Selected)', + colorNeutralForeground3BrandHover: 'var(--colorNeutralForeground3BrandHover)', + colorNeutralForeground3BrandPressed: 'var(--colorNeutralForeground3BrandPressed)', + colorNeutralForeground3BrandSelected: 'var(--colorNeutralForeground3BrandSelected)', + colorNeutralForeground4: 'var(--colorNeutralForeground4)', + colorNeutralForegroundDisabled: 'var(--colorNeutralForegroundDisabled)', + colorBrandForegroundLink: 'var(--colorBrandForegroundLink)', + colorBrandForegroundLinkHover: 'var(--colorBrandForegroundLinkHover)', + colorBrandForegroundLinkPressed: 'var(--colorBrandForegroundLinkPressed)', + colorBrandForegroundLinkSelected: 'var(--colorBrandForegroundLinkSelected)', + colorCompoundBrandForeground1: 'var(--colorCompoundBrandForeground1)', + colorCompoundBrandForeground1Hover: 'var(--colorCompoundBrandForeground1Hover)', + colorCompoundBrandForeground1Pressed: 'var(--colorCompoundBrandForeground1Pressed)', + colorNeutralForegroundOnBrand: 'var(--colorNeutralForegroundOnBrand)', + colorNeutralForegroundInverted: 'var(--colorNeutralForegroundInverted)', + colorNeutralForegroundInvertedHover: 'var(--colorNeutralForegroundInvertedHover)', + colorNeutralForegroundInvertedPressed: 'var(--colorNeutralForegroundInvertedPressed)', + colorNeutralForegroundInvertedSelected: 'var(--colorNeutralForegroundInvertedSelected)', + colorNeutralForegroundInvertedLink: 'var(--colorNeutralForegroundInvertedLink)', + colorNeutralForegroundInvertedLinkHover: 'var(--colorNeutralForegroundInvertedLinkHover)', + colorNeutralForegroundInvertedLinkPressed: 'var(--colorNeutralForegroundInvertedLinkPressed)', + colorNeutralForegroundInvertedLinkSelected: 'var(--colorNeutralForegroundInvertedLinkSelected)', + colorNeutralForegroundInvertedDisabled: 'var(--colorNeutralForegroundInvertedDisabled)', + colorBrandForeground1: 'var(--colorBrandForeground1)', + colorBrandForeground2: 'var(--colorBrandForeground2)', + colorBrandForegroundInverted: 'var(--colorBrandForegroundInverted)', + colorBrandForegroundInvertedHover: 'var(--colorBrandForegroundInvertedHover)', + colorBrandForegroundInvertedPressed: 'var(--colorBrandForegroundInvertedPressed)', + colorBrandForegroundOnLight: 'var(--colorBrandForegroundOnLight)', + colorBrandForegroundOnLightHover: 'var(--colorBrandForegroundOnLightHover)', + colorBrandForegroundOnLightPressed: 'var(--colorBrandForegroundOnLightPressed)', + colorBrandForegroundOnLightSelected: 'var(--colorBrandForegroundOnLightSelected)', + colorNeutralBackground1: 'var(--colorNeutralBackground1)', + colorNeutralBackground1Hover: 'var(--colorNeutralBackground1Hover)', + colorNeutralBackground1Pressed: 'var(--colorNeutralBackground1Pressed)', + colorNeutralBackground1Selected: 'var(--colorNeutralBackground1Selected)', + colorNeutralBackground2: 'var(--colorNeutralBackground2)', + colorNeutralBackground2Hover: 'var(--colorNeutralBackground2Hover)', + colorNeutralBackground2Pressed: 'var(--colorNeutralBackground2Pressed)', + colorNeutralBackground2Selected: 'var(--colorNeutralBackground2Selected)', + colorNeutralBackground3: 'var(--colorNeutralBackground3)', + colorNeutralBackground3Hover: 'var(--colorNeutralBackground3Hover)', + colorNeutralBackground3Pressed: 'var(--colorNeutralBackground3Pressed)', + colorNeutralBackground3Selected: 'var(--colorNeutralBackground3Selected)', + colorNeutralBackground4: 'var(--colorNeutralBackground4)', + colorNeutralBackground4Hover: 'var(--colorNeutralBackground4Hover)', + colorNeutralBackground4Pressed: 'var(--colorNeutralBackground4Pressed)', + colorNeutralBackground4Selected: 'var(--colorNeutralBackground4Selected)', + colorNeutralBackground5: 'var(--colorNeutralBackground5)', + colorNeutralBackground5Hover: 'var(--colorNeutralBackground5Hover)', + colorNeutralBackground5Pressed: 'var(--colorNeutralBackground5Pressed)', + colorNeutralBackground5Selected: 'var(--colorNeutralBackground5Selected)', + colorNeutralBackground6: 'var(--colorNeutralBackground6)', + colorNeutralBackgroundInverted: 'var(--colorNeutralBackgroundInverted)', + colorSubtleBackground: 'var(--colorSubtleBackground)', + colorSubtleBackgroundHover: 'var(--colorSubtleBackgroundHover)', + colorSubtleBackgroundPressed: 'var(--colorSubtleBackgroundPressed)', + colorSubtleBackgroundSelected: 'var(--colorSubtleBackgroundSelected)', + colorSubtleBackgroundLightAlphaHover: 'var(--colorSubtleBackgroundLightAlphaHover)', + colorSubtleBackgroundLightAlphaPressed: 'var(--colorSubtleBackgroundLightAlphaPressed)', + colorSubtleBackgroundLightAlphaSelected: 'var(--colorSubtleBackgroundLightAlphaSelected)', + colorSubtleBackgroundInverted: 'var(--colorSubtleBackgroundInverted)', + colorSubtleBackgroundInvertedHover: 'var(--colorSubtleBackgroundInvertedHover)', + colorSubtleBackgroundInvertedPressed: 'var(--colorSubtleBackgroundInvertedPressed)', + colorSubtleBackgroundInvertedSelected: 'var(--colorSubtleBackgroundInvertedSelected)', + colorTransparentBackground: 'var(--colorTransparentBackground)', + colorTransparentBackgroundHover: 'var(--colorTransparentBackgroundHover)', + colorTransparentBackgroundPressed: 'var(--colorTransparentBackgroundPressed)', + colorTransparentBackgroundSelected: 'var(--colorTransparentBackgroundSelected)', + colorNeutralBackgroundDisabled: 'var(--colorNeutralBackgroundDisabled)', + colorNeutralBackgroundInvertedDisabled: 'var(--colorNeutralBackgroundInvertedDisabled)', + colorNeutralStencil1: 'var(--colorNeutralStencil1)', + colorNeutralStencil2: 'var(--colorNeutralStencil2)', + colorBrandBackground: 'var(--colorBrandBackground)', + colorBrandBackgroundHover: 'var(--colorBrandBackgroundHover)', + colorBrandBackgroundPressed: 'var(--colorBrandBackgroundPressed)', + colorBrandBackgroundSelected: 'var(--colorBrandBackgroundSelected)', + colorCompoundBrandBackground: 'var(--colorCompoundBrandBackground)', + colorCompoundBrandBackgroundHover: 'var(--colorCompoundBrandBackgroundHover)', + colorCompoundBrandBackgroundPressed: 'var(--colorCompoundBrandBackgroundPressed)', + colorBrandBackgroundStatic: 'var(--colorBrandBackgroundStatic)', + colorBrandBackground2: 'var(--colorBrandBackground2)', + colorBrandBackgroundInverted: 'var(--colorBrandBackgroundInverted)', + colorBrandBackgroundInvertedHover: 'var(--colorBrandBackgroundInvertedHover)', + colorBrandBackgroundInvertedPressed: 'var(--colorBrandBackgroundInvertedPressed)', + colorBrandBackgroundInvertedSelected: 'var(--colorBrandBackgroundInvertedSelected)', + colorNeutralStrokeAccessible: 'var(--colorNeutralStrokeAccessible)', + colorNeutralStrokeAccessibleHover: 'var(--colorNeutralStrokeAccessibleHover)', + colorNeutralStrokeAccessiblePressed: 'var(--colorNeutralStrokeAccessiblePressed)', + colorNeutralStrokeAccessibleSelected: 'var(--colorNeutralStrokeAccessibleSelected)', + colorNeutralStroke1: 'var(--colorNeutralStroke1)', + colorNeutralStroke1Hover: 'var(--colorNeutralStroke1Hover)', + colorNeutralStroke1Pressed: 'var(--colorNeutralStroke1Pressed)', + colorNeutralStroke1Selected: 'var(--colorNeutralStroke1Selected)', + colorNeutralStroke2: 'var(--colorNeutralStroke2)', + colorNeutralStroke3: 'var(--colorNeutralStroke3)', + colorNeutralStrokeOnBrand: 'var(--colorNeutralStrokeOnBrand)', + colorNeutralStrokeOnBrand2: 'var(--colorNeutralStrokeOnBrand2)', + colorNeutralStrokeOnBrand2Hover: 'var(--colorNeutralStrokeOnBrand2Hover)', + colorNeutralStrokeOnBrand2Pressed: 'var(--colorNeutralStrokeOnBrand2Pressed)', + colorNeutralStrokeOnBrand2Selected: 'var(--colorNeutralStrokeOnBrand2Selected)', + colorBrandStroke1: 'var(--colorBrandStroke1)', + colorBrandStroke2: 'var(--colorBrandStroke2)', + colorCompoundBrandStroke: 'var(--colorCompoundBrandStroke)', + colorCompoundBrandStrokeHover: 'var(--colorCompoundBrandStrokeHover)', + colorCompoundBrandStrokePressed: 'var(--colorCompoundBrandStrokePressed)', + colorNeutralStrokeDisabled: 'var(--colorNeutralStrokeDisabled)', + colorNeutralStrokeInvertedDisabled: 'var(--colorNeutralStrokeInvertedDisabled)', + colorTransparentStroke: 'var(--colorTransparentStroke)', + colorTransparentStrokeInteractive: 'var(--colorTransparentStrokeInteractive)', + colorTransparentStrokeDisabled: 'var(--colorTransparentStrokeDisabled)', + colorStrokeFocus1: 'var(--colorStrokeFocus1)', + colorStrokeFocus2: 'var(--colorStrokeFocus2)', + colorNeutralShadowAmbient: 'var(--colorNeutralShadowAmbient)', + colorNeutralShadowKey: 'var(--colorNeutralShadowKey)', + colorNeutralShadowAmbientLighter: 'var(--colorNeutralShadowAmbientLighter)', + colorNeutralShadowKeyLighter: 'var(--colorNeutralShadowKeyLighter)', + colorNeutralShadowAmbientDarker: 'var(--colorNeutralShadowAmbientDarker)', + colorNeutralShadowKeyDarker: 'var(--colorNeutralShadowKeyDarker)', + colorBrandShadowAmbient: 'var(--colorBrandShadowAmbient)', + colorBrandShadowKey: 'var(--colorBrandShadowKey)', + + // Color palette tokens + // Color palette anchor tokens + colorPaletteAnchorBackground1: 'var(--colorPaletteAnchorBackground1)', + colorPaletteAnchorBackground2: 'var(--colorPaletteAnchorBackground2)', + colorPaletteAnchorBackground3: 'var(--colorPaletteAnchorBackground3)', + colorPaletteAnchorBorderActive: 'var(--colorPaletteAnchorBorderActive)', + colorPaletteAnchorBorder1: 'var(--colorPaletteAnchorBorder1)', + colorPaletteAnchorBorder2: 'var(--colorPaletteAnchorBorder2)', + colorPaletteAnchorForeground1: 'var(--colorPaletteAnchorForeground1)', + colorPaletteAnchorForeground2: 'var(--colorPaletteAnchorForeground2)', + colorPaletteAnchorForeground3: 'var(--colorPaletteAnchorForeground3)', + + // Color palette beige tokens + colorPaletteBeigeBackground1: 'var(--colorPaletteBeigeBackground1)', + colorPaletteBeigeBackground2: 'var(--colorPaletteBeigeBackground2)', + colorPaletteBeigeBackground3: 'var(--colorPaletteBeigeBackground3)', + colorPaletteBeigeBorderActive: 'var(--colorPaletteBeigeBorderActive)', + colorPaletteBeigeBorder1: 'var(--colorPaletteBeigeBorder1)', + colorPaletteBeigeBorder2: 'var(--colorPaletteBeigeBorder2)', + colorPaletteBeigeForeground1: 'var(--colorPaletteBeigeForeground1)', + colorPaletteBeigeForeground2: 'var(--colorPaletteBeigeForeground2)', + colorPaletteBeigeForeground3: 'var(--colorPaletteBeigeForeground3)', + + // Color palette berry tokens + colorPaletteBerryBackground1: 'var(--colorPaletteBerryBackground1)', + colorPaletteBerryBackground2: 'var(--colorPaletteBerryBackground2)', + colorPaletteBerryBackground3: 'var(--colorPaletteBerryBackground3)', + colorPaletteBerryBorderActive: 'var(--colorPaletteBerryBorderActive)', + colorPaletteBerryBorder1: 'var(--colorPaletteBerryBorder1)', + colorPaletteBerryBorder2: 'var(--colorPaletteBerryBorder2)', + colorPaletteBerryForeground1: 'var(--colorPaletteBerryForeground1)', + colorPaletteBerryForeground2: 'var(--colorPaletteBerryForeground2)', + colorPaletteBerryForeground3: 'var(--colorPaletteBerryForeground3)', + + // Color palette blue tokens + colorPaletteBlueBackground1: 'var(--colorPaletteBlueBackground1)', + colorPaletteBlueBackground2: 'var(--colorPaletteBlueBackground2)', + colorPaletteBlueBackground3: 'var(--colorPaletteBlueBackground3)', + colorPaletteBlueBorderActive: 'var(--colorPaletteBlueBorderActive)', + colorPaletteBlueBorder1: 'var(--colorPaletteBlueBorder1)', + colorPaletteBlueBorder2: 'var(--colorPaletteBlueBorder2)', + colorPaletteBlueForeground1: 'var(--colorPaletteBlueForeground1)', + colorPaletteBlueForeground2: 'var(--colorPaletteBlueForeground2)', + colorPaletteBlueForeground3: 'var(--colorPaletteBlueForeground3)', + + // Color palette brass tokens + colorPaletteBrassBackground1: 'var(--colorPaletteBrassBackground1)', + colorPaletteBrassBackground2: 'var(--colorPaletteBrassBackground2)', + colorPaletteBrassBackground3: 'var(--colorPaletteBrassBackground3)', + colorPaletteBrassBorderActive: 'var(--colorPaletteBrassBorderActive)', + colorPaletteBrassBorder1: 'var(--colorPaletteBrassBorder1)', + colorPaletteBrassBorder2: 'var(--colorPaletteBrassBorder2)', + colorPaletteBrassForeground1: 'var(--colorPaletteBrassForeground1)', + colorPaletteBrassForeground2: 'var(--colorPaletteBrassForeground2)', + colorPaletteBrassForeground3: 'var(--colorPaletteBrassForeground3)', + + // Color palette bronze tokens + colorPaletteBronzeBackground1: 'var(--colorPaletteBronzeBackground1)', + colorPaletteBronzeBackground2: 'var(--colorPaletteBronzeBackground2)', + colorPaletteBronzeBackground3: 'var(--colorPaletteBronzeBackground3)', + colorPaletteBronzeBorderActive: 'var(--colorPaletteBronzeBorderActive)', + colorPaletteBronzeBorder1: 'var(--colorPaletteBronzeBorder1)', + colorPaletteBronzeBorder2: 'var(--colorPaletteBronzeBorder2)', + colorPaletteBronzeForeground1: 'var(--colorPaletteBronzeForeground1)', + colorPaletteBronzeForeground2: 'var(--colorPaletteBronzeForeground2)', + colorPaletteBronzeForeground3: 'var(--colorPaletteBronzeForeground3)', + + // Color palette brown tokens + colorPaletteBrownBackground1: 'var(--colorPaletteBrownBackground1)', + colorPaletteBrownBackground2: 'var(--colorPaletteBrownBackground2)', + colorPaletteBrownBackground3: 'var(--colorPaletteBrownBackground3)', + colorPaletteBrownBorderActive: 'var(--colorPaletteBrownBorderActive)', + colorPaletteBrownBorder1: 'var(--colorPaletteBrownBorder1)', + colorPaletteBrownBorder2: 'var(--colorPaletteBrownBorder2)', + colorPaletteBrownForeground1: 'var(--colorPaletteBrownForeground1)', + colorPaletteBrownForeground2: 'var(--colorPaletteBrownForeground2)', + colorPaletteBrownForeground3: 'var(--colorPaletteBrownForeground3)', + + // Color palette burgundy tokens + colorPaletteBurgundyBackground1: 'var(--colorPaletteBurgundyBackground1)', + colorPaletteBurgundyBackground2: 'var(--colorPaletteBurgundyBackground2)', + colorPaletteBurgundyBackground3: 'var(--colorPaletteBurgundyBackground3)', + colorPaletteBurgundyBorderActive: 'var(--colorPaletteBurgundyBorderActive)', + colorPaletteBurgundyBorder1: 'var(--colorPaletteBurgundyBorder1)', + colorPaletteBurgundyBorder2: 'var(--colorPaletteBurgundyBorder2)', + colorPaletteBurgundyForeground1: 'var(--colorPaletteBurgundyForeground1)', + colorPaletteBurgundyForeground2: 'var(--colorPaletteBurgundyForeground2)', + colorPaletteBurgundyForeground3: 'var(--colorPaletteBurgundyForeground3)', + + // Color palette charcoal tokens + colorPaletteCharcoalBackground1: 'var(--colorPaletteCharcoalBackground1)', + colorPaletteCharcoalBackground2: 'var(--colorPaletteCharcoalBackground2)', + colorPaletteCharcoalBackground3: 'var(--colorPaletteCharcoalBackground3)', + colorPaletteCharcoalBorderActive: 'var(--colorPaletteCharcoalBorderActive)', + colorPaletteCharcoalBorder1: 'var(--colorPaletteCharcoalBorder1)', + colorPaletteCharcoalBorder2: 'var(--colorPaletteCharcoalBorder2)', + colorPaletteCharcoalForeground1: 'var(--colorPaletteCharcoalForeground1)', + colorPaletteCharcoalForeground2: 'var(--colorPaletteCharcoalForeground2)', + colorPaletteCharcoalForeground3: 'var(--colorPaletteCharcoalForeground3)', + + // Color palette cornflower tokens + colorPaletteCornflowerBackground1: 'var(--colorPaletteCornflowerBackground1)', + colorPaletteCornflowerBackground2: 'var(--colorPaletteCornflowerBackground2)', + colorPaletteCornflowerBackground3: 'var(--colorPaletteCornflowerBackground3)', + colorPaletteCornflowerBorderActive: 'var(--colorPaletteCornflowerBorderActive)', + colorPaletteCornflowerBorder1: 'var(--colorPaletteCornflowerBorder1)', + colorPaletteCornflowerBorder2: 'var(--colorPaletteCornflowerBorder2)', + colorPaletteCornflowerForeground1: 'var(--colorPaletteCornflowerForeground1)', + colorPaletteCornflowerForeground2: 'var(--colorPaletteCornflowerForeground2)', + colorPaletteCornflowerForeground3: 'var(--colorPaletteCornflowerForeground3)', + + // Color palette cranberry tokens + colorPaletteCranberryBackground1: 'var(--colorPaletteCranberryBackground1)', + colorPaletteCranberryBackground2: 'var(--colorPaletteCranberryBackground2)', + colorPaletteCranberryBackground3: 'var(--colorPaletteCranberryBackground3)', + colorPaletteCranberryBorderActive: 'var(--colorPaletteCranberryBorderActive)', + colorPaletteCranberryBorder1: 'var(--colorPaletteCranberryBorder1)', + colorPaletteCranberryBorder2: 'var(--colorPaletteCranberryBorder2)', + colorPaletteCranberryForeground1: 'var(--colorPaletteCranberryForeground1)', + colorPaletteCranberryForeground2: 'var(--colorPaletteCranberryForeground2)', + colorPaletteCranberryForeground3: 'var(--colorPaletteCranberryForeground3)', + + // Color palette cyan tokens + colorPaletteCyanBackground1: 'var(--colorPaletteCyanBackground1)', + colorPaletteCyanBackground2: 'var(--colorPaletteCyanBackground2)', + colorPaletteCyanBackground3: 'var(--colorPaletteCyanBackground3)', + colorPaletteCyanBorderActive: 'var(--colorPaletteCyanBorderActive)', + colorPaletteCyanBorder1: 'var(--colorPaletteCyanBorder1)', + colorPaletteCyanBorder2: 'var(--colorPaletteCyanBorder2)', + colorPaletteCyanForeground1: 'var(--colorPaletteCyanForeground1)', + colorPaletteCyanForeground2: 'var(--colorPaletteCyanForeground2)', + colorPaletteCyanForeground3: 'var(--colorPaletteCyanForeground3)', + + // Color palette dark blue tokens + colorPaletteDarkBlueBackground1: 'var(--colorPaletteDarkBlueBackground1)', + colorPaletteDarkBlueBackground2: 'var(--colorPaletteDarkBlueBackground2)', + colorPaletteDarkBlueBackground3: 'var(--colorPaletteDarkBlueBackground3)', + colorPaletteDarkBlueBorderActive: 'var(--colorPaletteDarkBlueBorderActive)', + colorPaletteDarkBlueBorder1: 'var(--colorPaletteDarkBlueBorder1)', + colorPaletteDarkBlueBorder2: 'var(--colorPaletteDarkBlueBorder2)', + colorPaletteDarkBlueForeground1: 'var(--colorPaletteDarkBlueForeground1)', + colorPaletteDarkBlueForeground2: 'var(--colorPaletteDarkBlueForeground2)', + colorPaletteDarkBlueForeground3: 'var(--colorPaletteDarkBlueForeground3)', + + // Color palette dark brown tokens + colorPaletteDarkBrownBackground1: 'var(--colorPaletteDarkBrownBackground1)', + colorPaletteDarkBrownBackground2: 'var(--colorPaletteDarkBrownBackground2)', + colorPaletteDarkBrownBackground3: 'var(--colorPaletteDarkBrownBackground3)', + colorPaletteDarkBrownBorderActive: 'var(--colorPaletteDarkBrownBorderActive)', + colorPaletteDarkBrownBorder1: 'var(--colorPaletteDarkBrownBorder1)', + colorPaletteDarkBrownBorder2: 'var(--colorPaletteDarkBrownBorder2)', + colorPaletteDarkBrownForeground1: 'var(--colorPaletteDarkBrownForeground1)', + colorPaletteDarkBrownForeground2: 'var(--colorPaletteDarkBrownForeground2)', + colorPaletteDarkBrownForeground3: 'var(--colorPaletteDarkBrownForeground3)', + + // Color palette dark green tokens + colorPaletteDarkGreenBackground1: 'var(--colorPaletteDarkGreenBackground1)', + colorPaletteDarkGreenBackground2: 'var(--colorPaletteDarkGreenBackground2)', + colorPaletteDarkGreenBackground3: 'var(--colorPaletteDarkGreenBackground3)', + colorPaletteDarkGreenBorderActive: 'var(--colorPaletteDarkGreenBorderActive)', + colorPaletteDarkGreenBorder1: 'var(--colorPaletteDarkGreenBorder1)', + colorPaletteDarkGreenBorder2: 'var(--colorPaletteDarkGreenBorder2)', + colorPaletteDarkGreenForeground1: 'var(--colorPaletteDarkGreenForeground1)', + colorPaletteDarkGreenForeground2: 'var(--colorPaletteDarkGreenForeground2)', + colorPaletteDarkGreenForeground3: 'var(--colorPaletteDarkGreenForeground3)', + + // Color palette dark orange tokens + colorPaletteDarkOrangeBackground1: 'var(--colorPaletteDarkOrangeBackground1)', + colorPaletteDarkOrangeBackground2: 'var(--colorPaletteDarkOrangeBackground2)', + colorPaletteDarkOrangeBackground3: 'var(--colorPaletteDarkOrangeBackground3)', + colorPaletteDarkOrangeBorderActive: 'var(--colorPaletteDarkOrangeBorderActive)', + colorPaletteDarkOrangeBorder1: 'var(--colorPaletteDarkOrangeBorder1)', + colorPaletteDarkOrangeBorder2: 'var(--colorPaletteDarkOrangeBorder2)', + colorPaletteDarkOrangeForeground1: 'var(--colorPaletteDarkOrangeForeground1)', + colorPaletteDarkOrangeForeground2: 'var(--colorPaletteDarkOrangeForeground2)', + colorPaletteDarkOrangeForeground3: 'var(--colorPaletteDarkOrangeForeground3)', + + // Color palette dark purple tokens + colorPaletteDarkPurpleBackground1: 'var(--colorPaletteDarkPurpleBackground1)', + colorPaletteDarkPurpleBackground2: 'var(--colorPaletteDarkPurpleBackground2)', + colorPaletteDarkPurpleBackground3: 'var(--colorPaletteDarkPurpleBackground3)', + colorPaletteDarkPurpleBorderActive: 'var(--colorPaletteDarkPurpleBorderActive)', + colorPaletteDarkPurpleBorder1: 'var(--colorPaletteDarkPurpleBorder1)', + colorPaletteDarkPurpleBorder2: 'var(--colorPaletteDarkPurpleBorder2)', + colorPaletteDarkPurpleForeground1: 'var(--colorPaletteDarkPurpleForeground1)', + colorPaletteDarkPurpleForeground2: 'var(--colorPaletteDarkPurpleForeground2)', + colorPaletteDarkPurpleForeground3: 'var(--colorPaletteDarkPurpleForeground3)', + + // Color palette dark red tokens + colorPaletteDarkRedBackground1: 'var(--colorPaletteDarkRedBackground1)', + colorPaletteDarkRedBackground2: 'var(--colorPaletteDarkRedBackground2)', + colorPaletteDarkRedBackground3: 'var(--colorPaletteDarkRedBackground3)', + colorPaletteDarkRedBorderActive: 'var(--colorPaletteDarkRedBorderActive)', + colorPaletteDarkRedBorder1: 'var(--colorPaletteDarkRedBorder1)', + colorPaletteDarkRedBorder2: 'var(--colorPaletteDarkRedBorder2)', + colorPaletteDarkRedForeground1: 'var(--colorPaletteDarkRedForeground1)', + colorPaletteDarkRedForeground2: 'var(--colorPaletteDarkRedForeground2)', + colorPaletteDarkRedForeground3: 'var(--colorPaletteDarkRedForeground3)', + + // Color palette dark teal tokens + colorPaletteDarkTealBackground1: 'var(--colorPaletteDarkTealBackground1)', + colorPaletteDarkTealBackground2: 'var(--colorPaletteDarkTealBackground2)', + colorPaletteDarkTealBackground3: 'var(--colorPaletteDarkTealBackground3)', + colorPaletteDarkTealBorderActive: 'var(--colorPaletteDarkTealBorderActive)', + colorPaletteDarkTealBorder1: 'var(--colorPaletteDarkTealBorder1)', + colorPaletteDarkTealBorder2: 'var(--colorPaletteDarkTealBorder2)', + colorPaletteDarkTealForeground1: 'var(--colorPaletteDarkTealForeground1)', + colorPaletteDarkTealForeground2: 'var(--colorPaletteDarkTealForeground2)', + colorPaletteDarkTealForeground3: 'var(--colorPaletteDarkTealForeground3)', + + // Color palette forest tokens + colorPaletteForestBackground1: 'var(--colorPaletteForestBackground1)', + colorPaletteForestBackground2: 'var(--colorPaletteForestBackground2)', + colorPaletteForestBackground3: 'var(--colorPaletteForestBackground3)', + colorPaletteForestBorderActive: 'var(--colorPaletteForestBorderActive)', + colorPaletteForestBorder1: 'var(--colorPaletteForestBorder1)', + colorPaletteForestBorder2: 'var(--colorPaletteForestBorder2)', + colorPaletteForestForeground1: 'var(--colorPaletteForestForeground1)', + colorPaletteForestForeground2: 'var(--colorPaletteForestForeground2)', + colorPaletteForestForeground3: 'var(--colorPaletteForestForeground3)', + + // Color palette gold tokens + colorPaletteGoldBackground1: 'var(--colorPaletteGoldBackground1)', + colorPaletteGoldBackground2: 'var(--colorPaletteGoldBackground2)', + colorPaletteGoldBackground3: 'var(--colorPaletteGoldBackground3)', + colorPaletteGoldBorderActive: 'var(--colorPaletteGoldBorderActive)', + colorPaletteGoldBorder1: 'var(--colorPaletteGoldBorder1)', + colorPaletteGoldBorder2: 'var(--colorPaletteGoldBorder2)', + colorPaletteGoldForeground1: 'var(--colorPaletteGoldForeground1)', + colorPaletteGoldForeground2: 'var(--colorPaletteGoldForeground2)', + colorPaletteGoldForeground3: 'var(--colorPaletteGoldForeground3)', + + // Color palette grape tokens + colorPaletteGrapeBackground1: 'var(--colorPaletteGrapeBackground1)', + colorPaletteGrapeBackground2: 'var(--colorPaletteGrapeBackground2)', + colorPaletteGrapeBackground3: 'var(--colorPaletteGrapeBackground3)', + colorPaletteGrapeBorderActive: 'var(--colorPaletteGrapeBorderActive)', + colorPaletteGrapeBorder1: 'var(--colorPaletteGrapeBorder1)', + colorPaletteGrapeBorder2: 'var(--colorPaletteGrapeBorder2)', + colorPaletteGrapeForeground1: 'var(--colorPaletteGrapeForeground1)', + colorPaletteGrapeForeground2: 'var(--colorPaletteGrapeForeground2)', + colorPaletteGrapeForeground3: 'var(--colorPaletteGrapeForeground3)', + + // Color palette green tokens + colorPaletteGreenBackground1: 'var(--colorPaletteGreenBackground1)', + colorPaletteGreenBackground2: 'var(--colorPaletteGreenBackground2)', + colorPaletteGreenBackground3: 'var(--colorPaletteGreenBackground3)', + colorPaletteGreenBorderActive: 'var(--colorPaletteGreenBorderActive)', + colorPaletteGreenBorder1: 'var(--colorPaletteGreenBorder1)', + colorPaletteGreenBorder2: 'var(--colorPaletteGreenBorder2)', + colorPaletteGreenForeground1: 'var(--colorPaletteGreenForeground1)', + colorPaletteGreenForeground2: 'var(--colorPaletteGreenForeground2)', + colorPaletteGreenForeground3: 'var(--colorPaletteGreenForeground3)', + + // Color palette hot pink tokens + colorPaletteHotPinkBackground1: 'var(--colorPaletteHotPinkBackground1)', + colorPaletteHotPinkBackground2: 'var(--colorPaletteHotPinkBackground2)', + colorPaletteHotPinkBackground3: 'var(--colorPaletteHotPinkBackground3)', + colorPaletteHotPinkBorderActive: 'var(--colorPaletteHotPinkBorderActive)', + colorPaletteHotPinkBorder1: 'var(--colorPaletteHotPinkBorder1)', + colorPaletteHotPinkBorder2: 'var(--colorPaletteHotPinkBorder2)', + colorPaletteHotPinkForeground1: 'var(--colorPaletteHotPinkForeground1)', + colorPaletteHotPinkForeground2: 'var(--colorPaletteHotPinkForeground2)', + colorPaletteHotPinkForeground3: 'var(--colorPaletteHotPinkForeground3)', + + // Color palette lavender tokens + colorPaletteLavenderBackground1: 'var(--colorPaletteLavenderBackground1)', + colorPaletteLavenderBackground2: 'var(--colorPaletteLavenderBackground2)', + colorPaletteLavenderBackground3: 'var(--colorPaletteLavenderBackground3)', + colorPaletteLavenderBorderActive: 'var(--colorPaletteLavenderBorderActive)', + colorPaletteLavenderBorder1: 'var(--colorPaletteLavenderBorder1)', + colorPaletteLavenderBorder2: 'var(--colorPaletteLavenderBorder2)', + colorPaletteLavenderForeground1: 'var(--colorPaletteLavenderForeground1)', + colorPaletteLavenderForeground2: 'var(--colorPaletteLavenderForeground2)', + colorPaletteLavenderForeground3: 'var(--colorPaletteLavenderForeground3)', + + // Color palette light blue tokens + colorPaletteLightBlueBackground1: 'var(--colorPaletteLightBlueBackground1)', + colorPaletteLightBlueBackground2: 'var(--colorPaletteLightBlueBackground2)', + colorPaletteLightBlueBackground3: 'var(--colorPaletteLightBlueBackground3)', + colorPaletteLightBlueBorderActive: 'var(--colorPaletteLightBlueBorderActive)', + colorPaletteLightBlueBorder1: 'var(--colorPaletteLightBlueBorder1)', + colorPaletteLightBlueBorder2: 'var(--colorPaletteLightBlueBorder2)', + colorPaletteLightBlueForeground1: 'var(--colorPaletteLightBlueForeground1)', + colorPaletteLightBlueForeground2: 'var(--colorPaletteLightBlueForeground2)', + colorPaletteLightBlueForeground3: 'var(--colorPaletteLightBlueForeground3)', + + // Color palette light green tokens + colorPaletteLightGreenBackground1: 'var(--colorPaletteLightGreenBackground1)', + colorPaletteLightGreenBackground2: 'var(--colorPaletteLightGreenBackground2)', + colorPaletteLightGreenBackground3: 'var(--colorPaletteLightGreenBackground3)', + colorPaletteLightGreenBorderActive: 'var(--colorPaletteLightGreenBorderActive)', + colorPaletteLightGreenBorder1: 'var(--colorPaletteLightGreenBorder1)', + colorPaletteLightGreenBorder2: 'var(--colorPaletteLightGreenBorder2)', + colorPaletteLightGreenForeground1: 'var(--colorPaletteLightGreenForeground1)', + colorPaletteLightGreenForeground2: 'var(--colorPaletteLightGreenForeground2)', + colorPaletteLightGreenForeground3: 'var(--colorPaletteLightGreenForeground3)', + + // Color palette light teal tokens + colorPaletteLightTealBackground1: 'var(--colorPaletteLightTealBackground1)', + colorPaletteLightTealBackground2: 'var(--colorPaletteLightTealBackground2)', + colorPaletteLightTealBackground3: 'var(--colorPaletteLightTealBackground3)', + colorPaletteLightTealBorderActive: 'var(--colorPaletteLightTealBorderActive)', + colorPaletteLightTealBorder1: 'var(--colorPaletteLightTealBorder1)', + colorPaletteLightTealBorder2: 'var(--colorPaletteLightTealBorder2)', + colorPaletteLightTealForeground1: 'var(--colorPaletteLightTealForeground1)', + colorPaletteLightTealForeground2: 'var(--colorPaletteLightTealForeground2)', + colorPaletteLightTealForeground3: 'var(--colorPaletteLightTealForeground3)', + + // Color palette lilac tokens + colorPaletteLilacBackground1: 'var(--colorPaletteLilacBackground1)', + colorPaletteLilacBackground2: 'var(--colorPaletteLilacBackground2)', + colorPaletteLilacBackground3: 'var(--colorPaletteLilacBackground3)', + colorPaletteLilacBorderActive: 'var(--colorPaletteLilacBorderActive)', + colorPaletteLilacBorder1: 'var(--colorPaletteLilacBorder1)', + colorPaletteLilacBorder2: 'var(--colorPaletteLilacBorder2)', + colorPaletteLilacForeground1: 'var(--colorPaletteLilacForeground1)', + colorPaletteLilacForeground2: 'var(--colorPaletteLilacForeground2)', + colorPaletteLilacForeground3: 'var(--colorPaletteLilacForeground3)', + + // Color palette lime tokens + colorPaletteLimeBackground1: 'var(--colorPaletteLimeBackground1)', + colorPaletteLimeBackground2: 'var(--colorPaletteLimeBackground2)', + colorPaletteLimeBackground3: 'var(--colorPaletteLimeBackground3)', + colorPaletteLimeBorderActive: 'var(--colorPaletteLimeBorderActive)', + colorPaletteLimeBorder1: 'var(--colorPaletteLimeBorder1)', + colorPaletteLimeBorder2: 'var(--colorPaletteLimeBorder2)', + colorPaletteLimeForeground1: 'var(--colorPaletteLimeForeground1)', + colorPaletteLimeForeground2: 'var(--colorPaletteLimeForeground2)', + colorPaletteLimeForeground3: 'var(--colorPaletteLimeForeground3)', + + // Color palette magenta tokens + colorPaletteMagentaBackground1: 'var(--colorPaletteMagentaBackground1)', + colorPaletteMagentaBackground2: 'var(--colorPaletteMagentaBackground2)', + colorPaletteMagentaBackground3: 'var(--colorPaletteMagentaBackground3)', + colorPaletteMagentaBorderActive: 'var(--colorPaletteMagentaBorderActive)', + colorPaletteMagentaBorder1: 'var(--colorPaletteMagentaBorder1)', + colorPaletteMagentaBorder2: 'var(--colorPaletteMagentaBorder2)', + colorPaletteMagentaForeground1: 'var(--colorPaletteMagentaForeground1)', + colorPaletteMagentaForeground2: 'var(--colorPaletteMagentaForeground2)', + colorPaletteMagentaForeground3: 'var(--colorPaletteMagentaForeground3)', + + // Color palette marigold tokens + colorPaletteMarigoldBackground1: 'var(--colorPaletteMarigoldBackground1)', + colorPaletteMarigoldBackground2: 'var(--colorPaletteMarigoldBackground2)', + colorPaletteMarigoldBackground3: 'var(--colorPaletteMarigoldBackground3)', + colorPaletteMarigoldBorderActive: 'var(--colorPaletteMarigoldBorderActive)', + colorPaletteMarigoldBorder1: 'var(--colorPaletteMarigoldBorder1)', + colorPaletteMarigoldBorder2: 'var(--colorPaletteMarigoldBorder2)', + colorPaletteMarigoldForeground1: 'var(--colorPaletteMarigoldForeground1)', + colorPaletteMarigoldForeground2: 'var(--colorPaletteMarigoldForeground2)', + colorPaletteMarigoldForeground3: 'var(--colorPaletteMarigoldForeground3)', + + // Color palette mink tokens + colorPaletteMinkBackground1: 'var(--colorPaletteMinkBackground1)', + colorPaletteMinkBackground2: 'var(--colorPaletteMinkBackground2)', + colorPaletteMinkBackground3: 'var(--colorPaletteMinkBackground3)', + colorPaletteMinkBorderActive: 'var(--colorPaletteMinkBorderActive)', + colorPaletteMinkBorder1: 'var(--colorPaletteMinkBorder1)', + colorPaletteMinkBorder2: 'var(--colorPaletteMinkBorder2)', + colorPaletteMinkForeground1: 'var(--colorPaletteMinkForeground1)', + colorPaletteMinkForeground2: 'var(--colorPaletteMinkForeground2)', + colorPaletteMinkForeground3: 'var(--colorPaletteMinkForeground3)', + + // Color palette navy tokens + colorPaletteNavyBackground1: 'var(--colorPaletteNavyBackground1)', + colorPaletteNavyBackground2: 'var(--colorPaletteNavyBackground2)', + colorPaletteNavyBackground3: 'var(--colorPaletteNavyBackground3)', + colorPaletteNavyBorderActive: 'var(--colorPaletteNavyBorderActive)', + colorPaletteNavyBorder1: 'var(--colorPaletteNavyBorder1)', + colorPaletteNavyBorder2: 'var(--colorPaletteNavyBorder2)', + colorPaletteNavyForeground1: 'var(--colorPaletteNavyForeground1)', + colorPaletteNavyForeground2: 'var(--colorPaletteNavyForeground2)', + colorPaletteNavyForeground3: 'var(--colorPaletteNavyForeground3)', + + // Color palette orange tokens + colorPaletteOrangeBackground1: 'var(--colorPaletteOrangeBackground1)', + colorPaletteOrangeBackground2: 'var(--colorPaletteOrangeBackground2)', + colorPaletteOrangeBackground3: 'var(--colorPaletteOrangeBackground3)', + colorPaletteOrangeBorderActive: 'var(--colorPaletteOrangeBorderActive)', + colorPaletteOrangeBorder1: 'var(--colorPaletteOrangeBorder1)', + colorPaletteOrangeBorder2: 'var(--colorPaletteOrangeBorder2)', + colorPaletteOrangeForeground1: 'var(--colorPaletteOrangeForeground1)', + colorPaletteOrangeForeground2: 'var(--colorPaletteOrangeForeground2)', + colorPaletteOrangeForeground3: 'var(--colorPaletteOrangeForeground3)', + + // Color palette orchid tokens + colorPaletteOrchidBackground1: 'var(--colorPaletteOrchidBackground1)', + colorPaletteOrchidBackground2: 'var(--colorPaletteOrchidBackground2)', + colorPaletteOrchidBackground3: 'var(--colorPaletteOrchidBackground3)', + colorPaletteOrchidBorderActive: 'var(--colorPaletteOrchidBorderActive)', + colorPaletteOrchidBorder1: 'var(--colorPaletteOrchidBorder1)', + colorPaletteOrchidBorder2: 'var(--colorPaletteOrchidBorder2)', + colorPaletteOrchidForeground1: 'var(--colorPaletteOrchidForeground1)', + colorPaletteOrchidForeground2: 'var(--colorPaletteOrchidForeground2)', + colorPaletteOrchidForeground3: 'var(--colorPaletteOrchidForeground3)', + + // Color palette peach tokens + colorPalettePeachBackground1: 'var(--colorPalettePeachBackground1)', + colorPalettePeachBackground2: 'var(--colorPalettePeachBackground2)', + colorPalettePeachBackground3: 'var(--colorPalettePeachBackground3)', + colorPalettePeachBorderActive: 'var(--colorPalettePeachBorderActive)', + colorPalettePeachBorder1: 'var(--colorPalettePeachBorder1)', + colorPalettePeachBorder2: 'var(--colorPalettePeachBorder2)', + colorPalettePeachForeground1: 'var(--colorPalettePeachForeground1)', + colorPalettePeachForeground2: 'var(--colorPalettePeachForeground2)', + colorPalettePeachForeground3: 'var(--colorPalettePeachForeground3)', + + // Color palette pink tokens + colorPalettePinkBackground1: 'var(--colorPalettePinkBackground1)', + colorPalettePinkBackground2: 'var(--colorPalettePinkBackground2)', + colorPalettePinkBackground3: 'var(--colorPalettePinkBackground3)', + colorPalettePinkBorderActive: 'var(--colorPalettePinkBorderActive)', + colorPalettePinkBorder1: 'var(--colorPalettePinkBorder1)', + colorPalettePinkBorder2: 'var(--colorPalettePinkBorder2)', + colorPalettePinkForeground1: 'var(--colorPalettePinkForeground1)', + colorPalettePinkForeground2: 'var(--colorPalettePinkForeground2)', + colorPalettePinkForeground3: 'var(--colorPalettePinkForeground3)', + + // Color palette platinum tokens + colorPalettePlatinumBackground1: 'var(--colorPalettePlatinumBackground1)', + colorPalettePlatinumBackground2: 'var(--colorPalettePlatinumBackground2)', + colorPalettePlatinumBackground3: 'var(--colorPalettePlatinumBackground3)', + colorPalettePlatinumBorderActive: 'var(--colorPalettePlatinumBorderActive)', + colorPalettePlatinumBorder1: 'var(--colorPalettePlatinumBorder1)', + colorPalettePlatinumBorder2: 'var(--colorPalettePlatinumBorder2)', + colorPalettePlatinumForeground1: 'var(--colorPalettePlatinumForeground1)', + colorPalettePlatinumForeground2: 'var(--colorPalettePlatinumForeground2)', + colorPalettePlatinumForeground3: 'var(--colorPalettePlatinumForeground3)', + + // Color palette plum tokens + colorPalettePlumBackground1: 'var(--colorPalettePlumBackground1)', + colorPalettePlumBackground2: 'var(--colorPalettePlumBackground2)', + colorPalettePlumBackground3: 'var(--colorPalettePlumBackground3)', + colorPalettePlumBorderActive: 'var(--colorPalettePlumBorderActive)', + colorPalettePlumBorder1: 'var(--colorPalettePlumBorder1)', + colorPalettePlumBorder2: 'var(--colorPalettePlumBorder2)', + colorPalettePlumForeground1: 'var(--colorPalettePlumForeground1)', + colorPalettePlumForeground2: 'var(--colorPalettePlumForeground2)', + colorPalettePlumForeground3: 'var(--colorPalettePlumForeground3)', + + // Color palette pumpkin tokens + colorPalettePumpkinBackground1: 'var(--colorPalettePumpkinBackground1)', + colorPalettePumpkinBackground2: 'var(--colorPalettePumpkinBackground2)', + colorPalettePumpkinBackground3: 'var(--colorPalettePumpkinBackground3)', + colorPalettePumpkinBorderActive: 'var(--colorPalettePumpkinBorderActive)', + colorPalettePumpkinBorder1: 'var(--colorPalettePumpkinBorder1)', + colorPalettePumpkinBorder2: 'var(--colorPalettePumpkinBorder2)', + colorPalettePumpkinForeground1: 'var(--colorPalettePumpkinForeground1)', + colorPalettePumpkinForeground2: 'var(--colorPalettePumpkinForeground2)', + colorPalettePumpkinForeground3: 'var(--colorPalettePumpkinForeground3)', + + // Color palette purple tokens + colorPalettePurpleBackground1: 'var(--colorPalettePurpleBackground1)', + colorPalettePurpleBackground2: 'var(--colorPalettePurpleBackground2)', + colorPalettePurpleBackground3: 'var(--colorPalettePurpleBackground3)', + colorPalettePurpleBorderActive: 'var(--colorPalettePurpleBorderActive)', + colorPalettePurpleBorder1: 'var(--colorPalettePurpleBorder1)', + colorPalettePurpleBorder2: 'var(--colorPalettePurpleBorder2)', + colorPalettePurpleForeground1: 'var(--colorPalettePurpleForeground1)', + colorPalettePurpleForeground2: 'var(--colorPalettePurpleForeground2)', + colorPalettePurpleForeground3: 'var(--colorPalettePurpleForeground3)', + + // Color palette red tokens + colorPaletteRedBackground1: 'var(--colorPaletteRedBackground1)', + colorPaletteRedBackground2: 'var(--colorPaletteRedBackground2)', + colorPaletteRedBackground3: 'var(--colorPaletteRedBackground3)', + colorPaletteRedBorderActive: 'var(--colorPaletteRedBorderActive)', + colorPaletteRedBorder1: 'var(--colorPaletteRedBorder1)', + colorPaletteRedBorder2: 'var(--colorPaletteRedBorder2)', + colorPaletteRedForeground1: 'var(--colorPaletteRedForeground1)', + colorPaletteRedForeground2: 'var(--colorPaletteRedForeground2)', + colorPaletteRedForeground3: 'var(--colorPaletteRedForeground3)', + + // Color palette royal blue tokens + colorPaletteRoyalBlueBackground1: 'var(--colorPaletteRoyalBlueBackground1)', + colorPaletteRoyalBlueBackground2: 'var(--colorPaletteRoyalBlueBackground2)', + colorPaletteRoyalBlueBackground3: 'var(--colorPaletteRoyalBlueBackground3)', + colorPaletteRoyalBlueBorderActive: 'var(--colorPaletteRoyalBlueBorderActive)', + colorPaletteRoyalBlueBorder1: 'var(--colorPaletteRoyalBlueBorder1)', + colorPaletteRoyalBlueBorder2: 'var(--colorPaletteRoyalBlueBorder2)', + colorPaletteRoyalBlueForeground1: 'var(--colorPaletteRoyalBlueForeground1)', + colorPaletteRoyalBlueForeground2: 'var(--colorPaletteRoyalBlueForeground2)', + colorPaletteRoyalBlueForeground3: 'var(--colorPaletteRoyalBlueForeground3)', + + // Color palette seafoam tokens + colorPaletteSeafoamBackground1: 'var(--colorPaletteSeafoamBackground1)', + colorPaletteSeafoamBackground2: 'var(--colorPaletteSeafoamBackground2)', + colorPaletteSeafoamBackground3: 'var(--colorPaletteSeafoamBackground3)', + colorPaletteSeafoamBorderActive: 'var(--colorPaletteSeafoamBorderActive)', + colorPaletteSeafoamBorder1: 'var(--colorPaletteSeafoamBorder1)', + colorPaletteSeafoamBorder2: 'var(--colorPaletteSeafoamBorder2)', + colorPaletteSeafoamForeground1: 'var(--colorPaletteSeafoamForeground1)', + colorPaletteSeafoamForeground2: 'var(--colorPaletteSeafoamForeground2)', + colorPaletteSeafoamForeground3: 'var(--colorPaletteSeafoamForeground3)', + + // Color palette silver tokens + colorPaletteSilverBackground1: 'var(--colorPaletteSilverBackground1)', + colorPaletteSilverBackground2: 'var(--colorPaletteSilverBackground2)', + colorPaletteSilverBackground3: 'var(--colorPaletteSilverBackground3)', + colorPaletteSilverBorderActive: 'var(--colorPaletteSilverBorderActive)', + colorPaletteSilverBorder1: 'var(--colorPaletteSilverBorder1)', + colorPaletteSilverBorder2: 'var(--colorPaletteSilverBorder2)', + colorPaletteSilverForeground1: 'var(--colorPaletteSilverForeground1)', + colorPaletteSilverForeground2: 'var(--colorPaletteSilverForeground2)', + colorPaletteSilverForeground3: 'var(--colorPaletteSilverForeground3)', + + // Color palette steel tokens + colorPaletteSteelBackground1: 'var(--colorPaletteSteelBackground1)', + colorPaletteSteelBackground2: 'var(--colorPaletteSteelBackground2)', + colorPaletteSteelBackground3: 'var(--colorPaletteSteelBackground3)', + colorPaletteSteelBorderActive: 'var(--colorPaletteSteelBorderActive)', + colorPaletteSteelBorder1: 'var(--colorPaletteSteelBorder1)', + colorPaletteSteelBorder2: 'var(--colorPaletteSteelBorder2)', + colorPaletteSteelForeground1: 'var(--colorPaletteSteelForeground1)', + colorPaletteSteelForeground2: 'var(--colorPaletteSteelForeground2)', + colorPaletteSteelForeground3: 'var(--colorPaletteSteelForeground3)', + + // Color palette teal tokens + colorPaletteTealBackground1: 'var(--colorPaletteTealBackground1)', + colorPaletteTealBackground2: 'var(--colorPaletteTealBackground2)', + colorPaletteTealBackground3: 'var(--colorPaletteTealBackground3)', + colorPaletteTealBorderActive: 'var(--colorPaletteTealBorderActive)', + colorPaletteTealBorder1: 'var(--colorPaletteTealBorder1)', + colorPaletteTealBorder2: 'var(--colorPaletteTealBorder2)', + colorPaletteTealForeground1: 'var(--colorPaletteTealForeground1)', + colorPaletteTealForeground2: 'var(--colorPaletteTealForeground2)', + colorPaletteTealForeground3: 'var(--colorPaletteTealForeground3)', + + // Color palette yellow tokens + colorPaletteYellowBackground1: 'var(--colorPaletteYellowBackground1)', + colorPaletteYellowBackground2: 'var(--colorPaletteYellowBackground2)', + colorPaletteYellowBackground3: 'var(--colorPaletteYellowBackground3)', + colorPaletteYellowBorderActive: 'var(--colorPaletteYellowBorderActive)', + colorPaletteYellowBorder1: 'var(--colorPaletteYellowBorder1)', + colorPaletteYellowBorder2: 'var(--colorPaletteYellowBorder2)', + colorPaletteYellowForeground1: 'var(--colorPaletteYellowForeground1)', + colorPaletteYellowForeground2: 'var(--colorPaletteYellowForeground2)', + colorPaletteYellowForeground3: 'var(--colorPaletteYellowForeground3)', + + // Border radius tokens + borderRadiusNone: 'var(--borderRadiusNone)', + borderRadiusSmall: 'var(--borderRadiusSmall)', + borderRadiusMedium: 'var(--borderRadiusMedium)', + borderRadiusLarge: 'var(--borderRadiusLarge)', + borderRadiusXLarge: 'var(--borderRadiusXLarge)', + borderRadiusCircular: 'var(--borderRadiusCircular)', + + // Font family tokens + fontFamilyBase: 'var(--fontFamilyBase)', + fontFamilyMonospace: 'var(--fontFamilyMonospace)', + fontFamilyNumeric: 'var(--fontFamilyNumeric)', + + // Font size tokens + fontSizeBase100: 'var(--fontSizeBase100)', + fontSizeBase200: 'var(--fontSizeBase200)', + fontSizeBase300: 'var(--fontSizeBase300)', + fontSizeBase400: 'var(--fontSizeBase400)', + fontSizeBase500: 'var(--fontSizeBase500)', + fontSizeBase600: 'var(--fontSizeBase600)', + fontSizeHero700: 'var(--fontSizeHero700)', + fontSizeHero800: 'var(--fontSizeHero800)', + fontSizeHero900: 'var(--fontSizeHero900)', + fontSizeHero1000: 'var(--fontSizeHero1000)', + + // Font weight tokens + fontWeightRegular: 'var(--fontWeightRegular)', + fontWeightMedium: 'var(--fontWeightMedium)', + fontWeightSemibold: 'var(--fontWeightSemibold)', + + // Line height tokens + lineHeightBase100: 'var(--lineHeightBase100)', + lineHeightBase200: 'var(--lineHeightBase200)', + lineHeightBase300: 'var(--lineHeightBase300)', + lineHeightBase400: 'var(--lineHeightBase400)', + lineHeightBase500: 'var(--lineHeightBase500)', + lineHeightBase600: 'var(--lineHeightBase600)', + lineHeightHero700: 'var(--lineHeightHero700)', + lineHeightHero800: 'var(--lineHeightHero800)', + lineHeightHero900: 'var(--lineHeightHero900)', + lineHeightHero1000: 'var(--lineHeightHero1000)', + + // Shadow tokens + shadow2: 'var(--shadow2)', + shadow4: 'var(--shadow4)', + shadow8: 'var(--shadow8)', + shadow16: 'var(--shadow16)', + shadow28: 'var(--shadow28)', + shadow64: 'var(--shadow64)', + + // Shadow brand tokens + shadow2Brand: 'var(--shadow2Brand)', + shadow4Brand: 'var(--shadow4Brand)', + shadow8Brand: 'var(--shadow8Brand)', + shadow16Brand: 'var(--shadow16Brand)', + shadow28Brand: 'var(--shadow28Brand)', + shadow64Brand: 'var(--shadow64Brand)', + + // Stroke width tokens + strokeWidthThin: 'var(--strokeWidthThin)', + strokeWidthThick: 'var(--strokeWidthThick)', + strokeWidthThicker: 'var(--strokeWidthThicker)', + strokeWidthThickest: 'var(--strokeWidthThickest)', +}; diff --git a/packages/react-theme/src/index.ts b/packages/react-theme/src/index.ts index 03dff838d25b1..22c620c4b7996 100644 --- a/packages/react-theme/src/index.ts +++ b/packages/react-theme/src/index.ts @@ -1,6 +1,8 @@ export * from './themes/index'; export * from './utils/index'; +export { tokens } from './global/tokens'; + export type { Brands, BrandVariants, From 8ebda2d39b991ec4d35ae9642ec2fcc1d1d8d2db Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Tue, 14 Dec 2021 12:31:57 -0800 Subject: [PATCH 2/6] Change files --- ...i-react-theme-29a85799-2552-40b5-bf1b-9c0c4372f1a4.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-theme-29a85799-2552-40b5-bf1b-9c0c4372f1a4.json diff --git a/change/@fluentui-react-theme-29a85799-2552-40b5-bf1b-9c0c4372f1a4.json b/change/@fluentui-react-theme-29a85799-2552-40b5-bf1b-9c0c4372f1a4.json new file mode 100644 index 0000000000000..f9a1286657cdf --- /dev/null +++ b/change/@fluentui-react-theme-29a85799-2552-40b5-bf1b-9c0c4372f1a4.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "react-theme: Exporting token to css variable mapping.", + "packageName": "@fluentui/react-theme", + "email": "Humberto.Morimoto@microsoft.com", + "dependentChangeType": "patch" +} From 3b8309699207c3158cb1a0e75ef44b9e45bccb87 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Tue, 14 Dec 2021 12:44:22 -0800 Subject: [PATCH 3/6] codemods: Replacing use of functions in makeStyles with direct use of tokens. --- .../v9ThemeFlattening.mod.ts | 2 +- .../codeMods/tests/mock/v9/mMakeStylesDeep.ts | 46 +++++++++---------- .../v9ThemeFlattening.test.ts | 34 +++++++------- 3 files changed, 41 insertions(+), 41 deletions(-) diff --git a/packages/codemods/src/codeMods/mods/v9ThemeFlattening/v9ThemeFlattening.mod.ts b/packages/codemods/src/codeMods/mods/v9ThemeFlattening/v9ThemeFlattening.mod.ts index 44af74c4c2bad..260c3f059d056 100644 --- a/packages/codemods/src/codeMods/mods/v9ThemeFlattening/v9ThemeFlattening.mod.ts +++ b/packages/codemods/src/codeMods/mods/v9ThemeFlattening/v9ThemeFlattening.mod.ts @@ -107,7 +107,7 @@ const v9ThemeFlattening: CodeMod = { const nodeText = node.getText(); if ( - (nodeText.startsWith('theme.global') || nodeText.startsWith('theme.alias')) && + (nodeText.startsWith('tokens.global') || nodeText.startsWith('tokens.alias')) && nodeText.indexOf('.', 6) !== -1 ) { const newToken = renameToken(nodeText); diff --git a/packages/codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts b/packages/codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts index 9d9df6ea9d427..184d0cd642ac7 100644 --- a/packages/codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts +++ b/packages/codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts @@ -2,27 +2,27 @@ const makeStyles = () => null; export const useStylesA = makeStyles({ - neutral: theme => ({ - border: `5px solid ${theme.alias.color.neutral.neutralStroke1}`, - color: theme.alias.color.neutral.neutralForeground1, - }), - colors: theme => ({ - border: `5px solid ${theme.alias.color.blue.border2}`, - color: theme.alias.color.marigold.foreground2, - }), - shadow: theme => ({ - boxShadow: theme.alias.shadow.shadow8, - }), - border: theme => ({ - borderRadius: theme.global.borderRadius.circular, - }), - stroke: theme => ({ - borderBottomWidth: theme.global.strokeWidth.thin, - }), - type: theme => ({ - fontFamily: theme.global.type.fontFamilies.base, - fontSize: theme.global.type.fontSizes.base[300], - lineHeight: theme.global.type.lineHeights.base[300], - fontWeight: theme.global.type.fontWeights.regular, - }), + neutral: { + border: `5px solid ${tokens.colorNeutralStroke1}`, + color: tokens.colorNeutralForeground1, + }, + colors: { + border: `5px solid ${tokens.colorPaletteBlueBorder2}`, + color: tokens.colorPaletteMarigoldForeground2, + }, + shadow: { + boxShadow: tokens.shadow8, + }, + border: { + borderRadius: tokens.borderRadiusCircular, + }, + stroke: { + borderBottomWidth: tokens.strokeWidthThin, + }, + type: { + fontFamily: tokens.fontFamilyBase, + fontSize: tokens.fontSizeBase300, + lineHeight: tokens.lineHeightBase300, + fontWeight: tokens.fontWeightRegular, + }, }); diff --git a/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts b/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts index a0306e22aed9d..066bc88c6b6c1 100644 --- a/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts +++ b/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts @@ -17,28 +17,28 @@ describe('v9: Theme flattening', () => { "const makeStyles = () => null; export const useStylesA = makeStyles({ - neutral: theme => ({ - border: \`5px solid \${theme.colorNeutralStroke1}\`, - color: theme.colorNeutralForeground1, + neutral: ({ + border: \`5px solid \${tokens.colorNeutralStroke1}\`, + color: tokens.colorNeutralForeground1, }), - colors: theme => ({ - border: \`5px solid \${theme.colorPaletteBlueBorder2}\`, - color: theme.colorPaletteMarigoldForeground2, + colors: ({ + border: \`5px solid \${tokens.colorPaletteBlueBorder2}\`, + color: tokens.colorPaletteMarigoldForeground2, }), - shadow: theme => ({ - boxShadow: theme.shadow8, + shadow: ({ + boxShadow: tokens.shadow8, }), - border: theme => ({ - borderRadius: theme.borderRadiusCircular, + border: ({ + borderRadius: tokens.borderRadiusCircular, }), - stroke: theme => ({ - borderBottomWidth: theme.strokeWidthThin, + stroke: ({ + borderBottomWidth: tokens.strokeWidthThin, }), - type: theme => ({ - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase300, - lineHeight: theme.lineHeightBase300, - fontWeight: theme.fontWeightRegular, + type: ({ + fontFamily: tokens.fontFamilyBase, + fontSize: tokens.fontSizeBase300, + lineHeight: tokens.lineHeightBase300, + fontWeight: tokens.fontWeightRegular, }), }); " From 5ea6ef9d207f1e0d4c88df9f1d5c84ab3c0ce173 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Tue, 14 Dec 2021 12:46:26 -0800 Subject: [PATCH 4/6] Change files --- ...ntui-codemods-9986d460-b596-4bbe-b4ff-70db558a7cc7.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-codemods-9986d460-b596-4bbe-b4ff-70db558a7cc7.json diff --git a/change/@fluentui-codemods-9986d460-b596-4bbe-b4ff-70db558a7cc7.json b/change/@fluentui-codemods-9986d460-b596-4bbe-b4ff-70db558a7cc7.json new file mode 100644 index 0000000000000..ce05f033a14a6 --- /dev/null +++ b/change/@fluentui-codemods-9986d460-b596-4bbe-b4ff-70db558a7cc7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "codemods: Replacing use of functions in makeStyles with direct use of tokens.", + "packageName": "@fluentui/codemods", + "email": "Humberto.Morimoto@microsoft.com", + "dependentChangeType": "patch" +} From ae41efc08702f0354f6236040a3095bf95f6553d Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Tue, 14 Dec 2021 12:55:28 -0800 Subject: [PATCH 5/6] Adding imports. --- .../codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts | 2 ++ .../tests/v9ThemeFlattening/v9ThemeFlattening.test.ts | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts b/packages/codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts index 184d0cd642ac7..02cf8db7f52b3 100644 --- a/packages/codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts +++ b/packages/codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts @@ -1,4 +1,6 @@ // @ts-nocheck +import { tokens } from '@fluentui/react-theme'; + const makeStyles = () => null; export const useStylesA = makeStyles({ diff --git a/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts b/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts index 066bc88c6b6c1..5e630bd746ef7 100644 --- a/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts +++ b/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts @@ -14,7 +14,9 @@ describe('v9: Theme flattening', () => { v9ThemeFlattening.run(file); expect(file.getText()).toMatchInlineSnapshot(` - "const makeStyles = () => null; + "import { tokens } from '@fluentui/react-theme'; + + const makeStyles = () => null; export const useStylesA = makeStyles({ neutral: ({ From 3e5cd173b0d83ef98d41b2c1269bf3eaaaabe845 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Tue, 14 Dec 2021 16:45:17 -0800 Subject: [PATCH 6/6] Fixing failing test. --- .../v9ThemeFlattening.test.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts b/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts index 5e630bd746ef7..302fa67f9d74f 100644 --- a/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts +++ b/packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts @@ -19,29 +19,29 @@ describe('v9: Theme flattening', () => { const makeStyles = () => null; export const useStylesA = makeStyles({ - neutral: ({ + neutral: { border: \`5px solid \${tokens.colorNeutralStroke1}\`, color: tokens.colorNeutralForeground1, - }), - colors: ({ + }, + colors: { border: \`5px solid \${tokens.colorPaletteBlueBorder2}\`, color: tokens.colorPaletteMarigoldForeground2, - }), - shadow: ({ + }, + shadow: { boxShadow: tokens.shadow8, - }), - border: ({ + }, + border: { borderRadius: tokens.borderRadiusCircular, - }), - stroke: ({ + }, + stroke: { borderBottomWidth: tokens.strokeWidthThin, - }), - type: ({ + }, + type: { fontFamily: tokens.fontFamilyBase, fontSize: tokens.fontSizeBase300, lineHeight: tokens.lineHeightBase300, fontWeight: tokens.fontWeightRegular, - }), + }, }); " `);