diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
index 3d7d867f384..59c4493fc6f 100644
--- a/packages/calcite-components/calcite-preset.ts
+++ b/packages/calcite-components/calcite-preset.ts
@@ -48,12 +48,12 @@ export default {
       brand: "var(--calcite-color-brand)",
       "brand-hover": "var(--calcite-color-brand-hover)",
       "brand-press": "var(--calcite-color-brand-press)",
-      info: "var(--calcite-color-info)",
-      success: "var(--calcite-color-success)",
-      warning: "var(--calcite-color-warning)",
-      danger: "var(--calcite-color-danger)",
-      "danger-hover": "var(--calcite-color-danger-hover)",
-      "danger-press": "var(--calcite-color-danger-press)",
+      info: "var(--calcite-color-status-info)",
+      success: "var(--calcite-color-status-success)",
+      warning: "var(--calcite-color-status-warning)",
+      danger: "var(--calcite-color-status-danger)",
+      "danger-hover": "var(--calcite-color-status-danger-hover)",
+      "danger-press": "var(--calcite-color-status-danger-press)",
       background: {
         background: "var(--calcite-color-background)",
         foreground: {
@@ -159,10 +159,10 @@ export default {
       boxShadow: {
         0: "0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)",
         1: "0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)",
-        "1-lg": "var(--calcite-box-shadow-sm)",
+        "1-lg": "var(--calcite-shadow-sm)",
         "1-sm": "0 1px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 2px -1px rgba(0, 0, 0, 0.08)",
         2: "0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)",
-        "2-lg": "var(--calcite-box-shadow-md)",
+        "2-lg": "var(--calcite-shadow-md)",
         "2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)",
         "border-bottom": "0 1px 0 var(--calcite-color-border-3)",
         "border-top": "0 -1px 0 var(--calcite-color-border-3)",
@@ -269,11 +269,11 @@ export default {
           "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
         },
         ".focus-outset-danger": {
-          outline: "2px solid var(--calcite-color-danger)",
+          outline: "2px solid var(--calcite-color-status-danger)",
           "outline-offset": invert("2px", "--calcite-offset-invert-focus"),
         },
         ".focus-inset-danger": {
-          outline: "2px solid var(--calcite-color-danger)",
+          outline: "2px solid var(--calcite-color-status-danger)",
           "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
         },
         ".transition-default": {
diff --git a/packages/calcite-components/src/05-custom-theme.stories.mdx b/packages/calcite-components/src/05-custom-theme.stories.mdx
index f2e1278d4e3..6f6b9cc26a6 100644
--- a/packages/calcite-components/src/05-custom-theme.stories.mdx
+++ b/packages/calcite-components/src/05-custom-theme.stories.mdx
@@ -13,12 +13,12 @@ export const Template = () =>
       --calcite-color-brand: ${color("--calcite-color-brand", "#007ac2")};
       --calcite-color-brand-hover: ${color("--calcite-color-brand-hover", "#00619b")};
       --calcite-color-brand-press: ${color("--calcite-color-brand-press", "#004874")};
-      --calcite-color-info: ${color("--calcite-color-info", "#00619b")};
-      --calcite-color-success: ${color("--calcite-color-success", "#35ac46")};
-      --calcite-color-warning: ${color("--calcite-color-warning", "#edd317")};
-      --calcite-color-danger: ${color("--calcite-color-danger", "#d83020")};
-      --calcite-color-danger-hover: ${color("--calcite-color-danger-hover", "#a82b1e")};
-      --calcite-color-danger-press: ${color("--calcite-color-danger-press", "#7c1d13")};
+      --calcite-color-status-info: ${color("--calcite-color-status-info", "#00619b")};
+      --calcite-color-status-success: ${color("--calcite-color-status-success", "#35ac46")};
+      --calcite-color-status-warning: ${color("--calcite-color-status-warning", "#edd317")};
+      --calcite-color-status-danger: ${color("--calcite-color-status-danger", "#d83020")};
+      --calcite-color-status-danger-hover: ${color("--calcite-color-status-danger-hover", "#a82b1e")};
+      --calcite-color-status-danger-press: ${color("--calcite-color-status-danger-press", "#7c1d13")};
       --calcite-color-background: ${color("--calcite-color-background", "#f8f8f8")};
       --calcite-color-foreground-1: ${color("--calcite-color-foreground-1", "#ffffff")};
       --calcite-color-foreground-2: ${color("--calcite-color-foreground-2", "#f3f3f3")};
diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index f054f2625c8..b182f3b6cff 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -239,8 +239,8 @@ describe("calcite-alert", () => {
       page = await newE2EPage({ html: alertSnippet });
       progressBarStyles = await page.evaluate(() => {
         const alert = document.querySelector("calcite-alert");
-        alert.style.setProperty("--calcite-color-background-transparent-dismiss", "white");
-        return window.getComputedStyle(alert).getPropertyValue("--calcite-color-background-transparent-dismiss");
+        alert.style.setProperty("--calcite-alert-dismiss-progress-background", "white");
+        return window.getComputedStyle(alert).getPropertyValue("--calcite-alert-dismiss-progress-background");
       });
       expect(progressBarStyles).toEqual("white");
     });
@@ -273,7 +273,7 @@ describe("calcite-alert", () => {
         html: `
         <style>
           :root {
-            --calcite-color-background-transparent-dismiss: ${overrideStyle};
+            --calcite-color-transparent-tint: ${overrideStyle};
           }
         </style>
         <div>${alertSnippet}</div>`,
diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
index 688c61ed96b..70e9f0bdc85 100644
--- a/packages/calcite-components/src/components/alert/alert.scss
+++ b/packages/calcite-components/src/components/alert/alert.scss
@@ -10,6 +10,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
 
 :host {
   --calcite-alert-edge-distance: theme("spacing.8");
+  --calcite-alert-dismiss-progress-background: var(--calcite-color-transparent-tint);
   @apply block;
 }
 
@@ -128,7 +129,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
     block;
     block-size: 2px;
     content: "";
-    background-color: var(--calcite-color-background-transparent-dismiss);
+    background-color: var(--calcite-alert-dismiss-progress-background);
     inset-inline-end: 0;
   }
 }
@@ -257,8 +258,9 @@ $border-style: 1px solid var(--calcite-color-border-3);
   @apply text-color-link inline-flex;
 }
 
-$alertKinds: "brand" var(--calcite-color-brand), "info" var(--calcite-color-info), "danger" var(--calcite-color-danger),
-  "success" var(--calcite-color-success), "warning" var(--calcite-color-warning);
+$alertKinds: "brand" var(--calcite-color-brand), "info" var(--calcite-color-status-info),
+  "danger" var(--calcite-color-status-danger), "success" var(--calcite-color-status-success),
+  "warning" var(--calcite-color-status-warning);
 
 @each $alertKind in $alertKinds {
   $name: nth($alertKind, 1);
diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
index e4f89a2b1e1..bd321c0cab4 100644
--- a/packages/calcite-components/src/components/button/button.e2e.ts
+++ b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -481,13 +481,11 @@ describe("calcite-button", () => {
       page = await newE2EPage({ html: buttonSnippet });
       const buttonStyles = await page.evaluate(() => {
         buttonEl = document.querySelector("calcite-button");
-        buttonEl.style.setProperty("--calcite-color-background-transparent-hover", "rgba(34, 23, 200, 0.4)");
-        buttonEl.style.setProperty("--calcite-color-background-transparent-press", "rgba(1, 20, 44, 0.1");
+        buttonEl.style.setProperty("--calcite-color-transparent-hover", "rgba(34, 23, 200, 0.4)");
+        buttonEl.style.setProperty("--calcite-color-transparent-press", "rgba(1, 20, 44, 0.1");
         return {
-          hoverFocus: window
-            .getComputedStyle(buttonEl)
-            .getPropertyValue("--calcite-color-background-transparent-hover"),
-          active: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-color-background-transparent-press"),
+          hoverFocus: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-color-transparent-hover"),
+          active: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-color-transparent-press"),
         };
       });
       expect(buttonStyles.hoverFocus).toEqual("rgba(34, 23, 200, 0.4)");
@@ -534,7 +532,7 @@ describe("calcite-button", () => {
         html: `
         <style>
           :root {
-            --calcite-color-background-transparent-hover: ${overrideStyle};
+            --calcite-color-transparent-hover: ${overrideStyle};
           }
         </style>
         <div>${buttonSnippet}</div>`,
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index fc8e4ae83e7..cf5455ab8ac 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -337,17 +337,17 @@
     &:hover {
       @apply border-color-danger-hover;
       color: theme("colors.danger-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-color-danger-hover);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
     }
     &:focus {
       @apply border-color-danger;
       color: theme("colors.danger");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-danger);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
     }
     &:active {
       @apply border-color-danger-press;
       color: theme("colors.danger-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-danger-press);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
     }
     calcite-loader {
       color: theme("colors.danger");
@@ -435,17 +435,17 @@
     &:hover {
       @apply border-color-danger-hover;
       color: theme("colors.danger-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-color-danger-hover);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
     }
     &:focus {
       @apply border-color-danger;
       color: theme("colors.danger");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-danger);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
     }
     &:active {
       @apply border-color-danger-press;
       color: theme("colors.danger-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-danger-press);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
     }
     calcite-loader {
       color: theme("colors.danger");
@@ -513,10 +513,10 @@
     @apply bg-transparent;
     &:hover,
     &:focus {
-      background-color: var(--calcite-color-background-transparent-hover);
+      background-color: var(--calcite-color-transparent-hover);
     }
     &:active {
-      background-color: var(--calcite-color-background-transparent-press);
+      background-color: var(--calcite-color-transparent-press);
     }
   }
 }
diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts
index bbfc44b2ff9..7456dc0c793 100644
--- a/packages/calcite-components/src/components/chip/chip.e2e.ts
+++ b/packages/calcite-components/src/components/chip/chip.e2e.ts
@@ -194,7 +194,7 @@ describe("calcite-chip", () => {
         html: `
         <style>
           :root {
-            --calcite-color-background-transparent-hover: ${overrideStyle};
+            --calcite-color-transparent-hover: ${overrideStyle};
           }
         </style>
         <div>${chipSnippet}</div>`,
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 87398ce934d..20fd35350e6 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -165,8 +165,8 @@
   border-radius: 50%;
   align-content: center;
   justify-content: center;
-  --calcite-chip-transparent-hover: var(--calcite-color-background-transparent-hover);
-  --calcite-chip-transparent-press: var(--calcite-color-background-transparent-press);
+  --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);
+  --calcite-chip-transparent-press: var(--calcite-color-transparent-press);
   &:hover {
     background-color: var(--calcite-chip-transparent-hover);
   }
diff --git a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
index 920718a4e01..531bcc3d898 100644
--- a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
+++ b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
@@ -34,7 +34,7 @@ $size-l: 28px;
   }
 
   line {
-    stroke: var(--calcite-color-danger);
+    stroke: var(--calcite-color-status-danger);
   }
 }
 
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index f0be7d8261c..7f8ef1b5b0c 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -73,7 +73,7 @@ import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./r
 import { getItemAncestors, getItemChildren, hasActiveChildren, isSingleLike } from "./utils";
 import { XButton, CSS as XButtonCSS } from "../functional/XButton";
 import { getIconScale } from "../../utils/component";
-import { calciteSize_15 } from "@esri/calcite-design-tokens/dist/es6/core";
+import { calciteSize48 } from "@esri/calcite-design-tokens/dist/es6/core.js";
 
 interface ItemData {
   label: string;
@@ -872,7 +872,7 @@ export class Combobox
     const chipContainerElWidth = getElementWidth(chipContainerEl);
     const { fontSize, fontFamily } = getComputedStyle(textInput);
     const inputTextWidth = getTextWidth(placeholder, `${fontSize} ${fontFamily}`);
-    const inputWidth = (inputTextWidth || parseInt(calciteSize_15)) + chipContainerElGap;
+    const inputWidth = (inputTextWidth || parseInt(calciteSize48)) + chipContainerElGap;
     const allSelectedIndicatorChipElWidth = getElementWidth(allSelectedIndicatorChipEl);
     const selectedIndicatorChipElWidth = getElementWidth(selectedIndicatorChipEl);
     const largestSelectedIndicatorChipWidth = Math.max(
diff --git a/packages/calcite-components/src/components/input-message/input-message.scss b/packages/calcite-components/src/components/input-message/input-message.scss
index d60b5d517fe..71a8cd7a71b 100644
--- a/packages/calcite-components/src/components/input-message/input-message.scss
+++ b/packages/calcite-components/src/components/input-message/input-message.scss
@@ -33,15 +33,15 @@
 }
 
 :host([status="invalid"]) .calcite-input-message-icon {
-  color: var(--calcite-color-danger);
+  color: var(--calcite-color-status-danger);
 }
 
 :host([status="warning"]) .calcite-input-message-icon {
-  color: var(--calcite-color-warning);
+  color: var(--calcite-color-status-warning);
 }
 
 :host([status="valid"]) .calcite-input-message-icon {
-  color: var(--calcite-color-success);
+  color: var(--calcite-color-status-success);
 }
 
 :host([status="idle"]) .calcite-input-message-icon {
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
index 18ceecdda82..0384597c1d8 100644
--- a/packages/calcite-components/src/components/list/list.stories.ts
+++ b/packages/calcite-components/src/components/list/list.stories.ts
@@ -270,7 +270,7 @@ export const richContent = (): string => html`
         scale="s"
         icon="check"
         slot="content-end"
-        style="color: var(--calcite-color-success)"
+        style="color: var(--calcite-color-status-success)"
       ></calcite-icon>
       <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
       <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
@@ -283,7 +283,7 @@ export const richContent = (): string => html`
         scale="s"
         icon="check"
         slot="content-end"
-        style="color: var(--calcite-color-success)"
+        style="color: var(--calcite-color-status-success)"
       ></calcite-icon>
       <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
       <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
@@ -296,7 +296,7 @@ export const richContent = (): string => html`
         scale="s"
         icon="exclamation-mark-triangle"
         slot="content-end"
-        style="color: var(--calcite-color-danger)"
+        style="color: var(--calcite-color-status-danger)"
       ></calcite-icon>
       <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
       <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
@@ -313,7 +313,7 @@ export const richContentFilterEnabled = (): string => html`
         scale="s"
         icon="check"
         slot="content-end"
-        style="color: var(--calcite-color-success)"
+        style="color: var(--calcite-color-status-success)"
       ></calcite-icon>
       <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
       <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
@@ -326,7 +326,7 @@ export const richContentFilterEnabled = (): string => html`
         scale="s"
         icon="check"
         slot="content-end"
-        style="color: var(--calcite-color-success)"
+        style="color: var(--calcite-color-status-success)"
       ></calcite-icon>
       <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
       <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
@@ -339,7 +339,7 @@ export const richContentFilterEnabled = (): string => html`
         scale="s"
         icon="exclamation-mark-triangle"
         slot="content-end"
-        style="color: var(--calcite-color-danger)"
+        style="color: var(--calcite-color-status-danger)"
       ></calcite-icon>
       <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
       <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
@@ -357,7 +357,7 @@ export const darkModeRTL_TestOnly = (): string => html`
         scale="s"
         icon="check"
         slot="content-end"
-        style="color: var(--calcite-color-success)"
+        style="color: var(--calcite-color-status-success)"
       ></calcite-icon>
       <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
       <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
@@ -370,7 +370,7 @@ export const darkModeRTL_TestOnly = (): string => html`
         scale="s"
         icon="check"
         slot="content-end"
-        style="color: var(--calcite-color-success)"
+        style="color: var(--calcite-color-status-success)"
       ></calcite-icon>
       <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
       <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
@@ -383,7 +383,7 @@ export const darkModeRTL_TestOnly = (): string => html`
         scale="s"
         icon="exclamation-mark-triangle"
         slot="content-end"
-        style="color: var(--calcite-color-danger)"
+        style="color: var(--calcite-color-status-danger)"
       ></calcite-icon>
       <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
       <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
@@ -438,7 +438,7 @@ export const closableListItems_TestOnly = (): string => html`<calcite-list
   filter-enabled
 >
   <calcite-list-item closable label="basic" value="basic" description="hello world">
-    <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
     <calcite-action
       appearance="transparent"
       icon="ellipsis"
@@ -448,10 +448,10 @@ export const closableListItems_TestOnly = (): string => html`<calcite-list
     ></calcite-action>
   </calcite-list-item>
   <calcite-list-item closable disabled label="disabled" value="disabled" description="hello world">
-    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
   <calcite-list-item closed closable label="closed" value="closed" description="hello world">
-    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
 </calcite-list>`;
 
@@ -675,16 +675,16 @@ export const filterActions_TestOnly = (): string => html`<calcite-list
     slot="filter-actions-end"
   ></calcite-action>
   <calcite-list-item label="test1" value="test1" description="hello world 1">
-    <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
   <calcite-list-item label="test2" value="test2" description="hello world 2">
-    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
   <calcite-list-item label="test3" value="test3" description="hello world 3">
-    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
   <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
-    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
 </calcite-list>`;
 
@@ -723,16 +723,16 @@ export const sortableList_TestOnly = (): string => html`<calcite-list
     slot="filter-actions-end"
   ></calcite-action>
   <calcite-list-item label="test1" value="test1" description="hello world 1">
-    <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
   <calcite-list-item label="test2" value="test2" description="hello world 2">
-    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
   <calcite-list-item label="test3" value="test3" description="hello world 3">
-    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
   <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
-    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-color-status-success)"></calcite-icon>
   </calcite-list-item>
   <calcite-list-item drag-disabled label="test5" value="test5" description="hello world 55">
     <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
diff --git a/packages/calcite-components/src/components/list/usage/Advanced.md b/packages/calcite-components/src/components/list/usage/Advanced.md
index 8d9bbf676dc..8a9365ad85e 100644
--- a/packages/calcite-components/src/components/list/usage/Advanced.md
+++ b/packages/calcite-components/src/components/list/usage/Advanced.md
@@ -7,7 +7,12 @@
     <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
     <calcite-icon scale="l" icon="layer" slot="content-start"></calcite-icon>
     <calcite-avatar scale="l" slot="content-start" thumbnail="https://placedog.net/300/300"></calcite-avatar>
-    <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon
+      scale="s"
+      icon="check"
+      slot="content-end"
+      style="color: var(--calcite-color-status-success)"
+    ></calcite-icon>
     <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
     <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
   </calcite-list-item>
@@ -18,7 +23,12 @@
     <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
     <calcite-icon scale="l" icon="layer" slot="content-start"></calcite-icon>
     <calcite-avatar scale="l" slot="content-start" thumbnail="https://placekitten.com/g/300/300"></calcite-avatar>
-    <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-color-success)"></calcite-icon>
+    <calcite-icon
+      scale="s"
+      icon="check"
+      slot="content-end"
+      style="color: var(--calcite-color-status-success)"
+    ></calcite-icon>
     <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
     <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
   </calcite-list-item>
@@ -30,7 +40,7 @@
       scale="s"
       icon="exclamation-mark-triangle"
       slot="content-end"
-      style="color: var(--calcite-color-danger)"
+      style="color: var(--calcite-color-status-danger)"
     ></calcite-icon>
     <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
     <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
diff --git a/packages/calcite-components/src/components/meter/meter.scss b/packages/calcite-components/src/components/meter/meter.scss
index 217da0f8cb7..562e8486cee 100644
--- a/packages/calcite-components/src/components/meter/meter.scss
+++ b/packages/calcite-components/src/components/meter/meter.scss
@@ -88,15 +88,15 @@
 }
 
 .fill-danger {
-  background-color: var(--calcite-color-danger);
+  background-color: var(--calcite-color-status-danger);
 }
 
 .fill-success {
-  background-color: var(--calcite-color-success);
+  background-color: var(--calcite-color-status-success);
 }
 
 .fill-warning {
-  background-color: var(--calcite-color-warning);
+  background-color: var(--calcite-color-status-warning);
 }
 
 .solid .fill {
@@ -108,13 +108,13 @@
 }
 
 .solid .fill-danger {
-  box-shadow: 0 0 0 1px var(--calcite-color-danger);
+  box-shadow: 0 0 0 1px var(--calcite-color-status-danger);
 }
 
 .solid .fill-success {
-  box-shadow: 0 0 0 1px var(--calcite-color-success);
+  box-shadow: 0 0 0 1px var(--calcite-color-status-success);
 }
 
 .solid .fill-warning {
-  box-shadow: 0 0 0 1px var(--calcite-color-warning);
+  box-shadow: 0 0 0 1px var(--calcite-color-status-warning);
 }
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
index b829240ee57..1f18e3ed6df 100644
--- a/packages/calcite-components/src/components/modal/modal.scss
+++ b/packages/calcite-components/src/components/modal/modal.scss
@@ -66,7 +66,7 @@
 }
 
 .scrim {
-  --calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-color-background-transparent-scrim));
+  --calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));
   @apply fixed inset-0 flex overflow-y-hidden;
 }
 
diff --git a/packages/calcite-components/src/components/notice/notice.scss b/packages/calcite-components/src/components/notice/notice.scss
index 674deca70a9..a478856458a 100644
--- a/packages/calcite-components/src/components/notice/notice.scss
+++ b/packages/calcite-components/src/components/notice/notice.scss
@@ -163,8 +163,9 @@
   @apply flex self-stretch;
 }
 
-$noticeKinds: "brand" var(--calcite-color-brand), "info" var(--calcite-color-info), "danger" var(--calcite-color-danger),
-  "success" var(--calcite-color-success), "warning" var(--calcite-color-warning);
+$noticeKinds: "brand" var(--calcite-color-brand), "info" var(--calcite-color-status-info),
+  "danger" var(--calcite-color-status-danger), "success" var(--calcite-color-status-success),
+  "warning" var(--calcite-color-status-warning);
 
 @each $noticeKind in $noticeKinds {
   $name: nth($noticeKind, 1);
diff --git a/packages/calcite-components/src/components/scrim/scrim.e2e.ts b/packages/calcite-components/src/components/scrim/scrim.e2e.ts
index 85fce34760b..27e986e3e62 100644
--- a/packages/calcite-components/src/components/scrim/scrim.e2e.ts
+++ b/packages/calcite-components/src/components/scrim/scrim.e2e.ts
@@ -269,7 +269,7 @@ describe("calcite-scrim", () => {
         html: `
         <style>
           :root {
-            --calcite-color-background-transparent-scrim: ${overrideStyle};
+            --calcite-color-transparent-scrim: ${overrideStyle};
           }
         </style>
         ${scrimSnippet}
diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss
index e52e6f9bce2..10620e5b889 100644
--- a/packages/calcite-components/src/components/scrim/scrim.scss
+++ b/packages/calcite-components/src/components/scrim/scrim.scss
@@ -6,7 +6,7 @@
  * @prop --calcite-scrim-background: Specifies the background color of the scrim.
  */
 :host {
-  --calcite-scrim-background: var(--calcite-color-background-transparent-scrim);
+  --calcite-scrim-background: var(--calcite-color-transparent-scrim);
 }
 
 :host {
@@ -39,7 +39,7 @@
   justify-center
   overflow-hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-scrim-background, var(--calcite-color-background-transparent-scrim));
+  background-color: var(--calcite-scrim-background, var(--calcite-color-transparent-scrim));
 }
 
 .content {
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index b1a926d3958..c5fa6714d19 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -101,7 +101,7 @@
   }
 
   .step-bar--error {
-    fill: var(--calcite-color-danger);
+    fill: var(--calcite-color-status-danger);
   }
 
   .step-bar--disabled {
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss
index 0592dd9e5b5..ca3a7f3feed 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.scss
+++ b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -226,7 +226,7 @@
 
 :host([bordered]:hover) {
   .container {
-    background-color: var(--calcite-color-background-transparent-hover);
+    background-color: var(--calcite-color-transparent-hover);
   }
 }
 
diff --git a/packages/calcite-components/src/demos/chip-group.html b/packages/calcite-components/src/demos/chip-group.html
index 7b87a55d06b..07aeeae3ad1 100644
--- a/packages/calcite-components/src/demos/chip-group.html
+++ b/packages/calcite-components/src/demos/chip-group.html
@@ -52,23 +52,23 @@
       }
 
       .themed-children calcite-chip:first-of-type {
-        --calcite-color-brand: var(--calcite-color-danger);
-        --calcite-color-text-1: var(--calcite-color-danger);
-        --calcite-color-border-1: var(--calcite-color-danger);
+        --calcite-color-brand: var(--calcite-color-status-danger);
+        --calcite-color-text-1: var(--calcite-color-status-danger);
+        --calcite-color-border-1: var(--calcite-color-status-danger);
         --calcite-color-foreground-1: rgba(255, 0, 0, 0.15);
       }
 
       .themed-children calcite-chip:nth-of-type(2) {
-        --calcite-color-brand: var(--calcite-color-success);
-        --calcite-color-text-1: var(--calcite-color-success);
-        --calcite-color-border-1: var(--calcite-color-success);
+        --calcite-color-brand: var(--calcite-color-status-success);
+        --calcite-color-text-1: var(--calcite-color-status-success);
+        --calcite-color-border-1: var(--calcite-color-status-success);
         --calcite-color-foreground-1: rgba(0, 128, 0, 0.15);
       }
 
       .themed-children calcite-chip:nth-of-type(3) {
-        --calcite-color-brand: var(--calcite-color-info);
-        --calcite-color-text-1: var(--calcite-color-info);
-        --calcite-color-border-1: var(--calcite-color-info);
+        --calcite-color-brand: var(--calcite-color-status-info);
+        --calcite-color-text-1: var(--calcite-color-status-info);
+        --calcite-color-border-1: var(--calcite-color-status-info);
         --calcite-color-foreground-1: rgba(0, 0, 255, 0.15);
       }
 
@@ -100,20 +100,20 @@
 
       .themed-children-card calcite-chip:first-of-type {
         --calcite-color-foreground-2: rgb(222 239 220);
-        --calcite-color-text-1: var(--calcite-color-success);
-        --calcite-ui-icon-color: var(--calcite-color-success);
+        --calcite-color-text-1: var(--calcite-color-status-success);
+        --calcite-ui-icon-color: var(--calcite-color-status-success);
       }
 
       .themed-children-card calcite-chip:nth-of-type(2) {
         --calcite-color-foreground-2: rgb(221 238 249);
-        --calcite-color-text-1: var(--calcite-color-info);
-        --calcite-ui-icon-color: var(--calcite-color-info);
+        --calcite-color-text-1: var(--calcite-color-status-info);
+        --calcite-ui-icon-color: var(--calcite-color-status-info);
       }
 
       .themed-children-card calcite-chip:nth-of-type(3) {
         --calcite-color-foreground-2: rgb(221 238 249);
-        --calcite-color-text-1: var(--calcite-color-info);
-        --calcite-ui-icon-color: var(--calcite-color-info);
+        --calcite-color-text-1: var(--calcite-color-status-info);
+        --calcite-ui-icon-color: var(--calcite-color-status-info);
       }
 
       hr {
diff --git a/packages/calcite-components/src/demos/chip.html b/packages/calcite-components/src/demos/chip.html
index 2c2312ab133..d7705211a0d 100644
--- a/packages/calcite-components/src/demos/chip.html
+++ b/packages/calcite-components/src/demos/chip.html
@@ -47,23 +47,23 @@
       /* theming override examples */
 
       .themed-children calcite-chip:first-of-type {
-        --calcite-color-brand: var(--calcite-color-danger);
-        --calcite-color-text-1: var(--calcite-color-danger);
-        --calcite-color-border-1: var(--calcite-color-danger);
+        --calcite-color-brand: var(--calcite-color-status-danger);
+        --calcite-color-text-1: var(--calcite-color-status-danger);
+        --calcite-color-border-1: var(--calcite-color-status-danger);
         --calcite-color-foreground-1: rgba(255, 0, 0, 0.15);
       }
 
       .themed-children calcite-chip:nth-of-type(2) {
-        --calcite-color-brand: var(--calcite-color-success);
-        --calcite-color-text-1: var(--calcite-color-success);
-        --calcite-color-border-1: var(--calcite-color-success);
+        --calcite-color-brand: var(--calcite-color-status-success);
+        --calcite-color-text-1: var(--calcite-color-status-success);
+        --calcite-color-border-1: var(--calcite-color-status-success);
         --calcite-color-foreground-1: rgba(0, 128, 0, 0.15);
       }
 
       .themed-children calcite-chip:nth-of-type(3) {
-        --calcite-color-brand: var(--calcite-color-info);
-        --calcite-color-text-1: var(--calcite-color-info);
-        --calcite-color-border-1: var(--calcite-color-info);
+        --calcite-color-brand: var(--calcite-color-status-info);
+        --calcite-color-text-1: var(--calcite-color-status-info);
+        --calcite-color-border-1: var(--calcite-color-status-info);
         --calcite-color-foreground-1: rgba(0, 0, 255, 0.15);
       }
 
@@ -97,20 +97,20 @@
 
       .themed-children-card calcite-chip:first-of-type {
         --calcite-color-foreground-2: rgb(222 239 220);
-        --calcite-color-text-1: var(--calcite-color-success);
-        --calcite-ui-icon-color: var(--calcite-color-success);
+        --calcite-color-text-1: var(--calcite-color-status-success);
+        --calcite-ui-icon-color: var(--calcite-color-status-success);
       }
 
       .themed-children-card calcite-chip:nth-of-type(2) {
         --calcite-color-foreground-2: rgb(221 238 249);
-        --calcite-color-text-1: var(--calcite-color-info);
-        --calcite-ui-icon-color: var(--calcite-color-info);
+        --calcite-color-text-1: var(--calcite-color-status-info);
+        --calcite-ui-icon-color: var(--calcite-color-status-info);
       }
 
       .themed-children-card calcite-chip:nth-of-type(3) {
         --calcite-color-foreground-2: rgb(221 238 249);
-        --calcite-color-text-1: var(--calcite-color-info);
-        --calcite-ui-icon-color: var(--calcite-color-info);
+        --calcite-color-text-1: var(--calcite-color-status-info);
+        --calcite-ui-icon-color: var(--calcite-color-status-info);
       }
     </style>
     <script src="_assets/head.js"></script>
diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
index 3e7125dccb7..931fdaf82d6 100644
--- a/packages/calcite-components/src/demos/list.html
+++ b/packages/calcite-components/src/demos/list.html
@@ -71,30 +71,30 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon
                 icon="banana"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test2" value="test2" description="hello world 2">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
-                --calcite-color-success
+                style="color: var(--calcite-color-status-success)"
+                --calcite-color-status-success
               ></calcite-icon> </calcite-list-item
-            >--calcite-color-success
+            >--calcite-color-status-success
             <calcite-list-item label="test3" value="test3" description="hello world 3">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
-                --calcite-color-success
+                style="color: var(--calcite-color-status-success)"
+                --calcite-color-status-success
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
           </calcite-list>
@@ -104,52 +104,50 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
       <!-- closable list -->
       <div class="parent">
         <div class="child right-aligned-text">closable list</div>
-        --calcite-color-success--calcite-color-success
-
         <div class="child">
           <calcite-list selection-mode="single" label="test" filter-enabled>
             <calcite-list-item closable label="test1" value="test1" description="hello world 1">
               <calcite-icon
                 icon="banana"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
               <calcite-action
                 appearance="transparent"
                 icon="ellipsis"
                 text="menu"
-                --calcite-color-success
+                --calcite-color-status-success
                 label="menu"
                 slot="actions-end"
-                --calcite-color-success
+                --calcite-color-status-success
               ></calcite-action> </calcite-list-item
-            >--calcite-color-success
+            >--calcite-color-status-success
             <calcite-list-item closable label="test2" value="test2" description="hello world 2">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon> </calcite-list-item
-            >--calcite-color-success
+            >--calcite-color-status-success
             <calcite-list-item closable label="test3" value="test3" description="hello world 3">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item closable disabled label="test4" value="test4" description="hello world 4">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item closed closable disabled label="test5" value="test5" description="hello world 5">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
           </calcite-list>
@@ -166,28 +164,28 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon
                 icon="banana"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item disabled label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
           </calcite-list>
@@ -204,28 +202,28 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon
                 icon="banana"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item disabled label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
           </calcite-list>
@@ -242,28 +240,28 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon
                 icon="banana"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item disabled label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
           </calcite-list>
@@ -279,28 +277,28 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon
                 icon="banana"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" selected description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item disabled label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
           </calcite-list>
@@ -317,28 +315,28 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon
                 icon="banana"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" selected description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item disabled label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
           </calcite-list>
@@ -355,28 +353,28 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon
                 icon="banana"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item disabled label="test" description="hello world">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
           </calcite-list>
@@ -409,7 +407,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
                 scale="s"
                 icon="check-circle"
                 slot="content-end"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               >
               </calcite-icon>
               <calcite-action appearance="transparent" icon="ellipsis" text="menu" label="menu" slot="actions-end">
@@ -437,7 +435,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
                 scale="s"
                 icon="check-circle"
                 slot="content-end"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               >
               </calcite-icon>
               <calcite-action appearance="transparent" icon="ellipsis" text="label" label="menu" slot="actions-end">
@@ -465,7 +463,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
                 scale="s"
                 icon="exclamation-mark-triangle"
                 slot="content-end"
-                style="color: var(--calcite-color-danger)"
+                style="color: var(--calcite-color-status-danger)"
               ></calcite-icon>
               <calcite-action appearance="transparent" icon="ellipsis" text="menu" label="menu" slot="actions-end">
               </calcite-action>
@@ -517,16 +515,16 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon
                 icon="embark"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
               <calcite-list-item heading="test" description="hello world">
                 <calcite-icon
                   icon="embark"
                   slot="content-start"
-                  style="color: var(--calcite-color-success)"
+                  style="color: var(--calcite-color-status-success)"
                 ></calcite-icon>
                 <calcite-list-item heading="test" description="hello world">
-                  <calcite-icon icon="embark" slot="content-start" style="color: var(--calcite-color-success)">
+                  <calcite-icon icon="embark" slot="content-start" style="color: var(--calcite-color-status-success)">
                   </calcite-icon>
                 </calcite-list-item>
               </calcite-list-item>
@@ -536,19 +534,19 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
                 <calcite-icon
                   icon="embark"
                   slot="content-start"
-                  style="color: var(--calcite-color-success)"
+                  style="color: var(--calcite-color-status-success)"
                 ></calcite-icon>
               </calcite-list-item>
               <calcite-list-item heading="test" description="hello world">
                 <calcite-icon
                   icon="banana"
                   slot="content-start"
-                  style="color: var(--calcite-color-success)"
+                  style="color: var(--calcite-color-status-success)"
                 ></calcite-icon>
               </calcite-list-item>
               <calcite-list-item-group heading="My Nested Group">
                 <calcite-list-item heading="test" description="hello world">
-                  <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-color-success)">
+                  <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-color-status-success)">
                   </calcite-icon>
                 </calcite-list-item>
               </calcite-list-item-group>
@@ -765,28 +763,28 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon
                 icon="banana"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test2" value="test2" description="hello world 2">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item label="test3" value="test3" description="hello world 3">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
-                style="color: var(--calcite-color-success)"
+                style="color: var(--calcite-color-status-success)"
               ></calcite-icon>
             </calcite-list-item>
             <calcite-list-item drag-disabled label="test5" value="test5" description="hello world 5">
diff --git a/packages/calcite-components/src/demos/meter.html b/packages/calcite-components/src/demos/meter.html
index e1bd554d671..d74a61aad9d 100644
--- a/packages/calcite-components/src/demos/meter.html
+++ b/packages/calcite-components/src/demos/meter.html
@@ -25,9 +25,9 @@
 
       .themed-example {
         --calcite-color-brand: orange;
-        --calcite-color-success: #8ed1c8;
-        --calcite-color-warning: #8ebad1;
-        --calcite-color-danger: #35c4b1;
+        --calcite-color-status-success: #8ed1c8;
+        --calcite-color-status-warning: #8ebad1;
+        --calcite-color-status-danger: #35c4b1;
       }
     </style>
     <script src="./_assets/head.js"></script>
diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html
index 9c9ce3eb661..131372d4d6a 100644
--- a/packages/calcite-components/src/demos/table.html
+++ b/packages/calcite-components/src/demos/table.html
@@ -38,12 +38,12 @@
         --calcite-color-foreground-1: #fffaed;
         --calcite-color-foreground-2: #fae9c8;
         --calcite-color-foreground-3: #fce5b6;
-        --calcite-color-info: #267121;
-        --calcite-color-success: #308e29;
-        --calcite-color-warning: #f1c21b;
-        --calcite-color-danger: #d83020;
-        --calcite-color-danger-hover: #a82b1e;
-        --calcite-color-danger-press: #851012;
+        --calcite-color-status-info: #267121;
+        --calcite-color-status-success: #308e29;
+        --calcite-color-status-warning: #f1c21b;
+        --calcite-color-status-danger: #d83020;
+        --calcite-color-status-danger-hover: #a82b1e;
+        --calcite-color-status-danger-press: #851012;
         --calcite-color-text-1: #3a3335;
         --calcite-color-text-2: #3d3638;
         --calcite-color-text-3: #463d40;
@@ -63,12 +63,12 @@
         --calcite-color-foreground-1: #332f29;
         --calcite-color-foreground-2: #2c2a26;
         --calcite-color-foreground-3: #1a1917;
-        --calcite-color-info: #2d8626;
-        --calcite-color-success: #36da43;
-        --calcite-color-warning: #ffc900;
-        --calcite-color-danger: #fe583e;
-        --calcite-color-danger-hover: #ff0015;
-        --calcite-color-danger-press: #d90012;
+        --calcite-color-status-info: #2d8626;
+        --calcite-color-status-success: #36da43;
+        --calcite-color-status-warning: #ffc900;
+        --calcite-color-status-danger: #fe583e;
+        --calcite-color-status-danger-hover: #ff0015;
+        --calcite-color-status-danger-press: #d90012;
         --calcite-color-text-1: #fdf0d5;
         --calcite-color-text-2: #fff6f6;
         --calcite-color-text-3: #ffffff;
@@ -104,12 +104,12 @@
         --calcite-color-foreground-1: #fafffd;
         --calcite-color-foreground-2: #edf7f3;
         --calcite-color-foreground-3: #e4ebe8;
-        --calcite-color-info: #007f99;
-        --calcite-color-success: #47ac35;
-        --calcite-color-warning: #eeb417;
-        --calcite-color-danger: #d92024;
-        --calcite-color-danger-hover: #a91e20;
-        --calcite-color-danger-press: #7c1315;
+        --calcite-color-status-info: #007f99;
+        --calcite-color-status-success: #47ac35;
+        --calcite-color-status-warning: #eeb417;
+        --calcite-color-status-danger: #d92024;
+        --calcite-color-status-danger-hover: #a91e20;
+        --calcite-color-status-danger-press: #7c1315;
         --calcite-color-text-1: #222927;
         --calcite-color-text-2: #333d3a;
         --calcite-color-text-3: #3a4541;
@@ -129,12 +129,12 @@
         --calcite-color-foreground-1: #282f2c;
         --calcite-color-foreground-2: #2f3633;
         --calcite-color-foreground-3: #353b38;
-        --calcite-color-info: #38deff;
-        --calcite-color-success: #60fc44;
-        --calcite-color-warning: #ffca38;
-        --calcite-color-danger: #ff3639;
-        --calcite-color-danger-hover: #d93437;
-        --calcite-color-danger-press: #7c1d13;
+        --calcite-color-status-info: #38deff;
+        --calcite-color-status-success: #60fc44;
+        --calcite-color-status-warning: #ffca38;
+        --calcite-color-status-danger: #ff3639;
+        --calcite-color-status-danger-hover: #d93437;
+        --calcite-color-status-danger-press: #7c1d13;
         --calcite-color-text-1: #f5fffc;
         --calcite-color-text-2: #e6fcf6;
         --calcite-color-text-3: #d6fff0;
@@ -170,12 +170,12 @@
         --calcite-color-foreground-1: #fffaff;
         --calcite-color-foreground-2: #f8ebfa;
         --calcite-color-foreground-3: #f7daf7;
-        --calcite-color-info: #b382d9;
-        --calcite-color-success: #40c437;
-        --calcite-color-warning: #f1a71e;
-        --calcite-color-danger: #d93820;
-        --calcite-color-danger-hover: #a9321e;
-        --calcite-color-danger-press: #841410;
+        --calcite-color-status-info: #b382d9;
+        --calcite-color-status-success: #40c437;
+        --calcite-color-status-warning: #f1a71e;
+        --calcite-color-status-danger: #d93820;
+        --calcite-color-status-danger-hover: #a9321e;
+        --calcite-color-status-danger-press: #841410;
         --calcite-color-text-1: #383239;
         --calcite-color-text-2: #3d373e;
         --calcite-color-text-3: #443e47;
@@ -195,12 +195,12 @@
         --calcite-color-foreground-1: #2e2933;
         --calcite-color-foreground-2: #2b262c;
         --calcite-color-foreground-3: #1b181b;
-        --calcite-color-info: #be3dc4;
-        --calcite-color-success: #28d258;
-        --calcite-color-warning: #ff9900;
-        --calcite-color-danger: #fe3e7e;
-        --calcite-color-danger-hover: #ff004c;
-        --calcite-color-danger-press: #db005b;
+        --calcite-color-status-info: #be3dc4;
+        --calcite-color-status-success: #28d258;
+        --calcite-color-status-warning: #ff9900;
+        --calcite-color-status-danger: #fe3e7e;
+        --calcite-color-status-danger-hover: #ff004c;
+        --calcite-color-status-danger-press: #db005b;
         --calcite-color-text-1: #fef2ff;
         --calcite-color-text-2: #fef5ff;
         --calcite-color-text-3: #faf0f9;
diff --git a/packages/calcite-design-tokens/src/core/font.json b/packages/calcite-design-tokens/src/core/font.json
index 4de9edd48ae..34d47ff73db 100644
--- a/packages/calcite-design-tokens/src/core/font.json
+++ b/packages/calcite-design-tokens/src/core/font.json
@@ -2,15 +2,15 @@
   "core": {
     "font": {
       "family": {
-        "primary": {
+        "avenirNextPro": {
           "value": "Avenir Next LT Pro",
           "type": "fontFamilies"
         },
-        "secondary": {
+        "avenirNextWorld": {
           "value": "Avenir Next World",
           "type": "fontFamilies"
         },
-        "code": {
+        "monaco": {
           "value": "Monaco",
           "type": "fontFamilies"
         }
@@ -72,180 +72,6 @@
           "type": "fontWeights"
         }
       },
-      "line-height": {
-        "fixed": {
-          "0": {
-            "value": "12px",
-            "type": "lineHeights"
-          },
-          "1": {
-            "value": "16px",
-            "type": "lineHeights"
-          },
-          "2": {
-            "value": "20px",
-            "type": "lineHeights"
-          },
-          "3": {
-            "value": "24px",
-            "type": "lineHeights"
-          },
-          "4": {
-            "value": "28px",
-            "type": "lineHeights"
-          },
-          "5": {
-            "value": "32px",
-            "type": "lineHeights"
-          },
-          "6": {
-            "value": "36px",
-            "type": "lineHeights"
-          },
-          "7": {
-            "value": "40px",
-            "type": "lineHeights"
-          },
-          "8": {
-            "value": "48px",
-            "type": "lineHeights"
-          },
-          "9": {
-            "value": "56px",
-            "type": "lineHeights"
-          },
-          "10": {
-            "value": "64px",
-            "type": "lineHeights"
-          },
-          "11": {
-            "value": "72px",
-            "type": "lineHeights"
-          },
-          "12": {
-            "value": "80px",
-            "type": "lineHeights"
-          }
-        },
-        "relative": {
-          "default": {
-            "value": "auto",
-            "type": "lineHeights",
-            "description": "1"
-          },
-          "tight": {
-            "value": "125%",
-            "type": "lineHeights",
-            "description": "1.25"
-          },
-          "snug": {
-            "value": "137.5%",
-            "type": "lineHeights",
-            "description": "1.375"
-          },
-          "normal": {
-            "value": "150%",
-            "type": "lineHeights",
-            "description": "1.5"
-          },
-          "relaxed": {
-            "value": "162.5%",
-            "type": "lineHeights",
-            "description": "1.625"
-          },
-          "loose": {
-            "value": "200%",
-            "type": "lineHeights",
-            "description": "2"
-          }
-        }
-      },
-      "size": {
-        "0": {
-          "value": "10px",
-          "type": "fontSizes"
-        },
-        "1": {
-          "value": "12px",
-          "type": "fontSizes"
-        },
-        "2": {
-          "value": "14px",
-          "type": "fontSizes"
-        },
-        "3": {
-          "value": "16px",
-          "type": "fontSizes"
-        },
-        "4": {
-          "value": "18px",
-          "type": "fontSizes"
-        },
-        "5": {
-          "value": "20px",
-          "type": "fontSizes"
-        },
-        "6": {
-          "value": "24px",
-          "type": "fontSizes"
-        },
-        "7": {
-          "value": "32px",
-          "type": "fontSizes"
-        },
-        "8": {
-          "value": "40px",
-          "type": "fontSizes"
-        },
-        "9": {
-          "value": "48px",
-          "type": "fontSizes"
-        },
-        "10": {
-          "value": "56px",
-          "type": "fontSizes"
-        },
-        "11": {
-          "value": "64px",
-          "type": "fontSizes"
-        },
-        "12": {
-          "value": "72px",
-          "type": "fontSizes"
-        },
-        "13": {
-          "value": "80px",
-          "type": "fontSizes"
-        },
-        "14": {
-          "value": "96px",
-          "type": "fontSizes"
-        },
-        "15": {
-          "value": "120px",
-          "type": "fontSizes"
-        }
-      },
-      "letter-spacing": {
-        "tight": {
-          "value": "-0.4px",
-          "type": "letterSpacing"
-        },
-        "normal": {
-          "value": "0px",
-          "type": "letterSpacing"
-        },
-        "wide": {
-          "value": "0.4px",
-          "type": "letterSpacing"
-        }
-      },
-      "paragraph-spacing": {
-        "normal": {
-          "value": "10px",
-          "type": "paragraphSpacing"
-        }
-      },
       "text-decoration": {
         "none": {
           "value": "none",
diff --git a/packages/calcite-design-tokens/src/core/box-shadow.json b/packages/calcite-design-tokens/src/core/shadow.json
similarity index 70%
rename from packages/calcite-design-tokens/src/core/box-shadow.json
rename to packages/calcite-design-tokens/src/core/shadow.json
index 2025d712b67..89b6725cb31 100644
--- a/packages/calcite-design-tokens/src/core/box-shadow.json
+++ b/packages/calcite-design-tokens/src/core/shadow.json
@@ -1,14 +1,13 @@
 {
   "core": {
-    "box-shadow": {
+    "shadow": {
       "0": {
         "value": {
           "x": "0",
           "y": "0",
           "blur": "0",
           "spread": "0",
-          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.0})",
-          "type": "dropShadow"
+          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.0})"
         },
         "type": "boxShadow"
       },
@@ -18,8 +17,7 @@
           "y": "2",
           "blur": "8",
           "spread": "0",
-          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.4})",
-          "type": "dropShadow"
+          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.4})"
         },
         "type": "boxShadow"
       },
@@ -29,8 +27,7 @@
           "y": "4",
           "blur": "16",
           "spread": "0",
-          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.8})",
-          "type": "dropShadow"
+          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.8})"
         },
         "type": "boxShadow"
       },
@@ -40,8 +37,7 @@
           "y": "4",
           "blur": "20",
           "spread": "0",
-          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.8})",
-          "type": "dropShadow"
+          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.8})"
         },
         "type": "boxShadow"
       },
@@ -51,19 +47,7 @@
           "y": "12",
           "blur": "32",
           "spread": "-2",
-          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.10})",
-          "type": "dropShadow"
-        },
-        "type": "boxShadow"
-      },
-      "none": {
-        "value": {
-          "x": "0",
-          "y": "0",
-          "blur": "0",
-          "spread": "0",
-          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.0})",
-          "type": "dropShadow"
+          "color": "rgba({core.color.neutral.blk-240}, {core.opacity.10})"
         },
         "type": "boxShadow"
       }
diff --git a/packages/calcite-design-tokens/src/core/sizing.json b/packages/calcite-design-tokens/src/core/size.json
similarity index 72%
rename from packages/calcite-design-tokens/src/core/sizing.json
rename to packages/calcite-design-tokens/src/core/size.json
index cd57f9bf6c7..6179b654b03 100644
--- a/packages/calcite-design-tokens/src/core/sizing.json
+++ b/packages/calcite-design-tokens/src/core/size.json
@@ -2,135 +2,163 @@
   "core": {
     "size": {
       "default": {
-        "0": {
-          "value": "2px",
+        "none": {
+          "value": "0",
           "type": "sizing"
         },
         "1": {
-          "value": "4px",
+          "value": "1px",
           "type": "sizing"
         },
         "2": {
+          "value": "2px",
+          "type": "sizing"
+        },
+        "4": {
+          "value": "4px",
+          "type": "sizing"
+        },
+        "6": {
           "value": "6px",
           "type": "sizing"
         },
-        "3": {
+        "8": {
           "value": "8px",
           "type": "sizing"
         },
-        "4": {
+        "10": {
           "value": "10px",
           "type": "sizing"
         },
-        "5": {
+        "12": {
           "value": "12px",
           "type": "sizing"
         },
-        "6": {
+        "14": {
           "value": "14px",
           "type": "sizing"
         },
-        "7": {
+        "16": {
           "value": "16px",
           "type": "sizing"
         },
-        "8": {
+        "20": {
           "value": "20px",
           "type": "sizing"
         },
-        "9": {
+        "24": {
           "value": "24px",
           "type": "sizing"
         },
-        "10": {
+        "28": {
           "value": "28px",
           "type": "sizing"
         },
-        "11": {
+        "32": {
           "value": "32px",
           "type": "sizing"
         },
-        "12": {
+        "36": {
           "value": "36px",
           "type": "sizing"
         },
-        "13": {
+        "40": {
           "value": "40px",
           "type": "sizing"
         },
-        "14": {
+        "44": {
           "value": "44px",
           "type": "sizing"
         },
-        "15": {
+        "48": {
           "value": "48px",
           "type": "sizing"
         },
-        "16": {
+        "56": {
           "value": "56px",
           "type": "sizing"
         },
-        "17": {
+        "64": {
           "value": "64px",
           "type": "sizing"
         },
-        "18": {
+        "72": {
           "value": "72px",
           "type": "sizing"
         },
-        "19": {
+        "80": {
           "value": "80px",
           "type": "sizing"
         },
-        "20": {
+        "96": {
           "value": "96px",
           "type": "sizing"
         },
-        "21": {
+        "112": {
           "value": "112px",
           "type": "sizing"
         },
-        "22": {
+        "128": {
           "value": "128px",
           "type": "sizing"
         },
-        "23": {
+        "144": {
           "value": "144px",
           "type": "sizing"
         },
-        "24": {
+        "160": {
           "value": "160px",
           "type": "sizing"
         },
-        "25": {
+        "192": {
           "value": "192px",
           "type": "sizing"
         },
-        "26": {
+        "224": {
           "value": "224px",
           "type": "sizing"
         },
-        "27": {
+        "256": {
           "value": "256px",
           "type": "sizing"
         },
-        "28": {
+        "288": {
           "value": "288px",
           "type": "sizing"
-        },
-        "none": {
-          "value": "0px",
-          "type": "sizing"
         }
       },
       "relative": {
-        "half": {
+        "auto": {
+          "value": "auto",
+          "type": "sizing"
+        },
+        "50": {
           "value": "50%",
           "type": "sizing"
         },
-        "full": {
+        "100": {
           "value": "100%",
           "type": "sizing"
+        },
+        "125": {
+          "value": "125%",
+          "type": "sizing"
+        },
+        "137": {
+          "value": "137.5%",
+          "type": "sizing"
+        },
+        "150": {
+          "value": "150%",
+          "type": "sizing"
+        },
+        "162": {
+          "value": "162.5%",
+          "type": "sizing"
+        },
+        "200": {
+          "value": "200%",
+          "type": "sizing"
         }
       }
     }
diff --git a/packages/calcite-design-tokens/src/core/stacking.json b/packages/calcite-design-tokens/src/core/z-index.json
similarity index 65%
rename from packages/calcite-design-tokens/src/core/stacking.json
rename to packages/calcite-design-tokens/src/core/z-index.json
index 1951da76d59..be716db9685 100644
--- a/packages/calcite-design-tokens/src/core/stacking.json
+++ b/packages/calcite-design-tokens/src/core/z-index.json
@@ -3,39 +3,39 @@
     "z-index": {
       "0": {
         "value": "-999999",
-        "type": "stacking"
+        "type": "z-index"
       },
       "1": {
         "value": "1",
-        "type": "stacking"
+        "type": "z-index"
       },
       "3": {
         "value": "300",
-        "type": "stacking"
+        "type": "z-index"
       },
       "4": {
         "value": "400",
-        "type": "stacking"
+        "type": "z-index"
       },
       "5": {
         "value": "500",
-        "type": "stacking"
+        "type": "z-index"
       },
       "6": {
         "value": "600",
-        "type": "stacking"
+        "type": "z-index"
       },
       "7": {
         "value": "700",
-        "type": "stacking"
+        "type": "z-index"
       },
       "8": {
         "value": "800",
-        "type": "stacking"
+        "type": "z-index"
       },
       "9": {
         "value": "900",
-        "type": "stacking"
+        "type": "z-index"
       }
     }
   }
diff --git a/packages/calcite-design-tokens/src/semantic/border.json b/packages/calcite-design-tokens/src/semantic/border.json
index 52d2026cfd8..7d1d224bc62 100644
--- a/packages/calcite-design-tokens/src/semantic/border.json
+++ b/packages/calcite-design-tokens/src/semantic/border.json
@@ -1,64 +1,42 @@
 {
   "semantic": {
     "border": {
-      "radius": {
-        "default": {
-          "value": "{core.size.default.none}",
-          "type": "borderRadius"
-        },
+      "width": {
         "none": {
           "value": "{core.size.default.none}",
-          "type": "borderRadius"
-        },
-        "sharp": {
-          "value": "{core.size.default.none}",
-          "type": "borderRadius"
-        },
-        "round": {
-          "value": "{core.size.default.1}",
-          "type": "borderRadius"
-        },
-        "circular": {
-          "value": "{core.size.relative.half}",
-          "type": "borderRadius"
-        },
-        "pill": {
-          "value": "{core.size.relative.full}",
-          "type": "borderRadius"
+          "type": "borderWidth"
         },
         "sm": {
           "value": "{core.size.default.1}",
-          "type": "borderRadius"
+          "type": "borderWidth"
         },
         "md": {
-          "value": "{core.size.default.5}",
-          "type": "borderRadius"
+          "value": "{core.size.default.2}",
+          "type": "borderWidth"
         },
         "lg": {
-          "value": "{core.size.default.7}",
+          "value": "{core.size.default.4}",
+          "type": "borderWidth"
+        }
+      }
+    },
+    "corner": {
+      "radius": {
+        "default": {
+          "value": "{semantic.corner.radius.sharp}",
           "type": "borderRadius"
         },
-        "xl": {
-          "value": "{core.size.default.9}",
-          "type": "borderRadius"
-        }
-      },
-      "width": {
-        "none": {
+        "sharp": {
           "value": "{core.size.default.none}",
-          "type": "borderWidth"
-        },
-        "sm": {
-          "value": "{core.size.default.0} - 1",
-          "type": "borderWidth"
+          "type": "borderRadius"
         },
-        "md": {
-          "value": "{core.size.default.0}",
-          "type": "borderWidth"
+        "round": {
+          "value": "{core.size.default.4}",
+          "type": "borderRadius"
         },
-        "lg": {
-          "value": "{core.size.default.1}",
-          "type": "borderWidth"
+        "pill": {
+          "value": "{core.size.relative.100}",
+          "type": "borderRadius"
         }
       }
     }
diff --git a/packages/calcite-design-tokens/src/semantic/box-shadow.json b/packages/calcite-design-tokens/src/semantic/box-shadow.json
deleted file mode 100644
index 7acbff1bf88..00000000000
--- a/packages/calcite-design-tokens/src/semantic/box-shadow.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "semantic": {
-    "box-shadow": {
-      "none": {
-        "value": "{core.box-shadow.0}",
-        "type": "boxShadow"
-      },
-      "sm": {
-        "value": ["{core.box-shadow.1}", "{core.box-shadow.2}"],
-        "type": "boxShadow"
-      },
-      "md": {
-        "value": ["{core.box-shadow.3}", "{core.box-shadow.4}"],
-        "type": "boxShadow"
-      }
-    }
-  }
-}
diff --git a/packages/calcite-design-tokens/src/semantic/color.json b/packages/calcite-design-tokens/src/semantic/color.json
index 0e2eae728a1..73e8c5c9c57 100644
--- a/packages/calcite-design-tokens/src/semantic/color.json
+++ b/packages/calcite-design-tokens/src/semantic/color.json
@@ -1,6 +1,84 @@
 {
   "semantic": {
     "color": {
+      "background": {
+        "default": {
+          "value": {
+            "light": "{core.color.neutral.blk-005}",
+            "dark": "{core.color.neutral.blk-190}"
+          },
+          "type": "color"
+        },
+        "none": {
+          "value": "rgba({core.color.neutral.blk-000}, {core.opacity.0})",
+          "type": "color"
+        }
+      },
+      "foreground": {
+        "1": {
+          "value": {
+            "light": "{core.color.neutral.blk-000}",
+            "dark": "{core.color.neutral.blk-200}"
+          },
+          "type": "color"
+        },
+        "2": {
+          "value": {
+            "light": "{core.color.neutral.blk-010}",
+            "dark": "{core.color.neutral.blk-210}"
+          },
+          "type": "color"
+        },
+        "3": {
+          "value": { "light": "{core.color.neutral.blk-020}", "dark": "{core.color.neutral.blk-220}" },
+          "type": "color"
+        },
+
+        "current": {
+          "value": {
+            "light": "{core.color.high-saturation.blue.h-bb-010}",
+            "dark": "#214155"
+          },
+          "type": "color"
+        }
+      },
+      "transparent": {
+        "default": {
+          "value": {
+            "light": "rgba({core.color.neutral.blk-240}, {core.opacity.0})",
+            "dark": "rgba({core.color.neutral.blk-000}, {core.opacity.0})"
+          },
+          "type": "color"
+        },
+        "hover": {
+          "value": {
+            "light": "rgba({core.color.neutral.blk-240}, {core.opacity.4})",
+            "dark": "rgba({core.color.neutral.blk-000}, {core.opacity.4})"
+          },
+          "type": "color"
+        },
+        "press": {
+          "value": {
+            "light": "rgba({core.color.neutral.blk-240}, {core.opacity.8})",
+            "dark": "rgba({core.color.neutral.blk-000}, {core.opacity.8})"
+          },
+          "type": "color"
+        },
+        "scrim": {
+          "value": {
+            "light": "rgba({core.color.neutral.blk-000}, {core.opacity.85})",
+            "dark": "rgba({core.color.neutral.blk-240}, {core.opacity.85})"
+          },
+          "type": "color"
+        },
+        "tint": {
+          "value": {
+            "light": "rgba({core.color.neutral.blk-000}, {core.opacity.80})",
+            "dark": "rgba({core.color.neutral.blk-200}, {core.opacity.80})"
+          },
+          "type": "color"
+        }
+      },
       "brand": {
         "default": {
           "value": {
@@ -31,80 +109,119 @@
           }
         }
       },
-      "background": {
-        "default": {
-          "value": {
-            "light": "{core.color.neutral.blk-005}",
-            "dark": "{core.color.neutral.blk-190}"
+      "status": {
+        "info": {
+          "default": {
+            "value": {
+              "light": "{core.color.high-saturation.blue.h-bb-070}",
+              "dark": "{core.color.dark.blue.d-bb-420}"
+            },
+            "type": "color"
           },
-          "type": "color"
+          "hover": {
+            "value": {
+              "light": "{core.color.high-saturation.blue.h-bb-080}",
+              "dark": "{core.color.vibrant.blue.v-bb-140}"
+            },
+            "type": "color"
+          },
+          "press": {
+            "value": {
+              "light": "{core.color.high-saturation.blue.h-bb-090}",
+              "dark": "{core.color.vibrant.blue.v-bb-160}"
+            },
+            "type": "color"
+          }
         },
-        "transparent": {
+        "success": {
           "default": {
             "value": {
-              "light": "rgba({core.color.neutral.blk-000}, {core.opacity.0})",
-              "dark": "rgba({core.color.neutral.blk-240}, {core.opacity.0})"
+              "light": "{core.color.high-saturation.green.h-gg-060}",
+              "dark": "{core.color.dark.green.d-gg-420}"
             },
             "type": "color"
           },
           "hover": {
             "value": {
-              "light": "rgba({core.color.neutral.blk-240}, {core.opacity.4})",
-              "dark": "rgba({core.color.neutral.blk-000}, {core.opacity.4})"
+              "light": "{core.color.high-saturation.green.h-gg-070}",
+              "dark": "{core.color.vibrant.green.v-gg-140}"
             },
             "type": "color"
           },
           "press": {
             "value": {
-              "light": "rgba({core.color.neutral.blk-240}, {core.opacity.8})",
-              "dark": "rgba({core.color.neutral.blk-000}, {core.opacity.8})"
+              "light": "{core.color.high-saturation.green.h-gg-080}",
+              "dark": "{core.color.vibrant.green.v-gg-160}"
+            },
+            "type": "color"
+          }
+        },
+        "warning": {
+          "default": {
+            "value": {
+              "light": "{core.color.high-saturation.yellow.h-yy-060}",
+              "dark": "{core.color.dark.yellow.d-yy-420}"
             },
             "type": "color"
           },
-          "scrim": {
+          "hover": {
             "value": {
-              "light": "rgba({core.color.neutral.blk-000}, {core.opacity.85})",
-              "dark": "rgba({core.color.neutral.blk-240}, {core.opacity.85})"
+              "light": "{core.color.high-saturation.yellow.h-yy-070}",
+              "dark": "{core.color.vibrant.yellow.v-yy-140}"
             },
             "type": "color"
           },
-          "dismiss": {
+          "press": {
             "value": {
-              "light": "rgba({core.color.neutral.blk-000}, {core.opacity.80})",
-              "dark": "rgba({core.color.neutral.blk-200}, {core.opacity.80})"
+              "light": "{core.color.high-saturation.yellow.h-yy-080}",
+              "dark": "{core.color.vibrant.yellow.v-yy-160}"
             },
             "type": "color"
           }
         },
-        "none": {
-          "value": "rgba({core.color.neutral.blk-000}, {core.opacity.0})",
-          "type": "color"
+        "danger": {
+          "default": {
+            "value": {
+              "light": "{core.color.high-saturation.red.h-rr-060}",
+              "dark": "{core.color.dark.red.d-rr-420}"
+            },
+            "type": "color"
+          },
+          "hover": {
+            "value": {
+              "light": "{core.color.high-saturation.red.h-rr-070}",
+              "dark": "{core.color.vibrant.red.v-rr-140}"
+            },
+            "type": "color"
+          },
+          "press": {
+            "value": {
+              "light": "{core.color.high-saturation.red.h-rr-080}",
+              "dark": "{core.color.vibrant.red.v-rr-160}"
+            },
+            "type": "color"
+          }
         }
       },
-      "foreground": {
-        "1": {
+      "inverse": {
+        "default": {
           "value": {
-            "light": "{core.color.neutral.blk-000}",
-            "dark": "{core.color.neutral.blk-200}"
+            "light": "{core.color.neutral.blk-190}",
+            "dark": "{core.color.neutral.blk-005}"
           },
           "type": "color"
         },
-        "2": {
+        "hover": {
           "value": {
-            "light": "{core.color.neutral.blk-010}",
-            "dark": "{core.color.neutral.blk-210}"
+            "light": "{core.color.neutral.blk-200}",
+            "dark": "{core.color.neutral.blk-000}"
           },
           "type": "color"
         },
-        "3": {
-          "value": { "light": "{core.color.neutral.blk-020}", "dark": "{core.color.neutral.blk-220}" },
-          "type": "color"
-        },
-
-        "current": {
+        "press": {
           "value": {
-            "light": "{core.color.high-saturation.blue.h-bb-010}",
-            "dark": "#214155"
+            "light": "{core.color.neutral.blk-210}",
+            "dark": "{core.color.neutral.blk-010}"
           },
           "type": "color"
         }
@@ -150,121 +267,20 @@
         "input": {
           "value": { "light": "{core.color.neutral.blk-100}", "dark": "{core.color.neutral.blk-130}" },
           "type": "color"
-        }
-      },
-      "info": {
-        "default": {
-          "value": {
-            "light": "{core.color.high-saturation.blue.h-bb-070}",
-            "dark": "{core.color.dark.blue.d-bb-420}"
-          },
-          "type": "color"
         },
-        "hover": {
+        "ghost": {
           "value": {
-            "light": "{core.color.high-saturation.blue.h-bb-080}",
-            "dark": "{core.color.vibrant.blue.v-bb-140}"
+            "light": "rgba({core.color.neutral.blk-240}, {core.opacity.30})",
+            "dark": "rgba({core.color.neutral.blk-130}, {core.opacity.30})"
           },
           "type": "color"
         },
-        "press": {
+        "white": {
           "value": {
-            "light": "{core.color.high-saturation.blue.h-bb-090}",
-            "dark": "{core.color.vibrant.blue.v-bb-160}"
-          },
-          "type": "color"
-        }
-      },
-      "success": {
-        "default": {
-          "value": {
-            "light": "{core.color.high-saturation.green.h-gg-060}",
-            "dark": "{core.color.dark.green.d-gg-420}"
-          },
-          "type": "color"
-        },
-        "hover": {
-          "value": {
-            "light": "{core.color.high-saturation.green.h-gg-070}",
-            "dark": "{core.color.vibrant.green.v-gg-140}"
-          },
-          "type": "color"
-        },
-        "press": {
-          "value": {
-            "light": "{core.color.high-saturation.green.h-gg-080}",
-            "dark": "{core.color.vibrant.green.v-gg-160}"
-          },
-          "type": "color"
-        }
-      },
-      "warning": {
-        "default": {
-          "value": {
-            "light": "{core.color.high-saturation.yellow.h-yy-060}",
-            "dark": "{core.color.dark.yellow.d-yy-420}"
-          },
-          "type": "color"
-        },
-        "hover": {
-          "value": {
-            "light": "{core.color.high-saturation.yellow.h-yy-070}",
-            "dark": "{core.color.vibrant.yellow.v-yy-140}"
-          },
-          "type": "color"
-        },
-        "press": {
-          "value": {
-            "light": "{core.color.high-saturation.yellow.h-yy-080}",
-            "dark": "{core.color.vibrant.yellow.v-yy-160}"
-          },
-          "type": "color"
-        }
-      },
-      "danger": {
-        "default": {
-          "value": {
-            "light": "{core.color.high-saturation.red.h-rr-060}",
-            "dark": "{core.color.dark.red.d-rr-420}"
-          },
-          "type": "color"
-        },
-        "hover": {
-          "value": {
-            "light": "{core.color.high-saturation.red.h-rr-070}",
-            "dark": "{core.color.vibrant.red.v-rr-140}"
-          },
-          "type": "color"
-        },
-        "press": {
-          "value": {
-            "light": "{core.color.high-saturation.red.h-rr-080}",
-            "dark": "{core.color.vibrant.red.v-rr-160}"
-          },
-          "type": "color"
-        }
-      },
-      "inverse": {
-        "default": {
-          "value": {
-            "light": "{core.color.neutral.blk-190}",
+            "light": "{core.color.neutral.blk-000}",
             "dark": "{core.color.neutral.blk-005}"
           },
           "type": "color"
-        },
-        "hover": {
-          "value": {
-            "light": "{core.color.neutral.blk-200}",
-            "dark": "{core.color.neutral.blk-000}"
-          },
-          "type": "color"
-        },
-        "press": {
-          "value": {
-            "light": "{core.color.neutral.blk-210}",
-            "dark": "{core.color.neutral.blk-010}"
-          },
-          "type": "color"
         }
       }
     }
diff --git a/packages/calcite-design-tokens/src/semantic/container-size.json b/packages/calcite-design-tokens/src/semantic/container-size.json
index a8a25281a90..7f9429be444 100644
--- a/packages/calcite-design-tokens/src/semantic/container-size.json
+++ b/packages/calcite-design-tokens/src/semantic/container-size.json
@@ -100,16 +100,16 @@
         }
       },
       "margin": {
-        "value": "{core.size.default.9}",
+        "value": "{core.size.default.24}",
         "type": "spacing"
       },
       "gutter": {
-        "value": "{core.size.default.7}",
+        "value": "{core.size.default.16}",
         "type": "spacing"
       },
       "content": {
         "fluid": {
-          "value": "{core.size.relative.full}",
+          "value": "{core.size.relative.100}",
           "type": "sizing",
           "description": "for fluid grid widths"
         },
diff --git a/packages/calcite-design-tokens/src/semantic/font.json b/packages/calcite-design-tokens/src/semantic/font.json
index b17812741cd..d0ea467ca5a 100644
--- a/packages/calcite-design-tokens/src/semantic/font.json
+++ b/packages/calcite-design-tokens/src/semantic/font.json
@@ -3,7 +3,11 @@
     "font": {
       "family": {
         "default": {
-          "value": "{core.font.family.primary}",
+          "value": "{core.font.family.avenirNextPro}",
+          "type": "fontFamilies"
+        },
+        "code": {
+          "value": "{core.font.family.monaco}",
           "type": "fontFamilies"
         }
       },
@@ -40,31 +44,31 @@
       },
       "size": {
         "xs": {
-          "value": "{core.size.default.4}",
+          "value": "{core.size.default.10}",
           "type": "fontSizes"
         },
         "sm": {
-          "value": "{core.size.default.5}",
+          "value": "{core.size.default.12}",
           "type": "fontSizes"
         },
         "default": {
-          "value": "{core.size.default.6}",
+          "value": "{core.size.default.14}",
           "type": "fontSizes"
         },
         "md": {
-          "value": "{core.size.default.7}",
+          "value": "{core.size.default.16}",
           "type": "fontSizes"
         },
         "lg": {
-          "value": "{core.size.default.0} * 9",
+          "value": "{core.size.default.2} * 9",
           "type": "fontSizes"
         },
         "xl": {
-          "value": "{core.size.default.8}",
+          "value": "{core.size.default.20}",
           "type": "fontSizes"
         },
         "xxl": {
-          "value": "{core.size.default.9}",
+          "value": "{core.size.default.24}",
           "type": "fontSizes"
         }
       },
@@ -78,50 +82,50 @@
       "line-height": {
         "fixed": {
           "sm": {
-            "value": "{core.size.default.5}",
+            "value": "{core.size.default.12}",
             "type": "lineHeights"
           },
           "base": {
-            "value": "{core.size.default.7}",
+            "value": "{core.size.default.16}",
             "type": "lineHeights"
           },
           "lg": {
-            "value": "{core.size.default.8}",
+            "value": "{core.size.default.20}",
             "type": "lineHeights"
           },
           "xl": {
-            "value": "{core.size.default.9}",
+            "value": "{core.size.default.24}",
             "type": "lineHeights"
           }
         },
         "relative": {
           "default": {
-            "value": "{core.font.line-height.relative.default}",
+            "value": "{core.size.relative.auto}",
             "type": "lineHeights",
             "description": "1"
           },
           "tight": {
-            "value": "{core.font.line-height.relative.tight}",
+            "value": "{core.size.relative.125}",
             "type": "lineHeights",
             "description": "1.25"
           },
           "snug": {
-            "value": "{core.font.line-height.relative.snug}",
+            "value": "{core.size.relative.137}",
             "type": "lineHeights",
             "description": "1.375"
           },
           "normal": {
-            "value": "{core.font.line-height.relative.normal}",
+            "value": "{core.size.relative.150}",
             "type": "lineHeights",
             "description": "1.5"
           },
           "relaxed": {
-            "value": "{core.font.line-height.relative.relaxed}",
+            "value": "{core.size.relative.162}",
             "type": "lineHeights",
             "description": "1.625"
           },
           "loose": {
-            "value": "{core.font.line-height.relative.loose}",
+            "value": "{core.size.relative.200}",
             "type": "lineHeights",
             "description": "2"
           }
@@ -129,21 +133,21 @@
       },
       "letter-spacing": {
         "tight": {
-          "value": "{core.font.letter-spacing.tight}",
+          "value": "{core.size.default.none} - .4 ",
           "type": "letterSpacing"
         },
         "normal": {
-          "value": "{core.font.letter-spacing.normal}",
+          "value": "{core.size.default.none}",
           "type": "letterSpacing"
         },
         "wide": {
-          "value": "{core.font.letter-spacing.wide}",
+          "value": "{core.size.default.none} + .4 ",
           "type": "letterSpacing"
         }
       },
       "paragraph-spacing": {
         "normal": {
-          "value": "{core.font.paragraph-spacing.normal}",
+          "value": "{core.size.default.4}",
           "type": "paragraphSpacing"
         }
       },
diff --git a/packages/calcite-design-tokens/src/semantic/shadow.json b/packages/calcite-design-tokens/src/semantic/shadow.json
new file mode 100644
index 00000000000..76d3c3d98da
--- /dev/null
+++ b/packages/calcite-design-tokens/src/semantic/shadow.json
@@ -0,0 +1,18 @@
+{
+  "semantic": {
+    "shadow": {
+      "none": {
+        "value": "{core.shadow.0}",
+        "type": "boxShadow"
+      },
+      "sm": {
+        "value": ["{core.shadow.1}", "{core.shadow.2}"],
+        "type": "boxShadow"
+      },
+      "md": {
+        "value": ["{core.shadow.3}", "{core.shadow.4}"],
+        "type": "boxShadow"
+      }
+    }
+  }
+}
diff --git a/packages/calcite-design-tokens/src/semantic/sizing.json b/packages/calcite-design-tokens/src/semantic/size.json
similarity index 62%
rename from packages/calcite-design-tokens/src/semantic/sizing.json
rename to packages/calcite-design-tokens/src/semantic/size.json
index fd70d793e44..09ad5b575f3 100644
--- a/packages/calcite-design-tokens/src/semantic/sizing.json
+++ b/packages/calcite-design-tokens/src/semantic/size.json
@@ -1,64 +1,52 @@
 {
   "semantic": {
     "size": {
-      "xxxs": {
-        "value": "{core.size.default.0}",
-        "type": "spacing"
-      },
-      "xxs": {
+      "px": {
         "value": "{core.size.default.1}",
         "type": "spacing"
       },
-      "xs": {
+      "xxxs": {
         "value": "{core.size.default.2}",
         "type": "spacing"
       },
-      "sm": {
-        "value": "{core.size.default.3}",
-        "type": "spacing"
-      },
-      "sm-md": {
+      "xxs": {
         "value": "{core.size.default.4}",
         "type": "spacing"
       },
-      "md-sm": {
-        "value": "{core.size.default.5}",
-        "type": "spacing"
-      },
-      "md": {
+      "xs": {
         "value": "{core.size.default.6}",
         "type": "spacing"
       },
-      "md-lg": {
-        "value": "{core.size.default.7}",
-        "type": "spacing"
-      },
-      "lg-md": {
+      "sm": {
         "value": "{core.size.default.8}",
         "type": "spacing"
       },
-      "lg": {
-        "value": "{core.size.default.9}",
+      "sm+": {
+        "value": "{core.size.default.10}",
         "type": "spacing"
       },
-      "lg-xl": {
-        "value": "{core.size.default.11}",
+      "md": {
+        "value": "{core.size.default.12}",
         "type": "spacing"
       },
-      "xl-lg": {
+      "md+": {
         "value": "{core.size.default.14}",
         "type": "spacing"
       },
+      "lg": {
+        "value": "{core.size.default.16}",
+        "type": "spacing"
+      },
       "xl": {
-        "value": "{core.size.default.15}",
+        "value": "{core.size.default.20}",
         "type": "spacing"
       },
       "xxl": {
-        "value": "{core.size.default.17}",
+        "value": "{core.size.default.24}",
         "type": "spacing"
       },
       "xxxl": {
-        "value": "{core.size.default.20}",
+        "value": "{core.size.default.32}",
         "type": "spacing"
       }
     }
diff --git a/packages/calcite-design-tokens/src/semantic/spacing.json b/packages/calcite-design-tokens/src/semantic/space.json
similarity index 59%
rename from packages/calcite-design-tokens/src/semantic/spacing.json
rename to packages/calcite-design-tokens/src/semantic/space.json
index 07475eff0ac..d46866ede00 100644
--- a/packages/calcite-design-tokens/src/semantic/spacing.json
+++ b/packages/calcite-design-tokens/src/semantic/space.json
@@ -1,40 +1,44 @@
 {
   "semantic": {
     "spacing": {
-      "none": {
-        "value": "{core.size.default.none}",
+      "px": {
+        "value": "{core.size.default.1}",
         "type": "spacing"
       },
       "base": {
-        "value": "{core.size.default.0}",
-        "type": "spacing"
-      },
-      "half": {
         "value": "{core.size.default.2}",
         "type": "spacing"
       },
-      "double": {
-        "value": "{core.size.default.8}",
+      "xxs": {
+        "value": "{core.size.default.4}",
         "type": "spacing"
       },
       "xs": {
-        "value": "{core.size.default.1}",
+        "value": "{core.size.default.6}",
         "type": "spacing"
       },
       "sm": {
-        "value": "{core.size.default.3}",
+        "value": "{core.size.default.8}",
         "type": "spacing"
       },
       "md": {
-        "value": "{core.size.default.5}",
+        "value": "{core.size.default.12}",
         "type": "spacing"
       },
       "lg": {
-        "value": "{core.size.default.7}",
+        "value": "{core.size.default.14}",
         "type": "spacing"
       },
       "xl": {
-        "value": "{core.size.default.8}",
+        "value": "{core.size.default.16}",
+        "type": "spacing"
+      },
+      "xxl": {
+        "value": "{core.size.default.20}",
+        "type": "spacing"
+      },
+      "xxxl": {
+        "value": "{core.size.default.32}",
         "type": "spacing"
       }
     }
diff --git a/packages/calcite-design-tokens/src/semantic/z-index.json b/packages/calcite-design-tokens/src/semantic/z-index.json
index 32f793ed0e8..c26ae9ddcfa 100644
--- a/packages/calcite-design-tokens/src/semantic/z-index.json
+++ b/packages/calcite-design-tokens/src/semantic/z-index.json
@@ -3,43 +3,43 @@
     "z-index": {
       "deep": {
         "value": "{core.z-index.0}",
-        "type": "stacking"
+        "type": "z-index"
       },
       "default": {
         "value": "{core.z-index.1}",
-        "type": "stacking"
+        "type": "z-index"
       },
       "sticky": {
         "value": "{core.z-index.3}",
-        "type": "stacking"
+        "type": "z-index"
       },
       "header": {
         "value": "{core.z-index.4}",
-        "type": "stacking"
+        "type": "z-index"
       },
       "toast": {
         "value": "{core.z-index.5}",
-        "type": "stacking"
+        "type": "z-index"
       },
       "dropdown": {
         "value": "{core.z-index.6}",
-        "type": "stacking"
+        "type": "z-index"
       },
       "overlay": {
         "value": "{core.z-index.7}",
-        "type": "stacking"
+        "type": "z-index"
       },
       "modal": {
         "value": "{core.z-index.8}",
-        "type": "stacking"
+        "type": "z-index"
       },
       "popup": {
         "value": "{core.z-index.9}",
-        "type": "stacking"
+        "type": "z-index"
       },
       "tooltip": {
         "value": "{core.z-index.9} + 1",
-        "type": "stacking"
+        "type": "z-index"
       }
     }
   }
diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
index 8f40fd25c17..6e8b562272f 100644
--- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
+++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
@@ -13,38 +13,45 @@ exports[`generated tokens CSS core should match 1`] = `
 	--calcite-z-index-3: 300;
 	--calcite-z-index-1: 1;
 	--calcite-z-index-0: -999999;
-	--calcite-size-relative-full: 100%;
-	--calcite-size-relative-half: 50%;
-	--calcite-size-none: 0px;
-	--calcite-size-28: 288px;
-	--calcite-size-27: 256px;
-	--calcite-size-26: 224px;
-	--calcite-size-25: 192px;
-	--calcite-size-24: 160px;
-	--calcite-size-23: 144px;
-	--calcite-size-22: 128px;
-	--calcite-size-21: 112px;
-	--calcite-size-20: 96px;
-	--calcite-size-19: 80px;
-	--calcite-size-18: 72px;
-	--calcite-size-17: 64px;
-	--calcite-size-16: 56px;
-	--calcite-size-15: 48px;
-	--calcite-size-14: 44px;
-	--calcite-size-13: 40px;
-	--calcite-size-12: 36px;
-	--calcite-size-11: 32px;
-	--calcite-size-10: 28px;
-	--calcite-size-9: 24px;
-	--calcite-size-8: 20px;
-	--calcite-size-7: 16px;
-	--calcite-size-6: 14px;
-	--calcite-size-5: 12px;
-	--calcite-size-4: 10px;
-	--calcite-size-3: 8px;
-	--calcite-size-2: 6px;
-	--calcite-size-1: 4px;
-	--calcite-size-0: 2px;
+	--calcite-size-relative-auto: auto;
+	--calcite-size-relative-200: 200%;
+	--calcite-size-relative-162: 162.5%;
+	--calcite-size-relative-150: 150%;
+	--calcite-size-relative-137: 137.5%;
+	--calcite-size-relative-125: 125%;
+	--calcite-size-relative-100: 100%;
+	--calcite-size-relative-50: 50%;
+	--calcite-size-none: 0;
+	--calcite-size-288: 288px;
+	--calcite-size-256: 256px;
+	--calcite-size-224: 224px;
+	--calcite-size-192: 192px;
+	--calcite-size-160: 160px;
+	--calcite-size-144: 144px;
+	--calcite-size-128: 128px;
+	--calcite-size-112: 112px;
+	--calcite-size-96: 96px;
+	--calcite-size-80: 80px;
+	--calcite-size-72: 72px;
+	--calcite-size-64: 64px;
+	--calcite-size-56: 56px;
+	--calcite-size-48: 48px;
+	--calcite-size-44: 44px;
+	--calcite-size-40: 40px;
+	--calcite-size-36: 36px;
+	--calcite-size-32: 32px;
+	--calcite-size-28: 28px;
+	--calcite-size-24: 24px;
+	--calcite-size-20: 20px;
+	--calcite-size-16: 16px;
+	--calcite-size-14: 14px;
+	--calcite-size-12: 12px;
+	--calcite-size-10: 10px;
+	--calcite-size-8: 8px;
+	--calcite-size-6: 6px;
+	--calcite-size-4: 4px;
+	--calcite-size-2: 2px;
+	--calcite-size-1: 1px;
 	--calcite-opacity-100: 1;
 	--calcite-opacity-96: 0.96;
 	--calcite-opacity-92: 0.92;
@@ -67,45 +74,6 @@ exports[`generated tokens CSS core should match 1`] = `
 	--calcite-font-text-case-none: none;
 	--calcite-font-text-decoration-underline: underline;
 	--calcite-font-text-decoration-none: none;
-	--calcite-font-paragraph-spacing-normal: 10px;
-	--calcite-font-letter-spacing-wide: 0.4px;
-	--calcite-font-letter-spacing-normal: 0px;
-	--calcite-font-letter-spacing-tight: -0.4px;
-	--calcite-font-size-15: 120px;
-	--calcite-font-size-14: 96px;
-	--calcite-font-size-13: 80px;
-	--calcite-font-size-12: 72px;
-	--calcite-font-size-11: 64px;
-	--calcite-font-size-10: 56px;
-	--calcite-font-size-9: 48px;
-	--calcite-font-size-8: 40px;
-	--calcite-font-size-7: 32px;
-	--calcite-font-size-6: 24px;
-	--calcite-font-size-5: 20px;
-	--calcite-font-size-4: 18px;
-	--calcite-font-size-3: 16px;
-	--calcite-font-size-2: 14px;
-	--calcite-font-size-1: 12px;
-	--calcite-font-size-0: 10px;
-	--calcite-font-line-height-relative-loose: 2; /* 2 */
-	--calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */
-	--calcite-font-line-height-relative-normal: 1.5; /* 1.5 */
-	--calcite-font-line-height-relative-snug: 1.375; /* 1.375 */
-	--calcite-font-line-height-relative-tight: 1.25; /* 1.25 */
-	--calcite-font-line-height-relative: auto; /* 1 */
-	--calcite-font-line-height-fixed-12: 80px;
-	--calcite-font-line-height-fixed-11: 72px;
-	--calcite-font-line-height-fixed-10: 64px;
-	--calcite-font-line-height-fixed-9: 56px;
-	--calcite-font-line-height-fixed-8: 48px;
-	--calcite-font-line-height-fixed-7: 40px;
-	--calcite-font-line-height-fixed-6: 36px;
-	--calcite-font-line-height-fixed-5: 32px;
-	--calcite-font-line-height-fixed-4: 28px;
-	--calcite-font-line-height-fixed-3: 24px;
-	--calcite-font-line-height-fixed-2: 20px;
-	--calcite-font-line-height-fixed-1: 16px;
-	--calcite-font-line-height-fixed-0: 12px;
 	--calcite-font-weight-heavy: 900;
 	--calcite-font-weight-black: 900; /* only for Avenir Next World (secondary font family) */
 	--calcite-font-weight-extrabold: 800; /* only for Avenir Next World (secondary font family) */
@@ -118,9 +86,9 @@ exports[`generated tokens CSS core should match 1`] = `
 	--calcite-font-weight-thin: 100;
 	--calcite-font-weight-ultralight: 200; /* only for Avenir Next World (secondary font family) */
 	--calcite-font-style-italic: italic; /* used in ratings */
-	--calcite-font-family-code: Monaco;
-	--calcite-font-family-secondary: "Avenir Next World";
-	--calcite-font-family-primary: "Avenir Next LT Pro";
+	--calcite-font-family-monaco: Monaco;
+	--calcite-font-family-avenir-next-world: "Avenir Next World";
+	--calcite-font-family-avenir-next-pro: "Avenir Next LT Pro";
 	--calcite-container-size-1440: 1440px;
 	--calcite-container-size-1152: 1152px;
 	--calcite-container-size-854: 854px;
@@ -335,12 +303,11 @@ exports[`generated tokens CSS core should match 1`] = `
 	--calcite-color-neutral-blk-010: #f3f3f3;
 	--calcite-color-neutral-blk-005: #f8f8f8;
 	--calcite-color-neutral-blk-000: #ffffff;
-	--calcite-box-shadow-none: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
-	--calcite-box-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0.1);
-	--calcite-box-shadow-3: 0 4px 20px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
-	--calcite-box-shadow-2: 0 4px 16px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
-	--calcite-box-shadow-1: 0 2px 8px 0 rgba(var(--calcite-color-neutral-blk-240), 0.04);
-	--calcite-box-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
+	--calcite-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0.1);
+	--calcite-shadow-3: 0 4px 20px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
+	--calcite-shadow-2: 0 4px 16px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
+	--calcite-shadow-1: 0 2px 8px 0 rgba(var(--calcite-color-neutral-blk-240), 0.04);
+	--calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
 }
 "
 `;
@@ -349,21 +316,8 @@ exports[`generated tokens CSS dark should match 1`] = `
 "/
 
 :root{
-	--calcite-color-inverse-press: #f3f3f3;
-	--calcite-color-inverse-hover: #ffffff;
-	--calcite-color-inverse: #f8f8f8;
-	--calcite-color-danger-press: #d90012;
-	--calcite-color-danger-hover: #ff0015;
-	--calcite-color-danger: #FE583E;
-	--calcite-color-warning-press: #f5d000;
-	--calcite-color-warning-hover: #ffee33;
-	--calcite-color-warning: #FFC900;
-	--calcite-color-success-press: #00b81b;
-	--calcite-color-success-hover: #3bed52;
-	--calcite-color-success: #36DA43;
-	--calcite-color-info-press: #009af2;
-	--calcite-color-info-hover: #3db8ff;
-	--calcite-color-info: #00A0FF;
+	--calcite-color-border-white: #f8f8f8;
+	--calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
 	--calcite-color-border-input: #757575;
 	--calcite-color-border-3: #404040;
 	--calcite-color-border-2: #4a4a4a;
@@ -373,20 +327,35 @@ exports[`generated tokens CSS dark should match 1`] = `
 	--calcite-color-text-3: #9f9f9f;
 	--calcite-color-text-2: #bfbfbf;
 	--calcite-color-text-1: #ffffff;
+	--calcite-color-inverse-press: #f3f3f3;
+	--calcite-color-inverse-hover: #ffffff;
+	--calcite-color-inverse: #f8f8f8;
+	--calcite-color-status-danger-press: #d90012;
+	--calcite-color-status-danger-hover: #ff0015;
+	--calcite-color-status-danger: #FE583E;
+	--calcite-color-status-warning-press: #f5d000;
+	--calcite-color-status-warning-hover: #ffee33;
+	--calcite-color-status-warning: #FFC900;
+	--calcite-color-status-success-press: #00b81b;
+	--calcite-color-status-success-hover: #3bed52;
+	--calcite-color-status-success: #36DA43;
+	--calcite-color-status-info-press: #009af2;
+	--calcite-color-status-info-hover: #3db8ff;
+	--calcite-color-status-info: #00A0FF;
+	--calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
+	--calcite-color-brand-press: #00619b;
+	--calcite-color-brand-hover: #007ac2;
+	--calcite-color-brand: #009af2;
+	--calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
+	--calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
+	--calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
+	--calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
+	--calcite-color-transparent: rgba(255, 255, 255, 0);
 	--calcite-color-foreground-current: #214155;
 	--calcite-color-foreground-3: #151515;
 	--calcite-color-foreground-2: #202020;
 	--calcite-color-foreground-1: #2b2b2b;
-	--calcite-color-background-transparent-dismiss: rgba(43, 43, 43, 0.8);
-	--calcite-color-background-transparent-scrim: rgba(0, 0, 0, 0.85);
-	--calcite-color-background-transparent-press: rgba(255, 255, 255, 0.08);
-	--calcite-color-background-transparent-hover: rgba(255, 255, 255, 0.04);
-	--calcite-color-background-transparent: rgba(0, 0, 0, 0);
 	--calcite-color-background: #353535;
-	--calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
-	--calcite-color-brand-press: #00619b;
-	--calcite-color-brand-hover: #007ac2;
-	--calcite-color-brand: #009af2;
 }
 "
 `;
@@ -405,30 +374,28 @@ exports[`generated tokens CSS global should match 1`] = `
 	--calcite-z-index-sticky: 300;
 	--calcite-z-index: 1;
 	--calcite-z-index-deep: -999999;
-	--calcite-spacing-xl: 20px;
-	--calcite-spacing-lg: 16px;
+	--calcite-spacing-xxxl: 32px;
+	--calcite-spacing-xxl: 20px;
+	--calcite-spacing-xl: 16px;
+	--calcite-spacing-lg: 14px;
 	--calcite-spacing-md: 12px;
 	--calcite-spacing-sm: 8px;
-	--calcite-spacing-xs: 4px;
-	--calcite-spacing-double: 20px;
-	--calcite-spacing-half: 6px;
+	--calcite-spacing-xs: 6px;
+	--calcite-spacing-xxs: 4px;
 	--calcite-spacing-base: 2px;
-	--calcite-spacing-none: 0px;
-	--calcite-size-xxxl: 96px;
-	--calcite-size-xxl: 64px;
-	--calcite-size-xl: 48px;
-	--calcite-size-xl-lg: 44px;
-	--calcite-size-lg-xl: 32px;
-	--calcite-size-lg: 24px;
-	--calcite-size-lg-md: 20px;
-	--calcite-size-md-lg: 16px;
-	--calcite-size-md: 14px;
-	--calcite-size-md-sm: 12px;
-	--calcite-size-sm-md: 10px;
+	--calcite-spacing-px: 1px;
+	--calcite-size-xxxl: 32px;
+	--calcite-size-xxl: 24px;
+	--calcite-size-xl: 20px;
+	--calcite-size-lg: 16px;
+	--calcite-size-md-plus: 14px;
+	--calcite-size-md: 12px;
+	--calcite-size-sm-plus: 10px;
 	--calcite-size-sm: 8px;
 	--calcite-size-xs: 6px;
 	--calcite-size-xxs: 4px;
 	--calcite-size-xxxs: 2px;
+	--calcite-size-px: 1px;
 	--calcite-opacity-disabled: 0.5;
 	--calcite-opacity-full: 1;
 	--calcite-opacity-dark: 0.85;
@@ -440,10 +407,10 @@ exports[`generated tokens CSS global should match 1`] = `
 	--calcite-font-text-case-none: none;
 	--calcite-font-text-decoration-underline: underline;
 	--calcite-font-text-decoration-none: none;
-	--calcite-font-paragraph-spacing-normal: 10px;
-	--calcite-font-letter-spacing-wide: 0.4px;
-	--calcite-font-letter-spacing-normal: 0px;
-	--calcite-font-letter-spacing-tight: -0.4px;
+	--calcite-font-paragraph-spacing-normal: 4px;
+	--calcite-font-letter-spacing-wide: 0.4;
+	--calcite-font-letter-spacing-normal: 0;
+	--calcite-font-letter-spacing-tight: -0.4;
 	--calcite-font-line-height-relative-loose: 2; /* 2 */
 	--calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */
 	--calcite-font-line-height-relative-normal: 1.5; /* 1.5 */
@@ -468,29 +435,24 @@ exports[`generated tokens CSS global should match 1`] = `
 	--calcite-font-weight-regular: 400;
 	--calcite-font-weight-normal: 400; /* For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular" */
 	--calcite-font-weight-light: 300; /* For Avenir Next World (secondary font family) */
+	--calcite-font-family-code: Monaco;
 	--calcite-font-family: "Avenir Next LT Pro";
 	--calcite-container-size-content-fixed: 1440px; /* only for lg breakpoint fixed grid width */
 	--calcite-container-size-content-fluid: 100%; /* for fluid grid widths */
 	--calcite-container-size-gutter: 16px;
 	--calcite-container-size-margin: 24px;
 	--calcite-color-background-none: rgba(#ffffff, 0);
+	--calcite-corner-radius-pill: 100%;
+	--calcite-corner-radius-round: 4px;
+	--calcite-corner-radius-sharp: 0;
 	--calcite-border-width-lg: 4px;
 	--calcite-border-width-md: 2px;
 	--calcite-border-width-sm: 1px;
-	--calcite-border-width-none: 0px;
-	--calcite-border-radius-xl: 24px;
-	--calcite-border-radius-lg: 16px;
-	--calcite-border-radius-md: 12px;
-	--calcite-border-radius-sm: 4px;
-	--calcite-border-radius-pill: 100%;
-	--calcite-border-radius-circular: 50%;
-	--calcite-border-radius-round: 4px;
-	--calcite-border-radius-sharp: 0px;
-	--calcite-border-radius-none: 0px;
-	--calcite-border-radius: 0px;
-	--calcite-box-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
-	--calcite-box-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
-	--calcite-box-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
+	--calcite-border-width-none: 0;
+	--calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
+	--calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
+	--calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
+	--calcite-corner-radius: var(--calcite-corner-radius-sharp);
 }
 "
 `;
@@ -499,21 +461,8 @@ exports[`generated tokens CSS light should match 1`] = `
 "/
 
 :root{
-	--calcite-color-inverse-press: #202020;
-	--calcite-color-inverse-hover: #2b2b2b;
-	--calcite-color-inverse: #353535;
-	--calcite-color-danger-press: #7c1d13;
-	--calcite-color-danger-hover: #a82b1e;
-	--calcite-color-danger: #d83020;
-	--calcite-color-warning-press: #bfa200;
-	--calcite-color-warning-hover: #d9bc00;
-	--calcite-color-warning: #edd317;
-	--calcite-color-success-press: #1a6324;
-	--calcite-color-success-hover: #288835;
-	--calcite-color-success: #35ac46;
-	--calcite-color-info-press: #00304d;
-	--calcite-color-info-hover: #004874;
-	--calcite-color-info: #00619b;
+	--calcite-color-border-white: #ffffff;
+	--calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
 	--calcite-color-border-input: #949494;
 	--calcite-color-border-3: #dfdfdf;
 	--calcite-color-border-2: #d4d4d4;
@@ -523,20 +472,35 @@ exports[`generated tokens CSS light should match 1`] = `
 	--calcite-color-text-3: #6a6a6a;
 	--calcite-color-text-2: #4a4a4a;
 	--calcite-color-text-1: #151515;
+	--calcite-color-inverse-press: #202020;
+	--calcite-color-inverse-hover: #2b2b2b;
+	--calcite-color-inverse: #353535;
+	--calcite-color-status-danger-press: #7c1d13;
+	--calcite-color-status-danger-hover: #a82b1e;
+	--calcite-color-status-danger: #d83020;
+	--calcite-color-status-warning-press: #bfa200;
+	--calcite-color-status-warning-hover: #d9bc00;
+	--calcite-color-status-warning: #edd317;
+	--calcite-color-status-success-press: #1a6324;
+	--calcite-color-status-success-hover: #288835;
+	--calcite-color-status-success: #35ac46;
+	--calcite-color-status-info-press: #00304d;
+	--calcite-color-status-info-hover: #004874;
+	--calcite-color-status-info: #00619b;
+	--calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
+	--calcite-color-brand-press: #004874;
+	--calcite-color-brand-hover: #00619b;
+	--calcite-color-brand: #007ac2;
+	--calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
+	--calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
+	--calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
+	--calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
+	--calcite-color-transparent: rgba(0, 0, 0, 0);
 	--calcite-color-foreground-current: #c7eaff;
 	--calcite-color-foreground-3: #eaeaea;
 	--calcite-color-foreground-2: #f3f3f3;
 	--calcite-color-foreground-1: #ffffff;
-	--calcite-color-background-transparent-dismiss: rgba(255, 255, 255, 0.8);
-	--calcite-color-background-transparent-scrim: rgba(255, 255, 255, 0.85);
-	--calcite-color-background-transparent-press: rgba(0, 0, 0, 0.08);
-	--calcite-color-background-transparent-hover: rgba(0, 0, 0, 0.04);
-	--calcite-color-background-transparent: rgba(255, 255, 255, 0);
 	--calcite-color-background: #f8f8f8;
-	--calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
-	--calcite-color-brand-press: #004874;
-	--calcite-color-brand-hover: #00619b;
-	--calcite-color-brand: #007ac2;
 }
 "
 `;
@@ -544,229 +508,223 @@ exports[`generated tokens CSS light should match 1`] = `
 exports[`generated tokens ES6 core should match 1`] = `
 "/
 
-export const calciteBoxShadow_0 = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0%)","type":"dropShadow"};
-export const calciteBoxShadow_1 = {"x":"0","y":"2","blur":"8","spread":"0","color":"rgba(#000000, 4%)","type":"dropShadow"};
-export const calciteBoxShadow_2 = {"x":"0","y":"4","blur":"16","spread":"0","color":"rgba(#000000, 8%)","type":"dropShadow"};
-export const calciteBoxShadow_3 = {"x":"0","y":"4","blur":"20","spread":"0","color":"rgba(#000000, 8%)","type":"dropShadow"};
-export const calciteBoxShadow_4 = {"x":"0","y":"12","blur":"32","spread":"-2","color":"rgba(#000000, 10%)","type":"dropShadow"};
-export const calciteBoxShadowNone = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0%)","type":"dropShadow"};
-export const calciteColorNeutralBlk_000 = "#ffffff";
-export const calciteColorNeutralBlk_005 = "#f8f8f8";
-export const calciteColorNeutralBlk_010 = "#f3f3f3";
-export const calciteColorNeutralBlk_020 = "#eaeaea";
-export const calciteColorNeutralBlk_030 = "#dfdfdf";
-export const calciteColorNeutralBlk_040 = "#d4d4d4";
-export const calciteColorNeutralBlk_050 = "#cacaca";
-export const calciteColorNeutralBlk_060 = "#bfbfbf";
-export const calciteColorNeutralBlk_070 = "#b5b5b5";
-export const calciteColorNeutralBlk_080 = "#aaaaaa";
-export const calciteColorNeutralBlk_090 = "#9f9f9f";
-export const calciteColorNeutralBlk_100 = "#949494";
-export const calciteColorNeutralBlk_110 = "#8a8a8a";
-export const calciteColorNeutralBlk_120 = "#808080";
-export const calciteColorNeutralBlk_130 = "#757575";
-export const calciteColorNeutralBlk_140 = "#6a6a6a";
-export const calciteColorNeutralBlk_150 = "#606060";
-export const calciteColorNeutralBlk_160 = "#555555";
-export const calciteColorNeutralBlk_170 = "#4a4a4a";
-export const calciteColorNeutralBlk_180 = "#404040";
-export const calciteColorNeutralBlk_190 = "#353535";
-export const calciteColorNeutralBlk_200 = "#2b2b2b";
-export const calciteColorNeutralBlk_210 = "#202020";
-export const calciteColorNeutralBlk_220 = "#151515";
-export const calciteColorNeutralBlk_230 = "#0b0b0b";
-export const calciteColorNeutralBlk_235 = "#060606";
-export const calciteColorNeutralBlk_240 = "#000000";
-export const calciteColorHighSaturationBlueHBb_010 = "#c7eaff";
-export const calciteColorHighSaturationBlueHBb_020 = "#9fd4f3";
-export const calciteColorHighSaturationBlueHBb_030 = "#77bde7";
-export const calciteColorHighSaturationBlueHBb_040 = "#50a7da";
-export const calciteColorHighSaturationBlueHBb_050 = "#2890ce";
-export const calciteColorHighSaturationBlueHBb_060 = "#007ac2";
-export const calciteColorHighSaturationBlueHBb_070 = "#00619b";
-export const calciteColorHighSaturationBlueHBb_080 = "#004874";
-export const calciteColorHighSaturationBlueHBb_090 = "#00304d";
-export const calciteColorHighSaturationBlueHBb_100 = "#001726";
-export const calciteColorHighSaturationGreenBlueHGb_010 = "#cef5f4";
-export const calciteColorHighSaturationGreenBlueHGb_020 = "#afedec";
-export const calciteColorHighSaturationGreenBlueHGb_030 = "#8fe6e5";
-export const calciteColorHighSaturationGreenBlueHGb_040 = "#5ae0de";
-export const calciteColorHighSaturationGreenBlueHGb_050 = "#28cecb";
-export const calciteColorHighSaturationGreenBlueHGb_060 = "#00bab5";
-export const calciteColorHighSaturationGreenBlueHGb_070 = "#009b98";
-export const calciteColorHighSaturationGreenBlueHGb_080 = "#007472";
-export const calciteColorHighSaturationGreenBlueHGb_090 = "#004d4c";
-export const calciteColorHighSaturationGreenBlueHGb_100 = "#002625";
-export const calciteColorHighSaturationGreenHGg_010 = "#bdf2c4";
-export const calciteColorHighSaturationGreenHGg_020 = "#a2e4ab";
-export const calciteColorHighSaturationGreenHGg_030 = "#87d692";
-export const calciteColorHighSaturationGreenHGg_040 = "#6bc878";
-export const calciteColorHighSaturationGreenHGg_050 = "#50ba5f";
-export const calciteColorHighSaturationGreenHGg_060 = "#35ac46";
-export const calciteColorHighSaturationGreenHGg_070 = "#288835";
-export const calciteColorHighSaturationGreenHGg_080 = "#1a6324";
-export const calciteColorHighSaturationGreenHGg_090 = "#0d3f14";
-export const calciteColorHighSaturationGreenHGg_100 = "#001a03";
-export const calciteColorHighSaturationYellowGreenHYg_010 = "#e5f7b4";
-export const calciteColorHighSaturationYellowGreenHYg_020 = "#d9ef9f";
-export const calciteColorHighSaturationYellowGreenHYg_030 = "#cde78a";
-export const calciteColorHighSaturationYellowGreenHYg_040 = "#c2e075";
-export const calciteColorHighSaturationYellowGreenHYg_050 = "#b6d860";
-export const calciteColorHighSaturationYellowGreenHYg_060 = "#aad04b";
-export const calciteColorHighSaturationYellowGreenHYg_070 = "#84a338";
-export const calciteColorHighSaturationYellowGreenHYg_080 = "#5e7526";
-export const calciteColorHighSaturationYellowGreenHYg_090 = "#384813";
-export const calciteColorHighSaturationYellowGreenHYg_100 = "#121a00";
-export const calciteColorHighSaturationYellowHYy_010 = "#fff7cc";
-export const calciteColorHighSaturationYellowHYy_020 = "#fef3ad";
-export const calciteColorHighSaturationYellowHYy_030 = "#fcee8d";
-export const calciteColorHighSaturationYellowHYy_040 = "#fbea6e";
-export const calciteColorHighSaturationYellowHYy_050 = "#f9e54e";
-export const calciteColorHighSaturationYellowHYy_060 = "#edd317";
-export const calciteColorHighSaturationYellowHYy_070 = "#d9bc00";
-export const calciteColorHighSaturationYellowHYy_080 = "#bfa200";
-export const calciteColorHighSaturationYellowHYy_090 = "#8c7500";
-export const calciteColorHighSaturationYellowHYy_100 = "#5c4e00";
-export const calciteColorHighSaturationOrangeYellowHOy_010 = "#ffe2bf";
-export const calciteColorHighSaturationOrangeYellowHOy_020 = "#fed3a1";
-export const calciteColorHighSaturationOrangeYellowHOy_030 = "#fcc582";
-export const calciteColorHighSaturationOrangeYellowHOy_040 = "#fbb664";
-export const calciteColorHighSaturationOrangeYellowHOy_050 = "#f9a845";
-export const calciteColorHighSaturationOrangeYellowHOy_060 = "#f89927";
-export const calciteColorHighSaturationOrangeYellowHOy_070 = "#c67718";
-export const calciteColorHighSaturationOrangeYellowHOy_080 = "#9a5b10";
-export const calciteColorHighSaturationOrangeYellowHOy_090 = "#6d3f08";
-export const calciteColorHighSaturationOrangeYellowHOy_100 = "#402300";
-export const calciteColorHighSaturationOrangeHOo_010 = "#ffd8bf";
-export const calciteColorHighSaturationOrangeHOo_020 = "#fdc39f";
-export const calciteColorHighSaturationOrangeHOo_030 = "#faae7f";
-export const calciteColorHighSaturationOrangeHOo_040 = "#f89960";
-export const calciteColorHighSaturationOrangeHOo_050 = "#f58440";
-export const calciteColorHighSaturationOrangeHOo_060 = "#f36f20";
-export const calciteColorHighSaturationOrangeHOo_070 = "#c65a18";
-export const calciteColorHighSaturationOrangeHOo_080 = "#9a4410";
-export const calciteColorHighSaturationOrangeHOo_090 = "#6d2f08";
-export const calciteColorHighSaturationOrangeHOo_100 = "#401900";
-export const calciteColorHighSaturationRedOrangeHRo_010 = "#ffc7b3";
-export const calciteColorHighSaturationRedOrangeHRo_020 = "#f8af95";
-export const calciteColorHighSaturationRedOrangeHRo_030 = "#f09677";
-export const calciteColorHighSaturationRedOrangeHRo_040 = "#e97e5a";
-export const calciteColorHighSaturationRedOrangeHRo_050 = "#e1653c";
-export const calciteColorHighSaturationRedOrangeHRo_060 = "#da4d1e";
-export const calciteColorHighSaturationRedOrangeHRo_070 = "#ad3c16";
-export const calciteColorHighSaturationRedOrangeHRo_080 = "#802c0f";
-export const calciteColorHighSaturationRedOrangeHRo_090 = "#531b07";
-export const calciteColorHighSaturationRedOrangeHRo_100 = "#260a00";
-export const calciteColorHighSaturationRedHRr_010 = "#ffc6bf";
-export const calciteColorHighSaturationRedHRr_020 = "#ffaaa1";
-export const calciteColorHighSaturationRedHRr_030 = "#f2877b";
-export const calciteColorHighSaturationRedHRr_040 = "#f07062";
-export const calciteColorHighSaturationRedHRr_050 = "#e65240";
-export const calciteColorHighSaturationRedHRr_060 = "#d83020";
-export const calciteColorHighSaturationRedHRr_070 = "#a82b1e";
-export const calciteColorHighSaturationRedHRr_080 = "#7c1d13";
-export const calciteColorHighSaturationRedHRr_090 = "#4f0e08";
-export const calciteColorHighSaturationRedHRr_100 = "#210300";
-export const calciteColorHighSaturationPinkHPk_010 = "#ffd1ef";
-export const calciteColorHighSaturationPinkHPk_020 = "#fabee4";
-export const calciteColorHighSaturationPinkHPk_030 = "#f2a5d6";
-export const calciteColorHighSaturationPinkHPk_040 = "#eb8dc9";
-export const calciteColorHighSaturationPinkHPk_050 = "#e673bb";
-export const calciteColorHighSaturationPinkHPk_060 = "#e04ea6";
-export const calciteColorHighSaturationPinkHPk_070 = "#ba2f7e";
-export const calciteColorHighSaturationPinkHPk_080 = "#851b52";
-export const calciteColorHighSaturationPinkHPk_090 = "#590b32";
-export const calciteColorHighSaturationPinkHPk_100 = "#260404";
-export const calciteColorHighSaturationVioletRedHVr_010 = "#fadbff";
-export const calciteColorHighSaturationVioletRedHVr_020 = "#e4beeb";
-export const calciteColorHighSaturationVioletRedHVr_030 = "#cfa1d7";
-export const calciteColorHighSaturationVioletRedHVr_040 = "#b983c3";
-export const calciteColorHighSaturationVioletRedHVr_050 = "#a466af";
-export const calciteColorHighSaturationVioletRedHVr_060 = "#8e499b";
-export const calciteColorHighSaturationVioletRedHVr_070 = "#73377e";
-export const calciteColorHighSaturationVioletRedHVr_080 = "#572561";
-export const calciteColorHighSaturationVioletRedHVr_090 = "#3c1243";
-export const calciteColorHighSaturationVioletRedHVr_100 = "#200026";
-export const calciteColorHighSaturationVioletHVv_010 = "#e8d9ff";
-export const calciteColorHighSaturationVioletHVv_020 = "#cdb9eb";
-export const calciteColorHighSaturationVioletHVv_030 = "#b39ad7";
-export const calciteColorHighSaturationVioletHVv_040 = "#987ac3";
-export const calciteColorHighSaturationVioletHVv_050 = "#7e5baf";
-export const calciteColorHighSaturationVioletHVv_060 = "#633b9b";
-export const calciteColorHighSaturationVioletHVv_070 = "#4e2c7e";
-export const calciteColorHighSaturationVioletHVv_080 = "#3a1e61";
-export const calciteColorHighSaturationVioletHVv_090 = "#250f43";
-export const calciteColorHighSaturationVioletHVv_100 = "#100026";
-export const calciteColorVibrantBlueVBb_120 = "#59d6ff";
-export const calciteColorVibrantBlueVBb_140 = "#3db8ff";
-export const calciteColorVibrantBlueVBb_160 = "#009af2";
-export const calciteColorVibrantBlueVBb_180 = "#009af2";
-export const calciteColorVibrantGreenBlueVGb_120 = "#59fffc";
-export const calciteColorVibrantGreenBlueVGb_140 = "#00f7f3";
-export const calciteColorVibrantGreenBlueVGb_160 = "#00e6e2";
-export const calciteColorVibrantGreenBlueVGb_180 = "#00cfca";
-export const calciteColorVibrantGreenVGg_120 = "#73ff84";
-export const calciteColorVibrantGreenVGg_140 = "#3bed52";
-export const calciteColorVibrantGreenVGg_160 = "#00b81b";
-export const calciteColorVibrantGreenVGg_180 = "#00a118";
-export const calciteColorVibrantYellowGreenVYg_120 = "#d7ff73";
-export const calciteColorVibrantYellowGreenVYg_140 = "#bbed3b";
-export const calciteColorVibrantYellowGreenVYg_160 = "#96cc00";
-export const calciteColorVibrantYellowGreenVYg_180 = "#7fab00";
-export const calciteColorVibrantYellowVYy_120 = "#fff766";
-export const calciteColorVibrantYellowVYy_140 = "#ffee33";
-export const calciteColorVibrantYellowVYy_160 = "#f5d000";
-export const calciteColorVibrantYellowVYy_180 = "#ebba17";
-export const calciteColorVibrantOrangeYellowVOy_120 = "#ffb54d";
-export const calciteColorVibrantOrangeYellowVOy_140 = "#ff9500";
-export const calciteColorVibrantOrangeYellowVOy_160 = "#e68600";
-export const calciteColorVibrantOrangeYellowVOy_180 = "#d17300";
-export const calciteColorVibrantRedOrangeVRo_120 = "#ff824d";
-export const calciteColorVibrantRedOrangeVRo_140 = "#ff4d00";
-export const calciteColorVibrantRedOrangeVRo_160 = "#de4300";
-export const calciteColorVibrantRedOrangeVRo_180 = "#c93b00";
-export const calciteColorVibrantRedVRr_120 = "#ff624d";
-export const calciteColorVibrantRedVRr_140 = "#ff0015";
-export const calciteColorVibrantRedVRr_160 = "#d90012";
-export const calciteColorVibrantRedVRr_180 = "#b3000f";
-export const calciteColorVibrantPinkVPk_120 = "#ff66c2";
-export const calciteColorVibrantPinkVPk_140 = "#ff19a4";
-export const calciteColorVibrantPinkVPk_160 = "#d11486";
-export const calciteColorVibrantPinkVPk_180 = "#c00073";
-export const calciteColorVibrantVioletRedVVr_120 = "#ea80ff";
-export const calciteColorVibrantVioletRedVVr_140 = "#dd33ff";
-export const calciteColorVibrantVioletRedVVr_160 = "#ac08cc";
-export const calciteColorVibrantVioletRedVVr_180 = "#83009e";
-export const calciteColorVibrantVioletVVv_120 = "#b580ff";
-export const calciteColorVibrantVioletVVv_140 = "#974dff";
-export const calciteColorVibrantVioletVVv_160 = "#8129ff";
-export const calciteColorVibrantVioletVVv_180 = "#6a0be6";
-export const calciteColorDarkGreenDGg_410 = "#44ED51";
-export const calciteColorDarkGreenDGg_420 = "#36DA43";
-export const calciteColorDarkGreenDGg_430 = "#36DA43";
-export const calciteColorDarkYellowDYy_410 = "#FFE24D";
-export const calciteColorDarkYellowDYy_420 = "#FFC900";
-export const calciteColorDarkYellowDYy_430 = "#F4B000";
-export const calciteColorDarkRedDRr_410 = "#FF7465";
-export const calciteColorDarkRedDRr_420 = "#FE583E";
-export const calciteColorDarkRedDRr_430 = "#F3381B";
-export const calciteColorDarkBlueDBb_410 = "#47BBFF";
-export const calciteColorDarkBlueDBb_420 = "#00A0FF";
-export const calciteColorDarkBlueDBb_430 = "#0087D7";
-export const calciteContainerSize_0 = "0";
-export const calciteContainerSize_154 = "154px";
-export const calciteContainerSize_320 = "320px";
-export const calciteContainerSize_328 = "328px";
-export const calciteContainerSize_476 = "476px";
-export const calciteContainerSize_504 = "504px";
-export const calciteContainerSize_678 = "678px";
-export const calciteContainerSize_768 = "768px";
-export const calciteContainerSize_854 = "854px";
-export const calciteContainerSize_1152 = "1152px";
-export const calciteContainerSize_1440 = "1440px";
-export const calciteFontFamilyPrimary = "Avenir Next LT Pro";
-export const calciteFontFamilySecondary = "Avenir Next World";
-export const calciteFontFamilyCode = "Monaco";
+export const calciteColorNeutralBlk000 = "#ffffff";
+export const calciteColorNeutralBlk005 = "#f8f8f8";
+export const calciteColorNeutralBlk010 = "#f3f3f3";
+export const calciteColorNeutralBlk020 = "#eaeaea";
+export const calciteColorNeutralBlk030 = "#dfdfdf";
+export const calciteColorNeutralBlk040 = "#d4d4d4";
+export const calciteColorNeutralBlk050 = "#cacaca";
+export const calciteColorNeutralBlk060 = "#bfbfbf";
+export const calciteColorNeutralBlk070 = "#b5b5b5";
+export const calciteColorNeutralBlk080 = "#aaaaaa";
+export const calciteColorNeutralBlk090 = "#9f9f9f";
+export const calciteColorNeutralBlk100 = "#949494";
+export const calciteColorNeutralBlk110 = "#8a8a8a";
+export const calciteColorNeutralBlk120 = "#808080";
+export const calciteColorNeutralBlk130 = "#757575";
+export const calciteColorNeutralBlk140 = "#6a6a6a";
+export const calciteColorNeutralBlk150 = "#606060";
+export const calciteColorNeutralBlk160 = "#555555";
+export const calciteColorNeutralBlk170 = "#4a4a4a";
+export const calciteColorNeutralBlk180 = "#404040";
+export const calciteColorNeutralBlk190 = "#353535";
+export const calciteColorNeutralBlk200 = "#2b2b2b";
+export const calciteColorNeutralBlk210 = "#202020";
+export const calciteColorNeutralBlk220 = "#151515";
+export const calciteColorNeutralBlk230 = "#0b0b0b";
+export const calciteColorNeutralBlk235 = "#060606";
+export const calciteColorNeutralBlk240 = "#000000";
+export const calciteColorHighSaturationBlueHBb010 = "#c7eaff";
+export const calciteColorHighSaturationBlueHBb020 = "#9fd4f3";
+export const calciteColorHighSaturationBlueHBb030 = "#77bde7";
+export const calciteColorHighSaturationBlueHBb040 = "#50a7da";
+export const calciteColorHighSaturationBlueHBb050 = "#2890ce";
+export const calciteColorHighSaturationBlueHBb060 = "#007ac2";
+export const calciteColorHighSaturationBlueHBb070 = "#00619b";
+export const calciteColorHighSaturationBlueHBb080 = "#004874";
+export const calciteColorHighSaturationBlueHBb090 = "#00304d";
+export const calciteColorHighSaturationBlueHBb100 = "#001726";
+export const calciteColorHighSaturationGreenBlueHGb010 = "#cef5f4";
+export const calciteColorHighSaturationGreenBlueHGb020 = "#afedec";
+export const calciteColorHighSaturationGreenBlueHGb030 = "#8fe6e5";
+export const calciteColorHighSaturationGreenBlueHGb040 = "#5ae0de";
+export const calciteColorHighSaturationGreenBlueHGb050 = "#28cecb";
+export const calciteColorHighSaturationGreenBlueHGb060 = "#00bab5";
+export const calciteColorHighSaturationGreenBlueHGb070 = "#009b98";
+export const calciteColorHighSaturationGreenBlueHGb080 = "#007472";
+export const calciteColorHighSaturationGreenBlueHGb090 = "#004d4c";
+export const calciteColorHighSaturationGreenBlueHGb100 = "#002625";
+export const calciteColorHighSaturationGreenHGg010 = "#bdf2c4";
+export const calciteColorHighSaturationGreenHGg020 = "#a2e4ab";
+export const calciteColorHighSaturationGreenHGg030 = "#87d692";
+export const calciteColorHighSaturationGreenHGg040 = "#6bc878";
+export const calciteColorHighSaturationGreenHGg050 = "#50ba5f";
+export const calciteColorHighSaturationGreenHGg060 = "#35ac46";
+export const calciteColorHighSaturationGreenHGg070 = "#288835";
+export const calciteColorHighSaturationGreenHGg080 = "#1a6324";
+export const calciteColorHighSaturationGreenHGg090 = "#0d3f14";
+export const calciteColorHighSaturationGreenHGg100 = "#001a03";
+export const calciteColorHighSaturationYellowGreenHYg010 = "#e5f7b4";
+export const calciteColorHighSaturationYellowGreenHYg020 = "#d9ef9f";
+export const calciteColorHighSaturationYellowGreenHYg030 = "#cde78a";
+export const calciteColorHighSaturationYellowGreenHYg040 = "#c2e075";
+export const calciteColorHighSaturationYellowGreenHYg050 = "#b6d860";
+export const calciteColorHighSaturationYellowGreenHYg060 = "#aad04b";
+export const calciteColorHighSaturationYellowGreenHYg070 = "#84a338";
+export const calciteColorHighSaturationYellowGreenHYg080 = "#5e7526";
+export const calciteColorHighSaturationYellowGreenHYg090 = "#384813";
+export const calciteColorHighSaturationYellowGreenHYg100 = "#121a00";
+export const calciteColorHighSaturationYellowHYy010 = "#fff7cc";
+export const calciteColorHighSaturationYellowHYy020 = "#fef3ad";
+export const calciteColorHighSaturationYellowHYy030 = "#fcee8d";
+export const calciteColorHighSaturationYellowHYy040 = "#fbea6e";
+export const calciteColorHighSaturationYellowHYy050 = "#f9e54e";
+export const calciteColorHighSaturationYellowHYy060 = "#edd317";
+export const calciteColorHighSaturationYellowHYy070 = "#d9bc00";
+export const calciteColorHighSaturationYellowHYy080 = "#bfa200";
+export const calciteColorHighSaturationYellowHYy090 = "#8c7500";
+export const calciteColorHighSaturationYellowHYy100 = "#5c4e00";
+export const calciteColorHighSaturationOrangeYellowHOy010 = "#ffe2bf";
+export const calciteColorHighSaturationOrangeYellowHOy020 = "#fed3a1";
+export const calciteColorHighSaturationOrangeYellowHOy030 = "#fcc582";
+export const calciteColorHighSaturationOrangeYellowHOy040 = "#fbb664";
+export const calciteColorHighSaturationOrangeYellowHOy050 = "#f9a845";
+export const calciteColorHighSaturationOrangeYellowHOy060 = "#f89927";
+export const calciteColorHighSaturationOrangeYellowHOy070 = "#c67718";
+export const calciteColorHighSaturationOrangeYellowHOy080 = "#9a5b10";
+export const calciteColorHighSaturationOrangeYellowHOy090 = "#6d3f08";
+export const calciteColorHighSaturationOrangeYellowHOy100 = "#402300";
+export const calciteColorHighSaturationOrangeHOo010 = "#ffd8bf";
+export const calciteColorHighSaturationOrangeHOo020 = "#fdc39f";
+export const calciteColorHighSaturationOrangeHOo030 = "#faae7f";
+export const calciteColorHighSaturationOrangeHOo040 = "#f89960";
+export const calciteColorHighSaturationOrangeHOo050 = "#f58440";
+export const calciteColorHighSaturationOrangeHOo060 = "#f36f20";
+export const calciteColorHighSaturationOrangeHOo070 = "#c65a18";
+export const calciteColorHighSaturationOrangeHOo080 = "#9a4410";
+export const calciteColorHighSaturationOrangeHOo090 = "#6d2f08";
+export const calciteColorHighSaturationOrangeHOo100 = "#401900";
+export const calciteColorHighSaturationRedOrangeHRo010 = "#ffc7b3";
+export const calciteColorHighSaturationRedOrangeHRo020 = "#f8af95";
+export const calciteColorHighSaturationRedOrangeHRo030 = "#f09677";
+export const calciteColorHighSaturationRedOrangeHRo040 = "#e97e5a";
+export const calciteColorHighSaturationRedOrangeHRo050 = "#e1653c";
+export const calciteColorHighSaturationRedOrangeHRo060 = "#da4d1e";
+export const calciteColorHighSaturationRedOrangeHRo070 = "#ad3c16";
+export const calciteColorHighSaturationRedOrangeHRo080 = "#802c0f";
+export const calciteColorHighSaturationRedOrangeHRo090 = "#531b07";
+export const calciteColorHighSaturationRedOrangeHRo100 = "#260a00";
+export const calciteColorHighSaturationRedHRr010 = "#ffc6bf";
+export const calciteColorHighSaturationRedHRr020 = "#ffaaa1";
+export const calciteColorHighSaturationRedHRr030 = "#f2877b";
+export const calciteColorHighSaturationRedHRr040 = "#f07062";
+export const calciteColorHighSaturationRedHRr050 = "#e65240";
+export const calciteColorHighSaturationRedHRr060 = "#d83020";
+export const calciteColorHighSaturationRedHRr070 = "#a82b1e";
+export const calciteColorHighSaturationRedHRr080 = "#7c1d13";
+export const calciteColorHighSaturationRedHRr090 = "#4f0e08";
+export const calciteColorHighSaturationRedHRr100 = "#210300";
+export const calciteColorHighSaturationPinkHPk010 = "#ffd1ef";
+export const calciteColorHighSaturationPinkHPk020 = "#fabee4";
+export const calciteColorHighSaturationPinkHPk030 = "#f2a5d6";
+export const calciteColorHighSaturationPinkHPk040 = "#eb8dc9";
+export const calciteColorHighSaturationPinkHPk050 = "#e673bb";
+export const calciteColorHighSaturationPinkHPk060 = "#e04ea6";
+export const calciteColorHighSaturationPinkHPk070 = "#ba2f7e";
+export const calciteColorHighSaturationPinkHPk080 = "#851b52";
+export const calciteColorHighSaturationPinkHPk090 = "#590b32";
+export const calciteColorHighSaturationPinkHPk100 = "#260404";
+export const calciteColorHighSaturationVioletRedHVr010 = "#fadbff";
+export const calciteColorHighSaturationVioletRedHVr020 = "#e4beeb";
+export const calciteColorHighSaturationVioletRedHVr030 = "#cfa1d7";
+export const calciteColorHighSaturationVioletRedHVr040 = "#b983c3";
+export const calciteColorHighSaturationVioletRedHVr050 = "#a466af";
+export const calciteColorHighSaturationVioletRedHVr060 = "#8e499b";
+export const calciteColorHighSaturationVioletRedHVr070 = "#73377e";
+export const calciteColorHighSaturationVioletRedHVr080 = "#572561";
+export const calciteColorHighSaturationVioletRedHVr090 = "#3c1243";
+export const calciteColorHighSaturationVioletRedHVr100 = "#200026";
+export const calciteColorHighSaturationVioletHVv010 = "#e8d9ff";
+export const calciteColorHighSaturationVioletHVv020 = "#cdb9eb";
+export const calciteColorHighSaturationVioletHVv030 = "#b39ad7";
+export const calciteColorHighSaturationVioletHVv040 = "#987ac3";
+export const calciteColorHighSaturationVioletHVv050 = "#7e5baf";
+export const calciteColorHighSaturationVioletHVv060 = "#633b9b";
+export const calciteColorHighSaturationVioletHVv070 = "#4e2c7e";
+export const calciteColorHighSaturationVioletHVv080 = "#3a1e61";
+export const calciteColorHighSaturationVioletHVv090 = "#250f43";
+export const calciteColorHighSaturationVioletHVv100 = "#100026";
+export const calciteColorVibrantBlueVBb120 = "#59d6ff";
+export const calciteColorVibrantBlueVBb140 = "#3db8ff";
+export const calciteColorVibrantBlueVBb160 = "#009af2";
+export const calciteColorVibrantBlueVBb180 = "#009af2";
+export const calciteColorVibrantGreenBlueVGb120 = "#59fffc";
+export const calciteColorVibrantGreenBlueVGb140 = "#00f7f3";
+export const calciteColorVibrantGreenBlueVGb160 = "#00e6e2";
+export const calciteColorVibrantGreenBlueVGb180 = "#00cfca";
+export const calciteColorVibrantGreenVGg120 = "#73ff84";
+export const calciteColorVibrantGreenVGg140 = "#3bed52";
+export const calciteColorVibrantGreenVGg160 = "#00b81b";
+export const calciteColorVibrantGreenVGg180 = "#00a118";
+export const calciteColorVibrantYellowGreenVYg120 = "#d7ff73";
+export const calciteColorVibrantYellowGreenVYg140 = "#bbed3b";
+export const calciteColorVibrantYellowGreenVYg160 = "#96cc00";
+export const calciteColorVibrantYellowGreenVYg180 = "#7fab00";
+export const calciteColorVibrantYellowVYy120 = "#fff766";
+export const calciteColorVibrantYellowVYy140 = "#ffee33";
+export const calciteColorVibrantYellowVYy160 = "#f5d000";
+export const calciteColorVibrantYellowVYy180 = "#ebba17";
+export const calciteColorVibrantOrangeYellowVOy120 = "#ffb54d";
+export const calciteColorVibrantOrangeYellowVOy140 = "#ff9500";
+export const calciteColorVibrantOrangeYellowVOy160 = "#e68600";
+export const calciteColorVibrantOrangeYellowVOy180 = "#d17300";
+export const calciteColorVibrantRedOrangeVRo120 = "#ff824d";
+export const calciteColorVibrantRedOrangeVRo140 = "#ff4d00";
+export const calciteColorVibrantRedOrangeVRo160 = "#de4300";
+export const calciteColorVibrantRedOrangeVRo180 = "#c93b00";
+export const calciteColorVibrantRedVRr120 = "#ff624d";
+export const calciteColorVibrantRedVRr140 = "#ff0015";
+export const calciteColorVibrantRedVRr160 = "#d90012";
+export const calciteColorVibrantRedVRr180 = "#b3000f";
+export const calciteColorVibrantPinkVPk120 = "#ff66c2";
+export const calciteColorVibrantPinkVPk140 = "#ff19a4";
+export const calciteColorVibrantPinkVPk160 = "#d11486";
+export const calciteColorVibrantPinkVPk180 = "#c00073";
+export const calciteColorVibrantVioletRedVVr120 = "#ea80ff";
+export const calciteColorVibrantVioletRedVVr140 = "#dd33ff";
+export const calciteColorVibrantVioletRedVVr160 = "#ac08cc";
+export const calciteColorVibrantVioletRedVVr180 = "#83009e";
+export const calciteColorVibrantVioletVVv120 = "#b580ff";
+export const calciteColorVibrantVioletVVv140 = "#974dff";
+export const calciteColorVibrantVioletVVv160 = "#8129ff";
+export const calciteColorVibrantVioletVVv180 = "#6a0be6";
+export const calciteColorDarkGreenDGg410 = "#44ED51";
+export const calciteColorDarkGreenDGg420 = "#36DA43";
+export const calciteColorDarkGreenDGg430 = "#36DA43";
+export const calciteColorDarkYellowDYy410 = "#FFE24D";
+export const calciteColorDarkYellowDYy420 = "#FFC900";
+export const calciteColorDarkYellowDYy430 = "#F4B000";
+export const calciteColorDarkRedDRr410 = "#FF7465";
+export const calciteColorDarkRedDRr420 = "#FE583E";
+export const calciteColorDarkRedDRr430 = "#F3381B";
+export const calciteColorDarkBlueDBb410 = "#47BBFF";
+export const calciteColorDarkBlueDBb420 = "#00A0FF";
+export const calciteColorDarkBlueDBb430 = "#0087D7";
+export const calciteContainerSize0 = "0";
+export const calciteContainerSize154 = "154px";
+export const calciteContainerSize320 = "320px";
+export const calciteContainerSize328 = "328px";
+export const calciteContainerSize476 = "476px";
+export const calciteContainerSize504 = "504px";
+export const calciteContainerSize678 = "678px";
+export const calciteContainerSize768 = "768px";
+export const calciteContainerSize854 = "854px";
+export const calciteContainerSize1152 = "1152px";
+export const calciteContainerSize1440 = "1440px";
+export const calciteFontFamilyAvenirNextPro = "Avenir Next LT Pro";
+export const calciteFontFamilyAvenirNextWorld = "Avenir Next World";
+export const calciteFontFamilyMonaco = "Monaco";
 export const calciteFontStyleItalic = "italic"; // used in ratings
 export const calciteFontWeightUltralight = "200"; // only for Avenir Next World (secondary font family)
 export const calciteFontWeightThin = "100";
@@ -779,169 +737,135 @@ export const calciteFontWeightBold = "700";
 export const calciteFontWeightExtrabold = "800"; // only for Avenir Next World (secondary font family)
 export const calciteFontWeightBlack = "900"; // only for Avenir Next World (secondary font family)
 export const calciteFontWeightHeavy = "900";
-export const calciteFontLineHeightFixed_0 = "12px";
-export const calciteFontLineHeightFixed_1 = "16px";
-export const calciteFontLineHeightFixed_2 = "20px";
-export const calciteFontLineHeightFixed_3 = "24px";
-export const calciteFontLineHeightFixed_4 = "28px";
-export const calciteFontLineHeightFixed_5 = "32px";
-export const calciteFontLineHeightFixed_6 = "36px";
-export const calciteFontLineHeightFixed_7 = "40px";
-export const calciteFontLineHeightFixed_8 = "48px";
-export const calciteFontLineHeightFixed_9 = "56px";
-export const calciteFontLineHeightFixed_10 = "64px";
-export const calciteFontLineHeightFixed_11 = "72px";
-export const calciteFontLineHeightFixed_12 = "80px";
-export const calciteFontLineHeightRelative = "auto"; // 1
-export const calciteFontLineHeightRelativeTight = "125%"; // 1.25
-export const calciteFontLineHeightRelativeSnug = "137.5%"; // 1.375
-export const calciteFontLineHeightRelativeNormal = "150%"; // 1.5
-export const calciteFontLineHeightRelativeRelaxed = "162.5%"; // 1.625
-export const calciteFontLineHeightRelativeLoose = "200%"; // 2
-export const calciteFontSize_0 = "10px";
-export const calciteFontSize_1 = "12px";
-export const calciteFontSize_2 = "14px";
-export const calciteFontSize_3 = "16px";
-export const calciteFontSize_4 = "18px";
-export const calciteFontSize_5 = "20px";
-export const calciteFontSize_6 = "24px";
-export const calciteFontSize_7 = "32px";
-export const calciteFontSize_8 = "40px";
-export const calciteFontSize_9 = "48px";
-export const calciteFontSize_10 = "56px";
-export const calciteFontSize_11 = "64px";
-export const calciteFontSize_12 = "72px";
-export const calciteFontSize_13 = "80px";
-export const calciteFontSize_14 = "96px";
-export const calciteFontSize_15 = "120px";
-export const calciteFontLetterSpacingTight = "-0.4px";
-export const calciteFontLetterSpacingNormal = "0px";
-export const calciteFontLetterSpacingWide = "0.4px";
-export const calciteFontParagraphSpacingNormal = "10px";
 export const calciteFontTextDecorationNone = "none";
 export const calciteFontTextDecorationUnderline = "underline";
 export const calciteFontTextCaseNone = "none";
 export const calciteFontTextCaseUppercase = "uppercase";
 export const calciteFontTextCaseLowercase = "lowercase";
 export const calciteFontTextCaseCapitalize = "capitalize";
-export const calciteOpacity_0 = "0%";
-export const calciteOpacity_4 = "4%";
-export const calciteOpacity_8 = "8%";
-export const calciteOpacity_10 = "10%";
-export const calciteOpacity_20 = "20%";
-export const calciteOpacity_30 = "30%";
-export const calciteOpacity_40 = "40%";
-export const calciteOpacity_50 = "50%";
-export const calciteOpacity_60 = "60%";
-export const calciteOpacity_70 = "70%";
-export const calciteOpacity_80 = "80%";
-export const calciteOpacity_85 = "85%";
-export const calciteOpacity_90 = "90%";
-export const calciteOpacity_92 = "92%";
-export const calciteOpacity_96 = "96%";
-export const calciteOpacity_100 = "100%";
-export const calciteSize_0 = "2px";
-export const calciteSize_1 = "4px";
-export const calciteSize_2 = "6px";
-export const calciteSize_3 = "8px";
-export const calciteSize_4 = "10px";
-export const calciteSize_5 = "12px";
-export const calciteSize_6 = "14px";
-export const calciteSize_7 = "16px";
-export const calciteSize_8 = "20px";
-export const calciteSize_9 = "24px";
-export const calciteSize_10 = "28px";
-export const calciteSize_11 = "32px";
-export const calciteSize_12 = "36px";
-export const calciteSize_13 = "40px";
-export const calciteSize_14 = "44px";
-export const calciteSize_15 = "48px";
-export const calciteSize_16 = "56px";
-export const calciteSize_17 = "64px";
-export const calciteSize_18 = "72px";
-export const calciteSize_19 = "80px";
-export const calciteSize_20 = "96px";
-export const calciteSize_21 = "112px";
-export const calciteSize_22 = "128px";
-export const calciteSize_23 = "144px";
-export const calciteSize_24 = "160px";
-export const calciteSize_25 = "192px";
-export const calciteSize_26 = "224px";
-export const calciteSize_27 = "256px";
-export const calciteSize_28 = "288px";
-export const calciteSizeNone = "0px";
-export const calciteSizeRelativeHalf = "50%";
-export const calciteSizeRelativeFull = "100%";
-export const calciteZIndex_0 = "-999999";
-export const calciteZIndex_1 = "1";
-export const calciteZIndex_3 = "300";
-export const calciteZIndex_4 = "400";
-export const calciteZIndex_5 = "500";
-export const calciteZIndex_6 = "600";
-export const calciteZIndex_7 = "700";
-export const calciteZIndex_8 = "800";
-export const calciteZIndex_9 = "900";"
+export const calciteOpacity0 = "0%";
+export const calciteOpacity4 = "4%";
+export const calciteOpacity8 = "8%";
+export const calciteOpacity10 = "10%";
+export const calciteOpacity20 = "20%";
+export const calciteOpacity30 = "30%";
+export const calciteOpacity40 = "40%";
+export const calciteOpacity50 = "50%";
+export const calciteOpacity60 = "60%";
+export const calciteOpacity70 = "70%";
+export const calciteOpacity80 = "80%";
+export const calciteOpacity85 = "85%";
+export const calciteOpacity90 = "90%";
+export const calciteOpacity92 = "92%";
+export const calciteOpacity96 = "96%";
+export const calciteOpacity100 = "100%";
+export const calciteShadow0 = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0%)"};
+export const calciteShadow1 = {"x":"0","y":"2","blur":"8","spread":"0","color":"rgba(#000000, 4%)"};
+export const calciteShadow2 = {"x":"0","y":"4","blur":"16","spread":"0","color":"rgba(#000000, 8%)"};
+export const calciteShadow3 = {"x":"0","y":"4","blur":"20","spread":"0","color":"rgba(#000000, 8%)"};
+export const calciteShadow4 = {"x":"0","y":"12","blur":"32","spread":"-2","color":"rgba(#000000, 10%)"};
+export const calciteSize1 = "1px";
+export const calciteSize2 = "2px";
+export const calciteSize4 = "4px";
+export const calciteSize6 = "6px";
+export const calciteSize8 = "8px";
+export const calciteSize10 = "10px";
+export const calciteSize12 = "12px";
+export const calciteSize14 = "14px";
+export const calciteSize16 = "16px";
+export const calciteSize20 = "20px";
+export const calciteSize24 = "24px";
+export const calciteSize28 = "28px";
+export const calciteSize32 = "32px";
+export const calciteSize36 = "36px";
+export const calciteSize40 = "40px";
+export const calciteSize44 = "44px";
+export const calciteSize48 = "48px";
+export const calciteSize56 = "56px";
+export const calciteSize64 = "64px";
+export const calciteSize72 = "72px";
+export const calciteSize80 = "80px";
+export const calciteSize96 = "96px";
+export const calciteSize112 = "112px";
+export const calciteSize128 = "128px";
+export const calciteSize144 = "144px";
+export const calciteSize160 = "160px";
+export const calciteSize192 = "192px";
+export const calciteSize224 = "224px";
+export const calciteSize256 = "256px";
+export const calciteSize288 = "288px";
+export const calciteSizeNone = "0";
+export const calciteSizeRelative50 = "50%";
+export const calciteSizeRelative100 = "100%";
+export const calciteSizeRelative125 = "125%";
+export const calciteSizeRelative137 = "137.5%";
+export const calciteSizeRelative150 = "150%";
+export const calciteSizeRelative162 = "162.5%";
+export const calciteSizeRelative200 = "200%";
+export const calciteSizeRelativeAuto = "auto";
+export const calciteZIndex0 = "-999999";
+export const calciteZIndex1 = "1";
+export const calciteZIndex3 = "300";
+export const calciteZIndex4 = "400";
+export const calciteZIndex5 = "500";
+export const calciteZIndex6 = "600";
+export const calciteZIndex7 = "700";
+export const calciteZIndex8 = "800";
+export const calciteZIndex9 = "900";"
 `;
 
 exports[`generated tokens ES6 global should match 1`] = `
 "/
 
-export const calciteBorderRadius = "0px";
-export const calciteBorderRadiusNone = "0px";
-export const calciteBorderRadiusSharp = "0px";
-export const calciteBorderRadiusRound = "4px";
-export const calciteBorderRadiusCircular = "50%";
-export const calciteBorderRadiusPill = "100%";
-export const calciteBorderRadiusSm = "4px";
-export const calciteBorderRadiusMd = "12px";
-export const calciteBorderRadiusLg = "16px";
-export const calciteBorderRadiusXl = "24px";
-export const calciteBorderWidthNone = "0px";
+export const calciteBorderWidthNone = "0";
 export const calciteBorderWidthSm = "1px";
 export const calciteBorderWidthMd = "2px";
 export const calciteBorderWidthLg = "4px";
-export const calciteBoxShadowNone = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0%)","type":"dropShadow"};
-export const calciteBoxShadowSm = [{"x":"0","y":"2","blur":"8","spread":"0","color":"rgba(#000000, 4%)","type":"dropShadow"},{"x":"0","y":"4","blur":"16","spread":"0","color":"rgba(#000000, 8%)","type":"dropShadow"}];
-export const calciteBoxShadowMd = [{"x":"0","y":"4","blur":"20","spread":"0","color":"rgba(#000000, 8%)","type":"dropShadow"},{"x":"0","y":"12","blur":"32","spread":"-2","color":"rgba(#000000, 10%)","type":"dropShadow"}];
+export const calciteCornerRadius = "0";
+export const calciteCornerRadiusSharp = "0";
+export const calciteCornerRadiusRound = "4px";
+export const calciteCornerRadiusPill = "100%";
+export const calciteColorBackground = {"light":"#f8f8f8","dark":"#353535"};
+export const calciteColorBackgroundNone = "rgba(#ffffff, 0%)";
+export const calciteColorForeground1 = {"light":"#ffffff","dark":"#2b2b2b"};
+export const calciteColorForeground2 = {"light":"#f3f3f3","dark":"#202020"};
+export const calciteColorForeground3 = {"light":"#eaeaea","dark":"#151515"};
+export const calciteColorForegroundCurrent = {"light":"#c7eaff","dark":"#214155"};
+export const calciteColorTransparent = {"light":"rgba(0, 0, 0, 0%)","dark":"rgba(255, 255, 255, 0%)"};
+export const calciteColorTransparentHover = {"light":"rgba(0, 0, 0, 4%)","dark":"rgba(255, 255, 255, 4%)"};
+export const calciteColorTransparentPress = {"light":"rgba(0, 0, 0, 8%)","dark":"rgba(255, 255, 255, 8%)"};
+export const calciteColorTransparentScrim = {"light":"rgba(255, 255, 255, 85%)","dark":"rgba(0, 0, 0, 85%)"};
+export const calciteColorTransparentTint = {"light":"rgba(255, 255, 255, 80%)","dark":"rgba(43, 43, 43, 80%)"};
 export const calciteColorBrand = {"light":"#007ac2","dark":"#009af2"};
 export const calciteColorBrandHover = {"light":"#00619b","dark":"#007ac2"};
 export const calciteColorBrandPress = {"light":"#004874","dark":"#00619b"};
 export const calciteColorBrandUnderline = {"light":"rgba(0, 97, 155, 40%)","dark":"rgba(0, 160, 255, 40%)"};
-export const calciteColorBackground = {"light":"#f8f8f8","dark":"#353535"};
-export const calciteColorBackgroundTransparent = {"light":"rgba(255, 255, 255, 0%)","dark":"rgba(0, 0, 0, 0%)"};
-export const calciteColorBackgroundTransparentHover = {"light":"rgba(0, 0, 0, 4%)","dark":"rgba(255, 255, 255, 4%)"};
-export const calciteColorBackgroundTransparentPress = {"light":"rgba(0, 0, 0, 8%)","dark":"rgba(255, 255, 255, 8%)"};
-export const calciteColorBackgroundTransparentScrim = {"light":"rgba(255, 255, 255, 85%)","dark":"rgba(0, 0, 0, 85%)"};
-export const calciteColorBackgroundTransparentDismiss = {"light":"rgba(255, 255, 255, 80%)","dark":"rgba(43, 43, 43, 80%)"};
-export const calciteColorBackgroundNone = "rgba(#ffffff, 0%)";
-export const calciteColorForeground_1 = {"light":"#ffffff","dark":"#2b2b2b"};
-export const calciteColorForeground_2 = {"light":"#f3f3f3","dark":"#202020"};
-export const calciteColorForeground_3 = {"light":"#eaeaea","dark":"#151515"};
-export const calciteColorForegroundCurrent = {"light":"#c7eaff","dark":"#214155"};
-export const calciteColorText_1 = {"light":"#151515","dark":"#ffffff"};
-export const calciteColorText_2 = {"light":"#4a4a4a","dark":"#bfbfbf"};
-export const calciteColorText_3 = {"light":"#6a6a6a","dark":"#9f9f9f"};
-export const calciteColorTextInverse = {"light":"#ffffff","dark":"#151515"};
-export const calciteColorTextLink = {"light":"#00619b","dark":"#00A0FF"};
-export const calciteColorBorder_1 = {"light":"#cacaca","dark":"#555555"};
-export const calciteColorBorder_2 = {"light":"#d4d4d4","dark":"#4a4a4a"};
-export const calciteColorBorder_3 = {"light":"#dfdfdf","dark":"#404040"};
-export const calciteColorBorderInput = {"light":"#949494","dark":"#757575"};
-export const calciteColorInfo = {"light":"#00619b","dark":"#00A0FF"};
-export const calciteColorInfoHover = {"light":"#004874","dark":"#3db8ff"};
-export const calciteColorInfoPress = {"light":"#00304d","dark":"#009af2"};
-export const calciteColorSuccess = {"light":"#35ac46","dark":"#36DA43"};
-export const calciteColorSuccessHover = {"light":"#288835","dark":"#3bed52"};
-export const calciteColorSuccessPress = {"light":"#1a6324","dark":"#00b81b"};
-export const calciteColorWarning = {"light":"#edd317","dark":"#FFC900"};
-export const calciteColorWarningHover = {"light":"#d9bc00","dark":"#ffee33"};
-export const calciteColorWarningPress = {"light":"#bfa200","dark":"#f5d000"};
-export const calciteColorDanger = {"light":"#d83020","dark":"#FE583E"};
-export const calciteColorDangerHover = {"light":"#a82b1e","dark":"#ff0015"};
-export const calciteColorDangerPress = {"light":"#7c1d13","dark":"#d90012"};
+export const calciteColorStatusInfo = {"light":"#00619b","dark":"#00A0FF"};
+export const calciteColorStatusInfoHover = {"light":"#004874","dark":"#3db8ff"};
+export const calciteColorStatusInfoPress = {"light":"#00304d","dark":"#009af2"};
+export const calciteColorStatusSuccess = {"light":"#35ac46","dark":"#36DA43"};
+export const calciteColorStatusSuccessHover = {"light":"#288835","dark":"#3bed52"};
+export const calciteColorStatusSuccessPress = {"light":"#1a6324","dark":"#00b81b"};
+export const calciteColorStatusWarning = {"light":"#edd317","dark":"#FFC900"};
+export const calciteColorStatusWarningHover = {"light":"#d9bc00","dark":"#ffee33"};
+export const calciteColorStatusWarningPress = {"light":"#bfa200","dark":"#f5d000"};
+export const calciteColorStatusDanger = {"light":"#d83020","dark":"#FE583E"};
+export const calciteColorStatusDangerHover = {"light":"#a82b1e","dark":"#ff0015"};
+export const calciteColorStatusDangerPress = {"light":"#7c1d13","dark":"#d90012"};
 export const calciteColorInverse = {"light":"#353535","dark":"#f8f8f8"};
 export const calciteColorInverseHover = {"light":"#2b2b2b","dark":"#ffffff"};
 export const calciteColorInversePress = {"light":"#202020","dark":"#f3f3f3"};
+export const calciteColorText1 = {"light":"#151515","dark":"#ffffff"};
+export const calciteColorText2 = {"light":"#4a4a4a","dark":"#bfbfbf"};
+export const calciteColorText3 = {"light":"#6a6a6a","dark":"#9f9f9f"};
+export const calciteColorTextInverse = {"light":"#ffffff","dark":"#151515"};
+export const calciteColorTextLink = {"light":"#00619b","dark":"#00A0FF"};
+export const calciteColorBorder1 = {"light":"#cacaca","dark":"#555555"};
+export const calciteColorBorder2 = {"light":"#d4d4d4","dark":"#4a4a4a"};
+export const calciteColorBorder3 = {"light":"#dfdfdf","dark":"#404040"};
+export const calciteColorBorderInput = {"light":"#949494","dark":"#757575"};
+export const calciteColorBorderGhost = {"light":"rgba(0, 0, 0, 30%)","dark":"rgba(117, 117, 117, 30%)"};
+export const calciteColorBorderWhite = {"light":"#ffffff","dark":"#f8f8f8"};
 export const calciteContainerSizeHeightXxs = {"min":"0","max":"154px"}; // Small handheld devices and mini-windows
 export const calciteContainerSizeHeightXs = {"min":"155px","max":"328px"}; // Handheld devices
 export const calciteContainerSizeHeightSm = {"min":"329px","max":"504px"}; // Small tablets
@@ -959,6 +883,7 @@ export const calciteContainerSizeGutter = "16px";
 export const calciteContainerSizeContentFluid = "100%"; // for fluid grid widths
 export const calciteContainerSizeContentFixed = "1440px"; // only for lg breakpoint fixed grid width
 export const calciteFontFamily = "Avenir Next LT Pro";
+export const calciteFontFamilyCode = "Monaco";
 export const calciteFontWeightLight = "300"; // For Avenir Next World (secondary font family)
 export const calciteFontWeightNormal = "400"; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular"
 export const calciteFontWeightRegular = "400";
@@ -983,10 +908,10 @@ export const calciteFontLineHeightRelativeSnug = "137.5%"; // 1.375
 export const calciteFontLineHeightRelativeNormal = "150%"; // 1.5
 export const calciteFontLineHeightRelativeRelaxed = "162.5%"; // 1.625
 export const calciteFontLineHeightRelativeLoose = "200%"; // 2
-export const calciteFontLetterSpacingTight = "-0.4px";
-export const calciteFontLetterSpacingNormal = "0px";
-export const calciteFontLetterSpacingWide = "0.4px";
-export const calciteFontParagraphSpacingNormal = "10px";
+export const calciteFontLetterSpacingTight = "-0.4";
+export const calciteFontLetterSpacingNormal = "0";
+export const calciteFontLetterSpacingWide = "0.4";
+export const calciteFontParagraphSpacingNormal = "4px";
 export const calciteFontTextDecorationNone = "none";
 export const calciteFontTextDecorationUnderline = "underline";
 export const calciteFontTextCaseNone = "none";
@@ -998,84 +923,85 @@ export const calciteOpacityHalf = "50%";
 export const calciteOpacityDark = "85%";
 export const calciteOpacityFull = "100%";
 export const calciteOpacityDisabled = "50%";
+export const calciteShadowNone = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0%)"};
+export const calciteShadowSm = [{"x":"0","y":"2","blur":"8","spread":"0","color":"rgba(#000000, 4%)"},{"x":"0","y":"4","blur":"16","spread":"0","color":"rgba(#000000, 8%)"}];
+export const calciteShadowMd = [{"x":"0","y":"4","blur":"20","spread":"0","color":"rgba(#000000, 8%)"},{"x":"0","y":"12","blur":"32","spread":"-2","color":"rgba(#000000, 10%)"}];
+export const calciteSizePx = "1px";
 export const calciteSizeXxxs = "2px";
 export const calciteSizeXxs = "4px";
 export const calciteSizeXs = "6px";
 export const calciteSizeSm = "8px";
-export const calciteSizeSmMd = "10px";
-export const calciteSizeMdSm = "12px";
-export const calciteSizeMd = "14px";
-export const calciteSizeMdLg = "16px";
-export const calciteSizeLgMd = "20px";
-export const calciteSizeLg = "24px";
-export const calciteSizeLgXl = "32px";
-export const calciteSizeXlLg = "44px";
-export const calciteSizeXl = "48px";
-export const calciteSizeXxl = "64px";
-export const calciteSizeXxxl = "96px";
-export const calciteSpacingNone = "0px";
+export const calciteSizeSmPlus = "10px";
+export const calciteSizeMd = "12px";
+export const calciteSizeMdPlus = "14px";
+export const calciteSizeLg = "16px";
+export const calciteSizeXl = "20px";
+export const calciteSizeXxl = "24px";
+export const calciteSizeXxxl = "32px";
+export const calciteSpacingPx = "1px";
 export const calciteSpacingBase = "2px";
-export const calciteSpacingHalf = "6px";
-export const calciteSpacingDouble = "20px";
-export const calciteSpacingXs = "4px";
+export const calciteSpacingXxs = "4px";
+export const calciteSpacingXs = "6px";
 export const calciteSpacingSm = "8px";
 export const calciteSpacingMd = "12px";
-export const calciteSpacingLg = "16px";
-export const calciteSpacingXl = "20px";
-export const calciteTypography = {"fontFamily":"Avenir Next LT Pro","fontSize":"14px","fontWeight":"400","letterSpacing":"0px","lineHeight":"16px","paragraphSpacing":"10px","textCase":"none","textDecoration":"none"};
-export const calciteTypographyLight__3h = {"fontSize":"10px","fontWeight":"300","lineHeight":"12px"};
-export const calciteTypographyLight__2h = {"fontSize":"12px","fontWeight":"300"};
-export const calciteTypographyLight__1h = {"fontWeight":"300"};
-export const calciteTypographyLight_0h = {"fontSize":"16px","fontWeight":"300","lineHeight":"20px"};
-export const calciteTypographyLight_1h = {"fontSize":"18px","fontWeight":"300","lineHeight":"24px"};
-export const calciteTypographyRegular__3h = {"lineHeight":"12px","fontSize":"10px"};
-export const calciteTypographyRegular__2h = {"fontSize":"12px"};
-export const calciteTypographyRegular__1h = {"fontFamily":"Avenir Next LT Pro","fontSize":"14px","fontWeight":"400","letterSpacing":"0px","lineHeight":"16px","paragraphSpacing":"10px","textCase":"none","textDecoration":"none"};
-export const calciteTypographyRegular_0h = {"lineHeight":"20px","fontSize":"16px"};
-export const calciteTypographyRegular_1h = {"lineHeight":"24px","fontSize":"18px"};
-export const calciteTypographyMedium__3h = {"fontWeight":"500","lineHeight":"12px","fontSize":"10px"};
-export const calciteTypographyMedium__2h = {"fontWeight":"500","fontSize":"12px"};
-export const calciteTypographyMedium__1h = {"fontWeight":"500"};
-export const calciteTypographyMedium_0h = {"fontWeight":"500","lineHeight":"20px","fontSize":"16px"};
-export const calciteTypographyMedium_1h = {"fontWeight":"500","lineHeight":"24px","fontSize":"18px"};
-export const calciteTypographyBold__3h = {"fontWeight":"600","lineHeight":"12px","fontSize":"10px"};
-export const calciteTypographyBold__2h = {"fontWeight":"600","fontSize":"12px"};
-export const calciteTypographyBold__1h = {"fontWeight":"600"};
-export const calciteTypographyBold_0h = {"fontWeight":"600","lineHeight":"20px","fontSize":"16px"};
-export const calciteTypographyBold_1h = {"fontWeight":"600","lineHeight":"24px","fontSize":"18px"};
-export const calciteTypographyWrapLight_0 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyWrapLight_1 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyWrapLight_2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyWrapLight_3 = {"fontWeight":"300","lineHeight":"125%","fontSize":"24px"};
-export const calciteTypographyWrapLight__2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"12px"};
-export const calciteTypographyWrapLight__1 = {"fontWeight":"300","lineHeight":"137.5%"};
-export const calciteTypographyWrapRegular_0 = {"lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyWrapRegular_1 = {"lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyWrapRegular_2 = {"lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyWrapRegular_3 = {"lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyWrapRegular__2 = {"lineHeight":"137.5%","fontSize":"12px"};
-export const calciteTypographyWrapRegular__1 = {"lineHeight":"137.5%"};
-export const calciteTypographyWrapMedium_0 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyWrapMedium_1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyWrapMedium_2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyWrapMedium_3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyWrapMedium__2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"12px"};
-export const calciteTypographyWrapMedium__1 = {"fontWeight":"500","lineHeight":"137.5%"};
-export const calciteTypographyWrapBold_0 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyWrapBold_1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyWrapBold_2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyWrapBold_3 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyWrapBold__2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"12px"};
-export const calciteTypographyWrapBold__1 = {"fontWeight":"600","lineHeight":"137.5%"};
-export const calciteTypographyHierarchyDisplay_1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyHierarchyDisplay_2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyHierarchyHeading_1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyHierarchyHeading_2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyHierarchyHeading_3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyHierarchyHeading_4 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyHierarchyHeading_5 = {"fontWeight":"500","lineHeight":"137.5%"};
+export const calciteSpacingLg = "14px";
+export const calciteSpacingXl = "16px";
+export const calciteSpacingXxl = "20px";
+export const calciteSpacingXxxl = "32px";
+export const calciteTypography = {"fontFamily":"Avenir Next LT Pro","fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
+export const calciteTypographyLightMinus3h = {"fontSize":"10px","fontWeight":"300","lineHeight":"12px"};
+export const calciteTypographyLightMinus2h = {"fontSize":"12px","fontWeight":"300"};
+export const calciteTypographyLightMinus1h = {"fontWeight":"300"};
+export const calciteTypographyLight0h = {"fontSize":"16px","fontWeight":"300","lineHeight":"20px"};
+export const calciteTypographyLight1h = {"fontSize":"18px","fontWeight":"300","lineHeight":"24px"};
+export const calciteTypographyRegularMinus3h = {"lineHeight":"12px","fontSize":"10px"};
+export const calciteTypographyRegularMinus2h = {"fontSize":"12px"};
+export const calciteTypographyRegularMinus1h = {"fontFamily":"Avenir Next LT Pro","fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
+export const calciteTypographyRegular0h = {"lineHeight":"20px","fontSize":"16px"};
+export const calciteTypographyRegular1h = {"lineHeight":"24px","fontSize":"18px"};
+export const calciteTypographyMediumMinus3h = {"fontWeight":"500","lineHeight":"12px","fontSize":"10px"};
+export const calciteTypographyMediumMinus2h = {"fontWeight":"500","fontSize":"12px"};
+export const calciteTypographyMediumMinus1h = {"fontWeight":"500"};
+export const calciteTypographyMedium0h = {"fontWeight":"500","lineHeight":"20px","fontSize":"16px"};
+export const calciteTypographyMedium1h = {"fontWeight":"500","lineHeight":"24px","fontSize":"18px"};
+export const calciteTypographyBoldMinus3h = {"fontWeight":"600","lineHeight":"12px","fontSize":"10px"};
+export const calciteTypographyBoldMinus2h = {"fontWeight":"600","fontSize":"12px"};
+export const calciteTypographyBoldMinus1h = {"fontWeight":"600"};
+export const calciteTypographyBold0h = {"fontWeight":"600","lineHeight":"20px","fontSize":"16px"};
+export const calciteTypographyBold1h = {"fontWeight":"600","lineHeight":"24px","fontSize":"18px"};
+export const calciteTypographyWrapLight0 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyWrapLight1 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyWrapLight2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyWrapLight3 = {"fontWeight":"300","lineHeight":"125%","fontSize":"24px"};
+export const calciteTypographyWrapLightMinus2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"12px"};
+export const calciteTypographyWrapLightMinus1 = {"fontWeight":"300","lineHeight":"137.5%"};
+export const calciteTypographyWrapRegular0 = {"lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyWrapRegular1 = {"lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyWrapRegular2 = {"lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyWrapRegular3 = {"lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyWrapRegularMinus2 = {"lineHeight":"137.5%","fontSize":"12px"};
+export const calciteTypographyWrapRegularMinus1 = {"lineHeight":"137.5%"};
+export const calciteTypographyWrapMedium0 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyWrapMedium1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyWrapMedium2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyWrapMedium3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyWrapMediumMinus2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"12px"};
+export const calciteTypographyWrapMediumMinus1 = {"fontWeight":"500","lineHeight":"137.5%"};
+export const calciteTypographyWrapBold0 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyWrapBold1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyWrapBold2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyWrapBold3 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyWrapBoldMinus2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"12px"};
+export const calciteTypographyWrapBoldMinus1 = {"fontWeight":"600","lineHeight":"137.5%"};
+export const calciteTypographyHierarchyDisplay1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyHierarchyDisplay2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyHierarchyHeading1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
+export const calciteTypographyHierarchyHeading2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
+export const calciteTypographyHierarchyHeading3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
+export const calciteTypographyHierarchyHeading4 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
+export const calciteTypographyHierarchyHeading5 = {"fontWeight":"500","lineHeight":"137.5%"};
 export const calciteTypographyHierarchyBodySnug = {"lineHeight":"137.5%"};
-export const calciteTypographyHierarchyBody = {"fontFamily":"Avenir Next LT Pro","fontSize":"14px","fontWeight":"400","letterSpacing":"0px","lineHeight":"16px","paragraphSpacing":"10px","textCase":"none","textDecoration":"none"};
+export const calciteTypographyHierarchyBody = {"fontFamily":"Avenir Next LT Pro","fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
 export const calciteTypographyHierarchyOverline = {"lineHeight":"12px","textCase":"uppercase","fontWeight":"700"};
 export const calciteTypographyHierarchyCaption = {"lineHeight":"137.5%","fontSize":"12px"};
 export const calciteZIndexDeep = "-999999";
@@ -1093,62 +1019,55 @@ export const calciteZIndexTooltip = "901";"
 exports[`generated tokens ES6 types should match 1`] = `
 "/
 
-export const calciteBorderRadius : string;
-export const calciteBorderRadiusNone : string;
-export const calciteBorderRadiusSharp : string;
-export const calciteBorderRadiusRound : string;
-export const calciteBorderRadiusCircular : string;
-export const calciteBorderRadiusPill : string;
-export const calciteBorderRadiusSm : string;
-export const calciteBorderRadiusMd : string;
-export const calciteBorderRadiusLg : string;
-export const calciteBorderRadiusXl : string;
 export const calciteBorderWidthNone : string;
 export const calciteBorderWidthSm : string;
 export const calciteBorderWidthMd : string;
 export const calciteBorderWidthLg : string;
-export const calciteBoxShadowNone : { x: string, y: string, blur: string, spread: string, color: string, type: string };
-export const calciteBoxShadowSm : { x: string, y: string, blur: string, spread: string, color: string, type: string }[];
-export const calciteBoxShadowMd : { x: string, y: string, blur: string, spread: string, color: string, type: string }[];
+export const calciteCornerRadius : string;
+export const calciteCornerRadiusSharp : string;
+export const calciteCornerRadiusRound : string;
+export const calciteCornerRadiusPill : string;
+export const calciteColorBackground : { light: string, dark: string };
+export const calciteColorBackgroundNone : string;
+export const calciteColorForeground1 : { light: string, dark: string };
+export const calciteColorForeground2 : { light: string, dark: string };
+export const calciteColorForeground3 : { light: string, dark: string };
+export const calciteColorForegroundCurrent : { light: string, dark: string };
+export const calciteColorTransparent : { light: string, dark: string };
+export const calciteColorTransparentHover : { light: string, dark: string };
+export const calciteColorTransparentPress : { light: string, dark: string };
+export const calciteColorTransparentScrim : { light: string, dark: string };
+export const calciteColorTransparentTint : { light: string, dark: string };
 export const calciteColorBrand : { light: string, dark: string };
 export const calciteColorBrandHover : { light: string, dark: string };
 export const calciteColorBrandPress : { light: string, dark: string };
 export const calciteColorBrandUnderline : { light: string, dark: string };
-export const calciteColorBackground : { light: string, dark: string };
-export const calciteColorBackgroundTransparent : { light: string, dark: string };
-export const calciteColorBackgroundTransparentHover : { light: string, dark: string };
-export const calciteColorBackgroundTransparentPress : { light: string, dark: string };
-export const calciteColorBackgroundTransparentScrim : { light: string, dark: string };
-export const calciteColorBackgroundTransparentDismiss : { light: string, dark: string };
-export const calciteColorBackgroundNone : string;
-export const calciteColorForeground_1 : { light: string, dark: string };
-export const calciteColorForeground_2 : { light: string, dark: string };
-export const calciteColorForeground_3 : { light: string, dark: string };
-export const calciteColorForegroundCurrent : { light: string, dark: string };
-export const calciteColorText_1 : { light: string, dark: string };
-export const calciteColorText_2 : { light: string, dark: string };
-export const calciteColorText_3 : { light: string, dark: string };
-export const calciteColorTextInverse : { light: string, dark: string };
-export const calciteColorTextLink : { light: string, dark: string };
-export const calciteColorBorder_1 : { light: string, dark: string };
-export const calciteColorBorder_2 : { light: string, dark: string };
-export const calciteColorBorder_3 : { light: string, dark: string };
-export const calciteColorBorderInput : { light: string, dark: string };
-export const calciteColorInfo : { light: string, dark: string };
-export const calciteColorInfoHover : { light: string, dark: string };
-export const calciteColorInfoPress : { light: string, dark: string };
-export const calciteColorSuccess : { light: string, dark: string };
-export const calciteColorSuccessHover : { light: string, dark: string };
-export const calciteColorSuccessPress : { light: string, dark: string };
-export const calciteColorWarning : { light: string, dark: string };
-export const calciteColorWarningHover : { light: string, dark: string };
-export const calciteColorWarningPress : { light: string, dark: string };
-export const calciteColorDanger : { light: string, dark: string };
-export const calciteColorDangerHover : { light: string, dark: string };
-export const calciteColorDangerPress : { light: string, dark: string };
+export const calciteColorStatusInfo : { light: string, dark: string };
+export const calciteColorStatusInfoHover : { light: string, dark: string };
+export const calciteColorStatusInfoPress : { light: string, dark: string };
+export const calciteColorStatusSuccess : { light: string, dark: string };
+export const calciteColorStatusSuccessHover : { light: string, dark: string };
+export const calciteColorStatusSuccessPress : { light: string, dark: string };
+export const calciteColorStatusWarning : { light: string, dark: string };
+export const calciteColorStatusWarningHover : { light: string, dark: string };
+export const calciteColorStatusWarningPress : { light: string, dark: string };
+export const calciteColorStatusDanger : { light: string, dark: string };
+export const calciteColorStatusDangerHover : { light: string, dark: string };
+export const calciteColorStatusDangerPress : { light: string, dark: string };
 export const calciteColorInverse : { light: string, dark: string };
 export const calciteColorInverseHover : { light: string, dark: string };
 export const calciteColorInversePress : { light: string, dark: string };
+export const calciteColorText1 : { light: string, dark: string };
+export const calciteColorText2 : { light: string, dark: string };
+export const calciteColorText3 : { light: string, dark: string };
+export const calciteColorTextInverse : { light: string, dark: string };
+export const calciteColorTextLink : { light: string, dark: string };
+export const calciteColorBorder1 : { light: string, dark: string };
+export const calciteColorBorder2 : { light: string, dark: string };
+export const calciteColorBorder3 : { light: string, dark: string };
+export const calciteColorBorderInput : { light: string, dark: string };
+export const calciteColorBorderGhost : { light: string, dark: string };
+export const calciteColorBorderWhite : { light: string, dark: string };
 export const calciteContainerSizeHeightXxs : { min: string, max: string }; // Small handheld devices and mini-windows
 export const calciteContainerSizeHeightXs : { min: string, max: string }; // Handheld devices
 export const calciteContainerSizeHeightSm : { min: string, max: string }; // Small tablets
@@ -1166,6 +1085,7 @@ export const calciteContainerSizeGutter : string;
 export const calciteContainerSizeContentFluid : string; // for fluid grid widths
 export const calciteContainerSizeContentFixed : string; // only for lg breakpoint fixed grid width
 export const calciteFontFamily : string;
+export const calciteFontFamilyCode : string;
 export const calciteFontWeightLight : string; // For Avenir Next World (secondary font family)
 export const calciteFontWeightNormal : string; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular"
 export const calciteFontWeightRegular : string;
@@ -1205,82 +1125,83 @@ export const calciteOpacityHalf : string;
 export const calciteOpacityDark : string;
 export const calciteOpacityFull : string;
 export const calciteOpacityDisabled : string;
+export const calciteShadowNone : { x: string, y: string, blur: string, spread: string, color: string };
+export const calciteShadowSm : { x: string, y: string, blur: string, spread: string, color: string }[];
+export const calciteShadowMd : { x: string, y: string, blur: string, spread: string, color: string }[];
+export const calciteSizePx : string;
 export const calciteSizeXxxs : string;
 export const calciteSizeXxs : string;
 export const calciteSizeXs : string;
 export const calciteSizeSm : string;
-export const calciteSizeSmMd : string;
-export const calciteSizeMdSm : string;
+export const calciteSizeSmPlus : string;
 export const calciteSizeMd : string;
-export const calciteSizeMdLg : string;
-export const calciteSizeLgMd : string;
+export const calciteSizeMdPlus : string;
 export const calciteSizeLg : string;
-export const calciteSizeLgXl : string;
-export const calciteSizeXlLg : string;
 export const calciteSizeXl : string;
 export const calciteSizeXxl : string;
 export const calciteSizeXxxl : string;
-export const calciteSpacingNone : string;
+export const calciteSpacingPx : string;
 export const calciteSpacingBase : string;
-export const calciteSpacingHalf : string;
-export const calciteSpacingDouble : string;
+export const calciteSpacingXxs : string;
 export const calciteSpacingXs : string;
 export const calciteSpacingSm : string;
 export const calciteSpacingMd : string;
 export const calciteSpacingLg : string;
 export const calciteSpacingXl : string;
+export const calciteSpacingXxl : string;
+export const calciteSpacingXxxl : string;
 export const calciteTypography : { fontFamily: string, fontSize: string, fontWeight: string, letterSpacing: string, lineHeight: string, paragraphSpacing: string, textCase: string, textDecoration: string };
-export const calciteTypographyLight__3h : { fontSize: string, fontWeight: string, lineHeight: string };
-export const calciteTypographyLight__2h : { fontSize: string, fontWeight: string };
-export const calciteTypographyLight__1h : { fontWeight: string };
-export const calciteTypographyLight_0h : { fontSize: string, fontWeight: string, lineHeight: string };
-export const calciteTypographyLight_1h : { fontSize: string, fontWeight: string, lineHeight: string };
-export const calciteTypographyRegular__3h : { lineHeight: string, fontSize: string };
-export const calciteTypographyRegular__2h : { fontSize: string };
-export const calciteTypographyRegular__1h : { fontFamily: string, fontSize: string, fontWeight: string, letterSpacing: string, lineHeight: string, paragraphSpacing: string, textCase: string, textDecoration: string };
-export const calciteTypographyRegular_0h : { lineHeight: string, fontSize: string };
-export const calciteTypographyRegular_1h : { lineHeight: string, fontSize: string };
-export const calciteTypographyMedium__3h : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyMedium__2h : { fontWeight: string, fontSize: string };
-export const calciteTypographyMedium__1h : { fontWeight: string };
-export const calciteTypographyMedium_0h : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyMedium_1h : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyBold__3h : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyBold__2h : { fontWeight: string, fontSize: string };
-export const calciteTypographyBold__1h : { fontWeight: string };
-export const calciteTypographyBold_0h : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyBold_1h : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapLight_0 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapLight_1 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapLight_2 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapLight_3 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapLight__2 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapLight__1 : { fontWeight: string, lineHeight: string };
-export const calciteTypographyWrapRegular_0 : { lineHeight: string, fontSize: string };
-export const calciteTypographyWrapRegular_1 : { lineHeight: string, fontSize: string };
-export const calciteTypographyWrapRegular_2 : { lineHeight: string, fontSize: string };
-export const calciteTypographyWrapRegular_3 : { lineHeight: string, fontSize: string };
-export const calciteTypographyWrapRegular__2 : { lineHeight: string, fontSize: string };
-export const calciteTypographyWrapRegular__1 : { lineHeight: string };
-export const calciteTypographyWrapMedium_0 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapMedium_1 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapMedium_2 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapMedium_3 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapMedium__2 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapMedium__1 : { fontWeight: string, lineHeight: string };
-export const calciteTypographyWrapBold_0 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapBold_1 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapBold_2 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapBold_3 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapBold__2 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyWrapBold__1 : { fontWeight: string, lineHeight: string };
-export const calciteTypographyHierarchyDisplay_1 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyHierarchyDisplay_2 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyHierarchyHeading_1 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyHierarchyHeading_2 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyHierarchyHeading_3 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyHierarchyHeading_4 : { fontWeight: string, lineHeight: string, fontSize: string };
-export const calciteTypographyHierarchyHeading_5 : { fontWeight: string, lineHeight: string };
+export const calciteTypographyLightMinus3h : { fontSize: string, fontWeight: string, lineHeight: string };
+export const calciteTypographyLightMinus2h : { fontSize: string, fontWeight: string };
+export const calciteTypographyLightMinus1h : { fontWeight: string };
+export const calciteTypographyLight0h : { fontSize: string, fontWeight: string, lineHeight: string };
+export const calciteTypographyLight1h : { fontSize: string, fontWeight: string, lineHeight: string };
+export const calciteTypographyRegularMinus3h : { lineHeight: string, fontSize: string };
+export const calciteTypographyRegularMinus2h : { fontSize: string };
+export const calciteTypographyRegularMinus1h : { fontFamily: string, fontSize: string, fontWeight: string, letterSpacing: string, lineHeight: string, paragraphSpacing: string, textCase: string, textDecoration: string };
+export const calciteTypographyRegular0h : { lineHeight: string, fontSize: string };
+export const calciteTypographyRegular1h : { lineHeight: string, fontSize: string };
+export const calciteTypographyMediumMinus3h : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyMediumMinus2h : { fontWeight: string, fontSize: string };
+export const calciteTypographyMediumMinus1h : { fontWeight: string };
+export const calciteTypographyMedium0h : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyMedium1h : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyBoldMinus3h : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyBoldMinus2h : { fontWeight: string, fontSize: string };
+export const calciteTypographyBoldMinus1h : { fontWeight: string };
+export const calciteTypographyBold0h : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyBold1h : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapLight0 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapLight1 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapLight2 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapLight3 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapLightMinus2 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapLightMinus1 : { fontWeight: string, lineHeight: string };
+export const calciteTypographyWrapRegular0 : { lineHeight: string, fontSize: string };
+export const calciteTypographyWrapRegular1 : { lineHeight: string, fontSize: string };
+export const calciteTypographyWrapRegular2 : { lineHeight: string, fontSize: string };
+export const calciteTypographyWrapRegular3 : { lineHeight: string, fontSize: string };
+export const calciteTypographyWrapRegularMinus2 : { lineHeight: string, fontSize: string };
+export const calciteTypographyWrapRegularMinus1 : { lineHeight: string };
+export const calciteTypographyWrapMedium0 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapMedium1 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapMedium2 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapMedium3 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapMediumMinus2 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapMediumMinus1 : { fontWeight: string, lineHeight: string };
+export const calciteTypographyWrapBold0 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapBold1 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapBold2 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapBold3 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapBoldMinus2 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyWrapBoldMinus1 : { fontWeight: string, lineHeight: string };
+export const calciteTypographyHierarchyDisplay1 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyHierarchyDisplay2 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyHierarchyHeading1 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyHierarchyHeading2 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyHierarchyHeading3 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyHierarchyHeading4 : { fontWeight: string, lineHeight: string, fontSize: string };
+export const calciteTypographyHierarchyHeading5 : { fontWeight: string, lineHeight: string };
 export const calciteTypographyHierarchyBodySnug : { lineHeight: string };
 export const calciteTypographyHierarchyBody : { fontFamily: string, fontSize: string, fontWeight: string, letterSpacing: string, lineHeight: string, paragraphSpacing: string, textCase: string, textDecoration: string };
 export const calciteTypographyHierarchyOverline : { lineHeight: string, textCase: string, fontWeight: string };
@@ -1300,229 +1221,223 @@ export const calciteZIndexTooltip : string;"
 exports[`generated tokens ES6 types should match 2`] = `
 "/
 
-export const calciteBoxShadow_0 : { x: string, y: string, blur: string, spread: string, color: string, type: string };
-export const calciteBoxShadow_1 : { x: string, y: string, blur: string, spread: string, color: string, type: string };
-export const calciteBoxShadow_2 : { x: string, y: string, blur: string, spread: string, color: string, type: string };
-export const calciteBoxShadow_3 : { x: string, y: string, blur: string, spread: string, color: string, type: string };
-export const calciteBoxShadow_4 : { x: string, y: string, blur: string, spread: string, color: string, type: string };
-export const calciteBoxShadowNone : { x: string, y: string, blur: string, spread: string, color: string, type: string };
-export const calciteColorNeutralBlk_000 : string;
-export const calciteColorNeutralBlk_005 : string;
-export const calciteColorNeutralBlk_010 : string;
-export const calciteColorNeutralBlk_020 : string;
-export const calciteColorNeutralBlk_030 : string;
-export const calciteColorNeutralBlk_040 : string;
-export const calciteColorNeutralBlk_050 : string;
-export const calciteColorNeutralBlk_060 : string;
-export const calciteColorNeutralBlk_070 : string;
-export const calciteColorNeutralBlk_080 : string;
-export const calciteColorNeutralBlk_090 : string;
-export const calciteColorNeutralBlk_100 : string;
-export const calciteColorNeutralBlk_110 : string;
-export const calciteColorNeutralBlk_120 : string;
-export const calciteColorNeutralBlk_130 : string;
-export const calciteColorNeutralBlk_140 : string;
-export const calciteColorNeutralBlk_150 : string;
-export const calciteColorNeutralBlk_160 : string;
-export const calciteColorNeutralBlk_170 : string;
-export const calciteColorNeutralBlk_180 : string;
-export const calciteColorNeutralBlk_190 : string;
-export const calciteColorNeutralBlk_200 : string;
-export const calciteColorNeutralBlk_210 : string;
-export const calciteColorNeutralBlk_220 : string;
-export const calciteColorNeutralBlk_230 : string;
-export const calciteColorNeutralBlk_235 : string;
-export const calciteColorNeutralBlk_240 : string;
-export const calciteColorHighSaturationBlueHBb_010 : string;
-export const calciteColorHighSaturationBlueHBb_020 : string;
-export const calciteColorHighSaturationBlueHBb_030 : string;
-export const calciteColorHighSaturationBlueHBb_040 : string;
-export const calciteColorHighSaturationBlueHBb_050 : string;
-export const calciteColorHighSaturationBlueHBb_060 : string;
-export const calciteColorHighSaturationBlueHBb_070 : string;
-export const calciteColorHighSaturationBlueHBb_080 : string;
-export const calciteColorHighSaturationBlueHBb_090 : string;
-export const calciteColorHighSaturationBlueHBb_100 : string;
-export const calciteColorHighSaturationGreenBlueHGb_010 : string;
-export const calciteColorHighSaturationGreenBlueHGb_020 : string;
-export const calciteColorHighSaturationGreenBlueHGb_030 : string;
-export const calciteColorHighSaturationGreenBlueHGb_040 : string;
-export const calciteColorHighSaturationGreenBlueHGb_050 : string;
-export const calciteColorHighSaturationGreenBlueHGb_060 : string;
-export const calciteColorHighSaturationGreenBlueHGb_070 : string;
-export const calciteColorHighSaturationGreenBlueHGb_080 : string;
-export const calciteColorHighSaturationGreenBlueHGb_090 : string;
-export const calciteColorHighSaturationGreenBlueHGb_100 : string;
-export const calciteColorHighSaturationGreenHGg_010 : string;
-export const calciteColorHighSaturationGreenHGg_020 : string;
-export const calciteColorHighSaturationGreenHGg_030 : string;
-export const calciteColorHighSaturationGreenHGg_040 : string;
-export const calciteColorHighSaturationGreenHGg_050 : string;
-export const calciteColorHighSaturationGreenHGg_060 : string;
-export const calciteColorHighSaturationGreenHGg_070 : string;
-export const calciteColorHighSaturationGreenHGg_080 : string;
-export const calciteColorHighSaturationGreenHGg_090 : string;
-export const calciteColorHighSaturationGreenHGg_100 : string;
-export const calciteColorHighSaturationYellowGreenHYg_010 : string;
-export const calciteColorHighSaturationYellowGreenHYg_020 : string;
-export const calciteColorHighSaturationYellowGreenHYg_030 : string;
-export const calciteColorHighSaturationYellowGreenHYg_040 : string;
-export const calciteColorHighSaturationYellowGreenHYg_050 : string;
-export const calciteColorHighSaturationYellowGreenHYg_060 : string;
-export const calciteColorHighSaturationYellowGreenHYg_070 : string;
-export const calciteColorHighSaturationYellowGreenHYg_080 : string;
-export const calciteColorHighSaturationYellowGreenHYg_090 : string;
-export const calciteColorHighSaturationYellowGreenHYg_100 : string;
-export const calciteColorHighSaturationYellowHYy_010 : string;
-export const calciteColorHighSaturationYellowHYy_020 : string;
-export const calciteColorHighSaturationYellowHYy_030 : string;
-export const calciteColorHighSaturationYellowHYy_040 : string;
-export const calciteColorHighSaturationYellowHYy_050 : string;
-export const calciteColorHighSaturationYellowHYy_060 : string;
-export const calciteColorHighSaturationYellowHYy_070 : string;
-export const calciteColorHighSaturationYellowHYy_080 : string;
-export const calciteColorHighSaturationYellowHYy_090 : string;
-export const calciteColorHighSaturationYellowHYy_100 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_010 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_020 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_030 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_040 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_050 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_060 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_070 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_080 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_090 : string;
-export const calciteColorHighSaturationOrangeYellowHOy_100 : string;
-export const calciteColorHighSaturationOrangeHOo_010 : string;
-export const calciteColorHighSaturationOrangeHOo_020 : string;
-export const calciteColorHighSaturationOrangeHOo_030 : string;
-export const calciteColorHighSaturationOrangeHOo_040 : string;
-export const calciteColorHighSaturationOrangeHOo_050 : string;
-export const calciteColorHighSaturationOrangeHOo_060 : string;
-export const calciteColorHighSaturationOrangeHOo_070 : string;
-export const calciteColorHighSaturationOrangeHOo_080 : string;
-export const calciteColorHighSaturationOrangeHOo_090 : string;
-export const calciteColorHighSaturationOrangeHOo_100 : string;
-export const calciteColorHighSaturationRedOrangeHRo_010 : string;
-export const calciteColorHighSaturationRedOrangeHRo_020 : string;
-export const calciteColorHighSaturationRedOrangeHRo_030 : string;
-export const calciteColorHighSaturationRedOrangeHRo_040 : string;
-export const calciteColorHighSaturationRedOrangeHRo_050 : string;
-export const calciteColorHighSaturationRedOrangeHRo_060 : string;
-export const calciteColorHighSaturationRedOrangeHRo_070 : string;
-export const calciteColorHighSaturationRedOrangeHRo_080 : string;
-export const calciteColorHighSaturationRedOrangeHRo_090 : string;
-export const calciteColorHighSaturationRedOrangeHRo_100 : string;
-export const calciteColorHighSaturationRedHRr_010 : string;
-export const calciteColorHighSaturationRedHRr_020 : string;
-export const calciteColorHighSaturationRedHRr_030 : string;
-export const calciteColorHighSaturationRedHRr_040 : string;
-export const calciteColorHighSaturationRedHRr_050 : string;
-export const calciteColorHighSaturationRedHRr_060 : string;
-export const calciteColorHighSaturationRedHRr_070 : string;
-export const calciteColorHighSaturationRedHRr_080 : string;
-export const calciteColorHighSaturationRedHRr_090 : string;
-export const calciteColorHighSaturationRedHRr_100 : string;
-export const calciteColorHighSaturationPinkHPk_010 : string;
-export const calciteColorHighSaturationPinkHPk_020 : string;
-export const calciteColorHighSaturationPinkHPk_030 : string;
-export const calciteColorHighSaturationPinkHPk_040 : string;
-export const calciteColorHighSaturationPinkHPk_050 : string;
-export const calciteColorHighSaturationPinkHPk_060 : string;
-export const calciteColorHighSaturationPinkHPk_070 : string;
-export const calciteColorHighSaturationPinkHPk_080 : string;
-export const calciteColorHighSaturationPinkHPk_090 : string;
-export const calciteColorHighSaturationPinkHPk_100 : string;
-export const calciteColorHighSaturationVioletRedHVr_010 : string;
-export const calciteColorHighSaturationVioletRedHVr_020 : string;
-export const calciteColorHighSaturationVioletRedHVr_030 : string;
-export const calciteColorHighSaturationVioletRedHVr_040 : string;
-export const calciteColorHighSaturationVioletRedHVr_050 : string;
-export const calciteColorHighSaturationVioletRedHVr_060 : string;
-export const calciteColorHighSaturationVioletRedHVr_070 : string;
-export const calciteColorHighSaturationVioletRedHVr_080 : string;
-export const calciteColorHighSaturationVioletRedHVr_090 : string;
-export const calciteColorHighSaturationVioletRedHVr_100 : string;
-export const calciteColorHighSaturationVioletHVv_010 : string;
-export const calciteColorHighSaturationVioletHVv_020 : string;
-export const calciteColorHighSaturationVioletHVv_030 : string;
-export const calciteColorHighSaturationVioletHVv_040 : string;
-export const calciteColorHighSaturationVioletHVv_050 : string;
-export const calciteColorHighSaturationVioletHVv_060 : string;
-export const calciteColorHighSaturationVioletHVv_070 : string;
-export const calciteColorHighSaturationVioletHVv_080 : string;
-export const calciteColorHighSaturationVioletHVv_090 : string;
-export const calciteColorHighSaturationVioletHVv_100 : string;
-export const calciteColorVibrantBlueVBb_120 : string;
-export const calciteColorVibrantBlueVBb_140 : string;
-export const calciteColorVibrantBlueVBb_160 : string;
-export const calciteColorVibrantBlueVBb_180 : string;
-export const calciteColorVibrantGreenBlueVGb_120 : string;
-export const calciteColorVibrantGreenBlueVGb_140 : string;
-export const calciteColorVibrantGreenBlueVGb_160 : string;
-export const calciteColorVibrantGreenBlueVGb_180 : string;
-export const calciteColorVibrantGreenVGg_120 : string;
-export const calciteColorVibrantGreenVGg_140 : string;
-export const calciteColorVibrantGreenVGg_160 : string;
-export const calciteColorVibrantGreenVGg_180 : string;
-export const calciteColorVibrantYellowGreenVYg_120 : string;
-export const calciteColorVibrantYellowGreenVYg_140 : string;
-export const calciteColorVibrantYellowGreenVYg_160 : string;
-export const calciteColorVibrantYellowGreenVYg_180 : string;
-export const calciteColorVibrantYellowVYy_120 : string;
-export const calciteColorVibrantYellowVYy_140 : string;
-export const calciteColorVibrantYellowVYy_160 : string;
-export const calciteColorVibrantYellowVYy_180 : string;
-export const calciteColorVibrantOrangeYellowVOy_120 : string;
-export const calciteColorVibrantOrangeYellowVOy_140 : string;
-export const calciteColorVibrantOrangeYellowVOy_160 : string;
-export const calciteColorVibrantOrangeYellowVOy_180 : string;
-export const calciteColorVibrantRedOrangeVRo_120 : string;
-export const calciteColorVibrantRedOrangeVRo_140 : string;
-export const calciteColorVibrantRedOrangeVRo_160 : string;
-export const calciteColorVibrantRedOrangeVRo_180 : string;
-export const calciteColorVibrantRedVRr_120 : string;
-export const calciteColorVibrantRedVRr_140 : string;
-export const calciteColorVibrantRedVRr_160 : string;
-export const calciteColorVibrantRedVRr_180 : string;
-export const calciteColorVibrantPinkVPk_120 : string;
-export const calciteColorVibrantPinkVPk_140 : string;
-export const calciteColorVibrantPinkVPk_160 : string;
-export const calciteColorVibrantPinkVPk_180 : string;
-export const calciteColorVibrantVioletRedVVr_120 : string;
-export const calciteColorVibrantVioletRedVVr_140 : string;
-export const calciteColorVibrantVioletRedVVr_160 : string;
-export const calciteColorVibrantVioletRedVVr_180 : string;
-export const calciteColorVibrantVioletVVv_120 : string;
-export const calciteColorVibrantVioletVVv_140 : string;
-export const calciteColorVibrantVioletVVv_160 : string;
-export const calciteColorVibrantVioletVVv_180 : string;
-export const calciteColorDarkGreenDGg_410 : string;
-export const calciteColorDarkGreenDGg_420 : string;
-export const calciteColorDarkGreenDGg_430 : string;
-export const calciteColorDarkYellowDYy_410 : string;
-export const calciteColorDarkYellowDYy_420 : string;
-export const calciteColorDarkYellowDYy_430 : string;
-export const calciteColorDarkRedDRr_410 : string;
-export const calciteColorDarkRedDRr_420 : string;
-export const calciteColorDarkRedDRr_430 : string;
-export const calciteColorDarkBlueDBb_410 : string;
-export const calciteColorDarkBlueDBb_420 : string;
-export const calciteColorDarkBlueDBb_430 : string;
-export const calciteContainerSize_0 : string;
-export const calciteContainerSize_154 : string;
-export const calciteContainerSize_320 : string;
-export const calciteContainerSize_328 : string;
-export const calciteContainerSize_476 : string;
-export const calciteContainerSize_504 : string;
-export const calciteContainerSize_678 : string;
-export const calciteContainerSize_768 : string;
-export const calciteContainerSize_854 : string;
-export const calciteContainerSize_1152 : string;
-export const calciteContainerSize_1440 : string;
-export const calciteFontFamilyPrimary : string;
-export const calciteFontFamilySecondary : string;
-export const calciteFontFamilyCode : string;
+export const calciteColorNeutralBlk000 : string;
+export const calciteColorNeutralBlk005 : string;
+export const calciteColorNeutralBlk010 : string;
+export const calciteColorNeutralBlk020 : string;
+export const calciteColorNeutralBlk030 : string;
+export const calciteColorNeutralBlk040 : string;
+export const calciteColorNeutralBlk050 : string;
+export const calciteColorNeutralBlk060 : string;
+export const calciteColorNeutralBlk070 : string;
+export const calciteColorNeutralBlk080 : string;
+export const calciteColorNeutralBlk090 : string;
+export const calciteColorNeutralBlk100 : string;
+export const calciteColorNeutralBlk110 : string;
+export const calciteColorNeutralBlk120 : string;
+export const calciteColorNeutralBlk130 : string;
+export const calciteColorNeutralBlk140 : string;
+export const calciteColorNeutralBlk150 : string;
+export const calciteColorNeutralBlk160 : string;
+export const calciteColorNeutralBlk170 : string;
+export const calciteColorNeutralBlk180 : string;
+export const calciteColorNeutralBlk190 : string;
+export const calciteColorNeutralBlk200 : string;
+export const calciteColorNeutralBlk210 : string;
+export const calciteColorNeutralBlk220 : string;
+export const calciteColorNeutralBlk230 : string;
+export const calciteColorNeutralBlk235 : string;
+export const calciteColorNeutralBlk240 : string;
+export const calciteColorHighSaturationBlueHBb010 : string;
+export const calciteColorHighSaturationBlueHBb020 : string;
+export const calciteColorHighSaturationBlueHBb030 : string;
+export const calciteColorHighSaturationBlueHBb040 : string;
+export const calciteColorHighSaturationBlueHBb050 : string;
+export const calciteColorHighSaturationBlueHBb060 : string;
+export const calciteColorHighSaturationBlueHBb070 : string;
+export const calciteColorHighSaturationBlueHBb080 : string;
+export const calciteColorHighSaturationBlueHBb090 : string;
+export const calciteColorHighSaturationBlueHBb100 : string;
+export const calciteColorHighSaturationGreenBlueHGb010 : string;
+export const calciteColorHighSaturationGreenBlueHGb020 : string;
+export const calciteColorHighSaturationGreenBlueHGb030 : string;
+export const calciteColorHighSaturationGreenBlueHGb040 : string;
+export const calciteColorHighSaturationGreenBlueHGb050 : string;
+export const calciteColorHighSaturationGreenBlueHGb060 : string;
+export const calciteColorHighSaturationGreenBlueHGb070 : string;
+export const calciteColorHighSaturationGreenBlueHGb080 : string;
+export const calciteColorHighSaturationGreenBlueHGb090 : string;
+export const calciteColorHighSaturationGreenBlueHGb100 : string;
+export const calciteColorHighSaturationGreenHGg010 : string;
+export const calciteColorHighSaturationGreenHGg020 : string;
+export const calciteColorHighSaturationGreenHGg030 : string;
+export const calciteColorHighSaturationGreenHGg040 : string;
+export const calciteColorHighSaturationGreenHGg050 : string;
+export const calciteColorHighSaturationGreenHGg060 : string;
+export const calciteColorHighSaturationGreenHGg070 : string;
+export const calciteColorHighSaturationGreenHGg080 : string;
+export const calciteColorHighSaturationGreenHGg090 : string;
+export const calciteColorHighSaturationGreenHGg100 : string;
+export const calciteColorHighSaturationYellowGreenHYg010 : string;
+export const calciteColorHighSaturationYellowGreenHYg020 : string;
+export const calciteColorHighSaturationYellowGreenHYg030 : string;
+export const calciteColorHighSaturationYellowGreenHYg040 : string;
+export const calciteColorHighSaturationYellowGreenHYg050 : string;
+export const calciteColorHighSaturationYellowGreenHYg060 : string;
+export const calciteColorHighSaturationYellowGreenHYg070 : string;
+export const calciteColorHighSaturationYellowGreenHYg080 : string;
+export const calciteColorHighSaturationYellowGreenHYg090 : string;
+export const calciteColorHighSaturationYellowGreenHYg100 : string;
+export const calciteColorHighSaturationYellowHYy010 : string;
+export const calciteColorHighSaturationYellowHYy020 : string;
+export const calciteColorHighSaturationYellowHYy030 : string;
+export const calciteColorHighSaturationYellowHYy040 : string;
+export const calciteColorHighSaturationYellowHYy050 : string;
+export const calciteColorHighSaturationYellowHYy060 : string;
+export const calciteColorHighSaturationYellowHYy070 : string;
+export const calciteColorHighSaturationYellowHYy080 : string;
+export const calciteColorHighSaturationYellowHYy090 : string;
+export const calciteColorHighSaturationYellowHYy100 : string;
+export const calciteColorHighSaturationOrangeYellowHOy010 : string;
+export const calciteColorHighSaturationOrangeYellowHOy020 : string;
+export const calciteColorHighSaturationOrangeYellowHOy030 : string;
+export const calciteColorHighSaturationOrangeYellowHOy040 : string;
+export const calciteColorHighSaturationOrangeYellowHOy050 : string;
+export const calciteColorHighSaturationOrangeYellowHOy060 : string;
+export const calciteColorHighSaturationOrangeYellowHOy070 : string;
+export const calciteColorHighSaturationOrangeYellowHOy080 : string;
+export const calciteColorHighSaturationOrangeYellowHOy090 : string;
+export const calciteColorHighSaturationOrangeYellowHOy100 : string;
+export const calciteColorHighSaturationOrangeHOo010 : string;
+export const calciteColorHighSaturationOrangeHOo020 : string;
+export const calciteColorHighSaturationOrangeHOo030 : string;
+export const calciteColorHighSaturationOrangeHOo040 : string;
+export const calciteColorHighSaturationOrangeHOo050 : string;
+export const calciteColorHighSaturationOrangeHOo060 : string;
+export const calciteColorHighSaturationOrangeHOo070 : string;
+export const calciteColorHighSaturationOrangeHOo080 : string;
+export const calciteColorHighSaturationOrangeHOo090 : string;
+export const calciteColorHighSaturationOrangeHOo100 : string;
+export const calciteColorHighSaturationRedOrangeHRo010 : string;
+export const calciteColorHighSaturationRedOrangeHRo020 : string;
+export const calciteColorHighSaturationRedOrangeHRo030 : string;
+export const calciteColorHighSaturationRedOrangeHRo040 : string;
+export const calciteColorHighSaturationRedOrangeHRo050 : string;
+export const calciteColorHighSaturationRedOrangeHRo060 : string;
+export const calciteColorHighSaturationRedOrangeHRo070 : string;
+export const calciteColorHighSaturationRedOrangeHRo080 : string;
+export const calciteColorHighSaturationRedOrangeHRo090 : string;
+export const calciteColorHighSaturationRedOrangeHRo100 : string;
+export const calciteColorHighSaturationRedHRr010 : string;
+export const calciteColorHighSaturationRedHRr020 : string;
+export const calciteColorHighSaturationRedHRr030 : string;
+export const calciteColorHighSaturationRedHRr040 : string;
+export const calciteColorHighSaturationRedHRr050 : string;
+export const calciteColorHighSaturationRedHRr060 : string;
+export const calciteColorHighSaturationRedHRr070 : string;
+export const calciteColorHighSaturationRedHRr080 : string;
+export const calciteColorHighSaturationRedHRr090 : string;
+export const calciteColorHighSaturationRedHRr100 : string;
+export const calciteColorHighSaturationPinkHPk010 : string;
+export const calciteColorHighSaturationPinkHPk020 : string;
+export const calciteColorHighSaturationPinkHPk030 : string;
+export const calciteColorHighSaturationPinkHPk040 : string;
+export const calciteColorHighSaturationPinkHPk050 : string;
+export const calciteColorHighSaturationPinkHPk060 : string;
+export const calciteColorHighSaturationPinkHPk070 : string;
+export const calciteColorHighSaturationPinkHPk080 : string;
+export const calciteColorHighSaturationPinkHPk090 : string;
+export const calciteColorHighSaturationPinkHPk100 : string;
+export const calciteColorHighSaturationVioletRedHVr010 : string;
+export const calciteColorHighSaturationVioletRedHVr020 : string;
+export const calciteColorHighSaturationVioletRedHVr030 : string;
+export const calciteColorHighSaturationVioletRedHVr040 : string;
+export const calciteColorHighSaturationVioletRedHVr050 : string;
+export const calciteColorHighSaturationVioletRedHVr060 : string;
+export const calciteColorHighSaturationVioletRedHVr070 : string;
+export const calciteColorHighSaturationVioletRedHVr080 : string;
+export const calciteColorHighSaturationVioletRedHVr090 : string;
+export const calciteColorHighSaturationVioletRedHVr100 : string;
+export const calciteColorHighSaturationVioletHVv010 : string;
+export const calciteColorHighSaturationVioletHVv020 : string;
+export const calciteColorHighSaturationVioletHVv030 : string;
+export const calciteColorHighSaturationVioletHVv040 : string;
+export const calciteColorHighSaturationVioletHVv050 : string;
+export const calciteColorHighSaturationVioletHVv060 : string;
+export const calciteColorHighSaturationVioletHVv070 : string;
+export const calciteColorHighSaturationVioletHVv080 : string;
+export const calciteColorHighSaturationVioletHVv090 : string;
+export const calciteColorHighSaturationVioletHVv100 : string;
+export const calciteColorVibrantBlueVBb120 : string;
+export const calciteColorVibrantBlueVBb140 : string;
+export const calciteColorVibrantBlueVBb160 : string;
+export const calciteColorVibrantBlueVBb180 : string;
+export const calciteColorVibrantGreenBlueVGb120 : string;
+export const calciteColorVibrantGreenBlueVGb140 : string;
+export const calciteColorVibrantGreenBlueVGb160 : string;
+export const calciteColorVibrantGreenBlueVGb180 : string;
+export const calciteColorVibrantGreenVGg120 : string;
+export const calciteColorVibrantGreenVGg140 : string;
+export const calciteColorVibrantGreenVGg160 : string;
+export const calciteColorVibrantGreenVGg180 : string;
+export const calciteColorVibrantYellowGreenVYg120 : string;
+export const calciteColorVibrantYellowGreenVYg140 : string;
+export const calciteColorVibrantYellowGreenVYg160 : string;
+export const calciteColorVibrantYellowGreenVYg180 : string;
+export const calciteColorVibrantYellowVYy120 : string;
+export const calciteColorVibrantYellowVYy140 : string;
+export const calciteColorVibrantYellowVYy160 : string;
+export const calciteColorVibrantYellowVYy180 : string;
+export const calciteColorVibrantOrangeYellowVOy120 : string;
+export const calciteColorVibrantOrangeYellowVOy140 : string;
+export const calciteColorVibrantOrangeYellowVOy160 : string;
+export const calciteColorVibrantOrangeYellowVOy180 : string;
+export const calciteColorVibrantRedOrangeVRo120 : string;
+export const calciteColorVibrantRedOrangeVRo140 : string;
+export const calciteColorVibrantRedOrangeVRo160 : string;
+export const calciteColorVibrantRedOrangeVRo180 : string;
+export const calciteColorVibrantRedVRr120 : string;
+export const calciteColorVibrantRedVRr140 : string;
+export const calciteColorVibrantRedVRr160 : string;
+export const calciteColorVibrantRedVRr180 : string;
+export const calciteColorVibrantPinkVPk120 : string;
+export const calciteColorVibrantPinkVPk140 : string;
+export const calciteColorVibrantPinkVPk160 : string;
+export const calciteColorVibrantPinkVPk180 : string;
+export const calciteColorVibrantVioletRedVVr120 : string;
+export const calciteColorVibrantVioletRedVVr140 : string;
+export const calciteColorVibrantVioletRedVVr160 : string;
+export const calciteColorVibrantVioletRedVVr180 : string;
+export const calciteColorVibrantVioletVVv120 : string;
+export const calciteColorVibrantVioletVVv140 : string;
+export const calciteColorVibrantVioletVVv160 : string;
+export const calciteColorVibrantVioletVVv180 : string;
+export const calciteColorDarkGreenDGg410 : string;
+export const calciteColorDarkGreenDGg420 : string;
+export const calciteColorDarkGreenDGg430 : string;
+export const calciteColorDarkYellowDYy410 : string;
+export const calciteColorDarkYellowDYy420 : string;
+export const calciteColorDarkYellowDYy430 : string;
+export const calciteColorDarkRedDRr410 : string;
+export const calciteColorDarkRedDRr420 : string;
+export const calciteColorDarkRedDRr430 : string;
+export const calciteColorDarkBlueDBb410 : string;
+export const calciteColorDarkBlueDBb420 : string;
+export const calciteColorDarkBlueDBb430 : string;
+export const calciteContainerSize0 : string;
+export const calciteContainerSize154 : string;
+export const calciteContainerSize320 : string;
+export const calciteContainerSize328 : string;
+export const calciteContainerSize476 : string;
+export const calciteContainerSize504 : string;
+export const calciteContainerSize678 : string;
+export const calciteContainerSize768 : string;
+export const calciteContainerSize854 : string;
+export const calciteContainerSize1152 : string;
+export const calciteContainerSize1440 : string;
+export const calciteFontFamilyAvenirNextPro : string;
+export const calciteFontFamilyAvenirNextWorld : string;
+export const calciteFontFamilyMonaco : string;
 export const calciteFontStyleItalic : string; // used in ratings
 export const calciteFontWeightUltralight : string; // only for Avenir Next World (secondary font family)
 export const calciteFontWeightThin : string;
@@ -1535,108 +1450,81 @@ export const calciteFontWeightBold : string;
 export const calciteFontWeightExtrabold : string; // only for Avenir Next World (secondary font family)
 export const calciteFontWeightBlack : string; // only for Avenir Next World (secondary font family)
 export const calciteFontWeightHeavy : string;
-export const calciteFontLineHeightFixed_0 : string;
-export const calciteFontLineHeightFixed_1 : string;
-export const calciteFontLineHeightFixed_2 : string;
-export const calciteFontLineHeightFixed_3 : string;
-export const calciteFontLineHeightFixed_4 : string;
-export const calciteFontLineHeightFixed_5 : string;
-export const calciteFontLineHeightFixed_6 : string;
-export const calciteFontLineHeightFixed_7 : string;
-export const calciteFontLineHeightFixed_8 : string;
-export const calciteFontLineHeightFixed_9 : string;
-export const calciteFontLineHeightFixed_10 : string;
-export const calciteFontLineHeightFixed_11 : string;
-export const calciteFontLineHeightFixed_12 : string;
-export const calciteFontLineHeightRelative : string; // 1
-export const calciteFontLineHeightRelativeTight : string; // 1.25
-export const calciteFontLineHeightRelativeSnug : string; // 1.375
-export const calciteFontLineHeightRelativeNormal : string; // 1.5
-export const calciteFontLineHeightRelativeRelaxed : string; // 1.625
-export const calciteFontLineHeightRelativeLoose : string; // 2
-export const calciteFontSize_0 : string;
-export const calciteFontSize_1 : string;
-export const calciteFontSize_2 : string;
-export const calciteFontSize_3 : string;
-export const calciteFontSize_4 : string;
-export const calciteFontSize_5 : string;
-export const calciteFontSize_6 : string;
-export const calciteFontSize_7 : string;
-export const calciteFontSize_8 : string;
-export const calciteFontSize_9 : string;
-export const calciteFontSize_10 : string;
-export const calciteFontSize_11 : string;
-export const calciteFontSize_12 : string;
-export const calciteFontSize_13 : string;
-export const calciteFontSize_14 : string;
-export const calciteFontSize_15 : string;
-export const calciteFontLetterSpacingTight : string;
-export const calciteFontLetterSpacingNormal : string;
-export const calciteFontLetterSpacingWide : string;
-export const calciteFontParagraphSpacingNormal : string;
 export const calciteFontTextDecorationNone : string;
 export const calciteFontTextDecorationUnderline : string;
 export const calciteFontTextCaseNone : string;
 export const calciteFontTextCaseUppercase : string;
 export const calciteFontTextCaseLowercase : string;
 export const calciteFontTextCaseCapitalize : string;
-export const calciteOpacity_0 : string;
-export const calciteOpacity_4 : string;
-export const calciteOpacity_8 : string;
-export const calciteOpacity_10 : string;
-export const calciteOpacity_20 : string;
-export const calciteOpacity_30 : string;
-export const calciteOpacity_40 : string;
-export const calciteOpacity_50 : string;
-export const calciteOpacity_60 : string;
-export const calciteOpacity_70 : string;
-export const calciteOpacity_80 : string;
-export const calciteOpacity_85 : string;
-export const calciteOpacity_90 : string;
-export const calciteOpacity_92 : string;
-export const calciteOpacity_96 : string;
-export const calciteOpacity_100 : string;
-export const calciteSize_0 : string;
-export const calciteSize_1 : string;
-export const calciteSize_2 : string;
-export const calciteSize_3 : string;
-export const calciteSize_4 : string;
-export const calciteSize_5 : string;
-export const calciteSize_6 : string;
-export const calciteSize_7 : string;
-export const calciteSize_8 : string;
-export const calciteSize_9 : string;
-export const calciteSize_10 : string;
-export const calciteSize_11 : string;
-export const calciteSize_12 : string;
-export const calciteSize_13 : string;
-export const calciteSize_14 : string;
-export const calciteSize_15 : string;
-export const calciteSize_16 : string;
-export const calciteSize_17 : string;
-export const calciteSize_18 : string;
-export const calciteSize_19 : string;
-export const calciteSize_20 : string;
-export const calciteSize_21 : string;
-export const calciteSize_22 : string;
-export const calciteSize_23 : string;
-export const calciteSize_24 : string;
-export const calciteSize_25 : string;
-export const calciteSize_26 : string;
-export const calciteSize_27 : string;
-export const calciteSize_28 : string;
+export const calciteOpacity0 : string;
+export const calciteOpacity4 : string;
+export const calciteOpacity8 : string;
+export const calciteOpacity10 : string;
+export const calciteOpacity20 : string;
+export const calciteOpacity30 : string;
+export const calciteOpacity40 : string;
+export const calciteOpacity50 : string;
+export const calciteOpacity60 : string;
+export const calciteOpacity70 : string;
+export const calciteOpacity80 : string;
+export const calciteOpacity85 : string;
+export const calciteOpacity90 : string;
+export const calciteOpacity92 : string;
+export const calciteOpacity96 : string;
+export const calciteOpacity100 : string;
+export const calciteShadow0 : { x: string, y: string, blur: string, spread: string, color: string };
+export const calciteShadow1 : { x: string, y: string, blur: string, spread: string, color: string };
+export const calciteShadow2 : { x: string, y: string, blur: string, spread: string, color: string };
+export const calciteShadow3 : { x: string, y: string, blur: string, spread: string, color: string };
+export const calciteShadow4 : { x: string, y: string, blur: string, spread: string, color: string };
+export const calciteSize1 : string;
+export const calciteSize2 : string;
+export const calciteSize4 : string;
+export const calciteSize6 : string;
+export const calciteSize8 : string;
+export const calciteSize10 : string;
+export const calciteSize12 : string;
+export const calciteSize14 : string;
+export const calciteSize16 : string;
+export const calciteSize20 : string;
+export const calciteSize24 : string;
+export const calciteSize28 : string;
+export const calciteSize32 : string;
+export const calciteSize36 : string;
+export const calciteSize40 : string;
+export const calciteSize44 : string;
+export const calciteSize48 : string;
+export const calciteSize56 : string;
+export const calciteSize64 : string;
+export const calciteSize72 : string;
+export const calciteSize80 : string;
+export const calciteSize96 : string;
+export const calciteSize112 : string;
+export const calciteSize128 : string;
+export const calciteSize144 : string;
+export const calciteSize160 : string;
+export const calciteSize192 : string;
+export const calciteSize224 : string;
+export const calciteSize256 : string;
+export const calciteSize288 : string;
 export const calciteSizeNone : string;
-export const calciteSizeRelativeHalf : string;
-export const calciteSizeRelativeFull : string;
-export const calciteZIndex_0 : string;
-export const calciteZIndex_1 : string;
-export const calciteZIndex_3 : string;
-export const calciteZIndex_4 : string;
-export const calciteZIndex_5 : string;
-export const calciteZIndex_6 : string;
-export const calciteZIndex_7 : string;
-export const calciteZIndex_8 : string;
-export const calciteZIndex_9 : string;"
+export const calciteSizeRelative50 : string;
+export const calciteSizeRelative100 : string;
+export const calciteSizeRelative125 : string;
+export const calciteSizeRelative137 : string;
+export const calciteSizeRelative150 : string;
+export const calciteSizeRelative162 : string;
+export const calciteSizeRelative200 : string;
+export const calciteSizeRelativeAuto : string;
+export const calciteZIndex0 : string;
+export const calciteZIndex1 : string;
+export const calciteZIndex3 : string;
+export const calciteZIndex4 : string;
+export const calciteZIndex5 : string;
+export const calciteZIndex6 : string;
+export const calciteZIndex7 : string;
+export const calciteZIndex8 : string;
+export const calciteZIndex9 : string;"
 `;
 
 exports[`generated tokens SCSS core should match 1`] = `
@@ -1651,38 +1539,45 @@ $calcite-z-index-4: 400;
 $calcite-z-index-3: 300;
 $calcite-z-index-1: 1;
 $calcite-z-index-0: -999999;
-$calcite-size-relative-full: 100%;
-$calcite-size-relative-half: 50%;
-$calcite-size-none: 0px;
-$calcite-size-28: 288px;
-$calcite-size-27: 256px;
-$calcite-size-26: 224px;
-$calcite-size-25: 192px;
-$calcite-size-24: 160px;
-$calcite-size-23: 144px;
-$calcite-size-22: 128px;
-$calcite-size-21: 112px;
-$calcite-size-20: 96px;
-$calcite-size-19: 80px;
-$calcite-size-18: 72px;
-$calcite-size-17: 64px;
-$calcite-size-16: 56px;
-$calcite-size-15: 48px;
-$calcite-size-14: 44px;
-$calcite-size-13: 40px;
-$calcite-size-12: 36px;
-$calcite-size-11: 32px;
-$calcite-size-10: 28px;
-$calcite-size-9: 24px;
-$calcite-size-8: 20px;
-$calcite-size-7: 16px;
-$calcite-size-6: 14px;
-$calcite-size-5: 12px;
-$calcite-size-4: 10px;
-$calcite-size-3: 8px;
-$calcite-size-2: 6px;
-$calcite-size-1: 4px;
-$calcite-size-0: 2px;
+$calcite-size-relative-auto: auto;
+$calcite-size-relative-200: 200%;
+$calcite-size-relative-162: 162.5%;
+$calcite-size-relative-150: 150%;
+$calcite-size-relative-137: 137.5%;
+$calcite-size-relative-125: 125%;
+$calcite-size-relative-100: 100%;
+$calcite-size-relative-50: 50%;
+$calcite-size-none: 0;
+$calcite-size-288: 288px;
+$calcite-size-256: 256px;
+$calcite-size-224: 224px;
+$calcite-size-192: 192px;
+$calcite-size-160: 160px;
+$calcite-size-144: 144px;
+$calcite-size-128: 128px;
+$calcite-size-112: 112px;
+$calcite-size-96: 96px;
+$calcite-size-80: 80px;
+$calcite-size-72: 72px;
+$calcite-size-64: 64px;
+$calcite-size-56: 56px;
+$calcite-size-48: 48px;
+$calcite-size-44: 44px;
+$calcite-size-40: 40px;
+$calcite-size-36: 36px;
+$calcite-size-32: 32px;
+$calcite-size-28: 28px;
+$calcite-size-24: 24px;
+$calcite-size-20: 20px;
+$calcite-size-16: 16px;
+$calcite-size-14: 14px;
+$calcite-size-12: 12px;
+$calcite-size-10: 10px;
+$calcite-size-8: 8px;
+$calcite-size-6: 6px;
+$calcite-size-4: 4px;
+$calcite-size-2: 2px;
+$calcite-size-1: 1px;
 $calcite-opacity-100: 1;
 $calcite-opacity-96: 0.96;
 $calcite-opacity-92: 0.92;
@@ -1705,45 +1600,6 @@ $calcite-font-text-case-uppercase: uppercase;
 $calcite-font-text-case-none: none;
 $calcite-font-text-decoration-underline: underline;
 $calcite-font-text-decoration-none: none;
-$calcite-font-paragraph-spacing-normal: 10px;
-$calcite-font-letter-spacing-wide: 0.4px;
-$calcite-font-letter-spacing-normal: 0px;
-$calcite-font-letter-spacing-tight: -0.4px;
-$calcite-font-size-15: 120px;
-$calcite-font-size-14: 96px;
-$calcite-font-size-13: 80px;
-$calcite-font-size-12: 72px;
-$calcite-font-size-11: 64px;
-$calcite-font-size-10: 56px;
-$calcite-font-size-9: 48px;
-$calcite-font-size-8: 40px;
-$calcite-font-size-7: 32px;
-$calcite-font-size-6: 24px;
-$calcite-font-size-5: 20px;
-$calcite-font-size-4: 18px;
-$calcite-font-size-3: 16px;
-$calcite-font-size-2: 14px;
-$calcite-font-size-1: 12px;
-$calcite-font-size-0: 10px;
-$calcite-font-line-height-relative-loose: 2; // 2
-$calcite-font-line-height-relative-relaxed: 1.625; // 1.625
-$calcite-font-line-height-relative-normal: 1.5; // 1.5
-$calcite-font-line-height-relative-snug: 1.375; // 1.375
-$calcite-font-line-height-relative-tight: 1.25; // 1.25
-$calcite-font-line-height-relative: auto; // 1
-$calcite-font-line-height-fixed-12: 80px;
-$calcite-font-line-height-fixed-11: 72px;
-$calcite-font-line-height-fixed-10: 64px;
-$calcite-font-line-height-fixed-9: 56px;
-$calcite-font-line-height-fixed-8: 48px;
-$calcite-font-line-height-fixed-7: 40px;
-$calcite-font-line-height-fixed-6: 36px;
-$calcite-font-line-height-fixed-5: 32px;
-$calcite-font-line-height-fixed-4: 28px;
-$calcite-font-line-height-fixed-3: 24px;
-$calcite-font-line-height-fixed-2: 20px;
-$calcite-font-line-height-fixed-1: 16px;
-$calcite-font-line-height-fixed-0: 12px;
 $calcite-font-weight-heavy: 900;
 $calcite-font-weight-black: 900; // only for Avenir Next World (secondary font family)
 $calcite-font-weight-extrabold: 800; // only for Avenir Next World (secondary font family)
@@ -1756,9 +1612,9 @@ $calcite-font-weight-light: 300; // only for Avenir Next World (secondary font f
 $calcite-font-weight-thin: 100;
 $calcite-font-weight-ultralight: 200; // only for Avenir Next World (secondary font family)
 $calcite-font-style-italic: italic; // used in ratings
-$calcite-font-family-code: Monaco;
-$calcite-font-family-secondary: "Avenir Next World";
-$calcite-font-family-primary: "Avenir Next LT Pro";
+$calcite-font-family-monaco: Monaco;
+$calcite-font-family-avenir-next-world: "Avenir Next World";
+$calcite-font-family-avenir-next-pro: "Avenir Next LT Pro";
 $calcite-container-size-1440: 1440px;
 $calcite-container-size-1152: 1152px;
 $calcite-container-size-854: 854px;
@@ -1973,32 +1829,18 @@ $calcite-color-neutral-blk-020: #eaeaea;
 $calcite-color-neutral-blk-010: #f3f3f3;
 $calcite-color-neutral-blk-005: #f8f8f8;
 $calcite-color-neutral-blk-000: #ffffff;
-$calcite-box-shadow-none: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
-$calcite-box-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0.1);
-$calcite-box-shadow-3: 0 4px 20px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
-$calcite-box-shadow-2: 0 4px 16px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
-$calcite-box-shadow-1: 0 2px 8px 0 rgba(var(--calcite-color-neutral-blk-240), 0.04);
-$calcite-box-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);"
+$calcite-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0.1);
+$calcite-shadow-3: 0 4px 20px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
+$calcite-shadow-2: 0 4px 16px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
+$calcite-shadow-1: 0 2px 8px 0 rgba(var(--calcite-color-neutral-blk-240), 0.04);
+$calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);"
 `;
 
 exports[`generated tokens SCSS dark should match 1`] = `
 "/
 
-$calcite-color-inverse-press: #f3f3f3;
-$calcite-color-inverse-hover: #ffffff;
-$calcite-color-inverse: #f8f8f8;
-$calcite-color-danger-press: #d90012;
-$calcite-color-danger-hover: #ff0015;
-$calcite-color-danger: #FE583E;
-$calcite-color-warning-press: #f5d000;
-$calcite-color-warning-hover: #ffee33;
-$calcite-color-warning: #FFC900;
-$calcite-color-success-press: #00b81b;
-$calcite-color-success-hover: #3bed52;
-$calcite-color-success: #36DA43;
-$calcite-color-info-press: #009af2;
-$calcite-color-info-hover: #3db8ff;
-$calcite-color-info: #00A0FF;
+$calcite-color-border-white: #f8f8f8;
+$calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
 $calcite-color-border-input: #757575;
 $calcite-color-border-3: #404040;
 $calcite-color-border-2: #4a4a4a;
@@ -2008,20 +1850,35 @@ $calcite-color-text-inverse: #151515;
 $calcite-color-text-3: #9f9f9f;
 $calcite-color-text-2: #bfbfbf;
 $calcite-color-text-1: #ffffff;
+$calcite-color-inverse-press: #f3f3f3;
+$calcite-color-inverse-hover: #ffffff;
+$calcite-color-inverse: #f8f8f8;
+$calcite-color-status-danger-press: #d90012;
+$calcite-color-status-danger-hover: #ff0015;
+$calcite-color-status-danger: #FE583E;
+$calcite-color-status-warning-press: #f5d000;
+$calcite-color-status-warning-hover: #ffee33;
+$calcite-color-status-warning: #FFC900;
+$calcite-color-status-success-press: #00b81b;
+$calcite-color-status-success-hover: #3bed52;
+$calcite-color-status-success: #36DA43;
+$calcite-color-status-info-press: #009af2;
+$calcite-color-status-info-hover: #3db8ff;
+$calcite-color-status-info: #00A0FF;
+$calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
+$calcite-color-brand-press: #00619b;
+$calcite-color-brand-hover: #007ac2;
+$calcite-color-brand: #009af2;
+$calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
+$calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
+$calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
+$calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
+$calcite-color-transparent: rgba(255, 255, 255, 0);
 $calcite-color-foreground-current: #214155;
 $calcite-color-foreground-3: #151515;
 $calcite-color-foreground-2: #202020;
 $calcite-color-foreground-1: #2b2b2b;
-$calcite-color-background-transparent-dismiss: rgba(43, 43, 43, 0.8);
-$calcite-color-background-transparent-scrim: rgba(0, 0, 0, 0.85);
-$calcite-color-background-transparent-press: rgba(255, 255, 255, 0.08);
-$calcite-color-background-transparent-hover: rgba(255, 255, 255, 0.04);
-$calcite-color-background-transparent: rgba(0, 0, 0, 0);
 $calcite-color-background: #353535;
-$calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
-$calcite-color-brand-press: #00619b;
-$calcite-color-brand-hover: #007ac2;
-$calcite-color-brand: #009af2;
 "
 `;
 
@@ -2038,30 +1895,28 @@ $calcite-z-index-header: 400;
 $calcite-z-index-sticky: 300;
 $calcite-z-index: 1;
 $calcite-z-index-deep: -999999;
-$calcite-spacing-xl: 20px;
-$calcite-spacing-lg: 16px;
+$calcite-spacing-xxxl: 32px;
+$calcite-spacing-xxl: 20px;
+$calcite-spacing-xl: 16px;
+$calcite-spacing-lg: 14px;
 $calcite-spacing-md: 12px;
 $calcite-spacing-sm: 8px;
-$calcite-spacing-xs: 4px;
-$calcite-spacing-double: 20px;
-$calcite-spacing-half: 6px;
+$calcite-spacing-xs: 6px;
+$calcite-spacing-xxs: 4px;
 $calcite-spacing-base: 2px;
-$calcite-spacing-none: 0px;
-$calcite-size-xxxl: 96px;
-$calcite-size-xxl: 64px;
-$calcite-size-xl: 48px;
-$calcite-size-xl-lg: 44px;
-$calcite-size-lg-xl: 32px;
-$calcite-size-lg: 24px;
-$calcite-size-lg-md: 20px;
-$calcite-size-md-lg: 16px;
-$calcite-size-md: 14px;
-$calcite-size-md-sm: 12px;
-$calcite-size-sm-md: 10px;
+$calcite-spacing-px: 1px;
+$calcite-size-xxxl: 32px;
+$calcite-size-xxl: 24px;
+$calcite-size-xl: 20px;
+$calcite-size-lg: 16px;
+$calcite-size-md-plus: 14px;
+$calcite-size-md: 12px;
+$calcite-size-sm-plus: 10px;
 $calcite-size-sm: 8px;
 $calcite-size-xs: 6px;
 $calcite-size-xxs: 4px;
 $calcite-size-xxxs: 2px;
+$calcite-size-px: 1px;
 $calcite-opacity-disabled: 0.5;
 $calcite-opacity-full: 1;
 $calcite-opacity-dark: 0.85;
@@ -2073,10 +1928,10 @@ $calcite-font-text-case-uppercase: uppercase;
 $calcite-font-text-case-none: none;
 $calcite-font-text-decoration-underline: underline;
 $calcite-font-text-decoration-none: none;
-$calcite-font-paragraph-spacing-normal: 10px;
-$calcite-font-letter-spacing-wide: 0.4px;
-$calcite-font-letter-spacing-normal: 0px;
-$calcite-font-letter-spacing-tight: -0.4px;
+$calcite-font-paragraph-spacing-normal: 4px;
+$calcite-font-letter-spacing-wide: 0.4;
+$calcite-font-letter-spacing-normal: 0;
+$calcite-font-letter-spacing-tight: -0.4;
 $calcite-font-line-height-relative-loose: 2; // 2
 $calcite-font-line-height-relative-relaxed: 1.625; // 1.625
 $calcite-font-line-height-relative-normal: 1.5; // 1.5
@@ -2101,49 +1956,31 @@ $calcite-font-weight-medium: 500;
 $calcite-font-weight-regular: 400;
 $calcite-font-weight-normal: 400; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular"
 $calcite-font-weight-light: 300; // For Avenir Next World (secondary font family)
+$calcite-font-family-code: Monaco;
 $calcite-font-family: "Avenir Next LT Pro";
 $calcite-container-size-content-fixed: 1440px; // only for lg breakpoint fixed grid width
 $calcite-container-size-content-fluid: 100%; // for fluid grid widths
 $calcite-container-size-gutter: 16px;
 $calcite-container-size-margin: 24px;
 $calcite-color-background-none: rgba(#ffffff, 0);
+$calcite-corner-radius-pill: 100%;
+$calcite-corner-radius-round: 4px;
+$calcite-corner-radius-sharp: 0;
 $calcite-border-width-lg: 4px;
 $calcite-border-width-md: 2px;
 $calcite-border-width-sm: 1px;
-$calcite-border-width-none: 0px;
-$calcite-border-radius-xl: 24px;
-$calcite-border-radius-lg: 16px;
-$calcite-border-radius-md: 12px;
-$calcite-border-radius-sm: 4px;
-$calcite-border-radius-pill: 100%;
-$calcite-border-radius-circular: 50%;
-$calcite-border-radius-round: 4px;
-$calcite-border-radius-sharp: 0px;
-$calcite-border-radius-none: 0px;
-$calcite-border-radius: 0px;
-$calcite-box-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
-$calcite-box-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
-$calcite-box-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);"
+$calcite-border-width-none: 0;
+$calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
+$calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
+$calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
+$calcite-corner-radius: var(--calcite-corner-radius-sharp);"
 `;
 
 exports[`generated tokens SCSS light should match 1`] = `
 "/
 
-$calcite-color-inverse-press: #202020;
-$calcite-color-inverse-hover: #2b2b2b;
-$calcite-color-inverse: #353535;
-$calcite-color-danger-press: #7c1d13;
-$calcite-color-danger-hover: #a82b1e;
-$calcite-color-danger: #d83020;
-$calcite-color-warning-press: #bfa200;
-$calcite-color-warning-hover: #d9bc00;
-$calcite-color-warning: #edd317;
-$calcite-color-success-press: #1a6324;
-$calcite-color-success-hover: #288835;
-$calcite-color-success: #35ac46;
-$calcite-color-info-press: #00304d;
-$calcite-color-info-hover: #004874;
-$calcite-color-info: #00619b;
+$calcite-color-border-white: #ffffff;
+$calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
 $calcite-color-border-input: #949494;
 $calcite-color-border-3: #dfdfdf;
 $calcite-color-border-2: #d4d4d4;
@@ -2153,19 +1990,34 @@ $calcite-color-text-inverse: #ffffff;
 $calcite-color-text-3: #6a6a6a;
 $calcite-color-text-2: #4a4a4a;
 $calcite-color-text-1: #151515;
+$calcite-color-inverse-press: #202020;
+$calcite-color-inverse-hover: #2b2b2b;
+$calcite-color-inverse: #353535;
+$calcite-color-status-danger-press: #7c1d13;
+$calcite-color-status-danger-hover: #a82b1e;
+$calcite-color-status-danger: #d83020;
+$calcite-color-status-warning-press: #bfa200;
+$calcite-color-status-warning-hover: #d9bc00;
+$calcite-color-status-warning: #edd317;
+$calcite-color-status-success-press: #1a6324;
+$calcite-color-status-success-hover: #288835;
+$calcite-color-status-success: #35ac46;
+$calcite-color-status-info-press: #00304d;
+$calcite-color-status-info-hover: #004874;
+$calcite-color-status-info: #00619b;
+$calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
+$calcite-color-brand-press: #004874;
+$calcite-color-brand-hover: #00619b;
+$calcite-color-brand: #007ac2;
+$calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
+$calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
+$calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
+$calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
+$calcite-color-transparent: rgba(0, 0, 0, 0);
 $calcite-color-foreground-current: #c7eaff;
 $calcite-color-foreground-3: #eaeaea;
 $calcite-color-foreground-2: #f3f3f3;
 $calcite-color-foreground-1: #ffffff;
-$calcite-color-background-transparent-dismiss: rgba(255, 255, 255, 0.8);
-$calcite-color-background-transparent-scrim: rgba(255, 255, 255, 0.85);
-$calcite-color-background-transparent-press: rgba(0, 0, 0, 0.08);
-$calcite-color-background-transparent-hover: rgba(0, 0, 0, 0.04);
-$calcite-color-background-transparent: rgba(255, 255, 255, 0);
 $calcite-color-background: #f8f8f8;
-$calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
-$calcite-color-brand-press: #004874;
-$calcite-color-brand-hover: #00619b;
-$calcite-color-brand: #007ac2;
 "
 `;
diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
index b4d1b8a3ebd..8545227ab03 100644
--- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
@@ -17,6 +17,7 @@ import { registerValueEvaluateMath } from "./styleDictionary/transformer/value/v
 import { registerValueRGBA } from "./styleDictionary/transformer/value/valueRGBA.js";
 import { registerNameSpacePath } from "./styleDictionary/transformer/name/nameSpacePath.js";
 import { registerFormatterDocs } from "./styleDictionary/formatter/docs.js";
+import { registerValueToREM } from "./styleDictionary/transformer/value/valueToREM.js";
 
 export async function registerCalciteTransformers(sd: StyleDictionary): Promise<void> {
   // Here we are registering the Transforms provided by Token Studio however,
@@ -43,4 +44,5 @@ export async function registerCalciteTransformers(sd: StyleDictionary): Promise<
   registerValueStringWrapper(sd);
   registerNameSpacePath(sd);
   registerFormatterDocs(sd);
+  registerValueToREM(sd);
 }
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts
index f9b4df9fa8a..a955fd0bb46 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts
@@ -5,16 +5,9 @@ import { CalledTransformerFunction, TransformerConfig } from "../utils.js";
 import { parseTokenPath } from "../utils/parseTokenPath.js";
 
 export const transformNamesCamelCase: CalledTransformerFunction<string> = (token, args) => {
-  const [tokenPath, hasNegativeKey] = parseTokenPath(token.path);
+  const tokenPath = parseTokenPath(token.path);
   let tokenNameInParamCase = camelCase([].concat(args.options?.prefix, tokenPath).join(" "));
-
-  if (hasNegativeKey.length > 0) {
-    hasNegativeKey.forEach((originalKey) => {
-      const paramCasedKey = originalKey.replaceAll("-", "");
-      const updatedToken = tokenNameInParamCase.replace(paramCasedKey, originalKey.replaceAll("-", "_"));
-      tokenNameInParamCase = updatedToken;
-    });
-  }
+  tokenNameInParamCase = tokenNameInParamCase.replaceAll("_", "");
 
   return tokenNameInParamCase;
 };
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts
index b46548bfda5..8b7a23e4534 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts
@@ -5,16 +5,8 @@ import { CalledTransformerFunction, TransformerConfig } from "../utils.js";
 import { parseTokenPath } from "../utils/parseTokenPath.js";
 
 export const transformNamesKebabCase: CalledTransformerFunction<string> = (token, args) => {
-  const [tokenPath, hasNegativeKey] = parseTokenPath(token.path);
-  let tokenNameInParamCase = paramCase([].concat(args.options?.prefix, tokenPath).join(" "));
-
-  if (hasNegativeKey.length > 0) {
-    hasNegativeKey.forEach((originalKey) => {
-      const paramCasedKey = originalKey.replace("-", "");
-      const updatedToken = tokenNameInParamCase.replace(paramCasedKey, originalKey);
-      tokenNameInParamCase = updatedToken;
-    });
-  }
+  const tokenPath = parseTokenPath(token.path);
+  const tokenNameInParamCase = paramCase([].concat(args.options?.prefix, tokenPath).join(" "));
 
   return tokenNameInParamCase;
 };
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts
index 0a9d83bab8a..3e131da0a89 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts
@@ -4,16 +4,13 @@ import { parseTokenPath } from "../utils/parseTokenPath.js";
 import { capitalCase } from "change-case";
 
 export const transformNamesSpacePath: CalledTransformerFunction<string> = (token, args) => {
-  const [tokenPath, negNameRef] = parseTokenPath(
+  const tokenPath = parseTokenPath(
     [].concat(args.options?.prefix, token.path).filter((p) => p && p !== args?.options?.prefix)
   );
   let name = capitalCase(tokenPath.join(" "));
 
-  for (let i = 0; i < negNameRef.length; i++) {
-    const negName = negNameRef[i];
-    const n = negName.slice(1);
-    name = name.replace(n, negName);
-  }
+  name = name.replaceAll(/Minus\s?/g, "-");
+  name = name.replaceAll(/Plus\s?/g, "+");
 
   return name;
 };
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
index 2b9cb880d7e..d1b2edd1c2b 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
@@ -14,6 +14,7 @@ import { PlatformUnion } from "../../../types/platform.js";
 import { valueEvaluateMath } from "./value/valueCheckEvaluateMath.js";
 import { CalciteValueRGBA } from "./value/valueRGBA.js";
 import { nameSpacePath } from "./name/nameSpacePath.js";
+import { CalciteValueToREM } from "./value/valueToREM.js";
 
 export type TransformerTypeUnion = `${TransformerTypeEnum}`;
 
@@ -49,6 +50,7 @@ export const styles = [
   "ts/shadow/css/shorthand",
   valueAssetToken,
   valueStringWrapper,
+  CalciteValueToREM,
   nameKebabCase,
 ];
 
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/parseTokenPath.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/parseTokenPath.ts
index f4f56114abb..d83c1c57a64 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/parseTokenPath.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/parseTokenPath.ts
@@ -5,34 +5,41 @@
  * @param {string[]} path the path to each token value in the Style Dictionary token object
  * @returns {string[]} an updated token path
  */
-export const parseTokenPath = (path: string[]): [string[], string[]] =>
-  path.reduce(
-    (acc, p) => {
-      const tokenPath = acc[0];
-      const negativeNumberReference = acc[1];
+export const parseTokenPath = (path: string[]): string[] => {
+  const parsedPath = [];
 
-      switch (p) {
-        case "core":
-        case "default":
-        case "semantic":
-          return acc;
-        default:
-          const priorPathSection = tokenPath.pop();
+  for (let i = 0; i < path.length; i++) {
+    const p = path[i];
+
+    switch (p) {
+      case "core":
+      case "default":
+      case "semantic":
+        continue;
+      default:
+        const priorPathSection = parsedPath.pop();
+
+        if (p.length > 0) {
           if (p.includes(priorPathSection)) {
-            tokenPath.push(p);
+            if (p[0] === "-") {
+              parsedPath.push("minus");
+            }
+            parsedPath.push(p);
           } else {
-            tokenPath.push(priorPathSection);
-            tokenPath.push(p);
-          }
-
-          if (p[0] === "-") {
-            negativeNumberReference.push(p);
+            parsedPath.push(priorPathSection);
+            if (p[0] === "-") {
+              parsedPath.push("minus");
+            }
+            parsedPath.push(p);
           }
+        }
 
-          break;
-      }
+        if (p[p.length - 1] === "+") {
+          parsedPath.push("plus");
+        }
 
-      return [tokenPath, negativeNumberReference];
-    },
-    [[], []] as [string[], string[]]
-  );
+        break;
+    }
+  }
+  return parsedPath;
+};
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueRGBA.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueRGBA.ts
index 912afde6f21..3136ead8754 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueRGBA.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueRGBA.ts
@@ -6,6 +6,10 @@ import { Matcher } from "style-dictionary/types/Matcher.js";
 const matchRGBA = (value: string) => value.match(/(rgba?).+(\#[0-9A-z]+)/g);
 
 export const matcher: Matcher = (token) => {
+  if (!["color", "shadow", "boxShadow"].includes(token.type)) {
+    return false;
+  }
+
   if (typeof token.value === "string") {
     return !!matchRGBA(token.value);
   }
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts
new file mode 100644
index 00000000000..a6ae3dbcd15
--- /dev/null
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts
@@ -0,0 +1,36 @@
+import { Core as StyleDictionary } from "style-dictionary";
+import { CalledTransformerFunction, TransformerConfig } from "../utils.js";
+import { Matcher } from "style-dictionary/types/Matcher.js";
+
+export const matcher: Matcher = (token) => {
+  if (!["lineHeights"].includes(token.type)) {
+    return false;
+  }
+
+  return true;
+};
+
+export const transformToREM: CalledTransformerFunction<string> = (token) => {
+  if (typeof token.value === "string") {
+    const val = Number(token.value.replace("%", ""));
+    if (!isNaN(val)) {
+      return `${val * 0.01}`;
+    }
+  }
+
+  return token.value;
+};
+
+export const registerValueToREM = (sd: StyleDictionary): void => {
+  const transformerConfig: TransformerConfig = {
+    name: CalciteValueToREM,
+    transformer: transformToREM,
+    type: "value",
+    transitive: true,
+    matcher,
+  };
+
+  sd.registerTransform(transformerConfig);
+};
+
+export const CalciteValueToREM = "value/calcite/rem";