@fluentui/web-components 3.0.0-beta.10 → 3.0.0-beta.100

package/dist/dts/theme/design-tokens.d.ts

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