@fluentui/web-components 3.0.0-beta.5 → 3.0.0-beta.7

package/dist/web-components.d.ts

@@ -1,6 +1,5 @@
 import type { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation/anchor.js';
 import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import { CSSDesignToken } from '@microsoft/fast-foundation/design-token.js';
 import { DividerOrientation } from '@microsoft/fast-foundation/divider.js';
 import { DividerRole } from '@microsoft/fast-foundation/divider.js';
 import { ElementStyles } from '@microsoft/fast-element';
@@ -681,17 +680,17 @@ export declare const BadgeStyles: ElementStyles;
 
 export declare const BadgeTemplate: ElementViewTemplate<Badge>;
 
-export declare const borderRadiusCircular: CSSDesignToken<string>;
+export declare const borderRadiusCircular = "--borderRadiusCircular";
 
-export declare const borderRadiusLarge: CSSDesignToken<string>;
+export declare const borderRadiusLarge = "--borderRadiusLarge";
 
-export declare const borderRadiusMedium: CSSDesignToken<string>;
+export declare const borderRadiusMedium = "--borderRadiusMedium";
 
-export declare const borderRadiusNone: CSSDesignToken<string>;
+export declare const borderRadiusNone = "--borderRadiusNone";
 
-export declare const borderRadiusSmall: CSSDesignToken<string>;
+export declare const borderRadiusSmall = "--borderRadiusSmall";
 
-export declare const borderRadiusXLarge: CSSDesignToken<string>;
+export declare const borderRadiusXLarge = "--borderRadiusXLarge";
 
 /**
  * The base class used for constructing a fluent-button custom element
@@ -906,599 +905,599 @@ export declare const CheckboxStyles: ElementStyles;
  */
 export declare const CheckboxTemplate: ElementViewTemplate<Checkbox>;
 
-export declare const colorBackgroundOverlay: CSSDesignToken<string>;
+export declare const colorBackgroundOverlay = "--colorBackgroundOverlay";
 
-export declare const colorBrandBackground: CSSDesignToken<string>;
+export declare const colorBrandBackground = "--colorBrandBackground";
 
-export declare const colorBrandBackground2: CSSDesignToken<string>;
+export declare const colorBrandBackground2 = "--colorBrandBackground2";
 
-export declare const colorBrandBackgroundHover: CSSDesignToken<string>;
+export declare const colorBrandBackgroundHover = "--colorBrandBackgroundHover";
 
-export declare const colorBrandBackgroundInverted: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInverted = "--colorBrandBackgroundInverted";
 
-export declare const colorBrandBackgroundInvertedHover: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInvertedHover = "--colorBrandBackgroundInvertedHover";
 
-export declare const colorBrandBackgroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInvertedPressed = "--colorBrandBackgroundInvertedPressed";
 
-export declare const colorBrandBackgroundInvertedSelected: CSSDesignToken<string>;
+export declare const colorBrandBackgroundInvertedSelected = "--colorBrandBackgroundInvertedSelected";
 
-export declare const colorBrandBackgroundPressed: CSSDesignToken<string>;
+export declare const colorBrandBackgroundPressed = "--colorBrandBackgroundPressed";
 
-export declare const colorBrandBackgroundSelected: CSSDesignToken<string>;
+export declare const colorBrandBackgroundSelected = "--colorBrandBackgroundSelected";
 
-export declare const colorBrandBackgroundStatic: CSSDesignToken<string>;
+export declare const colorBrandBackgroundStatic = "--colorBrandBackgroundStatic";
 
-export declare const colorBrandForeground1: CSSDesignToken<string>;
+export declare const colorBrandForeground1 = "--colorBrandForeground1";
 
-export declare const colorBrandForeground2: CSSDesignToken<string>;
+export declare const colorBrandForeground2 = "--colorBrandForeground2";
 
-export declare const colorBrandForegroundInverted: CSSDesignToken<string>;
+export declare const colorBrandForegroundInverted = "--colorBrandForegroundInverted";
 
-export declare const colorBrandForegroundInvertedHover: CSSDesignToken<string>;
+export declare const colorBrandForegroundInvertedHover = "--colorBrandForegroundInvertedHover";
 
-export declare const colorBrandForegroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorBrandForegroundInvertedPressed = "--colorBrandForegroundInvertedPressed";
 
-export declare const colorBrandForegroundLink: CSSDesignToken<string>;
+export declare const colorBrandForegroundLink = "--colorBrandForegroundLink";
 
-export declare const colorBrandForegroundLinkHover: CSSDesignToken<string>;
+export declare const colorBrandForegroundLinkHover = "--colorBrandForegroundLinkHover";
 
-export declare const colorBrandForegroundLinkPressed: CSSDesignToken<string>;
+export declare const colorBrandForegroundLinkPressed = "--colorBrandForegroundLinkPressed";
 
-export declare const colorBrandForegroundLinkSelected: CSSDesignToken<string>;
+export declare const colorBrandForegroundLinkSelected = "--colorBrandForegroundLinkSelected";
 
-export declare const colorBrandForegroundOnLight: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLight = "--colorBrandForegroundOnLight";
 
-export declare const colorBrandForegroundOnLightHover: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLightHover = "--colorBrandForegroundOnLightHover";
 
-export declare const colorBrandForegroundOnLightPressed: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLightPressed = "--colorBrandForegroundOnLightPressed";
 
-export declare const colorBrandForegroundOnLightSelected: CSSDesignToken<string>;
+export declare const colorBrandForegroundOnLightSelected = "--colorBrandForegroundOnLightSelected";
 
-export declare const colorBrandShadowAmbient: CSSDesignToken<string>;
+export declare const colorBrandShadowAmbient = "--colorBrandShadowAmbient";
 
-export declare const colorBrandShadowKey: CSSDesignToken<string>;
+export declare const colorBrandShadowKey = "--colorBrandShadowKey";
 
-export declare const colorBrandStroke1: CSSDesignToken<string>;
+export declare const colorBrandStroke1 = "--colorBrandStroke1";
 
-export declare const colorBrandStroke2: CSSDesignToken<string>;
+export declare const colorBrandStroke2 = "--colorBrandStroke2";
 
-export declare const colorCompoundBrandBackground: CSSDesignToken<string>;
+export declare const colorCompoundBrandBackground = "--colorCompoundBrandBackground";
 
-export declare const colorCompoundBrandBackgroundHover: CSSDesignToken<string>;
+export declare const colorCompoundBrandBackgroundHover = "--colorCompoundBrandBackgroundHover";
 
-export declare const colorCompoundBrandBackgroundPressed: CSSDesignToken<string>;
+export declare const colorCompoundBrandBackgroundPressed = "--colorCompoundBrandBackgroundPressed";
 
-export declare const colorCompoundBrandForeground1: CSSDesignToken<string>;
+export declare const colorCompoundBrandForeground1 = "--colorCompoundBrandForeground1";
 
-export declare const colorCompoundBrandForeground1Hover: CSSDesignToken<string>;
+export declare const colorCompoundBrandForeground1Hover = "--colorCompoundBrandForeground1Hover";
 
-export declare const colorCompoundBrandForeground1Pressed: CSSDesignToken<string>;
+export declare const colorCompoundBrandForeground1Pressed = "--colorCompoundBrandForeground1Pressed";
 
-export declare const colorCompoundBrandStroke: CSSDesignToken<string>;
+export declare const colorCompoundBrandStroke = "--colorCompoundBrandStroke";
 
-export declare const colorCompoundBrandStrokeHover: CSSDesignToken<string>;
+export declare const colorCompoundBrandStrokeHover = "--colorCompoundBrandStrokeHover";
 
-export declare const colorCompoundBrandStrokePressed: CSSDesignToken<string>;
+export declare const colorCompoundBrandStrokePressed = "--colorCompoundBrandStrokePressed";
 
-export declare const colorNeutralBackground1: CSSDesignToken<string>;
+export declare const colorNeutralBackground1 = "--colorNeutralBackground1";
 
-export declare const colorNeutralBackground1Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground1Hover = "--colorNeutralBackground1Hover";
 
-export declare const colorNeutralBackground1Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground1Pressed = "--colorNeutralBackground1Pressed";
 
-export declare const colorNeutralBackground1Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground1Selected = "--colorNeutralBackground1Selected";
 
-export declare const colorNeutralBackground2: CSSDesignToken<string>;
+export declare const colorNeutralBackground2 = "--colorNeutralBackground2";
 
-export declare const colorNeutralBackground2Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground2Hover = "--colorNeutralBackground2Hover";
 
-export declare const colorNeutralBackground2Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground2Pressed = "--colorNeutralBackground2Pressed";
 
-export declare const colorNeutralBackground2Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground2Selected = "--colorNeutralBackground2Selected";
 
-export declare const colorNeutralBackground3: CSSDesignToken<string>;
+export declare const colorNeutralBackground3 = "--colorNeutralBackground3";
 
-export declare const colorNeutralBackground3Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground3Hover = "--colorNeutralBackground3Hover";
 
-export declare const colorNeutralBackground3Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground3Pressed = "--colorNeutralBackground3Pressed";
 
-export declare const colorNeutralBackground3Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground3Selected = "--colorNeutralBackground3Selected";
 
-export declare const colorNeutralBackground4: CSSDesignToken<string>;
+export declare const colorNeutralBackground4 = "--colorNeutralBackground4";
 
-export declare const colorNeutralBackground4Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground4Hover = "--colorNeutralBackground4Hover";
 
-export declare const colorNeutralBackground4Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground4Pressed = "--colorNeutralBackground4Pressed";
 
-export declare const colorNeutralBackground4Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground4Selected = "--colorNeutralBackground4Selected";
 
-export declare const colorNeutralBackground5: CSSDesignToken<string>;
+export declare const colorNeutralBackground5 = "--colorNeutralBackground5";
 
-export declare const colorNeutralBackground5Hover: CSSDesignToken<string>;
+export declare const colorNeutralBackground5Hover = "--colorNeutralBackground5Hover";
 
-export declare const colorNeutralBackground5Pressed: CSSDesignToken<string>;
+export declare const colorNeutralBackground5Pressed = "--colorNeutralBackground5Pressed";
 
-export declare const colorNeutralBackground5Selected: CSSDesignToken<string>;
+export declare const colorNeutralBackground5Selected = "--colorNeutralBackground5Selected";
 
-export declare const colorNeutralBackground6: CSSDesignToken<string>;
+export declare const colorNeutralBackground6 = "--colorNeutralBackground6";
 
-export declare const colorNeutralBackgroundDisabled: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundDisabled = "--colorNeutralBackgroundDisabled";
 
-export declare const colorNeutralBackgroundInverted: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundInverted = "--colorNeutralBackgroundInverted";
 
-export declare const colorNeutralBackgroundInvertedDisabled: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundInvertedDisabled = "--colorNeutralBackgroundInvertedDisabled";
 
-export declare const colorNeutralBackgroundStatic: CSSDesignToken<string>;
+export declare const colorNeutralBackgroundStatic = "--colorNeutralBackgroundStatic";
 
-export declare const colorNeutralForeground1: CSSDesignToken<string>;
+export declare const colorNeutralForeground1 = "--colorNeutralForeground1";
 
-export declare const colorNeutralForeground1Hover: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Hover = "--colorNeutralForeground1Hover";
 
-export declare const colorNeutralForeground1Pressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Pressed = "--colorNeutralForeground1Pressed";
 
-export declare const colorNeutralForeground1Selected: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Selected = "--colorNeutralForeground1Selected";
 
-export declare const colorNeutralForeground1Static: CSSDesignToken<string>;
+export declare const colorNeutralForeground1Static = "--colorNeutralForeground1Static";
 
-export declare const colorNeutralForeground2: CSSDesignToken<string>;
+export declare const colorNeutralForeground2 = "--colorNeutralForeground2";
 
-export declare const colorNeutralForeground2BrandHover: CSSDesignToken<string>;
+export declare const colorNeutralForeground2BrandHover = "--colorNeutralForeground2BrandHover";
 
-export declare const colorNeutralForeground2BrandPressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground2BrandPressed = "--colorNeutralForeground2BrandPressed";
 
-export declare const colorNeutralForeground2BrandSelected: CSSDesignToken<string>;
+export declare const colorNeutralForeground2BrandSelected = "--colorNeutralForeground2BrandSelected";
 
-export declare const colorNeutralForeground2Hover: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Hover = "--colorNeutralForeground2Hover";
 
-export declare const colorNeutralForeground2Link: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Link = "--colorNeutralForeground2Link";
 
-export declare const colorNeutralForeground2LinkHover: CSSDesignToken<string>;
+export declare const colorNeutralForeground2LinkHover = "--colorNeutralForeground2LinkHover";
 
-export declare const colorNeutralForeground2LinkPressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground2LinkPressed = "--colorNeutralForeground2LinkPressed";
 
-export declare const colorNeutralForeground2LinkSelected: CSSDesignToken<string>;
+export declare const colorNeutralForeground2LinkSelected = "--colorNeutralForeground2LinkSelected";
 
-export declare const colorNeutralForeground2Pressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Pressed = "--colorNeutralForeground2Pressed";
 
-export declare const colorNeutralForeground2Selected: CSSDesignToken<string>;
+export declare const colorNeutralForeground2Selected = "--colorNeutralForeground2Selected";
 
-export declare const colorNeutralForeground3: CSSDesignToken<string>;
+export declare const colorNeutralForeground3 = "--colorNeutralForeground3";
 
-export declare const colorNeutralForeground3BrandHover: CSSDesignToken<string>;
+export declare const colorNeutralForeground3BrandHover = "--colorNeutralForeground3BrandHover";
 
-export declare const colorNeutralForeground3BrandPressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground3BrandPressed = "--colorNeutralForeground3BrandPressed";
 
-export declare const colorNeutralForeground3BrandSelected: CSSDesignToken<string>;
+export declare const colorNeutralForeground3BrandSelected = "--colorNeutralForeground3BrandSelected";
 
-export declare const colorNeutralForeground3Hover: CSSDesignToken<string>;
+export declare const colorNeutralForeground3Hover = "--colorNeutralForeground3Hover";
 
-export declare const colorNeutralForeground3Pressed: CSSDesignToken<string>;
+export declare const colorNeutralForeground3Pressed = "--colorNeutralForeground3Pressed";
 
-export declare const colorNeutralForeground3Selected: CSSDesignToken<string>;
+export declare const colorNeutralForeground3Selected = "--colorNeutralForeground3Selected";
 
-export declare const colorNeutralForeground4: CSSDesignToken<string>;
+export declare const colorNeutralForeground4 = "--colorNeutralForeground4";
 
-export declare const colorNeutralForegroundDisabled: CSSDesignToken<string>;
+export declare const colorNeutralForegroundDisabled = "--colorNeutralForegroundDisabled";
 
-export declare const colorNeutralForegroundInverted: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInverted = "--colorNeutralForegroundInverted";
 
-export declare const colorNeutralForegroundInverted2: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInverted2 = "--colorNeutralForegroundInverted2";
 
-export declare const colorNeutralForegroundInvertedDisabled: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedDisabled = "--colorNeutralForegroundInvertedDisabled";
 
-export declare const colorNeutralForegroundInvertedHover: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedHover = "--colorNeutralForegroundInvertedHover";
 
-export declare const colorNeutralForegroundInvertedLink: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLink = "--colorNeutralForegroundInvertedLink";
 
-export declare const colorNeutralForegroundInvertedLinkHover: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLinkHover = "--colorNeutralForegroundInvertedLinkHover";
 
-export declare const colorNeutralForegroundInvertedLinkPressed: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLinkPressed = "--colorNeutralForegroundInvertedLinkPressed";
 
-export declare const colorNeutralForegroundInvertedLinkSelected: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedLinkSelected = "--colorNeutralForegroundInvertedLinkSelected";
 
-export declare const colorNeutralForegroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedPressed = "--colorNeutralForegroundInvertedPressed";
 
-export declare const colorNeutralForegroundInvertedSelected: CSSDesignToken<string>;
+export declare const colorNeutralForegroundInvertedSelected = "--colorNeutralForegroundInvertedSelected";
 
-export declare const colorNeutralForegroundOnBrand: CSSDesignToken<string>;
+export declare const colorNeutralForegroundOnBrand = "--colorNeutralForegroundOnBrand";
 
-export declare const colorNeutralForegroundStaticInverted: CSSDesignToken<string>;
+export declare const colorNeutralForegroundStaticInverted = "--colorNeutralForegroundStaticInverted";
 
-export declare const colorNeutralShadowAmbient: CSSDesignToken<string>;
+export declare const colorNeutralShadowAmbient = "--colorNeutralShadowAmbient";
 
-export declare const colorNeutralShadowAmbientDarker: CSSDesignToken<string>;
+export declare const colorNeutralShadowAmbientDarker = "--colorNeutralShadowAmbientDarker";
 
-export declare const colorNeutralShadowAmbientLighter: CSSDesignToken<string>;
+export declare const colorNeutralShadowAmbientLighter = "--colorNeutralShadowAmbientLighter";
 
-export declare const colorNeutralShadowKey: CSSDesignToken<string>;
+export declare const colorNeutralShadowKey = "--colorNeutralShadowKey";
 
-export declare const colorNeutralShadowKeyDarker: CSSDesignToken<string>;
+export declare const colorNeutralShadowKeyDarker = "--colorNeutralShadowKeyDarker";
 
-export declare const colorNeutralShadowKeyLighter: CSSDesignToken<string>;
+export declare const colorNeutralShadowKeyLighter = "--colorNeutralShadowKeyLighter";
 
-export declare const colorNeutralStencil1: CSSDesignToken<string>;
+export declare const colorNeutralStencil1 = "--colorNeutralStencil1";
 
-export declare const colorNeutralStencil1Alpha: CSSDesignToken<string>;
+export declare const colorNeutralStencil1Alpha = "--colorNeutralStencil1Alpha";
 
-export declare const colorNeutralStencil2: CSSDesignToken<string>;
+export declare const colorNeutralStencil2 = "--colorNeutralStencil2";
 
-export declare const colorNeutralStencil2Alpha: CSSDesignToken<string>;
+export declare const colorNeutralStencil2Alpha = "--colorNeutralStencil2Alpha";
 
-export declare const colorNeutralStroke1: CSSDesignToken<string>;
+export declare const colorNeutralStroke1 = "--colorNeutralStroke1";
 
-export declare const colorNeutralStroke1Hover: CSSDesignToken<string>;
+export declare const colorNeutralStroke1Hover = "--colorNeutralStroke1Hover";
 
-export declare const colorNeutralStroke1Pressed: CSSDesignToken<string>;
+export declare const colorNeutralStroke1Pressed = "--colorNeutralStroke1Pressed";
 
-export declare const colorNeutralStroke1Selected: CSSDesignToken<string>;
+export declare const colorNeutralStroke1Selected = "--colorNeutralStroke1Selected";
 
-export declare const colorNeutralStroke2: CSSDesignToken<string>;
+export declare const colorNeutralStroke2 = "--colorNeutralStroke2";
 
-export declare const colorNeutralStroke3: CSSDesignToken<string>;
+export declare const colorNeutralStroke3 = "--colorNeutralStroke3";
 
-export declare const colorNeutralStrokeAccessible: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessible = "--colorNeutralStrokeAccessible";
 
-export declare const colorNeutralStrokeAccessibleHover: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessibleHover = "--colorNeutralStrokeAccessibleHover";
 
-export declare const colorNeutralStrokeAccessiblePressed: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessiblePressed = "--colorNeutralStrokeAccessiblePressed";
 
-export declare const colorNeutralStrokeAccessibleSelected: CSSDesignToken<string>;
+export declare const colorNeutralStrokeAccessibleSelected = "--colorNeutralStrokeAccessibleSelected";
 
-export declare const colorNeutralStrokeDisabled: CSSDesignToken<string>;
+export declare const colorNeutralStrokeDisabled = "--colorNeutralStrokeDisabled";
 
-export declare const colorNeutralStrokeInvertedDisabled: CSSDesignToken<string>;
+export declare const colorNeutralStrokeInvertedDisabled = "--colorNeutralStrokeInvertedDisabled";
 
-export declare const colorNeutralStrokeOnBrand: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand = "--colorNeutralStrokeOnBrand";
 
-export declare const colorNeutralStrokeOnBrand2: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2 = "--colorNeutralStrokeOnBrand2";
 
-export declare const colorNeutralStrokeOnBrand2Hover: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2Hover = "--colorNeutralStrokeOnBrand2Hover";
 
-export declare const colorNeutralStrokeOnBrand2Pressed: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2Pressed = "--colorNeutralStrokeOnBrand2Pressed";
 
-export declare const colorNeutralStrokeOnBrand2Selected: CSSDesignToken<string>;
+export declare const colorNeutralStrokeOnBrand2Selected = "--colorNeutralStrokeOnBrand2Selected";
 
-export declare const colorPaletteAnchorBackground2: CSSDesignToken<string>;
+export declare const colorPaletteAnchorBackground2 = "--colorPaletteAnchorBackground2";
 
-export declare const colorPaletteAnchorBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteAnchorBorderActive = "--colorPaletteAnchorBorderActive";
 
-export declare const colorPaletteAnchorForeground2: CSSDesignToken<string>;
+export declare const colorPaletteAnchorForeground2 = "--colorPaletteAnchorForeground2";
 
-export declare const colorPaletteBeigeBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBeigeBackground2 = "--colorPaletteBeigeBackground2";
 
-export declare const colorPaletteBeigeBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBeigeBorderActive = "--colorPaletteBeigeBorderActive";
 
-export declare const colorPaletteBeigeForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBeigeForeground2 = "--colorPaletteBeigeForeground2";
 
-export declare const colorPaletteBerryBackground1: CSSDesignToken<string>;
+export declare const colorPaletteBerryBackground1 = "--colorPaletteBerryBackground1";
 
-export declare const colorPaletteBerryBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBerryBackground2 = "--colorPaletteBerryBackground2";
 
-export declare const colorPaletteBerryBackground3: CSSDesignToken<string>;
+export declare const colorPaletteBerryBackground3 = "--colorPaletteBerryBackground3";
 
-export declare const colorPaletteBerryBorder1: CSSDesignToken<string>;
+export declare const colorPaletteBerryBorder1 = "--colorPaletteBerryBorder1";
 
-export declare const colorPaletteBerryBorder2: CSSDesignToken<string>;
+export declare const colorPaletteBerryBorder2 = "--colorPaletteBerryBorder2";
 
-export declare const colorPaletteBerryBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBerryBorderActive = "--colorPaletteBerryBorderActive";
 
-export declare const colorPaletteBerryForeground1: CSSDesignToken<string>;
+export declare const colorPaletteBerryForeground1 = "--colorPaletteBerryForeground1";
 
-export declare const colorPaletteBerryForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBerryForeground2 = "--colorPaletteBerryForeground2";
 
-export declare const colorPaletteBerryForeground3: CSSDesignToken<string>;
+export declare const colorPaletteBerryForeground3 = "--colorPaletteBerryForeground3";
 
-export declare const colorPaletteBlueBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBlueBackground2 = "--colorPaletteBlueBackground2";
 
-export declare const colorPaletteBlueBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBlueBorderActive = "--colorPaletteBlueBorderActive";
 
-export declare const colorPaletteBlueForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBlueForeground2 = "--colorPaletteBlueForeground2";
 
-export declare const colorPaletteBrassBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBrassBackground2 = "--colorPaletteBrassBackground2";
 
-export declare const colorPaletteBrassBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBrassBorderActive = "--colorPaletteBrassBorderActive";
 
-export declare const colorPaletteBrassForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBrassForeground2 = "--colorPaletteBrassForeground2";
 
-export declare const colorPaletteBrownBackground2: CSSDesignToken<string>;
+export declare const colorPaletteBrownBackground2 = "--colorPaletteBrownBackground2";
 
-export declare const colorPaletteBrownBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteBrownBorderActive = "--colorPaletteBrownBorderActive";
 
-export declare const colorPaletteBrownForeground2: CSSDesignToken<string>;
+export declare const colorPaletteBrownForeground2 = "--colorPaletteBrownForeground2";
 
-export declare const colorPaletteCornflowerBackground2: CSSDesignToken<string>;
+export declare const colorPaletteCornflowerBackground2 = "--colorPaletteCornflowerBackground2";
 
-export declare const colorPaletteCornflowerBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteCornflowerBorderActive = "--colorPaletteCornflowerBorderActive";
 
-export declare const colorPaletteCornflowerForeground2: CSSDesignToken<string>;
+export declare const colorPaletteCornflowerForeground2 = "--colorPaletteCornflowerForeground2";
 
-export declare const colorPaletteCranberryBackground2: CSSDesignToken<string>;
+export declare const colorPaletteCranberryBackground2 = "--colorPaletteCranberryBackground2";
 
-export declare const colorPaletteCranberryBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteCranberryBorderActive = "--colorPaletteCranberryBorderActive";
 
-export declare const colorPaletteCranberryForeground2: CSSDesignToken<string>;
+export declare const colorPaletteCranberryForeground2 = "--colorPaletteCranberryForeground2";
 
-export declare const colorPaletteDarkGreenBackground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkGreenBackground2 = "--colorPaletteDarkGreenBackground2";
 
-export declare const colorPaletteDarkGreenBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteDarkGreenBorderActive = "--colorPaletteDarkGreenBorderActive";
 
-export declare const colorPaletteDarkGreenForeground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkGreenForeground2 = "--colorPaletteDarkGreenForeground2";
 
-export declare const colorPaletteDarkOrangeBackground1: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBackground1 = "--colorPaletteDarkOrangeBackground1";
 
-export declare const colorPaletteDarkOrangeBackground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBackground2 = "--colorPaletteDarkOrangeBackground2";
 
-export declare const colorPaletteDarkOrangeBackground3: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBackground3 = "--colorPaletteDarkOrangeBackground3";
 
-export declare const colorPaletteDarkOrangeBorder1: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBorder1 = "--colorPaletteDarkOrangeBorder1";
 
-export declare const colorPaletteDarkOrangeBorder2: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBorder2 = "--colorPaletteDarkOrangeBorder2";
 
-export declare const colorPaletteDarkOrangeBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeBorderActive = "--colorPaletteDarkOrangeBorderActive";
 
-export declare const colorPaletteDarkOrangeForeground1: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeForeground1 = "--colorPaletteDarkOrangeForeground1";
 
-export declare const colorPaletteDarkOrangeForeground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeForeground2 = "--colorPaletteDarkOrangeForeground2";
 
-export declare const colorPaletteDarkOrangeForeground3: CSSDesignToken<string>;
+export declare const colorPaletteDarkOrangeForeground3 = "--colorPaletteDarkOrangeForeground3";
 
-export declare const colorPaletteDarkRedBackground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkRedBackground2 = "--colorPaletteDarkRedBackground2";
 
-export declare const colorPaletteDarkRedBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteDarkRedBorderActive = "--colorPaletteDarkRedBorderActive";
 
-export declare const colorPaletteDarkRedForeground2: CSSDesignToken<string>;
+export declare const colorPaletteDarkRedForeground2 = "--colorPaletteDarkRedForeground2";
 
-export declare const colorPaletteForestBackground2: CSSDesignToken<string>;
+export declare const colorPaletteForestBackground2 = "--colorPaletteForestBackground2";
 
-export declare const colorPaletteForestBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteForestBorderActive = "--colorPaletteForestBorderActive";
 
-export declare const colorPaletteForestForeground2: CSSDesignToken<string>;
+export declare const colorPaletteForestForeground2 = "--colorPaletteForestForeground2";
 
-export declare const colorPaletteGoldBackground2: CSSDesignToken<string>;
+export declare const colorPaletteGoldBackground2 = "--colorPaletteGoldBackground2";
 
-export declare const colorPaletteGoldBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteGoldBorderActive = "--colorPaletteGoldBorderActive";
 
-export declare const colorPaletteGoldForeground2: CSSDesignToken<string>;
+export declare const colorPaletteGoldForeground2 = "--colorPaletteGoldForeground2";
 
-export declare const colorPaletteGrapeBackground2: CSSDesignToken<string>;
+export declare const colorPaletteGrapeBackground2 = "--colorPaletteGrapeBackground2";
 
-export declare const colorPaletteGrapeBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteGrapeBorderActive = "--colorPaletteGrapeBorderActive";
 
-export declare const colorPaletteGrapeForeground2: CSSDesignToken<string>;
+export declare const colorPaletteGrapeForeground2 = "--colorPaletteGrapeForeground2";
 
-export declare const colorPaletteGreenBackground1: CSSDesignToken<string>;
+export declare const colorPaletteGreenBackground1 = "--colorPaletteGreenBackground1";
 
-export declare const colorPaletteGreenBackground2: CSSDesignToken<string>;
+export declare const colorPaletteGreenBackground2 = "--colorPaletteGreenBackground2";
 
-export declare const colorPaletteGreenBackground3: CSSDesignToken<string>;
+export declare const colorPaletteGreenBackground3 = "--colorPaletteGreenBackground3";
 
-export declare const colorPaletteGreenBorder1: CSSDesignToken<string>;
+export declare const colorPaletteGreenBorder1 = "--colorPaletteGreenBorder1";
 
-export declare const colorPaletteGreenBorder2: CSSDesignToken<string>;
+export declare const colorPaletteGreenBorder2 = "--colorPaletteGreenBorder2";
 
-export declare const colorPaletteGreenBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteGreenBorderActive = "--colorPaletteGreenBorderActive";
 
-export declare const colorPaletteGreenForeground1: CSSDesignToken<string>;
+export declare const colorPaletteGreenForeground1 = "--colorPaletteGreenForeground1";
 
-export declare const colorPaletteGreenForeground2: CSSDesignToken<string>;
+export declare const colorPaletteGreenForeground2 = "--colorPaletteGreenForeground2";
 
-export declare const colorPaletteGreenForeground3: CSSDesignToken<string>;
+export declare const colorPaletteGreenForeground3 = "--colorPaletteGreenForeground3";
 
-export declare const colorPaletteGreenForegroundInverted: CSSDesignToken<string>;
+export declare const colorPaletteGreenForegroundInverted = "--colorPaletteGreenForegroundInverted";
 
-export declare const colorPaletteLavenderBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLavenderBackground2 = "--colorPaletteLavenderBackground2";
 
-export declare const colorPaletteLavenderBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLavenderBorderActive = "--colorPaletteLavenderBorderActive";
 
-export declare const colorPaletteLavenderForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLavenderForeground2 = "--colorPaletteLavenderForeground2";
 
-export declare const colorPaletteLightGreenBackground1: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBackground1 = "--colorPaletteLightGreenBackground1";
 
-export declare const colorPaletteLightGreenBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBackground2 = "--colorPaletteLightGreenBackground2";
 
-export declare const colorPaletteLightGreenBackground3: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBackground3 = "--colorPaletteLightGreenBackground3";
 
-export declare const colorPaletteLightGreenBorder1: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBorder1 = "--colorPaletteLightGreenBorder1";
 
-export declare const colorPaletteLightGreenBorder2: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBorder2 = "--colorPaletteLightGreenBorder2";
 
-export declare const colorPaletteLightGreenBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenBorderActive = "--colorPaletteLightGreenBorderActive";
 
-export declare const colorPaletteLightGreenForeground1: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenForeground1 = "--colorPaletteLightGreenForeground1";
 
-export declare const colorPaletteLightGreenForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenForeground2 = "--colorPaletteLightGreenForeground2";
 
-export declare const colorPaletteLightGreenForeground3: CSSDesignToken<string>;
+export declare const colorPaletteLightGreenForeground3 = "--colorPaletteLightGreenForeground3";
 
-export declare const colorPaletteLightTealBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLightTealBackground2 = "--colorPaletteLightTealBackground2";
 
-export declare const colorPaletteLightTealBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLightTealBorderActive = "--colorPaletteLightTealBorderActive";
 
-export declare const colorPaletteLightTealForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLightTealForeground2 = "--colorPaletteLightTealForeground2";
 
-export declare const colorPaletteLilacBackground2: CSSDesignToken<string>;
+export declare const colorPaletteLilacBackground2 = "--colorPaletteLilacBackground2";
 
-export declare const colorPaletteLilacBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteLilacBorderActive = "--colorPaletteLilacBorderActive";
 
-export declare const colorPaletteLilacForeground2: CSSDesignToken<string>;
+export declare const colorPaletteLilacForeground2 = "--colorPaletteLilacForeground2";
 
-export declare const colorPaletteMagentaBackground2: CSSDesignToken<string>;
+export declare const colorPaletteMagentaBackground2 = "--colorPaletteMagentaBackground2";
 
-export declare const colorPaletteMagentaBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteMagentaBorderActive = "--colorPaletteMagentaBorderActive";
 
-export declare const colorPaletteMagentaForeground2: CSSDesignToken<string>;
+export declare const colorPaletteMagentaForeground2 = "--colorPaletteMagentaForeground2";
 
-export declare const colorPaletteMarigoldBackground1: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBackground1 = "--colorPaletteMarigoldBackground1";
 
-export declare const colorPaletteMarigoldBackground2: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBackground2 = "--colorPaletteMarigoldBackground2";
 
-export declare const colorPaletteMarigoldBackground3: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBackground3 = "--colorPaletteMarigoldBackground3";
 
-export declare const colorPaletteMarigoldBorder1: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBorder1 = "--colorPaletteMarigoldBorder1";
 
-export declare const colorPaletteMarigoldBorder2: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBorder2 = "--colorPaletteMarigoldBorder2";
 
-export declare const colorPaletteMarigoldBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldBorderActive = "--colorPaletteMarigoldBorderActive";
 
-export declare const colorPaletteMarigoldForeground1: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldForeground1 = "--colorPaletteMarigoldForeground1";
 
-export declare const colorPaletteMarigoldForeground2: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldForeground2 = "--colorPaletteMarigoldForeground2";
 
-export declare const colorPaletteMarigoldForeground3: CSSDesignToken<string>;
+export declare const colorPaletteMarigoldForeground3 = "--colorPaletteMarigoldForeground3";
 
-export declare const colorPaletteMinkBackground2: CSSDesignToken<string>;
+export declare const colorPaletteMinkBackground2 = "--colorPaletteMinkBackground2";
 
-export declare const colorPaletteMinkBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteMinkBorderActive = "--colorPaletteMinkBorderActive";
 
-export declare const colorPaletteMinkForeground2: CSSDesignToken<string>;
+export declare const colorPaletteMinkForeground2 = "--colorPaletteMinkForeground2";
 
-export declare const colorPaletteNavyBackground2: CSSDesignToken<string>;
+export declare const colorPaletteNavyBackground2 = "--colorPaletteNavyBackground2";
 
-export declare const colorPaletteNavyBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteNavyBorderActive = "--colorPaletteNavyBorderActive";
 
-export declare const colorPaletteNavyForeground2: CSSDesignToken<string>;
+export declare const colorPaletteNavyForeground2 = "--colorPaletteNavyForeground2";
 
-export declare const colorPalettePeachBackground2: CSSDesignToken<string>;
+export declare const colorPalettePeachBackground2 = "--colorPalettePeachBackground2";
 
-export declare const colorPalettePeachBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePeachBorderActive = "--colorPalettePeachBorderActive";
 
-export declare const colorPalettePeachForeground2: CSSDesignToken<string>;
+export declare const colorPalettePeachForeground2 = "--colorPalettePeachForeground2";
 
-export declare const colorPalettePinkBackground2: CSSDesignToken<string>;
+export declare const colorPalettePinkBackground2 = "--colorPalettePinkBackground2";
 
-export declare const colorPalettePinkBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePinkBorderActive = "--colorPalettePinkBorderActive";
 
-export declare const colorPalettePinkForeground2: CSSDesignToken<string>;
+export declare const colorPalettePinkForeground2 = "--colorPalettePinkForeground2";
 
-export declare const colorPalettePlatinumBackground2: CSSDesignToken<string>;
+export declare const colorPalettePlatinumBackground2 = "--colorPalettePlatinumBackground2";
 
-export declare const colorPalettePlatinumBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePlatinumBorderActive = "--colorPalettePlatinumBorderActive";
 
-export declare const colorPalettePlatinumForeground2: CSSDesignToken<string>;
+export declare const colorPalettePlatinumForeground2 = "--colorPalettePlatinumForeground2";
 
-export declare const colorPalettePlumBackground2: CSSDesignToken<string>;
+export declare const colorPalettePlumBackground2 = "--colorPalettePlumBackground2";
 
-export declare const colorPalettePlumBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePlumBorderActive = "--colorPalettePlumBorderActive";
 
-export declare const colorPalettePlumForeground2: CSSDesignToken<string>;
+export declare const colorPalettePlumForeground2 = "--colorPalettePlumForeground2";
 
-export declare const colorPalettePumpkinBackground2: CSSDesignToken<string>;
+export declare const colorPalettePumpkinBackground2 = "--colorPalettePumpkinBackground2";
 
-export declare const colorPalettePumpkinBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePumpkinBorderActive = "--colorPalettePumpkinBorderActive";
 
-export declare const colorPalettePumpkinForeground2: CSSDesignToken<string>;
+export declare const colorPalettePumpkinForeground2 = "--colorPalettePumpkinForeground2";
 
-export declare const colorPalettePurpleBackground2: CSSDesignToken<string>;
+export declare const colorPalettePurpleBackground2 = "--colorPalettePurpleBackground2";
 
-export declare const colorPalettePurpleBorderActive: CSSDesignToken<string>;
+export declare const colorPalettePurpleBorderActive = "--colorPalettePurpleBorderActive";
 
-export declare const colorPalettePurpleForeground2: CSSDesignToken<string>;
+export declare const colorPalettePurpleForeground2 = "--colorPalettePurpleForeground2";
 
-export declare const colorPaletteRedBackground1: CSSDesignToken<string>;
+export declare const colorPaletteRedBackground1 = "--colorPaletteRedBackground1";
 
-export declare const colorPaletteRedBackground2: CSSDesignToken<string>;
+export declare const colorPaletteRedBackground2 = "--colorPaletteRedBackground2";
 
-export declare const colorPaletteRedBackground3: CSSDesignToken<string>;
+export declare const colorPaletteRedBackground3 = "--colorPaletteRedBackground3";
 
-export declare const colorPaletteRedBorder1: CSSDesignToken<string>;
+export declare const colorPaletteRedBorder1 = "--colorPaletteRedBorder1";
 
-export declare const colorPaletteRedBorder2: CSSDesignToken<string>;
+export declare const colorPaletteRedBorder2 = "--colorPaletteRedBorder2";
 
-export declare const colorPaletteRedBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteRedBorderActive = "--colorPaletteRedBorderActive";
 
-export declare const colorPaletteRedForeground1: CSSDesignToken<string>;
+export declare const colorPaletteRedForeground1 = "--colorPaletteRedForeground1";
 
-export declare const colorPaletteRedForeground2: CSSDesignToken<string>;
+export declare const colorPaletteRedForeground2 = "--colorPaletteRedForeground2";
 
-export declare const colorPaletteRedForeground3: CSSDesignToken<string>;
+export declare const colorPaletteRedForeground3 = "--colorPaletteRedForeground3";
 
-export declare const colorPaletteRedForegroundInverted: CSSDesignToken<string>;
+export declare const colorPaletteRedForegroundInverted = "--colorPaletteRedForegroundInverted";
 
-export declare const colorPaletteRoyalBlueBackground2: CSSDesignToken<string>;
+export declare const colorPaletteRoyalBlueBackground2 = "--colorPaletteRoyalBlueBackground2";
 
-export declare const colorPaletteRoyalBlueBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteRoyalBlueBorderActive = "--colorPaletteRoyalBlueBorderActive";
 
-export declare const colorPaletteRoyalBlueForeground2: CSSDesignToken<string>;
+export declare const colorPaletteRoyalBlueForeground2 = "--colorPaletteRoyalBlueForeground2";
 
-export declare const colorPaletteSeafoamBackground2: CSSDesignToken<string>;
+export declare const colorPaletteSeafoamBackground2 = "--colorPaletteSeafoamBackground2";
 
-export declare const colorPaletteSeafoamBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteSeafoamBorderActive = "--colorPaletteSeafoamBorderActive";
 
-export declare const colorPaletteSeafoamForeground2: CSSDesignToken<string>;
+export declare const colorPaletteSeafoamForeground2 = "--colorPaletteSeafoamForeground2";
 
-export declare const colorPaletteSteelBackground2: CSSDesignToken<string>;
+export declare const colorPaletteSteelBackground2 = "--colorPaletteSteelBackground2";
 
-export declare const colorPaletteSteelBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteSteelBorderActive = "--colorPaletteSteelBorderActive";
 
-export declare const colorPaletteSteelForeground2: CSSDesignToken<string>;
+export declare const colorPaletteSteelForeground2 = "--colorPaletteSteelForeground2";
 
-export declare const colorPaletteTealBackground2: CSSDesignToken<string>;
+export declare const colorPaletteTealBackground2 = "--colorPaletteTealBackground2";
 
-export declare const colorPaletteTealBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteTealBorderActive = "--colorPaletteTealBorderActive";
 
-export declare const colorPaletteTealForeground2: CSSDesignToken<string>;
+export declare const colorPaletteTealForeground2 = "--colorPaletteTealForeground2";
 
-export declare const colorPaletteYellowBackground1: CSSDesignToken<string>;
+export declare const colorPaletteYellowBackground1 = "--colorPaletteYellowBackground1";
 
-export declare const colorPaletteYellowBackground2: CSSDesignToken<string>;
+export declare const colorPaletteYellowBackground2 = "--colorPaletteYellowBackground2";
 
-export declare const colorPaletteYellowBackground3: CSSDesignToken<string>;
+export declare const colorPaletteYellowBackground3 = "--colorPaletteYellowBackground3";
 
-export declare const colorPaletteYellowBorder1: CSSDesignToken<string>;
+export declare const colorPaletteYellowBorder1 = "--colorPaletteYellowBorder1";
 
-export declare const colorPaletteYellowBorder2: CSSDesignToken<string>;
+export declare const colorPaletteYellowBorder2 = "--colorPaletteYellowBorder2";
 
-export declare const colorPaletteYellowBorderActive: CSSDesignToken<string>;
+export declare const colorPaletteYellowBorderActive = "--colorPaletteYellowBorderActive";
 
-export declare const colorPaletteYellowForeground1: CSSDesignToken<string>;
+export declare const colorPaletteYellowForeground1 = "--colorPaletteYellowForeground1";
 
-export declare const colorPaletteYellowForeground2: CSSDesignToken<string>;
+export declare const colorPaletteYellowForeground2 = "--colorPaletteYellowForeground2";
 
-export declare const colorPaletteYellowForeground3: CSSDesignToken<string>;
+export declare const colorPaletteYellowForeground3 = "--colorPaletteYellowForeground3";
 
-export declare const colorPaletteYellowForegroundInverted: CSSDesignToken<string>;
+export declare const colorPaletteYellowForegroundInverted = "--colorPaletteYellowForegroundInverted";
 
-export declare const colorScrollbarOverlay: CSSDesignToken<string>;
+export declare const colorScrollbarOverlay = "--colorScrollbarOverlay";
 
-export declare const colorStrokeFocus1: CSSDesignToken<string>;
+export declare const colorStrokeFocus1 = "--colorStrokeFocus1";
 
-export declare const colorStrokeFocus2: CSSDesignToken<string>;
+export declare const colorStrokeFocus2 = "--colorStrokeFocus2";
 
-export declare const colorSubtleBackground: CSSDesignToken<string>;
+export declare const colorSubtleBackground = "--colorSubtleBackground";
 
-export declare const colorSubtleBackgroundHover: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundHover = "--colorSubtleBackgroundHover";
 
-export declare const colorSubtleBackgroundInverted: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInverted = "--colorSubtleBackgroundInverted";
 
-export declare const colorSubtleBackgroundInvertedHover: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInvertedHover = "--colorSubtleBackgroundInvertedHover";
 
-export declare const colorSubtleBackgroundInvertedPressed: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInvertedPressed = "--colorSubtleBackgroundInvertedPressed";
 
-export declare const colorSubtleBackgroundInvertedSelected: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundInvertedSelected = "--colorSubtleBackgroundInvertedSelected";
 
-export declare const colorSubtleBackgroundLightAlphaHover: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundLightAlphaHover = "--colorSubtleBackgroundLightAlphaHover";
 
-export declare const colorSubtleBackgroundLightAlphaPressed: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundLightAlphaPressed = "--colorSubtleBackgroundLightAlphaPressed";
 
-export declare const colorSubtleBackgroundLightAlphaSelected: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundLightAlphaSelected = "--colorSubtleBackgroundLightAlphaSelected";
 
-export declare const colorSubtleBackgroundPressed: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundPressed = "--colorSubtleBackgroundPressed";
 
-export declare const colorSubtleBackgroundSelected: CSSDesignToken<string>;
+export declare const colorSubtleBackgroundSelected = "--colorSubtleBackgroundSelected";
 
-export declare const colorTransparentBackground: CSSDesignToken<string>;
+export declare const colorTransparentBackground = "--colorTransparentBackground";
 
-export declare const colorTransparentBackgroundHover: CSSDesignToken<string>;
+export declare const colorTransparentBackgroundHover = "--colorTransparentBackgroundHover";
 
-export declare const colorTransparentBackgroundPressed: CSSDesignToken<string>;
+export declare const colorTransparentBackgroundPressed = "--colorTransparentBackgroundPressed";
 
-export declare const colorTransparentBackgroundSelected: CSSDesignToken<string>;
+export declare const colorTransparentBackgroundSelected = "--colorTransparentBackgroundSelected";
 
-export declare const colorTransparentStroke: CSSDesignToken<string>;
+export declare const colorTransparentStroke = "--colorTransparentStroke";
 
-export declare const colorTransparentStrokeDisabled: CSSDesignToken<string>;
+export declare const colorTransparentStrokeDisabled = "--colorTransparentStrokeDisabled";
 
-export declare const colorTransparentStrokeInteractive: CSSDesignToken<string>;
+export declare const colorTransparentStrokeInteractive = "--colorTransparentStrokeInteractive";
 
 /**
  * The base class used for constructing a fluent-compound-button custom element
@@ -1766,23 +1765,245 @@ export declare const CounterBadgeStyles: ElementStyles;
  */
 export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
-export declare const curveAccelerateMax: CSSDesignToken<string>;
+export declare const curveAccelerateMax = "--curveAccelerateMax";
 
-export declare const curveAccelerateMid: CSSDesignToken<string>;
+export declare const curveAccelerateMid = "--curveAccelerateMid";
 
-export declare const curveAccelerateMin: CSSDesignToken<string>;
+export declare const curveAccelerateMin = "--curveAccelerateMin";
 
-export declare const curveDecelerateMax: CSSDesignToken<string>;
+export declare const curveDecelerateMax = "--curveDecelerateMax";
 
-export declare const curveDecelerateMid: CSSDesignToken<string>;
+export declare const curveDecelerateMid = "--curveDecelerateMid";
 
-export declare const curveDecelerateMin: CSSDesignToken<string>;
+export declare const curveDecelerateMin = "--curveDecelerateMin";
 
-export declare const curveEasyEase: CSSDesignToken<string>;
+export declare const curveEasyEase = "--curveEasyEase";
 
-export declare const curveEasyEaseMax: CSSDesignToken<string>;
+export declare const curveEasyEaseMax = "--curveEasyEaseMax";
 
-export declare const curveLinear: CSSDesignToken<string>;
+export declare const curveLinear = "--curveLinear";
+
+/**
+ * Dialog component that extends the FASTElement class.
+ *
+ * @public
+ * @extends FASTElement
+ */
+export declare class Dialog extends FASTElement {
+    /**
+     * @private
+     * Indicates whether focus is being trapped within the dialog
+     */
+    private isTrappingFocus;
+    /**
+     * @public
+     * Lifecycle method called when the element is connected to the DOM
+     */
+    connectedCallback(): void;
+    /**
+     * @public
+     * Lifecycle method called when the element is disconnected from the DOM
+     */
+    disconnectedCallback(): void;
+    /**
+     * @public
+     * The dialog element
+     */
+    dialog: HTMLDialogElement;
+    /**
+     * @public
+     * The title action elements
+     */
+    titleAction: HTMLElement[];
+    /**
+     * @public
+     * The default title action button
+     */
+    defaultTitleAction?: Button;
+    /**
+     * @public
+     * The ID of the element that describes the dialog
+     */
+    ariaDescribedby?: string;
+    /**
+     * @public
+     * The ID of the element that labels the dialog
+     */
+    ariaLabelledby?: string;
+    /**
+     * @public
+     * The type of the dialog modal
+     */
+    modalType: DialogModalType;
+    /**
+     * @public
+     * Indicates whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * @public
+     * Indicates whether the dialog has a title action
+     */
+    noTitleAction: boolean;
+    /**
+     * @private
+     * Indicates whether focus should be trapped within the dialog
+     */
+    private trapFocus;
+    /**
+     * @public
+     * Method called when the 'open' attribute changes
+     */
+    openChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * @public
+     * Method called when the 'modalType' attribute changes
+     */
+    modalTypeChanged(oldValue: DialogModalType, newValue: DialogModalType): void;
+    /**
+     * @public
+     * Method to set the component's state based on its attributes
+     */
+    setComponent(): void;
+    /**
+     * @public
+     * Method to emit an event when the dialog's open state changes
+     * @param dismissed - Indicates whether the dialog was dismissed
+     */
+    onOpenChangeEvent: (dismissed?: boolean) => void;
+    /**
+     * @public
+     * Method to show the dialog
+     */
+    show(): void;
+    /**
+     * @public
+     * Method to hide the dialog
+     * @param dismissed - Indicates whether the dialog was dismissed
+     */
+    hide(dismissed?: boolean): void;
+    /**
+     * @public
+     * Method to dismiss the dialog
+     */
+    dismiss(): void;
+    /**
+     * @public
+     * Handles click events on the dialog
+     * @param event - The click event
+     * @returns boolean
+     */
+    handleClick(event: Event): boolean;
+    /**
+     * @public
+     * Handles keydown events on the dialog
+     * @param e - The keydown event
+     * @returns boolean | void
+     */
+    handleKeydown: (e: KeyboardEvent) => boolean | void;
+    /**
+     * @private
+     * Handles keydown events on the document
+     * @param e - The keydown event
+     */
+    private handleDocumentKeydown;
+    /**
+     * @private
+     * Handles tab keydown events
+     * @param e - The keydown event
+     */
+    private handleTabKeyDown;
+    /**
+     * @private
+     * Gets the bounds of the tab queue
+     * @returns (HTMLElement | SVGElement)[]
+     */
+    private getTabQueueBounds;
+    /**
+     * @private
+     * Focuses the first element in the tab queue
+     */
+    private focusFirstElement;
+    /**
+     * @private
+     * Determines if focus should be forced
+     * @param currentFocusElement - The currently focused element
+     * @returns boolean
+     */
+    private shouldForceFocus;
+    /**
+     * @private
+     * Determines if focus should be trapped
+     * @returns boolean
+     */
+    private shouldTrapFocus;
+    /**
+     * @private
+     * Handles focus events on the document
+     * @param e - The focus event
+     */
+    private handleDocumentFocus;
+    /**
+     * @private
+     * Updates the state of focus trapping
+     * @param shouldTrapFocusOverride - Optional override for whether focus should be trapped
+     */
+    private updateTrapFocus;
+    /**
+     * @private
+     * Reduces the list of tabbable items
+     * @param elements - The current list of elements
+     * @param element - The element to consider adding to the list
+     * @returns HTMLElement[]
+     */
+    private static reduceTabbableItems;
+    /**
+     * @private
+     * Determines if an element is a focusable FASTElement
+     * @param element - The element to check
+     * @returns boolean
+     */
+    private static isFocusableFastElement;
+    /**
+     * @private
+     * Determines if an element has a tabbable shadow
+     * @param element - The element to check
+     * @returns boolean
+     */
+    private static hasTabbableShadow;
+}
+
+/**
+ * The Fluent Dialog Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-dialog\>
+ */
+export declare const DialogDefinition: FASTElementDefinition<typeof Dialog>;
+
+/**
+ * Dialog modal type
+ * @public
+ */
+declare const DialogModalType: {
+    readonly modal: "modal";
+    readonly nonModal: "non-modal";
+    readonly alert: "alert";
+};
+
+declare type DialogModalType = ValuesOf<typeof DialogModalType>;
+
+/** Dialog styles
+ * @public
+ */
+export declare const DialogStyles: ElementStyles;
+
+/**
+ * Template for the Dialog component
+ * @public
+ */
+export declare const DialogTemplate: ElementViewTemplate<Dialog>;
 
 /**
  * @class Divider component
@@ -1871,19 +2092,19 @@ export declare const DividerStyles: ElementStyles;
  */
 export declare const DividerTemplate: ElementViewTemplate<Divider>;
 
-export declare const durationFast: CSSDesignToken<string>;
+export declare const durationFast = "--durationFast";
 
-export declare const durationFaster: CSSDesignToken<string>;
+export declare const durationFaster = "--durationFaster";
 
-export declare const durationNormal: CSSDesignToken<string>;
+export declare const durationNormal = "--durationNormal";
 
-export declare const durationSlow: CSSDesignToken<string>;
+export declare const durationSlow = "--durationSlow";
 
-export declare const durationSlower: CSSDesignToken<string>;
+export declare const durationSlower = "--durationSlower";
 
-export declare const durationUltraFast: CSSDesignToken<string>;
+export declare const durationUltraFast = "--durationUltraFast";
 
-export declare const durationUltraSlow: CSSDesignToken<string>;
+export declare const durationUltraSlow = "--durationUltraSlow";
 
 export declare const FluentDesignSystem: Readonly<{
     prefix: "fluent";
@@ -1891,39 +2112,39 @@ export declare const FluentDesignSystem: Readonly<{
     registry: CustomElementRegistry;
 }>;
 
-export declare const fontFamilyBase: CSSDesignToken<string>;
+export declare const fontFamilyBase = "--fontFamilyBase";
 
-export declare const fontFamilyMonospace: CSSDesignToken<string>;
+export declare const fontFamilyMonospace = "--fontFamilyMonospace";
 
-export declare const fontFamilyNumeric: CSSDesignToken<string>;
+export declare const fontFamilyNumeric = "--fontFamilyNumeric";
 
-export declare const fontSizeBase100: CSSDesignToken<string>;
+export declare const fontSizeBase100 = "--fontSizeBase100";
 
-export declare const fontSizeBase200: CSSDesignToken<string>;
+export declare const fontSizeBase200 = "--fontSizeBase200";
 
-export declare const fontSizeBase300: CSSDesignToken<string>;
+export declare const fontSizeBase300 = "--fontSizeBase300";
 
-export declare const fontSizeBase400: CSSDesignToken<string>;
+export declare const fontSizeBase400 = "--fontSizeBase400";
 
-export declare const fontSizeBase500: CSSDesignToken<string>;
+export declare const fontSizeBase500 = "--fontSizeBase500";
 
-export declare const fontSizeBase600: CSSDesignToken<string>;
+export declare const fontSizeBase600 = "--fontSizeBase600";
 
-export declare const fontSizeHero1000: CSSDesignToken<string>;
+export declare const fontSizeHero1000 = "--fontSizeHero1000";
 
-export declare const fontSizeHero700: CSSDesignToken<string>;
+export declare const fontSizeHero700 = "--fontSizeHero700";
 
-export declare const fontSizeHero800: CSSDesignToken<string>;
+export declare const fontSizeHero800 = "--fontSizeHero800";
 
-export declare const fontSizeHero900: CSSDesignToken<string>;
+export declare const fontSizeHero900 = "--fontSizeHero900";
 
-export declare const fontWeightBold: CSSDesignToken<string>;
+export declare const fontWeightBold = "--fontWeightBold";
 
-export declare const fontWeightMedium: CSSDesignToken<string>;
+export declare const fontWeightMedium = "--fontWeightMedium";
 
-export declare const fontWeightRegular: CSSDesignToken<string>;
+export declare const fontWeightRegular = "--fontWeightRegular";
 
-export declare const fontWeightSemibold: CSSDesignToken<string>;
+export declare const fontWeightSemibold = "--fontWeightSemibold";
 
 /**
  * The base class used for constucting a fluent image custom element
@@ -2111,25 +2332,25 @@ declare const LabelWeight: {
  */
 declare type LabelWeight = ValuesOf<typeof LabelWeight>;
 
-export declare const lineHeightBase100: CSSDesignToken<string>;
+export declare const lineHeightBase100 = "--lineHeightBase100";
 
-export declare const lineHeightBase200: CSSDesignToken<string>;
+export declare const lineHeightBase200 = "--lineHeightBase200";
 
-export declare const lineHeightBase300: CSSDesignToken<string>;
+export declare const lineHeightBase300 = "--lineHeightBase300";
 
-export declare const lineHeightBase400: CSSDesignToken<string>;
+export declare const lineHeightBase400 = "--lineHeightBase400";
 
-export declare const lineHeightBase500: CSSDesignToken<string>;
+export declare const lineHeightBase500 = "--lineHeightBase500";
 
-export declare const lineHeightBase600: CSSDesignToken<string>;
+export declare const lineHeightBase600 = "--lineHeightBase600";
 
-export declare const lineHeightHero1000: CSSDesignToken<string>;
+export declare const lineHeightHero1000 = "--lineHeightHero1000";
 
-export declare const lineHeightHero700: CSSDesignToken<string>;
+export declare const lineHeightHero700 = "--lineHeightHero700";
 
-export declare const lineHeightHero800: CSSDesignToken<string>;
+export declare const lineHeightHero800 = "--lineHeightHero800";
 
-export declare const lineHeightHero900: CSSDesignToken<string>;
+export declare const lineHeightHero900 = "--lineHeightHero900";
 
 /**
  * The Menu class represents a menu component.
@@ -2626,31 +2847,31 @@ export declare const RadioTemplate: ElementViewTemplate<Radio>;
  */
 export declare const setTheme: (theme: Theme) => void;
 
-export declare const setThemeFor: (element: FASTElement, theme: Theme) => void;
+export declare const setThemeFor: (element: HTMLElement, theme: Theme) => void;
 
-export declare const shadow16: CSSDesignToken<string>;
+export declare const shadow16 = "--shadow16";
 
-export declare const shadow16Brand: CSSDesignToken<string>;
+export declare const shadow16Brand = "--shadow16Brand";
 
-export declare const shadow2: CSSDesignToken<string>;
+export declare const shadow2 = "--shadow2";
 
-export declare const shadow28: CSSDesignToken<string>;
+export declare const shadow28 = "--shadow28";
 
-export declare const shadow28Brand: CSSDesignToken<string>;
+export declare const shadow28Brand = "--shadow28Brand";
 
-export declare const shadow2Brand: CSSDesignToken<string>;
+export declare const shadow2Brand = "--shadow2Brand";
 
-export declare const shadow4: CSSDesignToken<string>;
+export declare const shadow4 = "--shadow4";
 
-export declare const shadow4Brand: CSSDesignToken<string>;
+export declare const shadow4Brand = "--shadow4Brand";
 
-export declare const shadow64: CSSDesignToken<string>;
+export declare const shadow64 = "--shadow64";
 
-export declare const shadow64Brand: CSSDesignToken<string>;
+export declare const shadow64Brand = "--shadow64Brand";
 
-export declare const shadow8: CSSDesignToken<string>;
+export declare const shadow8 = "--shadow8";
 
-export declare const shadow8Brand: CSSDesignToken<string>;
+export declare const shadow8Brand = "--shadow8Brand";
 
 /**
  * The base class used for constructing a fluent-slider custom element
@@ -2709,49 +2930,49 @@ export declare const SliderStyles: ElementStyles;
 
 export declare const SliderTemplate: ElementViewTemplate<FASTSlider>;
 
-export declare const spacingHorizontalL: CSSDesignToken<string>;
+export declare const spacingHorizontalL = "--spacingHorizontalL";
 
-export declare const spacingHorizontalM: CSSDesignToken<string>;
+export declare const spacingHorizontalM = "--spacingHorizontalM";
 
-export declare const spacingHorizontalMNudge: CSSDesignToken<string>;
+export declare const spacingHorizontalMNudge = "--spacingHorizontalMNudge";
 
-export declare const spacingHorizontalNone: CSSDesignToken<string>;
+export declare const spacingHorizontalNone = "--spacingHorizontalNone";
 
-export declare const spacingHorizontalS: CSSDesignToken<string>;
+export declare const spacingHorizontalS = "--spacingHorizontalS";
 
-export declare const spacingHorizontalSNudge: CSSDesignToken<string>;
+export declare const spacingHorizontalSNudge = "--spacingHorizontalSNudge";
 
-export declare const spacingHorizontalXL: CSSDesignToken<string>;
+export declare const spacingHorizontalXL = "--spacingHorizontalXL";
 
-export declare const spacingHorizontalXS: CSSDesignToken<string>;
+export declare const spacingHorizontalXS = "--spacingHorizontalXS";
 
-export declare const spacingHorizontalXXL: CSSDesignToken<string>;
+export declare const spacingHorizontalXXL = "--spacingHorizontalXXL";
 
-export declare const spacingHorizontalXXS: CSSDesignToken<string>;
+export declare const spacingHorizontalXXS = "--spacingHorizontalXXS";
 
-export declare const spacingHorizontalXXXL: CSSDesignToken<string>;
+export declare const spacingHorizontalXXXL = "--spacingHorizontalXXXL";
 
-export declare const spacingVerticalL: CSSDesignToken<string>;
+export declare const spacingVerticalL = "--spacingVerticalL";
 
-export declare const spacingVerticalM: CSSDesignToken<string>;
+export declare const spacingVerticalM = "--spacingVerticalM";
 
-export declare const spacingVerticalMNudge: CSSDesignToken<string>;
+export declare const spacingVerticalMNudge = "--spacingVerticalMNudge";
 
-export declare const spacingVerticalNone: CSSDesignToken<string>;
+export declare const spacingVerticalNone = "--spacingVerticalNone";
 
-export declare const spacingVerticalS: CSSDesignToken<string>;
+export declare const spacingVerticalS = "--spacingVerticalS";
 
-export declare const spacingVerticalSNudge: CSSDesignToken<string>;
+export declare const spacingVerticalSNudge = "--spacingVerticalSNudge";
 
-export declare const spacingVerticalXL: CSSDesignToken<string>;
+export declare const spacingVerticalXL = "--spacingVerticalXL";
 
-export declare const spacingVerticalXS: CSSDesignToken<string>;
+export declare const spacingVerticalXS = "--spacingVerticalXS";
 
-export declare const spacingVerticalXXL: CSSDesignToken<string>;
+export declare const spacingVerticalXXL = "--spacingVerticalXXL";
 
-export declare const spacingVerticalXXS: CSSDesignToken<string>;
+export declare const spacingVerticalXXS = "--spacingVerticalXXS";
 
-export declare const spacingVerticalXXXL: CSSDesignToken<string>;
+export declare const spacingVerticalXXXL = "--spacingVerticalXXXL";
 
 /**
  * The base class used for constructing a fluent-spinner custom element
@@ -2827,13 +3048,13 @@ export declare const SpinnerStyles: ElementStyles;
 
 export declare const SpinnerTemplate: ElementViewTemplate<Spinner>;
 
-export declare const strokeWidthThick: CSSDesignToken<string>;
+export declare const strokeWidthThick = "--strokeWidthThick";
 
-export declare const strokeWidthThicker: CSSDesignToken<string>;
+export declare const strokeWidthThicker = "--strokeWidthThicker";
 
-export declare const strokeWidthThickest: CSSDesignToken<string>;
+export declare const strokeWidthThickest = "--strokeWidthThickest";
 
-export declare const strokeWidthThin: CSSDesignToken<string>;
+export declare const strokeWidthThin = "--strokeWidthThin";
 
 declare const styles: ElementStyles;
 export { styles as ButtonStyles }