diff --git a/.changeset/clever-masks-brake.md b/.changeset/clever-masks-brake.md
new file mode 100644
index 00000000..da40ac96
--- /dev/null
+++ b/.changeset/clever-masks-brake.md
@@ -0,0 +1,8 @@
+---
+"@adaptive-web/adaptive-web-components": minor
+"@adaptive-web/adaptive-ui": minor
+"@adaptive-web/adaptive-ui-designer-core": patch
+"@adaptive-web/adaptive-ui-designer-figma": patch
+---
+
+Remove deprecated public APIs, the `adaptive-ui/migration` export, the `Swatch` class (use `Color`), and per-state color token aliases. Internal packages now use `ColorSet` properties, `controlListDensityStyles`, `densityControlList`, and `Color.toString()`.
diff --git a/package-lock.json b/package-lock.json
index 9823963f..11490d49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,7 @@
             "version": "0.0.1",
             "license": "MIT",
             "dependencies": {
-                "@adaptive-web/adaptive-web-components": "0.9.1"
+                "@adaptive-web/adaptive-web-components": "0.9.2"
             },
             "devDependencies": {
                 "rimraf": "^3.0.2",
@@ -712,7 +712,7 @@
             "version": "0.0.1",
             "license": "MIT",
             "dependencies": {
-                "@adaptive-web/adaptive-web-components": "0.9.1"
+                "@adaptive-web/adaptive-web-components": "0.9.2"
             },
             "devDependencies": {
                 "rimraf": "^3.0.2",
@@ -3458,6 +3458,18 @@
                 }
             }
         },
+        "node_modules/@changesets/cli/node_modules/@types/node": {
+            "version": "26.6.5",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-26.6.5.tgz",
+            "integrity": "sha512-uMzsv9stDdofIZBx4UGh4Z9ZgXnGC9seRDscilBcTHAeOFk67MZg/k9bWVfO+bk4qZmG+l52hRnLwUiH2LnJTg==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "undici-types": "~8.9.0"
+            }
+        },
         "node_modules/@changesets/cli/node_modules/ansi-colors": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -32957,6 +32969,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/undici-types": {
+            "version": "8.9.0",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.9.0.tgz",
+            "integrity": "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "peer": true
+        },
         "node_modules/unfetch": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
@@ -34905,7 +34926,7 @@
         },
         "packages/adaptive-ui": {
             "name": "@adaptive-web/adaptive-ui",
-            "version": "0.13.1",
+            "version": "0.13.2",
             "license": "MIT",
             "dependencies": {
                 "@happy-dom/global-registrator": "^14.7.1",
@@ -34942,10 +34963,10 @@
         },
         "packages/adaptive-ui-designer-core": {
             "name": "@adaptive-web/adaptive-ui-designer-core",
-            "version": "0.6.0",
+            "version": "0.6.1",
             "license": "MIT",
             "dependencies": {
-                "@adaptive-web/adaptive-ui": "^0.13.0",
+                "@adaptive-web/adaptive-ui": "^0.13.2",
                 "@microsoft/fast-foundation": "^3.0.0-alpha.31",
                 "tslog": "^4.10.2"
             },
@@ -34970,11 +34991,11 @@
         },
         "packages/adaptive-ui-designer-figma": {
             "name": "@adaptive-web/adaptive-ui-designer-figma",
-            "version": "0.5.3",
+            "version": "0.6.0",
             "license": "MIT",
             "dependencies": {
-                "@adaptive-web/adaptive-ui": "^0.13.0",
-                "@adaptive-web/adaptive-ui-designer-core": "^0.6.0",
+                "@adaptive-web/adaptive-ui": "^0.13.2",
+                "@adaptive-web/adaptive-ui-designer-core": "^0.6.1",
                 "@types/ajv": "^1.0.0",
                 "ajv": "^8.18.0",
                 "change-case": "^5.4.4",
@@ -34994,9 +35015,9 @@
             "version": "0.0.1",
             "license": "MIT",
             "dependencies": {
-                "@adaptive-web/adaptive-ui-designer-core": "^0.6.0",
-                "@adaptive-web/adaptive-ui-designer-figma": "^0.5.3",
-                "@adaptive-web/adaptive-web-components": "0.9.1",
+                "@adaptive-web/adaptive-ui-designer-core": "^0.6.1",
+                "@adaptive-web/adaptive-ui-designer-figma": "^0.6.0",
+                "@adaptive-web/adaptive-web-components": "0.9.2",
                 "@csstools/css-calc": "^1.1.1",
                 "@csstools/css-parser-algorithms": "^2.2.0",
                 "@csstools/css-tokenizer": "^2.1.1",
@@ -35022,7 +35043,7 @@
                 "vite-plugin-svgo": "^1.3.0"
             },
             "peerDependencies": {
-                "@adaptive-web/adaptive-ui": "0.13.1",
+                "@adaptive-web/adaptive-ui": "0.13.2",
                 "@microsoft/fast-element": "2.0.0-beta.26",
                 "@microsoft/fast-foundation": "3.0.0-alpha.31"
             }
@@ -35739,8 +35760,8 @@
             "version": "0.0.1",
             "license": "MIT",
             "dependencies": {
-                "@adaptive-web/adaptive-ui": "0.13.1",
-                "@adaptive-web/adaptive-web-components": "0.9.1",
+                "@adaptive-web/adaptive-ui": "0.13.2",
+                "@adaptive-web/adaptive-web-components": "0.9.2",
                 "@microsoft/fast-element": "2.0.0-beta.26",
                 "@microsoft/fast-foundation": "3.0.0-alpha.31",
                 "culori": "^3.2.0"
@@ -36359,10 +36380,10 @@
         },
         "packages/adaptive-web-components": {
             "name": "@adaptive-web/adaptive-web-components",
-            "version": "0.9.1",
+            "version": "0.9.2",
             "license": "MIT",
             "dependencies": {
-                "@adaptive-web/adaptive-ui": "0.13.1",
+                "@adaptive-web/adaptive-ui": "0.13.2",
                 "@microsoft/fast-element": "2.0.0-beta.26",
                 "@microsoft/fast-foundation": "3.0.0-alpha.31",
                 "@microsoft/fast-web-utilities": "6.0.0",
@@ -36642,7 +36663,7 @@
         "@adaptive-web/adaptive-ui-designer-core": {
             "version": "file:packages/adaptive-ui-designer-core",
             "requires": {
-                "@adaptive-web/adaptive-ui": "^0.13.0",
+                "@adaptive-web/adaptive-ui": "^0.13.2",
                 "@microsoft/fast-foundation": "^3.0.0-alpha.31",
                 "@types/culori": "^2.0.0",
                 "rimraf": "^3.0.2",
@@ -36661,8 +36682,8 @@
         "@adaptive-web/adaptive-ui-designer-figma": {
             "version": "file:packages/adaptive-ui-designer-figma",
             "requires": {
-                "@adaptive-web/adaptive-ui": "^0.13.0",
-                "@adaptive-web/adaptive-ui-designer-core": "^0.6.0",
+                "@adaptive-web/adaptive-ui": "^0.13.2",
+                "@adaptive-web/adaptive-ui-designer-core": "^0.6.1",
                 "@figma/rest-api-spec": "^0.36.0",
                 "@types/ajv": "^1.0.0",
                 "@types/inquirer": "^9.0.7",
@@ -36699,9 +36720,9 @@
         "@adaptive-web/adaptive-ui-designer-figma-plugin": {
             "version": "file:packages/adaptive-ui-designer-figma-plugin",
             "requires": {
-                "@adaptive-web/adaptive-ui-designer-core": "^0.6.0",
-                "@adaptive-web/adaptive-ui-designer-figma": "^0.5.3",
-                "@adaptive-web/adaptive-web-components": "0.9.1",
+                "@adaptive-web/adaptive-ui-designer-core": "^0.6.1",
+                "@adaptive-web/adaptive-ui-designer-figma": "^0.6.0",
+                "@adaptive-web/adaptive-web-components": "0.9.2",
                 "@csstools/css-calc": "^1.1.1",
                 "@csstools/css-parser-algorithms": "^2.2.0",
                 "@csstools/css-tokenizer": "^2.1.1",
@@ -37088,8 +37109,8 @@
         "@adaptive-web/adaptive-ui-explorer": {
             "version": "file:packages/adaptive-ui-explorer",
             "requires": {
-                "@adaptive-web/adaptive-ui": "0.13.1",
-                "@adaptive-web/adaptive-web-components": "0.9.1",
+                "@adaptive-web/adaptive-ui": "0.13.2",
+                "@adaptive-web/adaptive-web-components": "0.9.2",
                 "@microsoft/fast-element": "2.0.0-beta.26",
                 "@microsoft/fast-foundation": "3.0.0-alpha.31",
                 "culori": "^3.2.0",
@@ -37325,7 +37346,7 @@
         "@adaptive-web/adaptive-web-components": {
             "version": "file:packages/adaptive-web-components",
             "requires": {
-                "@adaptive-web/adaptive-ui": "0.13.1",
+                "@adaptive-web/adaptive-ui": "0.13.2",
                 "@babel/core": "^7.20.12",
                 "@custom-elements-manifest/analyzer": "^0.6.8",
                 "@custom-elements-manifest/to-markdown": "^0.1.0",
@@ -37469,7 +37490,7 @@
         "@adaptive-web/example-customize-component": {
             "version": "file:examples/customize-component",
             "requires": {
-                "@adaptive-web/adaptive-web-components": "0.9.1",
+                "@adaptive-web/adaptive-web-components": "0.9.2",
                 "rimraf": "^3.0.2",
                 "typescript": "^4.7.0",
                 "vite": "^4.5.13",
@@ -37827,7 +37848,7 @@
         "@adaptive-web/example-use-adaptive-components": {
             "version": "file:examples/use-adaptive-components",
             "requires": {
-                "@adaptive-web/adaptive-web-components": "0.9.1",
+                "@adaptive-web/adaptive-web-components": "0.9.2",
                 "rimraf": "^3.0.2",
                 "typescript": "^4.7.0",
                 "vite": "^4.5.13",
@@ -39599,6 +39620,17 @@
                         "iconv-lite": "^0.7.0"
                     }
                 },
+                "@types/node": {
+                    "version": "26.6.5",
+                    "resolved": "https://registry.npmjs.org/@types/node/-/node-26.6.5.tgz",
+                    "integrity": "sha512-uMzsv9stDdofIZBx4UGh4Z9ZgXnGC9seRDscilBcTHAeOFk67MZg/k9bWVfO+bk4qZmG+l52hRnLwUiH2LnJTg==",
+                    "dev": true,
+                    "optional": true,
+                    "peer": true,
+                    "requires": {
+                        "undici-types": "~8.9.0"
+                    }
+                },
                 "ansi-colors": {
                     "version": "4.1.3",
                     "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -61841,6 +61873,14 @@
                 "which-boxed-primitive": "^1.0.2"
             }
         },
+        "undici-types": {
+            "version": "8.9.0",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.9.0.tgz",
+            "integrity": "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
         "unfetch": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
diff --git a/packages/adaptive-ui-designer-core/src/registry/recipes.ts b/packages/adaptive-ui-designer-core/src/registry/recipes.ts
index 05523823..5e442260 100644
--- a/packages/adaptive-ui-designer-core/src/registry/recipes.ts
+++ b/packages/adaptive-ui-designer-core/src/registry/recipes.ts
@@ -34,7 +34,6 @@ import {
     criticalStrokeSubtle,
     densityControl,
     densityControlList,
-    densityItemContainer,
     densityLayer,
     densityText,
     elevationCardRest,
@@ -182,10 +181,6 @@ const designTokens: DesignTokenStore = [
     densityControlList.horizontalGapUnits,
     densityControlList.verticalPaddingUnits,
     densityControlList.verticalGapUnits,
-    densityItemContainer.horizontalPaddingUnits,
-    densityItemContainer.horizontalGapUnits,
-    densityItemContainer.verticalPaddingUnits,
-    densityItemContainer.verticalGapUnits,
     densityLayer.horizontalPaddingUnits,
     densityLayer.horizontalGapUnits,
     densityLayer.verticalPaddingUnits,
@@ -330,10 +325,6 @@ const densityTokens: DesignTokenStore = [
     densityControlList.horizontalGap,
     densityControlList.verticalPadding,
     densityControlList.verticalGap,
-    densityItemContainer.horizontalPadding,
-    densityItemContainer.verticalPadding,
-    densityItemContainer.horizontalGap,
-    densityItemContainer.verticalGap,
     densityLayer.horizontalPadding,
     densityLayer.verticalPadding,
     densityLayer.horizontalGap,
diff --git a/packages/adaptive-ui-designer-figma-plugin/src/core/code-gen.ts b/packages/adaptive-ui-designer-figma-plugin/src/core/code-gen.ts
index 5d1db997..3ea35e74 100644
--- a/packages/adaptive-ui-designer-figma-plugin/src/core/code-gen.ts
+++ b/packages/adaptive-ui-designer-figma-plugin/src/core/code-gen.ts
@@ -130,7 +130,7 @@ export class CodeGen {
         let adjustedID = tokenID;
 
         // TODO: Clean up naming and grouping
-        const densityGroups = ["control", "item-container", "layer"];
+        const densityGroups = ["control", "control-list", "item-container", "layer"];
         if (tokenID.startsWith("density_")) {
             for (let i = 0; i < densityGroups.length; i++) {
                 const group = densityGroups[i];
diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts
index deed1f12..7875e575 100644
--- a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts
+++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts
@@ -2,7 +2,7 @@ import { css, customElement, FASTElement, html, observable, repeat, when } from
 import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
 import { DesignToken, staticallyCompose } from "@microsoft/fast-foundation";
 import { StyleProperty, StylePropertyShorthand, Styles } from "@adaptive-web/adaptive-ui";
-import { neutralStrokeReadableRest } from "@adaptive-web/adaptive-ui/reference";
+import { neutralStrokeReadable } from "@adaptive-web/adaptive-ui/reference";
 import type { AdaptiveDesignTokenOrGroup, AppliedDesignToken, DesignTokenValue, PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core";
 import { StatesState } from "@adaptive-web/adaptive-ui-designer-core";
 import type { PluginMessage, SkipInvisibleNodesMessage} from "../core/messages.js";
@@ -631,7 +631,7 @@ const styles = css`
 
     .title {
         padding: 0 calc(var(--global-designUnit) * 3);
-        color: ${neutralStrokeReadableRest}
+        color: ${neutralStrokeReadable.rest}
     }
 
     .tokens-panel-content {
diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/components/corner-radius/index.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/components/corner-radius/index.ts
index 5095972e..5f48bc83 100644
--- a/packages/adaptive-ui-designer-figma-plugin/src/ui/components/corner-radius/index.ts
+++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/components/corner-radius/index.ts
@@ -1,5 +1,5 @@
 import { attr, css, customElement, FASTElement, html } from "@microsoft/fast-element";
-import { neutralFillStealthHover, neutralStrokeReadableRest } from "@adaptive-web/adaptive-ui/reference";
+import { neutralFillStealth, neutralStrokeReadable } from "@adaptive-web/adaptive-ui/reference";
 
 const template = html<CornerRadius>`
     <template
@@ -20,7 +20,7 @@ const styles = css`
         display: inline-flex;
         align-items: center;
         text-align: center;
-        color: ${neutralStrokeReadableRest};
+        color: ${neutralStrokeReadable.rest};
     }
 
     .indicator {
@@ -58,7 +58,7 @@ const styles = css`
 
     :host(.interactive:hover) {
         cursor: pointer;
-        background: ${neutralFillStealthHover};
+        background: ${neutralFillStealth.hover};
     }
 
     :host(.selected),
diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/components/stealth-button/index.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/components/stealth-button/index.ts
index 7ec105c6..b482dfdc 100644
--- a/packages/adaptive-ui-designer-figma-plugin/src/ui/components/stealth-button/index.ts
+++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/components/stealth-button/index.ts
@@ -1,10 +1,8 @@
 import {
     cornerRadiusControl,
-    neutralFillStealthActive,
-    neutralFillStealthHover,
-    neutralFillStealthRest,
-    neutralStrokeStrongRest,
-    neutralStrokeSubtleRest,
+    neutralFillStealth,
+    neutralStrokeStrong,
+    neutralStrokeSubtle,
 } from "@adaptive-web/adaptive-ui/reference";
 import { css, customElement, FASTElement, html } from "@microsoft/fast-element";
 
@@ -32,21 +30,21 @@ const styles = css`
         height: 32px;
         border: none;
         border-radius: ${cornerRadiusControl};
-        background: ${neutralFillStealthRest};
-        fill: ${neutralStrokeStrongRest};
+        background: ${neutralFillStealth.rest};
+        fill: ${neutralStrokeStrong.rest};
         outline: none;
         font-size: inherit;
     }
 
     button:focus {
-        border-color: ${neutralStrokeSubtleRest};
+        border-color: ${neutralStrokeSubtle.rest};
     }
     button:hover {
-        background: ${neutralFillStealthHover};
+        background: ${neutralFillStealth.hover};
     }
 
     button:active {
-        background: ${neutralFillStealthActive};
+        background: ${neutralFillStealth.active};
     }
 
     :host([aria-expanded="true"]) button {
diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/components/style-token-item/index.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/components/style-token-item/index.ts
index f182a8b9..4ce6f518 100644
--- a/packages/adaptive-ui-designer-figma-plugin/src/ui/components/style-token-item/index.ts
+++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/components/style-token-item/index.ts
@@ -1,6 +1,6 @@
 import { attr, css, customElement, FASTElement, html, observable, ref, when } from "@microsoft/fast-element";
 import { Styles } from "@adaptive-web/adaptive-ui";
-import { cornerRadiusControl, neutralFillStealthHover, neutralStrokeStrongRest } from "@adaptive-web/adaptive-ui/reference";
+import { cornerRadiusControl, neutralFillStealth, neutralStrokeStrong } from "@adaptive-web/adaptive-ui/reference";
 import { TokenGlyph, TokenGlyphValueType } from "../token-glyph/index.js";
 
 // TODO, make a button
@@ -45,7 +45,7 @@ const styles = css`
         justify-content: space-between;
         flex-grow: 1;
         border-radius: ${cornerRadiusControl};
-        color: ${neutralStrokeStrongRest};
+        color: ${neutralStrokeStrong.rest};
         padding: 8px 4px;
     }
 
@@ -62,7 +62,7 @@ const styles = css`
     }
 
     .content[role="button"]:hover {
-        background: ${neutralFillStealthHover};
+        background: ${neutralFillStealth.hover};
         cursor: pointer;
     }
 `;
diff --git a/packages/adaptive-ui-explorer/src/app.ts b/packages/adaptive-ui-explorer/src/app.ts
index dcab04f1..9ac39dd6 100644
--- a/packages/adaptive-ui-explorer/src/app.ts
+++ b/packages/adaptive-ui-explorer/src/app.ts
@@ -17,7 +17,7 @@ import {
     neutralAsOverlay,
     neutralBaseColor,
     neutralPalette,
-    wcagContrastLevel
+    wcagContrastLevel,
 } from "@adaptive-web/adaptive-ui/reference";
 import {
     css,
@@ -230,7 +230,7 @@ export class App extends FASTElement {
                             neutralBaseColor.setValueFor(app.canvas, source.neutralColor);
 
                             app.neutralPalette = neutralPalette.getValueFor(app.canvas);
-                            app.neutralColors = app.neutralPalette.swatches.map((x) => x.toColorString());
+                            app.neutralColors = app.neutralPalette.swatches.map((x) => x.toString());
 
                             app.updateBackgrounds();
                             break;
@@ -333,7 +333,7 @@ export class App extends FASTElement {
 
             return this.layerTokens
                 .map((conf: [DesignToken<Color>, string]): SwatchInfo => {
-                    const color = conf[0].getValueFor(ds).toColorString();
+                    const color = conf[0].getValueFor(ds).toString();
                     return {
                         index: this.neutralColors.indexOf(color),
                         color: color,
diff --git a/packages/adaptive-ui-explorer/src/components/adaptive-component.ts b/packages/adaptive-ui-explorer/src/components/adaptive-component.ts
index 59457f25..11fbaf96 100644
--- a/packages/adaptive-ui-explorer/src/components/adaptive-component.ts
+++ b/packages/adaptive-ui-explorer/src/components/adaptive-component.ts
@@ -1,6 +1,6 @@
 import { ElementStylesRenderer, Interactivity } from "@adaptive-web/adaptive-ui";
 import type { Styles } from "@adaptive-web/adaptive-ui";
-import { cornerRadiusControl, densityControl, typeRampBaseFontSize } from "@adaptive-web/adaptive-ui/reference";
+import { cornerRadiusControl, densityControl, typeRampDefault } from "@adaptive-web/adaptive-ui/reference";
 import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
 import {
     attr,
@@ -32,7 +32,7 @@ const styles = css`
         justify-items: start;
         border-radius: ${cornerRadiusControl};
         padding: ${densityControl.padding};
-        font-size: ${typeRampBaseFontSize};
+        font-size: ${typeRampDefault.base.fontSize};
         cursor: pointer;
     }
 `;
diff --git a/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.styles.ts b/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.styles.ts
index 8294e154..e46832a3 100644
--- a/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.styles.ts
+++ b/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.styles.ts
@@ -1,5 +1,5 @@
 import { css } from "@microsoft/fast-element";
-import { typeRampPlus1FontSize, typeRampPlus1LineHeight } from "@adaptive-web/adaptive-ui/reference";
+import { typeRampDefault } from "@adaptive-web/adaptive-ui/reference";
 import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
 
 export const controlPaneStyles = css`
@@ -13,8 +13,8 @@ export const controlPaneStyles = css`
     }
 
     .title {
-        font-size: ${typeRampPlus1FontSize};
-        line-height: ${typeRampPlus1LineHeight};
+        font-size: ${typeRampDefault.plus1.fontSize};
+        line-height: ${typeRampDefault.plus1.lineHeight};
     }
 
     .radio-group {
diff --git a/packages/adaptive-ui-explorer/src/components/layer-background/index.ts b/packages/adaptive-ui-explorer/src/components/layer-background/index.ts
index bd25e190..131580d8 100644
--- a/packages/adaptive-ui-explorer/src/components/layer-background/index.ts
+++ b/packages/adaptive-ui-explorer/src/components/layer-background/index.ts
@@ -12,7 +12,7 @@ import {
     layerFillFixedPlus3,
     layerFillFixedPlus4,
     layerPalette,
-    neutralStrokeStrongRest,
+    neutralStrokeStrong,
 } from "@adaptive-web/adaptive-ui/reference";
 import { componentBaseStyles } from '@adaptive-web/adaptive-web-components';
 import { attr, css, customElement, ElementViewTemplate, FASTElement, html, nullableNumberConverter } from "@microsoft/fast-element";
@@ -24,7 +24,7 @@ const layerBackgroundStyles = css`
     :host {
         display: block;
         background: ${colorContext};
-        color: ${neutralStrokeStrongRest};
+        color: ${neutralStrokeStrong.rest};
     }
 `;
 
diff --git a/packages/adaptive-ui-explorer/src/components/swatch.ts b/packages/adaptive-ui-explorer/src/components/swatch.ts
index a4b5f86b..ad45cef7 100644
--- a/packages/adaptive-ui-explorer/src/components/swatch.ts
+++ b/packages/adaptive-ui-explorer/src/components/swatch.ts
@@ -1,5 +1,5 @@
 import { Color } from "@adaptive-web/adaptive-ui";
-import { colorContext, densityControl, neutralStrokeReadableRest, typeRampMinus1FontSize } from "@adaptive-web/adaptive-ui/reference";
+import { colorContext, densityControl, neutralStrokeReadable, typeRampDefault } from "@adaptive-web/adaptive-ui/reference";
 import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
 import {
     attr,
@@ -40,8 +40,8 @@ const styles = css`
         align-items: center;
         justify-items: start;
         grid-column-gap: ${densityControl.horizontalGap};
-        color: ${neutralStrokeReadableRest};
-        font-size: ${typeRampMinus1FontSize};
+        color: ${neutralStrokeReadable.rest};
+        font-size: ${typeRampDefault.minus1.fontSize};
     }
 
     :host([type="foreground"]) .icon::before {
@@ -143,7 +143,7 @@ export class AppSwatch extends FASTElement {
     }
 
     private evaluateToken(token?: DesignToken<Color>): string {
-        return token?.getValueFor(this).toColorString() || "";
+        return token?.getValueFor(this).toString() || "";
     }
 
     private updateIconStyle(): void {
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.styles.ts b/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.styles.ts
index d4ef06b2..33016bd0 100644
--- a/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.styles.ts
+++ b/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.styles.ts
@@ -3,9 +3,8 @@ import {
     bodyFontFamily,
     colorContext,
     cornerRadiusLayer,
-    neutralStrokeStrongRest,
-    typeRampPlus3FontSize,
-    typeRampPlus3LineHeight
+    neutralStrokeStrong,
+    typeRampDefault,
 } from "@adaptive-web/adaptive-ui/reference";
 import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
 
@@ -15,7 +14,7 @@ export const sampleAppStyles = css`
     :host {
         display: flex;
         font-family: ${bodyFontFamily};
-        color: ${neutralStrokeStrongRest};
+        color: ${neutralStrokeStrong.rest};
         min-height: 650px;
         min-width: 775px;
         background: ${colorContext};
@@ -87,8 +86,8 @@ export const sampleAppStyles = css`
     }
 
     .content .heading {
-        font-size: ${typeRampPlus3FontSize};
-        line-height: ${typeRampPlus3LineHeight};
+        font-size: ${typeRampDefault.plus3.fontSize};
+        line-height: ${typeRampDefault.plus3.lineHeight};
         margin: 0;
         margin-bottom: 10px;
         font-weight: bold;
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.styles.ts b/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.styles.ts
index 1cce8646..dc5413af 100644
--- a/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.styles.ts
+++ b/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.styles.ts
@@ -1,5 +1,5 @@
 import { css } from "@microsoft/fast-element";
-import { accentFillReadableRest, cornerRadiusControl, designUnit, highlightFillSubtleRest, neutralStrokeStrongRest } from "@adaptive-web/adaptive-ui/reference";
+import { accentFillReadable, cornerRadiusControl, designUnit, highlightFillSubtle, neutralStrokeStrong } from "@adaptive-web/adaptive-ui/reference";
 import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
 
 export const samplePageStyles = css`
@@ -14,7 +14,7 @@ export const samplePageStyles = css`
     }
 
     .image-container {
-        background: ${highlightFillSubtleRest};
+        background: ${highlightFillSubtle.rest};
         width: 100%;
         height: 215px;
         display: flex;
@@ -30,7 +30,7 @@ export const samplePageStyles = css`
         flex-direction: column;
         padding: calc(var(--gutter) * 1px);
         text-align: start;
-        color: ${neutralStrokeStrongRest};
+        color: ${neutralStrokeStrong.rest};
     }
 
     .sample-control {
@@ -45,7 +45,7 @@ export const samplePageStyles = css`
     .sample-control-icon {
         width: 21px;
         height: 21px;
-        background-color: ${accentFillReadableRest};
+        background-color: ${accentFillReadable.rest};
         border-radius: ${cornerRadiusControl};
     }
 
diff --git a/packages/adaptive-ui/docs/api-report.md b/packages/adaptive-ui/docs/api-report.md
index 64957722..41d0d318 100644
--- a/packages/adaptive-ui/docs/api-report.md
+++ b/packages/adaptive-ui/docs/api-report.md
@@ -1,928 +1,852 @@
-## API Report File for "@adaptive-web/adaptive-ui"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { AddBehavior } from '@microsoft/fast-element';
-import { Color as Color_2 } from 'culori/fn';
-import { ComposableStyles } from '@microsoft/fast-element';
-import { CSSDesignToken } from '@microsoft/fast-foundation';
-import { CSSDirective } from '@microsoft/fast-element';
-import { DesignToken } from '@microsoft/fast-foundation';
-import { DesignTokenResolver } from '@microsoft/fast-foundation';
-import { DesignTokenValue } from '@microsoft/fast-foundation/design-token-core.js';
-import { ElementStyles } from '@microsoft/fast-element';
-import { Rgb } from 'culori/fn';
-import { TypedCSSDesignToken as TypedCSSDesignToken_2 } from '../adaptive-design-tokens.js';
-import { ValuesOf } from '@microsoft/fast-foundation';
-
-// @public
-export class BasePalette<T extends Color = Color> implements Palette<T> {
-    constructor(source: Color, swatches: ReadonlyArray<T>);
-    readonly closestIndexCache: Map<number, number>;
-    closestIndexOf(reference: RelativeLuminance): number;
-    colorContrast(reference: RelativeLuminance, contrastTarget: number, initialSearchIndex?: number, direction?: PaletteDirection): T;
-    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T;
-    get(index: number): T;
-    readonly lastIndex: number;
-    readonly reversedSwatches: ReadonlyArray<T>;
-    readonly source: Color;
-    readonly swatches: ReadonlyArray<T>;
-}
-
-// @internal
-export const _black: Color;
-
-// @public
-export function blackOrWhiteByContrast(reference: Paint, minContrast: number, defaultBlack: boolean): Color;
-
-// @public
-export function blackOrWhiteByContrastSet(set: InteractivePaintSet, minContrast: number, defaultBlack: boolean): InteractiveColorSet;
-
-// @public
-export type BooleanCondition = string;
-
-// @public @deprecated (undocumented)
-export const BorderFill: {
-    all: (value: StyleValue) => StyleProperties;
-};
-
-// @public @deprecated (undocumented)
-export const BorderStyle: {
-    all: (value: StyleValue) => StyleProperties;
-};
-
-// @public @deprecated (undocumented)
-export const BorderThickness: {
-    all: (value: StyleValue) => StyleProperties;
-};
-
-// @public
-export function calculateOverlayColor(match: Color_2, background: Color_2): Rgb;
-
-// @public
-export class Color extends PaintBase {
-    constructor(color: Color_2, intendedColor?: Color);
-    static asOverlay(intendedColor: Color, reference: Color): Color;
-    readonly color: Color_2;
-    createCSS: () => string;
-    static from(obj: {
-        r: number;
-        g: number;
-        b: number;
-        alpha?: number;
-    }): Color;
-    static fromRgb(r: number, g: number, b: number, alpha?: number): Color;
-    protected readonly _intendedColor?: Color;
-    static isTransparent(color: Color_2): boolean;
-    static parse(color: string): Color | undefined;
-    // @deprecated
-    toColorString: () => string;
-    toString(): string;
-    static transparent: Color;
-    static unsafeOpacity(color: Color, alpha: number): Color;
-}
-
-// @public
-export type ColorRecipe<T = Color> = RecipeOptional<ColorRecipeParams, T>;
-
-// @public
-export type ColorRecipeBySet<T = Color> = Recipe<InteractivePaintSet, T>;
-
-// @public
-export type ColorRecipeBySetEvaluate<T = Color> = RecipeEvaluate<InteractivePaintSet, T>;
-
-// @public
-export type ColorRecipeEvaluate<T = Color> = RecipeEvaluateOptional<ColorRecipeParams, T>;
-
-// @public
-export type ColorRecipePalette<T = Color> = Recipe<ColorRecipePaletteParams, T>;
-
-// @public
-export type ColorRecipePaletteEvaluate<T = Color> = RecipeEvaluate<ColorRecipePaletteParams, T>;
-
-// @public
-export type ColorRecipePaletteParams = ColorRecipeParams & {
-    palette: Palette;
-};
-
-// @public
-export type ColorRecipeParams = {
-    reference: Paint | null;
-};
-
-// @public
-export interface ComponentAnatomy<TConditions extends ComponentConditions, TParts extends ComponentParts> {
-    conditions: TConditions;
-    context?: string;
-    cursor?: CursorDefinition | false;
-    focus?: FocusDefinition<TParts>;
-    interactivity?: InteractivityDefinition;
-    name?: string;
-    parts: TParts;
-}
-
-// @public
-export type ComponentConditions = Record<string, Condition>;
-
-// @public
-export type ComponentParts = Record<string, string>;
-
-// @public
-export type Condition = BooleanCondition | StringCondition;
-
-// @public
-export class ConicGradient extends Gradient {
-    constructor(stops: GradientStop[], angle?: number);
-    readonly angle: number;
-    // (undocumented)
-    toString(): string;
-    // (undocumented)
-    readonly type: GradientType;
-}
-
-// @public
-export function contrast(a: RelativeLuminance, b: RelativeLuminance): number;
-
-// @public
-export function contrastAndDeltaSwatchSet(palette: Palette, reference: Paint, minContrast: number, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveColorSet;
-
-// @public
-export function contrastSwatch(palette: Palette, reference: Paint, minContrast: number, direction?: PaletteDirection): Color;
-
-// @public
-export const convertStylesToFocusState: (styles: Styles) => Styles;
-
-// @public @deprecated (undocumented)
-export const CornerRadius: {
-    all: (value: StyleValue) => StyleProperties;
-};
-
-// Warning: (ae-internal-missing-underscore) The name "create" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal @deprecated (undocumented)
-export const create: typeof DesignToken.create;
-
-// @public
-export function createForegroundSet(foregroundRecipe: TypedDesignToken<InteractiveColorRecipe>, background: InteractiveTokenGroup<Paint>): InteractiveTokenGroup<Paint>;
-
-// @public
-export function createForegroundSetBySet(foregroundRecipe: TypedDesignToken<InteractiveColorRecipeBySet>, background: InteractiveTokenGroup<Paint>): InteractiveTokenGroup<Paint>;
-
-// Warning: (ae-internal-missing-underscore) The name "createNonCss" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal @deprecated (undocumented)
-export function createNonCss<T>(name: string): DesignToken<T>;
-
-// @public
-export function createTokenColor(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<Color>;
-
-// @public
-export function createTokenColorRecipe<T = Paint>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeEvaluate<T>): TypedDesignToken<ColorRecipe<T>>;
-
-// @public
-export function createTokenColorRecipeBySet<T = Paint>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeBySetEvaluate<T>): TypedDesignToken<ColorRecipeBySet<T>>;
-
-// @public
-export function createTokenColorRecipeForPalette<T = Paint>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipePaletteEvaluate<T>): TypedDesignToken<ColorRecipePalette<T>>;
-
-// @public
-export function createTokenColorRecipeValue(recipeToken: TypedDesignToken<ColorRecipe<Paint>>): TypedCSSDesignToken<Paint>;
-
-// @public
-export function createTokenColorRecipeWithPalette<T = Paint>(recipeToken: TypedDesignToken<Recipe<ColorRecipePaletteParams, T>>, paletteToken: DesignToken<Palette>): TypedDesignToken<RecipeOptional<ColorRecipeParams, T>>;
-
-// @public
-export function createTokenColorSet(recipeToken: TypedDesignToken<InteractiveColorRecipe>): InteractiveTokenGroup<Paint>;
-
-// @public
-export function createTokenDelta(baseName: string, state: InteractiveState | string, value: number | DesignToken<number>): TypedDesignToken<number>;
-
-// @public
-export function createTokenDimension(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<string>;
-
-// @public
-export function createTokenFontFamily(name: string): TypedCSSDesignToken<string>;
-
-// @public
-export function createTokenFontSize(name: string): TypedCSSDesignToken<string>;
-
-// @public
-export function createTokenFontStyle(name: string): TypedCSSDesignToken<string>;
-
-// @public
-export function createTokenFontVariations(name: string): TypedCSSDesignToken<string>;
-
-// @public
-export function createTokenFontWeight(name: string): TypedCSSDesignToken<number>;
-
-// @public
-export function createTokenLineHeight(name: string): TypedCSSDesignToken<string>;
-
-// @public
-export function createTokenMinContrast(baseName: string, value: number | DesignToken<number>): TypedDesignToken<number>;
-
-// @public
-export function createTokenNonCss<T>(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken<T>;
-
-// @public
-export function createTokenNumber(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<number>;
-
-// @public
-export function createTokenNumberNonStyling(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken<number>;
-
-// @public
-export function createTokenPaint(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<Paint>;
-
-// @public
-export function createTokenRecipe<TParam, TResult>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: RecipeEvaluate<TParam, TResult>): TypedDesignToken<Recipe<TParam, TResult>>;
-
-// @public
-export const createTokenShadow: (name: string) => TypedCSSDesignToken_2<ShadowValue>;
-
-// @public @deprecated
-export function createTokenSwatch(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<Swatch>;
-
-// @public
-export const createTyped: typeof TypedCSSDesignToken.createTyped;
-
-// @public
-export interface CursorDefinition {
-    cursorType?: string;
-    part?: string;
-}
-
-// @public
-export function deltaSwatch(palette: Palette, reference: Paint, delta: number, direction?: PaletteDirection): Color;
-
-// @public
-export function deltaSwatchSet(palette: Palette, reference: Paint, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta?: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveColorSet;
-
-// @public
-export const densityAdjustmentUnits: TypedDesignToken<number>;
-
-// @public
-export class DensityPaddingAndGapTokenGroup implements TokenGroup {
-    constructor(name: string, horizontalPaddingUnits: number, horizontalGapUnits: number, verticalPaddingUnits: number, verticalGapUnits: number, designUnit: string | DesignToken<string>, borderThickness: string | DesignToken<string>);
-    readonly borderThickness: TypedCSSDesignToken<string>;
-    readonly designUnit: TypedCSSDesignToken<string>;
-    readonly horizontalGap: TypedCSSDesignToken<string>;
-    readonly horizontalGapUnits: TypedDesignToken<number>;
-    readonly horizontalPadding: TypedCSSDesignToken<string>;
-    readonly horizontalPaddingUnits: TypedDesignToken<number>;
-    // (undocumented)
-    readonly name: string;
-    get padding(): CSSDirective;
-    readonly verticalGap: TypedCSSDesignToken<string>;
-    readonly verticalGapUnits: TypedDesignToken<number>;
-    readonly verticalPadding: TypedCSSDesignToken<string>;
-    readonly verticalPaddingUnits: TypedDesignToken<number>;
-}
-
-// @public
-export type DesignTokenMetadata = {
-    readonly type: DesignTokenType;
-    readonly intendedFor?: StyleProperty[];
-};
-
-// @public
-export class DesignTokenMultiValue<T extends CSSDirective | string> extends Array<T> implements CSSDirective {
-    // (undocumented)
-    createCSS(): string;
-}
-
-// @public
-export class DesignTokenMultiValuePaint extends DesignTokenMultiValue<PaintBase> implements RelativeLuminance {
-    contrast(b: RelativeLuminance): number;
-    get relativeLuminance(): number;
-}
-
-// @public
-export abstract class DesignTokenRegistry {
-    static Groups: Map<string, InteractiveTokenGroup<any>>;
-    static Shared: Map<string, DesignToken<any>>;
-}
-
-// @public
-export const DesignTokenType: {
-    readonly color: "color";
-    readonly dimension: "dimension";
-    readonly fontFamily: "fontFamily";
-    readonly fontWeight: "fontWeight";
-    readonly duration: "duration";
-    readonly cubicBezier: "cubicBezier";
-    readonly number: "number";
-    readonly strokeStyle: "strokeStyle";
-    readonly border: "border";
-    readonly transition: "transition";
-    readonly shadow: "shadow";
-    readonly gradient: "gradient";
-    readonly typography: "typography";
-    readonly boolean: "boolean";
-    readonly fontStyle: "fontStyle";
-    readonly fontVariations: "fontVariations";
-    readonly palette: "palette";
-    readonly recipe: "recipe";
-    readonly paint: "paint";
-    readonly string: "string";
-};
-
-// @public
-export type DesignTokenType = ValuesOf<typeof DesignTokenType> | string;
-
-// @public
-export function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue;
-
-// @public
-export type EffectiveStylePropertiesMap = Map<string, StyleValue>;
-
-// @public
-export class ElementStylesRenderer {
-    constructor(styles: Styles);
-    static disabledStyles: Styles;
-    static get focusResetStyles(): Styles;
-    static set focusResetStyles(styles: Styles);
-    static get focusStateStyles(): Styles;
-    static set focusStateStyles(styles: Styles);
-    render(target: StyleModuleTarget, interactivity?: InteractivityDefinition): ElementStyles;
-    static renderStyleRules(baseStyles: ComposableStyles[] | undefined, styleRules: StyleRules, anatomy?: ComponentAnatomy<any, any>): ElementStyles;
-}
-
-// @public
-export type ElevationRecipe = Recipe<number, string>;
-
-// @public
-export type ElevationRecipeEvaluate = RecipeEvaluate<number, string>;
-
-// @public (undocumented)
-export const Fill: {
-    backgroundAndForeground: (background: InteractiveTokenGroup<Paint>, foregroundRecipe: TypedDesignToken<InteractiveColorRecipe>) => StyleProperties;
-    backgroundAndForegroundBySet: (background: InteractiveTokenGroup<Paint>, foregroundRecipe: TypedDesignToken<InteractiveColorRecipeBySet>) => StyleProperties;
-    backgroundNonInteractive: (background: TypedCSSDesignToken<Paint>, disabled?: TypedCSSDesignToken<Paint>) => StyleProperties;
-    foregroundNonInteractive: (foreground: TypedCSSDesignToken<Paint>, disabled?: TypedCSSDesignToken<Paint>) => StyleProperties;
-};
-
-// @public
-export const Focus: {
-    readonly contextFocused: () => FocusDefinition<any>;
-    readonly contextChildFocused: <TParts>(indicatorPart: keyof TParts & string) => FocusDefinition<TParts>;
-    readonly partFocused: <TParts_1>(part: keyof TParts_1 & string) => FocusDefinition<TParts_1>;
-    readonly partWithin: <TParts_2>(indicatorPart: keyof TParts_2 & string, focusablePart: keyof TParts_2 & string) => FocusDefinition<TParts_2>;
-};
-
-// @public
-export interface FocusDefinition<TParts> {
-    focusTarget: StyleModuleTarget;
-    resetTarget?: StyleModuleTarget;
-}
-
-// @public
-export abstract class Gradient extends PaintBase {
-    constructor(stops: GradientStop[]);
-    createCSS: () => string;
-    readonly stops: GradientStop[];
-    // (undocumented)
-    protected get stopsListCSS(): string;
-    abstract toString(): string;
-    abstract readonly type: GradientType;
-}
-
-// @public
-export type GradientStop = {
-    color: Color;
-    position: GradientStopPosition;
-    endPosition?: GradientStopPosition;
-};
-
-// @public
-export type GradientStopPosition = {
-    value: number;
-    unit: "%" | "px" | "deg";
-};
-
-// @public
-export type GradientType = "conic" | "linear" | "radial";
-
-// @beta
-export function hueShiftGradient(palette: Palette, reference: Paint, delta: number, angle?: number, startShift?: number, endShift?: number, direction?: PaletteDirection): Gradient;
-
-// @public
-export function idealColorDeltaSwatchSet(palette: Palette, reference: Paint, minContrast: number, idealColor: Color, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection): InteractiveColorSet;
-
-// @public
-export type InteractiveColorRecipe = ColorRecipe<InteractivePaintSet>;
-
-// @public
-export type InteractiveColorRecipeBySet = ColorRecipeBySet<InteractivePaintSet>;
-
-// @public
-export type InteractiveColorRecipeBySetEvaluate = ColorRecipeBySetEvaluate<InteractivePaintSet>;
-
-// @public
-export type InteractiveColorRecipeEvaluate = ColorRecipeEvaluate<InteractivePaintSet>;
-
-// @public
-export type InteractiveColorRecipePalette = ColorRecipePalette<InteractivePaintSet>;
-
-// @public
-export type InteractiveColorRecipePaletteEvaluate = ColorRecipePaletteEvaluate<InteractivePaintSet>;
-
-// @public
-export interface InteractiveColorSet extends InteractiveValues<Color | null> {
-}
-
-// @public
-export interface InteractivePaintSet extends InteractiveValues<Paint | null> {
-}
-
-// @public
-export enum InteractiveState {
-    active = "active",
-    disabled = "disabled",
-    focus = "focus",
-    hover = "hover",
-    rest = "rest"
-}
-
-// @public
-export function interactiveSwatchSetAsOverlay(set: InteractiveColorSet, reference: Color, asOverlay: boolean): InteractiveColorSet;
-
-// @public
-export interface InteractiveTokenGroup<T> extends MakePropertyRequired<TokenGroup, "type">, InteractiveValues<TypedCSSDesignToken<T>> {
-}
-
-// @public
-export type InteractiveValues<T> = {
-    [key in InteractiveState]: T;
-};
-
-// @public
-export const Interactivity: {
-    readonly disabledAttribute: InteractivityDefinition;
-    readonly disabledClass: InteractivityDefinition;
-    readonly hrefAttribute: InteractivityDefinition;
-    readonly always: InteractivityDefinition;
-    readonly never: InteractivityDefinition;
-};
-
-// @public
-export type InteractivityDefinition = {
-    [key in InteractiveState]?: string;
-} & {
-    interactive?: string;
-};
-
-// @public
-export function invertingPaletteDeltasForSet(palette: Palette, reference: RelativeLuminance, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number): InteractiveValues<number>;
-
-// @public
-export function isDark(color: RelativeLuminance): boolean;
-
-// @public
-export class LinearGradient extends Gradient {
-    constructor(stops: GradientStop[], angle?: number);
-    readonly angle: number;
-    toString(): string;
-    // (undocumented)
-    readonly type: GradientType;
-}
-
-// @public
-export function luminanceSwatch(luminance: number): Color;
-
-// @public (undocumented)
-export type MakePropertyOptional<T, K extends keyof T> = Omit<T, K> & {
-    [P in K]?: T[P];
-};
-
-// @public (undocumented)
-export type MakePropertyRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
-
-// @public
-export function makeSelector(params: StyleModuleEvaluateParameters, state: InteractiveState): string;
-
-// @public @deprecated (undocumented)
-export const Padding: {
-    all: (value: StyleValue) => StyleProperties;
-    verticalHorizontal: (valueVertical: StyleValue, valueHorizontal: StyleValue) => StyleProperties;
-};
-
-// @public
-export type Paint = PaintBase | DesignTokenMultiValuePaint;
-
-// @public
-export abstract class PaintBase implements RelativeLuminance, CSSDirective {
-    protected constructor(relativeLuminance: number);
-    contrast(b: RelativeLuminance): number;
-    createCSS(add: AddBehavior): ComposableStyles;
-    get relativeLuminance(): number;
-}
-
-// @public
-export interface Palette<T extends Color = Color> {
-    closestIndexOf(reference: RelativeLuminance): number;
-    colorContrast(reference: RelativeLuminance, minContrast: number, initialIndex?: number, direction?: PaletteDirection): T;
-    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T;
-    get(index: number): T;
-    readonly source: Color;
-    readonly swatches: ReadonlyArray<T>;
-}
-
-// @public
-export type PaletteDirection = PaletteDirectionValue | (() => PaletteDirectionValue);
-
-// @public
-export const PaletteDirectionValue: Readonly<{
-    readonly darker: 1;
-    readonly lighter: -1;
-}>;
-
-// @public
-export type PaletteDirectionValue = typeof PaletteDirectionValue[keyof typeof PaletteDirectionValue];
-
-// @public
-export class PaletteOkhsl extends BasePalette {
-    // (undocumented)
-    static from(source: Color | string, options?: Partial<PaletteOkhslOptions>): PaletteOkhsl;
-}
-
-// @public
-export interface PaletteOkhslOptions {
-    darkEndSaturation: number;
-    lightEndSaturation: number;
-    stepCount: number;
-}
-
-// @public
-export class PaletteRGB extends BasePalette {
-    static from(source: Color | string, options?: Partial<PaletteRGBOptions>): PaletteRGB;
-}
-
-// @public
-export interface PaletteRGBOptions {
-    preserveSource: boolean;
-    stepContrast: number;
-    stepContrastRamp: number;
-}
-
-// @public
-export class RadialGradient extends Gradient {
-    constructor(stops: GradientStop[]);
-    toString(): string;
-    // (undocumented)
-    readonly type: GradientType;
-}
-
-// @public
-export interface Recipe<TParam, TResult> {
-    evaluate: RecipeEvaluate<TParam, TResult>;
-}
-
-// @public (undocumented)
-export type RecipeEvaluate<TParam, TResult> = (resolver: DesignTokenResolver, params: TParam) => TResult;
-
-// @public (undocumented)
-export type RecipeEvaluateOptional<TParam, TResult> = (resolver: DesignTokenResolver, params?: TParam) => TResult;
-
-// @public
-export interface RecipeOptional<TParam, TResult> {
-    evaluate: RecipeEvaluateOptional<TParam, TResult>;
-}
-
-// @public
-export interface RelativeLuminance {
-    contrast: (a: RelativeLuminance) => number;
-    readonly relativeLuminance: number;
-}
-
-// @public
-export function resolvePaletteDirection(direction: PaletteDirection): PaletteDirectionValue;
-
-// @beta (undocumented)
-export interface SerializableAnatomy {
-    // (undocumented)
-    conditions: Record<string, SerializableCondition>;
-    // (undocumented)
-    context: string;
-    // (undocumented)
-    cursor?: CursorDefinition | false;
-    // (undocumented)
-    focus?: FocusDefinition<any>;
-    // (undocumented)
-    interactivity?: InteractivityDefinition;
-    // (undocumented)
-    name: string;
-    // (undocumented)
-    parts: Record<string, string>;
-    // (undocumented)
-    styleRules: SerializableStyleRule[];
-}
-
-// @beta (undocumented)
-export interface SerializableAnatomyWithImports extends SerializableAnatomy {
-    // (undocumented)
-    imports?: string[];
-}
-
-// @beta (undocumented)
-export type SerializableBooleanCondition = string;
-
-// @beta (undocumented)
-export type SerializableCondition = SerializableBooleanCondition | SerializableStringCondition;
-
-// @beta (undocumented)
-export type SerializableStringCondition = Record<string, string>;
-
-// @beta (undocumented)
-export interface SerializableStyleRule {
-    // (undocumented)
-    contextCondition?: Record<string, string | boolean>;
-    // (undocumented)
-    part?: string;
-    // (undocumented)
-    properties?: Record<string, string>;
-    // (undocumented)
-    stateOnContext?: boolean;
-    // (undocumented)
-    styles?: string[];
-}
-
-// @public
-export class Shadow implements CSSDirective {
-    constructor(color: Color, xOffset: number, yOffset: number, blurRadius?: number | undefined, spread?: number | undefined);
-    // (undocumented)
-    blurRadius?: number | undefined;
-    // (undocumented)
-    color: Color;
-    // (undocumented)
-    createCSS(): string;
-    // (undocumented)
-    spread?: number | undefined;
-    // (undocumented)
-    xOffset: number;
-    // (undocumented)
-    yOffset: number;
-}
-
-// @public
-export type ShadowValue = Shadow | DesignTokenMultiValue<Shadow> | string;
-
-// @public
-export type StringCondition = Record<string, string>;
-
-// @public
-export type StyleDeclaration = {
-    styles?: Styles | Iterable<Styles>;
-    properties?: StyleProperties;
-};
-
-// @public
-export type StyleKey = StyleProperty | StylePropertyShorthand | (string & Record<never, never>);
-
-// @public
-export type StyleModuleEvaluateParameters = StyleModuleTarget & InteractivityDefinition;
-
-// @public
-export interface StyleModuleTarget {
-    context?: string;
-    contextCondition?: string;
-    // @beta
-    ignoreInteractivity?: boolean;
-    part?: string;
-    partCondition?: string;
-    stateOnContext?: boolean;
-}
-
-// @public
-export type StyleProperties = Partial<Record<StyleKey, StyleValue>>;
-
-// @public
-export type StylePropertiesMap = Map<StyleKey, StyleValue>;
-
-// @public
-export const StyleProperty: {
-    readonly backgroundFill: "backgroundFill";
-    readonly foregroundFill: "foregroundFill";
-    readonly borderFillTop: "borderFillTop";
-    readonly borderFillRight: "borderFillRight";
-    readonly borderFillBottom: "borderFillBottom";
-    readonly borderFillLeft: "borderFillLeft";
-    readonly borderThicknessTop: "borderThicknessTop";
-    readonly borderThicknessRight: "borderThicknessRight";
-    readonly borderThicknessBottom: "borderThicknessBottom";
-    readonly borderThicknessLeft: "borderThicknessLeft";
-    readonly borderStyleTop: "borderStyleTop";
-    readonly borderStyleRight: "borderStyleRight";
-    readonly borderStyleBottom: "borderStyleBottom";
-    readonly borderStyleLeft: "borderStyleLeft";
-    readonly cornerRadiusTopLeft: "cornerRadiusTopLeft";
-    readonly cornerRadiusTopRight: "cornerRadiusTopRight";
-    readonly cornerRadiusBottomRight: "cornerRadiusBottomRight";
-    readonly cornerRadiusBottomLeft: "cornerRadiusBottomLeft";
-    readonly fontFamily: "fontFamily";
-    readonly fontSize: "fontSize";
-    readonly fontWeight: "fontWeight";
-    readonly fontStyle: "fontStyle";
-    readonly fontVariationSettings: "fontVariationSettings";
-    readonly letterSpacing: "letterSpacing";
-    readonly lineHeight: "lineHeight";
-    readonly marginTop: "marginTop";
-    readonly marginRight: "marginRight";
-    readonly marginBottom: "marginBottom";
-    readonly marginLeft: "marginLeft";
-    readonly paddingTop: "paddingTop";
-    readonly paddingRight: "paddingRight";
-    readonly paddingBottom: "paddingBottom";
-    readonly paddingLeft: "paddingLeft";
-    readonly gap: "gap";
-    readonly height: "height";
-    readonly minHeight: "minHeight";
-    readonly maxHeight: "maxHeight";
-    readonly width: "width";
-    readonly minWidth: "minWidth";
-    readonly maxWidth: "maxWidth";
-    readonly layoutInner: "layoutInner";
-    readonly layoutDirection: "layoutDirection";
-    readonly layoutMainAxisAlignItems: "layoutMainAxisAlignItems";
-    readonly layoutCrossAxisAlignItems: "layoutCrossAxisAlignItems";
-    readonly layoutWrap: "layoutWrap";
-    readonly opacity: "opacity";
-    readonly cursor: "cursor";
-    readonly outlineColor: "outlineColor";
-    readonly outlineOffset: "outlineOffset";
-    readonly outlineStyle: "outlineStyle";
-    readonly outlineThickness: "outlineThickness";
-    readonly outlineWidth: "outlineWidth";
-    readonly shadow: "shadow";
-};
-
-// @public
-export type StyleProperty = ValuesOf<typeof StyleProperty>;
-
-// @public @deprecated
-export const stylePropertyBorderFillAll: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[];
-
-// @public @deprecated
-export const stylePropertyBorderStyleAll: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[];
-
-// @public @deprecated
-export const stylePropertyBorderThicknessAll: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[];
-
-// @public @deprecated
-export const stylePropertyCornerRadiusAll: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[];
-
-// @public @deprecated
-export type StylePropertyCss = StyleProperty | (string & Record<never, never>);
-
-// @public @deprecated
-export const stylePropertyPaddingAll: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[];
-
-// @public (undocumented)
-export const StylePropertyShorthand: {
-    borderFill: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[];
-    borderThickness: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[];
-    borderStyle: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[];
-    cornerRadius: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[];
-    margin: ("marginTop" | "marginRight" | "marginBottom" | "marginLeft")[];
-    marginHorizontal: ("marginRight" | "marginLeft")[];
-    marginVertical: ("marginTop" | "marginBottom")[];
-    padding: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[];
-    paddingHorizontal: ("paddingRight" | "paddingLeft")[];
-    paddingVertical: ("paddingTop" | "paddingBottom")[];
-};
-
-// @public
-export type StylePropertyShorthand = keyof typeof StylePropertyShorthand;
-
-// @public
-export type StyleRule = {
-    target?: StyleModuleTarget;
-} & StyleDeclaration;
-
-// @public
-export type StyleRules = Array<StyleRule>;
-
-// @public
-export class Styles {
-    // (undocumented)
-    appendComposed(styles: Styles): void;
-    clearComposed(): void;
-    static compose(styles: Styles[], properties?: StyleProperties, name?: string): Styles;
-    get composed(): Styles[] | undefined;
-    get effectiveAdaptiveProperties(): Map<StyleProperty, StyleValue>;
-    get effectiveProperties(): EffectiveStylePropertiesMap;
-    static fromDeclaration(declaration: StyleDeclaration, name?: string): Styles;
-    static fromProperties(properties: StyleProperties, name?: string): Styles;
-    readonly name: string | undefined;
-    get properties(): Readonly<StylePropertiesMap> | undefined;
-    set properties(properties: StylePropertiesMap | undefined);
-    // (undocumented)
-    static Shared: Map<string, Styles>;
-}
-
-// @public
-export type StyleValue = CSSDesignToken<any> | InteractiveValues<any | null> | CSSDirective | string | number;
-
-// @public @deprecated
-export class Swatch extends Color {
-    static asOverlay(intendedColor: Swatch, reference: Swatch): Swatch;
-    static from(obj: {
-        r: number;
-        g: number;
-        b: number;
-        alpha?: number;
-    }): Swatch;
-    static fromColor(color: Color): Swatch;
-    static fromRgb(r: number, g: number, b: number, alpha?: number): Swatch;
-    static parse(color: string): Swatch | undefined;
-    // @deprecated
-    toTransparent(alpha?: number): Swatch;
-}
-
-// @public
-export function swatchAsOverlay(color: Color | null, reference: Color, asOverlay: boolean): Color | null;
-
-// @public
-export interface TokenGroup extends MakePropertyOptional<DesignTokenMetadata, "type"> {
-    intendedFor?: StyleProperty[];
-    name: string;
-    type?: DesignTokenType;
-}
-
-// @beta
-export function twoPaletteGradient(startPalette: Palette, endPalette: Palette, reference: Paint, delta: number, angle?: number, direction?: PaletteDirection): Gradient;
-
-// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
-// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TypedCSSDesignToken" because one of its declarations is marked as @internal
-//
-// @public
-export class TypedCSSDesignToken<T> extends CSSDesignToken<T> implements DesignTokenMetadata {
-    constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]);
-    static createTyped<T>(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<T>;
-}
-
-// @internal (undocumented)
-export interface TypedCSSDesignToken<T> extends DesignTokenMetadata {
-}
-
-// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
-// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TypedDesignToken" because one of its declarations is marked as @internal
-//
-// @public
-export class TypedDesignToken<T> extends DesignToken<T> implements DesignTokenMetadata {
-    constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]);
-    static createTyped<T>(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken<T>;
-}
-
-// @internal (undocumented)
-export interface TypedDesignToken<T> extends DesignTokenMetadata {
-}
-
-// @public
-export class TypeRampPosition {
-    constructor(baseName: string, position: string, config: TypeRampPositionConfig);
-    readonly fontSize: TypedCSSDesignToken<string>;
-    readonly fontVariations: TypedCSSDesignToken<string>;
-    readonly lineHeight: TypedCSSDesignToken<string>;
-    readonly lineHeightMultiline: TypedCSSDesignToken<string>;
-}
-
-// @public
-export interface TypeRampPositionConfig {
-    fontSize: DesignTokenValue<string>;
-    lineHeight: DesignTokenValue<string>;
-    lineHeightMultiline: DesignTokenValue<string>;
-}
-
-// @public
-export class TypeRampTokenGroup implements TokenGroup {
-    constructor(name: string, minus2: TypeRampPositionConfig, minus1: TypeRampPositionConfig, base: TypeRampPositionConfig, plus1: TypeRampPositionConfig, plus2: TypeRampPositionConfig, plus3: TypeRampPositionConfig, plus4: TypeRampPositionConfig, plus5: TypeRampPositionConfig, plus6: TypeRampPositionConfig);
-    readonly base: TypeRampPosition;
-    readonly minus1: TypeRampPosition;
-    readonly minus2: TypeRampPosition;
-    // (undocumented)
-    readonly name: string;
-    readonly plus1: TypeRampPosition;
-    readonly plus2: TypeRampPosition;
-    readonly plus3: TypeRampPosition;
-    readonly plus4: TypeRampPosition;
-    readonly plus5: TypeRampPosition;
-    readonly plus6: TypeRampPosition;
-}
-
-// @public
-export class TypeScaleTokenGroup extends TypeRampTokenGroup {
-    constructor(name: string, baseSize: string, multiplier: number, lineHeightRatio?: number, lineHeightMultilineRatio?: number, lineHeightSnap?: string);
-    readonly lineHeightMultilineRatio: TypedDesignToken<number>;
-    readonly lineHeightRatio: TypedDesignToken<number>;
-    readonly lineHeightSnap: TypedCSSDesignToken<string>;
-    readonly multiplier: TypedDesignToken<number>;
-}
-
-// @internal
-export const _white: Color;
-
-// (No @packageDocumentation comment for this package)
-
-```
+## API Report File for "@adaptive-web/adaptive-ui"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { AddBehavior } from '@microsoft/fast-element';
+import { Color as Color_2 } from 'culori/fn';
+import { ComposableStyles } from '@microsoft/fast-element';
+import { CSSDesignToken } from '@microsoft/fast-foundation';
+import { CSSDirective } from '@microsoft/fast-element';
+import { DesignToken } from '@microsoft/fast-foundation';
+import { DesignTokenResolver } from '@microsoft/fast-foundation';
+import { DesignTokenValue } from '@microsoft/fast-foundation/design-token-core.js';
+import { ElementStyles } from '@microsoft/fast-element';
+import { Rgb } from 'culori/fn';
+import { TypedCSSDesignToken as TypedCSSDesignToken_2 } from '../adaptive-design-tokens.js';
+import { ValuesOf } from '@microsoft/fast-foundation';
+
+// @public
+export class BasePalette<T extends Color = Color> implements Palette<T> {
+    constructor(source: Color, swatches: ReadonlyArray<T>);
+    readonly closestIndexCache: Map<number, number>;
+    closestIndexOf(reference: RelativeLuminance): number;
+    colorContrast(reference: RelativeLuminance, contrastTarget: number, initialSearchIndex?: number, direction?: PaletteDirection): T;
+    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T;
+    get(index: number): T;
+    readonly lastIndex: number;
+    readonly reversedSwatches: ReadonlyArray<T>;
+    readonly source: Color;
+    readonly swatches: ReadonlyArray<T>;
+}
+
+// @internal
+export const _black: Color;
+
+// @public
+export function blackOrWhiteByContrast(reference: Paint, minContrast: number, defaultBlack: boolean): Color;
+
+// @public
+export function blackOrWhiteByContrastSet(set: InteractivePaintSet, minContrast: number, defaultBlack: boolean): InteractiveColorSet;
+
+// @public
+export type BooleanCondition = string;
+
+// @public
+export function calculateOverlayColor(match: Color_2, background: Color_2): Rgb;
+
+// @public
+export class Color extends PaintBase {
+    constructor(color: Color_2, intendedColor?: Color);
+    static asOverlay(intendedColor: Color, reference: Color): Color;
+    readonly color: Color_2;
+    createCSS: () => string;
+    static from(obj: {
+        r: number;
+        g: number;
+        b: number;
+        alpha?: number;
+    }): Color;
+    static fromRgb(r: number, g: number, b: number, alpha?: number): Color;
+    protected readonly _intendedColor?: Color;
+    static isTransparent(color: Color_2): boolean;
+    static parse(color: string): Color | undefined;
+    toString(): string;
+    static transparent: Color;
+    static unsafeOpacity(color: Color, alpha: number): Color;
+}
+
+// @public
+export type ColorRecipe<T = Color> = RecipeOptional<ColorRecipeParams, T>;
+
+// @public
+export type ColorRecipeBySet<T = Color> = Recipe<InteractivePaintSet, T>;
+
+// @public
+export type ColorRecipeBySetEvaluate<T = Color> = RecipeEvaluate<InteractivePaintSet, T>;
+
+// @public
+export type ColorRecipeEvaluate<T = Color> = RecipeEvaluateOptional<ColorRecipeParams, T>;
+
+// @public
+export type ColorRecipePalette<T = Color> = Recipe<ColorRecipePaletteParams, T>;
+
+// @public
+export type ColorRecipePaletteEvaluate<T = Color> = RecipeEvaluate<ColorRecipePaletteParams, T>;
+
+// @public
+export type ColorRecipePaletteParams = ColorRecipeParams & {
+    palette: Palette;
+};
+
+// @public
+export type ColorRecipeParams = {
+    reference: Paint | null;
+};
+
+// @public
+export interface ComponentAnatomy<TConditions extends ComponentConditions, TParts extends ComponentParts> {
+    conditions: TConditions;
+    context?: string;
+    cursor?: CursorDefinition | false;
+    focus?: FocusDefinition<TParts>;
+    interactivity?: InteractivityDefinition;
+    name?: string;
+    parts: TParts;
+}
+
+// @public
+export type ComponentConditions = Record<string, Condition>;
+
+// @public
+export type ComponentParts = Record<string, string>;
+
+// @public
+export type Condition = BooleanCondition | StringCondition;
+
+// @public
+export class ConicGradient extends Gradient {
+    constructor(stops: GradientStop[], angle?: number);
+    readonly angle: number;
+    // (undocumented)
+    toString(): string;
+    // (undocumented)
+    readonly type: GradientType;
+}
+
+// @public
+export function contrast(a: RelativeLuminance, b: RelativeLuminance): number;
+
+// @public
+export function contrastAndDeltaSwatchSet(palette: Palette, reference: Paint, minContrast: number, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveColorSet;
+
+// @public
+export function contrastSwatch(palette: Palette, reference: Paint, minContrast: number, direction?: PaletteDirection): Color;
+
+// @public
+export const convertStylesToFocusState: (styles: Styles) => Styles;
+
+// @public
+export function createForegroundSet(foregroundRecipe: TypedDesignToken<InteractiveColorRecipe>, background: InteractiveTokenGroup<Paint>): InteractiveTokenGroup<Paint>;
+
+// @public
+export function createForegroundSetBySet(foregroundRecipe: TypedDesignToken<InteractiveColorRecipeBySet>, background: InteractiveTokenGroup<Paint>): InteractiveTokenGroup<Paint>;
+
+// @public
+export function createTokenColor(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<Color>;
+
+// @public
+export function createTokenColorRecipe<T = Paint>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeEvaluate<T>): TypedDesignToken<ColorRecipe<T>>;
+
+// @public
+export function createTokenColorRecipeBySet<T = Paint>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeBySetEvaluate<T>): TypedDesignToken<ColorRecipeBySet<T>>;
+
+// @public
+export function createTokenColorRecipeForPalette<T = Paint>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipePaletteEvaluate<T>): TypedDesignToken<ColorRecipePalette<T>>;
+
+// @public
+export function createTokenColorRecipeValue(recipeToken: TypedDesignToken<ColorRecipe<Paint>>): TypedCSSDesignToken<Paint>;
+
+// @public
+export function createTokenColorRecipeWithPalette<T = Paint>(recipeToken: TypedDesignToken<Recipe<ColorRecipePaletteParams, T>>, paletteToken: DesignToken<Palette>): TypedDesignToken<RecipeOptional<ColorRecipeParams, T>>;
+
+// @public
+export function createTokenColorSet(recipeToken: TypedDesignToken<InteractiveColorRecipe>): InteractiveTokenGroup<Paint>;
+
+// @public
+export function createTokenDelta(baseName: string, state: InteractiveState | string, value: number | DesignToken<number>): TypedDesignToken<number>;
+
+// @public
+export function createTokenDimension(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<string>;
+
+// @public
+export function createTokenFontFamily(name: string): TypedCSSDesignToken<string>;
+
+// @public
+export function createTokenFontSize(name: string): TypedCSSDesignToken<string>;
+
+// @public
+export function createTokenFontStyle(name: string): TypedCSSDesignToken<string>;
+
+// @public
+export function createTokenFontVariations(name: string): TypedCSSDesignToken<string>;
+
+// @public
+export function createTokenFontWeight(name: string): TypedCSSDesignToken<number>;
+
+// @public
+export function createTokenLineHeight(name: string): TypedCSSDesignToken<string>;
+
+// @public
+export function createTokenMinContrast(baseName: string, value: number | DesignToken<number>): TypedDesignToken<number>;
+
+// @public
+export function createTokenNonCss<T>(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken<T>;
+
+// @public
+export function createTokenNumber(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<number>;
+
+// @public
+export function createTokenNumberNonStyling(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken<number>;
+
+// @public
+export function createTokenPaint(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<Paint>;
+
+// @public
+export function createTokenRecipe<TParam, TResult>(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: RecipeEvaluate<TParam, TResult>): TypedDesignToken<Recipe<TParam, TResult>>;
+
+// @public
+export const createTokenShadow: (name: string) => TypedCSSDesignToken_2<ShadowValue>;
+
+// @public
+export const createTyped: typeof TypedCSSDesignToken.createTyped;
+
+// @public
+export interface CursorDefinition {
+    cursorType?: string;
+    part?: string;
+}
+
+// @public
+export function deltaSwatch(palette: Palette, reference: Paint, delta: number, direction?: PaletteDirection): Color;
+
+// @public
+export function deltaSwatchSet(palette: Palette, reference: Paint, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta?: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveColorSet;
+
+// @public
+export const densityAdjustmentUnits: TypedDesignToken<number>;
+
+// @public
+export class DensityPaddingAndGapTokenGroup implements TokenGroup {
+    constructor(name: string, horizontalPaddingUnits: number, horizontalGapUnits: number, verticalPaddingUnits: number, verticalGapUnits: number, designUnit: string | DesignToken<string>, borderThickness: string | DesignToken<string>);
+    readonly borderThickness: TypedCSSDesignToken<string>;
+    readonly designUnit: TypedCSSDesignToken<string>;
+    readonly horizontalGap: TypedCSSDesignToken<string>;
+    readonly horizontalGapUnits: TypedDesignToken<number>;
+    readonly horizontalPadding: TypedCSSDesignToken<string>;
+    readonly horizontalPaddingUnits: TypedDesignToken<number>;
+    // (undocumented)
+    readonly name: string;
+    get padding(): CSSDirective;
+    readonly verticalGap: TypedCSSDesignToken<string>;
+    readonly verticalGapUnits: TypedDesignToken<number>;
+    readonly verticalPadding: TypedCSSDesignToken<string>;
+    readonly verticalPaddingUnits: TypedDesignToken<number>;
+}
+
+// @public
+export type DesignTokenMetadata = {
+    readonly type: DesignTokenType;
+    readonly intendedFor?: StyleProperty[];
+};
+
+// @public
+export class DesignTokenMultiValue<T extends CSSDirective | string> extends Array<T> implements CSSDirective {
+    // (undocumented)
+    createCSS(): string;
+}
+
+// @public
+export class DesignTokenMultiValuePaint extends DesignTokenMultiValue<PaintBase> implements RelativeLuminance {
+    contrast(b: RelativeLuminance): number;
+    get relativeLuminance(): number;
+}
+
+// @public
+export abstract class DesignTokenRegistry {
+    static Groups: Map<string, InteractiveTokenGroup<any>>;
+    static Shared: Map<string, DesignToken<any>>;
+}
+
+// @public
+export const DesignTokenType: {
+    readonly color: "color";
+    readonly dimension: "dimension";
+    readonly fontFamily: "fontFamily";
+    readonly fontWeight: "fontWeight";
+    readonly duration: "duration";
+    readonly cubicBezier: "cubicBezier";
+    readonly number: "number";
+    readonly strokeStyle: "strokeStyle";
+    readonly border: "border";
+    readonly transition: "transition";
+    readonly shadow: "shadow";
+    readonly gradient: "gradient";
+    readonly typography: "typography";
+    readonly boolean: "boolean";
+    readonly fontStyle: "fontStyle";
+    readonly fontVariations: "fontVariations";
+    readonly palette: "palette";
+    readonly recipe: "recipe";
+    readonly paint: "paint";
+    readonly string: "string";
+};
+
+// @public
+export type DesignTokenType = ValuesOf<typeof DesignTokenType> | string;
+
+// @public
+export function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue;
+
+// @public
+export type EffectiveStylePropertiesMap = Map<string, StyleValue>;
+
+// @public
+export class ElementStylesRenderer {
+    constructor(styles: Styles);
+    static disabledStyles: Styles;
+    static get focusResetStyles(): Styles;
+    static set focusResetStyles(styles: Styles);
+    static get focusStateStyles(): Styles;
+    static set focusStateStyles(styles: Styles);
+    render(target: StyleModuleTarget, interactivity?: InteractivityDefinition): ElementStyles;
+    static renderStyleRules(baseStyles: ComposableStyles[] | undefined, styleRules: StyleRules, anatomy?: ComponentAnatomy<any, any>): ElementStyles;
+}
+
+// @public
+export type ElevationRecipe = Recipe<number, string>;
+
+// @public
+export type ElevationRecipeEvaluate = RecipeEvaluate<number, string>;
+
+// @public (undocumented)
+export const Fill: {
+    backgroundAndForeground: (background: InteractiveTokenGroup<Paint>, foregroundRecipe: TypedDesignToken<InteractiveColorRecipe>) => StyleProperties;
+    backgroundAndForegroundBySet: (background: InteractiveTokenGroup<Paint>, foregroundRecipe: TypedDesignToken<InteractiveColorRecipeBySet>) => StyleProperties;
+    backgroundNonInteractive: (background: TypedCSSDesignToken<Paint>, disabled?: TypedCSSDesignToken<Paint>) => StyleProperties;
+    foregroundNonInteractive: (foreground: TypedCSSDesignToken<Paint>, disabled?: TypedCSSDesignToken<Paint>) => StyleProperties;
+};
+
+// @public
+export const Focus: {
+    readonly contextFocused: () => FocusDefinition<any>;
+    readonly contextChildFocused: <TParts>(indicatorPart: keyof TParts & string) => FocusDefinition<TParts>;
+    readonly partFocused: <TParts_1>(part: keyof TParts_1 & string) => FocusDefinition<TParts_1>;
+    readonly partWithin: <TParts_2>(indicatorPart: keyof TParts_2 & string, focusablePart: keyof TParts_2 & string) => FocusDefinition<TParts_2>;
+};
+
+// @public
+export interface FocusDefinition<TParts> {
+    focusTarget: StyleModuleTarget;
+    resetTarget?: StyleModuleTarget;
+}
+
+// @public
+export abstract class Gradient extends PaintBase {
+    constructor(stops: GradientStop[]);
+    createCSS: () => string;
+    readonly stops: GradientStop[];
+    // (undocumented)
+    protected get stopsListCSS(): string;
+    abstract toString(): string;
+    abstract readonly type: GradientType;
+}
+
+// @public
+export type GradientStop = {
+    color: Color;
+    position: GradientStopPosition;
+    endPosition?: GradientStopPosition;
+};
+
+// @public
+export type GradientStopPosition = {
+    value: number;
+    unit: "%" | "px" | "deg";
+};
+
+// @public
+export type GradientType = "conic" | "linear" | "radial";
+
+// @beta
+export function hueShiftGradient(palette: Palette, reference: Paint, delta: number, angle?: number, startShift?: number, endShift?: number, direction?: PaletteDirection): Gradient;
+
+// @public
+export function idealColorDeltaSwatchSet(palette: Palette, reference: Paint, minContrast: number, idealColor: Color, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection): InteractiveColorSet;
+
+// @public
+export type InteractiveColorRecipe = ColorRecipe<InteractivePaintSet>;
+
+// @public
+export type InteractiveColorRecipeBySet = ColorRecipeBySet<InteractivePaintSet>;
+
+// @public
+export type InteractiveColorRecipeBySetEvaluate = ColorRecipeBySetEvaluate<InteractivePaintSet>;
+
+// @public
+export type InteractiveColorRecipeEvaluate = ColorRecipeEvaluate<InteractivePaintSet>;
+
+// @public
+export type InteractiveColorRecipePalette = ColorRecipePalette<InteractivePaintSet>;
+
+// @public
+export type InteractiveColorRecipePaletteEvaluate = ColorRecipePaletteEvaluate<InteractivePaintSet>;
+
+// @public
+export interface InteractiveColorSet extends InteractiveValues<Color | null> {
+}
+
+// @public
+export interface InteractivePaintSet extends InteractiveValues<Paint | null> {
+}
+
+// @public
+export enum InteractiveState {
+    active = "active",
+    disabled = "disabled",
+    focus = "focus",
+    hover = "hover",
+    rest = "rest"
+}
+
+// @public
+export function interactiveSwatchSetAsOverlay(set: InteractiveColorSet, reference: Color, asOverlay: boolean): InteractiveColorSet;
+
+// @public
+export interface InteractiveTokenGroup<T> extends MakePropertyRequired<TokenGroup, "type">, InteractiveValues<TypedCSSDesignToken<T>> {
+}
+
+// @public
+export type InteractiveValues<T> = {
+    [key in InteractiveState]: T;
+};
+
+// @public
+export const Interactivity: {
+    readonly disabledAttribute: InteractivityDefinition;
+    readonly disabledClass: InteractivityDefinition;
+    readonly hrefAttribute: InteractivityDefinition;
+    readonly always: InteractivityDefinition;
+    readonly never: InteractivityDefinition;
+};
+
+// @public
+export type InteractivityDefinition = {
+    [key in InteractiveState]?: string;
+} & {
+    interactive?: string;
+};
+
+// @public
+export function invertingPaletteDeltasForSet(palette: Palette, reference: RelativeLuminance, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number): InteractiveValues<number>;
+
+// @public
+export function isDark(color: RelativeLuminance): boolean;
+
+// @public
+export class LinearGradient extends Gradient {
+    constructor(stops: GradientStop[], angle?: number);
+    readonly angle: number;
+    toString(): string;
+    // (undocumented)
+    readonly type: GradientType;
+}
+
+// @public
+export function luminanceSwatch(luminance: number): Color;
+
+// @public (undocumented)
+export type MakePropertyOptional<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]?: T[P];
+};
+
+// @public (undocumented)
+export type MakePropertyRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+
+// @public
+export function makeSelector(params: StyleModuleEvaluateParameters, state: InteractiveState): string;
+
+// @public
+export type Paint = PaintBase | DesignTokenMultiValuePaint;
+
+// @public
+export abstract class PaintBase implements RelativeLuminance, CSSDirective {
+    protected constructor(relativeLuminance: number);
+    contrast(b: RelativeLuminance): number;
+    createCSS(add: AddBehavior): ComposableStyles;
+    get relativeLuminance(): number;
+}
+
+// @public
+export interface Palette<T extends Color = Color> {
+    closestIndexOf(reference: RelativeLuminance): number;
+    colorContrast(reference: RelativeLuminance, minContrast: number, initialIndex?: number, direction?: PaletteDirection): T;
+    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T;
+    get(index: number): T;
+    readonly source: Color;
+    readonly swatches: ReadonlyArray<T>;
+}
+
+// @public
+export type PaletteDirection = PaletteDirectionValue | (() => PaletteDirectionValue);
+
+// @public
+export const PaletteDirectionValue: Readonly<{
+    readonly darker: 1;
+    readonly lighter: -1;
+}>;
+
+// @public
+export type PaletteDirectionValue = typeof PaletteDirectionValue[keyof typeof PaletteDirectionValue];
+
+// @public
+export class PaletteOkhsl extends BasePalette {
+    // (undocumented)
+    static from(source: Color | string, options?: Partial<PaletteOkhslOptions>): PaletteOkhsl;
+}
+
+// @public
+export interface PaletteOkhslOptions {
+    darkEndSaturation: number;
+    lightEndSaturation: number;
+    stepCount: number;
+}
+
+// @public
+export class PaletteRGB extends BasePalette {
+    static from(source: Color | string, options?: Partial<PaletteRGBOptions>): PaletteRGB;
+}
+
+// @public
+export interface PaletteRGBOptions {
+    preserveSource: boolean;
+    stepContrast: number;
+    stepContrastRamp: number;
+}
+
+// @public
+export class RadialGradient extends Gradient {
+    constructor(stops: GradientStop[]);
+    toString(): string;
+    // (undocumented)
+    readonly type: GradientType;
+}
+
+// @public
+export interface Recipe<TParam, TResult> {
+    evaluate: RecipeEvaluate<TParam, TResult>;
+}
+
+// @public (undocumented)
+export type RecipeEvaluate<TParam, TResult> = (resolver: DesignTokenResolver, params: TParam) => TResult;
+
+// @public (undocumented)
+export type RecipeEvaluateOptional<TParam, TResult> = (resolver: DesignTokenResolver, params?: TParam) => TResult;
+
+// @public
+export interface RecipeOptional<TParam, TResult> {
+    evaluate: RecipeEvaluateOptional<TParam, TResult>;
+}
+
+// @public
+export interface RelativeLuminance {
+    contrast: (a: RelativeLuminance) => number;
+    readonly relativeLuminance: number;
+}
+
+// @public
+export function resolvePaletteDirection(direction: PaletteDirection): PaletteDirectionValue;
+
+// @beta (undocumented)
+export interface SerializableAnatomy {
+    // (undocumented)
+    conditions: Record<string, SerializableCondition>;
+    // (undocumented)
+    context: string;
+    // (undocumented)
+    cursor?: CursorDefinition | false;
+    // (undocumented)
+    focus?: FocusDefinition<any>;
+    // (undocumented)
+    interactivity?: InteractivityDefinition;
+    // (undocumented)
+    name: string;
+    // (undocumented)
+    parts: Record<string, string>;
+    // (undocumented)
+    styleRules: SerializableStyleRule[];
+}
+
+// @beta (undocumented)
+export interface SerializableAnatomyWithImports extends SerializableAnatomy {
+    // (undocumented)
+    imports?: string[];
+}
+
+// @beta (undocumented)
+export type SerializableBooleanCondition = string;
+
+// @beta (undocumented)
+export type SerializableCondition = SerializableBooleanCondition | SerializableStringCondition;
+
+// @beta (undocumented)
+export type SerializableStringCondition = Record<string, string>;
+
+// @beta (undocumented)
+export interface SerializableStyleRule {
+    // (undocumented)
+    contextCondition?: Record<string, string | boolean>;
+    // (undocumented)
+    part?: string;
+    // (undocumented)
+    properties?: Record<string, string>;
+    // (undocumented)
+    stateOnContext?: boolean;
+    // (undocumented)
+    styles?: string[];
+}
+
+// @public
+export class Shadow implements CSSDirective {
+    constructor(color: Color, xOffset: number, yOffset: number, blurRadius?: number | undefined, spread?: number | undefined);
+    // (undocumented)
+    blurRadius?: number | undefined;
+    // (undocumented)
+    color: Color;
+    // (undocumented)
+    createCSS(): string;
+    // (undocumented)
+    spread?: number | undefined;
+    // (undocumented)
+    xOffset: number;
+    // (undocumented)
+    yOffset: number;
+}
+
+// @public
+export type ShadowValue = Shadow | DesignTokenMultiValue<Shadow> | string;
+
+// @public
+export type StringCondition = Record<string, string>;
+
+// @public
+export type StyleDeclaration = {
+    styles?: Styles | Iterable<Styles>;
+    properties?: StyleProperties;
+};
+
+// @public
+export type StyleKey = StyleProperty | StylePropertyShorthand | (string & Record<never, never>);
+
+// @public
+export type StyleModuleEvaluateParameters = StyleModuleTarget & InteractivityDefinition;
+
+// @public
+export interface StyleModuleTarget {
+    context?: string;
+    contextCondition?: string;
+    // @beta
+    ignoreInteractivity?: boolean;
+    part?: string;
+    partCondition?: string;
+    stateOnContext?: boolean;
+}
+
+// @public
+export type StyleProperties = Partial<Record<StyleKey, StyleValue>>;
+
+// @public
+export type StylePropertiesMap = Map<StyleKey, StyleValue>;
+
+// @public
+export const StyleProperty: {
+    readonly backgroundFill: "backgroundFill";
+    readonly foregroundFill: "foregroundFill";
+    readonly borderFillTop: "borderFillTop";
+    readonly borderFillRight: "borderFillRight";
+    readonly borderFillBottom: "borderFillBottom";
+    readonly borderFillLeft: "borderFillLeft";
+    readonly borderThicknessTop: "borderThicknessTop";
+    readonly borderThicknessRight: "borderThicknessRight";
+    readonly borderThicknessBottom: "borderThicknessBottom";
+    readonly borderThicknessLeft: "borderThicknessLeft";
+    readonly borderStyleTop: "borderStyleTop";
+    readonly borderStyleRight: "borderStyleRight";
+    readonly borderStyleBottom: "borderStyleBottom";
+    readonly borderStyleLeft: "borderStyleLeft";
+    readonly cornerRadiusTopLeft: "cornerRadiusTopLeft";
+    readonly cornerRadiusTopRight: "cornerRadiusTopRight";
+    readonly cornerRadiusBottomRight: "cornerRadiusBottomRight";
+    readonly cornerRadiusBottomLeft: "cornerRadiusBottomLeft";
+    readonly fontFamily: "fontFamily";
+    readonly fontSize: "fontSize";
+    readonly fontWeight: "fontWeight";
+    readonly fontStyle: "fontStyle";
+    readonly fontVariationSettings: "fontVariationSettings";
+    readonly letterSpacing: "letterSpacing";
+    readonly lineHeight: "lineHeight";
+    readonly marginTop: "marginTop";
+    readonly marginRight: "marginRight";
+    readonly marginBottom: "marginBottom";
+    readonly marginLeft: "marginLeft";
+    readonly paddingTop: "paddingTop";
+    readonly paddingRight: "paddingRight";
+    readonly paddingBottom: "paddingBottom";
+    readonly paddingLeft: "paddingLeft";
+    readonly gap: "gap";
+    readonly height: "height";
+    readonly minHeight: "minHeight";
+    readonly maxHeight: "maxHeight";
+    readonly width: "width";
+    readonly minWidth: "minWidth";
+    readonly maxWidth: "maxWidth";
+    readonly layoutInner: "layoutInner";
+    readonly layoutDirection: "layoutDirection";
+    readonly layoutMainAxisAlignItems: "layoutMainAxisAlignItems";
+    readonly layoutCrossAxisAlignItems: "layoutCrossAxisAlignItems";
+    readonly layoutWrap: "layoutWrap";
+    readonly opacity: "opacity";
+    readonly cursor: "cursor";
+    readonly outlineColor: "outlineColor";
+    readonly outlineOffset: "outlineOffset";
+    readonly outlineStyle: "outlineStyle";
+    readonly outlineThickness: "outlineThickness";
+    readonly shadow: "shadow";
+};
+
+// @public
+export type StyleProperty = ValuesOf<typeof StyleProperty>;
+
+// @public (undocumented)
+export const StylePropertyShorthand: {
+    borderFill: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[];
+    borderThickness: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[];
+    borderStyle: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[];
+    cornerRadius: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[];
+    margin: ("marginTop" | "marginRight" | "marginBottom" | "marginLeft")[];
+    marginHorizontal: ("marginRight" | "marginLeft")[];
+    marginVertical: ("marginTop" | "marginBottom")[];
+    padding: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[];
+    paddingHorizontal: ("paddingRight" | "paddingLeft")[];
+    paddingVertical: ("paddingTop" | "paddingBottom")[];
+};
+
+// @public
+export type StylePropertyShorthand = keyof typeof StylePropertyShorthand;
+
+// @public
+export type StyleRule = {
+    target?: StyleModuleTarget;
+} & StyleDeclaration;
+
+// @public
+export type StyleRules = Array<StyleRule>;
+
+// @public
+export class Styles {
+    // (undocumented)
+    appendComposed(styles: Styles): void;
+    clearComposed(): void;
+    static compose(styles: Styles[], properties?: StyleProperties, name?: string): Styles;
+    get composed(): Styles[] | undefined;
+    get effectiveAdaptiveProperties(): Map<StyleProperty, StyleValue>;
+    get effectiveProperties(): EffectiveStylePropertiesMap;
+    static fromDeclaration(declaration: StyleDeclaration, name?: string): Styles;
+    static fromProperties(properties: StyleProperties, name?: string): Styles;
+    readonly name: string | undefined;
+    get properties(): Readonly<StylePropertiesMap> | undefined;
+    set properties(properties: StylePropertiesMap | undefined);
+    // (undocumented)
+    static Shared: Map<string, Styles>;
+}
+
+// @public
+export type StyleValue = CSSDesignToken<any> | InteractiveValues<any | null> | CSSDirective | string | number;
+
+// @public
+export function swatchAsOverlay(color: Color | null, reference: Color, asOverlay: boolean): Color | null;
+
+// @public
+export interface TokenGroup extends MakePropertyOptional<DesignTokenMetadata, "type"> {
+    intendedFor?: StyleProperty[];
+    name: string;
+    type?: DesignTokenType;
+}
+
+// @beta
+export function twoPaletteGradient(startPalette: Palette, endPalette: Palette, reference: Paint, delta: number, angle?: number, direction?: PaletteDirection): Gradient;
+
+// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TypedCSSDesignToken" because one of its declarations is marked as @internal
+//
+// @public
+export class TypedCSSDesignToken<T> extends CSSDesignToken<T> implements DesignTokenMetadata {
+    constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]);
+    static createTyped<T>(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<T>;
+}
+
+// @internal (undocumented)
+export interface TypedCSSDesignToken<T> extends DesignTokenMetadata {
+}
+
+// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TypedDesignToken" because one of its declarations is marked as @internal
+//
+// @public
+export class TypedDesignToken<T> extends DesignToken<T> implements DesignTokenMetadata {
+    constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]);
+    static createTyped<T>(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken<T>;
+}
+
+// @internal (undocumented)
+export interface TypedDesignToken<T> extends DesignTokenMetadata {
+}
+
+// @public
+export class TypeRampPosition {
+    constructor(baseName: string, position: string, config: TypeRampPositionConfig);
+    readonly fontSize: TypedCSSDesignToken<string>;
+    readonly fontVariations: TypedCSSDesignToken<string>;
+    readonly lineHeight: TypedCSSDesignToken<string>;
+    readonly lineHeightMultiline: TypedCSSDesignToken<string>;
+}
+
+// @public
+export interface TypeRampPositionConfig {
+    fontSize: DesignTokenValue<string>;
+    lineHeight: DesignTokenValue<string>;
+    lineHeightMultiline: DesignTokenValue<string>;
+}
+
+// @public
+export class TypeRampTokenGroup implements TokenGroup {
+    constructor(name: string, minus2: TypeRampPositionConfig, minus1: TypeRampPositionConfig, base: TypeRampPositionConfig, plus1: TypeRampPositionConfig, plus2: TypeRampPositionConfig, plus3: TypeRampPositionConfig, plus4: TypeRampPositionConfig, plus5: TypeRampPositionConfig, plus6: TypeRampPositionConfig);
+    readonly base: TypeRampPosition;
+    readonly minus1: TypeRampPosition;
+    readonly minus2: TypeRampPosition;
+    // (undocumented)
+    readonly name: string;
+    readonly plus1: TypeRampPosition;
+    readonly plus2: TypeRampPosition;
+    readonly plus3: TypeRampPosition;
+    readonly plus4: TypeRampPosition;
+    readonly plus5: TypeRampPosition;
+    readonly plus6: TypeRampPosition;
+}
+
+// @public
+export class TypeScaleTokenGroup extends TypeRampTokenGroup {
+    constructor(name: string, baseSize: string, multiplier: number, lineHeightRatio?: number, lineHeightMultilineRatio?: number, lineHeightSnap?: string);
+    readonly lineHeightMultilineRatio: TypedDesignToken<number>;
+    readonly lineHeightRatio: TypedDesignToken<number>;
+    readonly lineHeightSnap: TypedCSSDesignToken<string>;
+    readonly multiplier: TypedDesignToken<number>;
+}
+
+// @internal
+export const _white: Color;
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/adaptive-ui/package.json b/packages/adaptive-ui/package.json
index d992fbf4..024f0ebc 100644
--- a/packages/adaptive-ui/package.json
+++ b/packages/adaptive-ui/package.json
@@ -74,10 +74,6 @@
       "types": "./dist/dts/core/index.d.ts",
       "default": "./dist/esm/core/index.js"
     },
-    "./migration": {
-      "types": "./dist/dts/migration/index.d.ts",
-      "default": "./dist/esm/migration/index.js"
-    },
     "./reference": {
       "types": "./dist/dts/reference/index.d.ts",
       "default": "./dist/esm/reference/index.js"
diff --git a/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/_input-validation.json b/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/_input-validation.json
index 42bf5ac3..d2b82540 100644
--- a/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/_input-validation.json
+++ b/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/_input-validation.json
@@ -21,7 +21,7 @@
     {
       "part": "Content Block",
       "properties": {
-        "gap": "density.itemContainer.horizontal.gap"
+        "gap": "density.controlList.horizontal.gap"
       }
     },
     {
diff --git a/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/checkbox.json b/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/checkbox.json
index 8e1be755..f261b9f1 100644
--- a/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/checkbox.json
+++ b/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/checkbox.json
@@ -51,7 +51,7 @@
     {
       "part": "Control",
       "styles": [
-        "density.item-container",
+        "density.control-list",
         "styles.selectable-control-unselected",
         "shape.control"
       ]
@@ -62,7 +62,7 @@
         "styles.text-plain"
       ],
       "properties": {
-        "gap": "density.itemContainer.horizontal.gap"
+        "gap": "density.controlList.horizontal.gap"
       }
     },
     {
diff --git a/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/text-field.json b/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/text-field.json
index b86df26a..9957f2f0 100644
--- a/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/text-field.json
+++ b/packages/adaptive-ui/src/__test__/styles-oracle/anatomies/text-field.json
@@ -53,7 +53,7 @@
         "styles.text-label"
       ],
       "properties": {
-        "gap": "density.itemContainer.horizontal.gap"
+        "gap": "density.controlList.horizontal.gap"
       }
     },
     {
@@ -66,7 +66,7 @@
     {
       "part": "Control container",
       "properties": {
-        "gap": "density.itemContainer.horizontal.gap"
+        "gap": "density.controlList.horizontal.gap"
       }
     },
     {
diff --git a/packages/adaptive-ui/src/__test__/styles-oracle/baseline/json/checkbox.css b/packages/adaptive-ui/src/__test__/styles-oracle/baseline/json/checkbox.css
index 1a4ca12e..dadb70ec 100644
--- a/packages/adaptive-ui/src/__test__/styles-oracle/baseline/json/checkbox.css
+++ b/packages/adaptive-ui/src/__test__/styles-oracle/baseline/json/checkbox.css
@@ -16,8 +16,8 @@
   gap: var(--density-control-horizontal-gap);
 }
 .checkbox .control {
-  padding: var(--density-itemContainer-vertical-padding) var(--density-itemContainer-horizontal-padding);
-  gap: var(--density-itemContainer-horizontal-gap);
+  padding: var(--density-controlList-vertical-padding) var(--density-controlList-horizontal-padding);
+  gap: var(--density-controlList-horizontal-gap);
   border-radius: var(--shape-cornerRadius-default);
   font-family: var(--typography-fontFamily-default);
   font-size: var(--typography-ramp-default-fontSize-base);
@@ -52,7 +52,7 @@
   font-weight: var(--typography-fontWeight-default);
   font-variation-settings: var(--typography-ramp-default-fontVariations-base);
   fill: currentcolor;
-  gap: var(--density-itemContainer-horizontal-gap);
+  gap: var(--density-controlList-horizontal-gap);
 }
 .checkbox .label,.checkbox:not(.disabled):not(.read-only) .label.focused,.checkbox:not(.disabled):not(.read-only) .label.hovered,.checkbox:not(.disabled):not(.read-only) .label.active {
   color: var(--color-neutral-stroke-strong-rest);
@@ -172,7 +172,7 @@
   color: var(--color-neutral-stroke-strong-disabled);
 }
 .checkbox .content-block {
-  gap: var(--density-itemContainer-horizontal-gap);
+  gap: var(--density-controlList-horizontal-gap);
 }
 .checkbox.invalid .control {
   border-color: var(--color-critical-stroke-discernible-rest);
diff --git a/packages/adaptive-ui/src/__test__/styles-oracle/baseline/json/text-field.css b/packages/adaptive-ui/src/__test__/styles-oracle/baseline/json/text-field.css
index e3c187df..b02706ce 100644
--- a/packages/adaptive-ui/src/__test__/styles-oracle/baseline/json/text-field.css
+++ b/packages/adaptive-ui/src/__test__/styles-oracle/baseline/json/text-field.css
@@ -25,7 +25,7 @@
   font-variation-settings: var(--typography-ramp-default-fontVariations-base);
   fill: currentcolor;
   font-style: var(--typography-fontStyle-label);
-  gap: var(--density-itemContainer-horizontal-gap);
+  gap: var(--density-controlList-horizontal-gap);
 }
 .text-field .label,.text-field:not(.disabled):not(.read-only) .label.focus,.text-field:not(.disabled):not(.read-only) .label.hover,.text-field:not(.disabled):not(.read-only) .label.active {
   color: var(--color-neutral-stroke-strong-rest);
@@ -55,7 +55,7 @@
   color: var(--color-critical-stroke-readable-disabled);
 }
 .text-field .control-container {
-  gap: var(--density-itemContainer-horizontal-gap);
+  gap: var(--density-controlList-horizontal-gap);
 }
 .text-field .control {
   border-radius: var(--shape-cornerRadius-default);
@@ -156,7 +156,7 @@
   color: var(--color-neutral-stroke-strong-disabled);
 }
 .text-field .content-block {
-  gap: var(--density-itemContainer-horizontal-gap);
+  gap: var(--density-controlList-horizontal-gap);
 }
 .text-field.invalid .control {
   border-color: var(--color-critical-stroke-discernible-rest);
diff --git a/packages/adaptive-ui/src/core/color/color.spec.ts b/packages/adaptive-ui/src/core/color/color.spec.ts
index 7ef4535c..df7d9fba 100644
--- a/packages/adaptive-ui/src/core/color/color.spec.ts
+++ b/packages/adaptive-ui/src/core/color/color.spec.ts
@@ -19,7 +19,7 @@ describe("Color", () => {
 
         expect(color).to.be.instanceof(Color);
         expect(color.color).to.deep.equal(greyColor);
-        expect(color.toColorString()).to.equal(greyHex);
+        expect(color.toString()).to.equal(greyHex);
     });
 
     it("should create a Color from the provided RGB values", () => {
@@ -27,14 +27,14 @@ describe("Color", () => {
 
         expect(color).to.be.instanceof(Color);
         expect(color.color).to.deep.equal(greyColor);
-        expect(color.toColorString()).to.equal(greyHex);
+        expect(color.toString()).to.equal(greyHex);
     });
 
     it("should create a Color from the provided hex color", () => {
         const color = Color.parse(greyHex)!;
 
         expect(color).to.be.instanceof(Color);
-        expect(color.toColorString()).to.equal(greyHex);
+        expect(color.toString()).to.equal(greyHex);
     });
 
     it("should create a Color with opacity", () => {
@@ -42,7 +42,7 @@ describe("Color", () => {
 
         expect(color).to.be.instanceof(Color);
         expect(color.color).to.deep.equal(opacityColor);
-        expect(color.toColorString()).to.equal(opacityRgba);
+        expect(color.toString()).to.equal(opacityRgba);
     });
 
     it("should provide the correct relative luminance", () => {
@@ -94,7 +94,7 @@ describe("Color", () => {
         const color = Color.parse(opacityHex)!;
 
         expect(color.toString()).to.equal(opacityRgba);
-        expect(color.toColorString()).to.equal(opacityRgba);
+        expect(color.toString()).to.equal(opacityRgba);
         expect(color.createCSS()).to.equal(opacityRgba);
     });
 
@@ -136,6 +136,13 @@ describe("Color", () => {
 
             expect(result.relativeLuminance).to.be.NaN;
         });
+
+        it("should default alpha to fully transparent when zero", () => {
+            const result = Color.unsafeOpacity(Color.from(greyObject), 0);
+
+            expect(result.color.alpha).to.equal(0);
+            expect(result.toString()).to.equal("transparent");
+        });
     });
 
     describe("asOverlay", () => {
diff --git a/packages/adaptive-ui/src/core/color/color.ts b/packages/adaptive-ui/src/core/color/color.ts
index 294d910a..f720e0b2 100644
--- a/packages/adaptive-ui/src/core/color/color.ts
+++ b/packages/adaptive-ui/src/core/color/color.ts
@@ -53,13 +53,6 @@ export class Color extends PaintBase {
         return this.color.alpha !== undefined && this.color.alpha < 1 ? formatRgb(this.color) : formatHex(this.color);
     }
 
-    /**
-     * {@inheritdoc Color.toString}
-     *
-     * @deprecated Use toString
-     */
-    public toColorString = this.toString;
-    
     /**
      * Gets this color value as a string for use in css.
      *
diff --git a/packages/adaptive-ui/src/core/color/index.ts b/packages/adaptive-ui/src/core/color/index.ts
index d15ea2e6..bd53df71 100644
--- a/packages/adaptive-ui/src/core/color/index.ts
+++ b/packages/adaptive-ui/src/core/color/index.ts
@@ -8,4 +8,3 @@ export * from "./palette-okhsl.js";
 export * from "./palette-rgb.js";
 export * from "./palette.js";
 export * from "./recipe.js";
-export * from "./swatch.js";
diff --git a/packages/adaptive-ui/src/core/color/palette-rgb.spec.ts b/packages/adaptive-ui/src/core/color/palette-rgb.spec.ts
index ae9ab162..76f2552e 100644
--- a/packages/adaptive-ui/src/core/color/palette-rgb.spec.ts
+++ b/packages/adaptive-ui/src/core/color/palette-rgb.spec.ts
@@ -18,7 +18,7 @@ describe("PaletteRGB.from", () => {
     it("should create a palette from the provided hex color", () => {
         const palette = PaletteRGB.from(greyHex);
 
-        expect(palette.source.toColorString()).to.equal(greyHex);
+        expect(palette.source.toString()).to.equal(greyHex);
     });
 
     it("should create a palette with increased contrast", () => {
diff --git a/packages/adaptive-ui/src/core/color/recipes/contrast-swatch.spec.ts b/packages/adaptive-ui/src/core/color/recipes/contrast-swatch.spec.ts
index c162253f..80930c33 100644
--- a/packages/adaptive-ui/src/core/color/recipes/contrast-swatch.spec.ts
+++ b/packages/adaptive-ui/src/core/color/recipes/contrast-swatch.spec.ts
@@ -15,7 +15,7 @@ describe("contrastSwatch", (): void => {
     const accentPalette = PaletteRGB.from(accentBase);
 
     neutralPalette.swatches.concat(accentPalette.swatches).forEach((swatch): void => {
-        it(`${swatch.toColorString()} should resolve a color from the neutral palette`, (): void => {
+        it(`${swatch.toString()} should resolve a color from the neutral palette`, (): void => {
             expect(
                 neutralPalette.swatches.indexOf(contrastSwatch(neutralPalette, swatch, 4.5))
             ).not.to.equal(-1);
@@ -23,12 +23,12 @@ describe("contrastSwatch", (): void => {
     });
 
     neutralPalette.swatches.concat(accentPalette.swatches).forEach((swatch): void => {
-        it(`${swatch.toColorString()} should always be at least 4.5 : 1 against the background`, (): void => {
+        it(`${swatch.toString()} should always be at least 4.5 : 1 against the background`, (): void => {
             expect(
                 swatch.contrast(contrastSwatch(neutralPalette, swatch, 4.5))
                 // Because contrastSwatch follows the direction patterns of neutralForeground,
                 // a backgroundColor #777777 is impossible to hit 4.5 against.
-            ).to.be.gte(swatch.toColorString().toUpperCase() === "#777777" ? 4.48 : 4.5);
+            ).to.be.gte(swatch.toString().toUpperCase() === "#777777" ? 4.48 : 4.5);
             expect(swatch.contrast(contrastSwatch(neutralPalette, swatch, 4.5))).to.be.lessThan(5);
         });
     });
diff --git a/packages/adaptive-ui/src/core/color/swatch.spec.ts b/packages/adaptive-ui/src/core/color/swatch.spec.ts
deleted file mode 100644
index 0e2207ab..00000000
--- a/packages/adaptive-ui/src/core/color/swatch.spec.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import chai from "chai";
-import { type Rgb } from "culori/fn";
-import { Color } from "./color.js";
-import { Swatch } from "./swatch.js";
-import { _white } from "./utilities/color-constants.js";
-
-const { expect } = chai;
-
-const greyColor: Rgb = { mode: "rgb", r: 0.5, g: 0.5, b: 0.5, alpha: undefined };
-const greyObject = { r: 0.5, g: 0.5, b: 0.5, alpha: undefined };
-const greyHex = "#808080";
-
-const opacityColor: Rgb = { mode: "rgb", r: 0.2, g: 0.4, b: 0.6, alpha: 0.5019607843137255 };
-const opacityHex = "#33669980";
-const opacityRgba = "rgba(51, 102, 153, 0.5)";
-
-const lightGreyObject = { r: 0.75, g: 0.75, b: 0.75, alpha: undefined };
-const darkGreyObject = { r: 0.25, g: 0.25, b: 0.25, alpha: undefined };
-
-describe("Swatch", () => {
-    it("should create a Swatch from the provided object", () => {
-        const swatch = Swatch.from(greyObject);
-
-        expect(swatch).to.be.instanceof(Swatch);
-        expect(swatch.color).to.deep.equal(greyColor);
-        expect(swatch.toColorString()).to.equal(greyHex);
-        expect(swatch.toString()).to.equal(greyHex);
-    });
-
-    it("should create a Swatch from the provided RGB values", () => {
-        const swatch = Swatch.fromRgb(0.5, 0.5, 0.5);
-
-        expect(swatch).to.be.instanceof(Swatch);
-        expect(swatch.color).to.deep.equal(greyColor);
-        expect(swatch.toColorString()).to.equal(greyHex);
-    });
-
-    it("should create a Swatch from a Color", () => {
-        const color = Color.from(greyObject);
-        const swatch = Swatch.fromColor(color);
-
-        expect(swatch).to.be.instanceof(Swatch);
-        expect(swatch.color).to.deep.equal(greyColor);
-        expect(swatch.toColorString()).to.equal(greyHex);
-    });
-
-    it("should create a Swatch from the provided hex color", () => {
-        const swatch = Swatch.parse(greyHex)!;
-
-        expect(swatch).to.be.instanceof(Swatch);
-        expect(swatch.toColorString()).to.equal(greyHex);
-    });
-
-    it("should create a Swatch with opacity", () => {
-        const swatch = Swatch.parse(opacityHex)!;
-
-        expect(swatch).to.be.instanceof(Swatch);
-        expect(swatch.color).to.deep.equal(opacityColor);
-        expect(swatch.toColorString()).to.equal(opacityRgba);
-    });
-
-    it("should create a light Swatch as an overlay", () => {
-        const lightGrey = Swatch.from(lightGreyObject);
-        const grey = Swatch.from(greyObject);
-        const swatch = Swatch.asOverlay(lightGrey, grey)!;
-
-        expect(swatch).to.be.instanceof(Swatch);
-        expect(swatch.color).to.deep.equal({ mode: "rgb", r: 1, g: 1, b: 1, alpha: 0.5 });
-    });
-
-    it("should create a dark Swatch as an overlay", () => {
-        const darkGrey = Swatch.from(darkGreyObject);
-        const grey = Swatch.from(greyObject);
-        const swatch = Swatch.asOverlay(darkGrey, grey)!;
-
-        expect(swatch).to.be.instanceof(Swatch);
-        expect(swatch.color).to.deep.equal({ mode: "rgb", r: 0, g: 0, b: 0, alpha: 0.5 });
-    });
-
-    it("should provide the correct relative luminance", () => {
-        const swatch = Swatch.from(greyObject);
-
-        expect(swatch.relativeLuminance).to.approximately(0.21, 0.01);
-    });
-
-    it("should provide a string representation", () => {
-        const swatch = Swatch.from(greyObject);
-
-        expect(swatch.toString()).to.equal(greyHex);
-    });
-
-    it("should provide a css representation", () => {
-        const swatch = Swatch.from(greyObject);
-
-        expect(swatch.createCSS()).to.equal(greyHex);
-    });
-
-    it("should provide its contrast with another value", () => {
-        const swatch = Swatch.from(greyObject);
-
-        expect(swatch.contrast(_white)).to.approximately(3.9, 0.1);
-    });
-
-    it("should provide a transparent equivalent", () => {
-        const swatch = Swatch.from(greyObject);
-
-        const halfTransparent = swatch.toTransparent(0.5);
-        expect(halfTransparent).to.be.instanceof(Swatch);
-        expect(halfTransparent.color).to.deep.equal({ ...greyColor, alpha: 0.5 });
-        expect(halfTransparent.toColorString()).to.equal("rgba(128, 128, 128, 0.5)");
-        expect(halfTransparent.toString()).to.equal("rgba(128, 128, 128, 0.5)");
-        expect(halfTransparent.createCSS()).to.equal("rgba(128, 128, 128, 0.5)");
-        expect(halfTransparent.relativeLuminance).to.approximately(0.21, 0.01);
-        expect(halfTransparent.contrast(_white)).to.approximately(3.9, 0.1);
-    });
-
-    it("should not modify the original when creating a transparent equivalent", () => {
-        const swatch = Swatch.from(greyObject);
-
-        swatch.toTransparent(0.5);
-
-        expect(swatch.color).to.deep.equal(greyColor);
-    });
-
-    it("should default to fully transparent", () => {
-        const swatch = Swatch.from(greyObject).toTransparent();
-
-        expect(swatch.color.alpha).to.equal(0);
-        expect(swatch.toString()).to.equal("transparent");
-    });
-
-    it("should return undefined when parsing an invalid string", () => {
-        expect(Swatch.parse("not a color")).to.be.undefined;
-    });
-
-    it("should use the intended color of the reference when creating an overlay", () => {
-        const lightGrey = Swatch.from(lightGreyObject);
-        const grey = Swatch.from(greyObject);
-        const overlay = Swatch.asOverlay(lightGrey, grey);
-        // The overlay is semitransparent, so its luminance comes from the intended color.
-        const darker = Swatch.asOverlay(Swatch.from(darkGreyObject), overlay);
-
-        expect(overlay.relativeLuminance).to.equal(lightGrey.relativeLuminance);
-        // Calculated against the intended light grey (0.25 - 0.75) / (0 - 0.75), not the semitransparent white.
-        expect(darker.color).to.deep.equal({ mode: "rgb", r: 0, g: 0, b: 0, alpha: 0.667 });
-    });
-});
diff --git a/packages/adaptive-ui/src/core/color/swatch.ts b/packages/adaptive-ui/src/core/color/swatch.ts
deleted file mode 100644
index 77f29dda..00000000
--- a/packages/adaptive-ui/src/core/color/swatch.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { modeRgb, parse, type Rgb, useMode } from "culori/fn";
-import { Color } from "./color.js";
-import { calculateOverlayColor } from "./utilities/opacity.js";
-
-const rgb = useMode(modeRgb);
-
-/**
- * Legacy equivalent of Color.
- *
- * @public
- * @deprecated Use {@link Color}.
- */
-export class Swatch extends Color {
-    /**
-     * Gets this color with transparency.
-     *
-     * @returns The color with full transparency
-     * @deprecated Use Color.unsafeOpacity
-     */
-    public toTransparent(alpha: number = 0): Swatch {
-        const transparentColor = { ...this.color };
-        transparentColor.alpha = alpha;
-        return new Swatch(transparentColor, this);
-    }
-
-    /**
-     * Creates a new Swatch from and object with R, G, and B values expressed as a number between 0 to 1.
-     *
-     * @param obj - An object with `r`, `g`, and `b`, and optional `alpha` values expressed as a number between 0 and 1.
-     * @returns A new Swatch
-     */
-    public static from(obj: { r: number; g: number; b: number, alpha?: number }): Swatch {
-        const color: Rgb = { mode: "rgb", ...obj };
-        return new Swatch(color);
-    }
-
-    /**
-     * Creates a new Swatch from R, G, and B values expressed as a number between 0 to 1.
-     *
-     * @param r - Red channel expressed as a number between 0 and 1.
-     * @param g - Green channel expressed as a number between 0 and 1.
-     * @param b - Blue channel expressed as a number between 0 and 1.
-     * @param alpha - Alpha channel expressed as a number between 0 and 1.
-     * @returns A new Swatch
-     */
-    public static fromRgb(r: number, g: number, b: number, alpha?: number): Swatch {
-        const color: Rgb = { mode: "rgb", r, g, b, alpha };
-        return new Swatch(color);
-    }
-
-    /**
-     * Creates a new Swatch from a Color.
-     *
-     * @param color - A Color
-     * @returns A new Swatch
-     */
-    public static fromColor(color: Color): Swatch {
-        return new Swatch(color.color);
-    }
-
-    /**
-     * Creates a new Swatch from a parsable string.
-     *
-     * @param color - A string representation of the Swatch.
-     * @returns The Swatch object or undefined.
-     */
-    public static parse(color: string): Swatch | undefined {
-        const parsedColor = parse(color);
-        if (parsedColor) {
-            return new Swatch(parsedColor);
-        }
-    }
-
-    /**
-     * Creates a new Swatch as an overlay representation of the `intendedColor` over `reference`.
-     *
-     * Currently the overlay will only be black or white, so this works best with a plain grey neutral palette.
-     * Otherwise it will attempt to match the luminance value of the Swatch, so it will likely be close, but not an
-     * exact match to the color from another palette.
-     *
-     * @param intendedColor - The Swatch the overlay should look like over the `reference` Swatch.
-     * @param reference - The Swatch under the overlay color.
-     * @returns A semitransparent Swatch that represents the `intendedColor` over the `reference` Swatch.
-     */
-    public static asOverlay(intendedColor: Swatch, reference: Swatch): Swatch {
-        const refColor = reference._intendedColor ? reference._intendedColor.color : reference.color;
-        const colorWithAlpha = calculateOverlayColor(rgb(intendedColor.color), rgb(refColor));
-
-        return new Swatch(colorWithAlpha, intendedColor);
-    }
-}
diff --git a/packages/adaptive-ui/src/core/index.spec.ts b/packages/adaptive-ui/src/core/index.spec.ts
index b9712e61..9be8e056 100644
--- a/packages/adaptive-ui/src/core/index.spec.ts
+++ b/packages/adaptive-ui/src/core/index.spec.ts
@@ -7,7 +7,6 @@ describe("core index", () => {
     it("should export the public api", () => {
         [
             "Color",
-            "Swatch",
             "PaletteRGB",
             "PaletteOkhsl",
             "LinearGradient",
diff --git a/packages/adaptive-ui/src/core/modules/css.spec.ts b/packages/adaptive-ui/src/core/modules/css.spec.ts
index f8afd4cc..a7e8580d 100644
--- a/packages/adaptive-ui/src/core/modules/css.spec.ts
+++ b/packages/adaptive-ui/src/core/modules/css.spec.ts
@@ -83,21 +83,18 @@ describe("stylePropertyToCssProperty", () => {
         expect(stylePropertyToCssProperty(StyleProperty.shadow)).to.equal("box-shadow");
     });
 
-    it("should map outlines, including the deprecated outline width", () => {
+    it("should map outlines", () => {
         expect(stylePropertyToCssProperty(StyleProperty.outlineColor)).to.equal("outline-color");
         expect(stylePropertyToCssProperty(StyleProperty.outlineOffset)).to.equal("outline-offset");
         expect(stylePropertyToCssProperty(StyleProperty.outlineStyle)).to.equal("outline-style");
         expect(stylePropertyToCssProperty(StyleProperty.outlineThickness)).to.equal("outline-width");
-        expect(stylePropertyToCssProperty(StyleProperty.outlineWidth)).to.equal("outline-width");
     });
 
-    it("should map each StyleProperty to a unique css property except the deprecated alias", () => {
+    it("should map each StyleProperty to a unique css property", () => {
         const seen = new Map<string, string>();
         Object.values(StyleProperty).forEach(property => {
             const css = stylePropertyToCssProperty(property);
-            if (seen.has(css)) {
-                expect([property, seen.get(css)].sort()).to.deep.equal(["outlineThickness", "outlineWidth"]);
-            }
+            expect(seen.has(css), `${property} and ${seen.get(css)} both map to ${css}`).to.be.false;
             seen.set(css, property);
         });
     });
diff --git a/packages/adaptive-ui/src/core/modules/css.ts b/packages/adaptive-ui/src/core/modules/css.ts
index 326948a4..e966851c 100644
--- a/packages/adaptive-ui/src/core/modules/css.ts
+++ b/packages/adaptive-ui/src/core/modules/css.ts
@@ -111,8 +111,6 @@ export const stylePropertyToCssProperty = (usage: StyleProperty): string => {
             return "outline-style";
         case StyleProperty.outlineThickness:
             return "outline-width";
-        case StyleProperty.outlineWidth:
-            return "outline-width";
         case StyleProperty.shadow:
             return "box-shadow";
     }
diff --git a/packages/adaptive-ui/src/core/modules/styles.spec.ts b/packages/adaptive-ui/src/core/modules/styles.spec.ts
index f3d54a69..2c042fbc 100644
--- a/packages/adaptive-ui/src/core/modules/styles.spec.ts
+++ b/packages/adaptive-ui/src/core/modules/styles.spec.ts
@@ -6,7 +6,8 @@ import { Paint } from "../color/paint.js";
 import { createTokenNonCss } from "../token-helpers.js";
 import { InteractivePaintSet } from "../color/recipe.js";
 import { DesignTokenType } from "../adaptive-design-tokens.js";
-import { BorderFill, BorderStyle, BorderThickness, convertStylesToFocusState, CornerRadius, Fill, Padding, Styles } from "./styles.js";
+import { convertStylesToFocusState, Fill, Styles } from "./styles.js";
+import { StylePropertyShorthand } from "./types.js";
 
 const { expect } = chai;
 
@@ -380,51 +381,15 @@ describe("convertStylesToFocusState", () => {
     });
 });
 
-describe("style property helpers", () => {
-    const sides = (value: unknown, names: string[]) =>
-        Object.fromEntries(names.map(n => [n, value]));
+describe("StylePropertyShorthand in Styles", () => {
+    const allSides = (shorthand: keyof typeof StylePropertyShorthand, value: string) =>
+        Object.fromEntries(StylePropertyShorthand[shorthand].map((name) => [name, value])) as Record<string, string>;
 
-    it("BorderFill.all should set every side", () => {
-        expect(BorderFill.all("red")).to.deep.equal(
-            sides("red", ["borderFillTop", "borderFillRight", "borderFillBottom", "borderFillLeft"])
-        );
-    });
-
-    it("BorderThickness.all should set every side", () => {
-        expect(BorderThickness.all("1px")).to.deep.equal(
-            sides("1px", ["borderThicknessTop", "borderThicknessRight", "borderThicknessBottom", "borderThicknessLeft"])
-        );
-    });
-
-    it("BorderStyle.all should set every side", () => {
-        expect(BorderStyle.all("solid")).to.deep.equal(
-            sides("solid", ["borderStyleTop", "borderStyleRight", "borderStyleBottom", "borderStyleLeft"])
-        );
-    });
-
-    it("CornerRadius.all should set every corner", () => {
-        expect(CornerRadius.all("4px")).to.deep.equal(
-            sides("4px", ["cornerRadiusTopLeft", "cornerRadiusTopRight", "cornerRadiusBottomRight", "cornerRadiusBottomLeft"])
-        );
-    });
-
-    it("Padding.all should set every side", () => {
-        expect(Padding.all("4px")).to.deep.equal(
-            sides("4px", ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"])
-        );
-    });
-
-    it("Padding.verticalHorizontal should set vertical and horizontal sides", () => {
-        expect(Padding.verticalHorizontal("2px", "8px")).to.deep.equal({
-            paddingTop: "2px",
-            paddingRight: "8px",
-            paddingBottom: "2px",
-            paddingLeft: "8px",
+    it("should expand shorthands into properties usable with Styles", () => {
+        const styles = Styles.fromProperties({
+            ...allSides("padding", "4px"),
+            ...allSides("cornerRadius", "2px"),
         });
-    });
-
-    it("should produce properties usable with Styles", () => {
-        const styles = Styles.fromProperties({ ...Padding.all("4px"), ...CornerRadius.all("2px") });
 
         expect(styles.effectiveProperties.size).to.equal(8);
     });
diff --git a/packages/adaptive-ui/src/core/modules/styles.ts b/packages/adaptive-ui/src/core/modules/styles.ts
index 11d25ea9..6674eae8 100644
--- a/packages/adaptive-ui/src/core/modules/styles.ts
+++ b/packages/adaptive-ui/src/core/modules/styles.ts
@@ -142,90 +142,6 @@ export const Fill = {
     }
 }
 
-/**
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const BorderFill = {
-    all: function(value: StyleValue): StyleProperties {
-        return {
-            borderFillTop: value,
-            borderFillRight: value,
-            borderFillBottom: value,
-            borderFillLeft: value,
-        };
-    },
-}
-
-/**
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const BorderThickness = {
-    all: function(value: StyleValue): StyleProperties {
-        return {
-            borderThicknessTop: value,
-            borderThicknessRight: value,
-            borderThicknessBottom: value,
-            borderThicknessLeft: value,
-        };
-    },
-}
-
-/**
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const BorderStyle = {
-    all: function(value: StyleValue): StyleProperties {
-        return {
-            borderStyleTop: value,
-            borderStyleRight: value,
-            borderStyleBottom: value,
-            borderStyleLeft: value,
-        };
-    },
-}
-
-/**
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const CornerRadius = {
-    all: function(value: StyleValue): StyleProperties {
-        return {
-            cornerRadiusTopLeft: value,
-            cornerRadiusTopRight: value,
-            cornerRadiusBottomRight: value,
-            cornerRadiusBottomLeft: value,
-        };
-    },
-}
-
-/**
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const Padding = {
-    all: function(value: StyleValue): StyleProperties {
-        return {
-            paddingTop: value,
-            paddingRight: value,
-            paddingBottom: value,
-            paddingLeft: value,
-        };
-    },
-
-    verticalHorizontal: function(valueVertical: StyleValue, valueHorizontal: StyleValue): StyleProperties {
-        return {
-            paddingTop: valueVertical,
-            paddingRight: valueHorizontal,
-            paddingBottom: valueVertical,
-            paddingLeft: valueHorizontal,
-        };
-    },
-}
-
 /**
  * Converts `Styles` to focus-only state. This allows styles to be constructed as usual, using interactive sets
  * or simple values, but convert the styles specifically to focus state to the necessary structure.
diff --git a/packages/adaptive-ui/src/core/modules/types.spec.ts b/packages/adaptive-ui/src/core/modules/types.spec.ts
index 24c7524a..41c277a2 100644
--- a/packages/adaptive-ui/src/core/modules/types.spec.ts
+++ b/packages/adaptive-ui/src/core/modules/types.spec.ts
@@ -4,11 +4,6 @@ import {
     Interactivity,
     StyleProperty,
     StylePropertyShorthand,
-    stylePropertyBorderFillAll,
-    stylePropertyBorderStyleAll,
-    stylePropertyBorderThicknessAll,
-    stylePropertyCornerRadiusAll,
-    stylePropertyPaddingAll,
 } from "./types.js";
 
 const { expect } = chai;
@@ -67,13 +62,6 @@ describe("StylePropertyShorthand", () => {
         expect(StylePropertyShorthand.paddingVertical).to.deep.equal(["paddingTop", "paddingBottom"]);
     });
 
-    it("should provide the legacy `all` aliases", () => {
-        expect(stylePropertyBorderFillAll).to.equal(StylePropertyShorthand.borderFill);
-        expect(stylePropertyBorderThicknessAll).to.equal(StylePropertyShorthand.borderThickness);
-        expect(stylePropertyBorderStyleAll).to.equal(StylePropertyShorthand.borderStyle);
-        expect(stylePropertyCornerRadiusAll).to.equal(StylePropertyShorthand.cornerRadius);
-        expect(stylePropertyPaddingAll).to.equal(StylePropertyShorthand.padding);
-    });
 });
 
 describe("Interactivity", () => {
diff --git a/packages/adaptive-ui/src/core/modules/types.ts b/packages/adaptive-ui/src/core/modules/types.ts
index 83eae82b..5ad772ba 100644
--- a/packages/adaptive-ui/src/core/modules/types.ts
+++ b/packages/adaptive-ui/src/core/modules/types.ts
@@ -379,8 +379,6 @@ export const StyleProperty = {
     outlineOffset: "outlineOffset",
     outlineStyle: "outlineStyle",
     outlineThickness: "outlineThickness",
-    /** @deprecated Use outlineThickness */
-    outlineWidth: "outlineWidth",
     shadow: "shadow",
 } as const;
 
@@ -459,55 +457,6 @@ export const StylePropertyShorthand = {
  */
 export type StylePropertyShorthand = keyof typeof StylePropertyShorthand;
 
-
-/**
- * Any style property, either an {@link (StyleProperty:type)} or a string for any other CSS property.
- *
- * @public
- * @deprecated Use StyleKey instead
- */
-export type StylePropertyCss = StyleProperty | (string & Record<never, never>);
-
-/**
- * A convenience shorthand for all border fill {@link (StyleProperty:type)} values.
- *
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const stylePropertyBorderFillAll = StylePropertyShorthand.borderFill;
-
-/**
- * A convenience shorthand for all border thickness {@link (StyleProperty:type)} values.
- *
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const stylePropertyBorderThicknessAll = StylePropertyShorthand.borderThickness;
-
-/**
- * A convenience shorthand for all border style {@link (StyleProperty:type)} values.
- *
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const stylePropertyBorderStyleAll = StylePropertyShorthand.borderStyle;
-
-/**
- * A convenience shorthand for all corner radius {@link (StyleProperty:type)} values.
- *
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const stylePropertyCornerRadiusAll = StylePropertyShorthand.cornerRadius;
-
-/**
- * A convenience shorthand for all padding {@link (StyleProperty:type)} values.
- *
- * @public
- * @deprecated Use StylePropertyShorthand instead
- */
-export const stylePropertyPaddingAll = StylePropertyShorthand.padding;
-
 /**
  * A list of {@link StyleRule}s in the context of a component.
  *
diff --git a/packages/adaptive-ui/src/core/shadow/index.ts b/packages/adaptive-ui/src/core/shadow/index.ts
index 04eacf7b..7844b8d5 100644
--- a/packages/adaptive-ui/src/core/shadow/index.ts
+++ b/packages/adaptive-ui/src/core/shadow/index.ts
@@ -44,7 +44,7 @@ export class Shadow implements CSSDirective {
         if (this.spread) {
             values.push(`${this.spread}px`);
         }
-        values.push(this.color.toColorString());
+        values.push(this.color.toString());
         return values.join(" ");
     }
 }
diff --git a/packages/adaptive-ui/src/core/token-helpers-color.spec.ts b/packages/adaptive-ui/src/core/token-helpers-color.spec.ts
index 5b0a3c85..8f81890c 100644
--- a/packages/adaptive-ui/src/core/token-helpers-color.spec.ts
+++ b/packages/adaptive-ui/src/core/token-helpers-color.spec.ts
@@ -18,7 +18,7 @@ import {
     createTokenDelta,
     createTokenMinContrast,
 } from "./token-helpers-color.js";
-import { createNonCss, createTokenNonCss } from "./token-helpers.js";
+import { createTokenNonCss } from "./token-helpers.js";
 import { InteractiveState } from "./types.js";
 
 const { expect } = chai;
@@ -97,7 +97,7 @@ describe("token-helpers-color", () => {
 
     describe("createTokenColorRecipeWithPalette", () => {
         it("should name the token from the palette and recipe names", () => {
-            const paletteToken = createNonCss<Palette>("color-test.accent.palette");
+            const paletteToken = createTokenNonCss<Palette>("color-test.accent.palette", DesignTokenType.palette);
             const recipeToken = createTokenColorRecipeForPalette<Color>(
                 "color.shared.fill.rest",
                 StyleProperty.backgroundFill,
@@ -112,7 +112,7 @@ describe("token-helpers-color", () => {
 
         it("should evaluate the recipe with the palette", () => {
             const palette = PaletteRGB.from("#808080");
-            const paletteToken = createNonCss<Palette>("color-test.neutral.palette").withDefault(palette);
+            const paletteToken = createTokenNonCss<Palette>("color-test.neutral.palette", DesignTokenType.palette).withDefault(palette);
             let received: ColorRecipePaletteParams | undefined;
             const recipeToken = createTokenColorRecipeForPalette<Color>(
                 "color.shared.test-eval",
@@ -133,7 +133,7 @@ describe("token-helpers-color", () => {
 
         it("should resolve the palette when no params are provided", () => {
             const palette = PaletteRGB.from("#808080");
-            const paletteToken = createNonCss<Palette>("color-test.neutral2.palette").withDefault(palette);
+            const paletteToken = createTokenNonCss<Palette>("color-test.neutral2.palette", DesignTokenType.palette).withDefault(palette);
             let received: ColorRecipePaletteParams | undefined;
             const recipeToken = createTokenColorRecipeForPalette<Color>(
                 "color.shared.test-no-params",
@@ -154,7 +154,7 @@ describe("token-helpers-color", () => {
         it("should allow params to override the palette", () => {
             const palette = PaletteRGB.from("#808080");
             const other = PaletteRGB.from("#0078D4");
-            const paletteToken = createNonCss<Palette>("color-test.neutral3.palette").withDefault(palette);
+            const paletteToken = createTokenNonCss<Palette>("color-test.neutral3.palette", DesignTokenType.palette).withDefault(palette);
             let received: ColorRecipePaletteParams | undefined;
             const recipeToken = createTokenColorRecipeForPalette<Color>(
                 "color.shared.test-override",
diff --git a/packages/adaptive-ui/src/core/token-helpers.spec.ts b/packages/adaptive-ui/src/core/token-helpers.spec.ts
index 584e6e1d..8b52f38a 100644
--- a/packages/adaptive-ui/src/core/token-helpers.spec.ts
+++ b/packages/adaptive-ui/src/core/token-helpers.spec.ts
@@ -4,8 +4,6 @@ import { DesignTokenRegistry, DesignTokenType, TypedCSSDesignToken, TypedDesignT
 import { Color } from "./color/color.js";
 import { StyleProperty } from "./modules/types.js";
 import {
-    create,
-    createNonCss,
     createTokenColor,
     createTokenDimension,
     createTokenFontFamily,
@@ -19,32 +17,12 @@ import {
     createTokenNumberNonStyling,
     createTokenPaint,
     createTokenRecipe,
-    createTokenSwatch,
     createTyped,
 } from "./token-helpers.js";
 
 const { expect } = chai;
 
 describe("token-helpers", () => {
-    describe("create", () => {
-        it("should create a css design token", () => {
-            const token = create<string>("helpers-test.create");
-
-            expect(token).to.be.instanceOf(CSSDesignToken);
-            expect(token.name).to.equal("helpers-test.create");
-        });
-    });
-
-    describe("createNonCss", () => {
-        it("should create a design token that is not a css design token", () => {
-            const token = createNonCss<number>("helpers-test.noncss");
-
-            expect(token).to.be.instanceOf(DesignToken);
-            expect(token).not.to.be.instanceOf(CSSDesignToken);
-            expect(token.name).to.equal("helpers-test.noncss");
-        });
-    });
-
     describe("createTyped", () => {
         it("should create a typed css design token", () => {
             const token = createTyped<string>("helpers-test.typed", DesignTokenType.dimension, StyleProperty.gap);
@@ -110,7 +88,6 @@ describe("token-helpers", () => {
             ["createTokenNumber", n => createTokenNumber(n), "number", undefined, true],
             ["createTokenNumberNonStyling", n => createTokenNumberNonStyling(n), "number", undefined, false],
             ["createTokenPaint", n => createTokenPaint(n), "paint", undefined, true],
-            ["createTokenSwatch", n => createTokenSwatch(n), "color", undefined, true],
         ];
 
         cases.forEach(([fn, factory, type, intendedFor, css]) => {
@@ -135,9 +112,6 @@ describe("token-helpers", () => {
             expect(createTokenPaint("helpers-test.paint-for", StyleProperty.foregroundFill).intendedFor).to.deep.equal([
                 StyleProperty.foregroundFill,
             ]);
-            expect(createTokenSwatch("helpers-test.swatch-for", StyleProperty.backgroundFill).intendedFor).to.deep.equal([
-                StyleProperty.backgroundFill,
-            ]);
         });
 
         it("should hold values of their type", () => {
diff --git a/packages/adaptive-ui/src/core/token-helpers.ts b/packages/adaptive-ui/src/core/token-helpers.ts
index be3ea64a..504ba297 100644
--- a/packages/adaptive-ui/src/core/token-helpers.ts
+++ b/packages/adaptive-ui/src/core/token-helpers.ts
@@ -1,19 +1,9 @@
-import { DesignToken } from "@microsoft/fast-foundation";
 import { DesignTokenType, TypedCSSDesignToken, TypedDesignToken } from "./adaptive-design-tokens.js";
 import { Color } from "./color/color.js";
 import { Paint } from "./color/paint.js";
-import { Swatch } from "./color/swatch.js";
 import { StyleProperty } from "./modules/types.js";
 import { Recipe, RecipeEvaluate } from "./recipes.js";
 
-/** @internal @deprecated Use one of the typed `createTokenX` functions instead */
-export const { create } = DesignToken;
-
-/** @internal @deprecated Use `createTokenNonCss` instead */
-export function createNonCss<T>(name: string): DesignToken<T> {
-    return DesignToken.create<T>({ name });
-}
-
 /**
  * Creates a typed design token of a custom type. Use one of `createTokenX` if exists instead.
  *
@@ -181,15 +171,3 @@ export function createTokenPaint(name: string, intendedFor?: StyleProperty | Sty
     return TypedCSSDesignToken.createTyped<Paint>(name, DesignTokenType.paint, intendedFor);
 }
 
-/**
- * Creates a DesignToken that can be used as a color in styles.
- *
- * @param name - The token name in `dotted.camelCase` casing.
- * @param intendedFor - The style properties where this token is intended to be used.
- *
- * @public
- * @deprecated Use createTokenColor or createTokenPaint
- */
-export function createTokenSwatch(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken<Swatch> {
-    return TypedCSSDesignToken.createTyped<Swatch>(name, DesignTokenType.color, intendedFor);
-}
diff --git a/packages/adaptive-ui/src/migration/appearance.ts b/packages/adaptive-ui/src/migration/appearance.ts
deleted file mode 100644
index ede73350..00000000
--- a/packages/adaptive-ui/src/migration/appearance.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { create, createTokenNumber } from "../core/token-helpers.js";
-
-/** @public @deprecated This is changing to a `dimension` type with a value like `4px` */
-export const designUnit = createTokenNumber("design-unit").withDefault(4);
-
-/** @public @deprecated Use `cornerRadiusControl` instead */
-export const controlCornerRadius = create<number>("control-corner-radius").withDefault(4);
-
-/** @public @deprecated Use `cornerRadiusLayer` instead */
-export const layerCornerRadius = create<number>("layer-corner-radius").withDefault(8);
-
-/** @public @deprecated Use `strokeThickness` instead */
-export const strokeWidth = create<number>("stroke-width").withDefault(1);
-
-/** @public @deprecated Use `focusStrokeThickness` instead */
-export const focusStrokeWidth = create<number>("focus-stroke-width").withDefault(2);
diff --git a/packages/adaptive-ui/src/migration/color.ts b/packages/adaptive-ui/src/migration/color.ts
deleted file mode 100644
index 5147756b..00000000
--- a/packages/adaptive-ui/src/migration/color.ts
+++ /dev/null
@@ -1,636 +0,0 @@
-import type { DesignTokenResolver } from "@microsoft/fast-foundation";
-import { ColorRecipeParams, InteractivePaintSet } from "../core/color/recipe.js";
-import { blackOrWhiteByContrastSet } from "../core/color/recipes/black-or-white-by-contrast-set.js";
-import { deltaSwatchSet } from "../core/color/recipes/delta-swatch-set.js";
-import { deltaSwatch } from "../core/color/recipes/delta-swatch.js";
-import { Color } from "../core/color/color.js";
-import { interactiveSwatchSetAsOverlay, swatchAsOverlay } from "../core/color/utilities/opacity.js";
-import { StyleProperty, StylePropertyShorthand } from "../core/modules/types.js";
-import {
-    createTokenColorRecipe,
-    createTokenColorRecipeValue,
-    createTokenColorSet,
-    createTokenDelta,
-    createTokenMinContrast
-} from "../core/token-helpers-color.js";
-import {
-    accentFillReadable,
-    accentFillReadableActive,
-    accentFillReadableFocus,
-    accentFillReadableHover,
-    accentFillReadableRest,
-    accentStrokeReadableActive,
-    accentStrokeReadableFocus,
-    accentStrokeReadableHover,
-    accentStrokeReadableRest,
-    colorContext,
-    fillDiscernibleActiveDelta,
-    fillDiscernibleFocusDelta,
-    fillDiscernibleHoverDelta,
-    fillDiscernibleRecipe,
-    fillDiscernibleRestDelta,
-    fillReadableActiveDelta,
-    fillReadableFocusDelta,
-    fillReadableHoverDelta,
-    fillReadableRecipe,
-    fillReadableRestDelta,
-    fillStealthActiveDelta,
-    fillStealthFocusDelta,
-    fillStealthHoverDelta,
-    fillStealthRestDelta,
-    fillSubtleActiveDelta,
-    fillSubtleFocusDelta,
-    fillSubtleHoverDelta,
-    fillSubtleRecipe,
-    fillSubtleRestDelta,
-    minContrastReadable,
-    neutralAsOverlay,
-    neutralFillDiscernibleActive,
-    neutralFillDiscernibleFocus,
-    neutralFillDiscernibleHover,
-    neutralFillDiscernibleRest,
-    neutralFillSubtleActive,
-    neutralFillSubtleFocus,
-    neutralFillSubtleHover,
-    neutralFillSubtleRest,
-    neutralStrokeReadableRest,
-    neutralStrokeStrongActive,
-    neutralStrokeStrongFocus,
-    neutralStrokeStrongHover,
-    neutralStrokeStrongRest,
-    neutralStrokeSubtleActive,
-    neutralStrokeSubtleFocus,
-    neutralStrokeSubtleHover,
-    neutralStrokeSubtleRest,
-    strokeDiscernibleActiveDelta,
-    strokeDiscernibleFocusDelta,
-    strokeDiscernibleHoverDelta,
-    strokeDiscernibleRestDelta,
-    strokeReadableActiveDelta,
-    strokeReadableFocusDelta,
-    strokeReadableHoverDelta,
-    strokeReadableRecipe,
-    strokeReadableRestDelta,
-    strokeStrongActiveDelta,
-    strokeStrongFocusDelta,
-    strokeStrongHoverDelta,
-    strokeStrongMinContrast,
-    strokeStrongRecipe,
-    strokeStrongRestDelta,
-    strokeSubtleActiveDelta,
-    strokeSubtleFocusDelta,
-    strokeSubtleHoverDelta,
-    strokeSubtleRecipe,
-    strokeSubtleRestDelta
-} from "../reference/color.js";
-import { neutralPalette } from "../reference/palette.js";
-import { InteractiveState } from "../core/types.js";
-
-/**
- * Convenience values for WCAG contrast requirements.
- *
- * @public
- * @deprecated Use `minContrastDiscernible` or `minContrastReadable` tokens instead
- */
-export const ContrastTarget = Object.freeze({
-    /**
-     * Minimum contrast for normal (&lt;= 14pt) text (AA rating).
-     */
-    NormalText: 4.5,
-
-    /**
-     * Minimum contrast for large (&gt; 14pt) text (AA rating).
-     */
-    LargeText: 3,
-} as const);
-
-// Foreground On Accent Fill Readable (previously just "Foreground On Accent")
-
-const foregroundOnAccentFillReadableName = "foreground-on-accent-fill-readable";
-
-/** @public @deprecated This functionality has been migrated to style modules */
-export const foregroundOnAccentFillReadableRecipe = createTokenColorRecipe(
-    foregroundOnAccentFillReadableName,
-    StyleProperty.foregroundFill,
-    (resolve: DesignTokenResolver): InteractivePaintSet =>
-        blackOrWhiteByContrastSet(
-            {
-                rest: resolve(accentFillReadable.rest),
-                hover: resolve(accentFillReadable.hover),
-                active: resolve(accentFillReadable.active),
-                focus: resolve(accentFillReadable.focus),
-                disabled: resolve(accentFillReadable.disabled),
-            },
-            resolve(minContrastReadable),
-            false
-        )
-);
-
-/** @public @deprecated This functionality has been migrated to style modules */
-export const foregroundOnAccentFillReadable = createTokenColorSet(foregroundOnAccentFillReadableRecipe);
-
-/** @public @deprecated This functionality has been migrated to style modules */
-export const foregroundOnAccentFillReadableRest = foregroundOnAccentFillReadable.rest;
-
-/** @public @deprecated This functionality has been migrated to style modules */
-export const foregroundOnAccentFillReadableHover = foregroundOnAccentFillReadable.hover;
-
-/** @public @deprecated This functionality has been migrated to style modules */
-export const foregroundOnAccentFillReadableActive = foregroundOnAccentFillReadable.active;
-
-/** @public @deprecated This functionality has been migrated to style modules */
-export const foregroundOnAccentFillReadableFocus = foregroundOnAccentFillReadable.focus;
-
-const accentFillReadableName = "accent-fill-readable";
-
-/** @public @deprecated Use `fillReadableRestDelta` instead. */
-export const accentFillReadableRestDelta = createTokenDelta(accentFillReadableName, InteractiveState.rest, fillReadableRestDelta);
-
-/** @public @deprecated Use `fillReadableHoverDelta` instead. */
-export const accentFillReadableHoverDelta = createTokenDelta(accentFillReadableName, InteractiveState.hover, fillReadableHoverDelta);
-
-/** @public @deprecated Use `fillReadableActiveDelta` instead. */
-export const accentFillReadableActiveDelta = createTokenDelta(accentFillReadableName, InteractiveState.active, fillReadableActiveDelta);
-
-/** @public @deprecated Use `fillReadableFocusDelta` instead. */
-export const accentFillReadableFocusDelta = createTokenDelta(accentFillReadableName, InteractiveState.focus, fillReadableFocusDelta);
-
-const accentStrokeReadableName = "accent-stroke-readable";
-
-/** @public @deprecated Use `strokeReadableRestDelta` instead. */
-export const accentStrokeReadableRestDelta = createTokenDelta(accentStrokeReadableName, InteractiveState.rest, strokeReadableRestDelta);
-
-/** @public @deprecated Use `strokeReadableHoverDelta` instead. */
-export const accentStrokeReadableHoverDelta = createTokenDelta(accentStrokeReadableName, InteractiveState.hover, strokeReadableHoverDelta);
-
-/** @public @deprecated Use `strokeReadableActiveDelta` instead. */
-export const accentStrokeReadableActiveDelta = createTokenDelta(accentStrokeReadableName, InteractiveState.active, strokeReadableActiveDelta);
-
-/** @public @deprecated Use `strokeReadableFocusDelta` instead. */
-export const accentStrokeReadableFocusDelta = createTokenDelta(accentStrokeReadableName, InteractiveState.focus, strokeReadableFocusDelta);
-
-/** @public @deprecated use "Readable" instead */
-export const accentFillRestDelta = accentFillReadableRestDelta;
-
-/** @public @deprecated use "Readable" instead */
-export const accentFillHoverDelta = accentFillReadableHoverDelta;
-
-/** @public @deprecated use "Readable" instead */
-export const accentFillActiveDelta = accentFillReadableActiveDelta;
-
-/** @public @deprecated use "Readable" instead */
-export const accentFillFocusDelta = accentFillReadableFocusDelta;
-
-/** @public @deprecated use "Readable" instead */
-export const accentFillRecipe = fillReadableRecipe;
-
-/** @public @deprecated use "Readable" instead */
-export const accentFillRest = accentFillReadableRest;
-
-/** @public @deprecated use "Readable" instead */
-export const accentFillHover = accentFillReadableHover;
-
-/** @public @deprecated use "Readable" instead */
-export const accentFillActive = accentFillReadableActive;
-
-/** @public @deprecated use "Readable" instead */
-export const accentFillFocus = accentFillReadableFocus;
-
-/** @public @deprecated use "foregroundOnAccentFillReadable" instead */
-export const foregroundOnAccentRecipe = foregroundOnAccentFillReadableRecipe;
-
-/** @public @deprecated use "foregroundOnAccentFillReadable" instead */
-export const foregroundOnAccentRest = foregroundOnAccentFillReadableRest;
-
-/** @public @deprecated use "foregroundOnAccentFillReadable" instead */
-export const foregroundOnAccentHover = foregroundOnAccentFillReadableHover;
-
-/** @public @deprecated use "foregroundOnAccentFillReadable" instead */
-export const foregroundOnAccentActive = foregroundOnAccentFillReadableActive;
-
-/** @public @deprecated use "foregroundOnAccentFillReadable" instead */
-export const foregroundOnAccentFocus = foregroundOnAccentFillReadableFocus;
-
-/** @public @deprecated use "Stroke Readable" instead */
-export const accentForegroundRestDelta = accentStrokeReadableRestDelta;
-
-/** @public @deprecated use "Stroke Readable" instead */
-export const accentForegroundHoverDelta = accentStrokeReadableHoverDelta;
-
-/** @public @deprecated use "Stroke Readable" instead */
-export const accentForegroundActiveDelta = accentStrokeReadableActiveDelta;
-
-/** @public @deprecated use "Stroke Readable" instead */
-export const accentForegroundFocusDelta = accentStrokeReadableFocusDelta;
-
-/** @public @deprecated use "Stroke Readable" instead */
-export const accentForegroundRecipe = strokeReadableRecipe;
-
-/** @public @deprecated use "Stroke Readable" instead */
-export const accentForegroundRest = accentStrokeReadableRest;
-
-/** @public @deprecated use "Stroke Readable" instead */
-export const accentForegroundHover = accentStrokeReadableHover;
-
-/** @public @deprecated use "Stroke Readable" instead */
-export const accentForegroundActive = accentStrokeReadableActive;
-
-/** @public @deprecated use "Stroke Readable" instead */
-export const accentForegroundFocus = accentStrokeReadableFocus;
-
-const neutralFillStealthName = "neutral-fill-stealth";
-
-/** @public @deprecated Use `fillStealthRestDelta` instead. */
-export const neutralFillStealthRestDelta = createTokenDelta(neutralFillStealthName, InteractiveState.rest, fillStealthRestDelta);
-
-/** @public @deprecated Use `fillStealthRestDelta` instead. */
-export const neutralFillStealthHoverDelta = createTokenDelta(neutralFillStealthName, InteractiveState.hover, fillStealthHoverDelta);
-
-/** @public @deprecated Use `fillStealthRestDelta` instead. */
-export const neutralFillStealthActiveDelta = createTokenDelta(neutralFillStealthName, InteractiveState.active, fillStealthActiveDelta);
-
-/** @public @deprecated Use `fillStealthRestDelta` instead. */
-export const neutralFillStealthFocusDelta = createTokenDelta(neutralFillStealthName, InteractiveState.focus, fillStealthFocusDelta);
-
-const neutralFillSubtleName = "neutral-fill-subtle";
-
-/** @public @deprecated Use `fillSubtleRestDelta` instead. */
-export const neutralFillSubtleRestDelta = createTokenDelta(neutralFillSubtleName, InteractiveState.rest, fillSubtleRestDelta);
-
-/** @public @deprecated Use `fillSubtleHoverDelta` instead. */
-export const neutralFillSubtleHoverDelta = createTokenDelta(neutralFillSubtleName, InteractiveState.hover, fillSubtleHoverDelta);
-
-/** @public @deprecated Use `fillSubtleActiveDelta` instead. */
-export const neutralFillSubtleActiveDelta = createTokenDelta(neutralFillSubtleName, InteractiveState.active, fillSubtleActiveDelta);
-
-/** @public @deprecated Use `fillSubtleFocusDelta` instead. */
-export const neutralFillSubtleFocusDelta = createTokenDelta(neutralFillSubtleName, InteractiveState.focus, fillSubtleFocusDelta);
-
-const neutralFillDiscernibleName = "neutral-fill-discernible";
-
-/** @public @deprecated Use `fillDiscernibleRestDelta` instead. */
-export const neutralFillDiscernibleRestDelta = createTokenDelta(neutralFillDiscernibleName, InteractiveState.rest, fillDiscernibleRestDelta);
-
-/** @public @deprecated Use `fillDiscernibleRestDelta` instead. */
-export const neutralFillDiscernibleHoverDelta = createTokenDelta(neutralFillDiscernibleName, InteractiveState.rest, fillDiscernibleHoverDelta);
-
-/** @public @deprecated Use `fillDiscernibleRestDelta` instead. */
-export const neutralFillDiscernibleActiveDelta = createTokenDelta(neutralFillDiscernibleName, InteractiveState.rest, fillDiscernibleActiveDelta);
-
-/** @public @deprecated Use `fillDiscernibleRestDelta` instead. */
-export const neutralFillDiscernibleFocusDelta = createTokenDelta(neutralFillDiscernibleName, InteractiveState.rest, fillDiscernibleFocusDelta);
-
-const neutralStrokeSubtleName = "neutral-stroke-subtle";
-
-/** @public @deprecated Use `strokeSubtleRestDelta` instead. */
-export const neutralStrokeSubtleRestDelta = createTokenDelta(neutralStrokeSubtleName, InteractiveState.rest, strokeSubtleRestDelta);
-
-/** @public @deprecated Use `strokeSubtleHoverDelta` instead. */
-export const neutralStrokeSubtleHoverDelta = createTokenDelta(neutralStrokeSubtleName, InteractiveState.hover, strokeSubtleHoverDelta);
-
-/** @public @deprecated Use `strokeSubtleActiveDelta` instead. */
-export const neutralStrokeSubtleActiveDelta = createTokenDelta(neutralStrokeSubtleName, InteractiveState.active, strokeSubtleActiveDelta);
-
-/** @public @deprecated Use `strokeSubtleFocusDelta` instead. */
-export const neutralStrokeSubtleFocusDelta = createTokenDelta(neutralStrokeSubtleName, InteractiveState.focus, strokeSubtleFocusDelta);
-
-const neutralStrokeDiscernibleName = "neutral-stroke-discernible";
-
-/** @public @deprecated Use `strokeDiscernibleRestDelta` instead. */
-export const neutralStrokeDiscernibleRestDelta = createTokenDelta(neutralStrokeDiscernibleName, InteractiveState.rest, strokeDiscernibleRestDelta);
-
-/** @public @deprecated Use `strokeDiscernibleHoverDelta` instead. */
-export const neutralStrokeDiscernibleHoverDelta = createTokenDelta(neutralStrokeDiscernibleName, InteractiveState.hover, strokeDiscernibleHoverDelta);
-
-/** @public @deprecated Use `strokeDiscernibleActiveDelta` instead. */
-export const neutralStrokeDiscernibleActiveDelta = createTokenDelta(neutralStrokeDiscernibleName, InteractiveState.active, strokeDiscernibleActiveDelta);
-
-/** @public @deprecated Use `strokeDiscernibleFocusDelta` instead. */
-export const neutralStrokeDiscernibleFocusDelta = createTokenDelta(neutralStrokeDiscernibleName, InteractiveState.focus, strokeDiscernibleFocusDelta);
-
-const neutralStrokeReadableName = "neutral-stroke-readable";
-
-/** @public @deprecated Use `strokeReadableRestDelta` instead. */
-export const neutralStrokeReadableRestDelta = createTokenDelta(neutralStrokeReadableName, InteractiveState.rest, strokeReadableRestDelta);
-
-/** @public @deprecated Use `strokeReadableHoverDelta` instead. */
-export const neutralStrokeReadableHoverDelta = createTokenDelta(neutralStrokeReadableName, InteractiveState.hover, strokeReadableHoverDelta);
-
-/** @public @deprecated Use `strokeReadableActiveDelta` instead. */
-export const neutralStrokeReadableActiveDelta = createTokenDelta(neutralStrokeReadableName, InteractiveState.active, strokeReadableActiveDelta);
-
-/** @public @deprecated Use `strokeReadableFocusDelta` instead. */
-export const neutralStrokeReadableFocusDelta = createTokenDelta(neutralStrokeReadableName, InteractiveState.focus, strokeReadableFocusDelta);
-
-const neutralStrokeStrongName = "neutral-stroke-strong";
-
-/** @public @deprecated Use `strokeStrongMinContrast` instead. */
-export const neutralStrokeStrongMinContrast = createTokenMinContrast(neutralStrokeStrongName, strokeStrongMinContrast);
-
-/** @public @deprecated Use `strokeStrongRestDelta` instead. */
-export const neutralStrokeStrongRestDelta = createTokenDelta(neutralStrokeStrongName, InteractiveState.rest, strokeStrongRestDelta);
-
-/** @public @deprecated Use `strokeStrongHoverDelta` instead. */
-export const neutralStrokeStrongHoverDelta = createTokenDelta(neutralStrokeStrongName, InteractiveState.hover, strokeStrongHoverDelta);
-
-/** @public @deprecated Use `strokeStrongActiveDelta` instead. */
-export const neutralStrokeStrongActiveDelta = createTokenDelta(neutralStrokeStrongName, InteractiveState.active, strokeStrongActiveDelta);
-
-/** @public @deprecated Use `strokeStrongFocusDelta` instead. */
-export const neutralStrokeStrongFocusDelta = createTokenDelta(neutralStrokeStrongName, InteractiveState.focus, strokeStrongFocusDelta);
-
-/** @public @deprecated Use "Stroke Readable" instead */
-export const neutralForegroundHintRecipe = strokeReadableRecipe;
-
-/** @public @deprecated Use "Stroke Readable" instead */
-export const neutralForegroundHint = neutralStrokeReadableRest;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundMinContrast = neutralStrokeStrongMinContrast;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundRestDelta = neutralStrokeStrongRestDelta;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundHoverDelta = neutralStrokeStrongHoverDelta;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundActiveDelta = neutralStrokeStrongActiveDelta;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundFocusDelta = neutralStrokeStrongFocusDelta;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundRecipe = strokeStrongRecipe;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundRest = neutralStrokeStrongRest;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundHover = neutralStrokeStrongHover;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundActive = neutralStrokeStrongActive;
-
-/** @public @deprecated Use "Stroke Strong" instead */
-export const neutralForegroundFocus = neutralStrokeStrongFocus;
-
-/** @public @deprecated use "Subtle" instead */
-export const neutralFillRestDelta = neutralFillSubtleRestDelta;
-
-/** @public @deprecated use "Subtle" instead */
-export const neutralFillHoverDelta = neutralFillSubtleHoverDelta;
-
-/** @public @deprecated use "Subtle" instead */
-export const neutralFillActiveDelta = neutralFillSubtleActiveDelta;
-
-/** @public @deprecated use "Subtle" instead */
-export const neutralFillFocusDelta = neutralFillSubtleFocusDelta;
-
-/** @public @deprecated use "Subtle" instead */
-export const neutralFillRecipe = fillSubtleRecipe;
-
-/** @public @deprecated use "Subtle" instead */
-export const neutralFillRest = neutralFillSubtleRest;
-
-/** @public @deprecated use "Subtle" instead */
-export const neutralFillHover = neutralFillSubtleHover;
-
-/** @public @deprecated use "Subtle" instead */
-export const neutralFillActive = neutralFillSubtleActive;
-
-/** @public @deprecated use "Subtle" instead */
-export const neutralFillFocus = neutralFillSubtleFocus;
-
-// Neutral Fill Input (deprecated)
-
-const neutralFillInputName = "neutral-fill-input";
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralFillInputRestDelta = createTokenDelta(neutralFillInputName, InteractiveState.rest, -1);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralFillInputHoverDelta = createTokenDelta(neutralFillInputName, InteractiveState.hover, 1);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralFillInputActiveDelta = createTokenDelta(neutralFillInputName, InteractiveState.active, -2);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralFillInputFocusDelta = createTokenDelta(neutralFillInputName, InteractiveState.focus, -2);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralFillInputRecipe = createTokenColorRecipe(
-    neutralFillInputName,
-    StyleProperty.backgroundFill,
-    (resolve: DesignTokenResolver, params?: ColorRecipeParams) =>
-        interactiveSwatchSetAsOverlay(
-            deltaSwatchSet(
-                resolve(neutralPalette),
-                params?.reference || resolve(colorContext),
-                resolve(neutralFillInputRestDelta),
-                resolve(neutralFillInputHoverDelta),
-                resolve(neutralFillInputActiveDelta),
-                resolve(neutralFillInputFocusDelta),
-                1,
-            ),
-            params?.reference as Color || resolve(colorContext),
-            resolve(neutralAsOverlay)
-        )
-);
-
-/** @deprecated */
-const neutralFillInput = createTokenColorSet(neutralFillInputRecipe);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralFillInputRest = neutralFillInput.rest;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralFillInputHover = neutralFillInput.hover;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralFillInputActive = neutralFillInput.active;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralFillInputFocus = neutralFillInput.focus;
-
-// Neutral Fill Secondary (deprecated)
-
-const neutralFillSecondaryName = "neutral-fill-secondary";
-
-/** @public @deprecated Use "Subtle" or "Discernible" instead */
-export const neutralFillSecondaryRestDelta = createTokenDelta(neutralFillSecondaryName, InteractiveState.rest, 3);
-
-/** @public @deprecated Use "Subtle" or "Discernible" instead */
-export const neutralFillSecondaryHoverDelta = createTokenDelta(neutralFillSecondaryName, InteractiveState.hover, 2);
-
-/** @public @deprecated Use "Subtle" or "Discernible" instead */
-export const neutralFillSecondaryActiveDelta = createTokenDelta(neutralFillSecondaryName, InteractiveState.active, 1);
-
-/** @public @deprecated Use "Subtle" or "Discernible" instead */
-export const neutralFillSecondaryFocusDelta = createTokenDelta(neutralFillSecondaryName, InteractiveState.focus, 3);
-
-/** @public @deprecated Use "Subtle" or "Discernible" instead */
-export const neutralFillSecondaryRecipe = createTokenColorRecipe(
-    neutralFillSecondaryName,
-    StyleProperty.backgroundFill,
-    (resolve: DesignTokenResolver, params?: ColorRecipeParams) =>
-        interactiveSwatchSetAsOverlay(
-            deltaSwatchSet(
-                resolve(neutralPalette),
-                params?.reference || resolve(colorContext),
-                resolve(neutralFillSecondaryRestDelta),
-                resolve(neutralFillSecondaryHoverDelta),
-                resolve(neutralFillSecondaryActiveDelta),
-                resolve(neutralFillSecondaryFocusDelta),
-                1,
-            ),
-            params?.reference as Color || resolve(colorContext),
-            resolve(neutralAsOverlay)
-        )
-);
-
-/** @deprecated */
-const neutralFillSecondary = createTokenColorSet(neutralFillSecondaryRecipe);
-
-/** @public @deprecated Use "Subtle" or "Discernible" instead */
-export const neutralFillSecondaryRest = neutralFillSecondary.rest;
-
-/** @public @deprecated Use "Subtle" or "Discernible" instead */
-export const neutralFillSecondaryHover = neutralFillSecondary.hover;
-
-/** @public @deprecated Use "Subtle" or "Discernible" instead */
-export const neutralFillSecondaryActive = neutralFillSecondary.active;
-
-/** @public @deprecated Use "Subtle" or "Discernible" instead */
-export const neutralFillSecondaryFocus = neutralFillSecondary.focus;
-
-/** @public @deprecated Use "Discernible instead of "Strong" */
-export const neutralFillStrongRestDelta = neutralFillDiscernibleRestDelta;
-
-/** @public @deprecated Use "Discernible instead of "Strong" */
-export const neutralFillStrongHoverDelta = neutralFillDiscernibleHoverDelta;
-
-/** @public @deprecated Use "Discernible instead of "Strong" */
-export const neutralFillStrongActiveDelta = neutralFillDiscernibleActiveDelta;
-
-/** @public @deprecated Use "Discernible instead of "Strong" */
-export const neutralFillStrongFocusDelta = neutralFillDiscernibleFocusDelta;
-
-/** @public @deprecated Use "Discernible instead of "Strong" */
-export const neutralFillStrongRecipe = fillDiscernibleRecipe;
-
-/** @public @deprecated Use "Discernible instead of "Strong" */
-export const neutralFillStrongRest = neutralFillDiscernibleRest;
-
-/** @public @deprecated Use "Discernible instead of "Strong" */
-export const neutralFillStrongHover = neutralFillDiscernibleHover;
-
-/** @public @deprecated Use "Discernible instead of "Strong" */
-export const neutralFillStrongActive = neutralFillDiscernibleActive;
-
-/** @public @deprecated Use "Discernible instead of "Strong" */
-export const neutralFillStrongFocus = neutralFillDiscernibleFocus;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeRestDelta = neutralStrokeSubtleRestDelta;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeHoverDelta = neutralStrokeSubtleHoverDelta;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeActiveDelta = neutralStrokeSubtleActiveDelta;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeFocusDelta = neutralStrokeSubtleFocusDelta;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeRecipe = strokeSubtleRecipe;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeRest = neutralStrokeSubtleRest;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeHover = neutralStrokeSubtleHover;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeActive = neutralStrokeSubtleActive;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeFocus = neutralStrokeSubtleFocus;
-
-// Neutral Stroke Divider (deprecated)
-
-const neutralStrokeDividerName = "neutral-stroke-divider";
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeDividerRestDelta = createTokenDelta(neutralStrokeDividerName, InteractiveState.rest, 4);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeDividerRecipe = createTokenColorRecipe(
-    neutralStrokeDividerName,
-    StylePropertyShorthand.borderFill,
-    (resolve: DesignTokenResolver, params?: ColorRecipeParams): Color =>
-        swatchAsOverlay(
-            deltaSwatch(
-                resolve(neutralPalette),
-                params?.reference || resolve(colorContext),
-                resolve(neutralStrokeDividerRestDelta)
-            ),
-            params?.reference as Color || resolve(colorContext),
-            resolve(neutralAsOverlay)
-        )!
-);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeDividerRest = createTokenColorRecipeValue(neutralStrokeDividerRecipe);
-
-// Neutral Stroke Input (deprecated)
-
-const neutralStrokeInputName = "neutral-stroke-input";
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeInputRestDelta = createTokenDelta(neutralStrokeInputName, InteractiveState.rest, 3);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeInputHoverDelta = createTokenDelta(neutralStrokeInputName, InteractiveState.hover, 5);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeInputActiveDelta = createTokenDelta(neutralStrokeInputName, InteractiveState.active, 5);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeInputFocusDelta = createTokenDelta(neutralStrokeInputName, InteractiveState.focus, 5);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeInputRecipe = createTokenColorRecipe(
-    neutralStrokeInputName,
-    StylePropertyShorthand.borderFill,
-    (resolve: DesignTokenResolver, params?: ColorRecipeParams) =>
-        interactiveSwatchSetAsOverlay(
-            deltaSwatchSet(
-                resolve(neutralPalette),
-                params?.reference || resolve(colorContext),
-                resolve(neutralStrokeInputRestDelta),
-                resolve(neutralStrokeInputHoverDelta),
-                resolve(neutralStrokeInputActiveDelta),
-                resolve(neutralStrokeInputFocusDelta),
-                1,
-            ),
-            params?.reference as Color || resolve(colorContext),
-            resolve(neutralAsOverlay)
-        )
-);
-
-/** @deprecated */
-const neutralStrokeInput = createTokenColorSet(neutralStrokeInputRecipe);
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeInputRest = neutralStrokeInput.rest;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeInputHover = neutralStrokeInput.hover;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeInputActive = neutralStrokeInput.active;
-
-/** @public @deprecated Use "Subtle" instead */
-export const neutralStrokeInputFocus = neutralStrokeInput.focus;
diff --git a/packages/adaptive-ui/src/migration/index.ts b/packages/adaptive-ui/src/migration/index.ts
deleted file mode 100644
index d15d5163..00000000
--- a/packages/adaptive-ui/src/migration/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./appearance.js";
-export * from "./color.js";
-export * from "./type-ramp.js";
-export * from "./type.js";
diff --git a/packages/adaptive-ui/src/migration/type-ramp.ts b/packages/adaptive-ui/src/migration/type-ramp.ts
deleted file mode 100644
index 9b77f1ea..00000000
--- a/packages/adaptive-ui/src/migration/type-ramp.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { css } from "@microsoft/fast-element";
-import {
-    fontFamily,
-    typeRampBaseFontSize,
-    typeRampBaseFontVariations,
-    typeRampBaseLineHeight,
-    typeRampMinus1FontSize,
-    typeRampMinus1FontVariations,
-    typeRampMinus1LineHeight,
-    typeRampMinus2FontSize,
-    typeRampMinus2FontVariations,
-    typeRampMinus2LineHeight,
-    typeRampPlus1FontSize,
-    typeRampPlus1FontVariations,
-    typeRampPlus1LineHeight,
-    typeRampPlus2FontSize,
-    typeRampPlus2FontVariations,
-    typeRampPlus2LineHeight,
-    typeRampPlus3FontSize,
-    typeRampPlus3FontVariations,
-    typeRampPlus3LineHeight,
-    typeRampPlus4FontSize,
-    typeRampPlus4FontVariations,
-    typeRampPlus4LineHeight,
-    typeRampPlus5FontSize,
-    typeRampPlus5FontVariations,
-    typeRampPlus5LineHeight,
-    typeRampPlus6FontSize,
-    typeRampPlus6FontVariations,
-    typeRampPlus6LineHeight,
-} from "../reference/type.js";
-
-/**
- * @public
- * @deprecated Use style modules instead.
- */
-export const typeRampBase = css.partial`
-    font-family: ${fontFamily};
-    font-size: ${typeRampBaseFontSize};
-    line-height: ${typeRampBaseLineHeight};
-    font-weight: initial;
-    font-variation-settings: ${typeRampBaseFontVariations};
-`;
-
-/**
- * @public
- * @deprecated Use style modules instead.
- */
-export const typeRampMinus1 = css.partial`
-    font-family: ${fontFamily};
-    font-size: ${typeRampMinus1FontSize};
-    line-height: ${typeRampMinus1LineHeight};
-    font-weight: initial;
-    font-variation-settings: ${typeRampMinus1FontVariations};
-`;
-
-/**
- * @public
- * @deprecated Use style modules instead.
- */
-export const typeRampMinus2 = css.partial`
-    font-family: ${fontFamily};
-    font-size: ${typeRampMinus2FontSize};
-    line-height: ${typeRampMinus2LineHeight};
-    font-weight: initial;
-    font-variation-settings: ${typeRampMinus2FontVariations};
-`;
-
-/**
- * @public
- * @deprecated Use style modules instead.
- */
-export const typeRampPlus1 = css.partial`
-    font-family: ${fontFamily};
-    font-size: ${typeRampPlus1FontSize};
-    line-height: ${typeRampPlus1LineHeight};
-    font-weight: initial;
-    font-variation-settings: ${typeRampPlus1FontVariations};
-`;
-
-/**
- * @public
- * @deprecated Use style modules instead.
- */
-export const typeRampPlus2 = css.partial`
-    font-family: ${fontFamily};
-    font-size: ${typeRampPlus2FontSize};
-    line-height: ${typeRampPlus2LineHeight};
-    font-weight: initial;
-    font-variation-settings: ${typeRampPlus2FontVariations};
-`;
-
-/**
- * @public
- * @deprecated Use style modules instead.
- */
-export const typeRampPlus3 = css.partial`
-    font-family: ${fontFamily};
-    font-size: ${typeRampPlus3FontSize};
-    line-height: ${typeRampPlus3LineHeight};
-    font-weight: initial;
-    font-variation-settings: ${typeRampPlus3FontVariations};
-`;
-
-/**
- * @public
- * @deprecated Use style modules instead.
- */
-export const typeRampPlus4 = css.partial`
-    font-family: ${fontFamily};
-    font-size: ${typeRampPlus4FontSize};
-    line-height: ${typeRampPlus4LineHeight};
-    font-weight: initial;
-    font-variation-settings: ${typeRampPlus4FontVariations};
-`;
-
-/**
- * @public
- * @deprecated Use style modules instead.
- */
-export const typeRampPlus5 = css.partial`
-    font-family: ${fontFamily};
-    font-size: ${typeRampPlus5FontSize};
-    line-height: ${typeRampPlus5LineHeight};
-    font-weight: initial;
-    font-variation-settings: ${typeRampPlus5FontVariations};
-`;
-
-/**
- * @public
- * @deprecated Use style modules instead.
- */
-export const typeRampPlus6 = css.partial`
-    font-family: ${fontFamily};
-    font-size: ${typeRampPlus6FontSize};
-    line-height: ${typeRampPlus6LineHeight};
-    font-weight: initial;
-    font-variation-settings: ${typeRampPlus6FontVariations};
-`;
diff --git a/packages/adaptive-ui/src/migration/type.ts b/packages/adaptive-ui/src/migration/type.ts
deleted file mode 100644
index 2efcc052..00000000
--- a/packages/adaptive-ui/src/migration/type.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { bodyFontFamily } from "../reference/type.js";
-
-/** @public @deprecated Renamed to `bodyFontFamily` */
-export const bodyFont = bodyFontFamily;
diff --git a/packages/adaptive-ui/src/reference/color.ts b/packages/adaptive-ui/src/reference/color.ts
index 13b42864..10758646 100644
--- a/packages/adaptive-ui/src/reference/color.ts
+++ b/packages/adaptive-ui/src/reference/color.ts
@@ -181,9 +181,6 @@ export const minContrastReadable = createTokenNonCss<number>("color.wcagContrast
 /** @public */
 export const colorContext = createTokenColor("color.context", [StyleProperty.backgroundFill, StyleProperty.foregroundFill, ...StylePropertyShorthand.borderFill]).withDefault(_white);
 
-/** @public @deprecated Use colorContext */
-export const fillColor = colorContext;
-
 /** @public */
 export const neutralAsOverlay = createTokenNonCss<boolean>("color.neutral.asOverlay", DesignTokenType.boolean).withDefault(false);
 
@@ -650,18 +647,6 @@ export const accentFillStealthRecipe = createTokenColorRecipeAccent(fillStealthR
 /** @public */
 export const accentFillStealth = createTokenColorSet(accentFillStealthRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillStealthRest = accentFillStealth.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillStealthHover = accentFillStealth.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillStealthActive = accentFillStealth.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillStealthFocus = accentFillStealth.focus;
-
 // Accent Fill Subtle
 
 /** @public */
@@ -670,18 +655,6 @@ export const accentFillSubtleRecipe = createTokenColorRecipeAccent(fillSubtleRec
 /** @public */
 export const accentFillSubtle = createTokenColorSet(accentFillSubtleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillSubtleRest = accentFillSubtle.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillSubtleHover = accentFillSubtle.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillSubtleActive = accentFillSubtle.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillSubtleFocus = accentFillSubtle.focus;
-
 // Accent Fill Subtle Inverse
 
 /** @public */
@@ -706,18 +679,6 @@ export const accentFillDiscernibleRecipe = createTokenColorRecipeAccent(fillDisc
 /** @public */
 export const accentFillDiscernible = createTokenColorSet(accentFillDiscernibleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillDiscernibleRest = accentFillDiscernible.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillDiscernibleHover = accentFillDiscernible.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillDiscernibleActive = accentFillDiscernible.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillDiscernibleFocus = accentFillDiscernible.focus;
-
 // Accent Fill Readable (previously just "Accent Fill")
 
 /** @public */
@@ -726,18 +687,6 @@ export const accentFillReadableRecipe = createTokenColorRecipeAccent(fillReadabl
 /** @public */
 export const accentFillReadable = createTokenColorSet(accentFillReadableRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillReadableRest = accentFillReadable.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillReadableHover = accentFillReadable.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillReadableActive = accentFillReadable.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentFillReadableFocus = accentFillReadable.focus;
-
 // Accent Stroke Safety
 
 /** @public */
@@ -746,18 +695,6 @@ export const accentStrokeSafetyRecipe = createTokenColorRecipeAccent(strokeSafet
 /** @public */
 export const accentStrokeSafety = createTokenColorSet(accentStrokeSafetyRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeSafetyRest = accentStrokeSafety.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeSafetyHover = accentStrokeSafety.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeSafetyActive = accentStrokeSafety.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeSafetyFocus = accentStrokeSafety.focus;
-
 // Accent Stroke Stealth
 
 /** @public */
@@ -766,18 +703,6 @@ export const accentStrokeStealthRecipe = createTokenColorRecipeAccent(strokeStea
 /** @public */
 export const accentStrokeStealth = createTokenColorSet(accentStrokeStealthRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeStealthRest = accentStrokeStealth.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeStealthHover = accentStrokeStealth.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeStealthActive = accentStrokeStealth.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeStealthFocus = accentStrokeStealth.focus;
-
 // Accent Stroke Subtle
 
 /** @public */
@@ -786,18 +711,6 @@ export const accentStrokeSubtleRecipe = createTokenColorRecipeAccent(strokeSubtl
 /** @public */
 export const accentStrokeSubtle = createTokenColorSet(accentStrokeSubtleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeSubtleRest = accentStrokeSubtle.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeSubtleHover = accentStrokeSubtle.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeSubtleActive = accentStrokeSubtle.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeSubtleFocus = accentStrokeSubtle.focus;
-
 // Accent Stroke Discernible
 
 /** @public */
@@ -806,18 +719,6 @@ export const accentStrokeDiscernibleRecipe = createTokenColorRecipeAccent(stroke
 /** @public */
 export const accentStrokeDiscernible = createTokenColorSet(accentStrokeDiscernibleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeDiscernibleRest = accentStrokeDiscernible.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeDiscernibleHover = accentStrokeDiscernible.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeDiscernibleActive = accentStrokeDiscernible.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeDiscernibleFocus = accentStrokeDiscernible.focus;
-
 // Accent Stroke Readable (previously "Foreground")
 
 /** @public */
@@ -826,18 +727,6 @@ export const accentStrokeReadableRecipe = createTokenColorRecipeAccent(strokeRea
 /** @public */
 export const accentStrokeReadable = createTokenColorSet(accentStrokeReadableRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeReadableRest = accentStrokeReadable.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeReadableHover = accentStrokeReadable.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeReadableActive = accentStrokeReadable.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeReadableFocus = accentStrokeReadable.focus;
-
 // Accent Stroke Strong
 
 /** @public */
@@ -846,18 +735,6 @@ export const accentStrokeStrongRecipe = createTokenColorRecipeAccent(strokeStron
 /** @public */
 export const accentStrokeStrong = createTokenColorSet(accentStrokeStrongRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeStrongRest = accentStrokeStrong.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeStrongHover = accentStrokeStrong.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeStrongActive = accentStrokeStrong.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const accentStrokeStrongFocus = accentStrokeStrong.focus;
-
 // Highlight Fill Stealth
 
 /** @public */
@@ -866,18 +743,6 @@ export const highlightFillStealthRecipe = createTokenColorRecipeHighlight(fillSt
 /** @public */
 export const highlightFillStealth = createTokenColorSet(highlightFillStealthRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillStealthRest = highlightFillStealth.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillStealthHover = highlightFillStealth.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillStealthActive = highlightFillStealth.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillStealthFocus = highlightFillStealth.focus;
-
 // Highlight Fill Subtle
 
 /** @public */
@@ -886,18 +751,6 @@ export const highlightFillSubtleRecipe = createTokenColorRecipeHighlight(fillSub
 /** @public */
 export const highlightFillSubtle = createTokenColorSet(highlightFillSubtleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillSubtleRest = highlightFillSubtle.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillSubtleHover = highlightFillSubtle.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillSubtleActive = highlightFillSubtle.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillSubtleFocus = highlightFillSubtle.focus;
-
 // Highlight Fill Subtle Inverse
 
 /** @public */
@@ -922,18 +775,6 @@ export const highlightFillDiscernibleRecipe = createTokenColorRecipeHighlight(fi
 /** @public */
 export const highlightFillDiscernible = createTokenColorSet(highlightFillDiscernibleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillDiscernibleRest = highlightFillDiscernible.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillDiscernibleHover = highlightFillDiscernible.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillDiscernibleActive = highlightFillDiscernible.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillDiscernibleFocus = highlightFillDiscernible.focus;
-
 // Highlight Fill Readable
 
 /** @public */
@@ -942,18 +783,6 @@ export const highlightFillReadableRecipe = createTokenColorRecipeHighlight(fillR
 /** @public */
 export const highlightFillReadable = createTokenColorSet(highlightFillReadableRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillReadableRest = highlightFillReadable.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillReadableHover = highlightFillReadable.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillReadableActive = highlightFillReadable.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightFillReadableFocus = highlightFillReadable.focus;
-
 // Highlight Stroke Safety
 
 /** @public */
@@ -962,18 +791,6 @@ export const highlightStrokeSafetyRecipe = createTokenColorRecipeHighlight(strok
 /** @public */
 export const highlightStrokeSafety = createTokenColorSet(highlightStrokeSafetyRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeSafetyRest = highlightStrokeSafety.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeSafetyHover = highlightStrokeSafety.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeSafetyActive = highlightStrokeSafety.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeSafetyFocus = highlightStrokeSafety.focus;
-
 // Highlight Stroke Stealth
 
 /** @public */
@@ -982,18 +799,6 @@ export const highlightStrokeStealthRecipe = createTokenColorRecipeHighlight(stro
 /** @public */
 export const highlightStrokeStealth = createTokenColorSet(highlightStrokeStealthRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeStealthRest = highlightStrokeStealth.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeStealthHover = highlightStrokeStealth.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeStealthActive = highlightStrokeStealth.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeStealthFocus = highlightStrokeStealth.focus;
-
 // Highlight Stroke Subtle
 
 /** @public */
@@ -1002,18 +807,6 @@ export const highlightStrokeSubtleRecipe = createTokenColorRecipeHighlight(strok
 /** @public */
 export const highlightStrokeSubtle = createTokenColorSet(highlightStrokeSubtleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeSubtleRest = highlightStrokeSubtle.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeSubtleHover = highlightStrokeSubtle.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeSubtleActive = highlightStrokeSubtle.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeSubtleFocus = highlightStrokeSubtle.focus;
-
 // Highlight Stroke Discernible
 
 /** @public */
@@ -1022,18 +815,6 @@ export const highlightStrokeDiscernibleRecipe = createTokenColorRecipeHighlight(
 /** @public */
 export const highlightStrokeDiscernible = createTokenColorSet(highlightStrokeDiscernibleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeDiscernibleRest = highlightStrokeDiscernible.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeDiscernibleHover = highlightStrokeDiscernible.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeDiscernibleActive = highlightStrokeDiscernible.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeDiscernibleFocus = highlightStrokeDiscernible.focus;
-
 // Highlight Stroke Readable
 
 /** @public */
@@ -1042,18 +823,6 @@ export const highlightStrokeReadableRecipe = createTokenColorRecipeHighlight(str
 /** @public */
 export const highlightStrokeReadable = createTokenColorSet(highlightStrokeReadableRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeReadableRest = highlightStrokeReadable.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeReadableHover = highlightStrokeReadable.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeReadableActive = highlightStrokeReadable.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeReadableFocus = highlightStrokeReadable.focus;
-
 // Highlight Stroke Strong
 
 /** @public */
@@ -1062,18 +831,6 @@ export const highlightStrokeStrongRecipe = createTokenColorRecipeHighlight(strok
 /** @public */
 export const highlightStrokeStrong = createTokenColorSet(highlightStrokeStrongRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeStrongRest = highlightStrokeStrong.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeStrongHover = highlightStrokeStrong.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeStrongActive = highlightStrokeStrong.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const highlightStrokeStrongFocus = highlightStrokeStrong.focus;
-
 // Critical Fill Stealth
 
 /** @public */
@@ -1082,18 +839,6 @@ export const criticalFillStealthRecipe = createTokenColorRecipeCritical(fillStea
 /** @public */
 export const criticalFillStealth = createTokenColorSet(criticalFillStealthRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillStealthRest = criticalFillStealth.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillStealthHover = criticalFillStealth.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillStealthActive = criticalFillStealth.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillStealthFocus = criticalFillStealth.focus;
-
 // Critical Fill Subtle
 
 /** @public */
@@ -1102,18 +847,6 @@ export const criticalFillSubtleRecipe = createTokenColorRecipeCritical(fillSubtl
 /** @public */
 export const criticalFillSubtle = createTokenColorSet(criticalFillSubtleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillSubtleRest = criticalFillSubtle.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillSubtleHover = criticalFillSubtle.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillSubtleActive = criticalFillSubtle.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillSubtleFocus = criticalFillSubtle.focus;
-
 // Critical Fill Subtle Inverse
 
 /** @public */
@@ -1138,18 +871,6 @@ export const criticalFillDiscernibleRecipe = createTokenColorRecipeCritical(fill
 /** @public */
 export const criticalFillDiscernible = createTokenColorSet(criticalFillDiscernibleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillDiscernibleRest = criticalFillDiscernible.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillDiscernibleHover = criticalFillDiscernible.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillDiscernibleActive = criticalFillDiscernible.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillDiscernibleFocus = criticalFillDiscernible.focus;
-
 // Critical Fill Readable
 
 /** @public */
@@ -1158,18 +879,6 @@ export const criticalFillReadableRecipe = createTokenColorRecipeCritical(fillRea
 /** @public */
 export const criticalFillReadable = createTokenColorSet(criticalFillReadableRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillReadableRest = criticalFillReadable.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillReadableHover = criticalFillReadable.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillReadableActive = criticalFillReadable.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalFillReadableFocus = criticalFillReadable.focus;
-
 // Critical Stroke Safety
 
 /** @public */
@@ -1178,18 +887,6 @@ export const criticalStrokeSafetyRecipe = createTokenColorRecipeCritical(strokeS
 /** @public */
 export const criticalStrokeSafety = createTokenColorSet(criticalStrokeSafetyRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeSafetyRest = criticalStrokeSafety.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeSafetyHover = criticalStrokeSafety.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeSafetyActive = criticalStrokeSafety.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeSafetyFocus = criticalStrokeSafety.focus;
-
 // Critical Stroke Stealth
 
 /** @public */
@@ -1198,18 +895,6 @@ export const criticalStrokeStealthRecipe = createTokenColorRecipeCritical(stroke
 /** @public */
 export const criticalStrokeStealth = createTokenColorSet(criticalStrokeStealthRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeStealthRest = criticalStrokeStealth.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeStealthHover = criticalStrokeStealth.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeStealthActive = criticalStrokeStealth.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeStealthFocus = criticalStrokeStealth.focus;
-
 // Critical Stroke Subtle
 
 /** @public */
@@ -1218,18 +903,6 @@ export const criticalStrokeSubtleRecipe = createTokenColorRecipeCritical(strokeS
 /** @public */
 export const criticalStrokeSubtle = createTokenColorSet(criticalStrokeSubtleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeSubtleRest = criticalStrokeSubtle.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeSubtleHover = criticalStrokeSubtle.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeSubtleActive = criticalStrokeSubtle.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeSubtleFocus = criticalStrokeSubtle.focus;
-
 // Critical Stroke Discernible
 
 /** @public */
@@ -1238,18 +911,6 @@ export const criticalStrokeDiscernibleRecipe = createTokenColorRecipeCritical(st
 /** @public */
 export const criticalStrokeDiscernible = createTokenColorSet(criticalStrokeDiscernibleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeDiscernibleRest = criticalStrokeDiscernible.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeDiscernibleHover = criticalStrokeDiscernible.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeDiscernibleActive = criticalStrokeDiscernible.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeDiscernibleFocus = criticalStrokeDiscernible.focus;
-
 // Critical Stroke Readable
 
 /** @public */
@@ -1258,18 +919,6 @@ export const criticalStrokeReadableRecipe = createTokenColorRecipeCritical(strok
 /** @public */
 export const criticalStrokeReadable = createTokenColorSet(criticalStrokeReadableRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeReadableRest = criticalStrokeReadable.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeReadableHover = criticalStrokeReadable.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeReadableActive = criticalStrokeReadable.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeReadableFocus = criticalStrokeReadable.focus;
-
 // Critical Stroke Strong
 
 /** @public */
@@ -1278,18 +927,6 @@ export const criticalStrokeStrongRecipe = createTokenColorRecipeCritical(strokeS
 /** @public */
 export const criticalStrokeStrong = createTokenColorSet(criticalStrokeStrongRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeStrongRest = criticalStrokeStrong.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeStrongHover = criticalStrokeStrong.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeStrongActive = criticalStrokeStrong.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const criticalStrokeStrongFocus = criticalStrokeStrong.focus;
-
 // Warning color recipes
 
 /** @public */
@@ -1520,18 +1157,6 @@ export const neutralFillStealthRecipe = createTokenColorRecipeNeutral(fillStealt
 /** @public */
 export const neutralFillStealth = createTokenColorSet(neutralFillStealthRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillStealthRest = neutralFillStealth.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillStealthHover = neutralFillStealth.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillStealthActive = neutralFillStealth.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillStealthFocus = neutralFillStealth.focus;
-
 // Neutral Fill Subtle (previously just "Neutral Fill")
 
 /** @public */
@@ -1540,18 +1165,6 @@ export const neutralFillSubtleRecipe = createTokenColorRecipeNeutral(fillSubtleR
 /** @public */
 export const neutralFillSubtle = createTokenColorSet(neutralFillSubtleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillSubtleRest = neutralFillSubtle.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillSubtleHover = neutralFillSubtle.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillSubtleActive = neutralFillSubtle.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillSubtleFocus = neutralFillSubtle.focus;
-
 // Neutral Fill Subtle Inverse
 
 /** @public */
@@ -1576,18 +1189,6 @@ export const neutralFillDiscernibleRecipe = createTokenColorRecipeNeutral(fillDi
 /** @public */
 export const neutralFillDiscernible = createTokenColorSet(neutralFillDiscernibleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillDiscernibleRest = neutralFillDiscernible.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillDiscernibleHover = neutralFillDiscernible.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillDiscernibleActive = neutralFillDiscernible.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillDiscernibleFocus = neutralFillDiscernible.focus;
-
 // Neutral Fill Readable
 
 /** @public */
@@ -1596,18 +1197,6 @@ export const neutralFillReadableRecipe = createTokenColorRecipeNeutral(fillReada
 /** @public */
 export const neutralFillReadable = createTokenColorSet(neutralFillReadableRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillReadableRest = neutralFillReadable.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillReadableHover = neutralFillReadable.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillReadableActive = neutralFillReadable.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralFillReadableFocus = neutralFillReadable.focus;
-
 // Neutral Stroke Safety
 
 /** @public */
@@ -1616,18 +1205,6 @@ export const neutralStrokeSafetyRecipe = createTokenColorRecipeNeutral(strokeSaf
 /** @public */
 export const neutralStrokeSafety = createTokenColorSet(neutralStrokeSafetyRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeSafetyRest = neutralStrokeSafety.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeSafetyHover = neutralStrokeSafety.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeSafetyActive = neutralStrokeSafety.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeSafetyFocus = neutralStrokeSafety.focus;
-
 // Neutral Stroke Stealth
 
 /** @public */
@@ -1636,18 +1213,6 @@ export const neutralStrokeStealthRecipe = createTokenColorRecipeNeutral(strokeSt
 /** @public */
 export const neutralStrokeStealth = createTokenColorSet(neutralStrokeStealthRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeStealthRest = neutralStrokeStealth.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeStealthHover = neutralStrokeStealth.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeStealthActive = neutralStrokeStealth.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeStealthFocus = neutralStrokeStealth.focus;
-
 // Neutral Stroke Subtle (previously just "Neutral Stroke")
 
 /** @public */
@@ -1656,18 +1221,6 @@ export const neutralStrokeSubtleRecipe = createTokenColorRecipeNeutral(strokeSub
 /** @public */
 export const neutralStrokeSubtle = createTokenColorSet(neutralStrokeSubtleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeSubtleRest = neutralStrokeSubtle.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeSubtleHover = neutralStrokeSubtle.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeSubtleActive = neutralStrokeSubtle.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeSubtleFocus = neutralStrokeSubtle.focus;
-
 // Neutral Stroke Discernible (previously "Strong")
 
 /** @public */
@@ -1676,18 +1229,6 @@ export const neutralStrokeDiscernibleRecipe = createTokenColorRecipeNeutral(stro
 /** @public */
 export const neutralStrokeDiscernible = createTokenColorSet(neutralStrokeDiscernibleRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeDiscernibleRest = neutralStrokeDiscernible.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeDiscernibleHover = neutralStrokeDiscernible.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeDiscernibleActive = neutralStrokeDiscernible.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeDiscernibleFocus = neutralStrokeDiscernible.focus;
-
 // Neutral Stroke Readable (previously "Foreground Hint")
 
 /** @public */
@@ -1696,18 +1237,6 @@ export const neutralStrokeReadableRecipe = createTokenColorRecipeNeutral(strokeR
 /** @public */
 export const neutralStrokeReadable = createTokenColorSet(neutralStrokeReadableRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeReadableRest = neutralStrokeReadable.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeReadableHover = neutralStrokeReadable.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeReadableActive = neutralStrokeReadable.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeReadableFocus = neutralStrokeReadable.focus;
-
 // Neutral Stroke Strong (previously "Foreground")
 
 /** @public */
@@ -1716,18 +1245,6 @@ export const neutralStrokeStrongRecipe = createTokenColorRecipeNeutral(strokeStr
 /** @public */
 export const neutralStrokeStrong = createTokenColorSet(neutralStrokeStrongRecipe);
 
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeStrongRest = neutralStrokeStrong.rest;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeStrongHover = neutralStrokeStrong.hover;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeStrongActive = neutralStrokeStrong.active;
-
-/** @public @deprecated Use baseColorSet.state format instead */
-export const neutralStrokeStrongFocus = neutralStrokeStrong.focus;
-
 /**
  * The {@link Palette} to use for focus stroke recipes.
  *
diff --git a/packages/adaptive-ui/src/reference/density.ts b/packages/adaptive-ui/src/reference/density.ts
index cfc97fd0..a58f913b 100644
--- a/packages/adaptive-ui/src/reference/density.ts
+++ b/packages/adaptive-ui/src/reference/density.ts
@@ -16,12 +16,6 @@ export const densityControl = new DensityPaddingAndGapTokenGroup("density.contro
  */
 export const densityControlList = new DensityPaddingAndGapTokenGroup("density.controlList", 1, 0, 1, 0, designUnit, strokeThickness);
 
-/**
- * @public
- * @deprecated Use densityControlList
- */
-export const densityItemContainer = new DensityPaddingAndGapTokenGroup("density.itemContainer", 1, 0, 1, 0, designUnit, strokeThickness);
-
 /**
  * @public
  */
diff --git a/packages/adaptive-ui/src/reference/layer.ts b/packages/adaptive-ui/src/reference/layer.ts
index ffcc40c1..9e1a80c1 100644
--- a/packages/adaptive-ui/src/reference/layer.ts
+++ b/packages/adaptive-ui/src/reference/layer.ts
@@ -48,12 +48,6 @@ const layerFillName = "color.layer.fill";
  */
 export const layerFillRestDelta = createTokenDelta(layerFillName, "layer", -2);
 
-/**
- * @public
- * @deprecated Use `layerFillRestDelta` instead.
- */
-export const layerFillDelta = layerFillRestDelta;
-
 const layerFillFixedName = `${layerFillName}.ramp`;
 
 /**
diff --git a/packages/adaptive-ui/src/reference/modules.ts b/packages/adaptive-ui/src/reference/modules.ts
index 1c9839d0..08a8e7b8 100644
--- a/packages/adaptive-ui/src/reference/modules.ts
+++ b/packages/adaptive-ui/src/reference/modules.ts
@@ -79,7 +79,7 @@ import {
     warningStrokeReadableRecipe,
     warningStrokeSafety,
 } from "./color.js";
-import { densityControl, densityControlList, densityItemContainer, densityLayer, densityText } from "./density.js";
+import { densityControl, densityControlList, densityLayer, densityText } from "./density.js";
 import { elevationCardInteractive, elevationCardRest, elevationDialog, elevationFlyout, elevationTooltip } from "./elevation.js";
 import { layerFillFixedPlus1, layerFillInteractive } from "./layer.js";
 import {
@@ -155,7 +155,7 @@ export const textDensityStyles: Styles = Styles.fromProperties(
  *
  * By default, sets the padding and gap, useful for buttons, list items, etc.
  *
- * See {@link autofillOuterDensityStyles} or {@link itemContainerDensityStyles}.
+ * See {@link autofillOuterDensityStyles} or {@link controlListDensityStyles}.
  *
  * @public
  */
@@ -173,7 +173,7 @@ export const controlDensityStyles: Styles = Styles.fromProperties(
  *
  * By default, sets the padding and gap, useful for icon-only buttons or other elements which should be square based on vertical size.
  *
- * See {@link autofillOuterDensityStyles} or {@link itemContainerDensityStyles}.
+ * See {@link autofillOuterDensityStyles} or {@link controlListDensityStyles}.
  *
  * @public
  */
@@ -240,23 +240,6 @@ export const controlListDensityStyles: Styles = Styles.fromProperties(
     "density.control-list",
 );
 
-/**
- * Style module for the density and spacing of an item container.
- *
- * By default, sets the padding and gap, useful for buttons, list items, etc.
- *
- * @public
- * @deprecated Use controlListDensityStyles
- */
-export const itemContainerDensityStyles: Styles = Styles.fromProperties(
-    {
-        paddingHorizontal: densityItemContainer.horizontalPadding,
-        paddingVertical: densityItemContainer.verticalPadding,
-        gap: densityItemContainer.horizontalGap,
-    },
-    "density.item-container",
-);
-
 /**
  * Style module for the density and spacing of a layer.
  *
@@ -1762,7 +1745,8 @@ export const StyleNameMapping = {
     "density.control-square": "controlSquareDensityStyles",
     "density.autofill-outer": "autofillOuterDensityStyles",
     "density.autofill-inner": "autofillInnerDensityStyles",
-    "density.item-container": "itemContainerDensityStyles",
+    "density.control-list": "controlListDensityStyles",
+    "density.item-container": "controlListDensityStyles",
     "density.layer": "layerDensityStyles",
     "color.accent-fill-stealth-control": "accentFillStealthControlStyles",
     "color.accent-fill-subtle-control": "accentFillSubtleControlStyles",
diff --git a/packages/adaptive-ui/src/reference/parity.snapshot.json b/packages/adaptive-ui/src/reference/parity.snapshot.json
index 3f81e811..04d60b53 100644
--- a/packages/adaptive-ui/src/reference/parity.snapshot.json
+++ b/packages/adaptive-ui/src/reference/parity.snapshot.json
@@ -21321,12 +21321,6 @@
    "density.controlList.horizontal.padding": "calc((-1 * 4px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + -2) * 4px)",
    "density.controlList.vertical.padding": "calc((-1 * 4px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + -2) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((-1 * 4px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + -2) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((-1 * 4px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21351,10 +21345,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21377,12 +21367,6 @@
    "density.controlList.horizontal.padding": "calc((0 * 4px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + -1) * 4px)",
    "density.controlList.vertical.padding": "calc((0 * 4px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + -1) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((0 * 4px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + -1) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((0 * 4px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21407,10 +21391,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21433,12 +21413,6 @@
    "density.controlList.horizontal.padding": "calc((1 * 4px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + 0) * 4px)",
    "density.controlList.vertical.padding": "calc((1 * 4px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 0) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((1 * 4px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 0) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((1 * 4px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21463,10 +21437,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21489,12 +21459,6 @@
    "density.controlList.horizontal.padding": "calc((2 * 4px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + 1) * 4px)",
    "density.controlList.vertical.padding": "calc((2 * 4px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 1) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((2 * 4px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 1) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((2 * 4px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21519,10 +21483,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21545,12 +21505,6 @@
    "density.controlList.horizontal.padding": "calc((3 * 4px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + 2) * 4px)",
    "density.controlList.vertical.padding": "calc((3 * 4px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 2) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((3 * 4px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 2) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((3 * 4px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21575,10 +21529,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21601,12 +21551,6 @@
    "density.controlList.horizontal.padding": "calc((-1 * 4px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + -2) * 4px)",
    "density.controlList.vertical.padding": "calc((-1 * 4px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + -2) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((-1 * 4px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + -2) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((-1 * 4px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21631,10 +21575,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21657,12 +21597,6 @@
    "density.controlList.horizontal.padding": "calc((0 * 4px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + -1) * 4px)",
    "density.controlList.vertical.padding": "calc((0 * 4px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + -1) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((0 * 4px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + -1) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((0 * 4px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21687,10 +21621,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21713,12 +21643,6 @@
    "density.controlList.horizontal.padding": "calc((1 * 4px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + 0) * 4px)",
    "density.controlList.vertical.padding": "calc((1 * 4px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 0) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((1 * 4px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 0) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((1 * 4px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21743,10 +21667,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21769,12 +21689,6 @@
    "density.controlList.horizontal.padding": "calc((2 * 4px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + 1) * 4px)",
    "density.controlList.vertical.padding": "calc((2 * 4px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 1) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((2 * 4px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 1) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((2 * 4px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21799,10 +21713,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21825,12 +21735,6 @@
    "density.controlList.horizontal.padding": "calc((3 * 4px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + 2) * 4px)",
    "density.controlList.vertical.padding": "calc((3 * 4px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "4px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 2) * 4px)",
-   "density.itemContainer.horizontal.padding": "calc((3 * 4px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 2) * 4px)",
-   "density.itemContainer.vertical.padding": "calc((3 * 4px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "4px",
@@ -21855,10 +21759,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21881,12 +21781,6 @@
    "density.controlList.horizontal.padding": "calc((-1 * 8px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + -2) * 8px)",
    "density.controlList.vertical.padding": "calc((-1 * 8px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + -2) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((-1 * 8px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + -2) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((-1 * 8px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -21911,10 +21805,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21937,12 +21827,6 @@
    "density.controlList.horizontal.padding": "calc((0 * 8px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + -1) * 8px)",
    "density.controlList.vertical.padding": "calc((0 * 8px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + -1) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((0 * 8px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + -1) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((0 * 8px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -21967,10 +21851,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -21993,12 +21873,6 @@
    "density.controlList.horizontal.padding": "calc((1 * 8px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + 0) * 8px)",
    "density.controlList.vertical.padding": "calc((1 * 8px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 0) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((1 * 8px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 0) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((1 * 8px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -22023,10 +21897,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -22049,12 +21919,6 @@
    "density.controlList.horizontal.padding": "calc((2 * 8px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + 1) * 8px)",
    "density.controlList.vertical.padding": "calc((2 * 8px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 1) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((2 * 8px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 1) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((2 * 8px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -22079,10 +21943,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -22105,12 +21965,6 @@
    "density.controlList.horizontal.padding": "calc((3 * 8px) - 1px)",
    "density.controlList.vertical.gap": "calc((0 + 2) * 8px)",
    "density.controlList.vertical.padding": "calc((3 * 8px) - 1px)",
-   "density.itemContainer.borderThickness": "1px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 2) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((3 * 8px) - 1px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 2) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((3 * 8px) - 1px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -22135,10 +21989,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -22161,12 +22011,6 @@
    "density.controlList.horizontal.padding": "calc((-1 * 8px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + -2) * 8px)",
    "density.controlList.vertical.padding": "calc((-1 * 8px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + -2) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((-1 * 8px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + -2) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((-1 * 8px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -22191,10 +22035,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -22217,12 +22057,6 @@
    "density.controlList.horizontal.padding": "calc((0 * 8px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + -1) * 8px)",
    "density.controlList.vertical.padding": "calc((0 * 8px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + -1) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((0 * 8px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + -1) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((0 * 8px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -22247,10 +22081,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -22273,12 +22103,6 @@
    "density.controlList.horizontal.padding": "calc((1 * 8px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + 0) * 8px)",
    "density.controlList.vertical.padding": "calc((1 * 8px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 0) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((1 * 8px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 0) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((1 * 8px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -22303,10 +22127,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -22329,12 +22149,6 @@
    "density.controlList.horizontal.padding": "calc((2 * 8px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + 1) * 8px)",
    "density.controlList.vertical.padding": "calc((2 * 8px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 1) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((2 * 8px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 1) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((2 * 8px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -22359,10 +22173,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
@@ -22385,12 +22195,6 @@
    "density.controlList.horizontal.padding": "calc((3 * 8px) - 2px)",
    "density.controlList.vertical.gap": "calc((0 + 2) * 8px)",
    "density.controlList.vertical.padding": "calc((3 * 8px) - 2px)",
-   "density.itemContainer.borderThickness": "2px",
-   "density.itemContainer.designUnit": "8px",
-   "density.itemContainer.horizontal.gap": "calc((0 + 2) * 8px)",
-   "density.itemContainer.horizontal.padding": "calc((3 * 8px) - 2px)",
-   "density.itemContainer.vertical.gap": "calc((0 + 2) * 8px)",
-   "density.itemContainer.vertical.padding": "calc((3 * 8px) - 2px)",
    "density.layer.borderThickness": "0px",
    "density.layer.cornerRadius": "8px",
    "density.layer.designUnit": "8px",
@@ -22415,10 +22219,6 @@
    "density.controlList.horizontal.paddingUnits": 1,
    "density.controlList.vertical.gapUnits": 0,
    "density.controlList.vertical.paddingUnits": 1,
-   "density.itemContainer.horizontal.gapUnits": 0,
-   "density.itemContainer.horizontal.paddingUnits": 1,
-   "density.itemContainer.vertical.gapUnits": 0,
-   "density.itemContainer.vertical.paddingUnits": 1,
    "density.layer.horizontal.gapUnits": 4,
    "density.layer.horizontal.paddingUnits": 4,
    "density.layer.vertical.gapUnits": 4,
diff --git a/packages/adaptive-ui/src/reference/parity.spec.ts b/packages/adaptive-ui/src/reference/parity.spec.ts
index 3151cd49..7a779473 100644
--- a/packages/adaptive-ui/src/reference/parity.spec.ts
+++ b/packages/adaptive-ui/src/reference/parity.spec.ts
@@ -89,7 +89,7 @@ function serialize(value: any): any {
         return value ?? null;
     }
     if (value instanceof Color) {
-        return value.toColorString();
+        return value.toString();
     }
     if (Array.isArray(value)) {
         return value.map(serialize);
@@ -98,9 +98,6 @@ function serialize(value: any): any {
         // Palette
         return (value as any).swatches.map(serialize);
     }
-    if (typeof value.toColorString === "function") {
-        return value.toColorString();
-    }
     const result: Record<string, any> = {};
     Object.keys(value).sort().forEach(key => {
         result[key] = serialize(value[key]);
diff --git a/packages/adaptive-ui/src/reference/type.ts b/packages/adaptive-ui/src/reference/type.ts
index 4b4afec8..461ca64f 100644
--- a/packages/adaptive-ui/src/reference/type.ts
+++ b/packages/adaptive-ui/src/reference/type.ts
@@ -45,34 +45,6 @@ export const bodyFontStyle = createTokenFontStyle("typography.fontStyle.body").w
 /** @public */
 export const labelFontStyle = createTokenFontStyle("typography.fontStyle.label").withDefault(fontStyle);
 
-
-/** @deprecated Use the non-"Legacy" versions of the tokens instead. @public */
-export const fontFamilyLegacy = createTokenFontFamily("typography.default.fontFamily").withDefault(fontFamily);
-
-/** @deprecated Use the non-"Legacy" versions of the tokens instead. @public */
-export const bodyFontFamilyLegacy = createTokenFontFamily("typography.body.fontFamily").withDefault(bodyFontFamily);
-
-/** @deprecated Use the non-"Legacy" versions of the tokens instead. @public */
-export const labelFontFamilyLegacy = createTokenFontFamily("typography.label.fontFamily").withDefault(labelFontFamily);
-
-/** @deprecated Use the non-"Legacy" versions of the tokens instead. @public */
-export const fontWeightLegacy = createTokenFontWeight("typography.default.fontWeight").withDefault(fontWeight);
-
-/** @deprecated Use the non-"Legacy" versions of the tokens instead. @public */
-export const bodyFontWeightLegacy = createTokenFontWeight("typography.body.fontWeight").withDefault(bodyFontWeight);
-
-/** @deprecated Use the non-"Legacy" versions of the tokens instead. @public */
-export const labelFontWeightLegacy = createTokenFontWeight("typography.label.fontWeight").withDefault(labelFontWeight);
-
-/** @deprecated Use the non-"Legacy" versions of the tokens instead. @public */
-export const fontStyleLegacy = createTokenFontStyle("typography.default.fontStyle").withDefault(fontStyle);
-
-/** @deprecated Use the non-"Legacy" versions of the tokens instead. @public */
-export const bodyFontStyleLegacy = createTokenFontStyle("typography.body.fontStyle").withDefault(bodyFontStyle);
-
-/** @deprecated Use the non-"Legacy" versions of the tokens instead. @public */
-export const labelFontStyleLegacy = createTokenFontStyle("typography.label.fontStyle").withDefault(labelFontStyle);
-
 /**
  * The complete type ramp with all positions from minus2 to plus6.
  *
@@ -121,86 +93,3 @@ export const typeRampDefault = new TypeRampTokenGroup(
  * // typeRampScale.minus1.fontSize - derived: "calc(base / multiplier)"
  * ```
  */
-
-// Export individual tokens for backward compatibility
-
-/** @deprecated Use `typeRampDefault.minus2.fontSize` directly. @public */
-export const typeRampMinus2FontSize = createTokenFontSize("typography.ramp.minus2.fontSize").withDefault(typeRampDefault.minus2.fontSize);
-
-/** @deprecated Use `typeRampDefault.minus2.lineHeight` directly. @public */
-export const typeRampMinus2LineHeight = createTokenFontSize("typography.ramp.minus2.lineHeight").withDefault(typeRampDefault.minus2.lineHeight);
-
-/** @deprecated Use `typeRampDefault.minus2.fontVariations` directly. @public */
-export const typeRampMinus2FontVariations = createTokenFontSize("typography.ramp.minus2.fontVariations").withDefault(typeRampDefault.minus2.fontVariations);
-
-/** @deprecated Use `typeRampDefault.minus1.fontSize` directly. @public */
-export const typeRampMinus1FontSize = createTokenFontSize("typography.ramp.minus1.fontSize").withDefault(typeRampDefault.minus1.fontSize);
-
-/** @deprecated Use `typeRampDefault.minus1.lineHeight` directly. @public */
-export const typeRampMinus1LineHeight = createTokenFontSize("typography.ramp.minus1.lineHeight").withDefault(typeRampDefault.minus1.lineHeight);
-
-/** @deprecated Use `typeRampDefault.minus1.fontVariations` directly. @public */
-export const typeRampMinus1FontVariations = createTokenFontSize("typography.ramp.minus1.fontVariations").withDefault(typeRampDefault.minus1.fontVariations);
-
-/** @deprecated Use `typeRampDefault.base.fontSize` directly. @public */
-export const typeRampBaseFontSize = createTokenFontSize("typography.ramp.base.fontSize").withDefault(typeRampDefault.base.fontSize);
-
-/** @deprecated Use `typeRampDefault.base.lineHeight` directly. @public */
-export const typeRampBaseLineHeight = createTokenFontSize("typography.ramp.base.lineHeight").withDefault(typeRampDefault.base.lineHeight);
-
-/** @deprecated Use `typeRampDefault.base.fontVariations` directly. @public */
-export const typeRampBaseFontVariations = createTokenFontSize("typography.ramp.base.fontVariations").withDefault(typeRampDefault.base.fontVariations);
-
-/** @deprecated Use `typeRampDefault.plus1.fontSize` directly. @public */
-export const typeRampPlus1FontSize = createTokenFontSize("typography.ramp.plus1.fontSize").withDefault(typeRampDefault.plus1.fontSize);
-
-/** @deprecated Use `typeRampDefault.plus1.lineHeight` directly. @public */
-export const typeRampPlus1LineHeight = createTokenFontSize("typography.ramp.plus1.lineHeight").withDefault(typeRampDefault.plus1.lineHeight);
-
-/** @deprecated Use `typeRampDefault.plus1.fontVariations` directly. @public */
-export const typeRampPlus1FontVariations = createTokenFontSize("typography.ramp.plus1.fontVariations").withDefault(typeRampDefault.plus1.fontVariations);
-
-/** @deprecated Use `typeRampDefault.plus2.fontSize` directly. @public */
-export const typeRampPlus2FontSize = createTokenFontSize("typography.ramp.plus2.fontSize").withDefault(typeRampDefault.plus2.fontSize);
-
-/** @deprecated Use `typeRampDefault.plus2.lineHeight` directly. @public */
-export const typeRampPlus2LineHeight = createTokenFontSize("typography.ramp.plus2.lineHeight").withDefault(typeRampDefault.plus2.lineHeight);
-
-/** @deprecated Use `typeRampDefault.plus2.fontVariations` directly. @public */
-export const typeRampPlus2FontVariations = createTokenFontSize("typography.ramp.plus2.fontVariations").withDefault(typeRampDefault.plus2.fontVariations);
-
-/** @deprecated Use `typeRampDefault.plus3.fontSize` directly. @public */
-export const typeRampPlus3FontSize = createTokenFontSize("typography.ramp.plus3.fontSize").withDefault(typeRampDefault.plus3.fontSize);
-
-/** @deprecated Use `typeRampDefault.plus3.lineHeight` directly. @public */
-export const typeRampPlus3LineHeight = createTokenFontSize("typography.ramp.plus3.lineHeight").withDefault(typeRampDefault.plus3.lineHeight);
-
-/** @deprecated Use `typeRampDefault.plus3.fontVariations` directly. @public */
-export const typeRampPlus3FontVariations = createTokenFontSize("typography.ramp.plus3.fontVariations").withDefault(typeRampDefault.plus3.fontVariations);
-
-/** @deprecated Use `typeRampDefault.plus4.fontSize` directly. @public */
-export const typeRampPlus4FontSize = createTokenFontSize("typography.ramp.plus4.fontSize").withDefault(typeRampDefault.plus4.fontSize);
-
-/** @deprecated Use `typeRampDefault.plus4.lineHeight` directly. @public */
-export const typeRampPlus4LineHeight = createTokenFontSize("typography.ramp.plus4.lineHeight").withDefault(typeRampDefault.plus4.lineHeight);
-
-/** @deprecated Use `typeRampDefault.plus4.fontVariations` directly. @public */
-export const typeRampPlus4FontVariations = createTokenFontSize("typography.ramp.plus4.fontVariations").withDefault(typeRampDefault.plus4.fontVariations);
-
-/** @deprecated Use `typeRampDefault.plus5.fontSize` directly. @public */
-export const typeRampPlus5FontSize = createTokenFontSize("typography.ramp.plus5.fontSize").withDefault(typeRampDefault.plus5.fontSize);
-
-/** @deprecated Use `typeRampDefault.plus5.lineHeight` directly. @public */
-export const typeRampPlus5LineHeight = createTokenFontSize("typography.ramp.plus5.lineHeight").withDefault(typeRampDefault.plus5.lineHeight);
-
-/** @deprecated Use `typeRampDefault.plus5.fontVariations` directly. @public */
-export const typeRampPlus5FontVariations = createTokenFontSize("typography.ramp.plus5.fontVariations").withDefault(typeRampDefault.plus5.fontVariations);
-
-/** @deprecated Use `typeRampDefault.plus6.fontSize` directly. @public */
-export const typeRampPlus6FontSize = createTokenFontSize("typography.ramp.plus6.fontSize").withDefault(typeRampDefault.plus6.fontSize);
-
-/** @deprecated Use `typeRampDefault.plus6.lineHeight` directly. @public */
-export const typeRampPlus6LineHeight = createTokenFontSize("typography.ramp.plus6.lineHeight").withDefault(typeRampDefault.plus6.lineHeight);
-
-/** @deprecated Use `typeRampDefault.plus6.fontVariations` directly. @public */
-export const typeRampPlus6FontVariations = createTokenFontSize("typography.ramp.plus6.fontVariations").withDefault(typeRampDefault.plus6.fontVariations);
diff --git a/packages/adaptive-web-components/src/components/calendar/calendar.styles.ts b/packages/adaptive-web-components/src/components/calendar/calendar.styles.ts
index bd68fe46..9affa9f9 100644
--- a/packages/adaptive-web-components/src/components/calendar/calendar.styles.ts
+++ b/packages/adaptive-web-components/src/components/calendar/calendar.styles.ts
@@ -1,11 +1,11 @@
 import {
-    accentFillReadableRest,
+    accentFillReadable,
     colorContext,
     cornerRadiusControl,
     designUnit,
-    neutralFillSubtleRest,
-    neutralStrokeReadableRest,
-    neutralStrokeStrongRest,
+    neutralFillSubtle,
+    neutralStrokeReadable,
+    neutralStrokeStrong,
     strokeThickness,
 } from "@adaptive-web/adaptive-ui/reference";
 import { css, ElementStyles } from "@microsoft/fast-element";
@@ -77,7 +77,7 @@ export const aestheticStyles: ElementStyles = css`
 
     .inactive .date,
     .inactive.disabled::before {
-        color: ${neutralStrokeReadableRest};
+        color: ${neutralStrokeReadable.rest};
     }
 
     .disabled::before {
@@ -93,8 +93,8 @@ export const aestheticStyles: ElementStyles = css`
     }
 
     .selected {
-        color: ${accentFillReadableRest};
-        border: 1px solid ${accentFillReadableRest};
+        color: ${accentFillReadable.rest};
+        border: 1px solid ${accentFillReadable.rest};
         background: ${colorContext};
     }
 
@@ -107,12 +107,12 @@ export const aestheticStyles: ElementStyles = css`
     }
 
     .today.disabled::before {
-        color: ${neutralStrokeStrongRest};
+        color: ${neutralStrokeStrong.rest};
     }
 
     .today .date {
-        color: ${neutralStrokeStrongRest};
-        background: ${neutralFillSubtleRest};
+        color: ${neutralStrokeStrong.rest};
+        background: ${neutralFillSubtle.rest};
         border-radius: 50%;
         position: relative;
     }
diff --git a/packages/adaptive-web-components/src/components/combobox/combobox.styles.modules.ts b/packages/adaptive-web-components/src/components/combobox/combobox.styles.modules.ts
index 35fcffc9..3bdbc5dd 100644
--- a/packages/adaptive-web-components/src/components/combobox/combobox.styles.modules.ts
+++ b/packages/adaptive-web-components/src/components/combobox/combobox.styles.modules.ts
@@ -2,9 +2,9 @@ import {
     StyleRules,
 } from "@adaptive-web/adaptive-ui";
 import {
+    controlListDensityStyles,
     flyoutStyles,
     inputStyles,
-    itemContainerDensityStyles,
 } from "@adaptive-web/adaptive-ui/reference";
 import { ComboboxAnatomy } from "./combobox.template.js";
 
@@ -25,7 +25,7 @@ export const styleModules: StyleRules = [
             part: ComboboxAnatomy.parts.listbox,
         },
         styles: [
-            itemContainerDensityStyles,
+            controlListDensityStyles,
             flyoutStyles,
         ],
     },
diff --git a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.styles.ts b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.styles.ts
index c9d6c050..a0bb517d 100644
--- a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.styles.ts
+++ b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.styles.ts
@@ -2,8 +2,8 @@ import { css, ElementStyles } from "@microsoft/fast-element";
 import {
     cornerRadiusControl,
     focusStrokeThickness,
-    highlightStrokeReadableRest,
-    neutralFillSubtleRest,
+    highlightStrokeReadable,
+    neutralFillSubtle,
 } from "@adaptive-web/adaptive-ui/reference";
 import { heightNumber } from "../../styles/index.js";
 
@@ -29,7 +29,7 @@ export const templateStyles: ElementStyles = css`
  */
 export const aestheticStyles: ElementStyles = css`
     :host([row-type="sticky-header"]) {
-        background-color: ${neutralFillSubtleRest};
+        background-color: ${neutralFillSubtle.rest};
     }
 
     :host([aria-selected="true"])::after {
@@ -37,7 +37,7 @@ export const aestheticStyles: ElementStyles = css`
         display: block;
         position: absolute;
         border-radius: ${cornerRadiusControl};
-        background-color: ${highlightStrokeReadableRest};
+        background-color: ${highlightStrokeReadable.rest};
         align-self: center;
         left: ${focusStrokeThickness};
         width: 3px;
diff --git a/packages/adaptive-web-components/src/components/listbox/listbox.styles.modules.ts b/packages/adaptive-web-components/src/components/listbox/listbox.styles.modules.ts
index c36ebf55..29a5c0e9 100644
--- a/packages/adaptive-web-components/src/components/listbox/listbox.styles.modules.ts
+++ b/packages/adaptive-web-components/src/components/listbox/listbox.styles.modules.ts
@@ -2,8 +2,8 @@ import {
     StyleRules,
 } from "@adaptive-web/adaptive-ui";
 import {
+    controlListDensityStyles,
     controlShapeStyles,
-    itemContainerDensityStyles,
     neutralOutlineDiscernibleControlStyles,
 } from "@adaptive-web/adaptive-ui/reference";
 
@@ -16,7 +16,7 @@ export const styleModules: StyleRules = [
     {
         styles: [
             controlShapeStyles,
-            itemContainerDensityStyles,
+            controlListDensityStyles,
             neutralOutlineDiscernibleControlStyles,
         ],
     },
diff --git a/packages/adaptive-web-components/src/components/menu-item/menu-item.styles.ts b/packages/adaptive-web-components/src/components/menu-item/menu-item.styles.ts
index b065f30a..d22b2e9b 100644
--- a/packages/adaptive-web-components/src/components/menu-item/menu-item.styles.ts
+++ b/packages/adaptive-web-components/src/components/menu-item/menu-item.styles.ts
@@ -1,6 +1,6 @@
 import {
-    neutralFillStealthActive,
-    neutralStrokeReadableRest,
+    neutralFillStealth,
+    neutralStrokeReadable,
 } from "@adaptive-web/adaptive-ui/reference";
 import { css, ElementStyles } from "@microsoft/fast-element";
 
@@ -128,10 +128,10 @@ export const aestheticStyles: ElementStyles = css`
     }
 
     :host([aria-expanded="true"]) {
-        background: ${neutralFillStealthActive};
+        background: ${neutralFillStealth.active};
     }
 
     ::slotted([slot="end"]:not(svg)) {
-        color: ${neutralStrokeReadableRest};
+        color: ${neutralStrokeReadable.rest};
     }
 `;
diff --git a/packages/adaptive-web-components/src/components/menu/menu.styles.modules.ts b/packages/adaptive-web-components/src/components/menu/menu.styles.modules.ts
index 3b8e72d1..fe3d302b 100644
--- a/packages/adaptive-web-components/src/components/menu/menu.styles.modules.ts
+++ b/packages/adaptive-web-components/src/components/menu/menu.styles.modules.ts
@@ -2,8 +2,8 @@ import {
     StyleRules,
 } from "@adaptive-web/adaptive-ui";
 import {
+    controlListDensityStyles,
     flyoutStyles,
-    itemContainerDensityStyles,
 } from "@adaptive-web/adaptive-ui/reference";
 
 /**
@@ -14,7 +14,7 @@ import {
 export const styleModules: StyleRules = [
     {
         styles: [
-            itemContainerDensityStyles,
+            controlListDensityStyles,
             flyoutStyles,
         ],
     },
diff --git a/packages/adaptive-web-components/src/components/picker-menu/picker-menu.styles.modules.ts b/packages/adaptive-web-components/src/components/picker-menu/picker-menu.styles.modules.ts
index 041a2858..c12b7ba6 100644
--- a/packages/adaptive-web-components/src/components/picker-menu/picker-menu.styles.modules.ts
+++ b/packages/adaptive-web-components/src/components/picker-menu/picker-menu.styles.modules.ts
@@ -2,8 +2,8 @@ import {
     StyleRules,
 } from "@adaptive-web/adaptive-ui";
 import {
+    controlListDensityStyles,
     flyoutStyles,
-    itemContainerDensityStyles,
 } from "@adaptive-web/adaptive-ui/reference";
 
 /**
@@ -14,7 +14,7 @@ import {
 export const styleModules: StyleRules = [
     {
         styles: [
-            itemContainerDensityStyles,
+            controlListDensityStyles,
             flyoutStyles,
         ]
     },
diff --git a/packages/adaptive-web-components/src/components/picker/picker.styles.modules.ts b/packages/adaptive-web-components/src/components/picker/picker.styles.modules.ts
index 639469e3..b59c8d81 100644
--- a/packages/adaptive-web-components/src/components/picker/picker.styles.modules.ts
+++ b/packages/adaptive-web-components/src/components/picker/picker.styles.modules.ts
@@ -2,15 +2,15 @@ import {
     StyleRules,
 } from "@adaptive-web/adaptive-ui";
 import {
+    controlListDensityStyles,
     flyoutStyles,
-    itemContainerDensityStyles,
     plainTextStyles,
 } from "@adaptive-web/adaptive-ui/reference";
 import { PickerAnatomy } from "./picker.template.js";
 
 const menuStyles = [
     plainTextStyles,
-    itemContainerDensityStyles,
+    controlListDensityStyles,
     flyoutStyles,
 ];
 
diff --git a/packages/adaptive-web-components/src/components/select/select.styles.modules.ts b/packages/adaptive-web-components/src/components/select/select.styles.modules.ts
index 9f1934bf..bf64cafa 100644
--- a/packages/adaptive-web-components/src/components/select/select.styles.modules.ts
+++ b/packages/adaptive-web-components/src/components/select/select.styles.modules.ts
@@ -2,10 +2,10 @@ import {
     StyleRules,
 } from "@adaptive-web/adaptive-ui";
 import {
+    controlListDensityStyles,
     controlShapeStyles,
     flyoutStyles,
     inputStyles,
-    itemContainerDensityStyles,
     neutralOutlineDiscernibleControlStyles,
 } from "@adaptive-web/adaptive-ui/reference";
 import { SelectAnatomy } from "./select.template.js";
@@ -26,7 +26,7 @@ export const styleModules: StyleRules = [
         target : {
             part: SelectAnatomy.parts.listbox,
         },
-        styles: itemContainerDensityStyles,
+        styles: controlListDensityStyles,
     },
     {
         target : {
diff --git a/packages/adaptive-web-components/src/components/skeleton/skeleton.styles.modules.ts b/packages/adaptive-web-components/src/components/skeleton/skeleton.styles.modules.ts
index fc8c9518..8467fc3c 100644
--- a/packages/adaptive-web-components/src/components/skeleton/skeleton.styles.modules.ts
+++ b/packages/adaptive-web-components/src/components/skeleton/skeleton.styles.modules.ts
@@ -1,5 +1,5 @@
 import { StyleRules } from "@adaptive-web/adaptive-ui";
-import { controlShapeStyles, neutralFillSubtleRest, roundShapeStyles } from "@adaptive-web/adaptive-ui/reference";
+import { controlShapeStyles, neutralFillSubtle, roundShapeStyles } from "@adaptive-web/adaptive-ui/reference";
 import { SkeletonAnatomy } from "./skeleton.template.js";
 
 /**
@@ -10,7 +10,7 @@ import { SkeletonAnatomy } from "./skeleton.template.js";
 export const styleModules: StyleRules = [
     {
         properties: {
-            backgroundFill: neutralFillSubtleRest,
+            backgroundFill: neutralFillSubtle.rest,
         },
     },
     {
diff --git a/packages/adaptive-web-components/src/components/skeleton/skeleton.styles.ts b/packages/adaptive-web-components/src/components/skeleton/skeleton.styles.ts
index bca4e18f..cdfbbcf7 100644
--- a/packages/adaptive-web-components/src/components/skeleton/skeleton.styles.ts
+++ b/packages/adaptive-web-components/src/components/skeleton/skeleton.styles.ts
@@ -1,4 +1,4 @@
-import { neutralFillSubtleHover } from "@adaptive-web/adaptive-ui/reference";
+import { neutralFillSubtle } from "@adaptive-web/adaptive-ui/reference";
 import { css, ElementStyles } from "@microsoft/fast-element";
 
 /**
@@ -52,7 +52,7 @@ export const aestheticStyles: ElementStyles = css`
         background-image: linear-gradient(
             90deg,
             transparent 0%,
-            ${neutralFillSubtleHover} 50%,
+            ${neutralFillSubtle.hover} 50%,
             transparent 100%
         );
         background-size: 0px 0px / 90% 100%;
diff --git a/packages/adaptive-web-components/src/components/tabs/tabs.styles.ts b/packages/adaptive-web-components/src/components/tabs/tabs.styles.ts
index a0952843..85dae03b 100644
--- a/packages/adaptive-web-components/src/components/tabs/tabs.styles.ts
+++ b/packages/adaptive-web-components/src/components/tabs/tabs.styles.ts
@@ -1,7 +1,7 @@
 import {
     cornerRadiusControl,
     focusStrokeThickness,
-    highlightStrokeReadableRest,
+    highlightStrokeReadable,
 } from "@adaptive-web/adaptive-ui/reference";
 import { css, ElementStyles } from "@microsoft/fast-element";
 import { heightNumber } from "../../styles/index.js";
@@ -76,7 +76,7 @@ export const aestheticStyles: ElementStyles = css`
         display: block;
         position: absolute;
         border-radius: ${cornerRadiusControl};
-        background: ${highlightStrokeReadableRest};
+        background: ${highlightStrokeReadable.rest};
     }
 
     :host([orientation="horizontal"]) ::slotted([role="tab"][aria-selected="true"])::after {
diff --git a/packages/adaptive-web-components/src/components/tree-item/tree-item.styles.ts b/packages/adaptive-web-components/src/components/tree-item/tree-item.styles.ts
index 4d1c7ab8..7d6c8eca 100644
--- a/packages/adaptive-web-components/src/components/tree-item/tree-item.styles.ts
+++ b/packages/adaptive-web-components/src/components/tree-item/tree-item.styles.ts
@@ -2,10 +2,10 @@ import { Color } from"@adaptive-web/adaptive-ui";
 import {
     cornerRadiusControl,
     focusStrokeThickness,
-    highlightStrokeReadableRest,
+    highlightStrokeReadable,
     neutralFillStealthRecipe,
+    neutralFillSubtle,
     neutralFillSubtleRecipe,
-    neutralFillSubtleRest,
 } from "@adaptive-web/adaptive-ui/reference";
 import { css, ElementStyles } from "@microsoft/fast-element";
 import { DesignToken, DesignTokenResolver } from "@microsoft/fast-foundation";
@@ -112,7 +112,7 @@ export const aestheticStyles: ElementStyles = css`
     }
 
     :host([selected]) .control {
-        background: ${neutralFillSubtleRest};
+        background: ${neutralFillSubtle.rest};
     }
 
     :host([selected]) .expand-collapse-button:hover {
@@ -128,6 +128,6 @@ export const aestheticStyles: ElementStyles = css`
         width: 3px;
         height: calc((${heightNumber} / 2) * 1px);
         border-radius: ${cornerRadiusControl};
-        background: ${highlightStrokeReadableRest};
+        background: ${highlightStrokeReadable.rest};
     }
 `;