@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

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
+/**
+ * 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)';
-export const colorNeutralBackgroundStatic = 'var(--colorNeutralBackgroundStatic)';
+/**
+ * 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