diff --git a/change/@fluentui-web-components-258db20e-84e5-451e-a289-97726ba08b24.json b/change/@fluentui-web-components-258db20e-84e5-451e-a289-97726ba08b24.json
new file mode 100644
index 0000000000000..2fde1657e7630
--- /dev/null
+++ b/change/@fluentui-web-components-258db20e-84e5-451e-a289-97726ba08b24.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: remove JS design token implementation in favor of platform css variables",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index f76ba722a496d..042a9ff09a728 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -6,7 +6,6 @@
 
 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';
@@ -390,22 +389,22 @@ export const BadgeStyles: ElementStyles;
 export const BadgeTemplate: ElementViewTemplate<Badge>;
 
 // @public (undocumented)
-export const borderRadiusCircular: CSSDesignToken<string>;
+export const borderRadiusCircular = "--borderRadiusCircular";
 
 // @public (undocumented)
-export const borderRadiusLarge: CSSDesignToken<string>;
+export const borderRadiusLarge = "--borderRadiusLarge";
 
 // @public (undocumented)
-export const borderRadiusMedium: CSSDesignToken<string>;
+export const borderRadiusMedium = "--borderRadiusMedium";
 
 // @public (undocumented)
-export const borderRadiusNone: CSSDesignToken<string>;
+export const borderRadiusNone = "--borderRadiusNone";
 
 // @public (undocumented)
-export const borderRadiusSmall: CSSDesignToken<string>;
+export const borderRadiusSmall = "--borderRadiusSmall";
 
 // @public (undocumented)
-export const borderRadiusXLarge: CSSDesignToken<string>;
+export const borderRadiusXLarge = "--borderRadiusXLarge";
 
 // @public
 export class Button extends FASTButton {
@@ -509,895 +508,895 @@ export const CheckboxStyles: ElementStyles;
 export const CheckboxTemplate: ElementViewTemplate<Checkbox>;
 
 // @public (undocumented)
-export const colorBackgroundOverlay: CSSDesignToken<string>;
+export const colorBackgroundOverlay = "--colorBackgroundOverlay";
 
 // @public (undocumented)
-export const colorBrandBackground: CSSDesignToken<string>;
+export const colorBrandBackground = "--colorBrandBackground";
 
 // @public (undocumented)
-export const colorBrandBackground2: CSSDesignToken<string>;
+export const colorBrandBackground2 = "--colorBrandBackground2";
 
 // @public (undocumented)
-export const colorBrandBackgroundHover: CSSDesignToken<string>;
+export const colorBrandBackgroundHover = "--colorBrandBackgroundHover";
 
 // @public (undocumented)
-export const colorBrandBackgroundInverted: CSSDesignToken<string>;
+export const colorBrandBackgroundInverted = "--colorBrandBackgroundInverted";
 
 // @public (undocumented)
-export const colorBrandBackgroundInvertedHover: CSSDesignToken<string>;
+export const colorBrandBackgroundInvertedHover = "--colorBrandBackgroundInvertedHover";
 
 // @public (undocumented)
-export const colorBrandBackgroundInvertedPressed: CSSDesignToken<string>;
+export const colorBrandBackgroundInvertedPressed = "--colorBrandBackgroundInvertedPressed";
 
 // @public (undocumented)
-export const colorBrandBackgroundInvertedSelected: CSSDesignToken<string>;
+export const colorBrandBackgroundInvertedSelected = "--colorBrandBackgroundInvertedSelected";
 
 // @public (undocumented)
-export const colorBrandBackgroundPressed: CSSDesignToken<string>;
+export const colorBrandBackgroundPressed = "--colorBrandBackgroundPressed";
 
 // @public (undocumented)
-export const colorBrandBackgroundSelected: CSSDesignToken<string>;
+export const colorBrandBackgroundSelected = "--colorBrandBackgroundSelected";
 
 // @public (undocumented)
-export const colorBrandBackgroundStatic: CSSDesignToken<string>;
+export const colorBrandBackgroundStatic = "--colorBrandBackgroundStatic";
 
 // @public (undocumented)
-export const colorBrandForeground1: CSSDesignToken<string>;
+export const colorBrandForeground1 = "--colorBrandForeground1";
 
 // @public (undocumented)
-export const colorBrandForeground2: CSSDesignToken<string>;
+export const colorBrandForeground2 = "--colorBrandForeground2";
 
 // @public (undocumented)
-export const colorBrandForegroundInverted: CSSDesignToken<string>;
+export const colorBrandForegroundInverted = "--colorBrandForegroundInverted";
 
 // @public (undocumented)
-export const colorBrandForegroundInvertedHover: CSSDesignToken<string>;
+export const colorBrandForegroundInvertedHover = "--colorBrandForegroundInvertedHover";
 
 // @public (undocumented)
-export const colorBrandForegroundInvertedPressed: CSSDesignToken<string>;
+export const colorBrandForegroundInvertedPressed = "--colorBrandForegroundInvertedPressed";
 
 // @public (undocumented)
-export const colorBrandForegroundLink: CSSDesignToken<string>;
+export const colorBrandForegroundLink = "--colorBrandForegroundLink";
 
 // @public (undocumented)
-export const colorBrandForegroundLinkHover: CSSDesignToken<string>;
+export const colorBrandForegroundLinkHover = "--colorBrandForegroundLinkHover";
 
 // @public (undocumented)
-export const colorBrandForegroundLinkPressed: CSSDesignToken<string>;
+export const colorBrandForegroundLinkPressed = "--colorBrandForegroundLinkPressed";
 
 // @public (undocumented)
-export const colorBrandForegroundLinkSelected: CSSDesignToken<string>;
+export const colorBrandForegroundLinkSelected = "--colorBrandForegroundLinkSelected";
 
 // @public (undocumented)
-export const colorBrandForegroundOnLight: CSSDesignToken<string>;
+export const colorBrandForegroundOnLight = "--colorBrandForegroundOnLight";
 
 // @public (undocumented)
-export const colorBrandForegroundOnLightHover: CSSDesignToken<string>;
+export const colorBrandForegroundOnLightHover = "--colorBrandForegroundOnLightHover";
 
 // @public (undocumented)
-export const colorBrandForegroundOnLightPressed: CSSDesignToken<string>;
+export const colorBrandForegroundOnLightPressed = "--colorBrandForegroundOnLightPressed";
 
 // @public (undocumented)
-export const colorBrandForegroundOnLightSelected: CSSDesignToken<string>;
+export const colorBrandForegroundOnLightSelected = "--colorBrandForegroundOnLightSelected";
 
 // @public (undocumented)
-export const colorBrandShadowAmbient: CSSDesignToken<string>;
+export const colorBrandShadowAmbient = "--colorBrandShadowAmbient";
 
 // @public (undocumented)
-export const colorBrandShadowKey: CSSDesignToken<string>;
+export const colorBrandShadowKey = "--colorBrandShadowKey";
 
 // @public (undocumented)
-export const colorBrandStroke1: CSSDesignToken<string>;
+export const colorBrandStroke1 = "--colorBrandStroke1";
 
 // @public (undocumented)
-export const colorBrandStroke2: CSSDesignToken<string>;
+export const colorBrandStroke2 = "--colorBrandStroke2";
 
 // @public (undocumented)
-export const colorCompoundBrandBackground: CSSDesignToken<string>;
+export const colorCompoundBrandBackground = "--colorCompoundBrandBackground";
 
 // @public (undocumented)
-export const colorCompoundBrandBackgroundHover: CSSDesignToken<string>;
+export const colorCompoundBrandBackgroundHover = "--colorCompoundBrandBackgroundHover";
 
 // @public (undocumented)
-export const colorCompoundBrandBackgroundPressed: CSSDesignToken<string>;
+export const colorCompoundBrandBackgroundPressed = "--colorCompoundBrandBackgroundPressed";
 
 // @public (undocumented)
-export const colorCompoundBrandForeground1: CSSDesignToken<string>;
+export const colorCompoundBrandForeground1 = "--colorCompoundBrandForeground1";
 
 // @public (undocumented)
-export const colorCompoundBrandForeground1Hover: CSSDesignToken<string>;
+export const colorCompoundBrandForeground1Hover = "--colorCompoundBrandForeground1Hover";
 
 // @public (undocumented)
-export const colorCompoundBrandForeground1Pressed: CSSDesignToken<string>;
+export const colorCompoundBrandForeground1Pressed = "--colorCompoundBrandForeground1Pressed";
 
 // @public (undocumented)
-export const colorCompoundBrandStroke: CSSDesignToken<string>;
+export const colorCompoundBrandStroke = "--colorCompoundBrandStroke";
 
 // @public (undocumented)
-export const colorCompoundBrandStrokeHover: CSSDesignToken<string>;
+export const colorCompoundBrandStrokeHover = "--colorCompoundBrandStrokeHover";
 
 // @public (undocumented)
-export const colorCompoundBrandStrokePressed: CSSDesignToken<string>;
+export const colorCompoundBrandStrokePressed = "--colorCompoundBrandStrokePressed";
 
 // @public (undocumented)
-export const colorNeutralBackground1: CSSDesignToken<string>;
+export const colorNeutralBackground1 = "--colorNeutralBackground1";
 
 // @public (undocumented)
-export const colorNeutralBackground1Hover: CSSDesignToken<string>;
+export const colorNeutralBackground1Hover = "--colorNeutralBackground1Hover";
 
 // @public (undocumented)
-export const colorNeutralBackground1Pressed: CSSDesignToken<string>;
+export const colorNeutralBackground1Pressed = "--colorNeutralBackground1Pressed";
 
 // @public (undocumented)
-export const colorNeutralBackground1Selected: CSSDesignToken<string>;
+export const colorNeutralBackground1Selected = "--colorNeutralBackground1Selected";
 
 // @public (undocumented)
-export const colorNeutralBackground2: CSSDesignToken<string>;
+export const colorNeutralBackground2 = "--colorNeutralBackground2";
 
 // @public (undocumented)
-export const colorNeutralBackground2Hover: CSSDesignToken<string>;
+export const colorNeutralBackground2Hover = "--colorNeutralBackground2Hover";
 
 // @public (undocumented)
-export const colorNeutralBackground2Pressed: CSSDesignToken<string>;
+export const colorNeutralBackground2Pressed = "--colorNeutralBackground2Pressed";
 
 // @public (undocumented)
-export const colorNeutralBackground2Selected: CSSDesignToken<string>;
+export const colorNeutralBackground2Selected = "--colorNeutralBackground2Selected";
 
 // @public (undocumented)
-export const colorNeutralBackground3: CSSDesignToken<string>;
+export const colorNeutralBackground3 = "--colorNeutralBackground3";
 
 // @public (undocumented)
-export const colorNeutralBackground3Hover: CSSDesignToken<string>;
+export const colorNeutralBackground3Hover = "--colorNeutralBackground3Hover";
 
 // @public (undocumented)
-export const colorNeutralBackground3Pressed: CSSDesignToken<string>;
+export const colorNeutralBackground3Pressed = "--colorNeutralBackground3Pressed";
 
 // @public (undocumented)
-export const colorNeutralBackground3Selected: CSSDesignToken<string>;
+export const colorNeutralBackground3Selected = "--colorNeutralBackground3Selected";
 
 // @public (undocumented)
-export const colorNeutralBackground4: CSSDesignToken<string>;
+export const colorNeutralBackground4 = "--colorNeutralBackground4";
 
 // @public (undocumented)
-export const colorNeutralBackground4Hover: CSSDesignToken<string>;
+export const colorNeutralBackground4Hover = "--colorNeutralBackground4Hover";
 
 // @public (undocumented)
-export const colorNeutralBackground4Pressed: CSSDesignToken<string>;
+export const colorNeutralBackground4Pressed = "--colorNeutralBackground4Pressed";
 
 // @public (undocumented)
-export const colorNeutralBackground4Selected: CSSDesignToken<string>;
+export const colorNeutralBackground4Selected = "--colorNeutralBackground4Selected";
 
 // @public (undocumented)
-export const colorNeutralBackground5: CSSDesignToken<string>;
+export const colorNeutralBackground5 = "--colorNeutralBackground5";
 
 // @public (undocumented)
-export const colorNeutralBackground5Hover: CSSDesignToken<string>;
+export const colorNeutralBackground5Hover = "--colorNeutralBackground5Hover";
 
 // @public (undocumented)
-export const colorNeutralBackground5Pressed: CSSDesignToken<string>;
+export const colorNeutralBackground5Pressed = "--colorNeutralBackground5Pressed";
 
 // @public (undocumented)
-export const colorNeutralBackground5Selected: CSSDesignToken<string>;
+export const colorNeutralBackground5Selected = "--colorNeutralBackground5Selected";
 
 // @public (undocumented)
-export const colorNeutralBackground6: CSSDesignToken<string>;
+export const colorNeutralBackground6 = "--colorNeutralBackground6";
 
 // @public (undocumented)
-export const colorNeutralBackgroundDisabled: CSSDesignToken<string>;
+export const colorNeutralBackgroundDisabled = "--colorNeutralBackgroundDisabled";
 
 // @public (undocumented)
-export const colorNeutralBackgroundInverted: CSSDesignToken<string>;
+export const colorNeutralBackgroundInverted = "--colorNeutralBackgroundInverted";
 
 // @public (undocumented)
-export const colorNeutralBackgroundInvertedDisabled: CSSDesignToken<string>;
+export const colorNeutralBackgroundInvertedDisabled = "--colorNeutralBackgroundInvertedDisabled";
 
 // @public (undocumented)
-export const colorNeutralBackgroundStatic: CSSDesignToken<string>;
+export const colorNeutralBackgroundStatic = "--colorNeutralBackgroundStatic";
 
 // @public (undocumented)
-export const colorNeutralForeground1: CSSDesignToken<string>;
+export const colorNeutralForeground1 = "--colorNeutralForeground1";
 
 // @public (undocumented)
-export const colorNeutralForeground1Hover: CSSDesignToken<string>;
+export const colorNeutralForeground1Hover = "--colorNeutralForeground1Hover";
 
 // @public (undocumented)
-export const colorNeutralForeground1Pressed: CSSDesignToken<string>;
+export const colorNeutralForeground1Pressed = "--colorNeutralForeground1Pressed";
 
 // @public (undocumented)
-export const colorNeutralForeground1Selected: CSSDesignToken<string>;
+export const colorNeutralForeground1Selected = "--colorNeutralForeground1Selected";
 
 // @public (undocumented)
-export const colorNeutralForeground1Static: CSSDesignToken<string>;
+export const colorNeutralForeground1Static = "--colorNeutralForeground1Static";
 
 // @public (undocumented)
-export const colorNeutralForeground2: CSSDesignToken<string>;
+export const colorNeutralForeground2 = "--colorNeutralForeground2";
 
 // @public (undocumented)
-export const colorNeutralForeground2BrandHover: CSSDesignToken<string>;
+export const colorNeutralForeground2BrandHover = "--colorNeutralForeground2BrandHover";
 
 // @public (undocumented)
-export const colorNeutralForeground2BrandPressed: CSSDesignToken<string>;
+export const colorNeutralForeground2BrandPressed = "--colorNeutralForeground2BrandPressed";
 
 // @public (undocumented)
-export const colorNeutralForeground2BrandSelected: CSSDesignToken<string>;
+export const colorNeutralForeground2BrandSelected = "--colorNeutralForeground2BrandSelected";
 
 // @public (undocumented)
-export const colorNeutralForeground2Hover: CSSDesignToken<string>;
+export const colorNeutralForeground2Hover = "--colorNeutralForeground2Hover";
 
 // @public (undocumented)
-export const colorNeutralForeground2Link: CSSDesignToken<string>;
+export const colorNeutralForeground2Link = "--colorNeutralForeground2Link";
 
 // @public (undocumented)
-export const colorNeutralForeground2LinkHover: CSSDesignToken<string>;
+export const colorNeutralForeground2LinkHover = "--colorNeutralForeground2LinkHover";
 
 // @public (undocumented)
-export const colorNeutralForeground2LinkPressed: CSSDesignToken<string>;
+export const colorNeutralForeground2LinkPressed = "--colorNeutralForeground2LinkPressed";
 
 // @public (undocumented)
-export const colorNeutralForeground2LinkSelected: CSSDesignToken<string>;
+export const colorNeutralForeground2LinkSelected = "--colorNeutralForeground2LinkSelected";
 
 // @public (undocumented)
-export const colorNeutralForeground2Pressed: CSSDesignToken<string>;
+export const colorNeutralForeground2Pressed = "--colorNeutralForeground2Pressed";
 
 // @public (undocumented)
-export const colorNeutralForeground2Selected: CSSDesignToken<string>;
+export const colorNeutralForeground2Selected = "--colorNeutralForeground2Selected";
 
 // @public (undocumented)
-export const colorNeutralForeground3: CSSDesignToken<string>;
+export const colorNeutralForeground3 = "--colorNeutralForeground3";
 
 // @public (undocumented)
-export const colorNeutralForeground3BrandHover: CSSDesignToken<string>;
+export const colorNeutralForeground3BrandHover = "--colorNeutralForeground3BrandHover";
 
 // @public (undocumented)
-export const colorNeutralForeground3BrandPressed: CSSDesignToken<string>;
+export const colorNeutralForeground3BrandPressed = "--colorNeutralForeground3BrandPressed";
 
 // @public (undocumented)
-export const colorNeutralForeground3BrandSelected: CSSDesignToken<string>;
+export const colorNeutralForeground3BrandSelected = "--colorNeutralForeground3BrandSelected";
 
 // @public (undocumented)
-export const colorNeutralForeground3Hover: CSSDesignToken<string>;
+export const colorNeutralForeground3Hover = "--colorNeutralForeground3Hover";
 
 // @public (undocumented)
-export const colorNeutralForeground3Pressed: CSSDesignToken<string>;
+export const colorNeutralForeground3Pressed = "--colorNeutralForeground3Pressed";
 
 // @public (undocumented)
-export const colorNeutralForeground3Selected: CSSDesignToken<string>;
+export const colorNeutralForeground3Selected = "--colorNeutralForeground3Selected";
 
 // @public (undocumented)
-export const colorNeutralForeground4: CSSDesignToken<string>;
+export const colorNeutralForeground4 = "--colorNeutralForeground4";
 
 // @public (undocumented)
-export const colorNeutralForegroundDisabled: CSSDesignToken<string>;
+export const colorNeutralForegroundDisabled = "--colorNeutralForegroundDisabled";
 
 // @public (undocumented)
-export const colorNeutralForegroundInverted: CSSDesignToken<string>;
+export const colorNeutralForegroundInverted = "--colorNeutralForegroundInverted";
 
 // @public (undocumented)
-export const colorNeutralForegroundInverted2: CSSDesignToken<string>;
+export const colorNeutralForegroundInverted2 = "--colorNeutralForegroundInverted2";
 
 // @public (undocumented)
-export const colorNeutralForegroundInvertedDisabled: CSSDesignToken<string>;
+export const colorNeutralForegroundInvertedDisabled = "--colorNeutralForegroundInvertedDisabled";
 
 // @public (undocumented)
-export const colorNeutralForegroundInvertedHover: CSSDesignToken<string>;
+export const colorNeutralForegroundInvertedHover = "--colorNeutralForegroundInvertedHover";
 
 // @public (undocumented)
-export const colorNeutralForegroundInvertedLink: CSSDesignToken<string>;
+export const colorNeutralForegroundInvertedLink = "--colorNeutralForegroundInvertedLink";
 
 // @public (undocumented)
-export const colorNeutralForegroundInvertedLinkHover: CSSDesignToken<string>;
+export const colorNeutralForegroundInvertedLinkHover = "--colorNeutralForegroundInvertedLinkHover";
 
 // @public (undocumented)
-export const colorNeutralForegroundInvertedLinkPressed: CSSDesignToken<string>;
+export const colorNeutralForegroundInvertedLinkPressed = "--colorNeutralForegroundInvertedLinkPressed";
 
 // @public (undocumented)
-export const colorNeutralForegroundInvertedLinkSelected: CSSDesignToken<string>;
+export const colorNeutralForegroundInvertedLinkSelected = "--colorNeutralForegroundInvertedLinkSelected";
 
 // @public (undocumented)
-export const colorNeutralForegroundInvertedPressed: CSSDesignToken<string>;
+export const colorNeutralForegroundInvertedPressed = "--colorNeutralForegroundInvertedPressed";
 
 // @public (undocumented)
-export const colorNeutralForegroundInvertedSelected: CSSDesignToken<string>;
+export const colorNeutralForegroundInvertedSelected = "--colorNeutralForegroundInvertedSelected";
 
 // @public (undocumented)
-export const colorNeutralForegroundOnBrand: CSSDesignToken<string>;
+export const colorNeutralForegroundOnBrand = "--colorNeutralForegroundOnBrand";
 
 // @public (undocumented)
-export const colorNeutralForegroundStaticInverted: CSSDesignToken<string>;
+export const colorNeutralForegroundStaticInverted = "--colorNeutralForegroundStaticInverted";
 
 // @public (undocumented)
-export const colorNeutralShadowAmbient: CSSDesignToken<string>;
+export const colorNeutralShadowAmbient = "--colorNeutralShadowAmbient";
 
 // @public (undocumented)
-export const colorNeutralShadowAmbientDarker: CSSDesignToken<string>;
+export const colorNeutralShadowAmbientDarker = "--colorNeutralShadowAmbientDarker";
 
 // @public (undocumented)
-export const colorNeutralShadowAmbientLighter: CSSDesignToken<string>;
+export const colorNeutralShadowAmbientLighter = "--colorNeutralShadowAmbientLighter";
 
 // @public (undocumented)
-export const colorNeutralShadowKey: CSSDesignToken<string>;
+export const colorNeutralShadowKey = "--colorNeutralShadowKey";
 
 // @public (undocumented)
-export const colorNeutralShadowKeyDarker: CSSDesignToken<string>;
+export const colorNeutralShadowKeyDarker = "--colorNeutralShadowKeyDarker";
 
 // @public (undocumented)
-export const colorNeutralShadowKeyLighter: CSSDesignToken<string>;
+export const colorNeutralShadowKeyLighter = "--colorNeutralShadowKeyLighter";
 
 // @public (undocumented)
-export const colorNeutralStencil1: CSSDesignToken<string>;
+export const colorNeutralStencil1 = "--colorNeutralStencil1";
 
 // @public (undocumented)
-export const colorNeutralStencil1Alpha: CSSDesignToken<string>;
+export const colorNeutralStencil1Alpha = "--colorNeutralStencil1Alpha";
 
 // @public (undocumented)
-export const colorNeutralStencil2: CSSDesignToken<string>;
+export const colorNeutralStencil2 = "--colorNeutralStencil2";
 
 // @public (undocumented)
-export const colorNeutralStencil2Alpha: CSSDesignToken<string>;
+export const colorNeutralStencil2Alpha = "--colorNeutralStencil2Alpha";
 
 // @public (undocumented)
-export const colorNeutralStroke1: CSSDesignToken<string>;
+export const colorNeutralStroke1 = "--colorNeutralStroke1";
 
 // @public (undocumented)
-export const colorNeutralStroke1Hover: CSSDesignToken<string>;
+export const colorNeutralStroke1Hover = "--colorNeutralStroke1Hover";
 
 // @public (undocumented)
-export const colorNeutralStroke1Pressed: CSSDesignToken<string>;
+export const colorNeutralStroke1Pressed = "--colorNeutralStroke1Pressed";
 
 // @public (undocumented)
-export const colorNeutralStroke1Selected: CSSDesignToken<string>;
+export const colorNeutralStroke1Selected = "--colorNeutralStroke1Selected";
 
 // @public (undocumented)
-export const colorNeutralStroke2: CSSDesignToken<string>;
+export const colorNeutralStroke2 = "--colorNeutralStroke2";
 
 // @public (undocumented)
-export const colorNeutralStroke3: CSSDesignToken<string>;
+export const colorNeutralStroke3 = "--colorNeutralStroke3";
 
 // @public (undocumented)
-export const colorNeutralStrokeAccessible: CSSDesignToken<string>;
+export const colorNeutralStrokeAccessible = "--colorNeutralStrokeAccessible";
 
 // @public (undocumented)
-export const colorNeutralStrokeAccessibleHover: CSSDesignToken<string>;
+export const colorNeutralStrokeAccessibleHover = "--colorNeutralStrokeAccessibleHover";
 
 // @public (undocumented)
-export const colorNeutralStrokeAccessiblePressed: CSSDesignToken<string>;
+export const colorNeutralStrokeAccessiblePressed = "--colorNeutralStrokeAccessiblePressed";
 
 // @public (undocumented)
-export const colorNeutralStrokeAccessibleSelected: CSSDesignToken<string>;
+export const colorNeutralStrokeAccessibleSelected = "--colorNeutralStrokeAccessibleSelected";
 
 // @public (undocumented)
-export const colorNeutralStrokeDisabled: CSSDesignToken<string>;
+export const colorNeutralStrokeDisabled = "--colorNeutralStrokeDisabled";
 
 // @public (undocumented)
-export const colorNeutralStrokeInvertedDisabled: CSSDesignToken<string>;
+export const colorNeutralStrokeInvertedDisabled = "--colorNeutralStrokeInvertedDisabled";
 
 // @public (undocumented)
-export const colorNeutralStrokeOnBrand: CSSDesignToken<string>;
+export const colorNeutralStrokeOnBrand = "--colorNeutralStrokeOnBrand";
 
 // @public (undocumented)
-export const colorNeutralStrokeOnBrand2: CSSDesignToken<string>;
+export const colorNeutralStrokeOnBrand2 = "--colorNeutralStrokeOnBrand2";
 
 // @public (undocumented)
-export const colorNeutralStrokeOnBrand2Hover: CSSDesignToken<string>;
+export const colorNeutralStrokeOnBrand2Hover = "--colorNeutralStrokeOnBrand2Hover";
 
 // @public (undocumented)
-export const colorNeutralStrokeOnBrand2Pressed: CSSDesignToken<string>;
+export const colorNeutralStrokeOnBrand2Pressed = "--colorNeutralStrokeOnBrand2Pressed";
 
 // @public (undocumented)
-export const colorNeutralStrokeOnBrand2Selected: CSSDesignToken<string>;
+export const colorNeutralStrokeOnBrand2Selected = "--colorNeutralStrokeOnBrand2Selected";
 
 // @public (undocumented)
-export const colorPaletteAnchorBackground2: CSSDesignToken<string>;
+export const colorPaletteAnchorBackground2 = "--colorPaletteAnchorBackground2";
 
 // @public (undocumented)
-export const colorPaletteAnchorBorderActive: CSSDesignToken<string>;
+export const colorPaletteAnchorBorderActive = "--colorPaletteAnchorBorderActive";
 
 // @public (undocumented)
-export const colorPaletteAnchorForeground2: CSSDesignToken<string>;
+export const colorPaletteAnchorForeground2 = "--colorPaletteAnchorForeground2";
 
 // @public (undocumented)
-export const colorPaletteBeigeBackground2: CSSDesignToken<string>;
+export const colorPaletteBeigeBackground2 = "--colorPaletteBeigeBackground2";
 
 // @public (undocumented)
-export const colorPaletteBeigeBorderActive: CSSDesignToken<string>;
+export const colorPaletteBeigeBorderActive = "--colorPaletteBeigeBorderActive";
 
 // @public (undocumented)
-export const colorPaletteBeigeForeground2: CSSDesignToken<string>;
+export const colorPaletteBeigeForeground2 = "--colorPaletteBeigeForeground2";
 
 // @public (undocumented)
-export const colorPaletteBerryBackground1: CSSDesignToken<string>;
+export const colorPaletteBerryBackground1 = "--colorPaletteBerryBackground1";
 
 // @public (undocumented)
-export const colorPaletteBerryBackground2: CSSDesignToken<string>;
+export const colorPaletteBerryBackground2 = "--colorPaletteBerryBackground2";
 
 // @public (undocumented)
-export const colorPaletteBerryBackground3: CSSDesignToken<string>;
+export const colorPaletteBerryBackground3 = "--colorPaletteBerryBackground3";
 
 // @public (undocumented)
-export const colorPaletteBerryBorder1: CSSDesignToken<string>;
+export const colorPaletteBerryBorder1 = "--colorPaletteBerryBorder1";
 
 // @public (undocumented)
-export const colorPaletteBerryBorder2: CSSDesignToken<string>;
+export const colorPaletteBerryBorder2 = "--colorPaletteBerryBorder2";
 
 // @public (undocumented)
-export const colorPaletteBerryBorderActive: CSSDesignToken<string>;
+export const colorPaletteBerryBorderActive = "--colorPaletteBerryBorderActive";
 
 // @public (undocumented)
-export const colorPaletteBerryForeground1: CSSDesignToken<string>;
+export const colorPaletteBerryForeground1 = "--colorPaletteBerryForeground1";
 
 // @public (undocumented)
-export const colorPaletteBerryForeground2: CSSDesignToken<string>;
+export const colorPaletteBerryForeground2 = "--colorPaletteBerryForeground2";
 
 // @public (undocumented)
-export const colorPaletteBerryForeground3: CSSDesignToken<string>;
+export const colorPaletteBerryForeground3 = "--colorPaletteBerryForeground3";
 
 // @public (undocumented)
-export const colorPaletteBlueBackground2: CSSDesignToken<string>;
+export const colorPaletteBlueBackground2 = "--colorPaletteBlueBackground2";
 
 // @public (undocumented)
-export const colorPaletteBlueBorderActive: CSSDesignToken<string>;
+export const colorPaletteBlueBorderActive = "--colorPaletteBlueBorderActive";
 
 // @public (undocumented)
-export const colorPaletteBlueForeground2: CSSDesignToken<string>;
+export const colorPaletteBlueForeground2 = "--colorPaletteBlueForeground2";
 
 // @public (undocumented)
-export const colorPaletteBrassBackground2: CSSDesignToken<string>;
+export const colorPaletteBrassBackground2 = "--colorPaletteBrassBackground2";
 
 // @public (undocumented)
-export const colorPaletteBrassBorderActive: CSSDesignToken<string>;
+export const colorPaletteBrassBorderActive = "--colorPaletteBrassBorderActive";
 
 // @public (undocumented)
-export const colorPaletteBrassForeground2: CSSDesignToken<string>;
+export const colorPaletteBrassForeground2 = "--colorPaletteBrassForeground2";
 
 // @public (undocumented)
-export const colorPaletteBrownBackground2: CSSDesignToken<string>;
+export const colorPaletteBrownBackground2 = "--colorPaletteBrownBackground2";
 
 // @public (undocumented)
-export const colorPaletteBrownBorderActive: CSSDesignToken<string>;
+export const colorPaletteBrownBorderActive = "--colorPaletteBrownBorderActive";
 
 // @public (undocumented)
-export const colorPaletteBrownForeground2: CSSDesignToken<string>;
+export const colorPaletteBrownForeground2 = "--colorPaletteBrownForeground2";
 
 // @public (undocumented)
-export const colorPaletteCornflowerBackground2: CSSDesignToken<string>;
+export const colorPaletteCornflowerBackground2 = "--colorPaletteCornflowerBackground2";
 
 // @public (undocumented)
-export const colorPaletteCornflowerBorderActive: CSSDesignToken<string>;
+export const colorPaletteCornflowerBorderActive = "--colorPaletteCornflowerBorderActive";
 
 // @public (undocumented)
-export const colorPaletteCornflowerForeground2: CSSDesignToken<string>;
+export const colorPaletteCornflowerForeground2 = "--colorPaletteCornflowerForeground2";
 
 // @public (undocumented)
-export const colorPaletteCranberryBackground2: CSSDesignToken<string>;
+export const colorPaletteCranberryBackground2 = "--colorPaletteCranberryBackground2";
 
 // @public (undocumented)
-export const colorPaletteCranberryBorderActive: CSSDesignToken<string>;
+export const colorPaletteCranberryBorderActive = "--colorPaletteCranberryBorderActive";
 
 // @public (undocumented)
-export const colorPaletteCranberryForeground2: CSSDesignToken<string>;
+export const colorPaletteCranberryForeground2 = "--colorPaletteCranberryForeground2";
 
 // @public (undocumented)
-export const colorPaletteDarkGreenBackground2: CSSDesignToken<string>;
+export const colorPaletteDarkGreenBackground2 = "--colorPaletteDarkGreenBackground2";
 
 // @public (undocumented)
-export const colorPaletteDarkGreenBorderActive: CSSDesignToken<string>;
+export const colorPaletteDarkGreenBorderActive = "--colorPaletteDarkGreenBorderActive";
 
 // @public (undocumented)
-export const colorPaletteDarkGreenForeground2: CSSDesignToken<string>;
+export const colorPaletteDarkGreenForeground2 = "--colorPaletteDarkGreenForeground2";
 
 // @public (undocumented)
-export const colorPaletteDarkOrangeBackground1: CSSDesignToken<string>;
+export const colorPaletteDarkOrangeBackground1 = "--colorPaletteDarkOrangeBackground1";
 
 // @public (undocumented)
-export const colorPaletteDarkOrangeBackground2: CSSDesignToken<string>;
+export const colorPaletteDarkOrangeBackground2 = "--colorPaletteDarkOrangeBackground2";
 
 // @public (undocumented)
-export const colorPaletteDarkOrangeBackground3: CSSDesignToken<string>;
+export const colorPaletteDarkOrangeBackground3 = "--colorPaletteDarkOrangeBackground3";
 
 // @public (undocumented)
-export const colorPaletteDarkOrangeBorder1: CSSDesignToken<string>;
+export const colorPaletteDarkOrangeBorder1 = "--colorPaletteDarkOrangeBorder1";
 
 // @public (undocumented)
-export const colorPaletteDarkOrangeBorder2: CSSDesignToken<string>;
+export const colorPaletteDarkOrangeBorder2 = "--colorPaletteDarkOrangeBorder2";
 
 // @public (undocumented)
-export const colorPaletteDarkOrangeBorderActive: CSSDesignToken<string>;
+export const colorPaletteDarkOrangeBorderActive = "--colorPaletteDarkOrangeBorderActive";
 
 // @public (undocumented)
-export const colorPaletteDarkOrangeForeground1: CSSDesignToken<string>;
+export const colorPaletteDarkOrangeForeground1 = "--colorPaletteDarkOrangeForeground1";
 
 // @public (undocumented)
-export const colorPaletteDarkOrangeForeground2: CSSDesignToken<string>;
+export const colorPaletteDarkOrangeForeground2 = "--colorPaletteDarkOrangeForeground2";
 
 // @public (undocumented)
-export const colorPaletteDarkOrangeForeground3: CSSDesignToken<string>;
+export const colorPaletteDarkOrangeForeground3 = "--colorPaletteDarkOrangeForeground3";
 
 // @public (undocumented)
-export const colorPaletteDarkRedBackground2: CSSDesignToken<string>;
+export const colorPaletteDarkRedBackground2 = "--colorPaletteDarkRedBackground2";
 
 // @public (undocumented)
-export const colorPaletteDarkRedBorderActive: CSSDesignToken<string>;
+export const colorPaletteDarkRedBorderActive = "--colorPaletteDarkRedBorderActive";
 
 // @public (undocumented)
-export const colorPaletteDarkRedForeground2: CSSDesignToken<string>;
+export const colorPaletteDarkRedForeground2 = "--colorPaletteDarkRedForeground2";
 
 // @public (undocumented)
-export const colorPaletteForestBackground2: CSSDesignToken<string>;
+export const colorPaletteForestBackground2 = "--colorPaletteForestBackground2";
 
 // @public (undocumented)
-export const colorPaletteForestBorderActive: CSSDesignToken<string>;
+export const colorPaletteForestBorderActive = "--colorPaletteForestBorderActive";
 
 // @public (undocumented)
-export const colorPaletteForestForeground2: CSSDesignToken<string>;
+export const colorPaletteForestForeground2 = "--colorPaletteForestForeground2";
 
 // @public (undocumented)
-export const colorPaletteGoldBackground2: CSSDesignToken<string>;
+export const colorPaletteGoldBackground2 = "--colorPaletteGoldBackground2";
 
 // @public (undocumented)
-export const colorPaletteGoldBorderActive: CSSDesignToken<string>;
+export const colorPaletteGoldBorderActive = "--colorPaletteGoldBorderActive";
 
 // @public (undocumented)
-export const colorPaletteGoldForeground2: CSSDesignToken<string>;
+export const colorPaletteGoldForeground2 = "--colorPaletteGoldForeground2";
 
 // @public (undocumented)
-export const colorPaletteGrapeBackground2: CSSDesignToken<string>;
+export const colorPaletteGrapeBackground2 = "--colorPaletteGrapeBackground2";
 
 // @public (undocumented)
-export const colorPaletteGrapeBorderActive: CSSDesignToken<string>;
+export const colorPaletteGrapeBorderActive = "--colorPaletteGrapeBorderActive";
 
 // @public (undocumented)
-export const colorPaletteGrapeForeground2: CSSDesignToken<string>;
+export const colorPaletteGrapeForeground2 = "--colorPaletteGrapeForeground2";
 
 // @public (undocumented)
-export const colorPaletteGreenBackground1: CSSDesignToken<string>;
+export const colorPaletteGreenBackground1 = "--colorPaletteGreenBackground1";
 
 // @public (undocumented)
-export const colorPaletteGreenBackground2: CSSDesignToken<string>;
+export const colorPaletteGreenBackground2 = "--colorPaletteGreenBackground2";
 
 // @public (undocumented)
-export const colorPaletteGreenBackground3: CSSDesignToken<string>;
+export const colorPaletteGreenBackground3 = "--colorPaletteGreenBackground3";
 
 // @public (undocumented)
-export const colorPaletteGreenBorder1: CSSDesignToken<string>;
+export const colorPaletteGreenBorder1 = "--colorPaletteGreenBorder1";
 
 // @public (undocumented)
-export const colorPaletteGreenBorder2: CSSDesignToken<string>;
+export const colorPaletteGreenBorder2 = "--colorPaletteGreenBorder2";
 
 // @public (undocumented)
-export const colorPaletteGreenBorderActive: CSSDesignToken<string>;
+export const colorPaletteGreenBorderActive = "--colorPaletteGreenBorderActive";
 
 // @public (undocumented)
-export const colorPaletteGreenForeground1: CSSDesignToken<string>;
+export const colorPaletteGreenForeground1 = "--colorPaletteGreenForeground1";
 
 // @public (undocumented)
-export const colorPaletteGreenForeground2: CSSDesignToken<string>;
+export const colorPaletteGreenForeground2 = "--colorPaletteGreenForeground2";
 
 // @public (undocumented)
-export const colorPaletteGreenForeground3: CSSDesignToken<string>;
+export const colorPaletteGreenForeground3 = "--colorPaletteGreenForeground3";
 
 // @public (undocumented)
-export const colorPaletteGreenForegroundInverted: CSSDesignToken<string>;
+export const colorPaletteGreenForegroundInverted = "--colorPaletteGreenForegroundInverted";
 
 // @public (undocumented)
-export const colorPaletteLavenderBackground2: CSSDesignToken<string>;
+export const colorPaletteLavenderBackground2 = "--colorPaletteLavenderBackground2";
 
 // @public (undocumented)
-export const colorPaletteLavenderBorderActive: CSSDesignToken<string>;
+export const colorPaletteLavenderBorderActive = "--colorPaletteLavenderBorderActive";
 
 // @public (undocumented)
-export const colorPaletteLavenderForeground2: CSSDesignToken<string>;
+export const colorPaletteLavenderForeground2 = "--colorPaletteLavenderForeground2";
 
 // @public (undocumented)
-export const colorPaletteLightGreenBackground1: CSSDesignToken<string>;
+export const colorPaletteLightGreenBackground1 = "--colorPaletteLightGreenBackground1";
 
 // @public (undocumented)
-export const colorPaletteLightGreenBackground2: CSSDesignToken<string>;
+export const colorPaletteLightGreenBackground2 = "--colorPaletteLightGreenBackground2";
 
 // @public (undocumented)
-export const colorPaletteLightGreenBackground3: CSSDesignToken<string>;
+export const colorPaletteLightGreenBackground3 = "--colorPaletteLightGreenBackground3";
 
 // @public (undocumented)
-export const colorPaletteLightGreenBorder1: CSSDesignToken<string>;
+export const colorPaletteLightGreenBorder1 = "--colorPaletteLightGreenBorder1";
 
 // @public (undocumented)
-export const colorPaletteLightGreenBorder2: CSSDesignToken<string>;
+export const colorPaletteLightGreenBorder2 = "--colorPaletteLightGreenBorder2";
 
 // @public (undocumented)
-export const colorPaletteLightGreenBorderActive: CSSDesignToken<string>;
+export const colorPaletteLightGreenBorderActive = "--colorPaletteLightGreenBorderActive";
 
 // @public (undocumented)
-export const colorPaletteLightGreenForeground1: CSSDesignToken<string>;
+export const colorPaletteLightGreenForeground1 = "--colorPaletteLightGreenForeground1";
 
 // @public (undocumented)
-export const colorPaletteLightGreenForeground2: CSSDesignToken<string>;
+export const colorPaletteLightGreenForeground2 = "--colorPaletteLightGreenForeground2";
 
 // @public (undocumented)
-export const colorPaletteLightGreenForeground3: CSSDesignToken<string>;
+export const colorPaletteLightGreenForeground3 = "--colorPaletteLightGreenForeground3";
 
 // @public (undocumented)
-export const colorPaletteLightTealBackground2: CSSDesignToken<string>;
+export const colorPaletteLightTealBackground2 = "--colorPaletteLightTealBackground2";
 
 // @public (undocumented)
-export const colorPaletteLightTealBorderActive: CSSDesignToken<string>;
+export const colorPaletteLightTealBorderActive = "--colorPaletteLightTealBorderActive";
 
 // @public (undocumented)
-export const colorPaletteLightTealForeground2: CSSDesignToken<string>;
+export const colorPaletteLightTealForeground2 = "--colorPaletteLightTealForeground2";
 
 // @public (undocumented)
-export const colorPaletteLilacBackground2: CSSDesignToken<string>;
+export const colorPaletteLilacBackground2 = "--colorPaletteLilacBackground2";
 
 // @public (undocumented)
-export const colorPaletteLilacBorderActive: CSSDesignToken<string>;
+export const colorPaletteLilacBorderActive = "--colorPaletteLilacBorderActive";
 
 // @public (undocumented)
-export const colorPaletteLilacForeground2: CSSDesignToken<string>;
+export const colorPaletteLilacForeground2 = "--colorPaletteLilacForeground2";
 
 // @public (undocumented)
-export const colorPaletteMagentaBackground2: CSSDesignToken<string>;
+export const colorPaletteMagentaBackground2 = "--colorPaletteMagentaBackground2";
 
 // @public (undocumented)
-export const colorPaletteMagentaBorderActive: CSSDesignToken<string>;
+export const colorPaletteMagentaBorderActive = "--colorPaletteMagentaBorderActive";
 
 // @public (undocumented)
-export const colorPaletteMagentaForeground2: CSSDesignToken<string>;
+export const colorPaletteMagentaForeground2 = "--colorPaletteMagentaForeground2";
 
 // @public (undocumented)
-export const colorPaletteMarigoldBackground1: CSSDesignToken<string>;
+export const colorPaletteMarigoldBackground1 = "--colorPaletteMarigoldBackground1";
 
 // @public (undocumented)
-export const colorPaletteMarigoldBackground2: CSSDesignToken<string>;
+export const colorPaletteMarigoldBackground2 = "--colorPaletteMarigoldBackground2";
 
 // @public (undocumented)
-export const colorPaletteMarigoldBackground3: CSSDesignToken<string>;
+export const colorPaletteMarigoldBackground3 = "--colorPaletteMarigoldBackground3";
 
 // @public (undocumented)
-export const colorPaletteMarigoldBorder1: CSSDesignToken<string>;
+export const colorPaletteMarigoldBorder1 = "--colorPaletteMarigoldBorder1";
 
 // @public (undocumented)
-export const colorPaletteMarigoldBorder2: CSSDesignToken<string>;
+export const colorPaletteMarigoldBorder2 = "--colorPaletteMarigoldBorder2";
 
 // @public (undocumented)
-export const colorPaletteMarigoldBorderActive: CSSDesignToken<string>;
+export const colorPaletteMarigoldBorderActive = "--colorPaletteMarigoldBorderActive";
 
 // @public (undocumented)
-export const colorPaletteMarigoldForeground1: CSSDesignToken<string>;
+export const colorPaletteMarigoldForeground1 = "--colorPaletteMarigoldForeground1";
 
 // @public (undocumented)
-export const colorPaletteMarigoldForeground2: CSSDesignToken<string>;
+export const colorPaletteMarigoldForeground2 = "--colorPaletteMarigoldForeground2";
 
 // @public (undocumented)
-export const colorPaletteMarigoldForeground3: CSSDesignToken<string>;
+export const colorPaletteMarigoldForeground3 = "--colorPaletteMarigoldForeground3";
 
 // @public (undocumented)
-export const colorPaletteMinkBackground2: CSSDesignToken<string>;
+export const colorPaletteMinkBackground2 = "--colorPaletteMinkBackground2";
 
 // @public (undocumented)
-export const colorPaletteMinkBorderActive: CSSDesignToken<string>;
+export const colorPaletteMinkBorderActive = "--colorPaletteMinkBorderActive";
 
 // @public (undocumented)
-export const colorPaletteMinkForeground2: CSSDesignToken<string>;
+export const colorPaletteMinkForeground2 = "--colorPaletteMinkForeground2";
 
 // @public (undocumented)
-export const colorPaletteNavyBackground2: CSSDesignToken<string>;
+export const colorPaletteNavyBackground2 = "--colorPaletteNavyBackground2";
 
 // @public (undocumented)
-export const colorPaletteNavyBorderActive: CSSDesignToken<string>;
+export const colorPaletteNavyBorderActive = "--colorPaletteNavyBorderActive";
 
 // @public (undocumented)
-export const colorPaletteNavyForeground2: CSSDesignToken<string>;
+export const colorPaletteNavyForeground2 = "--colorPaletteNavyForeground2";
 
 // @public (undocumented)
-export const colorPalettePeachBackground2: CSSDesignToken<string>;
+export const colorPalettePeachBackground2 = "--colorPalettePeachBackground2";
 
 // @public (undocumented)
-export const colorPalettePeachBorderActive: CSSDesignToken<string>;
+export const colorPalettePeachBorderActive = "--colorPalettePeachBorderActive";
 
 // @public (undocumented)
-export const colorPalettePeachForeground2: CSSDesignToken<string>;
+export const colorPalettePeachForeground2 = "--colorPalettePeachForeground2";
 
 // @public (undocumented)
-export const colorPalettePinkBackground2: CSSDesignToken<string>;
+export const colorPalettePinkBackground2 = "--colorPalettePinkBackground2";
 
 // @public (undocumented)
-export const colorPalettePinkBorderActive: CSSDesignToken<string>;
+export const colorPalettePinkBorderActive = "--colorPalettePinkBorderActive";
 
 // @public (undocumented)
-export const colorPalettePinkForeground2: CSSDesignToken<string>;
+export const colorPalettePinkForeground2 = "--colorPalettePinkForeground2";
 
 // @public (undocumented)
-export const colorPalettePlatinumBackground2: CSSDesignToken<string>;
+export const colorPalettePlatinumBackground2 = "--colorPalettePlatinumBackground2";
 
 // @public (undocumented)
-export const colorPalettePlatinumBorderActive: CSSDesignToken<string>;
+export const colorPalettePlatinumBorderActive = "--colorPalettePlatinumBorderActive";
 
 // @public (undocumented)
-export const colorPalettePlatinumForeground2: CSSDesignToken<string>;
+export const colorPalettePlatinumForeground2 = "--colorPalettePlatinumForeground2";
 
 // @public (undocumented)
-export const colorPalettePlumBackground2: CSSDesignToken<string>;
+export const colorPalettePlumBackground2 = "--colorPalettePlumBackground2";
 
 // @public (undocumented)
-export const colorPalettePlumBorderActive: CSSDesignToken<string>;
+export const colorPalettePlumBorderActive = "--colorPalettePlumBorderActive";
 
 // @public (undocumented)
-export const colorPalettePlumForeground2: CSSDesignToken<string>;
+export const colorPalettePlumForeground2 = "--colorPalettePlumForeground2";
 
 // @public (undocumented)
-export const colorPalettePumpkinBackground2: CSSDesignToken<string>;
+export const colorPalettePumpkinBackground2 = "--colorPalettePumpkinBackground2";
 
 // @public (undocumented)
-export const colorPalettePumpkinBorderActive: CSSDesignToken<string>;
+export const colorPalettePumpkinBorderActive = "--colorPalettePumpkinBorderActive";
 
 // @public (undocumented)
-export const colorPalettePumpkinForeground2: CSSDesignToken<string>;
+export const colorPalettePumpkinForeground2 = "--colorPalettePumpkinForeground2";
 
 // @public (undocumented)
-export const colorPalettePurpleBackground2: CSSDesignToken<string>;
+export const colorPalettePurpleBackground2 = "--colorPalettePurpleBackground2";
 
 // @public (undocumented)
-export const colorPalettePurpleBorderActive: CSSDesignToken<string>;
+export const colorPalettePurpleBorderActive = "--colorPalettePurpleBorderActive";
 
 // @public (undocumented)
-export const colorPalettePurpleForeground2: CSSDesignToken<string>;
+export const colorPalettePurpleForeground2 = "--colorPalettePurpleForeground2";
 
 // @public (undocumented)
-export const colorPaletteRedBackground1: CSSDesignToken<string>;
+export const colorPaletteRedBackground1 = "--colorPaletteRedBackground1";
 
 // @public (undocumented)
-export const colorPaletteRedBackground2: CSSDesignToken<string>;
+export const colorPaletteRedBackground2 = "--colorPaletteRedBackground2";
 
 // @public (undocumented)
-export const colorPaletteRedBackground3: CSSDesignToken<string>;
+export const colorPaletteRedBackground3 = "--colorPaletteRedBackground3";
 
 // @public (undocumented)
-export const colorPaletteRedBorder1: CSSDesignToken<string>;
+export const colorPaletteRedBorder1 = "--colorPaletteRedBorder1";
 
 // @public (undocumented)
-export const colorPaletteRedBorder2: CSSDesignToken<string>;
+export const colorPaletteRedBorder2 = "--colorPaletteRedBorder2";
 
 // @public (undocumented)
-export const colorPaletteRedBorderActive: CSSDesignToken<string>;
+export const colorPaletteRedBorderActive = "--colorPaletteRedBorderActive";
 
 // @public (undocumented)
-export const colorPaletteRedForeground1: CSSDesignToken<string>;
+export const colorPaletteRedForeground1 = "--colorPaletteRedForeground1";
 
 // @public (undocumented)
-export const colorPaletteRedForeground2: CSSDesignToken<string>;
+export const colorPaletteRedForeground2 = "--colorPaletteRedForeground2";
 
 // @public (undocumented)
-export const colorPaletteRedForeground3: CSSDesignToken<string>;
+export const colorPaletteRedForeground3 = "--colorPaletteRedForeground3";
 
 // @public (undocumented)
-export const colorPaletteRedForegroundInverted: CSSDesignToken<string>;
+export const colorPaletteRedForegroundInverted = "--colorPaletteRedForegroundInverted";
 
 // @public (undocumented)
-export const colorPaletteRoyalBlueBackground2: CSSDesignToken<string>;
+export const colorPaletteRoyalBlueBackground2 = "--colorPaletteRoyalBlueBackground2";
 
 // @public (undocumented)
-export const colorPaletteRoyalBlueBorderActive: CSSDesignToken<string>;
+export const colorPaletteRoyalBlueBorderActive = "--colorPaletteRoyalBlueBorderActive";
 
 // @public (undocumented)
-export const colorPaletteRoyalBlueForeground2: CSSDesignToken<string>;
+export const colorPaletteRoyalBlueForeground2 = "--colorPaletteRoyalBlueForeground2";
 
 // @public (undocumented)
-export const colorPaletteSeafoamBackground2: CSSDesignToken<string>;
+export const colorPaletteSeafoamBackground2 = "--colorPaletteSeafoamBackground2";
 
 // @public (undocumented)
-export const colorPaletteSeafoamBorderActive: CSSDesignToken<string>;
+export const colorPaletteSeafoamBorderActive = "--colorPaletteSeafoamBorderActive";
 
 // @public (undocumented)
-export const colorPaletteSeafoamForeground2: CSSDesignToken<string>;
+export const colorPaletteSeafoamForeground2 = "--colorPaletteSeafoamForeground2";
 
 // @public (undocumented)
-export const colorPaletteSteelBackground2: CSSDesignToken<string>;
+export const colorPaletteSteelBackground2 = "--colorPaletteSteelBackground2";
 
 // @public (undocumented)
-export const colorPaletteSteelBorderActive: CSSDesignToken<string>;
+export const colorPaletteSteelBorderActive = "--colorPaletteSteelBorderActive";
 
 // @public (undocumented)
-export const colorPaletteSteelForeground2: CSSDesignToken<string>;
+export const colorPaletteSteelForeground2 = "--colorPaletteSteelForeground2";
 
 // @public (undocumented)
-export const colorPaletteTealBackground2: CSSDesignToken<string>;
+export const colorPaletteTealBackground2 = "--colorPaletteTealBackground2";
 
 // @public (undocumented)
-export const colorPaletteTealBorderActive: CSSDesignToken<string>;
+export const colorPaletteTealBorderActive = "--colorPaletteTealBorderActive";
 
 // @public (undocumented)
-export const colorPaletteTealForeground2: CSSDesignToken<string>;
+export const colorPaletteTealForeground2 = "--colorPaletteTealForeground2";
 
 // @public (undocumented)
-export const colorPaletteYellowBackground1: CSSDesignToken<string>;
+export const colorPaletteYellowBackground1 = "--colorPaletteYellowBackground1";
 
 // @public (undocumented)
-export const colorPaletteYellowBackground2: CSSDesignToken<string>;
+export const colorPaletteYellowBackground2 = "--colorPaletteYellowBackground2";
 
 // @public (undocumented)
-export const colorPaletteYellowBackground3: CSSDesignToken<string>;
+export const colorPaletteYellowBackground3 = "--colorPaletteYellowBackground3";
 
 // @public (undocumented)
-export const colorPaletteYellowBorder1: CSSDesignToken<string>;
+export const colorPaletteYellowBorder1 = "--colorPaletteYellowBorder1";
 
 // @public (undocumented)
-export const colorPaletteYellowBorder2: CSSDesignToken<string>;
+export const colorPaletteYellowBorder2 = "--colorPaletteYellowBorder2";
 
 // @public (undocumented)
-export const colorPaletteYellowBorderActive: CSSDesignToken<string>;
+export const colorPaletteYellowBorderActive = "--colorPaletteYellowBorderActive";
 
 // @public (undocumented)
-export const colorPaletteYellowForeground1: CSSDesignToken<string>;
+export const colorPaletteYellowForeground1 = "--colorPaletteYellowForeground1";
 
 // @public (undocumented)
-export const colorPaletteYellowForeground2: CSSDesignToken<string>;
+export const colorPaletteYellowForeground2 = "--colorPaletteYellowForeground2";
 
 // @public (undocumented)
-export const colorPaletteYellowForeground3: CSSDesignToken<string>;
+export const colorPaletteYellowForeground3 = "--colorPaletteYellowForeground3";
 
 // @public (undocumented)
-export const colorPaletteYellowForegroundInverted: CSSDesignToken<string>;
+export const colorPaletteYellowForegroundInverted = "--colorPaletteYellowForegroundInverted";
 
 // @public (undocumented)
-export const colorScrollbarOverlay: CSSDesignToken<string>;
+export const colorScrollbarOverlay = "--colorScrollbarOverlay";
 
 // @public (undocumented)
-export const colorStrokeFocus1: CSSDesignToken<string>;
+export const colorStrokeFocus1 = "--colorStrokeFocus1";
 
 // @public (undocumented)
-export const colorStrokeFocus2: CSSDesignToken<string>;
+export const colorStrokeFocus2 = "--colorStrokeFocus2";
 
 // @public (undocumented)
-export const colorSubtleBackground: CSSDesignToken<string>;
+export const colorSubtleBackground = "--colorSubtleBackground";
 
 // @public (undocumented)
-export const colorSubtleBackgroundHover: CSSDesignToken<string>;
+export const colorSubtleBackgroundHover = "--colorSubtleBackgroundHover";
 
 // @public (undocumented)
-export const colorSubtleBackgroundInverted: CSSDesignToken<string>;
+export const colorSubtleBackgroundInverted = "--colorSubtleBackgroundInverted";
 
 // @public (undocumented)
-export const colorSubtleBackgroundInvertedHover: CSSDesignToken<string>;
+export const colorSubtleBackgroundInvertedHover = "--colorSubtleBackgroundInvertedHover";
 
 // @public (undocumented)
-export const colorSubtleBackgroundInvertedPressed: CSSDesignToken<string>;
+export const colorSubtleBackgroundInvertedPressed = "--colorSubtleBackgroundInvertedPressed";
 
 // @public (undocumented)
-export const colorSubtleBackgroundInvertedSelected: CSSDesignToken<string>;
+export const colorSubtleBackgroundInvertedSelected = "--colorSubtleBackgroundInvertedSelected";
 
 // @public (undocumented)
-export const colorSubtleBackgroundLightAlphaHover: CSSDesignToken<string>;
+export const colorSubtleBackgroundLightAlphaHover = "--colorSubtleBackgroundLightAlphaHover";
 
 // @public (undocumented)
-export const colorSubtleBackgroundLightAlphaPressed: CSSDesignToken<string>;
+export const colorSubtleBackgroundLightAlphaPressed = "--colorSubtleBackgroundLightAlphaPressed";
 
 // @public (undocumented)
-export const colorSubtleBackgroundLightAlphaSelected: CSSDesignToken<string>;
+export const colorSubtleBackgroundLightAlphaSelected = "--colorSubtleBackgroundLightAlphaSelected";
 
 // @public (undocumented)
-export const colorSubtleBackgroundPressed: CSSDesignToken<string>;
+export const colorSubtleBackgroundPressed = "--colorSubtleBackgroundPressed";
 
 // @public (undocumented)
-export const colorSubtleBackgroundSelected: CSSDesignToken<string>;
+export const colorSubtleBackgroundSelected = "--colorSubtleBackgroundSelected";
 
 // @public (undocumented)
-export const colorTransparentBackground: CSSDesignToken<string>;
+export const colorTransparentBackground = "--colorTransparentBackground";
 
 // @public (undocumented)
-export const colorTransparentBackgroundHover: CSSDesignToken<string>;
+export const colorTransparentBackgroundHover = "--colorTransparentBackgroundHover";
 
 // @public (undocumented)
-export const colorTransparentBackgroundPressed: CSSDesignToken<string>;
+export const colorTransparentBackgroundPressed = "--colorTransparentBackgroundPressed";
 
 // @public (undocumented)
-export const colorTransparentBackgroundSelected: CSSDesignToken<string>;
+export const colorTransparentBackgroundSelected = "--colorTransparentBackgroundSelected";
 
 // @public (undocumented)
-export const colorTransparentStroke: CSSDesignToken<string>;
+export const colorTransparentStroke = "--colorTransparentStroke";
 
 // @public (undocumented)
-export const colorTransparentStrokeDisabled: CSSDesignToken<string>;
+export const colorTransparentStrokeDisabled = "--colorTransparentStrokeDisabled";
 
 // @public (undocumented)
-export const colorTransparentStrokeInteractive: CSSDesignToken<string>;
+export const colorTransparentStrokeInteractive = "--colorTransparentStrokeInteractive";
 
 // @public
 export class CompoundButton extends Button {
@@ -1529,31 +1528,64 @@ export const CounterBadgeStyles: ElementStyles;
 export const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
 // @public (undocumented)
-export const curveAccelerateMax: CSSDesignToken<string>;
+export const curveAccelerateMax = "--curveAccelerateMax";
 
 // @public (undocumented)
-export const curveAccelerateMid: CSSDesignToken<string>;
+export const curveAccelerateMid = "--curveAccelerateMid";
 
 // @public (undocumented)
-export const curveAccelerateMin: CSSDesignToken<string>;
+export const curveAccelerateMin = "--curveAccelerateMin";
 
 // @public (undocumented)
-export const curveDecelerateMax: CSSDesignToken<string>;
+export const curveDecelerateMax = "--curveDecelerateMax";
 
 // @public (undocumented)
-export const curveDecelerateMid: CSSDesignToken<string>;
+export const curveDecelerateMid = "--curveDecelerateMid";
 
 // @public (undocumented)
-export const curveDecelerateMin: CSSDesignToken<string>;
+export const curveDecelerateMin = "--curveDecelerateMin";
 
 // @public (undocumented)
-export const curveEasyEase: CSSDesignToken<string>;
+export const curveEasyEase = "--curveEasyEase";
 
 // @public (undocumented)
-export const curveEasyEaseMax: CSSDesignToken<string>;
+export const curveEasyEaseMax = "--curveEasyEaseMax";
 
 // @public (undocumented)
-export const curveLinear: CSSDesignToken<string>;
+export const curveLinear = "--curveLinear";
+
+// @public
+export class Dialog extends FASTElement {
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+    connectedCallback(): void;
+    defaultTitleAction?: Button;
+    dialog: HTMLDialogElement;
+    disconnectedCallback(): void;
+    dismiss(): void;
+    handleClick(event: Event): boolean;
+    handleKeydown: (e: KeyboardEvent) => boolean | void;
+    hide(dismissed?: boolean): void;
+    // Warning: (ae-forgotten-export) The symbol "DialogModalType" needs to be exported by the entry point index.d.ts
+    modalType: DialogModalType;
+    modalTypeChanged(oldValue: DialogModalType, newValue: DialogModalType): void;
+    noTitleAction: boolean;
+    onOpenChangeEvent: (dismissed?: boolean) => void;
+    open: boolean;
+    openChanged(oldValue: boolean, newValue: boolean): void;
+    setComponent(): void;
+    show(): void;
+    titleAction: HTMLElement[];
+}
+
+// @public
+export const DialogDefinition: FASTElementDefinition<typeof Dialog>;
+
+// @public
+export const DialogStyles: ElementStyles;
+
+// @public
+export const DialogTemplate: ElementViewTemplate<Dialog>;
 
 // @public
 export class Divider extends FASTDivider {
@@ -1597,25 +1629,25 @@ export const DividerStyles: ElementStyles;
 export const DividerTemplate: ElementViewTemplate<Divider>;
 
 // @public (undocumented)
-export const durationFast: CSSDesignToken<string>;
+export const durationFast = "--durationFast";
 
 // @public (undocumented)
-export const durationFaster: CSSDesignToken<string>;
+export const durationFaster = "--durationFaster";
 
 // @public (undocumented)
-export const durationNormal: CSSDesignToken<string>;
+export const durationNormal = "--durationNormal";
 
 // @public (undocumented)
-export const durationSlow: CSSDesignToken<string>;
+export const durationSlow = "--durationSlow";
 
 // @public (undocumented)
-export const durationSlower: CSSDesignToken<string>;
+export const durationSlower = "--durationSlower";
 
 // @public (undocumented)
-export const durationUltraFast: CSSDesignToken<string>;
+export const durationUltraFast = "--durationUltraFast";
 
 // @public (undocumented)
-export const durationUltraSlow: CSSDesignToken<string>;
+export const durationUltraSlow = "--durationUltraSlow";
 
 // @public (undocumented)
 export const FluentDesignSystem: Readonly<{
@@ -1625,55 +1657,55 @@ export const FluentDesignSystem: Readonly<{
 }>;
 
 // @public (undocumented)
-export const fontFamilyBase: CSSDesignToken<string>;
+export const fontFamilyBase = "--fontFamilyBase";
 
 // @public (undocumented)
-export const fontFamilyMonospace: CSSDesignToken<string>;
+export const fontFamilyMonospace = "--fontFamilyMonospace";
 
 // @public (undocumented)
-export const fontFamilyNumeric: CSSDesignToken<string>;
+export const fontFamilyNumeric = "--fontFamilyNumeric";
 
 // @public (undocumented)
-export const fontSizeBase100: CSSDesignToken<string>;
+export const fontSizeBase100 = "--fontSizeBase100";
 
 // @public (undocumented)
-export const fontSizeBase200: CSSDesignToken<string>;
+export const fontSizeBase200 = "--fontSizeBase200";
 
 // @public (undocumented)
-export const fontSizeBase300: CSSDesignToken<string>;
+export const fontSizeBase300 = "--fontSizeBase300";
 
 // @public (undocumented)
-export const fontSizeBase400: CSSDesignToken<string>;
+export const fontSizeBase400 = "--fontSizeBase400";
 
 // @public (undocumented)
-export const fontSizeBase500: CSSDesignToken<string>;
+export const fontSizeBase500 = "--fontSizeBase500";
 
 // @public (undocumented)
-export const fontSizeBase600: CSSDesignToken<string>;
+export const fontSizeBase600 = "--fontSizeBase600";
 
 // @public (undocumented)
-export const fontSizeHero1000: CSSDesignToken<string>;
+export const fontSizeHero1000 = "--fontSizeHero1000";
 
 // @public (undocumented)
-export const fontSizeHero700: CSSDesignToken<string>;
+export const fontSizeHero700 = "--fontSizeHero700";
 
 // @public (undocumented)
-export const fontSizeHero800: CSSDesignToken<string>;
+export const fontSizeHero800 = "--fontSizeHero800";
 
 // @public (undocumented)
-export const fontSizeHero900: CSSDesignToken<string>;
+export const fontSizeHero900 = "--fontSizeHero900";
 
 // @public (undocumented)
-export const fontWeightBold: CSSDesignToken<string>;
+export const fontWeightBold = "--fontWeightBold";
 
 // @public (undocumented)
-export const fontWeightMedium: CSSDesignToken<string>;
+export const fontWeightMedium = "--fontWeightMedium";
 
 // @public (undocumented)
-export const fontWeightRegular: CSSDesignToken<string>;
+export const fontWeightRegular = "--fontWeightRegular";
 
 // @public (undocumented)
-export const fontWeightSemibold: CSSDesignToken<string>;
+export const fontWeightSemibold = "--fontWeightSemibold";
 
 // @public
 class Image_2 extends FASTElement {
@@ -1736,34 +1768,65 @@ export const LabelStyles: ElementStyles;
 export const LabelTemplate: ElementViewTemplate<Label>;
 
 // @public (undocumented)
-export const lineHeightBase100: CSSDesignToken<string>;
+export const lineHeightBase100 = "--lineHeightBase100";
 
 // @public (undocumented)
-export const lineHeightBase200: CSSDesignToken<string>;
+export const lineHeightBase200 = "--lineHeightBase200";
 
 // @public (undocumented)
-export const lineHeightBase300: CSSDesignToken<string>;
+export const lineHeightBase300 = "--lineHeightBase300";
 
 // @public (undocumented)
-export const lineHeightBase400: CSSDesignToken<string>;
+export const lineHeightBase400 = "--lineHeightBase400";
 
 // @public (undocumented)
-export const lineHeightBase500: CSSDesignToken<string>;
+export const lineHeightBase500 = "--lineHeightBase500";
 
 // @public (undocumented)
-export const lineHeightBase600: CSSDesignToken<string>;
+export const lineHeightBase600 = "--lineHeightBase600";
 
 // @public (undocumented)
-export const lineHeightHero1000: CSSDesignToken<string>;
+export const lineHeightHero1000 = "--lineHeightHero1000";
 
 // @public (undocumented)
-export const lineHeightHero700: CSSDesignToken<string>;
+export const lineHeightHero700 = "--lineHeightHero700";
 
 // @public (undocumented)
-export const lineHeightHero800: CSSDesignToken<string>;
+export const lineHeightHero800 = "--lineHeightHero800";
 
 // @public (undocumented)
-export const lineHeightHero900: CSSDesignToken<string>;
+export const lineHeightHero900 = "--lineHeightHero900";
+
+// @public
+export class Menu extends FASTElement {
+    cleanup?: () => void;
+    closeMenu: () => void;
+    closeOnScroll?: boolean;
+    closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    focusMenuList(): void;
+    focusTrigger(): void;
+    handleMenuKeydown(e: KeyboardEvent): boolean | void;
+    handleTriggerKeydown: (e: KeyboardEvent) => boolean | void;
+    open: boolean;
+    openChanged(oldValue: boolean, newValue: boolean): void;
+    openMenu: (e?: Event) => void;
+    openOnContext?: boolean;
+    openOnContextChanged(oldValue: boolean, newValue: boolean): void;
+    openOnHover?: boolean;
+    openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
+    persistOnItemClick?: boolean;
+    persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
+    // @internal
+    positioningContainer?: HTMLElement;
+    setComponent(): void;
+    protected setPositioning(): void;
+    protected setPositioningTask: () => void;
+    slottedMenuList: MenuList[];
+    slottedTriggers: HTMLElement[];
+    toggleMenu: () => void;
+}
 
 // @public
 export class MenuButton extends Button {
@@ -1807,6 +1870,9 @@ export type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
 // @public
 export const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
 
+// @public
+export const MenuDefinition: FASTElementDefinition<typeof Menu>;
+
 // @public
 export class MenuItem extends FASTMenuItem {
 }
@@ -1840,6 +1906,12 @@ export const MenuListStyles: ElementStyles;
 // @public (undocumented)
 export const MenuListTemplate: ElementViewTemplate<MenuList>;
 
+// @public
+export const MenuStyles: ElementStyles;
+
+// @public (undocumented)
+export const MenuTemplate: ElementViewTemplate<Menu>;
+
 // @public
 class ProgressBar_2 extends FASTProgress {
     shape?: ProgressBarShape;
@@ -1918,43 +1990,43 @@ export const RadioTemplate: ElementViewTemplate<Radio>;
 export const setTheme: (theme: Theme) => void;
 
 // @public (undocumented)
-export const setThemeFor: (element: FASTElement, theme: Theme) => void;
+export const setThemeFor: (element: HTMLElement, theme: Theme) => void;
 
 // @public (undocumented)
-export const shadow16: CSSDesignToken<string>;
+export const shadow16 = "--shadow16";
 
 // @public (undocumented)
-export const shadow16Brand: CSSDesignToken<string>;
+export const shadow16Brand = "--shadow16Brand";
 
 // @public (undocumented)
-export const shadow2: CSSDesignToken<string>;
+export const shadow2 = "--shadow2";
 
 // @public (undocumented)
-export const shadow28: CSSDesignToken<string>;
+export const shadow28 = "--shadow28";
 
 // @public (undocumented)
-export const shadow28Brand: CSSDesignToken<string>;
+export const shadow28Brand = "--shadow28Brand";
 
 // @public (undocumented)
-export const shadow2Brand: CSSDesignToken<string>;
+export const shadow2Brand = "--shadow2Brand";
 
 // @public (undocumented)
-export const shadow4: CSSDesignToken<string>;
+export const shadow4 = "--shadow4";
 
 // @public (undocumented)
-export const shadow4Brand: CSSDesignToken<string>;
+export const shadow4Brand = "--shadow4Brand";
 
 // @public (undocumented)
-export const shadow64: CSSDesignToken<string>;
+export const shadow64 = "--shadow64";
 
 // @public (undocumented)
-export const shadow64Brand: CSSDesignToken<string>;
+export const shadow64Brand = "--shadow64Brand";
 
 // @public (undocumented)
-export const shadow8: CSSDesignToken<string>;
+export const shadow8 = "--shadow8";
 
 // @public (undocumented)
-export const shadow8Brand: CSSDesignToken<string>;
+export const shadow8Brand = "--shadow8Brand";
 
 // @public
 export class Slider extends FASTSlider {
@@ -1988,70 +2060,70 @@ export const SliderStyles: ElementStyles;
 export const SliderTemplate: ElementViewTemplate<FASTSlider>;
 
 // @public (undocumented)
-export const spacingHorizontalL: CSSDesignToken<string>;
+export const spacingHorizontalL = "--spacingHorizontalL";
 
 // @public (undocumented)
-export const spacingHorizontalM: CSSDesignToken<string>;
+export const spacingHorizontalM = "--spacingHorizontalM";
 
 // @public (undocumented)
-export const spacingHorizontalMNudge: CSSDesignToken<string>;
+export const spacingHorizontalMNudge = "--spacingHorizontalMNudge";
 
 // @public (undocumented)
-export const spacingHorizontalNone: CSSDesignToken<string>;
+export const spacingHorizontalNone = "--spacingHorizontalNone";
 
 // @public (undocumented)
-export const spacingHorizontalS: CSSDesignToken<string>;
+export const spacingHorizontalS = "--spacingHorizontalS";
 
 // @public (undocumented)
-export const spacingHorizontalSNudge: CSSDesignToken<string>;
+export const spacingHorizontalSNudge = "--spacingHorizontalSNudge";
 
 // @public (undocumented)
-export const spacingHorizontalXL: CSSDesignToken<string>;
+export const spacingHorizontalXL = "--spacingHorizontalXL";
 
 // @public (undocumented)
-export const spacingHorizontalXS: CSSDesignToken<string>;
+export const spacingHorizontalXS = "--spacingHorizontalXS";
 
 // @public (undocumented)
-export const spacingHorizontalXXL: CSSDesignToken<string>;
+export const spacingHorizontalXXL = "--spacingHorizontalXXL";
 
 // @public (undocumented)
-export const spacingHorizontalXXS: CSSDesignToken<string>;
+export const spacingHorizontalXXS = "--spacingHorizontalXXS";
 
 // @public (undocumented)
-export const spacingHorizontalXXXL: CSSDesignToken<string>;
+export const spacingHorizontalXXXL = "--spacingHorizontalXXXL";
 
 // @public (undocumented)
-export const spacingVerticalL: CSSDesignToken<string>;
+export const spacingVerticalL = "--spacingVerticalL";
 
 // @public (undocumented)
-export const spacingVerticalM: CSSDesignToken<string>;
+export const spacingVerticalM = "--spacingVerticalM";
 
 // @public (undocumented)
-export const spacingVerticalMNudge: CSSDesignToken<string>;
+export const spacingVerticalMNudge = "--spacingVerticalMNudge";
 
 // @public (undocumented)
-export const spacingVerticalNone: CSSDesignToken<string>;
+export const spacingVerticalNone = "--spacingVerticalNone";
 
 // @public (undocumented)
-export const spacingVerticalS: CSSDesignToken<string>;
+export const spacingVerticalS = "--spacingVerticalS";
 
 // @public (undocumented)
-export const spacingVerticalSNudge: CSSDesignToken<string>;
+export const spacingVerticalSNudge = "--spacingVerticalSNudge";
 
 // @public (undocumented)
-export const spacingVerticalXL: CSSDesignToken<string>;
+export const spacingVerticalXL = "--spacingVerticalXL";
 
 // @public (undocumented)
-export const spacingVerticalXS: CSSDesignToken<string>;
+export const spacingVerticalXS = "--spacingVerticalXS";
 
 // @public (undocumented)
-export const spacingVerticalXXL: CSSDesignToken<string>;
+export const spacingVerticalXXL = "--spacingVerticalXXL";
 
 // @public (undocumented)
-export const spacingVerticalXXS: CSSDesignToken<string>;
+export const spacingVerticalXXS = "--spacingVerticalXXS";
 
 // @public (undocumented)
-export const spacingVerticalXXXL: CSSDesignToken<string>;
+export const spacingVerticalXXXL = "--spacingVerticalXXXL";
 
 // @public
 export class Spinner extends FASTProgressRing {
@@ -2092,16 +2164,16 @@ export const SpinnerStyles: ElementStyles;
 export const SpinnerTemplate: ElementViewTemplate<Spinner>;
 
 // @public (undocumented)
-export const strokeWidthThick: CSSDesignToken<string>;
+export const strokeWidthThick = "--strokeWidthThick";
 
 // @public (undocumented)
-export const strokeWidthThicker: CSSDesignToken<string>;
+export const strokeWidthThicker = "--strokeWidthThicker";
 
 // @public (undocumented)
-export const strokeWidthThickest: CSSDesignToken<string>;
+export const strokeWidthThickest = "--strokeWidthThickest";
 
 // @public (undocumented)
-export const strokeWidthThin: CSSDesignToken<string>;
+export const strokeWidthThin = "--strokeWidthThin";
 
 // @public (undocumented)
 const styles: ElementStyles;
diff --git a/packages/web-components/scripts/compile.js b/packages/web-components/scripts/compile.js
index 85478f77ca3e9..c3a36e96a3139 100644
--- a/packages/web-components/scripts/compile.js
+++ b/packages/web-components/scripts/compile.js
@@ -40,6 +40,9 @@ function compile() {
     console.log(chalk.blueBright(`compile: building workspace dependencies: ${workspaceDependencies}`));
     execSync(`lage build --to ${workspaceDependencies}`, { stdio: 'inherit' });
 
+    console.log(chalk.blueBright(`compile: generating design tokens`));
+    execSync(`node ./scripts/generate-tokens.cjs`, { stdio: 'inherit' });
+
     console.log(chalk.blueBright(`compile: running tsc`));
     execSync(`tsc -p tsconfig.lib-generated.json`, { stdio: 'inherit' });
     execSync(`tsc -p tsconfig.spec-generated.json`, { stdio: 'inherit' });
diff --git a/packages/web-components/scripts/generate-tokens.cjs b/packages/web-components/scripts/generate-tokens.cjs
new file mode 100644
index 0000000000000..2ac80334800f4
--- /dev/null
+++ b/packages/web-components/scripts/generate-tokens.cjs
@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const pkg = require('@fluentui/tokens');
+
+const { tokens } = pkg;
+
+const fluentTokens = Object.keys(tokens);
+const comment = '// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE\n';
+
+const generatedTokens = fluentTokens.reduce((acc, t) => {
+  const token = `export const ${t} = '--${t}';\n`;
+  return acc + token;
+}, '');
+
+const dir = path.join(__dirname, '../src', 'theme');
+
+if (!fs.existsSync(dir)) {
+  fs.mkdirSync(dir, { recursive: true });
+}
+
+fs.writeFile(path.join(dir, 'design-tokens.ts'), comment + generatedTokens, err => {
+  if (err) throw err;
+  console.log(chalk.greenBright(`Design token file has been successfully created!`));
+});
diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts
index 3c409014ee82e..e1ed686df2599 100644
--- a/packages/web-components/src/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.styles.ts
@@ -36,12 +36,12 @@ export const styles = css`
     display: grid;
     position: relative;
     vertical-align: middle;
-    padding-inline: ${spacingHorizontalM} ${spacingHorizontalMNudge};
-    border-radius: ${borderRadiusMedium};
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
+    padding-inline: var(${spacingHorizontalM}) var(${spacingHorizontalMNudge});
+    border-radius: var(${borderRadiusMedium});
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase300});
     grid-template-columns: auto auto 1fr auto;
   }
 
@@ -60,9 +60,9 @@ export const styles = css`
     cursor: pointer;
     font-family: inherit;
     height: 44px;
-    color: ${colorNeutralForeground1};
-    background: ${colorTransparentBackground};
-    line-height: ${lineHeightBase300};
+    color: var(${colorNeutralForeground1});
+    background: var(${colorTransparentBackground});
+    line-height: var(${lineHeightBase300});
     height: auto;
     padding: 0;
     font-size: inherit;
@@ -75,7 +75,7 @@ export const styles = css`
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
   }
 
   .icon {
@@ -85,20 +85,20 @@ export const styles = css`
     pointer-events: none;
     position: relative;
     height: 100%;
-    padding-right: ${spacingHorizontalS};
+    padding-right: var(${spacingHorizontalS});
     grid-column: 1 / span 1;
     grid-row: 1;
   }
 
   .region {
-    margin: 0 ${spacingHorizontalM};
+    margin: 0 var(${spacingHorizontalM});
   }
 
   ::slotted([slot='start']),
   ::slotted([slot='end']) {
     justify-content: center;
     align-items: center;
-    padding-right: ${spacingHorizontalS};
+    padding-right: var(${spacingHorizontalS});
     grid-column: 2 / span 1;
     grid-row: 1 / span 1;
   }
@@ -108,16 +108,16 @@ export const styles = css`
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
     outline: none;
-    border: 2px solid ${colorStrokeFocus1};
-    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+    border: 2px solid var(${colorStrokeFocus1});
+    box-shadow: inset 0 0 0 1px var(${colorStrokeFocus2});
   }
 
   /* --- Disabled attr styles --- */
 
   :host([disabled]) .button {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) svg {
     filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
@@ -149,23 +149,23 @@ export const styles = css`
   /* --- Appearance attr styles --- */
 
   .heading {
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
   }
 
   :host([size='small']) .heading {
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
   }
 
   :host([size='large']) .heading {
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
   }
 
   :host([size='extra-large']) .heading {
-    font-size: ${fontSizeBase500};
-    line-height: ${lineHeightBase500};
+    font-size: var(${fontSizeBase500});
+    line-height: var(${lineHeightBase500});
   }
 
   /* --- expand-icon-position attr styles --- */
diff --git a/packages/web-components/src/avatar/avatar.styles.ts b/packages/web-components/src/avatar/avatar.styles.ts
index 3e44ce0ee7b6e..94a014c38c87d 100644
--- a/packages/web-components/src/avatar/avatar.styles.ts
+++ b/packages/web-components/src/avatar/avatar.styles.ts
@@ -125,12 +125,12 @@ export const styles = css`
     flex-shrink: 0;
     width: 32px;
     height: 32px;
-    font-family: ${fontFamilyBase};
-    font-weight: ${fontWeightSemibold};
-    font-size: ${fontSizeBase300};
-    border-radius: ${borderRadiusCircular};
-    color: ${colorNeutralForeground3};
-    background-color: ${colorNeutralBackground6};
+    font-family: var(${fontFamilyBase});
+    font-weight: var(${fontWeightSemibold});
+    font-size: var(${fontSizeBase300});
+    border-radius: var(${borderRadiusCircular});
+    color: var(${colorNeutralForeground3});
+    background-color: var(${colorNeutralBackground6});
     contain: layout style;
   }
 
@@ -145,14 +145,14 @@ export const styles = css`
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
   }
 
   ::slotted([slot='badge']) {
     position: absolute;
     bottom: 0;
     right: 0;
-    box-shadow: 0 0 0 ${strokeWidthThin} ${colorNeutralBackground1};
+    box-shadow: 0 0 0 var(${strokeWidthThin}) var(${colorNeutralBackground1});
   }
 
   :host([size='64']) ::slotted([slot='badge']),
@@ -160,14 +160,14 @@ export const styles = css`
   :host([size='96']) ::slotted([slot='badge']),
   :host([size='120']) ::slotted([slot='badge']),
   :host([size='128']) ::slotted([slot='badge']) {
-    box-shadow: 0 0 0 ${strokeWidthThick} ${colorNeutralBackground1};
+    box-shadow: 0 0 0 var(${strokeWidthThick}) var(${colorNeutralBackground1});
   }
 
   :host([size='16']),
   :host([size='20']),
   :host([size='24']) {
-    font-size: ${fontSizeBase100};
-    font-weight: ${fontWeightRegular};
+    font-size: var(${fontSizeBase100});
+    font-weight: var(${fontWeightRegular});
   }
 
   :host([size='16']) {
@@ -204,7 +204,7 @@ export const styles = css`
   :host([size='28']) {
     width: 28px;
     height: 28px;
-    font-size: ${fontSizeBase200};
+    font-size: var(${fontSizeBase200});
   }
 
   :host([size='36']) {
@@ -219,7 +219,7 @@ export const styles = css`
 
   :host([size='48']),
   :host([size='56']) {
-    font-size: ${fontSizeBase400};
+    font-size: var(${fontSizeBase400});
   }
 
   :host([size='48']) {
@@ -249,7 +249,7 @@ export const styles = css`
   :host([size='64']),
   :host([size='72']),
   :host([size='96']) {
-    font-size: ${fontSizeBase500};
+    font-size: var(${fontSizeBase500});
   }
 
   :host([size='64']) .default-icon,
@@ -289,7 +289,7 @@ export const styles = css`
 
   :host([size='120']),
   :host([size='128']) {
-    font-size: ${fontSizeBase600};
+    font-size: var(${fontSizeBase600});
   }
 
   :host([size='120']) {
@@ -303,186 +303,186 @@ export const styles = css`
   }
 
   :host([shape='square']) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 
   :host([shape='square'][size='20']),
   :host([shape='square'][size='24']) {
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
   }
 
   :host([shape='square'][size='56']),
   :host([shape='square'][size='64']),
   :host([shape='square'][size='72']) {
-    border-radius: ${borderRadiusLarge};
+    border-radius: var(${borderRadiusLarge});
   }
   :host([shape='square'][size='96']),
   :host([shape='square'][size='120']),
   :host([shape='square'][size='128']) {
-    border-radius: ${borderRadiusXLarge};
+    border-radius: var(${borderRadiusXLarge});
   }
 
   :host([data-color='brand']) {
-    color: ${colorNeutralForegroundStaticInverted};
-    background-color: ${colorBrandBackgroundStatic};
+    color: var(${colorNeutralForegroundStaticInverted});
+    background-color: var(${colorBrandBackgroundStatic});
   }
 
   :host([data-color='dark-red']) {
-    color: ${colorPaletteDarkRedForeground2};
-    background-color: ${colorPaletteDarkRedBackground2};
+    color: var(${colorPaletteDarkRedForeground2});
+    background-color: var(${colorPaletteDarkRedBackground2});
   }
 
   :host([data-color='cranberry']) {
-    color: ${colorPaletteCranberryForeground2};
-    background-color: ${colorPaletteCranberryBackground2};
+    color: var(${colorPaletteCranberryForeground2});
+    background-color: var(${colorPaletteCranberryBackground2});
   }
 
   :host([data-color='red']) {
-    color: ${colorPaletteRedForeground2};
-    background-color: ${colorPaletteRedBackground2};
+    color: var(${colorPaletteRedForeground2});
+    background-color: var(${colorPaletteRedBackground2});
   }
 
   :host([data-color='pumpkin']) {
-    color: ${colorPalettePumpkinForeground2};
-    background-color: ${colorPalettePumpkinBackground2};
+    color: var(${colorPalettePumpkinForeground2});
+    background-color: var(${colorPalettePumpkinBackground2});
   }
 
   :host([data-color='peach']) {
-    color: ${colorPalettePeachForeground2};
-    background-color: ${colorPalettePeachBackground2};
+    color: var(${colorPalettePeachForeground2});
+    background-color: var(${colorPalettePeachBackground2});
   }
 
   :host([data-color='marigold']) {
-    color: ${colorPaletteMarigoldForeground2};
-    background-color: ${colorPaletteMarigoldBackground2};
+    color: var(${colorPaletteMarigoldForeground2});
+    background-color: var(${colorPaletteMarigoldBackground2});
   }
 
   :host([data-color='gold']) {
-    color: ${colorPaletteGoldForeground2};
-    background-color: ${colorPaletteGoldBackground2};
+    color: var(${colorPaletteGoldForeground2});
+    background-color: var(${colorPaletteGoldBackground2});
   }
 
   :host([data-color='brass']) {
-    color: ${colorPaletteBrassForeground2};
-    background-color: ${colorPaletteBrassBackground2};
+    color: var(${colorPaletteBrassForeground2});
+    background-color: var(${colorPaletteBrassBackground2});
   }
 
   :host([data-color='brown']) {
-    color: ${colorPaletteBrownForeground2};
-    background-color: ${colorPaletteBrownBackground2};
+    color: var(${colorPaletteBrownForeground2});
+    background-color: var(${colorPaletteBrownBackground2});
   }
 
   :host([data-color='forest']) {
-    color: ${colorPaletteForestForeground2};
-    background-color: ${colorPaletteForestBackground2};
+    color: var(${colorPaletteForestForeground2});
+    background-color: var(${colorPaletteForestBackground2});
   }
 
   :host([data-color='seafoam']) {
-    color: ${colorPaletteSeafoamForeground2};
-    background-color: ${colorPaletteSeafoamBackground2};
+    color: var(${colorPaletteSeafoamForeground2});
+    background-color: var(${colorPaletteSeafoamBackground2});
   }
 
   :host([data-color='dark-green']) {
-    color: ${colorPaletteDarkGreenForeground2};
-    background-color: ${colorPaletteDarkGreenBackground2};
+    color: var(${colorPaletteDarkGreenForeground2});
+    background-color: var(${colorPaletteDarkGreenBackground2});
   }
 
   :host([data-color='light-teal']) {
-    color: ${colorPaletteLightTealForeground2};
-    background-color: ${colorPaletteLightTealBackground2};
+    color: var(${colorPaletteLightTealForeground2});
+    background-color: var(${colorPaletteLightTealBackground2});
   }
 
   :host([data-color='teal']) {
-    color: ${colorPaletteTealForeground2};
-    background-color: ${colorPaletteTealBackground2};
+    color: var(${colorPaletteTealForeground2});
+    background-color: var(${colorPaletteTealBackground2});
   }
 
   :host([data-color='steel']) {
-    color: ${colorPaletteSteelForeground2};
-    background-color: ${colorPaletteSteelBackground2};
+    color: var(${colorPaletteSteelForeground2});
+    background-color: var(${colorPaletteSteelBackground2});
   }
 
   :host([data-color='blue']) {
-    color: ${colorPaletteBlueForeground2};
-    background-color: ${colorPaletteBlueBackground2};
+    color: var(${colorPaletteBlueForeground2});
+    background-color: var(${colorPaletteBlueBackground2});
   }
 
   :host([data-color='royal-blue']) {
-    color: ${colorPaletteRoyalBlueForeground2};
-    background-color: ${colorPaletteRoyalBlueBackground2};
+    color: var(${colorPaletteRoyalBlueForeground2});
+    background-color: var(${colorPaletteRoyalBlueBackground2});
   }
 
   :host([data-color='cornflower']) {
-    color: ${colorPaletteCornflowerForeground2};
-    background-color: ${colorPaletteCornflowerBackground2};
+    color: var(${colorPaletteCornflowerForeground2});
+    background-color: var(${colorPaletteCornflowerBackground2});
   }
 
   :host([data-color='navy']) {
-    color: ${colorPaletteNavyForeground2};
-    background-color: ${colorPaletteNavyBackground2};
+    color: var(${colorPaletteNavyForeground2});
+    background-color: var(${colorPaletteNavyBackground2});
   }
 
   :host([data-color='lavender']) {
-    color: ${colorPaletteLavenderForeground2};
-    background-color: ${colorPaletteLavenderBackground2};
+    color: var(${colorPaletteLavenderForeground2});
+    background-color: var(${colorPaletteLavenderBackground2});
   }
 
   :host([data-color='purple']) {
-    color: ${colorPalettePurpleForeground2};
-    background-color: ${colorPalettePurpleBackground2};
+    color: var(${colorPalettePurpleForeground2});
+    background-color: var(${colorPalettePurpleBackground2});
   }
 
   :host([data-color='grape']) {
-    color: ${colorPaletteGrapeForeground2};
-    background-color: ${colorPaletteGrapeBackground2};
+    color: var(${colorPaletteGrapeForeground2});
+    background-color: var(${colorPaletteGrapeBackground2});
   }
 
   :host([data-color='lilac']) {
-    color: ${colorPaletteLilacForeground2};
-    background-color: ${colorPaletteLilacBackground2};
+    color: var(${colorPaletteLilacForeground2});
+    background-color: var(${colorPaletteLilacBackground2});
   }
 
   :host([data-color='pink']) {
-    color: ${colorPalettePinkForeground2};
-    background-color: ${colorPalettePinkBackground2};
+    color: var(${colorPalettePinkForeground2});
+    background-color: var(${colorPalettePinkBackground2});
   }
 
   :host([data-color='magenta']) {
-    color: ${colorPaletteMagentaForeground2};
-    background-color: ${colorPaletteMagentaBackground2};
+    color: var(${colorPaletteMagentaForeground2});
+    background-color: var(${colorPaletteMagentaBackground2});
   }
 
   :host([data-color='plum']) {
-    color: ${colorPalettePlumForeground2};
-    background-color: ${colorPalettePlumBackground2};
+    color: var(${colorPalettePlumForeground2});
+    background-color: var(${colorPalettePlumBackground2});
   }
 
   :host([data-color='beige']) {
-    color: ${colorPaletteBeigeForeground2};
-    background-color: ${colorPaletteBeigeBackground2};
+    color: var(${colorPaletteBeigeForeground2});
+    background-color: var(${colorPaletteBeigeBackground2});
   }
 
   :host([data-color='mink']) {
-    color: ${colorPaletteMinkForeground2};
-    background-color: ${colorPaletteMinkBackground2};
+    color: var(${colorPaletteMinkForeground2});
+    background-color: var(${colorPaletteMinkBackground2});
   }
 
   :host([data-color='platinum']) {
-    color: ${colorPalettePlatinumForeground2};
-    background-color: ${colorPalettePlatinumBackground2};
+    color: var(${colorPalettePlatinumForeground2});
+    background-color: var(${colorPalettePlatinumBackground2});
   }
 
   :host([data-color='anchor']) {
-    color: ${colorPaletteAnchorForeground2};
-    background-color: ${colorPaletteAnchorBackground2};
+    color: var(${colorPaletteAnchorForeground2});
+    background-color: var(${colorPaletteAnchorBackground2});
   }
 
   :host([active]) {
     /* Work-around for text pixel snapping at the end of the animation */
     transform: perspective(1px);
     transition-property: transform, opacity;
-    transition-duration: ${durationUltraSlow}, ${durationFaster};
-    transition-delay: ${animations.fastEase}, ${animations.nullEasing};
+    transition-duration: var(${durationUltraSlow}), var(${durationFaster});
+    transition-delay: var(${animations.fastEase}), var(${animations.nullEasing});
   }
 
   :host([active])::before {
@@ -494,13 +494,13 @@ export const styles = css`
     right: 0;
     border-radius: inherit;
     transition-property: margin, opacity;
-    transition-duration: ${durationUltraSlow}, ${durationSlower};
-    transition-delay: ${animations.fastEase}, ${animations.nullEasing};
+    transition-duration: var(${durationUltraSlow}), var(${durationSlower});
+    transition-delay: var(${animations.fastEase}), var(${animations.nullEasing});
   }
   :host([active])::before {
-    box-shadow: ${shadow8};
+    box-shadow: var(${shadow8});
     border-style: solid;
-    border-color: ${colorBrandBackgroundStatic};
+    border-color: var(${colorBrandBackgroundStatic});
   }
 
   :host([active][appearance='shadow'])::before {
@@ -509,40 +509,40 @@ export const styles = css`
   }
 
   :host([active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * ${strokeWidthThick});
-    border-width: ${strokeWidthThick};
+    margin: calc(-2 * var(${strokeWidthThick}));
+    border-width: var(${strokeWidthThick});
   }
 
   :host([size='56'][active]:not([appearance='shadow']))::before,
   :host([size='64'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * ${strokeWidthThicker});
-    border-width: ${strokeWidthThicker};
+    margin: calc(-2 * var(${strokeWidthThicker}));
+    border-width: var(${strokeWidthThicker});
   }
 
   :host([size='72'][active]:not([appearance='shadow']))::before,
   :host([size='96'][active]:not([appearance='shadow']))::before,
   :host([size='120'][active]:not([appearance='shadow']))::before,
   :host([size='128'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * ${strokeWidthThickest});
-    border-width: ${strokeWidthThickest};
+    margin: calc(-2 * var(${strokeWidthThickest}));
+    border-width: var(${strokeWidthThickest});
   }
 
   :host([size='20'][active][appearance])::before,
   :host([size='24'][active][appearance])::before,
   :host([size='28'][active][appearance])::before {
-    box-shadow: ${shadow4};
+    box-shadow: var(${shadow4});
   }
 
   :host([size='56'][active][appearance])::before,
   :host([size='64'][active][appearance])::before {
-    box-shadow: ${shadow16};
+    box-shadow: var(${shadow16});
   }
 
   :host([size='72'][active][appearance])::before,
   :host([size='96'][active][appearance])::before,
   :host([size='120'][active][appearance])::before,
   :host([size='128'][active][appearance])::before {
-    box-shadow: ${shadow28};
+    box-shadow: var(${shadow28});
   }
 
   :host([active][appearance='ring'])::before {
@@ -553,16 +553,16 @@ export const styles = css`
     opacity: 0.8;
     transform: scale(0.875);
     transition-property: transform, opacity;
-    transition-duration: ${durationUltraSlow}, ${durationFaster};
-    transition-delay: ${animations.fastOutSlowInMin}, ${animations.nullEasing};
+    transition-duration: var(${durationUltraSlow}), var(${durationFaster});
+    transition-delay: var(${animations.fastOutSlowInMin}), var(${animations.nullEasing});
   }
 
   :host([active='inactive'])::before {
     margin: 0;
     opacity: 0;
     transition-property: margin, opacity;
-    transition-duration: ${durationUltraSlow}, ${durationSlower};
-    transition-delay: ${animations.fastOutSlowInMin}, ${animations.nullEasing};
+    transition-duration: var(${durationUltraSlow}), var(${durationSlower});
+    transition-delay: var(${animations.fastOutSlowInMin}), var(${animations.nullEasing});
   }
 
   @media screen and (prefers-reduced-motion: reduce) {
diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts
index 64da6c5d16470..b93d12d4b9fc1 100644
--- a/packages/web-components/src/badge/badge.styles.ts
+++ b/packages/web-components/src/badge/badge.styles.ts
@@ -14,17 +14,17 @@ import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../them
  */
 export const styles = css`
   :host([shape='square']) {
-    border-radius: ${borderRadiusNone};
+    border-radius: var(${borderRadiusNone});
   }
 
   :host([shape='rounded']) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 
   :host([shape='rounded'][size='tiny']),
   :host([shape='rounded'][size='extra-small']),
   :host([shape='rounded'][size='small']) {
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
   }
 
   ${badgeSizeStyles}
diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
index 3dad8aa3be793..a64b8e026e3db 100644
--- a/packages/web-components/src/button/button.styles.ts
+++ b/packages/web-components/src/button/button.styles.ts
@@ -62,7 +62,7 @@ export const styles = css`
   ${display('inline-flex')}
 
   :host {
-    --icon-spacing: ${spacingHorizontalSNudge};
+    --icon-spacing: var(${spacingHorizontalSNudge});
     contain: layout style;
     vertical-align: middle;
   }
@@ -76,19 +76,19 @@ export const styles = css`
     margin: 0;
     min-height: 32px;
     outline-style: none;
-    background-color: ${colorNeutralBackground1};
-    color: ${colorNeutralForeground1};
-    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
-    padding: 0 ${spacingHorizontalM};
+    background-color: var(${colorNeutralBackground1});
+    color: var(${colorNeutralForeground1});
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke1});
+    padding: 0 var(${spacingHorizontalM});
     min-width: 96px;
-    border-radius: ${borderRadiusMedium};
-    font-size: ${fontSizeBase300};
-    font-family: ${fontFamilyBase};
-    font-weight: ${fontWeightSemibold};
-    line-height: ${lineHeightBase300};
-    transition-duration: ${durationFaster};
+    border-radius: var(${borderRadiusMedium});
+    font-size: var(${fontSizeBase300});
+    font-family: var(${fontFamilyBase});
+    font-weight: var(${fontWeightSemibold});
+    line-height: var(${lineHeightBase300});
+    transition-duration: var(${durationFaster});
     transition-property: background, border, color;
-    transition-timing-function: ${curveEasyEase};
+    transition-timing-function: var(${curveEasyEase});
     cursor: pointer;
   }
 
@@ -97,22 +97,22 @@ export const styles = css`
   }
 
   :host(:hover) .control {
-    background-color: ${colorNeutralBackground1Hover};
-    color: ${colorNeutralForeground1Hover};
-    border-color: ${colorNeutralStroke1Hover};
+    background-color: var(${colorNeutralBackground1Hover});
+    color: var(${colorNeutralForeground1Hover});
+    border-color: var(${colorNeutralStroke1Hover});
   }
 
   :host(:hover:active) .control {
-    background-color: ${colorNeutralBackground1Pressed};
-    border-color: ${colorNeutralStroke1Pressed};
-    color: ${colorNeutralForeground1Pressed};
+    background-color: var(${colorNeutralBackground1Pressed});
+    border-color: var(${colorNeutralStroke1Pressed});
+    color: var(${colorNeutralForeground1Pressed});
     outline-style: none;
   }
 
   :host .control:focus-visible {
-    border-color: ${colorTransparentStroke};
-    outline: ${strokeWidthThick} solid ${colorTransparentStroke};
-    box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
+    border-color: var(${colorTransparentStroke});
+    outline: var(${strokeWidthThick}) solid var(${colorTransparentStroke});
+    box-shadow: var(${shadow4}), 0 0 0 2px var(${colorStrokeFocus2});
   }
 
   @media screen and (prefers-reduced-motion: reduce) {
@@ -142,17 +142,17 @@ export const styles = css`
   }
 
   :host([size='small']) {
-    --icon-spacing: ${spacingHorizontalXS};
+    --icon-spacing: var(${spacingHorizontalXS});
   }
 
   :host([size='small']) .control {
     min-height: 24px;
     min-width: 64px;
-    padding: 0 ${spacingHorizontalS};
-    border-radius: ${borderRadiusSmall};
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
-    font-weight: ${fontWeightRegular};
+    padding: 0 var(${spacingHorizontalS});
+    border-radius: var(${borderRadiusSmall});
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
+    font-weight: var(${fontWeightRegular});
   }
 
   :host([size='small'][icon-only]) .control {
@@ -162,10 +162,10 @@ export const styles = css`
 
   :host([size='large']) .control {
     min-height: 40px;
-    border-radius: ${borderRadiusLarge};
-    padding: 0 ${spacingHorizontalL};
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
+    border-radius: var(${borderRadiusLarge});
+    padding: 0 var(${spacingHorizontalL});
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
   }
 
   :host([size='large'][icon-only]) .control {
@@ -181,37 +181,37 @@ export const styles = css`
 
   :host([shape='circular']) .control,
   :host([shape='circular']) .control:focus-visible {
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
   }
 
   :host([shape='square']) .control,
   :host([shape='square']) .control:focus-visible {
-    border-radius: ${borderRadiusNone};
+    border-radius: var(${borderRadiusNone});
   }
 
   :host([appearance='primary']) .control {
-    background-color: ${colorBrandBackground};
-    color: ${colorNeutralForegroundOnBrand};
+    background-color: var(${colorBrandBackground});
+    color: var(${colorNeutralForegroundOnBrand});
     border-color: transparent;
   }
 
   :host([appearance='primary']:hover) .control {
-    background-color: ${colorBrandBackgroundHover};
+    background-color: var(${colorBrandBackgroundHover});
   }
 
   :host([appearance='primary']:hover) .control,
   :host([appearance='primary']:hover:active) .control {
     border-color: transparent;
-    color: ${colorNeutralForegroundOnBrand};
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host([appearance='primary']:hover:active) .control {
-    background-color: ${colorBrandBackgroundPressed};
+    background-color: var(${colorBrandBackgroundPressed});
   }
 
   :host([appearance='primary']) .control:focus-visible {
-    border-color: ${colorNeutralForegroundOnBrand};
-    box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
+    border-color: var(${colorNeutralForegroundOnBrand});
+    box-shadow: var(${shadow2}), 0 0 0 2px var(${colorStrokeFocus2});
   }
 
   :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])) .control,
@@ -221,69 +221,69 @@ export const styles = css`
   }
 
   :host([appearance='outline']) .control {
-    background-color: ${colorTransparentBackground};
+    background-color: var(${colorTransparentBackground});
   }
 
   :host([appearance='outline']:hover) .control {
-    background-color: ${colorTransparentBackgroundHover};
+    background-color: var(${colorTransparentBackgroundHover});
   }
 
   :host([appearance='outline']:hover:active) .control {
-    background-color: ${colorTransparentBackgroundPressed};
+    background-color: var(${colorTransparentBackgroundPressed});
   }
 
   :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])) .control,
   :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover) .control,
   :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) .control {
-    background-color: ${colorTransparentBackground};
+    background-color: var(${colorTransparentBackground});
   }
 
   :host([appearance='subtle']) .control {
-    background-color: ${colorSubtleBackground};
-    color: ${colorNeutralForeground2};
+    background-color: var(${colorSubtleBackground});
+    color: var(${colorNeutralForeground2});
     border-color: transparent;
   }
 
   :host([appearance='subtle']:hover) .control {
-    background-color: ${colorSubtleBackgroundHover};
-    color: ${colorNeutralForeground2Hover};
+    background-color: var(${colorSubtleBackgroundHover});
+    color: var(${colorNeutralForeground2Hover});
     border-color: transparent;
   }
 
   :host([appearance='subtle']:hover:active) .control {
-    background-color: ${colorSubtleBackgroundPressed};
-    color: ${colorNeutralForeground2Pressed};
+    background-color: var(${colorSubtleBackgroundPressed});
+    color: var(${colorNeutralForeground2Pressed});
     border-color: transparent;
   }
 
   :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])) .control,
   :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover) .control,
   :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) .control {
-    background-color: ${colorTransparentBackground};
+    background-color: var(${colorTransparentBackground});
     border-color: transparent;
   }
 
   :host([appearance='subtle']:hover) ::slotted(svg) {
-    fill: ${colorNeutralForeground2BrandHover};
+    fill: var(${colorNeutralForeground2BrandHover});
   }
 
   :host([appearance='subtle']:hover:active) ::slotted(svg) {
-    fill: ${colorNeutralForeground2BrandPressed};
+    fill: var(${colorNeutralForeground2BrandPressed});
   }
 
   :host([appearance='transparent']) .control {
-    background-color: ${colorTransparentBackground};
-    color: ${colorNeutralForeground2};
+    background-color: var(${colorTransparentBackground});
+    color: var(${colorNeutralForeground2});
   }
 
   :host([appearance='transparent']:hover) .control {
-    background-color: ${colorTransparentBackgroundHover};
-    color: ${colorNeutralForeground2BrandHover};
+    background-color: var(${colorTransparentBackgroundHover});
+    color: var(${colorNeutralForeground2BrandHover});
   }
 
   :host([appearance='transparent']:hover:active) .control {
-    background-color: ${colorTransparentBackgroundPressed};
-    color: ${colorNeutralForeground2BrandPressed};
+    background-color: var(${colorTransparentBackgroundPressed});
+    color: var(${colorNeutralForeground2BrandPressed});
   }
 
   :host([appearance='transparent']) .control,
@@ -296,16 +296,16 @@ export const styles = css`
   :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover) .control,
   :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) .control {
     border-color: transparent;
-    background-color: ${colorTransparentBackground};
+    background-color: var(${colorTransparentBackground});
   }
 
   :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])) .control,
   :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover) .control,
   :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active)
     .control {
-    background-color: ${colorNeutralBackgroundDisabled};
-    border-color: ${colorNeutralStrokeDisabled};
-    color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralBackgroundDisabled});
+    border-color: var(${colorNeutralStrokeDisabled});
+    color: var(${colorNeutralForegroundDisabled});
     cursor: not-allowed;
   }
 `.withBehaviors(
diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
index a54bc22950587..6b54944c53843 100644
--- a/packages/web-components/src/checkbox/checkbox.styles.ts
+++ b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -46,10 +46,10 @@ export const styles = css`
     user-select: none;
     vertical-align: middle;
     cursor: pointer;
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    color: ${colorNeutralForeground3};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    color: var(${colorNeutralForeground3});
     position: relative;
   }
 
@@ -58,10 +58,10 @@ export const styles = css`
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
     outline: none;
-    border: 2px solid ${colorStrokeFocus1};
-    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+    border: 2px solid var(${colorStrokeFocus1});
+    box-shadow: inset 0 0 0 1px var(${colorStrokeFocus2});
   }
 
   .control {
@@ -72,20 +72,20 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
+    margin: var(${spacingVerticalS}) var(${spacingHorizontalS});
     fill: currentcolor;
     height: 16px;
     width: 16px;
-    border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
-    border-radius: ${borderRadiusSmall};
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStrokeAccessible});
+    border-radius: var(${borderRadiusSmall});
     outline: none;
   }
   .label {
     align-self: center;
     cursor: inherit;
-    padding-inline: ${spacingHorizontalS};
-    padding-bottom: ${spacingVerticalS};
-    padding-top: ${spacingVerticalS};
+    padding-inline: var(${spacingHorizontalS});
+    padding-bottom: var(${spacingVerticalS});
+    padding-top: var(${spacingVerticalS});
   }
   .label__hidden {
     display: none;
@@ -95,7 +95,7 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${colorNeutralForegroundInverted};
+    color: var(${colorNeutralForegroundInverted});
     font-size: 12px;
     margin: auto;
     opacity: 0;
@@ -104,42 +104,42 @@ export const styles = css`
     position: absolute;
     width: 8px;
     height: 8px;
-    border-radius: ${borderRadiusSmall};
-    background-color: ${colorCompoundBrandForeground1};
+    border-radius: var(${borderRadiusSmall});
+    background-color: var(${colorCompoundBrandForeground1});
     opacity: 0;
   }
   :host(:hover) {
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
   }
   :host(:hover) .control {
-    border-color: ${colorNeutralStrokeAccessibleHover};
+    border-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host(:hover) .indeterminate-indicator {
-    background-color: ${colorCompoundBrandForeground1Hover};
+    background-color: var(${colorCompoundBrandForeground1Hover});
   }
   :host(:active) .control {
-    border-color: ${colorNeutralStrokeAccessiblePressed};
+    border-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host(:active) .indeterminate-indicator {
-    background-color: ${colorCompoundBrandForeground1Pressed};
+    background-color: var(${colorCompoundBrandForeground1Pressed});
   }
   :host([aria-checked='true']),
   :host([aria-checked='mixed']),
   :host(:active) {
-    color: ${colorNeutralForeground1};
+    color: var(${colorNeutralForeground1});
   }
   :host([aria-checked='true']) .control {
-    background-color: ${colorCompoundBrandBackground};
+    background-color: var(${colorCompoundBrandBackground});
   }
   :host([aria-checked='true']:hover) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
-    background-color: ${colorCompoundBrandBackgroundHover};
+    border-color: var(${colorCompoundBrandStrokeHover});
+    background-color: var(${colorCompoundBrandBackgroundHover});
   }
   :host([aria-checked='true']:active) .control {
-    background-color: ${colorCompoundBrandBackgroundPressed};
+    background-color: var(${colorCompoundBrandBackgroundPressed});
   }
   :host([aria-checked='mixed']:hover) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
+    border-color: var(${colorCompoundBrandStrokeHover});
   }
   :host([aria-checked='true']) .checked-indicator,
   :host([aria-checked='mixed']) .indeterminate-indicator {
@@ -147,19 +147,19 @@ export const styles = css`
   }
   :host([aria-checked='true']) .control,
   :host([aria-checked='mixed']) .control {
-    border-color: ${colorCompoundBrandStroke};
+    border-color: var(${colorCompoundBrandStroke});
   }
   :host([aria-checked='mixed']:active) .control,
   :host([aria-checked='true']:active) .control {
-    border-color: ${colorCompoundBrandStrokePressed};
+    border-color: var(${colorCompoundBrandStrokePressed});
   }
   :host([label-position='before']) {
     flex-direction: row-reverse;
   }
   :host([label-position='before']) .label {
-    padding-inline: ${spacingHorizontalS} ${spacingHorizontalXS};
-    padding-top: ${spacingVerticalS};
-    padding-bottom: ${spacingVerticalS};
+    padding-inline: var(${spacingHorizontalS}) var(${spacingHorizontalXS});
+    padding-top: var(${spacingVerticalS});
+    padding-bottom: var(${spacingVerticalS});
   }
   :host([size='large']) .control {
     width: 20px;
@@ -175,22 +175,22 @@ export const styles = css`
   }
   :host([shape='circular']) .control,
   :host([shape='circular']) .indeterminate-indicator {
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
   }
   :host([disabled]) .control,
   :host([aria-checked='mixed'][disabled]) .control,
   :host([aria-checked='true'][disabled]) .control {
-    background-color: ${colorTransparentBackgroundHover};
-    border-color: ${colorNeutralStrokeDisabled};
+    background-color: var(${colorTransparentBackgroundHover});
+    border-color: var(${colorNeutralStrokeDisabled});
   }
   :host([aria-checked='true'][disabled]) .checked-indicator,
   :host([disabled]) ::slotted([slot='start']),
   :host([disabled]) .label,
   :host([aria-checked='mixed'][disabled]) .label,
   :host([aria-checked='true'][disabled]) .label {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) .indeterminate-indicator {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
 `;
diff --git a/packages/web-components/src/compound-button/compound-button.styles.ts b/packages/web-components/src/compound-button/compound-button.styles.ts
index 66493e56950dd..463f9ed509c50 100644
--- a/packages/web-components/src/compound-button/compound-button.styles.ts
+++ b/packages/web-components/src/compound-button/compound-button.styles.ts
@@ -30,8 +30,8 @@ export const styles = css`
     padding-top: 14px;
     padding-inline: 12px;
     padding-bottom: 16px;
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
   }
 
   .content {
@@ -41,10 +41,10 @@ export const styles = css`
   }
 
   ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
     line-height: 100%;
-    font-size: ${fontSizeBase200};
-    font-weight: ${fontWeightRegular};
+    font-size: var(${fontSizeBase200});
+    font-weight: var(${fontWeightRegular});
   }
 
   ::slotted(svg),
@@ -55,35 +55,35 @@ export const styles = css`
   }
 
   :host(:hover) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2Hover};
+    color: var(${colorNeutralForeground2Hover});
   }
 
   :host(:active) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2Pressed};
+    color: var(${colorNeutralForeground2Pressed});
   }
 
   :host(:is([appearance='primary'], [appearance='primary']:hover, [appearance='primary']:active))
     ::slotted([slot='description']) {
-    color: ${colorNeutralForegroundOnBrand};
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host(:is([appearance='subtle'], [appearance='subtle']:hover, [appearance='subtle']:active))
     ::slotted([slot='description']),
   :host([appearance='transparent']) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
   }
 
   :host([appearance='transparent']:hover) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2BrandHover};
+    color: var(${colorNeutralForeground2BrandHover});
   }
 
   :host([appearance='transparent']:active) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2BrandPressed};
+    color: var(${colorNeutralForeground2BrandPressed});
   }
 
   :host(:is([disabled], [disabled][appearance], [disabled-focusable], [disabled-focusable][appearance]))
     ::slotted([slot='description']) {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
 
   :host([size='small']) .control {
@@ -94,29 +94,29 @@ export const styles = css`
   :host([icon-only]) .control {
     min-width: 52px;
     max-width: 52px;
-    padding: ${spacingHorizontalSNudge};
+    padding: var(${spacingHorizontalSNudge});
   }
 
   :host([icon-only][size='small']) .control {
     min-width: 48px;
     max-width: 48px;
-    padding: ${spacingHorizontalXS};
+    padding: var(${spacingHorizontalXS});
   }
 
   :host([icon-only][size='large']) .control {
     min-width: 56px;
     max-width: 56px;
-    padding: ${spacingHorizontalS};
+    padding: var(${spacingHorizontalS});
   }
 
   :host([size='large']) .control {
     padding-top: 18px;
     padding-inline: 16px;
     padding-bottom: 20px;
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
   }
   :host([size='large']) ::slotted([slot='description']) {
-    font-size: ${fontSizeBase300};
+    font-size: var(${fontSizeBase300});
   }
 `;
diff --git a/packages/web-components/src/counter-badge/counter-badge.styles.ts b/packages/web-components/src/counter-badge/counter-badge.styles.ts
index 7db498fccc673..cd91b3ac065ab 100644
--- a/packages/web-components/src/counter-badge/counter-badge.styles.ts
+++ b/packages/web-components/src/counter-badge/counter-badge.styles.ts
@@ -7,13 +7,13 @@ import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js
  */
 export const styles = css`
   :host([shape='rounded']) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 
   :host([shape='rounded'][size='tiny']),
   :host([shape='rounded'][size='extra-small']),
   :host([shape='rounded'][size='small']) {
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
   }
 
   ${badgeSizeStyles}
diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts
index 5185d9468f022..7cb5a1019a283 100644
--- a/packages/web-components/src/dialog/dialog.styles.ts
+++ b/packages/web-components/src/dialog/dialog.styles.ts
@@ -28,18 +28,18 @@ export const styles = css`
   ${display('flex')}
 
   :host {
-    --dialog-backdrop: ${colorBackgroundOverlay};
+    --dialog-backdrop: var(${colorBackgroundOverlay});
   }
 
   dialog {
-    background: ${colorNeutralBackground1};
-    border: ${strokeWidthThin} solid ${colorTransparentStroke};
+    background: var(${colorNeutralBackground1});
+    border: var(${strokeWidthThin}) solid var(${colorTransparentStroke});
     z-index: 2;
     margin: auto auto;
     max-width: 100%;
     width: 100vw;
-    border-radius: ${borderRadiusXLarge};
-    box-shadow: ${shadow64};
+    border-radius: var(${borderRadiusXLarge});
+    box-shadow: var(${shadow64});
     max-height: 100vh;
     height: fit-content;
     overflow: unset;
@@ -58,16 +58,16 @@ export const styles = css`
     flex-direction: column;
     overflow: unset;
     max-height: calc(100vh - 48px);
-    padding: ${spacingVerticalXXL} ${spacingHorizontalXXL};
+    padding: var(${spacingVerticalXXL}) var(${spacingHorizontalXXL});
   }
 
   .title {
-    font-size: ${fontSizeBase500};
-    line-height: ${lineHeightBase500};
-    font-weight: ${fontWeightSemibold};
-    font-family: ${fontFamilyBase};
-    color: ${colorNeutralForeground1};
-    margin-bottom: ${spacingVerticalS};
+    font-size: var(${fontSizeBase500});
+    line-height: var(${lineHeightBase500});
+    font-weight: var(${fontWeightSemibold});
+    font-family: var(${fontFamilyBase});
+    color: var(${colorNeutralForeground1});
+    margin-bottom: var(${spacingVerticalS});
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
@@ -77,11 +77,11 @@ export const styles = css`
   .content {
     vertical-align: top;
     min-height: 32px;
-    color: ${colorNeutralForeground1};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    font-weight: ${fontWeightRegular};
-    font-family: ${fontFamilyBase};
+    color: var(${colorNeutralForeground1});
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    font-weight: var(${fontWeightRegular});
+    font-family: var(${fontFamilyBase});
     overflow-y: auto;
     box-sizing: border-box;
   }
@@ -91,8 +91,8 @@ export const styles = css`
     grid-column-start: 1;
     flex-direction: column;
     max-width: 100vw;
-    row-gap: ${spacingVerticalS};
-    padding-top: ${spacingVerticalXXL};
+    row-gap: var(${spacingVerticalS});
+    padding-top: var(${spacingVerticalXXL});
     justify-self: stretch;
     width: 100%;
   }
@@ -113,8 +113,8 @@ export const styles = css`
       flex-direction: row;
       justify-content: flex-end;
       align-items: center;
-      column-gap: ${spacingHorizontalS};
-      padding-top: ${spacingVerticalS};
+      column-gap: var(${spacingHorizontalS});
+      padding-top: var(${spacingVerticalS});
       box-sizing: border-box;
     }
   }
diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts
index b7d6fe788b7f5..c30399f4e6bb8 100644
--- a/packages/web-components/src/divider/divider.styles.ts
+++ b/packages/web-components/src/divider/divider.styles.ts
@@ -28,12 +28,12 @@ export const styles = css`
   :host::after,
   :host::before {
     align-self: center;
-    background: ${colorNeutralStroke2};
+    background: var(${colorNeutralStroke2});
     box-sizing: border-box;
     content: '';
     display: flex;
     flex-grow: 1;
-    height: ${strokeWidthThin};
+    height: var(${strokeWidthThin});
   }
 
   :host([inset]) {
@@ -41,10 +41,10 @@ export const styles = css`
   }
 
   :host ::slotted(*) {
-    color: ${colorNeutralForeground2};
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase200};
-    font-weight: ${fontWeightRegular};
+    color: var(${colorNeutralForeground2});
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase200});
+    font-weight: var(${fontWeightRegular});
     margin: 0;
     padding: 0 12px;
   }
@@ -85,7 +85,7 @@ export const styles = css`
 
   :host([orientation='vertical'])::before,
   :host([orientation='vertical'])::after {
-    width: ${strokeWidthThin};
+    width: var(${strokeWidthThin});
     min-height: 20px;
     height: 100%;
   }
@@ -106,24 +106,24 @@ export const styles = css`
 
   :host([appearance='strong'])::before,
   :host([appearance='strong'])::after {
-    background: ${colorNeutralStroke1};
+    background: var(${colorNeutralStroke1});
   }
   :host([appearance='strong']) ::slotted(*) {
-    color: ${colorNeutralForeground1};
+    color: var(${colorNeutralForeground1});
   }
   :host([appearance='brand'])::before,
   :host([appearance='brand'])::after {
-    background: ${colorBrandStroke1};
+    background: var(${colorBrandStroke1});
   }
   :host([appearance='brand']) ::slotted(*) {
-    color: ${colorBrandForeground1};
+    color: var(${colorBrandForeground1});
   }
   :host([appearance='subtle'])::before,
   :host([appearance='subtle'])::after {
-    background: ${colorNeutralStroke3};
+    background: var(${colorNeutralStroke3});
   }
   :host([appearance='subtle']) ::slotted(*) {
-    color: ${colorNeutralForeground3};
+    color: var(${colorNeutralForeground3});
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
diff --git a/packages/web-components/src/image/image.styles.ts b/packages/web-components/src/image/image.styles.ts
index ee49997014ecf..0d9cc5632ad02 100644
--- a/packages/web-components/src/image/image.styles.ts
+++ b/packages/web-components/src/image/image.styles.ts
@@ -27,7 +27,7 @@ export const styles = css`
     height: auto;
   }
   :host([bordered]) ::slotted(img) {
-    border: ${strokeWidthThin} solid ${colorNeutralStroke2};
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke2});
   }
   :host([fit='none']) ::slotted(img) {
     object-fit: none;
@@ -54,12 +54,12 @@ export const styles = css`
     width: 100%;
   }
   :host([shadow]) ::slotted(img) {
-    box-shadow: ${shadow4};
+    box-shadow: var(${shadow4});
   }
   :host([shape='circular']) ::slotted(img) {
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
   }
   :host([shape='rounded']) ::slotted(img) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 `;
diff --git a/packages/web-components/src/label/label.styles.ts b/packages/web-components/src/label/label.styles.ts
index 0d22439dbf9d9..e525d045df016 100644
--- a/packages/web-components/src/label/label.styles.ts
+++ b/packages/web-components/src/label/label.styles.ts
@@ -23,30 +23,30 @@ export const styles = css`
   ${display('flex')}
 
   :host {
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    font-weight: ${fontWeightRegular};
-    color: ${colorNeutralForeground1};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    font-weight: var(${fontWeightRegular});
+    color: var(${colorNeutralForeground1});
   }
   .asterisk {
-    color: ${colorPaletteRedForeground1};
-    margin-left: ${spacingHorizontalXS};
+    color: var(${colorPaletteRedForeground1});
+    margin-left: var(${spacingHorizontalXS});
   }
   :host([size='small']) {
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
   }
   :host([size='large']) {
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
-    font-weight: ${fontWeightSemibold};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
+    font-weight: var(${fontWeightSemibold});
   }
   :host([weight='semibold']) {
-    font-weight: ${fontWeightSemibold};
+    font-weight: var(${fontWeightSemibold});
   }
   :host([disabled]),
   :host([disabled]) .asterisk {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
 `;
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
index 6dca44664b28e..1948807e25cb6 100644
--- a/packages/web-components/src/menu-item/menu-item.styles.ts
+++ b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -33,10 +33,10 @@ export const styles = css`
     align-items: center;
     grid-gap: 4px;
     height: 32px;
-    background: ${colorNeutralBackground1};
-    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
-    border-radius: ${borderRadiusMedium};
-    color: ${colorNeutralForeground2};
+    background: var(${colorNeutralBackground1});
+    font: var(${fontWeightRegular}) var(${fontSizeBase300}) / var(${lineHeightBase300}) var(${fontFamilyBase});
+    border-radius: var(${borderRadiusMedium});
+    color: var(${colorNeutralForeground2});
     padding: 0 10px;
     cursor: pointer;
     overflow: visible;
@@ -44,7 +44,7 @@ export const styles = css`
   }
 
   :host(:hover) {
-    background: ${colorNeutralBackground1Hover};
+    background: var(${colorNeutralBackground1Hover});
   }
 
   .content {
@@ -68,14 +68,14 @@ export const styles = css`
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
   }
 
   .expand-collapse-glyph-container,
   ::slotted([slot='start']),
   ::slotted([slot='end']) {
     height: 32px;
-    font-size: ${fontSizeBase500};
+    font-size: var(${fontSizeBase500});
     width: fit-content;
   }
 
@@ -84,8 +84,8 @@ export const styles = css`
   }
 
   ::slotted([slot='end']) {
-    color: ${colorNeutralForeground3};
-    font: ${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};
+    color: var(${colorNeutralForeground3});
+    font: var(${fontWeightRegular}) var(${fontSizeBase200}) / var(${lineHeightBase200}) var(${fontFamilyBase});
     white-space: nowrap;
     grid-column: 4 / span 1;
     justify-self: flex-end;
@@ -99,36 +99,36 @@ export const styles = css`
   :host(:hover) .input-container,
   :host(:hover) .expand-collapse-glyph-container,
   :host(:hover) .content {
-    color: ${colorNeutralForeground2Hover};
+    color: var(${colorNeutralForeground2Hover});
   }
 
   :host([icon]:hover) ::slotted([slot='start']) {
-    color: ${colorCompoundBrandForeground1Hover};
+    color: var(${colorCompoundBrandForeground1Hover});
   }
 
   :host(:active) {
-    background-color: ${colorNeutralBackground1Selected};
+    background-color: var(${colorNeutralBackground1Selected});
   }
 
   :host(:active) .input-container,
   :host(:active) .expand-collapse-glyph-container,
   :host(:active) .content {
-    color: ${colorNeutralForeground2Pressed};
+    color: var(${colorNeutralForeground2Pressed});
   }
 
   :host(:active) ::slotted([slot='start']) {
-    color: ${colorCompoundBrandForeground1Pressed};
+    color: var(${colorCompoundBrandForeground1Pressed});
   }
 
   :host([disabled]) {
-    background-color: ${colorNeutralBackgroundDisabled};
+    background-color: var(${colorNeutralBackgroundDisabled});
   }
 
   :host([disabled]) .content,
   :host([disabled]) .expand-collapse-glyph-container,
   :host([disabled]) ::slotted([slot='end']),
   :host([disabled]) ::slotted([slot='start']) {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
 
   :host([data-indent]) {
diff --git a/packages/web-components/src/menu-list/menu-list.styles.ts b/packages/web-components/src/menu-list/menu-list.styles.ts
index 444418aa0af74..df34ec03c9802 100644
--- a/packages/web-components/src/menu-list/menu-list.styles.ts
+++ b/packages/web-components/src/menu-list/menu-list.styles.ts
@@ -19,10 +19,10 @@ export const styles = css`
     max-width: 300px;
     min-width: 160px;
     width: auto;
-    background-color: ${colorNeutralBackground1};
-    border: 1px solid ${colorTransparentStroke};
-    border-radius: ${borderRadiusMedium};
-    box-shadow: ${shadow16};
+    background-color: var(${colorNeutralBackground1});
+    border: 1px solid var(${colorTransparentStroke});
+    border-radius: var(${borderRadiusMedium});
+    box-shadow: var(${shadow16});
     padding: 4px;
     row-gap: 2px;
   }
diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts
index c5c266870f51f..82e08df884b4d 100644
--- a/packages/web-components/src/progress-bar/progress-bar.styles.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts
@@ -23,7 +23,7 @@ export const styles = css`
     align-items: center;
     height: 2px;
     overflow-x: hidden;
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
     contain: content;
   }
 
@@ -40,50 +40,50 @@ export const styles = css`
   }
 
   :host([validation-state='error']) .determinate {
-    background-color: ${colorPaletteRedBackground3};
+    background-color: var(${colorPaletteRedBackground3});
   }
 
   :host([validation-state='error']) .indeterminate-indicator-1,
   :host([validation-state='error']) .indeterminate-indicator-2 {
     background: linear-gradient(
       to right,
-      ${colorPaletteRedBackground2} 0%,
-      ${colorPaletteRedBackground3} 50%,
-      ${colorPaletteRedBackground2}
+      var(${colorPaletteRedBackground2}) 0%,
+      var(${colorPaletteRedBackground3}) 50%,
+      var(${colorPaletteRedBackground2})
     );
   }
 
   :host([validation-state='warning']) .determinate {
-    background-color: ${colorPaletteDarkOrangeBackground3};
+    background-color: var(${colorPaletteDarkOrangeBackground3});
   }
 
   :host([validation-state='warning']) .indeterminate-indicator-1,
   :host([validation-state='warning']) .indeterminate-indicator-2 {
     background: linear-gradient(
       to right,
-      ${colorPaletteDarkOrangeBackground2} 0%,
-      ${colorPaletteDarkOrangeBackground3} 50%,
-      ${colorPaletteDarkOrangeBackground2}
+      var(${colorPaletteDarkOrangeBackground2}) 0%,
+      var(${colorPaletteDarkOrangeBackground3}) 50%,
+      var(${colorPaletteDarkOrangeBackground2})
     );
   }
 
   :host([validation-state='success']) .determinate {
-    background-color: ${colorPaletteGreenBackground3};
+    background-color: var(${colorPaletteGreenBackground3});
   }
 
   :host([validation-state='success']) .indeterminate-indicator-1,
   :host([validation-state='success']) .indeterminate-indicator-2 {
     background: linear-gradient(
       to right,
-      ${colorPaletteGreenBackground2} 0%,
-      ${colorPaletteGreenBackground3} 50%,
-      ${colorPaletteGreenBackground2}
+      var(${colorPaletteGreenBackground2}) 0%,
+      var(${colorPaletteGreenBackground3}) 50%,
+      var(${colorPaletteGreenBackground2})
     );
   }
 
   .progress {
-    background-color: ${colorNeutralBackground6};
-    border-radius: ${borderRadiusMedium};
+    background-color: var(${colorNeutralBackground6});
+    border-radius: var(${borderRadiusMedium});
     width: 100%;
     height: 2px;
     display: flex;
@@ -92,8 +92,8 @@ export const styles = css`
   }
 
   .determinate {
-    background-color: ${colorCompoundBrandBackground};
-    border-radius: ${borderRadiusMedium};
+    background-color: var(${colorCompoundBrandBackground});
+    border-radius: var(${borderRadiusMedium});
     height: 2px;
     transition: all 0.2s ease-in-out;
     display: flex;
@@ -105,11 +105,11 @@ export const styles = css`
     height: 100%;
     background: linear-gradient(
       to right,
-      ${colorBrandBackground2} 0%,
-      ${colorCompoundBrandBackground} 50%,
-      ${colorBrandBackground2}
+      var(${colorBrandBackground2}) 0%,
+      var(${colorCompoundBrandBackground}) 50%,
+      var(${colorBrandBackground2})
     );
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
     animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
     width: 40%;
     animation: indeterminate-1 3s infinite;
@@ -121,11 +121,11 @@ export const styles = css`
     height: 100%;
     background: linear-gradient(
       to right,
-      ${colorBrandBackground2} 0%,
-      ${colorCompoundBrandBackground} 50%,
-      ${colorBrandBackground2}
+      var(${colorBrandBackground2}) 0%,
+      var(${colorCompoundBrandBackground}) 50%,
+      var(${colorBrandBackground2})
     );
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
     animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
     width: 60%;
     animation: indeterminate-2 3s infinite;
diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index cf22bfa8f064e..4c14223a93529 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -21,17 +21,17 @@ export const styles = css`
   :host {
     align-items: flex-start;
     flex-direction: column;
-    row-gap: ${spacingVerticalS};
+    row-gap: var(${spacingVerticalS});
   }
   :host([disabled]) ::slotted([role='radio']) {
-    --control-border-color: ${colorNeutralForegroundDisabled};
-    --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
-    --state-color: ${colorNeutralForegroundDisabled};
+    --control-border-color: var(${colorNeutralForegroundDisabled});
+    --checked-indicator-background-color: var(${colorNeutralForegroundDisabled});
+    --state-color: var(${colorNeutralForegroundDisabled});
   }
   ::slotted([slot='label']) {
-    color: ${colorNeutralForeground1};
-    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
-    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
+    color: var(${colorNeutralForeground1});
+    padding: var(${spacingVerticalS}) var(${spacingHorizontalS}) var(${spacingVerticalS}) var(${spacingHorizontalXS});
+    font: var(${fontWeightRegular}) var(${fontSizeBase300}) / var(${lineHeightBase300}) var(${fontFamilyBase});
     cursor: default;
   }
   .positioning-region {
@@ -46,12 +46,12 @@ export const styles = css`
     flex-direction: row;
   }
   :host([orientation='horizontal']) ::slotted([role='radio']) {
-    padding-inline-end: ${spacingHorizontalS};
+    padding-inline-end: var(${spacingHorizontalS});
   }
   :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
     display: flex;
     flex-direction: column;
-    padding-inline: ${spacingHorizontalS};
+    padding-inline: var(${spacingHorizontalS});
     height: auto;
     align-items: center;
     justify-content: center;
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index bb9ea56fc2c03..1a518174f4651 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -33,7 +33,7 @@ export const styles = css`
   :host {
     grid-auto-flow: column;
     grid-template-columns: max-content;
-    gap: ${spacingHorizontalXS};
+    gap: var(${spacingHorizontalXS});
     align-items: center;
     height: 32px;
     cursor: pointer;
@@ -41,23 +41,23 @@ export const styles = css`
     position: relative;
     user-select: none;
     color: blue;
-    color: var(--state-color, ${colorNeutralForeground3});
-    padding-inline-end: ${spacingHorizontalS};
-    --control-border-color: ${colorNeutralStrokeAccessible};
-    --checked-indicator-background-color: ${colorCompoundBrandForeground1};
-    --state-color: ${colorNeutralForeground3};
+    color: var(--state-color, var(${colorNeutralForeground3}));
+    padding-inline-end: var(${spacingHorizontalS});
+    --control-border-color: var(${colorNeutralStrokeAccessible});
+    --checked-indicator-background-color: var(${colorCompoundBrandForeground1});
+    --state-color: var(${colorNeutralForeground3});
   }
   :host([disabled]) {
-    --control-border-color: ${colorNeutralForegroundDisabled};
-    --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
-    --state-color: ${colorNeutralForegroundDisabled};
+    --control-border-color: var(${colorNeutralForegroundDisabled});
+    --checked-indicator-background-color: var(${colorNeutralForegroundDisabled});
+    --state-color: var(${colorNeutralForegroundDisabled});
   }
   .label {
     cursor: pointer;
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase300});
   }
   .label__hidden {
     display: none;
@@ -65,67 +65,67 @@ export const styles = css`
   .control {
     box-sizing: border-box;
     align-items: center;
-    border: 1px solid var(--control-border-color, ${colorNeutralStrokeAccessible});
-    border-radius: ${borderRadiusCircular};
+    border: 1px solid var(--control-border-color, var(${colorNeutralStrokeAccessible}));
+    border-radius: var(${borderRadiusCircular});
     display: flex;
     height: 16px;
     justify-content: center;
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
+    margin: var(${spacingVerticalS}) var(${spacingHorizontalS});
     position: relative;
     width: 16px;
     justify-self: center;
   }
   .checked-indicator {
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
     height: 10px;
     opacity: 0;
     width: 10px;
   }
   :host([aria-checked='false']:hover) .control {
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
   }
   :host(:focus-visible) {
-    border-radius: ${borderRadiusSmall};
-    box-shadow: 0 0 0 3px ${colorStrokeFocus2};
-    outline: 1px solid ${colorStrokeFocus1};
+    border-radius: var(${borderRadiusSmall});
+    box-shadow: 0 0 0 3px var(${colorStrokeFocus2});
+    outline: 1px solid var(${colorStrokeFocus1});
   }
   :host(:hover) .control {
-    border-color: ${colorNeutralStrokeAccessibleHover};
+    border-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host(:active) .control {
-    border-color: ${colorNeutralStrokeAccessiblePressed};
+    border-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host([aria-checked='true']) .checked-indicator {
     opacity: 1;
   }
   :host([aria-checked='true']) .control {
-    border-color: var(--control-border-color, ${colorNeutralStrokeAccessible});
+    border-color: var(--control-border-color, var(${colorNeutralStrokeAccessible}));
   }
   :host([aria-checked='true']) .checked-indicator {
-    background-color: var(--checked-indicator-background-color, ${colorCompoundBrandForeground1});
+    background-color: var(--checked-indicator-background-color, var(${colorCompoundBrandForeground1}));
   }
   :host([aria-checked='true']:hover) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
+    border-color: var(${colorCompoundBrandStrokeHover});
   }
   :host([aria-checked='true']:hover) .checked-indicator {
-    background-color: ${colorCompoundBrandStrokeHover};
+    background-color: var(${colorCompoundBrandStrokeHover});
   }
   :host([aria-checked='true']:active) .control {
-    border-color: ${colorCompoundBrandStrokePressed};
+    border-color: var(${colorCompoundBrandStrokePressed});
   }
   :host([aria-checked='true']:active) .checked-indicator {
-    background: ${colorCompoundBrandForeground1Pressed};
+    background: var(${colorCompoundBrandForeground1Pressed});
   }
   :host([disabled]) {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
     pointer-events: none;
   }
   :host([disabled]) .control {
     pointer-events: none;
-    border-color: ${colorNeutralForegroundDisabled};
+    border-color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) .checked-indicator {
-    background: ${colorNeutralForegroundDisabled};
+    background: var(${colorNeutralForegroundDisabled});
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index 15be14428b164..7e3afeca3ed0e 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -35,7 +35,7 @@ export const styles = css`
     outline: none;
     cursor: pointer;
     user-select: none;
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
     touch-action: pan-y;
     min-width: calc(var(--thumb-size) * 1px);
     width: 100%;
@@ -62,8 +62,8 @@ export const styles = css`
   }
 
   :host(:focus-visible) {
-    box-shadow: 0 0 0 2pt ${colorStrokeFocus2};
-    outline: 1px solid ${colorStrokeFocus1};
+    box-shadow: 0 0 0 2pt var(${colorStrokeFocus2});
+    outline: 1px solid var(${colorStrokeFocus1});
   }
 
   .thumb-cursor:focus {
@@ -97,19 +97,20 @@ export const styles = css`
   .thumb-cursor {
     height: var(--thumb-size);
     width: var(--thumb-size);
-    background-color: ${colorBrandBackground};
-    border-radius: ${borderRadiusCircular};
-    box-shadow: inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1}, 0 0 0 1px ${colorNeutralStroke1};
+    background-color: var(${colorBrandBackground});
+    border-radius: var(${borderRadiusCircular});
+    box-shadow: inset 0 0 0 var(--thumb-padding) var(${colorNeutralBackground1}), 0 0 0 1px var(${colorNeutralStroke1});
   }
   .thumb-cursor:hover {
-    background-color: ${colorCompoundBrandBackgroundHover};
+    background-color: var(${colorCompoundBrandBackgroundHover});
   }
   .thumb-cursor:active {
-    background-color: ${colorCompoundBrandBackgroundPressed};
+    background-color: var(${colorCompoundBrandBackgroundPressed});
   }
   :host([disabled]) .thumb-cursor {
-    background-color: ${colorNeutralForegroundDisabled};
-    box-shadow: inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1}, 0 0 0 1px ${colorNeutralStrokeDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
+    box-shadow: inset 0 0 0 var(--thumb-padding) var(${colorNeutralBackground1}),
+      0 0 0 1px var(${colorNeutralStrokeDisabled});
   }
 
   /* Positioning Region */
@@ -132,23 +133,23 @@ export const styles = css`
   .track {
     align-self: start;
     position: absolute;
-    background-color: ${colorNeutralStrokeAccessible};
-    border-radius: ${borderRadiusMedium};
+    background-color: var(${colorNeutralStrokeAccessible});
+    border-radius: var(${borderRadiusMedium});
     overflow: hidden;
   }
 
   :host([step]) .track::after {
     content: '';
     position: absolute;
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
     width: 100%;
     inset: 0 2px;
     background-image: repeating-linear-gradient(
       var(--slider-direction),
       #0000 0%,
       #0000 calc(var(--step-rate) - 1px),
-      ${colorNeutralBackground1} calc(var(--step-rate) - 1px),
-      ${colorNeutralBackground1} var(--step-rate)
+      var(${colorNeutralBackground1}) calc(var(--step-rate) - 1px),
+      var(${colorNeutralBackground1}) var(--step-rate)
     );
   }
 
@@ -157,7 +158,7 @@ export const styles = css`
   }
 
   :host([disabled]) .track {
-    background-color: ${colorNeutralBackgroundDisabled};
+    background-color: var(${colorNeutralBackgroundDisabled});
   }
 
   :host([orientation='horizontal']) .track {
@@ -176,23 +177,23 @@ export const styles = css`
     grid-column: 2 / auto;
   }
   .track-start {
-    background-color: ${colorCompoundBrandBackground};
+    background-color: var(${colorCompoundBrandBackground});
     position: absolute;
     height: 100%;
     left: 0;
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
   :host([disabled]) .track-start {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
   :host(:hover) .track-start {
-    background-color: ${colorCompoundBrandBackgroundHover};
+    background-color: var(${colorCompoundBrandBackgroundHover});
   }
   :host([disabled]:hover) .track-start {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
   .track-start:active {
-    background-color: ${colorCompoundBrandBackgroundPressed};
+    background-color: var(${colorCompoundBrandBackgroundPressed});
   }
   :host([orientation='vertical']) .track-start {
     height: auto;
diff --git a/packages/web-components/src/spinner/spinner.styles.ts b/packages/web-components/src/spinner/spinner.styles.ts
index c1d58b7613707..33a6e253fb592 100644
--- a/packages/web-components/src/spinner/spinner.styles.ts
+++ b/packages/web-components/src/spinner/spinner.styles.ts
@@ -43,7 +43,7 @@ export const styles = css`
 
   .background {
     fill: none;
-    stroke: ${colorBrandStroke2};
+    stroke: var(${colorBrandStroke2});
     stroke-width: 1.5px;
   }
 
@@ -52,7 +52,7 @@ export const styles = css`
   }
 
   .determinate {
-    stroke: ${colorBrandStroke1};
+    stroke: var(${colorBrandStroke1});
     fill: none;
     stroke-width: 1.5px;
     stroke-linecap: round;
@@ -62,11 +62,11 @@ export const styles = css`
   }
 
   :host([appearance='inverted']) .determinite {
-    stroke: ${colorNeutralStrokeOnBrand2};
+    stroke: var(${colorNeutralStrokeOnBrand2});
   }
 
   .indeterminate-indicator-1 {
-    stroke: ${colorBrandStroke1};
+    stroke: var(${colorBrandStroke1});
     fill: none;
     stroke-width: 1.5px;
     stroke-linecap: round;
@@ -77,7 +77,7 @@ export const styles = css`
   }
 
   :host([appearance='inverted']) .indeterminate-indicator-1 {
-    stroke: ${colorNeutralStrokeOnBrand2};
+    stroke: var(${colorNeutralStrokeOnBrand2});
   }
 
   @keyframes spin-infinite {
diff --git a/packages/web-components/src/styles/partials/badge.partials.ts b/packages/web-components/src/styles/partials/badge.partials.ts
index 22e8062c33a7d..654a14a0fd1b9 100644
--- a/packages/web-components/src/styles/partials/badge.partials.ts
+++ b/packages/web-components/src/styles/partials/badge.partials.ts
@@ -59,17 +59,17 @@ export const badgeBaseStyles = css.partial`
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
-    font-family: ${fontFamilyBase};
-    font-weight: ${fontWeightSemibold};
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
+    font-family: var(${fontFamilyBase});
+    font-weight: var(${fontWeightSemibold});
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
     min-width: 20px;
     height: 20px;
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
-    border-radius: ${borderRadiusCircular};
-    border-color: ${colorTransparentStroke};
-    background-color: ${colorBrandBackground};
-    color: ${colorNeutralForegroundOnBrand};
+    padding-inline: calc(var(${spacingHorizontalXS}) + var(${textPadding}));
+    border-radius: var(${borderRadiusCircular});
+    border-color: var(${colorTransparentStroke});
+    background-color: var(${colorBrandBackground});
+    color: var(${colorNeutralForegroundOnBrand});
     contain: content;
   }
 
@@ -85,7 +85,7 @@ export const badgeBaseStyles = css.partial`
     bottom: 0;
     right: 0;
     border-style: solid;
-    border-width: ${strokeWidthThin};
+    border-width: var(${strokeWidthThin});
     border-color: inherit;
     border-radius: inherit;
   }
@@ -121,9 +121,9 @@ export const badgeSizeStyles = css.partial`
   :host([size='small']) {
     min-width: 16px;
     height: 16px;
-    font-size: ${fontSizeBase100};
-    line-height: ${lineHeightBase100};
-    padding-inline: calc(${spacingHorizontalXXS} + ${textPadding});
+    font-size: var(${fontSizeBase100});
+    line-height: var(${lineHeightBase100});
+    padding-inline: calc(var(${spacingHorizontalXXS}) + var(${textPadding}));
   }
   :host([size='small']) ::slotted(svg) {
     font-size: 12px;
@@ -131,9 +131,9 @@ export const badgeSizeStyles = css.partial`
   :host([size='large']) {
     min-width: 24px;
     height: 24px;
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
+    padding-inline: calc(var(${spacingHorizontalXS}) + var(${textPadding}));
   }
   :host([size='large']) ::slotted(svg) {
     font-size: 16px;
@@ -141,9 +141,9 @@ export const badgeSizeStyles = css.partial`
   :host([size='extra-large']) {
     min-width: 32px;
     height: 32px;
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalSNudge} + ${textPadding});
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
+    padding-inline: calc(var(${spacingHorizontalSNudge}) + var(${textPadding}));
   }
   :host([size='extra-large']) ::slotted(svg) {
     font-size: 20px;
@@ -158,38 +158,38 @@ export const badgeSizeStyles = css.partial`
  */
 export const badgeFilledStyles = css.partial`
   :host([color='danger']) {
-    background-color: ${colorPaletteRedBackground3};
-    color: ${colorNeutralForegroundOnBrand};
+    background-color: var(${colorPaletteRedBackground3});
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host([color='important']) {
-    background-color: ${colorNeutralForeground1};
-    color: ${colorNeutralBackground1};
+    background-color: var(${colorNeutralForeground1});
+    color: var(${colorNeutralBackground1});
   }
 
   :host([color='informative']) {
-    background-color: ${colorNeutralBackground5};
-    color: ${colorNeutralForeground3};
+    background-color: var(${colorNeutralBackground5});
+    color: var(${colorNeutralForeground3});
   }
 
   :host([color='severe']) {
-    background-color: ${colorPaletteDarkOrangeBackground3};
-    color: ${colorNeutralForegroundOnBrand};
+    background-color: var(${colorPaletteDarkOrangeBackground3});
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host([color='subtle']) {
-    background-color: ${colorNeutralBackground1};
-    color: ${colorNeutralForeground1};
+    background-color: var(${colorNeutralBackground1});
+    color: var(${colorNeutralForeground1});
   }
 
   :host([color='success']) {
-    background-color: ${colorPaletteGreenBackground3};
-    color: ${colorNeutralForegroundOnBrand};
+    background-color: var(${colorPaletteGreenBackground3});
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host([color='warning']) {
-    background-color: ${colorPaletteYellowBackground3};
-    color: ${colorNeutralForeground1Static};
+    background-color: var(${colorPaletteYellowBackground3});
+    color: var(${colorNeutralForeground1Static});
   }
 `;
 
@@ -199,36 +199,36 @@ export const badgeFilledStyles = css.partial`
  */
 export const badgeGhostStyles = css.partial`
   :host([appearance='ghost']) {
-    color: ${colorBrandForeground1};
+    color: var(${colorBrandForeground1});
     background-color: initial;
   }
 
   :host([appearance='ghost'][color='danger']) {
-    color: ${colorPaletteRedForeground3};
+    color: var(${colorPaletteRedForeground3});
   }
 
   :host([appearance='ghost'][color='important']) {
-    color: ${colorNeutralForeground1};
+    color: var(${colorNeutralForeground1});
   }
 
   :host([appearance='ghost'][color='informative']) {
-    color: ${colorNeutralForeground3};
+    color: var(${colorNeutralForeground3});
   }
 
   :host([appearance='ghost'][color='severe']) {
-    color: ${colorPaletteDarkOrangeForeground3};
+    color: var(${colorPaletteDarkOrangeForeground3});
   }
 
   :host([appearance='ghost'][color='subtle']) {
-    color: ${colorNeutralForegroundInverted};
+    color: var(${colorNeutralForegroundInverted});
   }
 
   :host([appearance='ghost'][color='success']) {
-    color: ${colorPaletteGreenForeground3};
+    color: var(${colorPaletteGreenForeground3});
   }
 
   :host([appearance='ghost'][color='warning']) {
-    color: ${colorPaletteYellowForeground2};
+    color: var(${colorPaletteYellowForeground2});
   }
 `;
 
@@ -239,38 +239,38 @@ export const badgeGhostStyles = css.partial`
 export const badgeOutlineStyles = css.partial`
   :host([appearance='outline']) {
     border-color: currentColor;
-    color: ${colorBrandForeground1};
+    color: var(${colorBrandForeground1});
     background-color: initial;
   }
 
   :host([appearance='outline'][color='danger']) {
-    color: ${colorPaletteRedForeground3};
+    color: var(${colorPaletteRedForeground3});
   }
 
   :host([appearance='outline'][color='important']) {
-    color: ${colorNeutralForeground3};
-    border-color: ${colorNeutralStrokeAccessible};
+    color: var(${colorNeutralForeground3});
+    border-color: var(${colorNeutralStrokeAccessible});
   }
 
   :host([appearance='outline'][color='informative']) {
-    color: ${colorNeutralForeground3};
-    border-color: ${colorNeutralStroke2};
+    color: var(${colorNeutralForeground3});
+    border-color: var(${colorNeutralStroke2});
   }
 
   :host([appearance='outline'][color='severe']) {
-    color: ${colorPaletteDarkOrangeForeground3};
+    color: var(${colorPaletteDarkOrangeForeground3});
   }
 
   :host([appearance='outline'][color='subtle']) {
-    color: ${colorNeutralForegroundStaticInverted};
+    color: var(${colorNeutralForegroundStaticInverted});
   }
 
   :host([appearance='outline'][color='success']) {
-    color: ${colorPaletteGreenForeground2};
+    color: var(${colorPaletteGreenForeground2});
   }
 
   :host([appearance='outline'][color='warning']) {
-    color: ${colorPaletteYellowForeground2};
+    color: var(${colorPaletteYellowForeground2});
   }
 `;
 
@@ -280,50 +280,50 @@ export const badgeOutlineStyles = css.partial`
  */
 export const badgeTintStyles = css.partial`
   :host([appearance='tint']) {
-    background-color: ${colorBrandBackground2};
-    color: ${colorBrandForeground2};
-    border-color: ${colorBrandStroke2};
+    background-color: var(${colorBrandBackground2});
+    color: var(${colorBrandForeground2});
+    border-color: var(${colorBrandStroke2});
   }
 
   :host([appearance='tint'][color='danger']) {
-    background-color: ${colorPaletteRedBackground1};
-    color: ${colorPaletteRedForeground1};
-    border-color: ${colorPaletteRedBorder1};
+    background-color: var(${colorPaletteRedBackground1});
+    color: var(${colorPaletteRedForeground1});
+    border-color: var(${colorPaletteRedBorder1});
   }
 
   :host([appearance='tint'][color='important']) {
-    background-color: ${colorNeutralForeground3};
-    color: ${colorNeutralBackground1};
-    border-color: ${colorTransparentStroke};
+    background-color: var(${colorNeutralForeground3});
+    color: var(${colorNeutralBackground1});
+    border-color: var(${colorTransparentStroke});
   }
 
   :host([appearance='tint'][color='informative']) {
-    background-color: ${colorNeutralBackground4};
-    color: ${colorNeutralForeground3};
-    border-color: ${colorNeutralStroke2};
+    background-color: var(${colorNeutralBackground4});
+    color: var(${colorNeutralForeground3});
+    border-color: var(${colorNeutralStroke2});
   }
 
   :host([appearance='tint'][color='severe']) {
-    background-color: ${colorPaletteDarkOrangeBackground1};
-    color: ${colorPaletteDarkOrangeForeground1};
-    border-color: ${colorPaletteDarkOrangeBorder1};
+    background-color: var(${colorPaletteDarkOrangeBackground1});
+    color: var(${colorPaletteDarkOrangeForeground1});
+    border-color: var(${colorPaletteDarkOrangeBorder1});
   }
 
   :host([appearance='tint'][color='subtle']) {
-    background-color: ${colorNeutralBackground1};
-    color: ${colorNeutralForeground3};
-    border-color: ${colorNeutralStroke2};
+    background-color: var(${colorNeutralBackground1});
+    color: var(${colorNeutralForeground3});
+    border-color: var(${colorNeutralStroke2});
   }
 
   :host([appearance='tint'][color='success']) {
-    background-color: ${colorPaletteGreenBackground1};
-    color: ${colorPaletteGreenForeground1};
-    border-color: ${colorPaletteGreenBorder2};
+    background-color: var(${colorPaletteGreenBackground1});
+    color: var(${colorPaletteGreenForeground1});
+    border-color: var(${colorPaletteGreenBorder2});
   }
 
   :host([appearance='tint'][color='warning']) {
-    background-color: ${colorPaletteYellowBackground1};
-    color: ${colorPaletteYellowForeground2};
-    border-color: ${colorPaletteYellowBorder1};
+    background-color: var(${colorPaletteYellowBackground1});
+    color: var(${colorPaletteYellowForeground2});
+    border-color: var(${colorPaletteYellowBorder1});
   }
 `;
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index bb0f14dc84a4f..a11b52b33839f 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -61,12 +61,12 @@ export const styles = css`
   }
   .label {
     position: relative;
-    color: ${colorNeutralForeground1};
-    line-height: ${lineHeightBase300};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    font-family: ${fontFamilyBase};
-    padding: ${spacingVerticalXS} ${spacingHorizontalXS};
+    color: var(${colorNeutralForeground1});
+    line-height: var(${lineHeightBase300});
+    font-size: var(${fontSizeBase300});
+    font-weight: var(${fontWeightRegular});
+    font-family: var(${fontFamilyBase});
+    padding: var(${spacingVerticalXS}) var(${spacingHorizontalXS});
     cursor: pointer;
   }
   .label__hidden {
@@ -75,83 +75,83 @@ export const styles = css`
   .switch {
     display: flex;
     align-items: center;
-    padding: 0 ${spacingHorizontalXXS};
+    padding: 0 var(${spacingHorizontalXXS});
     box-sizing: border-box;
     width: 40px;
     height: 20px;
-    background-color: ${colorTransparentBackground};
-    border: 1px solid ${colorNeutralStrokeAccessible};
-    border-radius: ${borderRadiusCircular};
+    background-color: var(${colorTransparentBackground});
+    border: 1px solid var(${colorNeutralStrokeAccessible});
+    border-radius: var(${borderRadiusCircular});
     outline: none;
     cursor: pointer;
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
+    margin: var(${spacingVerticalS}) var(${spacingHorizontalS});
   }
   :host(:hover) .switch {
     background: none;
-    border-color: ${colorNeutralStrokeAccessibleHover};
+    border-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host(:active) .switch {
-    border-color: ${colorNeutralStrokeAccessiblePressed};
+    border-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host([disabled]) .switch,
   :host([readonly]) .switch {
-    border: 1px solid ${colorNeutralStrokeDisabled};
+    border: 1px solid var(${colorNeutralStrokeDisabled});
     background-color: none;
     pointer: default;
   }
   :host([aria-checked='true']) .switch {
-    background: ${colorCompoundBrandBackground};
+    background: var(${colorCompoundBrandBackground});
   }
   :host([aria-checked='true']:hover) .switch {
-    background: ${colorCompoundBrandBackgroundHover};
-    border-color: ${colorCompoundBrandBackgroundHover};
+    background: var(${colorCompoundBrandBackgroundHover});
+    border-color: var(${colorCompoundBrandBackgroundHover});
   }
   :host([aria-checked='true']:active) .switch {
-    background: ${colorCompoundBrandBackgroundPressed};
-    border-color: ${colorCompoundBrandBackgroundPressed};
+    background: var(${colorCompoundBrandBackgroundPressed});
+    border-color: var(${colorCompoundBrandBackgroundPressed});
   }
   :host([aria-checked='true'][disabled]) .switch {
-    background: ${colorNeutralBackgroundDisabled};
-    border-color: ${colorNeutralStrokeDisabled};
+    background: var(${colorNeutralBackgroundDisabled});
+    border-color: var(${colorNeutralStrokeDisabled});
   }
   .checked-indicator {
     height: 14px;
     width: 14px;
     border-radius: 50%;
     margin-inline-start: 0;
-    background-color: ${colorNeutralForeground3};
-    transition-duration: ${durationNormal};
-    transition-timing-function: ${curveEasyEase};
+    background-color: var(${colorNeutralForeground3});
+    transition-duration: var(${durationNormal});
+    transition-timing-function: var(${curveEasyEase});
     transition-property: margin-inline-start;
   }
   :host([aria-checked='true']) .checked-indicator {
-    background-color: ${colorNeutralForegroundInverted};
+    background-color: var(${colorNeutralForegroundInverted});
     margin-inline-start: calc(100% - 14px);
   }
   :host([aria-checked='true']:hover) .checked-indicator {
-    background: ${colorNeutralForegroundInvertedHover};
+    background: var(${colorNeutralForegroundInvertedHover});
   }
   :host([aria-checked='true']:active) .checked-indicator {
-    background: ${colorNeutralForegroundInvertedPressed};
+    background: var(${colorNeutralForegroundInvertedPressed});
   }
   :host(:hover) .checked-indicator {
-    background-color: ${colorNeutralForeground3Hover};
+    background-color: var(${colorNeutralForeground3Hover});
   }
   :host(:active) .checked-indicator {
-    background-color: ${colorNeutralForeground3Pressed};
+    background-color: var(${colorNeutralForeground3Pressed});
   }
   :host([disabled]) .checked-indicator,
   :host([readonly]) .checked-indicator {
-    background: ${colorNeutralForegroundDisabled};
+    background: var(${colorNeutralForegroundDisabled});
   }
   :host([aria-checked='true'][disabled]) .checked-indicator {
-    background: ${colorNeutralForegroundDisabled};
+    background: var(${colorNeutralForegroundDisabled});
   }
 
   :host(:focus-visible) {
-    border-color: ${colorTransparentStroke};
-    outline: ${strokeWidthThick} solid ${colorTransparentStroke};
-    box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
+    border-color: var(${colorTransparentStroke});
+    outline: var(${strokeWidthThick}) solid var(${colorTransparentStroke});
+    box-shadow: var(${shadow4}), 0 0 0 2px var(${colorStrokeFocus2});
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
diff --git a/packages/web-components/src/tab-panel/tab-panel.styles.ts b/packages/web-components/src/tab-panel/tab-panel.styles.ts
index 1440583a4ef32..ece7256a93117 100644
--- a/packages/web-components/src/tab-panel/tab-panel.styles.ts
+++ b/packages/web-components/src/tab-panel/tab-panel.styles.ts
@@ -7,6 +7,6 @@ export const styles = css`
 
   :host {
     box-sizing: border-box;
-    padding: ${spacingHorizontalM} ${spacingHorizontalMNudge};
+    padding: var(${spacingHorizontalM}) var(${spacingHorizontalMNudge});
   }
 `;
diff --git a/packages/web-components/src/tab/tab.styles.ts b/packages/web-components/src/tab/tab.styles.ts
index bff8d2f170d58..afc6407993a4f 100644
--- a/packages/web-components/src/tab/tab.styles.ts
+++ b/packages/web-components/src/tab/tab.styles.ts
@@ -28,14 +28,14 @@ export const styles = css`
     cursor: pointer;
     box-sizing: border-box;
     justify-content: center;
-    line-height: ${lineHeightBase300};
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    color: ${colorNeutralForeground2};
+    line-height: var(${lineHeightBase300});
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    color: var(${colorNeutralForeground2});
     fill: currentcolor;
     grid-row: 1;
-    padding: ${spacingHorizontalM} ${spacingHorizontalMNudge};
-    border-radius: ${borderRadiusMedium};
+    padding: var(${spacingHorizontalM}) var(${spacingHorizontalMNudge});
+    border-radius: var(${borderRadiusMedium});
   }
   :host .tab-content {
     display: inline-flex;
@@ -44,8 +44,8 @@ export const styles = css`
   }
 
   :host([aria-selected='true']) {
-    color: ${colorNeutralForeground1};
-    font-weight: ${fontWeightSemibold};
+    color: var(${colorNeutralForeground1});
+    font-weight: var(${fontWeightSemibold});
   }
 
   /* adds hidden textContent to prevent shifting ui on bold / unbolding of text */
@@ -53,13 +53,13 @@ export const styles = css`
     content: var(--textContent);
     visibility: hidden;
     height: 0;
-    line-height: ${lineHeightBase300};
-    font-weight: ${fontWeightSemibold};
+    line-height: var(${lineHeightBase300});
+    font-weight: var(${fontWeightSemibold});
   }
 
   :host([aria-selected='true'])::after {
-    background-color: ${colorCompoundBrandStroke};
-    border-radius: ${borderRadiusCircular};
+    background-color: var(${colorCompoundBrandStroke});
+    border-radius: var(${borderRadiusCircular});
     content: '';
     inset: 0;
     position: absolute;
@@ -67,8 +67,8 @@ export const styles = css`
   }
 
   :host([aria-selected='false']:hover)::after {
-    background-color: ${colorNeutralStroke1Hover};
-    border-radius: ${borderRadiusCircular};
+    background-color: var(${colorNeutralStroke1Hover});
+    border-radius: var(${borderRadiusCircular});
     content: '';
     inset: 0;
     position: absolute;
@@ -76,7 +76,7 @@ export const styles = css`
   }
 
   :host([aria-selected='true'][disabled])::after {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
 
   ::slotted([slot='start']),
@@ -91,8 +91,8 @@ export const styles = css`
   }
   :host([disabled]) {
     cursor: not-allowed;
-    fill: ${colorNeutralForegroundDisabled};
-    color: ${colorNeutralForegroundDisabled};
+    fill: var(${colorNeutralForegroundDisabled});
+    color: var(${colorNeutralForegroundDisabled});
   }
 
   :host([disabled]:hover)::after {
@@ -104,9 +104,9 @@ export const styles = css`
   }
 
   :host(:focus-visible) {
-    border-radius: ${borderRadiusSmall};
-    box-shadow: 0 0 0 3px ${colorStrokeFocus2};
-    outline: 1px solid ${colorStrokeFocus1};
+    border-radius: var(${borderRadiusSmall});
+    box-shadow: 0 0 0 3px var(${colorStrokeFocus2});
+    outline: 1px solid var(${colorStrokeFocus1});
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts
index a37d97c349c5d..d9138aad5f163 100644
--- a/packages/web-components/src/tabs/tabs.styles.ts
+++ b/packages/web-components/src/tabs/tabs.styles.ts
@@ -32,40 +32,40 @@ export const styles = css`
 
   :host {
     box-sizing: border-box;
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    color: ${colorNeutralForeground2};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    color: var(${colorNeutralForeground2});
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto 1fr;
   }
 
   :host([disabled]) {
     cursor: not-allowed;
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
 
   :host([disabled]) ::slotted(fluent-tab) {
     pointer-events: none;
     cursor: not-allowed;
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) ::slotted(fluent-tab:after) {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) ::slotted(fluent-tab:hover):before {
     content: unset;
   }
 
   :host ::slotted(fluent-tab) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 
   :host ::slotted(fluent-tab[aria-selected='true'])::before {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
 
   .tablist {
@@ -121,43 +121,43 @@ export const styles = css`
   }
 
   :host([appearance='subtle']) ::slotted(fluent-tab:hover) {
-    background-color: ${colorSubtleBackgroundHover};
-    color: ${colorNeutralForeground1Hover};
-    fill: ${colorCompoundBrandForeground1Hover};
+    background-color: var(${colorSubtleBackgroundHover});
+    color: var(${colorNeutralForeground1Hover});
+    fill: var(${colorCompoundBrandForeground1Hover});
   }
 
   :host([appearance='subtle']) ::slotted(fluent-tab:active) {
-    background-color: ${colorSubtleBackgroundPressed};
-    fill: ${colorSubtleBackgroundPressed};
-    color: ${colorNeutralForeground1};
+    background-color: var(${colorSubtleBackgroundPressed});
+    fill: var(${colorSubtleBackgroundPressed});
+    color: var(${colorNeutralForeground1});
   }
 
   :host([size='small']) ::slotted(fluent-tab) {
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    padding: ${spacingVerticalSNudge} ${spacingHorizontalSNudge};
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    padding: var(${spacingVerticalSNudge}) var(${spacingHorizontalSNudge});
   }
 
   :host([size='large']) ::slotted(fluent-tab) {
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
-    padding: ${spacingVerticalL} ${spacingHorizontalMNudge};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
+    padding: var(${spacingVerticalL}) var(${spacingHorizontalMNudge});
   }
 
   /* indicator animation  */
   :host ::slotted(fluent-tab[data-animate='true'])::after {
     transition-property: transform;
-    transition-duration: ${durationSlow};
-    transition-timing-function: ${curveDecelerateMax};
+    transition-duration: var(${durationSlow});
+    transition-timing-function: var(${curveDecelerateMax});
   }
   :host ::slotted(fluent-tab)::after {
-    height: ${strokeWidthThicker};
+    height: var(${strokeWidthThicker});
     margin-top: auto;
     transform-origin: left;
     transform: translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale));
   }
   :host([orientation='vertical']) ::slotted(fluent-tab)::after {
-    width: ${strokeWidthThicker};
+    width: var(${strokeWidthThicker});
     height: unset;
     margin-top: unset;
     transform-origin: top;
@@ -166,8 +166,8 @@ export const styles = css`
 
   /* ::before adds a secondary indicator placeholder that appears right after click on the active tab */
   :host ::slotted(fluent-tab)::before {
-    height: ${strokeWidthThicker};
-    border-radius: ${borderRadiusCircular};
+    height: var(${strokeWidthThicker});
+    border-radius: var(${borderRadiusCircular});
     content: '';
     inset: 0;
     position: absolute;
@@ -175,13 +175,13 @@ export const styles = css`
   }
   :host([orientation='vertical']) ::slotted(fluent-tab)::before {
     height: unset;
-    width: ${strokeWidthThicker};
+    width: var(${strokeWidthThicker});
     margin-inline-end: auto;
     transform-origin: top;
   }
 
   :host ::slotted(fluent-tab[aria-selected='false']:hover)::after {
-    height: ${strokeWidthThicker};
+    height: var(${strokeWidthThicker});
     margin-top: auto;
     transform-origin: left;
   }
@@ -189,42 +189,42 @@ export const styles = css`
     height: unset;
     margin-inline-end: auto;
     transform-origin: top;
-    width: ${strokeWidthThicker};
+    width: var(${strokeWidthThicker});
   }
 
   :host([orientation='vertical']) ::slotted(fluent-tab) {
     align-items: flex-start;
     grid-column: 2;
-    padding-top: ${spacingVerticalSNudge};
-    padding-bottom: ${spacingVerticalSNudge};
+    padding-top: var(${spacingVerticalSNudge});
+    padding-bottom: var(${spacingVerticalSNudge});
   }
   :host([orientation='vertical'][size='small']) ::slotted(fluent-tab) {
-    padding-top: ${spacingVerticalXXS};
-    padding-bottom: ${spacingVerticalXXS};
+    padding-top: var(${spacingVerticalXXS});
+    padding-bottom: var(${spacingVerticalXXS});
   }
   :host([orientation='vertical'][size='large']) ::slotted(fluent-tab) {
-    padding-top: ${spacingVerticalS};
-    padding-bottom: ${spacingVerticalS};
+    padding-top: var(${spacingVerticalS});
+    padding-bottom: var(${spacingVerticalS});
   }
 
   /* horizontal spacing for indicator */
   :host([size='small']) ::slotted(fluent-tab)::after,
   :host([size='small']) ::slotted(fluent-tab)::before,
   :host([size='small']) ::slotted(fluent-tab:hover)::after {
-    right: ${spacingHorizontalSNudge};
-    left: ${spacingHorizontalSNudge};
+    right: var(${spacingHorizontalSNudge});
+    left: var(${spacingHorizontalSNudge});
   }
   :host ::slotted(fluent-tab)::after,
   :host ::slotted(fluent-tab)::before,
   :host ::slotted(fluent-tab:hover)::after {
-    right: ${spacingHorizontalMNudge};
-    left: ${spacingHorizontalMNudge};
+    right: var(${spacingHorizontalMNudge});
+    left: var(${spacingHorizontalMNudge});
   }
   :host([size='large']) ::slotted(fluent-tab)::after,
   :host([size='large']) ::slotted(fluent-tab)::before,
   :host([size='large']) ::slotted(fluent-tab:hover)::after {
-    right: ${spacingHorizontalMNudge};
-    left: ${spacingHorizontalMNudge};
+    right: var(${spacingHorizontalMNudge});
+    left: var(${spacingHorizontalMNudge});
   }
 
   /* vertical spacing for indicator */
@@ -233,23 +233,23 @@ export const styles = css`
   :host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after {
     right: 0;
     left: 0;
-    top: ${spacingVerticalSNudge};
-    bottom: ${spacingVerticalSNudge};
+    top: var(${spacingVerticalSNudge});
+    bottom: var(${spacingVerticalSNudge});
   }
   :host([orientation='vertical']) ::slotted(fluent-tab)::after,
   :host([orientation='vertical']) ::slotted(fluent-tab)::before,
   :host([orientation='vertical']) ::slotted(fluent-tab:hover)::after {
     right: 0;
     left: 0;
-    top: ${spacingVerticalS};
-    bottom: ${spacingVerticalS};
+    top: var(${spacingVerticalS});
+    bottom: var(${spacingVerticalS});
   }
   :host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,
   :host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,
   :host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after {
     right: 0;
     left: 0;
-    top: ${spacingVerticalMNudge};
-    bottom: ${spacingVerticalMNudge};
+    top: var(${spacingVerticalMNudge});
+    bottom: var(${spacingVerticalMNudge});
   }
 `;
diff --git a/packages/web-components/src/text-input/text-input.styles.ts b/packages/web-components/src/text-input/text-input.styles.ts
index 5ff9ef6cc41c7..aebb18715a7c6 100644
--- a/packages/web-components/src/text-input/text-input.styles.ts
+++ b/packages/web-components/src/text-input/text-input.styles.ts
@@ -54,18 +54,18 @@ export const styles = css`
   ${display('block')}
 
   :host {
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase300});
     max-width: 400px;
   }
   .label {
     display: flex;
-    color: ${colorNeutralForeground1};
-    padding-bottom: ${spacingVerticalXS};
+    color: var(${colorNeutralForeground1});
+    padding-bottom: var(${spacingVerticalXS});
     flex-shrink: 0;
-    padding-inline-end: ${spacingHorizontalXS};
+    padding-inline-end: var(${spacingHorizontalXS});
   }
   .label__hidden {
     display: none;
@@ -78,11 +78,11 @@ export const styles = css`
     align-items: center;
     flex-direction: row;
     width: 100%;
-    padding: 0 ${spacingHorizontalMNudge};
-    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
-    border-bottom-color: ${colorNeutralStrokeAccessible};
-    border-radius: ${borderRadiusMedium};
-    gap: ${spacingHorizontalXXS};
+    padding: 0 var(${spacingHorizontalMNudge});
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke1});
+    border-bottom-color: var(${colorNeutralStrokeAccessible});
+    border-radius: var(${borderRadiusMedium});
+    gap: var(${spacingHorizontalXXS});
   }
   .root::after {
     box-sizing: border-box;
@@ -91,25 +91,25 @@ export const styles = css`
     left: -1px;
     bottom: 0px;
     right: -1px;
-    height: max(2px, ${borderRadiusMedium});
-    border-radius: 0 0 ${borderRadiusMedium} ${borderRadiusMedium};
-    border-bottom: 2px solid ${colorCompoundBrandStroke};
+    height: max(2px, var(${borderRadiusMedium}));
+    border-radius: 0 0 var(${borderRadiusMedium}) var(${borderRadiusMedium});
+    border-bottom: 2px solid var(${colorCompoundBrandStroke});
     clip-path: inset(calc(100% - 2px) 1px 0px);
     transform: scaleX(0);
     transition-property: transform;
-    transition-duration: ${durationUltraFast};
-    transition-delay: ${curveAccelerateMid};
+    transition-duration: var(${durationUltraFast});
+    transition-delay: var(${curveAccelerateMid});
   }
   .control {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    color: ${colorNeutralForeground1};
-    border-radius: ${borderRadiusMedium};
-    background: ${colorTransparentBackground};
-    font-family: ${fontFamilyBase};
-    font-weight: ${fontWeightRegular};
-    font-size: ${fontSizeBase300};
+    color: var(${colorNeutralForeground1});
+    border-radius: var(${borderRadiusMedium});
+    background: var(${colorTransparentBackground});
+    font-family: var(${fontFamilyBase});
+    font-weight: var(${fontWeightRegular});
+    font-size: var(${fontSizeBase300});
     border: none;
     background: transparent;
     vertical-align: center;
@@ -119,29 +119,29 @@ export const styles = css`
     border: 0;
   }
   .control::placeholder {
-    color: ${colorNeutralForeground4};
+    color: var(${colorNeutralForeground4});
   }
   :host ::slotted([slot='start']),
   :host ::slotted([slot='end']) {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${colorNeutralForeground3};
-    font-size: ${fontSizeBase500};
+    color: var(${colorNeutralForeground3});
+    font-size: var(${fontSizeBase500});
   }
   :host ::slotted([slot='start']) {
-    padding-right: ${spacingHorizontalXXS};
+    padding-right: var(${spacingHorizontalXXS});
   }
   :host ::slotted([slot='end']) {
-    padding-left: ${spacingHorizontalXXS};
-    gap: ${spacingHorizontalXS};
+    padding-left: var(${spacingHorizontalXXS});
+    gap: var(${spacingHorizontalXS});
   }
   :host(:hover) .root {
-    border-color: ${colorNeutralStroke1Hover};
-    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
+    border-color: var(${colorNeutralStroke1Hover});
+    border-bottom-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host(:active) .root {
-    border-color: ${colorNeutralStroke1Pressed};
+    border-color: var(${colorNeutralStroke1Pressed});
   }
   :host(:focus-within) .root {
     outline: transparent solid 2px;
@@ -150,96 +150,96 @@ export const styles = css`
   :host(:focus-within) .root::after {
     transform: scaleX(1);
     transition-property: transform;
-    transition-duration: ${durationNormal};
-    transition-delay: ${curveDecelerateMid};
+    transition-duration: var(${durationNormal});
+    transition-delay: var(${curveDecelerateMid});
   }
   :host(:focus-within:active) .root:after {
-    border-bottom-color: ${colorCompoundBrandStrokePressed};
+    border-bottom-color: var(${colorCompoundBrandStrokePressed});
   }
   :host([appearance='outline']:focus-within) .root {
-    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke1});
   }
   :host(:focus-within) .control {
-    color: ${colorNeutralForeground1};
+    color: var(${colorNeutralForeground1});
   }
   :host([disabled]) .root {
-    background: ${colorTransparentBackground};
-    border: ${strokeWidthThin} solid ${colorNeutralStrokeDisabled};
+    background: var(${colorTransparentBackground});
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStrokeDisabled});
   }
   :host([disabled]) .control::placeholder,
   :host([disabled]) ::slotted([slot='start']),
   :host([disabled]) ::slotted([slot='end']) {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
   ::selection {
-    color: ${colorNeutralForegroundInverted};
-    background-color: ${colorNeutralBackgroundInverted};
+    color: var(${colorNeutralForegroundInverted});
+    background-color: var(${colorNeutralBackgroundInverted});
   }
   :host([control-size='small']) .control {
-    font-size: ${fontSizeBase200};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase200};
+    font-size: var(${fontSizeBase200});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase200});
   }
   :host([control-size='small']) .root {
     height: 24px;
-    gap: ${spacingHorizontalXXS};
-    padding: 0 ${spacingHorizontalSNudge};
+    gap: var(${spacingHorizontalXXS});
+    padding: 0 var(${spacingHorizontalSNudge});
   }
   :host([control-size='small']) ::slotted([slot='start']),
   :host([control-size='small']) ::slotted([slot='end']) {
-    font-size: ${fontSizeBase400};
+    font-size: var(${fontSizeBase400});
   }
   :host([control-size='large']) .control {
-    font-size: ${fontSizeBase400};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase400};
+    font-size: var(${fontSizeBase400});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase400});
   }
   :host([control-size='large']) .root {
     height: 40px;
-    gap: ${spacingHorizontalS};
-    padding: 0 ${spacingHorizontalM};
+    gap: var(${spacingHorizontalS});
+    padding: 0 var(${spacingHorizontalM});
   }
   :host([control-size='large']) ::slotted([slot='start']),
   :host([control-size='large']) ::slotted([slot='end']) {
-    font-size: ${fontSizeBase600};
+    font-size: var(${fontSizeBase600});
   }
   :host([appearance='underline']) .root {
-    background: ${colorTransparentBackground};
+    background: var(${colorTransparentBackground});
     border: 0;
     border-radius: 0;
-    border-bottom: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
+    border-bottom: var(${strokeWidthThin}) solid var(${colorNeutralStrokeAccessible});
   }
   :host([appearance='underline']:hover) .root {
-    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
+    border-bottom-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host([appearance='underline']:active) .root {
-    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
+    border-bottom-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host([appearance='underline']:focus-within) .root {
     border: 0;
-    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
+    border-bottom-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host([appearance='underline'][disabled]) .root {
-    border-bottom-color: ${colorNeutralStrokeDisabled};
+    border-bottom-color: var(${colorNeutralStrokeDisabled});
   }
   :host([appearance='filled-lighter']) .root,
   :host([appearance='filled-darker']) .root {
-    border: ${strokeWidthThin} solid ${colorTransparentStroke};
-    box-shadow: ${shadow2};
+    border: var(${strokeWidthThin}) solid var(${colorTransparentStroke});
+    box-shadow: var(${shadow2});
   }
   :host([appearance='filled-lighter']) .root {
-    background: ${colorNeutralBackground1};
+    background: var(${colorNeutralBackground1});
   }
   :host([appearance='filled-darker']) .root {
-    background: ${colorNeutralBackground3};
+    background: var(${colorNeutralBackground3});
   }
   :host([appearance='filled-lighter']:hover) .root,
   :host([appearance='filled-darker']:hover) .root {
-    border-color: ${colorTransparentStrokeInteractive};
+    border-color: var(${colorTransparentStrokeInteractive});
   }
   :host([appearance='filled-lighter']:active) .root,
   :host([appearance='filled-darker']:active) .root {
-    border-color: ${colorTransparentStrokeInteractive};
-    background: ${colorNeutralBackground3};
+    border-color: var(${colorTransparentStrokeInteractive});
+    background: var(${colorNeutralBackground3});
   }
 `;
diff --git a/packages/web-components/src/text/text.styles.ts b/packages/web-components/src/text/text.styles.ts
index bbb9afbbea470..020ac52fe33a2 100644
--- a/packages/web-components/src/text/text.styles.ts
+++ b/packages/web-components/src/text/text.styles.ts
@@ -41,10 +41,10 @@ export const styles = css`
   }
 
   ::slotted(*) {
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    font-weight: ${fontWeightRegular};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    font-weight: var(${fontWeightRegular});
     text-align: start;
     white-space: normal;
     overflow: visible;
@@ -77,55 +77,55 @@ export const styles = css`
     text-decoration-line: line-through underline;
   }
   :host([size='100']) ::slotted(*) {
-    font-size: ${fontSizeBase100};
-    line-height: ${lineHeightBase100};
+    font-size: var(${fontSizeBase100});
+    line-height: var(${lineHeightBase100});
   }
   :host([size='200']) ::slotted(*) {
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
   }
   :host([size='400']) ::slotted(*) {
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
   }
   :host([size='500']) ::slotted(*) {
-    font-size: ${fontSizeBase500};
-    line-height: ${lineHeightBase500};
+    font-size: var(${fontSizeBase500});
+    line-height: var(${lineHeightBase500});
   }
   :host([size='600']) ::slotted(*) {
-    font-size: ${fontSizeBase600};
-    line-height: ${lineHeightBase600};
+    font-size: var(${fontSizeBase600});
+    line-height: var(${lineHeightBase600});
   }
   :host([size='700']) ::slotted(*) {
-    font-size: ${fontSizeHero700};
-    line-height: ${lineHeightHero700};
+    font-size: var(${fontSizeHero700});
+    line-height: var(${lineHeightHero700});
   }
   :host([size='800']) ::slotted(*) {
-    font-size: ${fontSizeHero800};
-    line-height: ${lineHeightHero800};
+    font-size: var(${fontSizeHero800});
+    line-height: var(${lineHeightHero800});
   }
   :host([size='900']) ::slotted(*) {
-    font-size: ${fontSizeHero900};
-    line-height: ${lineHeightHero900};
+    font-size: var(${fontSizeHero900});
+    line-height: var(${lineHeightHero900});
   }
   :host([size='1000']) ::slotted(*) {
-    font-size: ${fontSizeHero1000};
-    line-height: ${lineHeightHero1000};
+    font-size: var(${fontSizeHero1000});
+    line-height: var(${lineHeightHero1000});
   }
   :host([font='monospace']) ::slotted(*) {
-    font-family: ${fontFamilyMonospace};
+    font-family: var(${fontFamilyMonospace});
   }
   :host([font='numeric']) ::slotted(*) {
-    font-family: ${fontFamilyNumeric};
+    font-family: var(${fontFamilyNumeric});
   }
   :host([weight='medium']) ::slotted(*) {
-    font-weight: ${fontWeightMedium};
+    font-weight: var(${fontWeightMedium});
   }
   :host([weight='semibold']) ::slotted(*) {
-    font-weight: ${fontWeightSemibold};
+    font-weight: var(${fontWeightSemibold});
   }
   :host([weight='bold']) ::slotted(*) {
-    font-weight: ${fontWeightBold};
+    font-weight: var(${fontWeightBold});
   }
   :host([align='center']) ::slotted(*) {
     text-align: center;
diff --git a/packages/web-components/src/theme/design-tokens.ts b/packages/web-components/src/theme/design-tokens.ts
index 22a43ea341611..bca71cc9836d4 100644
--- a/packages/web-components/src/theme/design-tokens.ts
+++ b/packages/web-components/src/theme/design-tokens.ts
@@ -1,388 +1,385 @@
-import { DesignToken } from '@microsoft/fast-foundation/design-token.js';
-
-const { create } = DesignToken;
-
-export const borderRadiusNone = create<string>('borderRadiusNone');
-export const borderRadiusSmall = create<string>('borderRadiusSmall');
-export const borderRadiusMedium = create<string>('borderRadiusMedium');
-export const borderRadiusLarge = create<string>('borderRadiusLarge');
-export const borderRadiusXLarge = create<string>('borderRadiusXLarge');
-export const borderRadiusCircular = create<string>('borderRadiusCircular');
-export const fontSizeBase100 = create<string>('fontSizeBase100');
-export const fontSizeBase200 = create<string>('fontSizeBase200');
-export const fontSizeBase300 = create<string>('fontSizeBase300');
-export const fontSizeBase400 = create<string>('fontSizeBase400');
-export const fontSizeBase500 = create<string>('fontSizeBase500');
-export const fontSizeBase600 = create<string>('fontSizeBase600');
-export const fontSizeHero700 = create<string>('fontSizeHero700');
-export const fontSizeHero800 = create<string>('fontSizeHero800');
-export const fontSizeHero900 = create<string>('fontSizeHero900');
-export const fontSizeHero1000 = create<string>('fontSizeHero1000');
-export const lineHeightBase100 = create<string>('lineHeightBase100');
-export const lineHeightBase200 = create<string>('lineHeightBase200');
-export const lineHeightBase300 = create<string>('lineHeightBase300');
-export const lineHeightBase400 = create<string>('lineHeightBase400');
-export const lineHeightBase500 = create<string>('lineHeightBase500');
-export const lineHeightBase600 = create<string>('lineHeightBase600');
-export const lineHeightHero700 = create<string>('lineHeightHero700');
-export const lineHeightHero800 = create<string>('lineHeightHero800');
-export const lineHeightHero900 = create<string>('lineHeightHero900');
-export const lineHeightHero1000 = create<string>('lineHeightHero1000');
-export const fontFamilyBase = create<string>('fontFamilyBase');
-export const fontFamilyMonospace = create<string>('fontFamilyMonospace');
-export const fontFamilyNumeric = create<string>('fontFamilyNumeric');
-export const fontWeightRegular = create<string>('fontWeightRegular');
-export const fontWeightMedium = create<string>('fontWeightMedium');
-export const fontWeightSemibold = create<string>('fontWeightSemibold');
-export const fontWeightBold = create<string>('fontWeightBold');
-export const strokeWidthThin = create<string>('strokeWidthThin');
-export const strokeWidthThick = create<string>('strokeWidthThick');
-export const strokeWidthThicker = create<string>('strokeWidthThicker');
-export const strokeWidthThickest = create<string>('strokeWidthThickest');
-export const spacingHorizontalNone = create<string>('spacingHorizontalNone');
-export const spacingHorizontalXXS = create<string>('spacingHorizontalXXS');
-export const spacingHorizontalXS = create<string>('spacingHorizontalXS');
-export const spacingHorizontalSNudge = create<string>('spacingHorizontalSNudge');
-export const spacingHorizontalS = create<string>('spacingHorizontalS');
-export const spacingHorizontalMNudge = create<string>('spacingHorizontalMNudge');
-export const spacingHorizontalM = create<string>('spacingHorizontalM');
-export const spacingHorizontalL = create<string>('spacingHorizontalL');
-export const spacingHorizontalXL = create<string>('spacingHorizontalXL');
-export const spacingHorizontalXXL = create<string>('spacingHorizontalXXL');
-export const spacingHorizontalXXXL = create<string>('spacingHorizontalXXXL');
-export const spacingVerticalNone = create<string>('spacingVerticalNone');
-export const spacingVerticalXXS = create<string>('spacingVerticalXXS');
-export const spacingVerticalXS = create<string>('spacingVerticalXS');
-export const spacingVerticalSNudge = create<string>('spacingVerticalSNudge');
-export const spacingVerticalS = create<string>('spacingVerticalS');
-export const spacingVerticalMNudge = create<string>('spacingVerticalMNudge');
-export const spacingVerticalM = create<string>('spacingVerticalM');
-export const spacingVerticalL = create<string>('spacingVerticalL');
-export const spacingVerticalXL = create<string>('spacingVerticalXL');
-export const spacingVerticalXXL = create<string>('spacingVerticalXXL');
-export const spacingVerticalXXXL = create<string>('spacingVerticalXXXL');
-export const durationUltraFast = create<string>('durationUltraFast');
-export const durationFaster = create<string>('durationFaster');
-export const durationFast = create<string>('durationFast');
-export const durationNormal = create<string>('durationNormal');
-export const durationSlow = create<string>('durationSlow');
-export const durationSlower = create<string>('durationSlower');
-export const durationUltraSlow = create<string>('durationUltraSlow');
-export const curveAccelerateMax = create<string>('curveAccelerateMax');
-export const curveAccelerateMid = create<string>('curveAccelerateMid');
-export const curveAccelerateMin = create<string>('curveAccelerateMin');
-export const curveDecelerateMax = create<string>('curveDecelerateMax');
-export const curveDecelerateMid = create<string>('curveDecelerateMid');
-export const curveDecelerateMin = create<string>('curveDecelerateMin');
-export const curveEasyEaseMax = create<string>('curveEasyEaseMax');
-export const curveEasyEase = create<string>('curveEasyEase');
-export const curveLinear = create<string>('curveLinear');
-export const colorNeutralForeground1 = create<string>('colorNeutralForeground1');
-export const colorNeutralForeground1Hover = create<string>('colorNeutralForeground1Hover');
-export const colorNeutralForeground1Pressed = create<string>('colorNeutralForeground1Pressed');
-export const colorNeutralForeground1Selected = create<string>('colorNeutralForeground1Selected');
-export const colorNeutralForeground2 = create<string>('colorNeutralForeground2');
-export const colorNeutralForeground2Hover = create<string>('colorNeutralForeground2Hover');
-export const colorNeutralForeground2Pressed = create<string>('colorNeutralForeground2Pressed');
-export const colorNeutralForeground2Selected = create<string>('colorNeutralForeground2Selected');
-export const colorNeutralForeground2BrandHover = create<string>('colorNeutralForeground2BrandHover');
-export const colorNeutralForeground2BrandPressed = create<string>('colorNeutralForeground2BrandPressed');
-export const colorNeutralForeground2BrandSelected = create<string>('colorNeutralForeground2BrandSelected');
-export const colorNeutralForeground3 = create<string>('colorNeutralForeground3');
-export const colorNeutralForeground3Hover = create<string>('colorNeutralForeground3Hover');
-export const colorNeutralForeground3Pressed = create<string>('colorNeutralForeground3Pressed');
-export const colorNeutralForeground3Selected = create<string>('colorNeutralForeground3Selected');
-export const colorNeutralForeground3BrandHover = create<string>('colorNeutralForeground3BrandHover');
-export const colorNeutralForeground3BrandPressed = create<string>('colorNeutralForeground3BrandPressed');
-export const colorNeutralForeground3BrandSelected = create<string>('colorNeutralForeground3BrandSelected');
-export const colorNeutralForeground4 = create<string>('colorNeutralForeground4');
-export const colorNeutralForegroundDisabled = create<string>('colorNeutralForegroundDisabled');
-export const colorNeutralForegroundInvertedDisabled = create<string>('colorNeutralForegroundInvertedDisabled');
-export const colorBrandForegroundLink = create<string>('colorBrandForegroundLink');
-export const colorBrandForegroundLinkHover = create<string>('colorBrandForegroundLinkHover');
-export const colorBrandForegroundLinkPressed = create<string>('colorBrandForegroundLinkPressed');
-export const colorBrandForegroundLinkSelected = create<string>('colorBrandForegroundLinkSelected');
-export const colorNeutralForeground2Link = create<string>('colorNeutralForeground2Link');
-export const colorNeutralForeground2LinkHover = create<string>('colorNeutralForeground2LinkHover');
-export const colorNeutralForeground2LinkPressed = create<string>('colorNeutralForeground2LinkPressed');
-export const colorNeutralForeground2LinkSelected = create<string>('colorNeutralForeground2LinkSelected');
-export const colorCompoundBrandForeground1 = create<string>('colorCompoundBrandForeground1');
-export const colorCompoundBrandForeground1Hover = create<string>('colorCompoundBrandForeground1Hover');
-export const colorCompoundBrandForeground1Pressed = create<string>('colorCompoundBrandForeground1Pressed');
-export const colorBrandForeground1 = create<string>('colorBrandForeground1');
-export const colorBrandForeground2 = create<string>('colorBrandForeground2');
-export const colorNeutralForeground1Static = create<string>('colorNeutralForeground1Static');
-export const colorNeutralForegroundStaticInverted = create<string>('colorNeutralForegroundStaticInverted');
-export const colorNeutralForegroundInverted = create<string>('colorNeutralForegroundInverted');
-export const colorNeutralForegroundInvertedHover = create<string>('colorNeutralForegroundInvertedHover');
-export const colorNeutralForegroundInvertedPressed = create<string>('colorNeutralForegroundInvertedPressed');
-export const colorNeutralForegroundInvertedSelected = create<string>('colorNeutralForegroundInvertedSelected');
-export const colorNeutralForegroundInverted2 = create<string>('colorNeutralForegroundInverted2');
-export const colorNeutralForegroundOnBrand = create<string>('colorNeutralForegroundOnBrand');
-export const colorNeutralForegroundInvertedLink = create<string>('colorNeutralForegroundInvertedLink');
-export const colorNeutralForegroundInvertedLinkHover = create<string>('colorNeutralForegroundInvertedLinkHover');
-export const colorNeutralForegroundInvertedLinkPressed = create<string>('colorNeutralForegroundInvertedLinkPressed');
-export const colorNeutralForegroundInvertedLinkSelected = create<string>('colorNeutralForegroundInvertedLinkSelected');
-export const colorBrandForegroundInverted = create<string>('colorBrandForegroundInverted');
-export const colorBrandForegroundInvertedHover = create<string>('colorBrandForegroundInvertedHover');
-export const colorBrandForegroundInvertedPressed = create<string>('colorBrandForegroundInvertedPressed');
-export const colorBrandForegroundOnLight = create<string>('colorBrandForegroundOnLight');
-export const colorBrandForegroundOnLightHover = create<string>('colorBrandForegroundOnLightHover');
-export const colorBrandForegroundOnLightPressed = create<string>('colorBrandForegroundOnLightPressed');
-export const colorBrandForegroundOnLightSelected = create<string>('colorBrandForegroundOnLightSelected');
-export const colorNeutralBackground1 = create<string>('colorNeutralBackground1');
-export const colorNeutralBackground1Hover = create<string>('colorNeutralBackground1Hover');
-export const colorNeutralBackground1Pressed = create<string>('colorNeutralBackground1Pressed');
-export const colorNeutralBackground1Selected = create<string>('colorNeutralBackground1Selected');
-export const colorNeutralBackground2 = create<string>('colorNeutralBackground2');
-export const colorNeutralBackground2Hover = create<string>('colorNeutralBackground2Hover');
-export const colorNeutralBackground2Pressed = create<string>('colorNeutralBackground2Pressed');
-export const colorNeutralBackground2Selected = create<string>('colorNeutralBackground2Selected');
-export const colorNeutralBackground3 = create<string>('colorNeutralBackground3');
-export const colorNeutralBackground3Hover = create<string>('colorNeutralBackground3Hover');
-export const colorNeutralBackground3Pressed = create<string>('colorNeutralBackground3Pressed');
-export const colorNeutralBackground3Selected = create<string>('colorNeutralBackground3Selected');
-export const colorNeutralBackground4 = create<string>('colorNeutralBackground4');
-export const colorNeutralBackground4Hover = create<string>('colorNeutralBackground4Hover');
-export const colorNeutralBackground4Pressed = create<string>('colorNeutralBackground4Pressed');
-export const colorNeutralBackground4Selected = create<string>('colorNeutralBackground4Selected');
-export const colorNeutralBackground5 = create<string>('colorNeutralBackground5');
-export const colorNeutralBackground5Hover = create<string>('colorNeutralBackground5Hover');
-export const colorNeutralBackground5Pressed = create<string>('colorNeutralBackground5Pressed');
-export const colorNeutralBackground5Selected = create<string>('colorNeutralBackground5Selected');
-export const colorNeutralBackground6 = create<string>('colorNeutralBackground6');
-export const colorNeutralBackgroundInverted = create<string>('colorNeutralBackgroundInverted');
-export const colorNeutralBackgroundStatic = create<string>('colorNeutralBackgroundStatic');
-export const colorSubtleBackground = create<string>('colorSubtleBackground');
-export const colorSubtleBackgroundHover = create<string>('colorSubtleBackgroundHover');
-export const colorSubtleBackgroundPressed = create<string>('colorSubtleBackgroundPressed');
-export const colorSubtleBackgroundSelected = create<string>('colorSubtleBackgroundSelected');
-export const colorSubtleBackgroundLightAlphaHover = create<string>('colorSubtleBackgroundLightAlphaHover');
-export const colorSubtleBackgroundLightAlphaPressed = create<string>('colorSubtleBackgroundLightAlphaPressed');
-export const colorSubtleBackgroundLightAlphaSelected = create<string>('colorSubtleBackgroundLightAlphaSelected');
-export const colorSubtleBackgroundInverted = create<string>('colorSubtleBackgroundInverted');
-export const colorSubtleBackgroundInvertedHover = create<string>('colorSubtleBackgroundInvertedHover');
-export const colorSubtleBackgroundInvertedPressed = create<string>('colorSubtleBackgroundInvertedPressed');
-export const colorSubtleBackgroundInvertedSelected = create<string>('colorSubtleBackgroundInvertedSelected');
-export const colorTransparentBackground = create<string>('colorTransparentBackground');
-export const colorTransparentBackgroundHover = create<string>('colorTransparentBackgroundHover');
-export const colorTransparentBackgroundPressed = create<string>('colorTransparentBackgroundPressed');
-export const colorTransparentBackgroundSelected = create<string>('colorTransparentBackgroundSelected');
-export const colorNeutralBackgroundDisabled = create<string>('colorNeutralBackgroundDisabled');
-export const colorNeutralBackgroundInvertedDisabled = create<string>('colorNeutralBackgroundInvertedDisabled');
-export const colorNeutralStencil1 = create<string>('colorNeutralStencil1');
-export const colorNeutralStencil2 = create<string>('colorNeutralStencil2');
-export const colorNeutralStencil1Alpha = create<string>('colorNeutralStencil1Alpha');
-export const colorNeutralStencil2Alpha = create<string>('colorNeutralStencil2Alpha');
-export const colorBackgroundOverlay = create<string>('colorBackgroundOverlay');
-export const colorScrollbarOverlay = create<string>('colorScrollbarOverlay');
-export const colorBrandBackground = create<string>('colorBrandBackground');
-export const colorBrandBackgroundHover = create<string>('colorBrandBackgroundHover');
-export const colorBrandBackgroundPressed = create<string>('colorBrandBackgroundPressed');
-export const colorBrandBackgroundSelected = create<string>('colorBrandBackgroundSelected');
-export const colorCompoundBrandBackground = create<string>('colorCompoundBrandBackground');
-export const colorCompoundBrandBackgroundHover = create<string>('colorCompoundBrandBackgroundHover');
-export const colorCompoundBrandBackgroundPressed = create<string>('colorCompoundBrandBackgroundPressed');
-export const colorBrandBackgroundStatic = create<string>('colorBrandBackgroundStatic');
-export const colorBrandBackground2 = create<string>('colorBrandBackground2');
-export const colorBrandBackgroundInverted = create<string>('colorBrandBackgroundInverted');
-export const colorBrandBackgroundInvertedHover = create<string>('colorBrandBackgroundInvertedHover');
-export const colorBrandBackgroundInvertedPressed = create<string>('colorBrandBackgroundInvertedPressed');
-export const colorBrandBackgroundInvertedSelected = create<string>('colorBrandBackgroundInvertedSelected');
-export const colorNeutralStrokeAccessible = create<string>('colorNeutralStrokeAccessible');
-export const colorNeutralStrokeAccessibleHover = create<string>('colorNeutralStrokeAccessibleHover');
-export const colorNeutralStrokeAccessiblePressed = create<string>('colorNeutralStrokeAccessiblePressed');
-export const colorNeutralStrokeAccessibleSelected = create<string>('colorNeutralStrokeAccessibleSelected');
-export const colorNeutralStroke1 = create<string>('colorNeutralStroke1');
-export const colorNeutralStroke1Hover = create<string>('colorNeutralStroke1Hover');
-export const colorNeutralStroke1Pressed = create<string>('colorNeutralStroke1Pressed');
-export const colorNeutralStroke1Selected = create<string>('colorNeutralStroke1Selected');
-export const colorNeutralStroke2 = create<string>('colorNeutralStroke2');
-export const colorNeutralStroke3 = create<string>('colorNeutralStroke3');
-export const colorNeutralStrokeOnBrand = create<string>('colorNeutralStrokeOnBrand');
-export const colorNeutralStrokeOnBrand2 = create<string>('colorNeutralStrokeOnBrand2');
-export const colorNeutralStrokeOnBrand2Hover = create<string>('colorNeutralStrokeOnBrand2Hover');
-export const colorNeutralStrokeOnBrand2Pressed = create<string>('colorNeutralStrokeOnBrand2Pressed');
-export const colorNeutralStrokeOnBrand2Selected = create<string>('colorNeutralStrokeOnBrand2Selected');
-export const colorBrandStroke1 = create<string>('colorBrandStroke1');
-export const colorBrandStroke2 = create<string>('colorBrandStroke2');
-export const colorCompoundBrandStroke = create<string>('colorCompoundBrandStroke');
-export const colorCompoundBrandStrokeHover = create<string>('colorCompoundBrandStrokeHover');
-export const colorCompoundBrandStrokePressed = create<string>('colorCompoundBrandStrokePressed');
-export const colorNeutralStrokeDisabled = create<string>('colorNeutralStrokeDisabled');
-export const colorNeutralStrokeInvertedDisabled = create<string>('colorNeutralStrokeInvertedDisabled');
-export const colorTransparentStroke = create<string>('colorTransparentStroke');
-export const colorTransparentStrokeInteractive = create<string>('colorTransparentStrokeInteractive');
-export const colorTransparentStrokeDisabled = create<string>('colorTransparentStrokeDisabled');
-export const colorStrokeFocus1 = create<string>('colorStrokeFocus1');
-export const colorStrokeFocus2 = create<string>('colorStrokeFocus2');
-export const colorNeutralShadowAmbient = create<string>('colorNeutralShadowAmbient');
-export const colorNeutralShadowKey = create<string>('colorNeutralShadowKey');
-export const colorNeutralShadowAmbientLighter = create<string>('colorNeutralShadowAmbientLighter');
-export const colorNeutralShadowKeyLighter = create<string>('colorNeutralShadowKeyLighter');
-export const colorNeutralShadowAmbientDarker = create<string>('colorNeutralShadowAmbientDarker');
-export const colorNeutralShadowKeyDarker = create<string>('colorNeutralShadowKeyDarker');
-export const colorBrandShadowAmbient = create<string>('colorBrandShadowAmbient');
-export const colorBrandShadowKey = create<string>('colorBrandShadowKey');
-export const colorPaletteRedBackground1 = create<string>('colorPaletteRedBackground1');
-export const colorPaletteRedBackground2 = create<string>('colorPaletteRedBackground2');
-export const colorPaletteRedBackground3 = create<string>('colorPaletteRedBackground3');
-export const colorPaletteRedForeground1 = create<string>('colorPaletteRedForeground1');
-export const colorPaletteRedForeground2 = create<string>('colorPaletteRedForeground2');
-export const colorPaletteRedForeground3 = create<string>('colorPaletteRedForeground3');
-export const colorPaletteRedBorderActive = create<string>('colorPaletteRedBorderActive');
-export const colorPaletteRedBorder1 = create<string>('colorPaletteRedBorder1');
-export const colorPaletteRedBorder2 = create<string>('colorPaletteRedBorder2');
-export const colorPaletteGreenBackground1 = create<string>('colorPaletteGreenBackground1');
-export const colorPaletteGreenBackground2 = create<string>('colorPaletteGreenBackground2');
-export const colorPaletteGreenBackground3 = create<string>('colorPaletteGreenBackground3');
-export const colorPaletteGreenForeground1 = create<string>('colorPaletteGreenForeground1');
-export const colorPaletteGreenForeground2 = create<string>('colorPaletteGreenForeground2');
-export const colorPaletteGreenForeground3 = create<string>('colorPaletteGreenForeground3');
-export const colorPaletteGreenBorderActive = create<string>('colorPaletteGreenBorderActive');
-export const colorPaletteGreenBorder1 = create<string>('colorPaletteGreenBorder1');
-export const colorPaletteGreenBorder2 = create<string>('colorPaletteGreenBorder2');
-export const colorPaletteDarkOrangeBackground1 = create<string>('colorPaletteDarkOrangeBackground1');
-export const colorPaletteDarkOrangeBackground2 = create<string>('colorPaletteDarkOrangeBackground2');
-export const colorPaletteDarkOrangeBackground3 = create<string>('colorPaletteDarkOrangeBackground3');
-export const colorPaletteDarkOrangeForeground1 = create<string>('colorPaletteDarkOrangeForeground1');
-export const colorPaletteDarkOrangeForeground2 = create<string>('colorPaletteDarkOrangeForeground2');
-export const colorPaletteDarkOrangeForeground3 = create<string>('colorPaletteDarkOrangeForeground3');
-export const colorPaletteDarkOrangeBorderActive = create<string>('colorPaletteDarkOrangeBorderActive');
-export const colorPaletteDarkOrangeBorder1 = create<string>('colorPaletteDarkOrangeBorder1');
-export const colorPaletteDarkOrangeBorder2 = create<string>('colorPaletteDarkOrangeBorder2');
-export const colorPaletteYellowBackground1 = create<string>('colorPaletteYellowBackground1');
-export const colorPaletteYellowBackground2 = create<string>('colorPaletteYellowBackground2');
-export const colorPaletteYellowBackground3 = create<string>('colorPaletteYellowBackground3');
-export const colorPaletteYellowForeground1 = create<string>('colorPaletteYellowForeground1');
-export const colorPaletteYellowForeground2 = create<string>('colorPaletteYellowForeground2');
-export const colorPaletteYellowForeground3 = create<string>('colorPaletteYellowForeground3');
-export const colorPaletteYellowBorderActive = create<string>('colorPaletteYellowBorderActive');
-export const colorPaletteYellowBorder1 = create<string>('colorPaletteYellowBorder1');
-export const colorPaletteYellowBorder2 = create<string>('colorPaletteYellowBorder2');
-export const colorPaletteBerryBackground1 = create<string>('colorPaletteBerryBackground1');
-export const colorPaletteBerryBackground2 = create<string>('colorPaletteBerryBackground2');
-export const colorPaletteBerryBackground3 = create<string>('colorPaletteBerryBackground3');
-export const colorPaletteBerryForeground1 = create<string>('colorPaletteBerryForeground1');
-export const colorPaletteBerryForeground2 = create<string>('colorPaletteBerryForeground2');
-export const colorPaletteBerryForeground3 = create<string>('colorPaletteBerryForeground3');
-export const colorPaletteBerryBorderActive = create<string>('colorPaletteBerryBorderActive');
-export const colorPaletteBerryBorder1 = create<string>('colorPaletteBerryBorder1');
-export const colorPaletteBerryBorder2 = create<string>('colorPaletteBerryBorder2');
-export const colorPaletteLightGreenBackground1 = create<string>('colorPaletteLightGreenBackground1');
-export const colorPaletteLightGreenBackground2 = create<string>('colorPaletteLightGreenBackground2');
-export const colorPaletteLightGreenBackground3 = create<string>('colorPaletteLightGreenBackground3');
-export const colorPaletteLightGreenForeground1 = create<string>('colorPaletteLightGreenForeground1');
-export const colorPaletteLightGreenForeground2 = create<string>('colorPaletteLightGreenForeground2');
-export const colorPaletteLightGreenForeground3 = create<string>('colorPaletteLightGreenForeground3');
-export const colorPaletteLightGreenBorderActive = create<string>('colorPaletteLightGreenBorderActive');
-export const colorPaletteLightGreenBorder1 = create<string>('colorPaletteLightGreenBorder1');
-export const colorPaletteLightGreenBorder2 = create<string>('colorPaletteLightGreenBorder2');
-export const colorPaletteMarigoldBackground1 = create<string>('colorPaletteMarigoldBackground1');
-export const colorPaletteMarigoldBackground2 = create<string>('colorPaletteMarigoldBackground2');
-export const colorPaletteMarigoldBackground3 = create<string>('colorPaletteMarigoldBackground3');
-export const colorPaletteMarigoldForeground1 = create<string>('colorPaletteMarigoldForeground1');
-export const colorPaletteMarigoldForeground2 = create<string>('colorPaletteMarigoldForeground2');
-export const colorPaletteMarigoldForeground3 = create<string>('colorPaletteMarigoldForeground3');
-export const colorPaletteMarigoldBorderActive = create<string>('colorPaletteMarigoldBorderActive');
-export const colorPaletteMarigoldBorder1 = create<string>('colorPaletteMarigoldBorder1');
-export const colorPaletteMarigoldBorder2 = create<string>('colorPaletteMarigoldBorder2');
-export const colorPaletteDarkRedBackground2 = create<string>('colorPaletteDarkRedBackground2');
-export const colorPaletteDarkRedForeground2 = create<string>('colorPaletteDarkRedForeground2');
-export const colorPaletteDarkRedBorderActive = create<string>('colorPaletteDarkRedBorderActive');
-export const colorPaletteCranberryBackground2 = create<string>('colorPaletteCranberryBackground2');
-export const colorPaletteCranberryForeground2 = create<string>('colorPaletteCranberryForeground2');
-export const colorPaletteCranberryBorderActive = create<string>('colorPaletteCranberryBorderActive');
-export const colorPalettePumpkinBackground2 = create<string>('colorPalettePumpkinBackground2');
-export const colorPalettePumpkinForeground2 = create<string>('colorPalettePumpkinForeground2');
-export const colorPalettePumpkinBorderActive = create<string>('colorPalettePumpkinBorderActive');
-export const colorPalettePeachBackground2 = create<string>('colorPalettePeachBackground2');
-export const colorPalettePeachForeground2 = create<string>('colorPalettePeachForeground2');
-export const colorPalettePeachBorderActive = create<string>('colorPalettePeachBorderActive');
-export const colorPaletteGoldBackground2 = create<string>('colorPaletteGoldBackground2');
-export const colorPaletteGoldForeground2 = create<string>('colorPaletteGoldForeground2');
-export const colorPaletteGoldBorderActive = create<string>('colorPaletteGoldBorderActive');
-export const colorPaletteBrassBackground2 = create<string>('colorPaletteBrassBackground2');
-export const colorPaletteBrassForeground2 = create<string>('colorPaletteBrassForeground2');
-export const colorPaletteBrassBorderActive = create<string>('colorPaletteBrassBorderActive');
-export const colorPaletteBrownBackground2 = create<string>('colorPaletteBrownBackground2');
-export const colorPaletteBrownForeground2 = create<string>('colorPaletteBrownForeground2');
-export const colorPaletteBrownBorderActive = create<string>('colorPaletteBrownBorderActive');
-export const colorPaletteForestBackground2 = create<string>('colorPaletteForestBackground2');
-export const colorPaletteForestForeground2 = create<string>('colorPaletteForestForeground2');
-export const colorPaletteForestBorderActive = create<string>('colorPaletteForestBorderActive');
-export const colorPaletteSeafoamBackground2 = create<string>('colorPaletteSeafoamBackground2');
-export const colorPaletteSeafoamForeground2 = create<string>('colorPaletteSeafoamForeground2');
-export const colorPaletteSeafoamBorderActive = create<string>('colorPaletteSeafoamBorderActive');
-export const colorPaletteDarkGreenBackground2 = create<string>('colorPaletteDarkGreenBackground2');
-export const colorPaletteDarkGreenForeground2 = create<string>('colorPaletteDarkGreenForeground2');
-export const colorPaletteDarkGreenBorderActive = create<string>('colorPaletteDarkGreenBorderActive');
-export const colorPaletteLightTealBackground2 = create<string>('colorPaletteLightTealBackground2');
-export const colorPaletteLightTealForeground2 = create<string>('colorPaletteLightTealForeground2');
-export const colorPaletteLightTealBorderActive = create<string>('colorPaletteLightTealBorderActive');
-export const colorPaletteTealBackground2 = create<string>('colorPaletteTealBackground2');
-export const colorPaletteTealForeground2 = create<string>('colorPaletteTealForeground2');
-export const colorPaletteTealBorderActive = create<string>('colorPaletteTealBorderActive');
-export const colorPaletteSteelBackground2 = create<string>('colorPaletteSteelBackground2');
-export const colorPaletteSteelForeground2 = create<string>('colorPaletteSteelForeground2');
-export const colorPaletteSteelBorderActive = create<string>('colorPaletteSteelBorderActive');
-export const colorPaletteBlueBackground2 = create<string>('colorPaletteBlueBackground2');
-export const colorPaletteBlueForeground2 = create<string>('colorPaletteBlueForeground2');
-export const colorPaletteBlueBorderActive = create<string>('colorPaletteBlueBorderActive');
-export const colorPaletteRoyalBlueBackground2 = create<string>('colorPaletteRoyalBlueBackground2');
-export const colorPaletteRoyalBlueForeground2 = create<string>('colorPaletteRoyalBlueForeground2');
-export const colorPaletteRoyalBlueBorderActive = create<string>('colorPaletteRoyalBlueBorderActive');
-export const colorPaletteCornflowerBackground2 = create<string>('colorPaletteCornflowerBackground2');
-export const colorPaletteCornflowerForeground2 = create<string>('colorPaletteCornflowerForeground2');
-export const colorPaletteCornflowerBorderActive = create<string>('colorPaletteCornflowerBorderActive');
-export const colorPaletteNavyBackground2 = create<string>('colorPaletteNavyBackground2');
-export const colorPaletteNavyForeground2 = create<string>('colorPaletteNavyForeground2');
-export const colorPaletteNavyBorderActive = create<string>('colorPaletteNavyBorderActive');
-export const colorPaletteLavenderBackground2 = create<string>('colorPaletteLavenderBackground2');
-export const colorPaletteLavenderForeground2 = create<string>('colorPaletteLavenderForeground2');
-export const colorPaletteLavenderBorderActive = create<string>('colorPaletteLavenderBorderActive');
-export const colorPalettePurpleBackground2 = create<string>('colorPalettePurpleBackground2');
-export const colorPalettePurpleForeground2 = create<string>('colorPalettePurpleForeground2');
-export const colorPalettePurpleBorderActive = create<string>('colorPalettePurpleBorderActive');
-export const colorPaletteGrapeBackground2 = create<string>('colorPaletteGrapeBackground2');
-export const colorPaletteGrapeForeground2 = create<string>('colorPaletteGrapeForeground2');
-export const colorPaletteGrapeBorderActive = create<string>('colorPaletteGrapeBorderActive');
-export const colorPaletteLilacBackground2 = create<string>('colorPaletteLilacBackground2');
-export const colorPaletteLilacForeground2 = create<string>('colorPaletteLilacForeground2');
-export const colorPaletteLilacBorderActive = create<string>('colorPaletteLilacBorderActive');
-export const colorPalettePinkBackground2 = create<string>('colorPalettePinkBackground2');
-export const colorPalettePinkForeground2 = create<string>('colorPalettePinkForeground2');
-export const colorPalettePinkBorderActive = create<string>('colorPalettePinkBorderActive');
-export const colorPaletteMagentaBackground2 = create<string>('colorPaletteMagentaBackground2');
-export const colorPaletteMagentaForeground2 = create<string>('colorPaletteMagentaForeground2');
-export const colorPaletteMagentaBorderActive = create<string>('colorPaletteMagentaBorderActive');
-export const colorPalettePlumBackground2 = create<string>('colorPalettePlumBackground2');
-export const colorPalettePlumForeground2 = create<string>('colorPalettePlumForeground2');
-export const colorPalettePlumBorderActive = create<string>('colorPalettePlumBorderActive');
-export const colorPaletteBeigeBackground2 = create<string>('colorPaletteBeigeBackground2');
-export const colorPaletteBeigeForeground2 = create<string>('colorPaletteBeigeForeground2');
-export const colorPaletteBeigeBorderActive = create<string>('colorPaletteBeigeBorderActive');
-export const colorPaletteMinkBackground2 = create<string>('colorPaletteMinkBackground2');
-export const colorPaletteMinkForeground2 = create<string>('colorPaletteMinkForeground2');
-export const colorPaletteMinkBorderActive = create<string>('colorPaletteMinkBorderActive');
-export const colorPalettePlatinumBackground2 = create<string>('colorPalettePlatinumBackground2');
-export const colorPalettePlatinumForeground2 = create<string>('colorPalettePlatinumForeground2');
-export const colorPalettePlatinumBorderActive = create<string>('colorPalettePlatinumBorderActive');
-export const colorPaletteAnchorBackground2 = create<string>('colorPaletteAnchorBackground2');
-export const colorPaletteAnchorForeground2 = create<string>('colorPaletteAnchorForeground2');
-export const colorPaletteAnchorBorderActive = create<string>('colorPaletteAnchorBorderActive');
-export const colorPaletteRedForegroundInverted = create<string>('colorPaletteRedForegroundInverted');
-export const colorPaletteGreenForegroundInverted = create<string>('colorPaletteGreenForegroundInverted');
-export const colorPaletteYellowForegroundInverted = create<string>('colorPaletteYellowForegroundInverted');
-export const shadow2 = create<string>('shadow2');
-export const shadow4 = create<string>('shadow4');
-export const shadow8 = create<string>('shadow8');
-export const shadow16 = create<string>('shadow16');
-export const shadow28 = create<string>('shadow28');
-export const shadow64 = create<string>('shadow64');
-export const shadow2Brand = create<string>('shadow2Brand');
-export const shadow4Brand = create<string>('shadow4Brand');
-export const shadow8Brand = create<string>('shadow8Brand');
-export const shadow16Brand = create<string>('shadow16Brand');
-export const shadow28Brand = create<string>('shadow28Brand');
-export const shadow64Brand = create<string>('shadow64Brand');
+// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
+export const colorNeutralForeground1 = '--colorNeutralForeground1';
+export const colorNeutralForeground1Hover = '--colorNeutralForeground1Hover';
+export const colorNeutralForeground1Pressed = '--colorNeutralForeground1Pressed';
+export const colorNeutralForeground1Selected = '--colorNeutralForeground1Selected';
+export const colorNeutralForeground2 = '--colorNeutralForeground2';
+export const colorNeutralForeground2Hover = '--colorNeutralForeground2Hover';
+export const colorNeutralForeground2Pressed = '--colorNeutralForeground2Pressed';
+export const colorNeutralForeground2Selected = '--colorNeutralForeground2Selected';
+export const colorNeutralForeground2BrandHover = '--colorNeutralForeground2BrandHover';
+export const colorNeutralForeground2BrandPressed = '--colorNeutralForeground2BrandPressed';
+export const colorNeutralForeground2BrandSelected = '--colorNeutralForeground2BrandSelected';
+export const colorNeutralForeground3 = '--colorNeutralForeground3';
+export const colorNeutralForeground3Hover = '--colorNeutralForeground3Hover';
+export const colorNeutralForeground3Pressed = '--colorNeutralForeground3Pressed';
+export const colorNeutralForeground3Selected = '--colorNeutralForeground3Selected';
+export const colorNeutralForeground3BrandHover = '--colorNeutralForeground3BrandHover';
+export const colorNeutralForeground3BrandPressed = '--colorNeutralForeground3BrandPressed';
+export const colorNeutralForeground3BrandSelected = '--colorNeutralForeground3BrandSelected';
+export const colorNeutralForeground4 = '--colorNeutralForeground4';
+export const colorNeutralForegroundDisabled = '--colorNeutralForegroundDisabled';
+export const colorBrandForegroundLink = '--colorBrandForegroundLink';
+export const colorBrandForegroundLinkHover = '--colorBrandForegroundLinkHover';
+export const colorBrandForegroundLinkPressed = '--colorBrandForegroundLinkPressed';
+export const colorBrandForegroundLinkSelected = '--colorBrandForegroundLinkSelected';
+export const colorNeutralForeground2Link = '--colorNeutralForeground2Link';
+export const colorNeutralForeground2LinkHover = '--colorNeutralForeground2LinkHover';
+export const colorNeutralForeground2LinkPressed = '--colorNeutralForeground2LinkPressed';
+export const colorNeutralForeground2LinkSelected = '--colorNeutralForeground2LinkSelected';
+export const colorCompoundBrandForeground1 = '--colorCompoundBrandForeground1';
+export const colorCompoundBrandForeground1Hover = '--colorCompoundBrandForeground1Hover';
+export const colorCompoundBrandForeground1Pressed = '--colorCompoundBrandForeground1Pressed';
+export const colorNeutralForegroundOnBrand = '--colorNeutralForegroundOnBrand';
+export const colorNeutralForegroundInverted = '--colorNeutralForegroundInverted';
+export const colorNeutralForegroundInvertedHover = '--colorNeutralForegroundInvertedHover';
+export const colorNeutralForegroundInvertedPressed = '--colorNeutralForegroundInvertedPressed';
+export const colorNeutralForegroundInvertedSelected = '--colorNeutralForegroundInvertedSelected';
+export const colorNeutralForegroundInverted2 = '--colorNeutralForegroundInverted2';
+export const colorNeutralForegroundStaticInverted = '--colorNeutralForegroundStaticInverted';
+export const colorNeutralForegroundInvertedLink = '--colorNeutralForegroundInvertedLink';
+export const colorNeutralForegroundInvertedLinkHover = '--colorNeutralForegroundInvertedLinkHover';
+export const colorNeutralForegroundInvertedLinkPressed = '--colorNeutralForegroundInvertedLinkPressed';
+export const colorNeutralForegroundInvertedLinkSelected = '--colorNeutralForegroundInvertedLinkSelected';
+export const colorNeutralForegroundInvertedDisabled = '--colorNeutralForegroundInvertedDisabled';
+export const colorBrandForeground1 = '--colorBrandForeground1';
+export const colorBrandForeground2 = '--colorBrandForeground2';
+export const colorNeutralForeground1Static = '--colorNeutralForeground1Static';
+export const colorBrandForegroundInverted = '--colorBrandForegroundInverted';
+export const colorBrandForegroundInvertedHover = '--colorBrandForegroundInvertedHover';
+export const colorBrandForegroundInvertedPressed = '--colorBrandForegroundInvertedPressed';
+export const colorBrandForegroundOnLight = '--colorBrandForegroundOnLight';
+export const colorBrandForegroundOnLightHover = '--colorBrandForegroundOnLightHover';
+export const colorBrandForegroundOnLightPressed = '--colorBrandForegroundOnLightPressed';
+export const colorBrandForegroundOnLightSelected = '--colorBrandForegroundOnLightSelected';
+export const colorNeutralBackground1 = '--colorNeutralBackground1';
+export const colorNeutralBackground1Hover = '--colorNeutralBackground1Hover';
+export const colorNeutralBackground1Pressed = '--colorNeutralBackground1Pressed';
+export const colorNeutralBackground1Selected = '--colorNeutralBackground1Selected';
+export const colorNeutralBackground2 = '--colorNeutralBackground2';
+export const colorNeutralBackground2Hover = '--colorNeutralBackground2Hover';
+export const colorNeutralBackground2Pressed = '--colorNeutralBackground2Pressed';
+export const colorNeutralBackground2Selected = '--colorNeutralBackground2Selected';
+export const colorNeutralBackground3 = '--colorNeutralBackground3';
+export const colorNeutralBackground3Hover = '--colorNeutralBackground3Hover';
+export const colorNeutralBackground3Pressed = '--colorNeutralBackground3Pressed';
+export const colorNeutralBackground3Selected = '--colorNeutralBackground3Selected';
+export const colorNeutralBackground4 = '--colorNeutralBackground4';
+export const colorNeutralBackground4Hover = '--colorNeutralBackground4Hover';
+export const colorNeutralBackground4Pressed = '--colorNeutralBackground4Pressed';
+export const colorNeutralBackground4Selected = '--colorNeutralBackground4Selected';
+export const colorNeutralBackground5 = '--colorNeutralBackground5';
+export const colorNeutralBackground5Hover = '--colorNeutralBackground5Hover';
+export const colorNeutralBackground5Pressed = '--colorNeutralBackground5Pressed';
+export const colorNeutralBackground5Selected = '--colorNeutralBackground5Selected';
+export const colorNeutralBackground6 = '--colorNeutralBackground6';
+export const colorNeutralBackgroundStatic = '--colorNeutralBackgroundStatic';
+export const colorNeutralBackgroundInverted = '--colorNeutralBackgroundInverted';
+export const colorSubtleBackground = '--colorSubtleBackground';
+export const colorSubtleBackgroundHover = '--colorSubtleBackgroundHover';
+export const colorSubtleBackgroundPressed = '--colorSubtleBackgroundPressed';
+export const colorSubtleBackgroundSelected = '--colorSubtleBackgroundSelected';
+export const colorSubtleBackgroundLightAlphaHover = '--colorSubtleBackgroundLightAlphaHover';
+export const colorSubtleBackgroundLightAlphaPressed = '--colorSubtleBackgroundLightAlphaPressed';
+export const colorSubtleBackgroundLightAlphaSelected = '--colorSubtleBackgroundLightAlphaSelected';
+export const colorSubtleBackgroundInverted = '--colorSubtleBackgroundInverted';
+export const colorSubtleBackgroundInvertedHover = '--colorSubtleBackgroundInvertedHover';
+export const colorSubtleBackgroundInvertedPressed = '--colorSubtleBackgroundInvertedPressed';
+export const colorSubtleBackgroundInvertedSelected = '--colorSubtleBackgroundInvertedSelected';
+export const colorTransparentBackground = '--colorTransparentBackground';
+export const colorTransparentBackgroundHover = '--colorTransparentBackgroundHover';
+export const colorTransparentBackgroundPressed = '--colorTransparentBackgroundPressed';
+export const colorTransparentBackgroundSelected = '--colorTransparentBackgroundSelected';
+export const colorNeutralBackgroundDisabled = '--colorNeutralBackgroundDisabled';
+export const colorNeutralBackgroundInvertedDisabled = '--colorNeutralBackgroundInvertedDisabled';
+export const colorNeutralStencil1 = '--colorNeutralStencil1';
+export const colorNeutralStencil2 = '--colorNeutralStencil2';
+export const colorNeutralStencil1Alpha = '--colorNeutralStencil1Alpha';
+export const colorNeutralStencil2Alpha = '--colorNeutralStencil2Alpha';
+export const colorBackgroundOverlay = '--colorBackgroundOverlay';
+export const colorScrollbarOverlay = '--colorScrollbarOverlay';
+export const colorBrandBackground = '--colorBrandBackground';
+export const colorBrandBackgroundHover = '--colorBrandBackgroundHover';
+export const colorBrandBackgroundPressed = '--colorBrandBackgroundPressed';
+export const colorBrandBackgroundSelected = '--colorBrandBackgroundSelected';
+export const colorCompoundBrandBackground = '--colorCompoundBrandBackground';
+export const colorCompoundBrandBackgroundHover = '--colorCompoundBrandBackgroundHover';
+export const colorCompoundBrandBackgroundPressed = '--colorCompoundBrandBackgroundPressed';
+export const colorBrandBackgroundStatic = '--colorBrandBackgroundStatic';
+export const colorBrandBackground2 = '--colorBrandBackground2';
+export const colorBrandBackgroundInverted = '--colorBrandBackgroundInverted';
+export const colorBrandBackgroundInvertedHover = '--colorBrandBackgroundInvertedHover';
+export const colorBrandBackgroundInvertedPressed = '--colorBrandBackgroundInvertedPressed';
+export const colorBrandBackgroundInvertedSelected = '--colorBrandBackgroundInvertedSelected';
+export const colorNeutralStrokeAccessible = '--colorNeutralStrokeAccessible';
+export const colorNeutralStrokeAccessibleHover = '--colorNeutralStrokeAccessibleHover';
+export const colorNeutralStrokeAccessiblePressed = '--colorNeutralStrokeAccessiblePressed';
+export const colorNeutralStrokeAccessibleSelected = '--colorNeutralStrokeAccessibleSelected';
+export const colorNeutralStroke1 = '--colorNeutralStroke1';
+export const colorNeutralStroke1Hover = '--colorNeutralStroke1Hover';
+export const colorNeutralStroke1Pressed = '--colorNeutralStroke1Pressed';
+export const colorNeutralStroke1Selected = '--colorNeutralStroke1Selected';
+export const colorNeutralStroke2 = '--colorNeutralStroke2';
+export const colorNeutralStroke3 = '--colorNeutralStroke3';
+export const colorNeutralStrokeOnBrand = '--colorNeutralStrokeOnBrand';
+export const colorNeutralStrokeOnBrand2 = '--colorNeutralStrokeOnBrand2';
+export const colorNeutralStrokeOnBrand2Hover = '--colorNeutralStrokeOnBrand2Hover';
+export const colorNeutralStrokeOnBrand2Pressed = '--colorNeutralStrokeOnBrand2Pressed';
+export const colorNeutralStrokeOnBrand2Selected = '--colorNeutralStrokeOnBrand2Selected';
+export const colorBrandStroke1 = '--colorBrandStroke1';
+export const colorBrandStroke2 = '--colorBrandStroke2';
+export const colorCompoundBrandStroke = '--colorCompoundBrandStroke';
+export const colorCompoundBrandStrokeHover = '--colorCompoundBrandStrokeHover';
+export const colorCompoundBrandStrokePressed = '--colorCompoundBrandStrokePressed';
+export const colorNeutralStrokeDisabled = '--colorNeutralStrokeDisabled';
+export const colorNeutralStrokeInvertedDisabled = '--colorNeutralStrokeInvertedDisabled';
+export const colorTransparentStroke = '--colorTransparentStroke';
+export const colorTransparentStrokeInteractive = '--colorTransparentStrokeInteractive';
+export const colorTransparentStrokeDisabled = '--colorTransparentStrokeDisabled';
+export const colorStrokeFocus1 = '--colorStrokeFocus1';
+export const colorStrokeFocus2 = '--colorStrokeFocus2';
+export const colorNeutralShadowAmbient = '--colorNeutralShadowAmbient';
+export const colorNeutralShadowKey = '--colorNeutralShadowKey';
+export const colorNeutralShadowAmbientLighter = '--colorNeutralShadowAmbientLighter';
+export const colorNeutralShadowKeyLighter = '--colorNeutralShadowKeyLighter';
+export const colorNeutralShadowAmbientDarker = '--colorNeutralShadowAmbientDarker';
+export const colorNeutralShadowKeyDarker = '--colorNeutralShadowKeyDarker';
+export const colorBrandShadowAmbient = '--colorBrandShadowAmbient';
+export const colorBrandShadowKey = '--colorBrandShadowKey';
+export const colorPaletteRedBackground1 = '--colorPaletteRedBackground1';
+export const colorPaletteRedBackground2 = '--colorPaletteRedBackground2';
+export const colorPaletteRedBackground3 = '--colorPaletteRedBackground3';
+export const colorPaletteRedBorderActive = '--colorPaletteRedBorderActive';
+export const colorPaletteRedBorder1 = '--colorPaletteRedBorder1';
+export const colorPaletteRedBorder2 = '--colorPaletteRedBorder2';
+export const colorPaletteRedForeground1 = '--colorPaletteRedForeground1';
+export const colorPaletteRedForeground2 = '--colorPaletteRedForeground2';
+export const colorPaletteRedForeground3 = '--colorPaletteRedForeground3';
+export const colorPaletteRedForegroundInverted = '--colorPaletteRedForegroundInverted';
+export const colorPaletteGreenBackground1 = '--colorPaletteGreenBackground1';
+export const colorPaletteGreenBackground2 = '--colorPaletteGreenBackground2';
+export const colorPaletteGreenBackground3 = '--colorPaletteGreenBackground3';
+export const colorPaletteGreenBorderActive = '--colorPaletteGreenBorderActive';
+export const colorPaletteGreenBorder1 = '--colorPaletteGreenBorder1';
+export const colorPaletteGreenBorder2 = '--colorPaletteGreenBorder2';
+export const colorPaletteGreenForeground1 = '--colorPaletteGreenForeground1';
+export const colorPaletteGreenForeground2 = '--colorPaletteGreenForeground2';
+export const colorPaletteGreenForeground3 = '--colorPaletteGreenForeground3';
+export const colorPaletteGreenForegroundInverted = '--colorPaletteGreenForegroundInverted';
+export const colorPaletteDarkOrangeBackground1 = '--colorPaletteDarkOrangeBackground1';
+export const colorPaletteDarkOrangeBackground2 = '--colorPaletteDarkOrangeBackground2';
+export const colorPaletteDarkOrangeBackground3 = '--colorPaletteDarkOrangeBackground3';
+export const colorPaletteDarkOrangeBorderActive = '--colorPaletteDarkOrangeBorderActive';
+export const colorPaletteDarkOrangeBorder1 = '--colorPaletteDarkOrangeBorder1';
+export const colorPaletteDarkOrangeBorder2 = '--colorPaletteDarkOrangeBorder2';
+export const colorPaletteDarkOrangeForeground1 = '--colorPaletteDarkOrangeForeground1';
+export const colorPaletteDarkOrangeForeground2 = '--colorPaletteDarkOrangeForeground2';
+export const colorPaletteDarkOrangeForeground3 = '--colorPaletteDarkOrangeForeground3';
+export const colorPaletteYellowBackground1 = '--colorPaletteYellowBackground1';
+export const colorPaletteYellowBackground2 = '--colorPaletteYellowBackground2';
+export const colorPaletteYellowBackground3 = '--colorPaletteYellowBackground3';
+export const colorPaletteYellowBorderActive = '--colorPaletteYellowBorderActive';
+export const colorPaletteYellowBorder1 = '--colorPaletteYellowBorder1';
+export const colorPaletteYellowBorder2 = '--colorPaletteYellowBorder2';
+export const colorPaletteYellowForeground1 = '--colorPaletteYellowForeground1';
+export const colorPaletteYellowForeground2 = '--colorPaletteYellowForeground2';
+export const colorPaletteYellowForeground3 = '--colorPaletteYellowForeground3';
+export const colorPaletteYellowForegroundInverted = '--colorPaletteYellowForegroundInverted';
+export const colorPaletteBerryBackground1 = '--colorPaletteBerryBackground1';
+export const colorPaletteBerryBackground2 = '--colorPaletteBerryBackground2';
+export const colorPaletteBerryBackground3 = '--colorPaletteBerryBackground3';
+export const colorPaletteBerryBorderActive = '--colorPaletteBerryBorderActive';
+export const colorPaletteBerryBorder1 = '--colorPaletteBerryBorder1';
+export const colorPaletteBerryBorder2 = '--colorPaletteBerryBorder2';
+export const colorPaletteBerryForeground1 = '--colorPaletteBerryForeground1';
+export const colorPaletteBerryForeground2 = '--colorPaletteBerryForeground2';
+export const colorPaletteBerryForeground3 = '--colorPaletteBerryForeground3';
+export const colorPaletteMarigoldBackground1 = '--colorPaletteMarigoldBackground1';
+export const colorPaletteMarigoldBackground2 = '--colorPaletteMarigoldBackground2';
+export const colorPaletteMarigoldBackground3 = '--colorPaletteMarigoldBackground3';
+export const colorPaletteMarigoldBorderActive = '--colorPaletteMarigoldBorderActive';
+export const colorPaletteMarigoldBorder1 = '--colorPaletteMarigoldBorder1';
+export const colorPaletteMarigoldBorder2 = '--colorPaletteMarigoldBorder2';
+export const colorPaletteMarigoldForeground1 = '--colorPaletteMarigoldForeground1';
+export const colorPaletteMarigoldForeground2 = '--colorPaletteMarigoldForeground2';
+export const colorPaletteMarigoldForeground3 = '--colorPaletteMarigoldForeground3';
+export const colorPaletteLightGreenBackground1 = '--colorPaletteLightGreenBackground1';
+export const colorPaletteLightGreenBackground2 = '--colorPaletteLightGreenBackground2';
+export const colorPaletteLightGreenBackground3 = '--colorPaletteLightGreenBackground3';
+export const colorPaletteLightGreenBorderActive = '--colorPaletteLightGreenBorderActive';
+export const colorPaletteLightGreenBorder1 = '--colorPaletteLightGreenBorder1';
+export const colorPaletteLightGreenBorder2 = '--colorPaletteLightGreenBorder2';
+export const colorPaletteLightGreenForeground1 = '--colorPaletteLightGreenForeground1';
+export const colorPaletteLightGreenForeground2 = '--colorPaletteLightGreenForeground2';
+export const colorPaletteLightGreenForeground3 = '--colorPaletteLightGreenForeground3';
+export const colorPaletteAnchorBackground2 = '--colorPaletteAnchorBackground2';
+export const colorPaletteAnchorBorderActive = '--colorPaletteAnchorBorderActive';
+export const colorPaletteAnchorForeground2 = '--colorPaletteAnchorForeground2';
+export const colorPaletteBeigeBackground2 = '--colorPaletteBeigeBackground2';
+export const colorPaletteBeigeBorderActive = '--colorPaletteBeigeBorderActive';
+export const colorPaletteBeigeForeground2 = '--colorPaletteBeigeForeground2';
+export const colorPaletteBlueBackground2 = '--colorPaletteBlueBackground2';
+export const colorPaletteBlueBorderActive = '--colorPaletteBlueBorderActive';
+export const colorPaletteBlueForeground2 = '--colorPaletteBlueForeground2';
+export const colorPaletteBrassBackground2 = '--colorPaletteBrassBackground2';
+export const colorPaletteBrassBorderActive = '--colorPaletteBrassBorderActive';
+export const colorPaletteBrassForeground2 = '--colorPaletteBrassForeground2';
+export const colorPaletteBrownBackground2 = '--colorPaletteBrownBackground2';
+export const colorPaletteBrownBorderActive = '--colorPaletteBrownBorderActive';
+export const colorPaletteBrownForeground2 = '--colorPaletteBrownForeground2';
+export const colorPaletteCornflowerBackground2 = '--colorPaletteCornflowerBackground2';
+export const colorPaletteCornflowerBorderActive = '--colorPaletteCornflowerBorderActive';
+export const colorPaletteCornflowerForeground2 = '--colorPaletteCornflowerForeground2';
+export const colorPaletteCranberryBackground2 = '--colorPaletteCranberryBackground2';
+export const colorPaletteCranberryBorderActive = '--colorPaletteCranberryBorderActive';
+export const colorPaletteCranberryForeground2 = '--colorPaletteCranberryForeground2';
+export const colorPaletteDarkGreenBackground2 = '--colorPaletteDarkGreenBackground2';
+export const colorPaletteDarkGreenBorderActive = '--colorPaletteDarkGreenBorderActive';
+export const colorPaletteDarkGreenForeground2 = '--colorPaletteDarkGreenForeground2';
+export const colorPaletteDarkRedBackground2 = '--colorPaletteDarkRedBackground2';
+export const colorPaletteDarkRedBorderActive = '--colorPaletteDarkRedBorderActive';
+export const colorPaletteDarkRedForeground2 = '--colorPaletteDarkRedForeground2';
+export const colorPaletteForestBackground2 = '--colorPaletteForestBackground2';
+export const colorPaletteForestBorderActive = '--colorPaletteForestBorderActive';
+export const colorPaletteForestForeground2 = '--colorPaletteForestForeground2';
+export const colorPaletteGoldBackground2 = '--colorPaletteGoldBackground2';
+export const colorPaletteGoldBorderActive = '--colorPaletteGoldBorderActive';
+export const colorPaletteGoldForeground2 = '--colorPaletteGoldForeground2';
+export const colorPaletteGrapeBackground2 = '--colorPaletteGrapeBackground2';
+export const colorPaletteGrapeBorderActive = '--colorPaletteGrapeBorderActive';
+export const colorPaletteGrapeForeground2 = '--colorPaletteGrapeForeground2';
+export const colorPaletteLavenderBackground2 = '--colorPaletteLavenderBackground2';
+export const colorPaletteLavenderBorderActive = '--colorPaletteLavenderBorderActive';
+export const colorPaletteLavenderForeground2 = '--colorPaletteLavenderForeground2';
+export const colorPaletteLightTealBackground2 = '--colorPaletteLightTealBackground2';
+export const colorPaletteLightTealBorderActive = '--colorPaletteLightTealBorderActive';
+export const colorPaletteLightTealForeground2 = '--colorPaletteLightTealForeground2';
+export const colorPaletteLilacBackground2 = '--colorPaletteLilacBackground2';
+export const colorPaletteLilacBorderActive = '--colorPaletteLilacBorderActive';
+export const colorPaletteLilacForeground2 = '--colorPaletteLilacForeground2';
+export const colorPaletteMagentaBackground2 = '--colorPaletteMagentaBackground2';
+export const colorPaletteMagentaBorderActive = '--colorPaletteMagentaBorderActive';
+export const colorPaletteMagentaForeground2 = '--colorPaletteMagentaForeground2';
+export const colorPaletteMinkBackground2 = '--colorPaletteMinkBackground2';
+export const colorPaletteMinkBorderActive = '--colorPaletteMinkBorderActive';
+export const colorPaletteMinkForeground2 = '--colorPaletteMinkForeground2';
+export const colorPaletteNavyBackground2 = '--colorPaletteNavyBackground2';
+export const colorPaletteNavyBorderActive = '--colorPaletteNavyBorderActive';
+export const colorPaletteNavyForeground2 = '--colorPaletteNavyForeground2';
+export const colorPalettePeachBackground2 = '--colorPalettePeachBackground2';
+export const colorPalettePeachBorderActive = '--colorPalettePeachBorderActive';
+export const colorPalettePeachForeground2 = '--colorPalettePeachForeground2';
+export const colorPalettePinkBackground2 = '--colorPalettePinkBackground2';
+export const colorPalettePinkBorderActive = '--colorPalettePinkBorderActive';
+export const colorPalettePinkForeground2 = '--colorPalettePinkForeground2';
+export const colorPalettePlatinumBackground2 = '--colorPalettePlatinumBackground2';
+export const colorPalettePlatinumBorderActive = '--colorPalettePlatinumBorderActive';
+export const colorPalettePlatinumForeground2 = '--colorPalettePlatinumForeground2';
+export const colorPalettePlumBackground2 = '--colorPalettePlumBackground2';
+export const colorPalettePlumBorderActive = '--colorPalettePlumBorderActive';
+export const colorPalettePlumForeground2 = '--colorPalettePlumForeground2';
+export const colorPalettePumpkinBackground2 = '--colorPalettePumpkinBackground2';
+export const colorPalettePumpkinBorderActive = '--colorPalettePumpkinBorderActive';
+export const colorPalettePumpkinForeground2 = '--colorPalettePumpkinForeground2';
+export const colorPalettePurpleBackground2 = '--colorPalettePurpleBackground2';
+export const colorPalettePurpleBorderActive = '--colorPalettePurpleBorderActive';
+export const colorPalettePurpleForeground2 = '--colorPalettePurpleForeground2';
+export const colorPaletteRoyalBlueBackground2 = '--colorPaletteRoyalBlueBackground2';
+export const colorPaletteRoyalBlueBorderActive = '--colorPaletteRoyalBlueBorderActive';
+export const colorPaletteRoyalBlueForeground2 = '--colorPaletteRoyalBlueForeground2';
+export const colorPaletteSeafoamBackground2 = '--colorPaletteSeafoamBackground2';
+export const colorPaletteSeafoamBorderActive = '--colorPaletteSeafoamBorderActive';
+export const colorPaletteSeafoamForeground2 = '--colorPaletteSeafoamForeground2';
+export const colorPaletteSteelBackground2 = '--colorPaletteSteelBackground2';
+export const colorPaletteSteelBorderActive = '--colorPaletteSteelBorderActive';
+export const colorPaletteSteelForeground2 = '--colorPaletteSteelForeground2';
+export const colorPaletteTealBackground2 = '--colorPaletteTealBackground2';
+export const colorPaletteTealBorderActive = '--colorPaletteTealBorderActive';
+export const colorPaletteTealForeground2 = '--colorPaletteTealForeground2';
+export const borderRadiusNone = '--borderRadiusNone';
+export const borderRadiusSmall = '--borderRadiusSmall';
+export const borderRadiusMedium = '--borderRadiusMedium';
+export const borderRadiusLarge = '--borderRadiusLarge';
+export const borderRadiusXLarge = '--borderRadiusXLarge';
+export const borderRadiusCircular = '--borderRadiusCircular';
+export const fontFamilyBase = '--fontFamilyBase';
+export const fontFamilyMonospace = '--fontFamilyMonospace';
+export const fontFamilyNumeric = '--fontFamilyNumeric';
+export const fontSizeBase100 = '--fontSizeBase100';
+export const fontSizeBase200 = '--fontSizeBase200';
+export const fontSizeBase300 = '--fontSizeBase300';
+export const fontSizeBase400 = '--fontSizeBase400';
+export const fontSizeBase500 = '--fontSizeBase500';
+export const fontSizeBase600 = '--fontSizeBase600';
+export const fontSizeHero700 = '--fontSizeHero700';
+export const fontSizeHero800 = '--fontSizeHero800';
+export const fontSizeHero900 = '--fontSizeHero900';
+export const fontSizeHero1000 = '--fontSizeHero1000';
+export const fontWeightRegular = '--fontWeightRegular';
+export const fontWeightMedium = '--fontWeightMedium';
+export const fontWeightSemibold = '--fontWeightSemibold';
+export const fontWeightBold = '--fontWeightBold';
+export const lineHeightBase100 = '--lineHeightBase100';
+export const lineHeightBase200 = '--lineHeightBase200';
+export const lineHeightBase300 = '--lineHeightBase300';
+export const lineHeightBase400 = '--lineHeightBase400';
+export const lineHeightBase500 = '--lineHeightBase500';
+export const lineHeightBase600 = '--lineHeightBase600';
+export const lineHeightHero700 = '--lineHeightHero700';
+export const lineHeightHero800 = '--lineHeightHero800';
+export const lineHeightHero900 = '--lineHeightHero900';
+export const lineHeightHero1000 = '--lineHeightHero1000';
+export const shadow2 = '--shadow2';
+export const shadow4 = '--shadow4';
+export const shadow8 = '--shadow8';
+export const shadow16 = '--shadow16';
+export const shadow28 = '--shadow28';
+export const shadow64 = '--shadow64';
+export const shadow2Brand = '--shadow2Brand';
+export const shadow4Brand = '--shadow4Brand';
+export const shadow8Brand = '--shadow8Brand';
+export const shadow16Brand = '--shadow16Brand';
+export const shadow28Brand = '--shadow28Brand';
+export const shadow64Brand = '--shadow64Brand';
+export const strokeWidthThin = '--strokeWidthThin';
+export const strokeWidthThick = '--strokeWidthThick';
+export const strokeWidthThicker = '--strokeWidthThicker';
+export const strokeWidthThickest = '--strokeWidthThickest';
+export const spacingHorizontalNone = '--spacingHorizontalNone';
+export const spacingHorizontalXXS = '--spacingHorizontalXXS';
+export const spacingHorizontalXS = '--spacingHorizontalXS';
+export const spacingHorizontalSNudge = '--spacingHorizontalSNudge';
+export const spacingHorizontalS = '--spacingHorizontalS';
+export const spacingHorizontalMNudge = '--spacingHorizontalMNudge';
+export const spacingHorizontalM = '--spacingHorizontalM';
+export const spacingHorizontalL = '--spacingHorizontalL';
+export const spacingHorizontalXL = '--spacingHorizontalXL';
+export const spacingHorizontalXXL = '--spacingHorizontalXXL';
+export const spacingHorizontalXXXL = '--spacingHorizontalXXXL';
+export const spacingVerticalNone = '--spacingVerticalNone';
+export const spacingVerticalXXS = '--spacingVerticalXXS';
+export const spacingVerticalXS = '--spacingVerticalXS';
+export const spacingVerticalSNudge = '--spacingVerticalSNudge';
+export const spacingVerticalS = '--spacingVerticalS';
+export const spacingVerticalMNudge = '--spacingVerticalMNudge';
+export const spacingVerticalM = '--spacingVerticalM';
+export const spacingVerticalL = '--spacingVerticalL';
+export const spacingVerticalXL = '--spacingVerticalXL';
+export const spacingVerticalXXL = '--spacingVerticalXXL';
+export const spacingVerticalXXXL = '--spacingVerticalXXXL';
+export const durationUltraFast = '--durationUltraFast';
+export const durationFaster = '--durationFaster';
+export const durationFast = '--durationFast';
+export const durationNormal = '--durationNormal';
+export const durationSlow = '--durationSlow';
+export const durationSlower = '--durationSlower';
+export const durationUltraSlow = '--durationUltraSlow';
+export const curveAccelerateMax = '--curveAccelerateMax';
+export const curveAccelerateMid = '--curveAccelerateMid';
+export const curveAccelerateMin = '--curveAccelerateMin';
+export const curveDecelerateMax = '--curveDecelerateMax';
+export const curveDecelerateMid = '--curveDecelerateMid';
+export const curveDecelerateMin = '--curveDecelerateMin';
+export const curveEasyEaseMax = '--curveEasyEaseMax';
+export const curveEasyEase = '--curveEasyEase';
+export const curveLinear = '--curveLinear';
diff --git a/packages/web-components/src/theme/set-theme.ts b/packages/web-components/src/theme/set-theme.ts
index d46071c986cda..e10bc673cf96a 100644
--- a/packages/web-components/src/theme/set-theme.ts
+++ b/packages/web-components/src/theme/set-theme.ts
@@ -1,5 +1,4 @@
 import type { Theme } from '@fluentui/tokens';
-import { FASTElement } from '@microsoft/fast-element';
 import * as tokens from './design-tokens.js';
 
 const tokenNames = Object.keys(tokens) as (keyof Theme)[];
@@ -10,12 +9,12 @@ const tokenNames = Object.keys(tokens) as (keyof Theme)[];
  */
 export const setTheme = (theme: Theme) => {
   for (const t of tokenNames) {
-    tokens[t].withDefault(theme[t] as string);
+    document.body.style.setProperty(tokens[t] as string, theme[t] as string);
   }
 };
 
-export const setThemeFor = (element: FASTElement, theme: Theme) => {
+export const setThemeFor = (element: HTMLElement, theme: Theme) => {
   for (const t of tokenNames) {
-    tokens[t].setValueFor(element, theme[t] as string);
+    element.style.setProperty(tokens[t] as string, theme[t] as string);
   }
 };
diff --git a/packages/web-components/src/theme/theme.stories.ts b/packages/web-components/src/theme/theme.stories.ts
index 132c42824782c..4641348903aad 100644
--- a/packages/web-components/src/theme/theme.stories.ts
+++ b/packages/web-components/src/theme/theme.stories.ts
@@ -12,13 +12,13 @@ export const Tokens = () => `
   <h3>Theme Tokens</h3>
   <p>Debug story which uses theme tokens to style the element below.</p>
   <div style="
-    font-family: ${tokens.fontFamilyBase.createCSS()};
-    font-size: ${tokens.fontSizeBase300.createCSS()};
-    background: var(${tokens.colorBrandBackground.cssCustomProperty});
-    color: ${tokens.colorNeutralForegroundOnBrand.createCSS()};
-    border: ${tokens.strokeWidthThicker.createCSS()} solid ${tokens.colorNeutralStroke1.createCSS()};
-    padding: ${tokens.spacingVerticalS.createCSS()} ${tokens.spacingHorizontalM.createCSS()};
-    box-shadow: ${tokens.shadow28.createCSS()};
+    font-family: var(${tokens.fontFamilyBase});
+    font-size: var(${tokens.fontSizeBase300});
+    background: var(${tokens.colorBrandBackground});
+    color: var(${tokens.colorNeutralForegroundOnBrand});
+    border: var(${tokens.strokeWidthThicker}) solid var(${tokens.colorNeutralStroke1});
+    padding: var(${tokens.spacingVerticalS}) var(${tokens.spacingHorizontalM});
+    box-shadow: var(${tokens.shadow28});
   ">colorNeutralForegroundOnBrand on colorBrandBackground with shadow28</div>
 </div>
 `;
diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index 2de84d4416a84..a7501465ebcf9 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -33,78 +33,78 @@ export const styles = css`
   ${ButtonStyles}
 
   :host([aria-pressed="true"]) .control {
-    border-color: ${colorNeutralStroke1};
-    background-color: ${colorNeutralBackground1Selected};
-    color: ${colorNeutralForeground1};
-    border-width: ${strokeWidthThin};
+    border-color: var(${colorNeutralStroke1});
+    background-color: var(${colorNeutralBackground1Selected});
+    color: var(${colorNeutralForeground1});
+    border-width: var(${strokeWidthThin});
   }
 
   :host([aria-pressed='true']:hover) .control {
-    border-color: ${colorNeutralStroke1Hover};
-    background-color: ${colorNeutralBackground1Hover};
+    border-color: var(${colorNeutralStroke1Hover});
+    background-color: var(${colorNeutralBackground1Hover});
   }
 
   :host([aria-pressed='true']:active) .control {
-    border-color: ${colorNeutralStroke1Pressed};
-    background-color: ${colorNeutralBackground1Pressed};
+    border-color: var(${colorNeutralStroke1Pressed});
+    background-color: var(${colorNeutralBackground1Pressed});
   }
 
   :host([aria-pressed='true'][appearance='primary']) .control {
     border-color: transparent;
-    background-color: ${colorBrandBackgroundSelected};
-    color: ${colorNeutralForegroundOnBrand};
+    background-color: var(${colorBrandBackgroundSelected});
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host([aria-pressed='true'][appearance='primary']:hover) .control {
-    background-color: ${colorBrandBackgroundHover};
+    background-color: var(${colorBrandBackgroundHover});
   }
 
   :host([aria-pressed='true'][appearance='primary']:active) .control {
-    background-color: ${colorBrandBackgroundPressed};
+    background-color: var(${colorBrandBackgroundPressed});
   }
 
   :host([aria-pressed='true'][appearance='subtle']) .control {
     border-color: transparent;
-    background-color: ${colorSubtleBackgroundSelected};
-    color: ${colorNeutralForeground2Selected};
+    background-color: var(${colorSubtleBackgroundSelected});
+    color: var(${colorNeutralForeground2Selected});
   }
 
   :host([aria-pressed='true'][appearance='subtle']:hover) .control {
-    background-color: ${colorSubtleBackgroundHover};
-    color: ${colorNeutralForeground2Hover};
+    background-color: var(${colorSubtleBackgroundHover});
+    color: var(${colorNeutralForeground2Hover});
   }
 
   :host([aria-pressed='true'][appearance='subtle']:active) .control {
-    background-color: ${colorSubtleBackgroundPressed};
-    color: ${colorNeutralForeground2Pressed};
+    background-color: var(${colorSubtleBackgroundPressed});
+    color: var(${colorNeutralForeground2Pressed});
   }
 
   :host([aria-pressed='true'][appearance='outline']) .control,
   :host([aria-pressed='true'][appearance='transparent']) .control {
-    background-color: ${colorTransparentBackgroundSelected};
+    background-color: var(${colorTransparentBackgroundSelected});
   }
 
   :host([aria-pressed='true'][appearance='outline']:hover) .control,
   :host([aria-pressed='true'][appearance='transparent']:hover) .control {
-    background-color: ${colorTransparentBackgroundHover};
+    background-color: var(${colorTransparentBackgroundHover});
   }
 
   :host([aria-pressed='true'][appearance='outline']:active) .control,
   :host([aria-pressed='true'][appearance='transparent']:active) .control {
-    background-color: ${colorTransparentBackgroundPressed};
+    background-color: var(${colorTransparentBackgroundPressed});
   }
 
   :host([aria-pressed='true'][appearance='transparent']) .control {
     border-color: transparent;
-    color: ${colorNeutralForeground2BrandSelected};
+    color: var(${colorNeutralForeground2BrandSelected});
   }
 
   :host([aria-pressed='true'][appearance='transparent']:hover) .control {
-    color: ${colorNeutralForeground2BrandHover};
+    color: var(${colorNeutralForeground2BrandHover});
   }
 
   :host([aria-pressed='true'][appearance='transparent']:active) .control {
-    color: ${colorNeutralForeground2BrandPressed};
+    color: var(${colorNeutralForeground2BrandPressed});
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`