@fluentui/web-components 3.0.0-beta.8 → 3.0.0-beta.80

package/dist/esm/theme/design-tokens.js

@@ -1,386 +1,2222 @@
 // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
-export const colorNeutralForeground1 = '--colorNeutralForeground1';
-export const colorNeutralForeground1Hover = '--colorNeutralForeground1Hover';
-export const colorNeutralForeground1Pressed = '--colorNeutralForeground1Pressed';
-export const colorNeutralForeground1Selected = '--colorNeutralForeground1Selected';
-export const colorNeutralForeground2 = '--colorNeutralForeground2';
-export const colorNeutralForeground2Hover = '--colorNeutralForeground2Hover';
-export const colorNeutralForeground2Pressed = '--colorNeutralForeground2Pressed';
-export const colorNeutralForeground2Selected = '--colorNeutralForeground2Selected';
-export const colorNeutralForeground2BrandHover = '--colorNeutralForeground2BrandHover';
-export const colorNeutralForeground2BrandPressed = '--colorNeutralForeground2BrandPressed';
-export const colorNeutralForeground2BrandSelected = '--colorNeutralForeground2BrandSelected';
-export const colorNeutralForeground3 = '--colorNeutralForeground3';
-export const colorNeutralForeground3Hover = '--colorNeutralForeground3Hover';
-export const colorNeutralForeground3Pressed = '--colorNeutralForeground3Pressed';
-export const colorNeutralForeground3Selected = '--colorNeutralForeground3Selected';
-export const colorNeutralForeground3BrandHover = '--colorNeutralForeground3BrandHover';
-export const colorNeutralForeground3BrandPressed = '--colorNeutralForeground3BrandPressed';
-export const colorNeutralForeground3BrandSelected = '--colorNeutralForeground3BrandSelected';
-export const colorNeutralForeground4 = '--colorNeutralForeground4';
-export const colorNeutralForegroundDisabled = '--colorNeutralForegroundDisabled';
-export const colorBrandForegroundLink = '--colorBrandForegroundLink';
-export const colorBrandForegroundLinkHover = '--colorBrandForegroundLinkHover';
-export const colorBrandForegroundLinkPressed = '--colorBrandForegroundLinkPressed';
-export const colorBrandForegroundLinkSelected = '--colorBrandForegroundLinkSelected';
-export const colorNeutralForeground2Link = '--colorNeutralForeground2Link';
-export const colorNeutralForeground2LinkHover = '--colorNeutralForeground2LinkHover';
-export const colorNeutralForeground2LinkPressed = '--colorNeutralForeground2LinkPressed';
-export const colorNeutralForeground2LinkSelected = '--colorNeutralForeground2LinkSelected';
-export const colorCompoundBrandForeground1 = '--colorCompoundBrandForeground1';
-export const colorCompoundBrandForeground1Hover = '--colorCompoundBrandForeground1Hover';
-export const colorCompoundBrandForeground1Pressed = '--colorCompoundBrandForeground1Pressed';
-export const colorNeutralForegroundOnBrand = '--colorNeutralForegroundOnBrand';
-export const colorNeutralForegroundInverted = '--colorNeutralForegroundInverted';
-export const colorNeutralForegroundInvertedHover = '--colorNeutralForegroundInvertedHover';
-export const colorNeutralForegroundInvertedPressed = '--colorNeutralForegroundInvertedPressed';
-export const colorNeutralForegroundInvertedSelected = '--colorNeutralForegroundInvertedSelected';
-export const colorNeutralForegroundInverted2 = '--colorNeutralForegroundInverted2';
-export const colorNeutralForegroundStaticInverted = '--colorNeutralForegroundStaticInverted';
-export const colorNeutralForegroundInvertedLink = '--colorNeutralForegroundInvertedLink';
-export const colorNeutralForegroundInvertedLinkHover = '--colorNeutralForegroundInvertedLinkHover';
-export const colorNeutralForegroundInvertedLinkPressed = '--colorNeutralForegroundInvertedLinkPressed';
-export const colorNeutralForegroundInvertedLinkSelected = '--colorNeutralForegroundInvertedLinkSelected';
-export const colorNeutralForegroundInvertedDisabled = '--colorNeutralForegroundInvertedDisabled';
-export const colorBrandForeground1 = '--colorBrandForeground1';
-export const colorBrandForeground2 = '--colorBrandForeground2';
-export const colorNeutralForeground1Static = '--colorNeutralForeground1Static';
-export const colorBrandForegroundInverted = '--colorBrandForegroundInverted';
-export const colorBrandForegroundInvertedHover = '--colorBrandForegroundInvertedHover';
-export const colorBrandForegroundInvertedPressed = '--colorBrandForegroundInvertedPressed';
-export const colorBrandForegroundOnLight = '--colorBrandForegroundOnLight';
-export const colorBrandForegroundOnLightHover = '--colorBrandForegroundOnLightHover';
-export const colorBrandForegroundOnLightPressed = '--colorBrandForegroundOnLightPressed';
-export const colorBrandForegroundOnLightSelected = '--colorBrandForegroundOnLightSelected';
-export const colorNeutralBackground1 = '--colorNeutralBackground1';
-export const colorNeutralBackground1Hover = '--colorNeutralBackground1Hover';
-export const colorNeutralBackground1Pressed = '--colorNeutralBackground1Pressed';
-export const colorNeutralBackground1Selected = '--colorNeutralBackground1Selected';
-export const colorNeutralBackground2 = '--colorNeutralBackground2';
-export const colorNeutralBackground2Hover = '--colorNeutralBackground2Hover';
-export const colorNeutralBackground2Pressed = '--colorNeutralBackground2Pressed';
-export const colorNeutralBackground2Selected = '--colorNeutralBackground2Selected';
-export const colorNeutralBackground3 = '--colorNeutralBackground3';
-export const colorNeutralBackground3Hover = '--colorNeutralBackground3Hover';
-export const colorNeutralBackground3Pressed = '--colorNeutralBackground3Pressed';
-export const colorNeutralBackground3Selected = '--colorNeutralBackground3Selected';
-export const colorNeutralBackground4 = '--colorNeutralBackground4';
-export const colorNeutralBackground4Hover = '--colorNeutralBackground4Hover';
-export const colorNeutralBackground4Pressed = '--colorNeutralBackground4Pressed';
-export const colorNeutralBackground4Selected = '--colorNeutralBackground4Selected';
-export const colorNeutralBackground5 = '--colorNeutralBackground5';
-export const colorNeutralBackground5Hover = '--colorNeutralBackground5Hover';
-export const colorNeutralBackground5Pressed = '--colorNeutralBackground5Pressed';
-export const colorNeutralBackground5Selected = '--colorNeutralBackground5Selected';
-export const colorNeutralBackground6 = '--colorNeutralBackground6';
-export const colorNeutralBackgroundStatic = '--colorNeutralBackgroundStatic';
-export const colorNeutralBackgroundInverted = '--colorNeutralBackgroundInverted';
-export const colorSubtleBackground = '--colorSubtleBackground';
-export const colorSubtleBackgroundHover = '--colorSubtleBackgroundHover';
-export const colorSubtleBackgroundPressed = '--colorSubtleBackgroundPressed';
-export const colorSubtleBackgroundSelected = '--colorSubtleBackgroundSelected';
-export const colorSubtleBackgroundLightAlphaHover = '--colorSubtleBackgroundLightAlphaHover';
-export const colorSubtleBackgroundLightAlphaPressed = '--colorSubtleBackgroundLightAlphaPressed';
-export const colorSubtleBackgroundLightAlphaSelected = '--colorSubtleBackgroundLightAlphaSelected';
-export const colorSubtleBackgroundInverted = '--colorSubtleBackgroundInverted';
-export const colorSubtleBackgroundInvertedHover = '--colorSubtleBackgroundInvertedHover';
-export const colorSubtleBackgroundInvertedPressed = '--colorSubtleBackgroundInvertedPressed';
-export const colorSubtleBackgroundInvertedSelected = '--colorSubtleBackgroundInvertedSelected';
-export const colorTransparentBackground = '--colorTransparentBackground';
-export const colorTransparentBackgroundHover = '--colorTransparentBackgroundHover';
-export const colorTransparentBackgroundPressed = '--colorTransparentBackgroundPressed';
-export const colorTransparentBackgroundSelected = '--colorTransparentBackgroundSelected';
-export const colorNeutralBackgroundDisabled = '--colorNeutralBackgroundDisabled';
-export const colorNeutralBackgroundInvertedDisabled = '--colorNeutralBackgroundInvertedDisabled';
-export const colorNeutralStencil1 = '--colorNeutralStencil1';
-export const colorNeutralStencil2 = '--colorNeutralStencil2';
-export const colorNeutralStencil1Alpha = '--colorNeutralStencil1Alpha';
-export const colorNeutralStencil2Alpha = '--colorNeutralStencil2Alpha';
-export const colorBackgroundOverlay = '--colorBackgroundOverlay';
-export const colorScrollbarOverlay = '--colorScrollbarOverlay';
-export const colorBrandBackground = '--colorBrandBackground';
-export const colorBrandBackgroundHover = '--colorBrandBackgroundHover';
-export const colorBrandBackgroundPressed = '--colorBrandBackgroundPressed';
-export const colorBrandBackgroundSelected = '--colorBrandBackgroundSelected';
-export const colorCompoundBrandBackground = '--colorCompoundBrandBackground';
-export const colorCompoundBrandBackgroundHover = '--colorCompoundBrandBackgroundHover';
-export const colorCompoundBrandBackgroundPressed = '--colorCompoundBrandBackgroundPressed';
-export const colorBrandBackgroundStatic = '--colorBrandBackgroundStatic';
-export const colorBrandBackground2 = '--colorBrandBackground2';
-export const colorBrandBackgroundInverted = '--colorBrandBackgroundInverted';
-export const colorBrandBackgroundInvertedHover = '--colorBrandBackgroundInvertedHover';
-export const colorBrandBackgroundInvertedPressed = '--colorBrandBackgroundInvertedPressed';
-export const colorBrandBackgroundInvertedSelected = '--colorBrandBackgroundInvertedSelected';
-export const colorNeutralStrokeAccessible = '--colorNeutralStrokeAccessible';
-export const colorNeutralStrokeAccessibleHover = '--colorNeutralStrokeAccessibleHover';
-export const colorNeutralStrokeAccessiblePressed = '--colorNeutralStrokeAccessiblePressed';
-export const colorNeutralStrokeAccessibleSelected = '--colorNeutralStrokeAccessibleSelected';
-export const colorNeutralStroke1 = '--colorNeutralStroke1';
-export const colorNeutralStroke1Hover = '--colorNeutralStroke1Hover';
-export const colorNeutralStroke1Pressed = '--colorNeutralStroke1Pressed';
-export const colorNeutralStroke1Selected = '--colorNeutralStroke1Selected';
-export const colorNeutralStroke2 = '--colorNeutralStroke2';
-export const colorNeutralStroke3 = '--colorNeutralStroke3';
-export const colorNeutralStrokeOnBrand = '--colorNeutralStrokeOnBrand';
-export const colorNeutralStrokeOnBrand2 = '--colorNeutralStrokeOnBrand2';
-export const colorNeutralStrokeOnBrand2Hover = '--colorNeutralStrokeOnBrand2Hover';
-export const colorNeutralStrokeOnBrand2Pressed = '--colorNeutralStrokeOnBrand2Pressed';
-export const colorNeutralStrokeOnBrand2Selected = '--colorNeutralStrokeOnBrand2Selected';
-export const colorBrandStroke1 = '--colorBrandStroke1';
-export const colorBrandStroke2 = '--colorBrandStroke2';
-export const colorCompoundBrandStroke = '--colorCompoundBrandStroke';
-export const colorCompoundBrandStrokeHover = '--colorCompoundBrandStrokeHover';
-export const colorCompoundBrandStrokePressed = '--colorCompoundBrandStrokePressed';
-export const colorNeutralStrokeDisabled = '--colorNeutralStrokeDisabled';
-export const colorNeutralStrokeInvertedDisabled = '--colorNeutralStrokeInvertedDisabled';
-export const colorTransparentStroke = '--colorTransparentStroke';
-export const colorTransparentStrokeInteractive = '--colorTransparentStrokeInteractive';
-export const colorTransparentStrokeDisabled = '--colorTransparentStrokeDisabled';
-export const colorStrokeFocus1 = '--colorStrokeFocus1';
-export const colorStrokeFocus2 = '--colorStrokeFocus2';
-export const colorNeutralShadowAmbient = '--colorNeutralShadowAmbient';
-export const colorNeutralShadowKey = '--colorNeutralShadowKey';
-export const colorNeutralShadowAmbientLighter = '--colorNeutralShadowAmbientLighter';
-export const colorNeutralShadowKeyLighter = '--colorNeutralShadowKeyLighter';
-export const colorNeutralShadowAmbientDarker = '--colorNeutralShadowAmbientDarker';
-export const colorNeutralShadowKeyDarker = '--colorNeutralShadowKeyDarker';
-export const colorBrandShadowAmbient = '--colorBrandShadowAmbient';
-export const colorBrandShadowKey = '--colorBrandShadowKey';
-export const colorPaletteRedBackground1 = '--colorPaletteRedBackground1';
-export const colorPaletteRedBackground2 = '--colorPaletteRedBackground2';
-export const colorPaletteRedBackground3 = '--colorPaletteRedBackground3';
-export const colorPaletteRedBorderActive = '--colorPaletteRedBorderActive';
-export const colorPaletteRedBorder1 = '--colorPaletteRedBorder1';
-export const colorPaletteRedBorder2 = '--colorPaletteRedBorder2';
-export const colorPaletteRedForeground1 = '--colorPaletteRedForeground1';
-export const colorPaletteRedForeground2 = '--colorPaletteRedForeground2';
-export const colorPaletteRedForeground3 = '--colorPaletteRedForeground3';
-export const colorPaletteRedForegroundInverted = '--colorPaletteRedForegroundInverted';
-export const colorPaletteGreenBackground1 = '--colorPaletteGreenBackground1';
-export const colorPaletteGreenBackground2 = '--colorPaletteGreenBackground2';
-export const colorPaletteGreenBackground3 = '--colorPaletteGreenBackground3';
-export const colorPaletteGreenBorderActive = '--colorPaletteGreenBorderActive';
-export const colorPaletteGreenBorder1 = '--colorPaletteGreenBorder1';
-export const colorPaletteGreenBorder2 = '--colorPaletteGreenBorder2';
-export const colorPaletteGreenForeground1 = '--colorPaletteGreenForeground1';
-export const colorPaletteGreenForeground2 = '--colorPaletteGreenForeground2';
-export const colorPaletteGreenForeground3 = '--colorPaletteGreenForeground3';
-export const colorPaletteGreenForegroundInverted = '--colorPaletteGreenForegroundInverted';
-export const colorPaletteDarkOrangeBackground1 = '--colorPaletteDarkOrangeBackground1';
-export const colorPaletteDarkOrangeBackground2 = '--colorPaletteDarkOrangeBackground2';
-export const colorPaletteDarkOrangeBackground3 = '--colorPaletteDarkOrangeBackground3';
-export const colorPaletteDarkOrangeBorderActive = '--colorPaletteDarkOrangeBorderActive';
-export const colorPaletteDarkOrangeBorder1 = '--colorPaletteDarkOrangeBorder1';
-export const colorPaletteDarkOrangeBorder2 = '--colorPaletteDarkOrangeBorder2';
-export const colorPaletteDarkOrangeForeground1 = '--colorPaletteDarkOrangeForeground1';
-export const colorPaletteDarkOrangeForeground2 = '--colorPaletteDarkOrangeForeground2';
-export const colorPaletteDarkOrangeForeground3 = '--colorPaletteDarkOrangeForeground3';
-export const colorPaletteYellowBackground1 = '--colorPaletteYellowBackground1';
-export const colorPaletteYellowBackground2 = '--colorPaletteYellowBackground2';
-export const colorPaletteYellowBackground3 = '--colorPaletteYellowBackground3';
-export const colorPaletteYellowBorderActive = '--colorPaletteYellowBorderActive';
-export const colorPaletteYellowBorder1 = '--colorPaletteYellowBorder1';
-export const colorPaletteYellowBorder2 = '--colorPaletteYellowBorder2';
-export const colorPaletteYellowForeground1 = '--colorPaletteYellowForeground1';
-export const colorPaletteYellowForeground2 = '--colorPaletteYellowForeground2';
-export const colorPaletteYellowForeground3 = '--colorPaletteYellowForeground3';
-export const colorPaletteYellowForegroundInverted = '--colorPaletteYellowForegroundInverted';
-export const colorPaletteBerryBackground1 = '--colorPaletteBerryBackground1';
-export const colorPaletteBerryBackground2 = '--colorPaletteBerryBackground2';
-export const colorPaletteBerryBackground3 = '--colorPaletteBerryBackground3';
-export const colorPaletteBerryBorderActive = '--colorPaletteBerryBorderActive';
-export const colorPaletteBerryBorder1 = '--colorPaletteBerryBorder1';
-export const colorPaletteBerryBorder2 = '--colorPaletteBerryBorder2';
-export const colorPaletteBerryForeground1 = '--colorPaletteBerryForeground1';
-export const colorPaletteBerryForeground2 = '--colorPaletteBerryForeground2';
-export const colorPaletteBerryForeground3 = '--colorPaletteBerryForeground3';
-export const colorPaletteMarigoldBackground1 = '--colorPaletteMarigoldBackground1';
-export const colorPaletteMarigoldBackground2 = '--colorPaletteMarigoldBackground2';
-export const colorPaletteMarigoldBackground3 = '--colorPaletteMarigoldBackground3';
-export const colorPaletteMarigoldBorderActive = '--colorPaletteMarigoldBorderActive';
-export const colorPaletteMarigoldBorder1 = '--colorPaletteMarigoldBorder1';
-export const colorPaletteMarigoldBorder2 = '--colorPaletteMarigoldBorder2';
-export const colorPaletteMarigoldForeground1 = '--colorPaletteMarigoldForeground1';
-export const colorPaletteMarigoldForeground2 = '--colorPaletteMarigoldForeground2';
-export const colorPaletteMarigoldForeground3 = '--colorPaletteMarigoldForeground3';
-export const colorPaletteLightGreenBackground1 = '--colorPaletteLightGreenBackground1';
-export const colorPaletteLightGreenBackground2 = '--colorPaletteLightGreenBackground2';
-export const colorPaletteLightGreenBackground3 = '--colorPaletteLightGreenBackground3';
-export const colorPaletteLightGreenBorderActive = '--colorPaletteLightGreenBorderActive';
-export const colorPaletteLightGreenBorder1 = '--colorPaletteLightGreenBorder1';
-export const colorPaletteLightGreenBorder2 = '--colorPaletteLightGreenBorder2';
-export const colorPaletteLightGreenForeground1 = '--colorPaletteLightGreenForeground1';
-export const colorPaletteLightGreenForeground2 = '--colorPaletteLightGreenForeground2';
-export const colorPaletteLightGreenForeground3 = '--colorPaletteLightGreenForeground3';
-export const colorPaletteAnchorBackground2 = '--colorPaletteAnchorBackground2';
-export const colorPaletteAnchorBorderActive = '--colorPaletteAnchorBorderActive';
-export const colorPaletteAnchorForeground2 = '--colorPaletteAnchorForeground2';
-export const colorPaletteBeigeBackground2 = '--colorPaletteBeigeBackground2';
-export const colorPaletteBeigeBorderActive = '--colorPaletteBeigeBorderActive';
-export const colorPaletteBeigeForeground2 = '--colorPaletteBeigeForeground2';
-export const colorPaletteBlueBackground2 = '--colorPaletteBlueBackground2';
-export const colorPaletteBlueBorderActive = '--colorPaletteBlueBorderActive';
-export const colorPaletteBlueForeground2 = '--colorPaletteBlueForeground2';
-export const colorPaletteBrassBackground2 = '--colorPaletteBrassBackground2';
-export const colorPaletteBrassBorderActive = '--colorPaletteBrassBorderActive';
-export const colorPaletteBrassForeground2 = '--colorPaletteBrassForeground2';
-export const colorPaletteBrownBackground2 = '--colorPaletteBrownBackground2';
-export const colorPaletteBrownBorderActive = '--colorPaletteBrownBorderActive';
-export const colorPaletteBrownForeground2 = '--colorPaletteBrownForeground2';
-export const colorPaletteCornflowerBackground2 = '--colorPaletteCornflowerBackground2';
-export const colorPaletteCornflowerBorderActive = '--colorPaletteCornflowerBorderActive';
-export const colorPaletteCornflowerForeground2 = '--colorPaletteCornflowerForeground2';
-export const colorPaletteCranberryBackground2 = '--colorPaletteCranberryBackground2';
-export const colorPaletteCranberryBorderActive = '--colorPaletteCranberryBorderActive';
-export const colorPaletteCranberryForeground2 = '--colorPaletteCranberryForeground2';
-export const colorPaletteDarkGreenBackground2 = '--colorPaletteDarkGreenBackground2';
-export const colorPaletteDarkGreenBorderActive = '--colorPaletteDarkGreenBorderActive';
-export const colorPaletteDarkGreenForeground2 = '--colorPaletteDarkGreenForeground2';
-export const colorPaletteDarkRedBackground2 = '--colorPaletteDarkRedBackground2';
-export const colorPaletteDarkRedBorderActive = '--colorPaletteDarkRedBorderActive';
-export const colorPaletteDarkRedForeground2 = '--colorPaletteDarkRedForeground2';
-export const colorPaletteForestBackground2 = '--colorPaletteForestBackground2';
-export const colorPaletteForestBorderActive = '--colorPaletteForestBorderActive';
-export const colorPaletteForestForeground2 = '--colorPaletteForestForeground2';
-export const colorPaletteGoldBackground2 = '--colorPaletteGoldBackground2';
-export const colorPaletteGoldBorderActive = '--colorPaletteGoldBorderActive';
-export const colorPaletteGoldForeground2 = '--colorPaletteGoldForeground2';
-export const colorPaletteGrapeBackground2 = '--colorPaletteGrapeBackground2';
-export const colorPaletteGrapeBorderActive = '--colorPaletteGrapeBorderActive';
-export const colorPaletteGrapeForeground2 = '--colorPaletteGrapeForeground2';
-export const colorPaletteLavenderBackground2 = '--colorPaletteLavenderBackground2';
-export const colorPaletteLavenderBorderActive = '--colorPaletteLavenderBorderActive';
-export const colorPaletteLavenderForeground2 = '--colorPaletteLavenderForeground2';
-export const colorPaletteLightTealBackground2 = '--colorPaletteLightTealBackground2';
-export const colorPaletteLightTealBorderActive = '--colorPaletteLightTealBorderActive';
-export const colorPaletteLightTealForeground2 = '--colorPaletteLightTealForeground2';
-export const colorPaletteLilacBackground2 = '--colorPaletteLilacBackground2';
-export const colorPaletteLilacBorderActive = '--colorPaletteLilacBorderActive';
-export const colorPaletteLilacForeground2 = '--colorPaletteLilacForeground2';
-export const colorPaletteMagentaBackground2 = '--colorPaletteMagentaBackground2';
-export const colorPaletteMagentaBorderActive = '--colorPaletteMagentaBorderActive';
-export const colorPaletteMagentaForeground2 = '--colorPaletteMagentaForeground2';
-export const colorPaletteMinkBackground2 = '--colorPaletteMinkBackground2';
-export const colorPaletteMinkBorderActive = '--colorPaletteMinkBorderActive';
-export const colorPaletteMinkForeground2 = '--colorPaletteMinkForeground2';
-export const colorPaletteNavyBackground2 = '--colorPaletteNavyBackground2';
-export const colorPaletteNavyBorderActive = '--colorPaletteNavyBorderActive';
-export const colorPaletteNavyForeground2 = '--colorPaletteNavyForeground2';
-export const colorPalettePeachBackground2 = '--colorPalettePeachBackground2';
-export const colorPalettePeachBorderActive = '--colorPalettePeachBorderActive';
-export const colorPalettePeachForeground2 = '--colorPalettePeachForeground2';
-export const colorPalettePinkBackground2 = '--colorPalettePinkBackground2';
-export const colorPalettePinkBorderActive = '--colorPalettePinkBorderActive';
-export const colorPalettePinkForeground2 = '--colorPalettePinkForeground2';
-export const colorPalettePlatinumBackground2 = '--colorPalettePlatinumBackground2';
-export const colorPalettePlatinumBorderActive = '--colorPalettePlatinumBorderActive';
-export const colorPalettePlatinumForeground2 = '--colorPalettePlatinumForeground2';
-export const colorPalettePlumBackground2 = '--colorPalettePlumBackground2';
-export const colorPalettePlumBorderActive = '--colorPalettePlumBorderActive';
-export const colorPalettePlumForeground2 = '--colorPalettePlumForeground2';
-export const colorPalettePumpkinBackground2 = '--colorPalettePumpkinBackground2';
-export const colorPalettePumpkinBorderActive = '--colorPalettePumpkinBorderActive';
-export const colorPalettePumpkinForeground2 = '--colorPalettePumpkinForeground2';
-export const colorPalettePurpleBackground2 = '--colorPalettePurpleBackground2';
-export const colorPalettePurpleBorderActive = '--colorPalettePurpleBorderActive';
-export const colorPalettePurpleForeground2 = '--colorPalettePurpleForeground2';
-export const colorPaletteRoyalBlueBackground2 = '--colorPaletteRoyalBlueBackground2';
-export const colorPaletteRoyalBlueBorderActive = '--colorPaletteRoyalBlueBorderActive';
-export const colorPaletteRoyalBlueForeground2 = '--colorPaletteRoyalBlueForeground2';
-export const colorPaletteSeafoamBackground2 = '--colorPaletteSeafoamBackground2';
-export const colorPaletteSeafoamBorderActive = '--colorPaletteSeafoamBorderActive';
-export const colorPaletteSeafoamForeground2 = '--colorPaletteSeafoamForeground2';
-export const colorPaletteSteelBackground2 = '--colorPaletteSteelBackground2';
-export const colorPaletteSteelBorderActive = '--colorPaletteSteelBorderActive';
-export const colorPaletteSteelForeground2 = '--colorPaletteSteelForeground2';
-export const colorPaletteTealBackground2 = '--colorPaletteTealBackground2';
-export const colorPaletteTealBorderActive = '--colorPaletteTealBorderActive';
-export const colorPaletteTealForeground2 = '--colorPaletteTealForeground2';
-export const borderRadiusNone = '--borderRadiusNone';
-export const borderRadiusSmall = '--borderRadiusSmall';
-export const borderRadiusMedium = '--borderRadiusMedium';
-export const borderRadiusLarge = '--borderRadiusLarge';
-export const borderRadiusXLarge = '--borderRadiusXLarge';
-export const borderRadiusCircular = '--borderRadiusCircular';
-export const fontFamilyBase = '--fontFamilyBase';
-export const fontFamilyMonospace = '--fontFamilyMonospace';
-export const fontFamilyNumeric = '--fontFamilyNumeric';
-export const fontSizeBase100 = '--fontSizeBase100';
-export const fontSizeBase200 = '--fontSizeBase200';
-export const fontSizeBase300 = '--fontSizeBase300';
-export const fontSizeBase400 = '--fontSizeBase400';
-export const fontSizeBase500 = '--fontSizeBase500';
-export const fontSizeBase600 = '--fontSizeBase600';
-export const fontSizeHero700 = '--fontSizeHero700';
-export const fontSizeHero800 = '--fontSizeHero800';
-export const fontSizeHero900 = '--fontSizeHero900';
-export const fontSizeHero1000 = '--fontSizeHero1000';
-export const fontWeightRegular = '--fontWeightRegular';
-export const fontWeightMedium = '--fontWeightMedium';
-export const fontWeightSemibold = '--fontWeightSemibold';
-export const fontWeightBold = '--fontWeightBold';
-export const lineHeightBase100 = '--lineHeightBase100';
-export const lineHeightBase200 = '--lineHeightBase200';
-export const lineHeightBase300 = '--lineHeightBase300';
-export const lineHeightBase400 = '--lineHeightBase400';
-export const lineHeightBase500 = '--lineHeightBase500';
-export const lineHeightBase600 = '--lineHeightBase600';
-export const lineHeightHero700 = '--lineHeightHero700';
-export const lineHeightHero800 = '--lineHeightHero800';
-export const lineHeightHero900 = '--lineHeightHero900';
-export const lineHeightHero1000 = '--lineHeightHero1000';
-export const shadow2 = '--shadow2';
-export const shadow4 = '--shadow4';
-export const shadow8 = '--shadow8';
-export const shadow16 = '--shadow16';
-export const shadow28 = '--shadow28';
-export const shadow64 = '--shadow64';
-export const shadow2Brand = '--shadow2Brand';
-export const shadow4Brand = '--shadow4Brand';
-export const shadow8Brand = '--shadow8Brand';
-export const shadow16Brand = '--shadow16Brand';
-export const shadow28Brand = '--shadow28Brand';
-export const shadow64Brand = '--shadow64Brand';
-export const strokeWidthThin = '--strokeWidthThin';
-export const strokeWidthThick = '--strokeWidthThick';
-export const strokeWidthThicker = '--strokeWidthThicker';
-export const strokeWidthThickest = '--strokeWidthThickest';
-export const spacingHorizontalNone = '--spacingHorizontalNone';
-export const spacingHorizontalXXS = '--spacingHorizontalXXS';
-export const spacingHorizontalXS = '--spacingHorizontalXS';
-export const spacingHorizontalSNudge = '--spacingHorizontalSNudge';
-export const spacingHorizontalS = '--spacingHorizontalS';
-export const spacingHorizontalMNudge = '--spacingHorizontalMNudge';
-export const spacingHorizontalM = '--spacingHorizontalM';
-export const spacingHorizontalL = '--spacingHorizontalL';
-export const spacingHorizontalXL = '--spacingHorizontalXL';
-export const spacingHorizontalXXL = '--spacingHorizontalXXL';
-export const spacingHorizontalXXXL = '--spacingHorizontalXXXL';
-export const spacingVerticalNone = '--spacingVerticalNone';
-export const spacingVerticalXXS = '--spacingVerticalXXS';
-export const spacingVerticalXS = '--spacingVerticalXS';
-export const spacingVerticalSNudge = '--spacingVerticalSNudge';
-export const spacingVerticalS = '--spacingVerticalS';
-export const spacingVerticalMNudge = '--spacingVerticalMNudge';
-export const spacingVerticalM = '--spacingVerticalM';
-export const spacingVerticalL = '--spacingVerticalL';
-export const spacingVerticalXL = '--spacingVerticalXL';
-export const spacingVerticalXXL = '--spacingVerticalXXL';
-export const spacingVerticalXXXL = '--spacingVerticalXXXL';
-export const durationUltraFast = '--durationUltraFast';
-export const durationFaster = '--durationFaster';
-export const durationFast = '--durationFast';
-export const durationNormal = '--durationNormal';
-export const durationSlow = '--durationSlow';
-export const durationSlower = '--durationSlower';
-export const durationUltraSlow = '--durationUltraSlow';
-export const curveAccelerateMax = '--curveAccelerateMax';
-export const curveAccelerateMid = '--curveAccelerateMid';
-export const curveAccelerateMin = '--curveAccelerateMin';
-export const curveDecelerateMax = '--curveDecelerateMax';
-export const curveDecelerateMid = '--curveDecelerateMid';
-export const curveDecelerateMin = '--curveDecelerateMin';
-export const curveEasyEaseMax = '--curveEasyEaseMax';
-export const curveEasyEase = '--curveEasyEase';
-export const curveLinear = '--curveLinear';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token.
+ * @public
+ */
+export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Hover | `colorNeutralForeground1Hover`} design token.
+ * @public
+ */
+export const colorNeutralForeground1Hover = 'var(--colorNeutralForeground1Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Pressed | `colorNeutralForeground1Pressed`} design token.
+ * @public
+ */
+export const colorNeutralForeground1Pressed = 'var(--colorNeutralForeground1Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Selected | `colorNeutralForeground1Selected`} design token.
+ * @public
+ */
+export const colorNeutralForeground1Selected = 'var(--colorNeutralForeground1Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2 | `colorNeutralForeground2`} design token.
+ * @public
+ */
+export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Hover | `colorNeutralForeground2Hover`} design token.
+ * @public
+ */
+export const colorNeutralForeground2Hover = 'var(--colorNeutralForeground2Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Pressed | `colorNeutralForeground2Pressed`} design token.
+ * @public
+ */
+export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Selected | `colorNeutralForeground2Selected`} design token.
+ * @public
+ */
+export const colorNeutralForeground2Selected = 'var(--colorNeutralForeground2Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover`} design token.
+ * @public
+ */
+export const colorNeutralForeground2BrandHover = 'var(--colorNeutralForeground2BrandHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandPressed | `colorNeutralForeground2BrandPressed`} design token.
+ * @public
+ */
+export const colorNeutralForeground2BrandPressed = 'var(--colorNeutralForeground2BrandPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandSelected | `colorNeutralForeground2BrandSelected`} design token.
+ * @public
+ */
+export const colorNeutralForeground2BrandSelected = 'var(--colorNeutralForeground2BrandSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3 | `colorNeutralForeground3`} design token.
+ * @public
+ */
+export const colorNeutralForeground3 = 'var(--colorNeutralForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Hover | `colorNeutralForeground3Hover`} design token.
+ * @public
+ */
+export const colorNeutralForeground3Hover = 'var(--colorNeutralForeground3Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Pressed | `colorNeutralForeground3Pressed`} design token.
+ * @public
+ */
+export const colorNeutralForeground3Pressed = 'var(--colorNeutralForeground3Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Selected | `colorNeutralForeground3Selected`} design token.
+ * @public
+ */
+export const colorNeutralForeground3Selected = 'var(--colorNeutralForeground3Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3BrandHover | `colorNeutralForeground3BrandHover`} design token.
+ * @public
+ */
+export const colorNeutralForeground3BrandHover = 'var(--colorNeutralForeground3BrandHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3BrandPressed | `colorNeutralForeground3BrandPressed`} design token.
+ * @public
+ */
+export const colorNeutralForeground3BrandPressed = 'var(--colorNeutralForeground3BrandPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3BrandSelected | `colorNeutralForeground3BrandSelected`} design token.
+ * @public
+ */
+export const colorNeutralForeground3BrandSelected = 'var(--colorNeutralForeground3BrandSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token.
+ * @public
+ */
+export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token.
+ * @public
+ */
+export const colorNeutralForegroundDisabled = 'var(--colorNeutralForegroundDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLink | `colorBrandForegroundLink`} design token.
+ * @public
+ */
+export const colorBrandForegroundLink = 'var(--colorBrandForegroundLink)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkHover | `colorBrandForegroundLinkHover`} design token.
+ * @public
+ */
+export const colorBrandForegroundLinkHover = 'var(--colorBrandForegroundLinkHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkPressed | `colorBrandForegroundLinkPressed`} design token.
+ * @public
+ */
+export const colorBrandForegroundLinkPressed = 'var(--colorBrandForegroundLinkPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkSelected | `colorBrandForegroundLinkSelected`} design token.
+ * @public
+ */
+export const colorBrandForegroundLinkSelected = 'var(--colorBrandForegroundLinkSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2Link | `colorNeutralForeground2Link`} design token.
+ * @public
+ */
+export const colorNeutralForeground2Link = 'var(--colorNeutralForeground2Link)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2LinkHover | `colorNeutralForeground2LinkHover`} design token.
+ * @public
+ */
+export const colorNeutralForeground2LinkHover = 'var(--colorNeutralForeground2LinkHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2LinkPressed | `colorNeutralForeground2LinkPressed`} design token.
+ * @public
+ */
+export const colorNeutralForeground2LinkPressed = 'var(--colorNeutralForeground2LinkPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2LinkSelected | `colorNeutralForeground2LinkSelected`} design token.
+ * @public
+ */
+export const colorNeutralForeground2LinkSelected = 'var(--colorNeutralForeground2LinkSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandForeground1 | `colorCompoundBrandForeground1`} design token.
+ * @public
+ */
+export const colorCompoundBrandForeground1 = 'var(--colorCompoundBrandForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandForeground1Hover | `colorCompoundBrandForeground1Hover`} design token.
+ * @public
+ */
+export const colorCompoundBrandForeground1Hover = 'var(--colorCompoundBrandForeground1Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandForeground1Pressed | `colorCompoundBrandForeground1Pressed`} design token.
+ * @public
+ */
+export const colorCompoundBrandForeground1Pressed = 'var(--colorCompoundBrandForeground1Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundOnBrand | `colorNeutralForegroundOnBrand`} design token.
+ * @public
+ */
+export const colorNeutralForegroundOnBrand = 'var(--colorNeutralForegroundOnBrand)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInverted | `colorNeutralForegroundInverted`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInverted = 'var(--colorNeutralForegroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedHover | `colorNeutralForegroundInvertedHover`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInvertedHover = 'var(--colorNeutralForegroundInvertedHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedPressed | `colorNeutralForegroundInvertedPressed`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInvertedPressed = 'var(--colorNeutralForegroundInvertedPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedSelected | `colorNeutralForegroundInvertedSelected`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInvertedSelected = 'var(--colorNeutralForegroundInvertedSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInverted2 | `colorNeutralForegroundInverted2`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInverted2 = 'var(--colorNeutralForegroundInverted2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundStaticInverted | `colorNeutralForegroundStaticInverted`} design token.
+ * @public
+ */
+export const colorNeutralForegroundStaticInverted = 'var(--colorNeutralForegroundStaticInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedLink | `colorNeutralForegroundInvertedLink`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInvertedLink = 'var(--colorNeutralForegroundInvertedLink)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedLinkHover | `colorNeutralForegroundInvertedLinkHover`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInvertedLinkHover = 'var(--colorNeutralForegroundInvertedLinkHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedLinkPressed | `colorNeutralForegroundInvertedLinkPressed`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInvertedLinkPressed = 'var(--colorNeutralForegroundInvertedLinkPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedLinkSelected | `colorNeutralForegroundInvertedLinkSelected`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInvertedLinkSelected = 'var(--colorNeutralForegroundInvertedLinkSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInvertedDisabled | `colorNeutralForegroundInvertedDisabled`} design token.
+ * @public
+ */
+export const colorNeutralForegroundInvertedDisabled = 'var(--colorNeutralForegroundInvertedDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground1 | `colorBrandForeground1`} design token.
+ * @public
+ */
+export const colorBrandForeground1 = 'var(--colorBrandForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground2 | `colorBrandForeground2`} design token.
+ * @public
+ */
+export const colorBrandForeground2 = 'var(--colorBrandForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground2Hover | `colorBrandForeground2Hover`} design token.
+ * @public
+ */
+export const colorBrandForeground2Hover = 'var(--colorBrandForeground2Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground2Pressed | `colorBrandForeground2Pressed`} design token.
+ * @public
+ */
+export const colorBrandForeground2Pressed = 'var(--colorBrandForeground2Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Static | `colorNeutralForeground1Static`} design token.
+ * @public
+ */
+export const colorNeutralForeground1Static = 'var(--colorNeutralForeground1Static)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundInverted | `colorBrandForegroundInverted`} design token.
+ * @public
+ */
+export const colorBrandForegroundInverted = 'var(--colorBrandForegroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundInvertedHover | `colorBrandForegroundInvertedHover`} design token.
+ * @public
+ */
+export const colorBrandForegroundInvertedHover = 'var(--colorBrandForegroundInvertedHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundInvertedPressed | `colorBrandForegroundInvertedPressed`} design token.
+ * @public
+ */
+export const colorBrandForegroundInvertedPressed = 'var(--colorBrandForegroundInvertedPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundOnLight | `colorBrandForegroundOnLight`} design token.
+ * @public
+ */
+export const colorBrandForegroundOnLight = 'var(--colorBrandForegroundOnLight)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundOnLightHover | `colorBrandForegroundOnLightHover`} design token.
+ * @public
+ */
+export const colorBrandForegroundOnLightHover = 'var(--colorBrandForegroundOnLightHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundOnLightPressed | `colorBrandForegroundOnLightPressed`} design token.
+ * @public
+ */
+export const colorBrandForegroundOnLightPressed = 'var(--colorBrandForegroundOnLightPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundOnLightSelected | `colorBrandForegroundOnLightSelected`} design token.
+ * @public
+ */
+export const colorBrandForegroundOnLightSelected = 'var(--colorBrandForegroundOnLightSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1 | `colorNeutralBackground1`} design token.
+ * @public
+ */
+export const colorNeutralBackground1 = 'var(--colorNeutralBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1Hover | `colorNeutralBackground1Hover`} design token.
+ * @public
+ */
+export const colorNeutralBackground1Hover = 'var(--colorNeutralBackground1Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1Pressed | `colorNeutralBackground1Pressed`} design token.
+ * @public
+ */
+export const colorNeutralBackground1Pressed = 'var(--colorNeutralBackground1Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground1Selected | `colorNeutralBackground1Selected`} design token.
+ * @public
+ */
+export const colorNeutralBackground1Selected = 'var(--colorNeutralBackground1Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground2 | `colorNeutralBackground2`} design token.
+ * @public
+ */
+export const colorNeutralBackground2 = 'var(--colorNeutralBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground2Hover | `colorNeutralBackground2Hover`} design token.
+ * @public
+ */
+export const colorNeutralBackground2Hover = 'var(--colorNeutralBackground2Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground2Pressed | `colorNeutralBackground2Pressed`} design token.
+ * @public
+ */
+export const colorNeutralBackground2Pressed = 'var(--colorNeutralBackground2Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground2Selected | `colorNeutralBackground2Selected`} design token.
+ * @public
+ */
+export const colorNeutralBackground2Selected = 'var(--colorNeutralBackground2Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground3 | `colorNeutralBackground3`} design token.
+ * @public
+ */
+export const colorNeutralBackground3 = 'var(--colorNeutralBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground3Hover | `colorNeutralBackground3Hover`} design token.
+ * @public
+ */
+export const colorNeutralBackground3Hover = 'var(--colorNeutralBackground3Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground3Pressed | `colorNeutralBackground3Pressed`} design token.
+ * @public
+ */
+export const colorNeutralBackground3Pressed = 'var(--colorNeutralBackground3Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground3Selected | `colorNeutralBackground3Selected`} design token.
+ * @public
+ */
+export const colorNeutralBackground3Selected = 'var(--colorNeutralBackground3Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4 | `colorNeutralBackground4`} design token.
+ * @public
+ */
+export const colorNeutralBackground4 = 'var(--colorNeutralBackground4)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4Hover | `colorNeutralBackground4Hover`} design token.
+ * @public
+ */
+export const colorNeutralBackground4Hover = 'var(--colorNeutralBackground4Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4Pressed | `colorNeutralBackground4Pressed`} design token.
+ * @public
+ */
+export const colorNeutralBackground4Pressed = 'var(--colorNeutralBackground4Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4Selected | `colorNeutralBackground4Selected`} design token.
+ * @public
+ */
+export const colorNeutralBackground4Selected = 'var(--colorNeutralBackground4Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5 | `colorNeutralBackground5`} design token.
+ * @public
+ */
+export const colorNeutralBackground5 = 'var(--colorNeutralBackground5)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5Hover | `colorNeutralBackground5Hover`} design token.
+ * @public
+ */
+export const colorNeutralBackground5Hover = 'var(--colorNeutralBackground5Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5Pressed | `colorNeutralBackground5Pressed`} design token.
+ * @public
+ */
+export const colorNeutralBackground5Pressed = 'var(--colorNeutralBackground5Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5Selected | `colorNeutralBackground5Selected`} design token.
+ * @public
+ */
+export const colorNeutralBackground5Selected = 'var(--colorNeutralBackground5Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground6 | `colorNeutralBackground6`} design token.
+ * @public
+ */
+export const colorNeutralBackground6 = 'var(--colorNeutralBackground6)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInverted | `colorNeutralBackgroundInverted`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundInverted = 'var(--colorNeutralBackgroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundStatic | `colorNeutralBackgroundStatic`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundStatic = 'var(--colorNeutralBackgroundStatic)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundAlpha | `colorNeutralBackgroundAlpha`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundAlpha = 'var(--colorNeutralBackgroundAlpha)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundAlpha2 | `colorNeutralBackgroundAlpha2`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundAlpha2 = 'var(--colorNeutralBackgroundAlpha2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackground | `colorSubtleBackground`} design token.
+ * @public
+ */
+export const colorSubtleBackground = 'var(--colorSubtleBackground)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundHover | `colorSubtleBackgroundHover`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundHover = 'var(--colorSubtleBackgroundHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundPressed | `colorSubtleBackgroundPressed`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundPressed = 'var(--colorSubtleBackgroundPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundSelected | `colorSubtleBackgroundSelected`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundSelected = 'var(--colorSubtleBackgroundSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundLightAlphaHover | `colorSubtleBackgroundLightAlphaHover`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundLightAlphaHover = 'var(--colorSubtleBackgroundLightAlphaHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundLightAlphaPressed | `colorSubtleBackgroundLightAlphaPressed`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundLightAlphaPressed = 'var(--colorSubtleBackgroundLightAlphaPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundLightAlphaSelected | `colorSubtleBackgroundLightAlphaSelected`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundLightAlphaSelected = 'var(--colorSubtleBackgroundLightAlphaSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundInverted | `colorSubtleBackgroundInverted`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundInverted = 'var(--colorSubtleBackgroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundInvertedHover | `colorSubtleBackgroundInvertedHover`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundInvertedHover = 'var(--colorSubtleBackgroundInvertedHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundInvertedPressed | `colorSubtleBackgroundInvertedPressed`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundInvertedPressed = 'var(--colorSubtleBackgroundInvertedPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorSubtleBackgroundInvertedSelected | `colorSubtleBackgroundInvertedSelected`} design token.
+ * @public
+ */
+export const colorSubtleBackgroundInvertedSelected = 'var(--colorSubtleBackgroundInvertedSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackground | `colorTransparentBackground`} design token.
+ * @public
+ */
+export const colorTransparentBackground = 'var(--colorTransparentBackground)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token.
+ * @public
+ */
+export const colorTransparentBackgroundHover = 'var(--colorTransparentBackgroundHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundPressed | `colorTransparentBackgroundPressed`} design token.
+ * @public
+ */
+export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundSelected | `colorTransparentBackgroundSelected`} design token.
+ * @public
+ */
+export const colorTransparentBackgroundSelected = 'var(--colorTransparentBackgroundSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundDisabled | `colorNeutralBackgroundDisabled`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundDisabled = 'var(--colorNeutralBackgroundDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedDisabled | `colorNeutralBackgroundInvertedDisabled`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundInvertedDisabled = 'var(--colorNeutralBackgroundInvertedDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStencil1 | `colorNeutralStencil1`} design token.
+ * @public
+ */
+export const colorNeutralStencil1 = 'var(--colorNeutralStencil1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStencil2 | `colorNeutralStencil2`} design token.
+ * @public
+ */
+export const colorNeutralStencil2 = 'var(--colorNeutralStencil2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStencil1Alpha | `colorNeutralStencil1Alpha`} design token.
+ * @public
+ */
+export const colorNeutralStencil1Alpha = 'var(--colorNeutralStencil1Alpha)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStencil2Alpha | `colorNeutralStencil2Alpha`} design token.
+ * @public
+ */
+export const colorNeutralStencil2Alpha = 'var(--colorNeutralStencil2Alpha)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBackgroundOverlay | `colorBackgroundOverlay`} design token.
+ * @public
+ */
+export const colorBackgroundOverlay = 'var(--colorBackgroundOverlay)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorScrollbarOverlay | `colorScrollbarOverlay`} design token.
+ * @public
+ */
+export const colorScrollbarOverlay = 'var(--colorScrollbarOverlay)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground | `colorBrandBackground`} design token.
+ * @public
+ */
+export const colorBrandBackground = 'var(--colorBrandBackground)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundHover | `colorBrandBackgroundHover`} design token.
+ * @public
+ */
+export const colorBrandBackgroundHover = 'var(--colorBrandBackgroundHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundPressed | `colorBrandBackgroundPressed`} design token.
+ * @public
+ */
+export const colorBrandBackgroundPressed = 'var(--colorBrandBackgroundPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundSelected | `colorBrandBackgroundSelected`} design token.
+ * @public
+ */
+export const colorBrandBackgroundSelected = 'var(--colorBrandBackgroundSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackground | `colorCompoundBrandBackground`} design token.
+ * @public
+ */
+export const colorCompoundBrandBackground = 'var(--colorCompoundBrandBackground)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackgroundHover | `colorCompoundBrandBackgroundHover`} design token.
+ * @public
+ */
+export const colorCompoundBrandBackgroundHover = 'var(--colorCompoundBrandBackgroundHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackgroundPressed | `colorCompoundBrandBackgroundPressed`} design token.
+ * @public
+ */
+export const colorCompoundBrandBackgroundPressed = 'var(--colorCompoundBrandBackgroundPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundStatic | `colorBrandBackgroundStatic`} design token.
+ * @public
+ */
+export const colorBrandBackgroundStatic = 'var(--colorBrandBackgroundStatic)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground2 | `colorBrandBackground2`} design token.
+ * @public
+ */
+export const colorBrandBackground2 = 'var(--colorBrandBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground2Hover | `colorBrandBackground2Hover`} design token.
+ * @public
+ */
+export const colorBrandBackground2Hover = 'var(--colorBrandBackground2Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground2Pressed | `colorBrandBackground2Pressed`} design token.
+ * @public
+ */
+export const colorBrandBackground2Pressed = 'var(--colorBrandBackground2Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground3Static | `colorBrandBackground3Static`} design token.
+ * @public
+ */
+export const colorBrandBackground3Static = 'var(--colorBrandBackground3Static)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground4Static | `colorBrandBackground4Static`} design token.
+ * @public
+ */
+export const colorBrandBackground4Static = 'var(--colorBrandBackground4Static)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundInverted | `colorBrandBackgroundInverted`} design token.
+ * @public
+ */
+export const colorBrandBackgroundInverted = 'var(--colorBrandBackgroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundInvertedHover | `colorBrandBackgroundInvertedHover`} design token.
+ * @public
+ */
+export const colorBrandBackgroundInvertedHover = 'var(--colorBrandBackgroundInvertedHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundInvertedPressed | `colorBrandBackgroundInvertedPressed`} design token.
+ * @public
+ */
+export const colorBrandBackgroundInvertedPressed = 'var(--colorBrandBackgroundInvertedPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackgroundInvertedSelected | `colorBrandBackgroundInvertedSelected`} design token.
+ * @public
+ */
+export const colorBrandBackgroundInvertedSelected = 'var(--colorBrandBackgroundInvertedSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackground | `colorNeutralCardBackground`} design token.
+ * @public
+ */
+export const colorNeutralCardBackground = 'var(--colorNeutralCardBackground)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackgroundHover | `colorNeutralCardBackgroundHover`} design token.
+ * @public
+ */
+export const colorNeutralCardBackgroundHover = 'var(--colorNeutralCardBackgroundHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackgroundPressed | `colorNeutralCardBackgroundPressed`} design token.
+ * @public
+ */
+export const colorNeutralCardBackgroundPressed = 'var(--colorNeutralCardBackgroundPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackgroundSelected | `colorNeutralCardBackgroundSelected`} design token.
+ * @public
+ */
+export const colorNeutralCardBackgroundSelected = 'var(--colorNeutralCardBackgroundSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralCardBackgroundDisabled | `colorNeutralCardBackgroundDisabled`} design token.
+ * @public
+ */
+export const colorNeutralCardBackgroundDisabled = 'var(--colorNeutralCardBackgroundDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessible | `colorNeutralStrokeAccessible`} design token.
+ * @public
+ */
+export const colorNeutralStrokeAccessible = 'var(--colorNeutralStrokeAccessible)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessibleHover | `colorNeutralStrokeAccessibleHover`} design token.
+ * @public
+ */
+export const colorNeutralStrokeAccessibleHover = 'var(--colorNeutralStrokeAccessibleHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessiblePressed | `colorNeutralStrokeAccessiblePressed`} design token.
+ * @public
+ */
+export const colorNeutralStrokeAccessiblePressed = 'var(--colorNeutralStrokeAccessiblePressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessibleSelected | `colorNeutralStrokeAccessibleSelected`} design token.
+ * @public
+ */
+export const colorNeutralStrokeAccessibleSelected = 'var(--colorNeutralStrokeAccessibleSelected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1 | `colorNeutralStroke1`} design token.
+ * @public
+ */
+export const colorNeutralStroke1 = 'var(--colorNeutralStroke1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Hover | `colorNeutralStroke1Hover`} design token.
+ * @public
+ */
+export const colorNeutralStroke1Hover = 'var(--colorNeutralStroke1Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Pressed | `colorNeutralStroke1Pressed`} design token.
+ * @public
+ */
+export const colorNeutralStroke1Pressed = 'var(--colorNeutralStroke1Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Selected | `colorNeutralStroke1Selected`} design token.
+ * @public
+ */
+export const colorNeutralStroke1Selected = 'var(--colorNeutralStroke1Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke2 | `colorNeutralStroke2`} design token.
+ * @public
+ */
+export const colorNeutralStroke2 = 'var(--colorNeutralStroke2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke3 | `colorNeutralStroke3`} design token.
+ * @public
+ */
+export const colorNeutralStroke3 = 'var(--colorNeutralStroke3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeSubtle | `colorNeutralStrokeSubtle`} design token.
+ * @public
+ */
+export const colorNeutralStrokeSubtle = 'var(--colorNeutralStrokeSubtle)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand | `colorNeutralStrokeOnBrand`} design token.
+ * @public
+ */
+export const colorNeutralStrokeOnBrand = 'var(--colorNeutralStrokeOnBrand)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand2 | `colorNeutralStrokeOnBrand2`} design token.
+ * @public
+ */
+export const colorNeutralStrokeOnBrand2 = 'var(--colorNeutralStrokeOnBrand2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand2Hover | `colorNeutralStrokeOnBrand2Hover`} design token.
+ * @public
+ */
+export const colorNeutralStrokeOnBrand2Hover = 'var(--colorNeutralStrokeOnBrand2Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand2Pressed | `colorNeutralStrokeOnBrand2Pressed`} design token.
+ * @public
+ */
+export const colorNeutralStrokeOnBrand2Pressed = 'var(--colorNeutralStrokeOnBrand2Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeOnBrand2Selected | `colorNeutralStrokeOnBrand2Selected`} design token.
+ * @public
+ */
+export const colorNeutralStrokeOnBrand2Selected = 'var(--colorNeutralStrokeOnBrand2Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke1 | `colorBrandStroke1`} design token.
+ * @public
+ */
+export const colorBrandStroke1 = 'var(--colorBrandStroke1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2 | `colorBrandStroke2`} design token.
+ * @public
+ */
+export const colorBrandStroke2 = 'var(--colorBrandStroke2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Hover | `colorBrandStroke2Hover`} design token.
+ * @public
+ */
+export const colorBrandStroke2Hover = 'var(--colorBrandStroke2Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Pressed | `colorBrandStroke2Pressed`} design token.
+ * @public
+ */
+export const colorBrandStroke2Pressed = 'var(--colorBrandStroke2Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token.
+ * @public
+ */
+export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStroke | `colorCompoundBrandStroke`} design token.
+ * @public
+ */
+export const colorCompoundBrandStroke = 'var(--colorCompoundBrandStroke)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokeHover | `colorCompoundBrandStrokeHover`} design token.
+ * @public
+ */
+export const colorCompoundBrandStrokeHover = 'var(--colorCompoundBrandStrokeHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokePressed | `colorCompoundBrandStrokePressed`} design token.
+ * @public
+ */
+export const colorCompoundBrandStrokePressed = 'var(--colorCompoundBrandStrokePressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled | `colorNeutralStrokeDisabled`} design token.
+ * @public
+ */
+export const colorNeutralStrokeDisabled = 'var(--colorNeutralStrokeDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeInvertedDisabled | `colorNeutralStrokeInvertedDisabled`} design token.
+ * @public
+ */
+export const colorNeutralStrokeInvertedDisabled = 'var(--colorNeutralStrokeInvertedDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStroke | `colorTransparentStroke`} design token.
+ * @public
+ */
+export const colorTransparentStroke = 'var(--colorTransparentStroke)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStrokeInteractive | `colorTransparentStrokeInteractive`} design token.
+ * @public
+ */
+export const colorTransparentStrokeInteractive = 'var(--colorTransparentStrokeInteractive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentStrokeDisabled | `colorTransparentStrokeDisabled`} design token.
+ * @public
+ */
+export const colorTransparentStrokeDisabled = 'var(--colorTransparentStrokeDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAlpha | `colorNeutralStrokeAlpha`} design token.
+ * @public
+ */
+export const colorNeutralStrokeAlpha = 'var(--colorNeutralStrokeAlpha)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAlpha2 | `colorNeutralStrokeAlpha2`} design token.
+ * @public
+ */
+export const colorNeutralStrokeAlpha2 = 'var(--colorNeutralStrokeAlpha2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStrokeFocus1 | `colorStrokeFocus1`} design token.
+ * @public
+ */
+export const colorStrokeFocus1 = 'var(--colorStrokeFocus1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStrokeFocus2 | `colorStrokeFocus2`} design token.
+ * @public
+ */
+export const colorStrokeFocus2 = 'var(--colorStrokeFocus2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowAmbient | `colorNeutralShadowAmbient`} design token.
+ * @public
+ */
+export const colorNeutralShadowAmbient = 'var(--colorNeutralShadowAmbient)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowKey | `colorNeutralShadowKey`} design token.
+ * @public
+ */
+export const colorNeutralShadowKey = 'var(--colorNeutralShadowKey)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowAmbientLighter | `colorNeutralShadowAmbientLighter`} design token.
+ * @public
+ */
+export const colorNeutralShadowAmbientLighter = 'var(--colorNeutralShadowAmbientLighter)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowKeyLighter | `colorNeutralShadowKeyLighter`} design token.
+ * @public
+ */
+export const colorNeutralShadowKeyLighter = 'var(--colorNeutralShadowKeyLighter)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowAmbientDarker | `colorNeutralShadowAmbientDarker`} design token.
+ * @public
+ */
+export const colorNeutralShadowAmbientDarker = 'var(--colorNeutralShadowAmbientDarker)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralShadowKeyDarker | `colorNeutralShadowKeyDarker`} design token.
+ * @public
+ */
+export const colorNeutralShadowKeyDarker = 'var(--colorNeutralShadowKeyDarker)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandShadowAmbient | `colorBrandShadowAmbient`} design token.
+ * @public
+ */
+export const colorBrandShadowAmbient = 'var(--colorBrandShadowAmbient)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandShadowKey | `colorBrandShadowKey`} design token.
+ * @public
+ */
+export const colorBrandShadowKey = 'var(--colorBrandShadowKey)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground1 | `colorPaletteRedBackground1`} design token.
+ * @public
+ */
+export const colorPaletteRedBackground1 = 'var(--colorPaletteRedBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground2 | `colorPaletteRedBackground2`} design token.
+ * @public
+ */
+export const colorPaletteRedBackground2 = 'var(--colorPaletteRedBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground3 | `colorPaletteRedBackground3`} design token.
+ * @public
+ */
+export const colorPaletteRedBackground3 = 'var(--colorPaletteRedBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorderActive | `colorPaletteRedBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteRedBorderActive = 'var(--colorPaletteRedBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorder1 | `colorPaletteRedBorder1`} design token.
+ * @public
+ */
+export const colorPaletteRedBorder1 = 'var(--colorPaletteRedBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorder2 | `colorPaletteRedBorder2`} design token.
+ * @public
+ */
+export const colorPaletteRedBorder2 = 'var(--colorPaletteRedBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground1 | `colorPaletteRedForeground1`} design token.
+ * @public
+ */
+export const colorPaletteRedForeground1 = 'var(--colorPaletteRedForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground2 | `colorPaletteRedForeground2`} design token.
+ * @public
+ */
+export const colorPaletteRedForeground2 = 'var(--colorPaletteRedForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground3 | `colorPaletteRedForeground3`} design token.
+ * @public
+ */
+export const colorPaletteRedForeground3 = 'var(--colorPaletteRedForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForegroundInverted | `colorPaletteRedForegroundInverted`} design token.
+ * @public
+ */
+export const colorPaletteRedForegroundInverted = 'var(--colorPaletteRedForegroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground1 | `colorPaletteGreenBackground1`} design token.
+ * @public
+ */
+export const colorPaletteGreenBackground1 = 'var(--colorPaletteGreenBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground2 | `colorPaletteGreenBackground2`} design token.
+ * @public
+ */
+export const colorPaletteGreenBackground2 = 'var(--colorPaletteGreenBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground3 | `colorPaletteGreenBackground3`} design token.
+ * @public
+ */
+export const colorPaletteGreenBackground3 = 'var(--colorPaletteGreenBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorderActive | `colorPaletteGreenBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteGreenBorderActive = 'var(--colorPaletteGreenBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder1 | `colorPaletteGreenBorder1`} design token.
+ * @public
+ */
+export const colorPaletteGreenBorder1 = 'var(--colorPaletteGreenBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder2 | `colorPaletteGreenBorder2`} design token.
+ * @public
+ */
+export const colorPaletteGreenBorder2 = 'var(--colorPaletteGreenBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground1 | `colorPaletteGreenForeground1`} design token.
+ * @public
+ */
+export const colorPaletteGreenForeground1 = 'var(--colorPaletteGreenForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground2 | `colorPaletteGreenForeground2`} design token.
+ * @public
+ */
+export const colorPaletteGreenForeground2 = 'var(--colorPaletteGreenForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground3 | `colorPaletteGreenForeground3`} design token.
+ * @public
+ */
+export const colorPaletteGreenForeground3 = 'var(--colorPaletteGreenForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForegroundInverted | `colorPaletteGreenForegroundInverted`} design token.
+ * @public
+ */
+export const colorPaletteGreenForegroundInverted = 'var(--colorPaletteGreenForegroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBackground1 | `colorPaletteDarkOrangeBackground1`} design token.
+ * @public
+ */
+export const colorPaletteDarkOrangeBackground1 = 'var(--colorPaletteDarkOrangeBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBackground2 | `colorPaletteDarkOrangeBackground2`} design token.
+ * @public
+ */
+export const colorPaletteDarkOrangeBackground2 = 'var(--colorPaletteDarkOrangeBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBackground3 | `colorPaletteDarkOrangeBackground3`} design token.
+ * @public
+ */
+export const colorPaletteDarkOrangeBackground3 = 'var(--colorPaletteDarkOrangeBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBorderActive | `colorPaletteDarkOrangeBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteDarkOrangeBorderActive = 'var(--colorPaletteDarkOrangeBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBorder1 | `colorPaletteDarkOrangeBorder1`} design token.
+ * @public
+ */
+export const colorPaletteDarkOrangeBorder1 = 'var(--colorPaletteDarkOrangeBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeBorder2 | `colorPaletteDarkOrangeBorder2`} design token.
+ * @public
+ */
+export const colorPaletteDarkOrangeBorder2 = 'var(--colorPaletteDarkOrangeBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground1 | `colorPaletteDarkOrangeForeground1`} design token.
+ * @public
+ */
+export const colorPaletteDarkOrangeForeground1 = 'var(--colorPaletteDarkOrangeForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground2 | `colorPaletteDarkOrangeForeground2`} design token.
+ * @public
+ */
+export const colorPaletteDarkOrangeForeground2 = 'var(--colorPaletteDarkOrangeForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground3 | `colorPaletteDarkOrangeForeground3`} design token.
+ * @public
+ */
+export const colorPaletteDarkOrangeForeground3 = 'var(--colorPaletteDarkOrangeForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground1 | `colorPaletteYellowBackground1`} design token.
+ * @public
+ */
+export const colorPaletteYellowBackground1 = 'var(--colorPaletteYellowBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground2 | `colorPaletteYellowBackground2`} design token.
+ * @public
+ */
+export const colorPaletteYellowBackground2 = 'var(--colorPaletteYellowBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground3 | `colorPaletteYellowBackground3`} design token.
+ * @public
+ */
+export const colorPaletteYellowBackground3 = 'var(--colorPaletteYellowBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorderActive | `colorPaletteYellowBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteYellowBorderActive = 'var(--colorPaletteYellowBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorder1 | `colorPaletteYellowBorder1`} design token.
+ * @public
+ */
+export const colorPaletteYellowBorder1 = 'var(--colorPaletteYellowBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorder2 | `colorPaletteYellowBorder2`} design token.
+ * @public
+ */
+export const colorPaletteYellowBorder2 = 'var(--colorPaletteYellowBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground1 | `colorPaletteYellowForeground1`} design token.
+ * @public
+ */
+export const colorPaletteYellowForeground1 = 'var(--colorPaletteYellowForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground2 | `colorPaletteYellowForeground2`} design token.
+ * @public
+ */
+export const colorPaletteYellowForeground2 = 'var(--colorPaletteYellowForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground3 | `colorPaletteYellowForeground3`} design token.
+ * @public
+ */
+export const colorPaletteYellowForeground3 = 'var(--colorPaletteYellowForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForegroundInverted | `colorPaletteYellowForegroundInverted`} design token.
+ * @public
+ */
+export const colorPaletteYellowForegroundInverted = 'var(--colorPaletteYellowForegroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBackground1 | `colorPaletteBerryBackground1`} design token.
+ * @public
+ */
+export const colorPaletteBerryBackground1 = 'var(--colorPaletteBerryBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBackground2 | `colorPaletteBerryBackground2`} design token.
+ * @public
+ */
+export const colorPaletteBerryBackground2 = 'var(--colorPaletteBerryBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBackground3 | `colorPaletteBerryBackground3`} design token.
+ * @public
+ */
+export const colorPaletteBerryBackground3 = 'var(--colorPaletteBerryBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBorderActive | `colorPaletteBerryBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteBerryBorderActive = 'var(--colorPaletteBerryBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBorder1 | `colorPaletteBerryBorder1`} design token.
+ * @public
+ */
+export const colorPaletteBerryBorder1 = 'var(--colorPaletteBerryBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryBorder2 | `colorPaletteBerryBorder2`} design token.
+ * @public
+ */
+export const colorPaletteBerryBorder2 = 'var(--colorPaletteBerryBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryForeground1 | `colorPaletteBerryForeground1`} design token.
+ * @public
+ */
+export const colorPaletteBerryForeground1 = 'var(--colorPaletteBerryForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryForeground2 | `colorPaletteBerryForeground2`} design token.
+ * @public
+ */
+export const colorPaletteBerryForeground2 = 'var(--colorPaletteBerryForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryForeground3 | `colorPaletteBerryForeground3`} design token.
+ * @public
+ */
+export const colorPaletteBerryForeground3 = 'var(--colorPaletteBerryForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground1 | `colorPaletteMarigoldBackground1`} design token.
+ * @public
+ */
+export const colorPaletteMarigoldBackground1 = 'var(--colorPaletteMarigoldBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground2 | `colorPaletteMarigoldBackground2`} design token.
+ * @public
+ */
+export const colorPaletteMarigoldBackground2 = 'var(--colorPaletteMarigoldBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground3 | `colorPaletteMarigoldBackground3`} design token.
+ * @public
+ */
+export const colorPaletteMarigoldBackground3 = 'var(--colorPaletteMarigoldBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBorderActive | `colorPaletteMarigoldBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteMarigoldBorderActive = 'var(--colorPaletteMarigoldBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBorder1 | `colorPaletteMarigoldBorder1`} design token.
+ * @public
+ */
+export const colorPaletteMarigoldBorder1 = 'var(--colorPaletteMarigoldBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBorder2 | `colorPaletteMarigoldBorder2`} design token.
+ * @public
+ */
+export const colorPaletteMarigoldBorder2 = 'var(--colorPaletteMarigoldBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldForeground1 | `colorPaletteMarigoldForeground1`} design token.
+ * @public
+ */
+export const colorPaletteMarigoldForeground1 = 'var(--colorPaletteMarigoldForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldForeground2 | `colorPaletteMarigoldForeground2`} design token.
+ * @public
+ */
+export const colorPaletteMarigoldForeground2 = 'var(--colorPaletteMarigoldForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldForeground3 | `colorPaletteMarigoldForeground3`} design token.
+ * @public
+ */
+export const colorPaletteMarigoldForeground3 = 'var(--colorPaletteMarigoldForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBackground1 | `colorPaletteLightGreenBackground1`} design token.
+ * @public
+ */
+export const colorPaletteLightGreenBackground1 = 'var(--colorPaletteLightGreenBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBackground2 | `colorPaletteLightGreenBackground2`} design token.
+ * @public
+ */
+export const colorPaletteLightGreenBackground2 = 'var(--colorPaletteLightGreenBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBackground3 | `colorPaletteLightGreenBackground3`} design token.
+ * @public
+ */
+export const colorPaletteLightGreenBackground3 = 'var(--colorPaletteLightGreenBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBorderActive | `colorPaletteLightGreenBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteLightGreenBorderActive = 'var(--colorPaletteLightGreenBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBorder1 | `colorPaletteLightGreenBorder1`} design token.
+ * @public
+ */
+export const colorPaletteLightGreenBorder1 = 'var(--colorPaletteLightGreenBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenBorder2 | `colorPaletteLightGreenBorder2`} design token.
+ * @public
+ */
+export const colorPaletteLightGreenBorder2 = 'var(--colorPaletteLightGreenBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground1 | `colorPaletteLightGreenForeground1`} design token.
+ * @public
+ */
+export const colorPaletteLightGreenForeground1 = 'var(--colorPaletteLightGreenForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground2 | `colorPaletteLightGreenForeground2`} design token.
+ * @public
+ */
+export const colorPaletteLightGreenForeground2 = 'var(--colorPaletteLightGreenForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground3 | `colorPaletteLightGreenForeground3`} design token.
+ * @public
+ */
+export const colorPaletteLightGreenForeground3 = 'var(--colorPaletteLightGreenForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteAnchorBackground2 | `colorPaletteAnchorBackground2`} design token.
+ * @public
+ */
+export const colorPaletteAnchorBackground2 = 'var(--colorPaletteAnchorBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteAnchorBorderActive | `colorPaletteAnchorBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteAnchorBorderActive = 'var(--colorPaletteAnchorBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteAnchorForeground2 | `colorPaletteAnchorForeground2`} design token.
+ * @public
+ */
+export const colorPaletteAnchorForeground2 = 'var(--colorPaletteAnchorForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBeigeBackground2 | `colorPaletteBeigeBackground2`} design token.
+ * @public
+ */
+export const colorPaletteBeigeBackground2 = 'var(--colorPaletteBeigeBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBeigeBorderActive | `colorPaletteBeigeBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteBeigeBorderActive = 'var(--colorPaletteBeigeBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBeigeForeground2 | `colorPaletteBeigeForeground2`} design token.
+ * @public
+ */
+export const colorPaletteBeigeForeground2 = 'var(--colorPaletteBeigeForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBlueBackground2 | `colorPaletteBlueBackground2`} design token.
+ * @public
+ */
+export const colorPaletteBlueBackground2 = 'var(--colorPaletteBlueBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBlueBorderActive | `colorPaletteBlueBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteBlueBorderActive = 'var(--colorPaletteBlueBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBlueForeground2 | `colorPaletteBlueForeground2`} design token.
+ * @public
+ */
+export const colorPaletteBlueForeground2 = 'var(--colorPaletteBlueForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrassBackground2 | `colorPaletteBrassBackground2`} design token.
+ * @public
+ */
+export const colorPaletteBrassBackground2 = 'var(--colorPaletteBrassBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrassBorderActive | `colorPaletteBrassBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteBrassBorderActive = 'var(--colorPaletteBrassBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrassForeground2 | `colorPaletteBrassForeground2`} design token.
+ * @public
+ */
+export const colorPaletteBrassForeground2 = 'var(--colorPaletteBrassForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrownBackground2 | `colorPaletteBrownBackground2`} design token.
+ * @public
+ */
+export const colorPaletteBrownBackground2 = 'var(--colorPaletteBrownBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrownBorderActive | `colorPaletteBrownBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteBrownBorderActive = 'var(--colorPaletteBrownBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBrownForeground2 | `colorPaletteBrownForeground2`} design token.
+ * @public
+ */
+export const colorPaletteBrownForeground2 = 'var(--colorPaletteBrownForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCornflowerBackground2 | `colorPaletteCornflowerBackground2`} design token.
+ * @public
+ */
+export const colorPaletteCornflowerBackground2 = 'var(--colorPaletteCornflowerBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCornflowerBorderActive | `colorPaletteCornflowerBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteCornflowerBorderActive = 'var(--colorPaletteCornflowerBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCornflowerForeground2 | `colorPaletteCornflowerForeground2`} design token.
+ * @public
+ */
+export const colorPaletteCornflowerForeground2 = 'var(--colorPaletteCornflowerForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCranberryBackground2 | `colorPaletteCranberryBackground2`} design token.
+ * @public
+ */
+export const colorPaletteCranberryBackground2 = 'var(--colorPaletteCranberryBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCranberryBorderActive | `colorPaletteCranberryBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteCranberryBorderActive = 'var(--colorPaletteCranberryBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteCranberryForeground2 | `colorPaletteCranberryForeground2`} design token.
+ * @public
+ */
+export const colorPaletteCranberryForeground2 = 'var(--colorPaletteCranberryForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkGreenBackground2 | `colorPaletteDarkGreenBackground2`} design token.
+ * @public
+ */
+export const colorPaletteDarkGreenBackground2 = 'var(--colorPaletteDarkGreenBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkGreenBorderActive | `colorPaletteDarkGreenBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteDarkGreenBorderActive = 'var(--colorPaletteDarkGreenBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkGreenForeground2 | `colorPaletteDarkGreenForeground2`} design token.
+ * @public
+ */
+export const colorPaletteDarkGreenForeground2 = 'var(--colorPaletteDarkGreenForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkRedBackground2 | `colorPaletteDarkRedBackground2`} design token.
+ * @public
+ */
+export const colorPaletteDarkRedBackground2 = 'var(--colorPaletteDarkRedBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkRedBorderActive | `colorPaletteDarkRedBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteDarkRedBorderActive = 'var(--colorPaletteDarkRedBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkRedForeground2 | `colorPaletteDarkRedForeground2`} design token.
+ * @public
+ */
+export const colorPaletteDarkRedForeground2 = 'var(--colorPaletteDarkRedForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteForestBackground2 | `colorPaletteForestBackground2`} design token.
+ * @public
+ */
+export const colorPaletteForestBackground2 = 'var(--colorPaletteForestBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteForestBorderActive | `colorPaletteForestBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteForestBorderActive = 'var(--colorPaletteForestBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteForestForeground2 | `colorPaletteForestForeground2`} design token.
+ * @public
+ */
+export const colorPaletteForestForeground2 = 'var(--colorPaletteForestForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGoldBackground2 | `colorPaletteGoldBackground2`} design token.
+ * @public
+ */
+export const colorPaletteGoldBackground2 = 'var(--colorPaletteGoldBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGoldBorderActive | `colorPaletteGoldBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteGoldBorderActive = 'var(--colorPaletteGoldBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGoldForeground2 | `colorPaletteGoldForeground2`} design token.
+ * @public
+ */
+export const colorPaletteGoldForeground2 = 'var(--colorPaletteGoldForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGrapeBackground2 | `colorPaletteGrapeBackground2`} design token.
+ * @public
+ */
+export const colorPaletteGrapeBackground2 = 'var(--colorPaletteGrapeBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGrapeBorderActive | `colorPaletteGrapeBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteGrapeBorderActive = 'var(--colorPaletteGrapeBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGrapeForeground2 | `colorPaletteGrapeForeground2`} design token.
+ * @public
+ */
+export const colorPaletteGrapeForeground2 = 'var(--colorPaletteGrapeForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLavenderBackground2 | `colorPaletteLavenderBackground2`} design token.
+ * @public
+ */
+export const colorPaletteLavenderBackground2 = 'var(--colorPaletteLavenderBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLavenderBorderActive | `colorPaletteLavenderBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteLavenderBorderActive = 'var(--colorPaletteLavenderBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLavenderForeground2 | `colorPaletteLavenderForeground2`} design token.
+ * @public
+ */
+export const colorPaletteLavenderForeground2 = 'var(--colorPaletteLavenderForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightTealBackground2 | `colorPaletteLightTealBackground2`} design token.
+ * @public
+ */
+export const colorPaletteLightTealBackground2 = 'var(--colorPaletteLightTealBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightTealBorderActive | `colorPaletteLightTealBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteLightTealBorderActive = 'var(--colorPaletteLightTealBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightTealForeground2 | `colorPaletteLightTealForeground2`} design token.
+ * @public
+ */
+export const colorPaletteLightTealForeground2 = 'var(--colorPaletteLightTealForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLilacBackground2 | `colorPaletteLilacBackground2`} design token.
+ * @public
+ */
+export const colorPaletteLilacBackground2 = 'var(--colorPaletteLilacBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLilacBorderActive | `colorPaletteLilacBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteLilacBorderActive = 'var(--colorPaletteLilacBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLilacForeground2 | `colorPaletteLilacForeground2`} design token.
+ * @public
+ */
+export const colorPaletteLilacForeground2 = 'var(--colorPaletteLilacForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMagentaBackground2 | `colorPaletteMagentaBackground2`} design token.
+ * @public
+ */
+export const colorPaletteMagentaBackground2 = 'var(--colorPaletteMagentaBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMagentaBorderActive | `colorPaletteMagentaBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteMagentaBorderActive = 'var(--colorPaletteMagentaBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMagentaForeground2 | `colorPaletteMagentaForeground2`} design token.
+ * @public
+ */
+export const colorPaletteMagentaForeground2 = 'var(--colorPaletteMagentaForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMinkBackground2 | `colorPaletteMinkBackground2`} design token.
+ * @public
+ */
+export const colorPaletteMinkBackground2 = 'var(--colorPaletteMinkBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMinkBorderActive | `colorPaletteMinkBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteMinkBorderActive = 'var(--colorPaletteMinkBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMinkForeground2 | `colorPaletteMinkForeground2`} design token.
+ * @public
+ */
+export const colorPaletteMinkForeground2 = 'var(--colorPaletteMinkForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteNavyBackground2 | `colorPaletteNavyBackground2`} design token.
+ * @public
+ */
+export const colorPaletteNavyBackground2 = 'var(--colorPaletteNavyBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteNavyBorderActive | `colorPaletteNavyBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteNavyBorderActive = 'var(--colorPaletteNavyBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteNavyForeground2 | `colorPaletteNavyForeground2`} design token.
+ * @public
+ */
+export const colorPaletteNavyForeground2 = 'var(--colorPaletteNavyForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePeachBackground2 | `colorPalettePeachBackground2`} design token.
+ * @public
+ */
+export const colorPalettePeachBackground2 = 'var(--colorPalettePeachBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePeachBorderActive | `colorPalettePeachBorderActive`} design token.
+ * @public
+ */
+export const colorPalettePeachBorderActive = 'var(--colorPalettePeachBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePeachForeground2 | `colorPalettePeachForeground2`} design token.
+ * @public
+ */
+export const colorPalettePeachForeground2 = 'var(--colorPalettePeachForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePinkBackground2 | `colorPalettePinkBackground2`} design token.
+ * @public
+ */
+export const colorPalettePinkBackground2 = 'var(--colorPalettePinkBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePinkBorderActive | `colorPalettePinkBorderActive`} design token.
+ * @public
+ */
+export const colorPalettePinkBorderActive = 'var(--colorPalettePinkBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePinkForeground2 | `colorPalettePinkForeground2`} design token.
+ * @public
+ */
+export const colorPalettePinkForeground2 = 'var(--colorPalettePinkForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlatinumBackground2 | `colorPalettePlatinumBackground2`} design token.
+ * @public
+ */
+export const colorPalettePlatinumBackground2 = 'var(--colorPalettePlatinumBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlatinumBorderActive | `colorPalettePlatinumBorderActive`} design token.
+ * @public
+ */
+export const colorPalettePlatinumBorderActive = 'var(--colorPalettePlatinumBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlatinumForeground2 | `colorPalettePlatinumForeground2`} design token.
+ * @public
+ */
+export const colorPalettePlatinumForeground2 = 'var(--colorPalettePlatinumForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlumBackground2 | `colorPalettePlumBackground2`} design token.
+ * @public
+ */
+export const colorPalettePlumBackground2 = 'var(--colorPalettePlumBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlumBorderActive | `colorPalettePlumBorderActive`} design token.
+ * @public
+ */
+export const colorPalettePlumBorderActive = 'var(--colorPalettePlumBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePlumForeground2 | `colorPalettePlumForeground2`} design token.
+ * @public
+ */
+export const colorPalettePlumForeground2 = 'var(--colorPalettePlumForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePumpkinBackground2 | `colorPalettePumpkinBackground2`} design token.
+ * @public
+ */
+export const colorPalettePumpkinBackground2 = 'var(--colorPalettePumpkinBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePumpkinBorderActive | `colorPalettePumpkinBorderActive`} design token.
+ * @public
+ */
+export const colorPalettePumpkinBorderActive = 'var(--colorPalettePumpkinBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePumpkinForeground2 | `colorPalettePumpkinForeground2`} design token.
+ * @public
+ */
+export const colorPalettePumpkinForeground2 = 'var(--colorPalettePumpkinForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePurpleBackground2 | `colorPalettePurpleBackground2`} design token.
+ * @public
+ */
+export const colorPalettePurpleBackground2 = 'var(--colorPalettePurpleBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePurpleBorderActive | `colorPalettePurpleBorderActive`} design token.
+ * @public
+ */
+export const colorPalettePurpleBorderActive = 'var(--colorPalettePurpleBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPalettePurpleForeground2 | `colorPalettePurpleForeground2`} design token.
+ * @public
+ */
+export const colorPalettePurpleForeground2 = 'var(--colorPalettePurpleForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRoyalBlueBackground2 | `colorPaletteRoyalBlueBackground2`} design token.
+ * @public
+ */
+export const colorPaletteRoyalBlueBackground2 = 'var(--colorPaletteRoyalBlueBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRoyalBlueBorderActive | `colorPaletteRoyalBlueBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteRoyalBlueBorderActive = 'var(--colorPaletteRoyalBlueBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRoyalBlueForeground2 | `colorPaletteRoyalBlueForeground2`} design token.
+ * @public
+ */
+export const colorPaletteRoyalBlueForeground2 = 'var(--colorPaletteRoyalBlueForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSeafoamBackground2 | `colorPaletteSeafoamBackground2`} design token.
+ * @public
+ */
+export const colorPaletteSeafoamBackground2 = 'var(--colorPaletteSeafoamBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSeafoamBorderActive | `colorPaletteSeafoamBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteSeafoamBorderActive = 'var(--colorPaletteSeafoamBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSeafoamForeground2 | `colorPaletteSeafoamForeground2`} design token.
+ * @public
+ */
+export const colorPaletteSeafoamForeground2 = 'var(--colorPaletteSeafoamForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSteelBackground2 | `colorPaletteSteelBackground2`} design token.
+ * @public
+ */
+export const colorPaletteSteelBackground2 = 'var(--colorPaletteSteelBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSteelBorderActive | `colorPaletteSteelBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteSteelBorderActive = 'var(--colorPaletteSteelBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteSteelForeground2 | `colorPaletteSteelForeground2`} design token.
+ * @public
+ */
+export const colorPaletteSteelForeground2 = 'var(--colorPaletteSteelForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteTealBackground2 | `colorPaletteTealBackground2`} design token.
+ * @public
+ */
+export const colorPaletteTealBackground2 = 'var(--colorPaletteTealBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteTealBorderActive | `colorPaletteTealBorderActive`} design token.
+ * @public
+ */
+export const colorPaletteTealBorderActive = 'var(--colorPaletteTealBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorPaletteTealForeground2 | `colorPaletteTealForeground2`} design token.
+ * @public
+ */
+export const colorPaletteTealForeground2 = 'var(--colorPaletteTealForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBackground1 | `colorStatusSuccessBackground1`} design token.
+ * @public
+ */
+export const colorStatusSuccessBackground1 = 'var(--colorStatusSuccessBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBackground2 | `colorStatusSuccessBackground2`} design token.
+ * @public
+ */
+export const colorStatusSuccessBackground2 = 'var(--colorStatusSuccessBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBackground3 | `colorStatusSuccessBackground3`} design token.
+ * @public
+ */
+export const colorStatusSuccessBackground3 = 'var(--colorStatusSuccessBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForeground1 | `colorStatusSuccessForeground1`} design token.
+ * @public
+ */
+export const colorStatusSuccessForeground1 = 'var(--colorStatusSuccessForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForeground2 | `colorStatusSuccessForeground2`} design token.
+ * @public
+ */
+export const colorStatusSuccessForeground2 = 'var(--colorStatusSuccessForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForeground3 | `colorStatusSuccessForeground3`} design token.
+ * @public
+ */
+export const colorStatusSuccessForeground3 = 'var(--colorStatusSuccessForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForegroundInverted | `colorStatusSuccessForegroundInverted`} design token.
+ * @public
+ */
+export const colorStatusSuccessForegroundInverted = 'var(--colorStatusSuccessForegroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBorderActive | `colorStatusSuccessBorderActive`} design token.
+ * @public
+ */
+export const colorStatusSuccessBorderActive = 'var(--colorStatusSuccessBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBorder1 | `colorStatusSuccessBorder1`} design token.
+ * @public
+ */
+export const colorStatusSuccessBorder1 = 'var(--colorStatusSuccessBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBorder2 | `colorStatusSuccessBorder2`} design token.
+ * @public
+ */
+export const colorStatusSuccessBorder2 = 'var(--colorStatusSuccessBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBackground1 | `colorStatusWarningBackground1`} design token.
+ * @public
+ */
+export const colorStatusWarningBackground1 = 'var(--colorStatusWarningBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBackground2 | `colorStatusWarningBackground2`} design token.
+ * @public
+ */
+export const colorStatusWarningBackground2 = 'var(--colorStatusWarningBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBackground3 | `colorStatusWarningBackground3`} design token.
+ * @public
+ */
+export const colorStatusWarningBackground3 = 'var(--colorStatusWarningBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForeground1 | `colorStatusWarningForeground1`} design token.
+ * @public
+ */
+export const colorStatusWarningForeground1 = 'var(--colorStatusWarningForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForeground2 | `colorStatusWarningForeground2`} design token.
+ * @public
+ */
+export const colorStatusWarningForeground2 = 'var(--colorStatusWarningForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForeground3 | `colorStatusWarningForeground3`} design token.
+ * @public
+ */
+export const colorStatusWarningForeground3 = 'var(--colorStatusWarningForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForegroundInverted | `colorStatusWarningForegroundInverted`} design token.
+ * @public
+ */
+export const colorStatusWarningForegroundInverted = 'var(--colorStatusWarningForegroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBorderActive | `colorStatusWarningBorderActive`} design token.
+ * @public
+ */
+export const colorStatusWarningBorderActive = 'var(--colorStatusWarningBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBorder1 | `colorStatusWarningBorder1`} design token.
+ * @public
+ */
+export const colorStatusWarningBorder1 = 'var(--colorStatusWarningBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBorder2 | `colorStatusWarningBorder2`} design token.
+ * @public
+ */
+export const colorStatusWarningBorder2 = 'var(--colorStatusWarningBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground1 | `colorStatusDangerBackground1`} design token.
+ * @public
+ */
+export const colorStatusDangerBackground1 = 'var(--colorStatusDangerBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground2 | `colorStatusDangerBackground2`} design token.
+ * @public
+ */
+export const colorStatusDangerBackground2 = 'var(--colorStatusDangerBackground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground3 | `colorStatusDangerBackground3`} design token.
+ * @public
+ */
+export const colorStatusDangerBackground3 = 'var(--colorStatusDangerBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground3Hover | `colorStatusDangerBackground3Hover`} design token.
+ * @public
+ */
+export const colorStatusDangerBackground3Hover = 'var(--colorStatusDangerBackground3Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground3Pressed | `colorStatusDangerBackground3Pressed`} design token.
+ * @public
+ */
+export const colorStatusDangerBackground3Pressed = 'var(--colorStatusDangerBackground3Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForeground1 | `colorStatusDangerForeground1`} design token.
+ * @public
+ */
+export const colorStatusDangerForeground1 = 'var(--colorStatusDangerForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForeground2 | `colorStatusDangerForeground2`} design token.
+ * @public
+ */
+export const colorStatusDangerForeground2 = 'var(--colorStatusDangerForeground2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForeground3 | `colorStatusDangerForeground3`} design token.
+ * @public
+ */
+export const colorStatusDangerForeground3 = 'var(--colorStatusDangerForeground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForegroundInverted | `colorStatusDangerForegroundInverted`} design token.
+ * @public
+ */
+export const colorStatusDangerForegroundInverted = 'var(--colorStatusDangerForegroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBorderActive | `colorStatusDangerBorderActive`} design token.
+ * @public
+ */
+export const colorStatusDangerBorderActive = 'var(--colorStatusDangerBorderActive)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBorder1 | `colorStatusDangerBorder1`} design token.
+ * @public
+ */
+export const colorStatusDangerBorder1 = 'var(--colorStatusDangerBorder1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBorder2 | `colorStatusDangerBorder2`} design token.
+ * @public
+ */
+export const colorStatusDangerBorder2 = 'var(--colorStatusDangerBorder2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusNone | `borderRadiusNone`} design token.
+ * @public
+ */
+export const borderRadiusNone = 'var(--borderRadiusNone)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusSmall | `borderRadiusSmall`} design token.
+ * @public
+ */
+export const borderRadiusSmall = 'var(--borderRadiusSmall)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusMedium | `borderRadiusMedium`} design token.
+ * @public
+ */
+export const borderRadiusMedium = 'var(--borderRadiusMedium)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusLarge | `borderRadiusLarge`} design token.
+ * @public
+ */
+export const borderRadiusLarge = 'var(--borderRadiusLarge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusXLarge | `borderRadiusXLarge`} design token.
+ * @public
+ */
+export const borderRadiusXLarge = 'var(--borderRadiusXLarge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
+ * @public
+ */
+export const borderRadiusCircular = 'var(--borderRadiusCircular)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontFamilyBase | `fontFamilyBase`} design token.
+ * @public
+ */
+export const fontFamilyBase = 'var(--fontFamilyBase)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontFamilyMonospace | `fontFamilyMonospace`} design token.
+ * @public
+ */
+export const fontFamilyMonospace = 'var(--fontFamilyMonospace)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontFamilyNumeric | `fontFamilyNumeric`} design token.
+ * @public
+ */
+export const fontFamilyNumeric = 'var(--fontFamilyNumeric)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase100 | `fontSizeBase100`} design token.
+ * @public
+ */
+export const fontSizeBase100 = 'var(--fontSizeBase100)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase200 | `fontSizeBase200`} design token.
+ * @public
+ */
+export const fontSizeBase200 = 'var(--fontSizeBase200)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase300 | `fontSizeBase300`} design token.
+ * @public
+ */
+export const fontSizeBase300 = 'var(--fontSizeBase300)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase400 | `fontSizeBase400`} design token.
+ * @public
+ */
+export const fontSizeBase400 = 'var(--fontSizeBase400)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase500 | `fontSizeBase500`} design token.
+ * @public
+ */
+export const fontSizeBase500 = 'var(--fontSizeBase500)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeBase600 | `fontSizeBase600`} design token.
+ * @public
+ */
+export const fontSizeBase600 = 'var(--fontSizeBase600)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero700 | `fontSizeHero700`} design token.
+ * @public
+ */
+export const fontSizeHero700 = 'var(--fontSizeHero700)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero800 | `fontSizeHero800`} design token.
+ * @public
+ */
+export const fontSizeHero800 = 'var(--fontSizeHero800)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero900 | `fontSizeHero900`} design token.
+ * @public
+ */
+export const fontSizeHero900 = 'var(--fontSizeHero900)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontSizeHero1000 | `fontSizeHero1000`} design token.
+ * @public
+ */
+export const fontSizeHero1000 = 'var(--fontSizeHero1000)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontWeightRegular | `fontWeightRegular`} design token.
+ * @public
+ */
+export const fontWeightRegular = 'var(--fontWeightRegular)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontWeightMedium | `fontWeightMedium`} design token.
+ * @public
+ */
+export const fontWeightMedium = 'var(--fontWeightMedium)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontWeightSemibold | `fontWeightSemibold`} design token.
+ * @public
+ */
+export const fontWeightSemibold = 'var(--fontWeightSemibold)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#fontWeightBold | `fontWeightBold`} design token.
+ * @public
+ */
+export const fontWeightBold = 'var(--fontWeightBold)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase100 | `lineHeightBase100`} design token.
+ * @public
+ */
+export const lineHeightBase100 = 'var(--lineHeightBase100)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase200 | `lineHeightBase200`} design token.
+ * @public
+ */
+export const lineHeightBase200 = 'var(--lineHeightBase200)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase300 | `lineHeightBase300`} design token.
+ * @public
+ */
+export const lineHeightBase300 = 'var(--lineHeightBase300)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase400 | `lineHeightBase400`} design token.
+ * @public
+ */
+export const lineHeightBase400 = 'var(--lineHeightBase400)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase500 | `lineHeightBase500`} design token.
+ * @public
+ */
+export const lineHeightBase500 = 'var(--lineHeightBase500)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightBase600 | `lineHeightBase600`} design token.
+ * @public
+ */
+export const lineHeightBase600 = 'var(--lineHeightBase600)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero700 | `lineHeightHero700`} design token.
+ * @public
+ */
+export const lineHeightHero700 = 'var(--lineHeightHero700)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero800 | `lineHeightHero800`} design token.
+ * @public
+ */
+export const lineHeightHero800 = 'var(--lineHeightHero800)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero900 | `lineHeightHero900`} design token.
+ * @public
+ */
+export const lineHeightHero900 = 'var(--lineHeightHero900)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#lineHeightHero1000 | `lineHeightHero1000`} design token.
+ * @public
+ */
+export const lineHeightHero1000 = 'var(--lineHeightHero1000)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow2 | `shadow2`} design token.
+ * @public
+ */
+export const shadow2 = 'var(--shadow2)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow4 | `shadow4`} design token.
+ * @public
+ */
+export const shadow4 = 'var(--shadow4)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow8 | `shadow8`} design token.
+ * @public
+ */
+export const shadow8 = 'var(--shadow8)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow16 | `shadow16`} design token.
+ * @public
+ */
+export const shadow16 = 'var(--shadow16)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow28 | `shadow28`} design token.
+ * @public
+ */
+export const shadow28 = 'var(--shadow28)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow64 | `shadow64`} design token.
+ * @public
+ */
+export const shadow64 = 'var(--shadow64)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow2Brand | `shadow2Brand`} design token.
+ * @public
+ */
+export const shadow2Brand = 'var(--shadow2Brand)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow4Brand | `shadow4Brand`} design token.
+ * @public
+ */
+export const shadow4Brand = 'var(--shadow4Brand)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow8Brand | `shadow8Brand`} design token.
+ * @public
+ */
+export const shadow8Brand = 'var(--shadow8Brand)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow16Brand | `shadow16Brand`} design token.
+ * @public
+ */
+export const shadow16Brand = 'var(--shadow16Brand)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow28Brand | `shadow28Brand`} design token.
+ * @public
+ */
+export const shadow28Brand = 'var(--shadow28Brand)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#shadow64Brand | `shadow64Brand`} design token.
+ * @public
+ */
+export const shadow64Brand = 'var(--shadow64Brand)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThin | `strokeWidthThin`} design token.
+ * @public
+ */
+export const strokeWidthThin = 'var(--strokeWidthThin)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThick | `strokeWidthThick`} design token.
+ * @public
+ */
+export const strokeWidthThick = 'var(--strokeWidthThick)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token.
+ * @public
+ */
+export const strokeWidthThicker = 'var(--strokeWidthThicker)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThickest | `strokeWidthThickest`} design token.
+ * @public
+ */
+export const strokeWidthThickest = 'var(--strokeWidthThickest)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalNone | `spacingHorizontalNone`} design token.
+ * @public
+ */
+export const spacingHorizontalNone = 'var(--spacingHorizontalNone)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXS | `spacingHorizontalXXS`} design token.
+ * @public
+ */
+export const spacingHorizontalXXS = 'var(--spacingHorizontalXXS)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXS | `spacingHorizontalXS`} design token.
+ * @public
+ */
+export const spacingHorizontalXS = 'var(--spacingHorizontalXS)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalSNudge | `spacingHorizontalSNudge`} design token.
+ * @public
+ */
+export const spacingHorizontalSNudge = 'var(--spacingHorizontalSNudge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalS | `spacingHorizontalS`} design token.
+ * @public
+ */
+export const spacingHorizontalS = 'var(--spacingHorizontalS)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalMNudge | `spacingHorizontalMNudge`} design token.
+ * @public
+ */
+export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalM | `spacingHorizontalM`} design token.
+ * @public
+ */
+export const spacingHorizontalM = 'var(--spacingHorizontalM)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalL | `spacingHorizontalL`} design token.
+ * @public
+ */
+export const spacingHorizontalL = 'var(--spacingHorizontalL)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXL | `spacingHorizontalXL`} design token.
+ * @public
+ */
+export const spacingHorizontalXL = 'var(--spacingHorizontalXL)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXL | `spacingHorizontalXXL`} design token.
+ * @public
+ */
+export const spacingHorizontalXXL = 'var(--spacingHorizontalXXL)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXXL | `spacingHorizontalXXXL`} design token.
+ * @public
+ */
+export const spacingHorizontalXXXL = 'var(--spacingHorizontalXXXL)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalNone | `spacingVerticalNone`} design token.
+ * @public
+ */
+export const spacingVerticalNone = 'var(--spacingVerticalNone)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXS | `spacingVerticalXXS`} design token.
+ * @public
+ */
+export const spacingVerticalXXS = 'var(--spacingVerticalXXS)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token.
+ * @public
+ */
+export const spacingVerticalXS = 'var(--spacingVerticalXS)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalSNudge | `spacingVerticalSNudge`} design token.
+ * @public
+ */
+export const spacingVerticalSNudge = 'var(--spacingVerticalSNudge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalS | `spacingVerticalS`} design token.
+ * @public
+ */
+export const spacingVerticalS = 'var(--spacingVerticalS)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalMNudge | `spacingVerticalMNudge`} design token.
+ * @public
+ */
+export const spacingVerticalMNudge = 'var(--spacingVerticalMNudge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalM | `spacingVerticalM`} design token.
+ * @public
+ */
+export const spacingVerticalM = 'var(--spacingVerticalM)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalL | `spacingVerticalL`} design token.
+ * @public
+ */
+export const spacingVerticalL = 'var(--spacingVerticalL)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXL | `spacingVerticalXL`} design token.
+ * @public
+ */
+export const spacingVerticalXL = 'var(--spacingVerticalXL)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXL | `spacingVerticalXXL`} design token.
+ * @public
+ */
+export const spacingVerticalXXL = 'var(--spacingVerticalXXL)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXXXL | `spacingVerticalXXXL`} design token.
+ * @public
+ */
+export const spacingVerticalXXXL = 'var(--spacingVerticalXXXL)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationUltraFast | `durationUltraFast`} design token.
+ * @public
+ */
+export const durationUltraFast = 'var(--durationUltraFast)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationFaster | `durationFaster`} design token.
+ * @public
+ */
+export const durationFaster = 'var(--durationFaster)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationFast | `durationFast`} design token.
+ * @public
+ */
+export const durationFast = 'var(--durationFast)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationNormal | `durationNormal`} design token.
+ * @public
+ */
+export const durationNormal = 'var(--durationNormal)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationGentle | `durationGentle`} design token.
+ * @public
+ */
+export const durationGentle = 'var(--durationGentle)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationSlow | `durationSlow`} design token.
+ * @public
+ */
+export const durationSlow = 'var(--durationSlow)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationSlower | `durationSlower`} design token.
+ * @public
+ */
+export const durationSlower = 'var(--durationSlower)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#durationUltraSlow | `durationUltraSlow`} design token.
+ * @public
+ */
+export const durationUltraSlow = 'var(--durationUltraSlow)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveAccelerateMax | `curveAccelerateMax`} design token.
+ * @public
+ */
+export const curveAccelerateMax = 'var(--curveAccelerateMax)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveAccelerateMid | `curveAccelerateMid`} design token.
+ * @public
+ */
+export const curveAccelerateMid = 'var(--curveAccelerateMid)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveAccelerateMin | `curveAccelerateMin`} design token.
+ * @public
+ */
+export const curveAccelerateMin = 'var(--curveAccelerateMin)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveDecelerateMax | `curveDecelerateMax`} design token.
+ * @public
+ */
+export const curveDecelerateMax = 'var(--curveDecelerateMax)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveDecelerateMid | `curveDecelerateMid`} design token.
+ * @public
+ */
+export const curveDecelerateMid = 'var(--curveDecelerateMid)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveDecelerateMin | `curveDecelerateMin`} design token.
+ * @public
+ */
+export const curveDecelerateMin = 'var(--curveDecelerateMin)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveEasyEaseMax | `curveEasyEaseMax`} design token.
+ * @public
+ */
+export const curveEasyEaseMax = 'var(--curveEasyEaseMax)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveEasyEase | `curveEasyEase`} design token.
+ * @public
+ */
+export const curveEasyEase = 'var(--curveEasyEase)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#curveLinear | `curveLinear`} design token.
+ * @public
+ */
+export const curveLinear = 'var(--curveLinear)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#zIndexBackground | `zIndexBackground`} design token.
+ * @public
+ */
+export const zIndexBackground = 'var(--zIndexBackground)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#zIndexContent | `zIndexContent`} design token.
+ * @public
+ */
+export const zIndexContent = 'var(--zIndexContent)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#zIndexOverlay | `zIndexOverlay`} design token.
+ * @public
+ */
+export const zIndexOverlay = 'var(--zIndexOverlay)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#zIndexPopup | `zIndexPopup`} design token.
+ * @public
+ */
+export const zIndexPopup = 'var(--zIndexPopup)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#zIndexMessages | `zIndexMessages`} design token.
+ * @public
+ */
+export const zIndexMessages = 'var(--zIndexMessages)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#zIndexFloating | `zIndexFloating`} design token.
+ * @public
+ */
+export const zIndexFloating = 'var(--zIndexFloating)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#zIndexPriority | `zIndexPriority`} design token.
+ * @public
+ */
+export const zIndexPriority = 'var(--zIndexPriority)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#zIndexDebug | `zIndexDebug`} design token.
+ * @public
+ */
+export const zIndexDebug = 'var(--zIndexDebug)';
 //# sourceMappingURL=design-tokens.js.map