diff --git a/.cspell.json b/.cspell.json
index 43e28c356d9..b48f3dc1c2b 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -3,6 +3,7 @@
     "calcite-dev",
     "css",
     "en-common-misspellings",
+    "fonts",
     "fullstack",
     "html",
     "html-symbol-entities",
diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
index eda55adb9df..3a2b6190a2f 100644
--- a/packages/calcite-components/calcite-preset.ts
+++ b/packages/calcite-components/calcite-preset.ts
@@ -27,10 +27,10 @@ export default {
   theme: {
     borderColor: ({ theme }): object => ({
       color: {
-        1: "var(--calcite-ui-border-1)",
-        2: "var(--calcite-ui-border-2)",
-        3: "var(--calcite-ui-border-3)",
-        input: "var(--calcite-ui-border-input)",
+        1: "var(--calcite-color-border-1)",
+        2: "var(--calcite-color-border-2)",
+        3: "var(--calcite-color-border-3)",
+        input: "var(--calcite-color-border-input)",
         transparent: theme("colors.transparent"),
       },
       "color-brand": theme("colors.brand"),
@@ -45,30 +45,30 @@ export default {
     }),
     colors: {
       current: "currentColor",
-      brand: "var(--calcite-ui-brand)",
-      "brand-hover": "var(--calcite-ui-brand-hover)",
-      "brand-press": "var(--calcite-ui-brand-press)",
-      info: "var(--calcite-ui-info)",
-      success: "var(--calcite-ui-success)",
-      warning: "var(--calcite-ui-warning)",
-      danger: "var(--calcite-ui-danger)",
-      "danger-hover": "var(--calcite-ui-danger-hover)",
-      "danger-press": "var(--calcite-ui-danger-press)",
+      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)",
       background: {
-        background: "var(--calcite-ui-background)",
+        background: "var(--calcite-color-background)",
         foreground: {
-          1: "var(--calcite-ui-foreground-1)",
-          2: "var(--calcite-ui-foreground-2)",
-          3: "var(--calcite-ui-foreground-3)",
+          1: "var(--calcite-color-foreground-1)",
+          2: "var(--calcite-color-foreground-2)",
+          3: "var(--calcite-color-foreground-3)",
         },
       },
       color: {
-        1: "var(--calcite-ui-text-1)",
-        2: "var(--calcite-ui-text-2)",
-        3: "var(--calcite-ui-text-3)",
-        inverse: "var(--calcite-ui-text-inverse)",
-        link: "var(--calcite-ui-text-link)",
-        icon: "var(--calcite-ui-icon-color)",
+        1: "var(--calcite-color-text-1)",
+        2: "var(--calcite-color-text-2)",
+        3: "var(--calcite-color-text-3)",
+        inverse: "var(--calcite-color-text-inverse)",
+        link: "var(--calcite-color-text-link)",
+        icon: "var(--calcite-icon-color)",
       },
       transparent: "transparent",
     },
@@ -164,8 +164,8 @@ export default {
         2: "0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)",
         "2-lg": "0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08)",
         "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-ui-border-3)",
-        "outline-active": "0 0 0 1px var(--calcite-ui-brand)",
+        "border-bottom": "0 1px 0 var(--calcite-border-3)",
+        "outline-active": "0 0 0 1px var(--calcite-brand)",
         none: "none",
         xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
         outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
@@ -211,7 +211,7 @@ export default {
         },
       },
       opacity: {
-        disabled: "var(--calcite-ui-opacity-disabled)",
+        disabled: "var(--calcite-opacity-disabled)",
       },
       spacing: {
         0.5: "0.125rem",
@@ -232,16 +232,16 @@ export default {
         menu: "45vh",
       },
       zIndex: {
-        deep: "var(--calcite-app-z-index-deep)",
-        default: "var(--calcite-app-z-index)",
-        sticky: "var(--calcite-app-z-index-sticky)",
-        header: "var(--calcite-app-z-index-header)",
-        toast: "var(--calcite-app-z-index-toast)",
-        dropdown: "var(--calcite-app-z-index-dropdown)",
-        overlay: "var(--calcite-app-z-index-overlay)",
-        modal: "var(--calcite-app-z-index-modal)",
-        popover: "var(--calcite-app-z-index-popup)",
-        tooltip: "var(--calcite-app-z-index-tooltip)",
+        deep: "var(--calcite-z-index-deep)",
+        default: "var(--calcite-z-index)",
+        sticky: "var(--calcite-z-index-sticky)",
+        header: "var(--calcite-z-index-header)",
+        toast: "var(--calcite-z-index-toast)",
+        dropdown: "var(--calcite-z-index-dropdown)",
+        overlay: "var(--calcite-z-index-overlay)",
+        modal: "var(--calcite-z-index-modal)",
+        popover: "var(--calcite-z-index-popup)",
+        tooltip: "var(--calcite-z-index-tooltip)",
       },
     },
   },
@@ -256,23 +256,23 @@ export default {
           "outline-color": "transparent",
         },
         ".focus-normal": {
-          outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))",
+          outline: "2px solid var(--calcite-focus-color, var(--calcite-brand))",
         },
         ".focus-outset": {
-          outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))",
-          "outline-offset": invert("2px", "--calcite-ui-focus-offset-invert"),
+          outline: "2px solid var(--calcite-focus-color, var(--calcite-brand))",
+          "outline-offset": invert("2px", "--calcite-focus-offset-invert"),
         },
         ".focus-inset": {
-          outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))",
-          "outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert"),
+          outline: "2px solid var(--calcite-focus-color, var(--calcite-brand))",
+          "outline-offset": invert("-2px", "--calcite-focus-offset-invert"),
         },
         ".focus-outset-danger": {
-          outline: "2px solid var(--calcite-ui-danger)",
-          "outline-offset": invert("2px", "--calcite-ui-focus-offset-invert"),
+          outline: "2px solid var(--calcite-danger)",
+          "outline-offset": invert("2px", "--calcite-focus-offset-invert"),
         },
         ".focus-inset-danger": {
-          outline: "2px solid var(--calcite-ui-danger)",
-          "outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert"),
+          outline: "2px solid var(--calcite-danger)",
+          "outline-offset": invert("-2px", "--calcite-focus-offset-invert"),
         },
         ".transition-default": {
           transition: "all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s",
diff --git a/packages/calcite-components/src/assets/styles/_focus.scss b/packages/calcite-components/src/assets/styles/_focus.scss
index 1e52e23fc79..a805267bd0d 100644
--- a/packages/calcite-components/src/assets/styles/_focus.scss
+++ b/packages/calcite-components/src/assets/styles/_focus.scss
@@ -6,7 +6,7 @@
 
 // place on the element that receives focus style, while in focus
 @mixin focus-style-outset() {
-  outline: 2px solid var(--calcite-ui-brand);
+  outline: 2px solid var(--calcite-color-brand);
   outline-offset: 2px;
 }
 
@@ -20,8 +20,8 @@
 */
 @mixin focus-box-shadow($base-shadow: null) {
   @if $base-shadow {
-    box-shadow: $base-shadow, 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+    box-shadow: $base-shadow, 0 0 0 2px var(--calcite-color-foreground-1), 0 0 0 4px var(--calcite-color-brand);
   } @else {
-    box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+    box-shadow: 0 0 0 2px var(--calcite-color-foreground-1), 0 0 0 4px var(--calcite-color-brand);
   }
 }
diff --git a/packages/calcite-components/src/assets/styles/_host.scss b/packages/calcite-components/src/assets/styles/_host.scss
index d3fa4899aca..cde73f0c6ad 100644
--- a/packages/calcite-components/src/assets/styles/_host.scss
+++ b/packages/calcite-components/src/assets/styles/_host.scss
@@ -4,7 +4,7 @@
   * {
     box-sizing: border-box;
   }
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
+  background-color: var(--calcite-color-foreground-1);
+  color: var(--calcite-color-text-2);
   font-size: var(--calcite-font-size--1);
 }
diff --git a/packages/calcite-components/src/assets/styles/_shadow.scss b/packages/calcite-components/src/assets/styles/_shadow.scss
index 104194fa319..1945754888b 100644
--- a/packages/calcite-components/src/assets/styles/_shadow.scss
+++ b/packages/calcite-components/src/assets/styles/_shadow.scss
@@ -9,6 +9,6 @@
   --calcite-shadow-2: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
   --calcite-shadow-2-hover: 0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08);
   --calcite-shadow-2-press: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
-  --calcite-shadow-border-bottom: 0 1px 0 var(--calcite-ui-border-3);
-  --calcite-shadow-border-active: 0 0 0 1px var(--calcite-ui-brand-press);
+  --calcite-shadow-border-bottom: 0 1px 0 var(--calcite-color-border-3);
+  --calcite-shadow-border-active: 0 0 0 1px var(--calcite-color-brand-press);
 }
diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss
index 4a2d3f96ca0..886828af3ca 100644
--- a/packages/calcite-components/src/assets/styles/global.scss
+++ b/packages/calcite-components/src/assets/styles/global.scss
@@ -1,16 +1,16 @@
-@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/calcite-light";
-@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/calcite-dark";
-@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/calcite-headless";
+@import "~@esri/calcite-design-tokens/dist/css/global.css";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/light";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/dark";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/global";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/index";
 @import "../../node_modules/@esri/calcite-base/dist/_index";
 
 /* CSS vars (@include in global) */
 @import "type";
 
 @mixin calcite-mode-light-extended {
-  // todo update include when calcite-colors updates to "mode" nomenclature
-  @include calcite-theme-light();
+  @include calcite-color-scheme-light();
   --calcite-mode-name: "light";
-  --calcite-ui-foreground-current: var(--calcite-semantic-ui-color-foreground-current-light);
   --calcite-ui-inverse: #{$blk-190};
   --calcite-ui-inverse-hover: #{$blk-200};
   --calcite-ui-inverse-press: #{$blk-210};
@@ -22,10 +22,8 @@
 }
 
 @mixin calcite-mode-dark-extended {
-  // todo update include when calcite-colors updates to "mode" nomenclature
-  @include calcite-theme-dark();
+  @include calcite-color-scheme-dark();
   --calcite-mode-name: "dark";
-  --calcite-ui-foreground-current: var(--calcite-semantic-ui-color-foreground-current-dark);
   --calcite-ui-inverse: #{$blk-005};
   --calcite-ui-inverse-hover: #{$blk-000};
   --calcite-ui-inverse-press: #{$blk-010};
@@ -38,7 +36,6 @@
 
 :root {
   @extend %type-vars;
-  @include calcite-theme-headless();
   @include calcite-mode-light-extended();
   @include floating-ui-base();
   @include animation-base();
@@ -46,20 +43,20 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  --calcite-popover-z-index: var(--calcite-app-z-index-popup);
-  --calcite-border-radius: var(--calcite-semantic-border-border-radius-round, 4px);
+  --calcite-popover-z-index: var(--calcite-z-index-popup);
+  --calcite-border-radius: var(--calcite-border-radius-round, 4px);
   --calcite-border-radius-base: 0;
   --calcite-panel-width-multiplier: 1;
   --calcite-ui-focus-offset-invert: 0; // should be 0 or 1
   --calcite-ui-icon-color: currentColor;
-  --calcite-ui-opacity-disabled: var(--calcite-core-opacity-50, 0.5);
+  --calcite-ui-opacity-disabled: var(--calcite-opacity-half, 0.5);
 
   @apply font-sans;
 }
 
 .calcite-mode-dark {
   @include calcite-mode-dark-extended();
-  --calcite-ui-background: var(--calcite-ui-background-1);
+  --calcite-ui-background: var(--calcite-color-background);
 }
 
 .calcite-mode-light {
diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index 7c6d7bf90fd..65b5ecf706e 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -1,6 +1,7 @@
 @import "../../node_modules/@esri/calcite-colors/dist/colors";
 @import "../../node_modules/@esri/calcite-base/dist/_index";
-@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/calcite-headless";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/breakpoints";
+@import "../../node_modules/@esri/calcite-design-tokens/dist/scss/global";
 
 /* mixins & extensions */
 @import "animation";
@@ -122,12 +123,12 @@
 
     border-radius: 50%;
     border-color: transparent;
-    background-color: var(--calcite-ui-foreground-2);
+    background-color: var(--calcite-color-foreground-2);
 
     &:active,
     &:hover {
       @apply text-color-1;
-      background-color: var(--calcite-ui-foreground-3);
+      background-color: var(--calcite-color-foreground-3);
     }
 
     &:active {
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.scss b/packages/calcite-components/src/components/action-bar/action-bar.scss
index 6d5aa78bf7f..7b8b355199b 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.scss
+++ b/packages/calcite-components/src/components/action-bar/action-bar.scss
@@ -41,12 +41,12 @@
 }
 
 ::slotted(calcite-action-group) {
-  border-block-end: 1px solid var(--calcite-ui-border-3);
+  border-block-end: 1px solid var(--calcite-color-border-3);
 }
 
 :host([layout="horizontal"]) ::slotted(calcite-action-group) {
   border-block-end: 0;
-  border-inline-end: 1px solid var(--calcite-ui-border-3);
+  border-inline-end: 1px solid var(--calcite-color-border-3);
 }
 
 :host([layout="horizontal"][expand-disabled]) ::slotted(calcite-action-group:last-of-type) {
diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
index 26e29bd72a5..329c22b7067 100644
--- a/packages/calcite-components/src/components/alert/alert.scss
+++ b/packages/calcite-components/src/components/alert/alert.scss
@@ -6,7 +6,7 @@
  * @prop --calcite-alert-width: Specifies the width of the component.
  */
 
-$border-style: 1px solid var(--calcite-ui-border-3);
+$border-style: 1px solid var(--calcite-color-border-3);
 
 :host {
   --calcite-alert-edge-distance: theme("spacing.8");
@@ -271,8 +271,8 @@ $border-style: 1px solid var(--calcite-ui-border-3);
   @apply text-color-link inline-flex;
 }
 
-$alertKinds: "brand" var(--calcite-ui-brand), "info" var(--calcite-ui-info), "danger" var(--calcite-ui-danger),
-  "success" var(--calcite-ui-success), "warning" var(--calcite-ui-warning);
+$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);
 
 @each $alertKind in $alertKinds {
   $name: nth($alertKind, 1);
@@ -319,7 +319,7 @@ $alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms;
   @apply absolute;
 }
 
-@container responsive-container (min-width: #{$breakpoint-width-xs}) {
+@container responsive-container (min-width: #{$calcite-container-size-width-xs-max}) {
   .content {
     @apply flex-row;
   }
@@ -336,7 +336,7 @@ $alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms;
   }
 }
 
-@container responsive-container (min-width: #{$breakpoint-width-sm}) {
+@container responsive-container (min-width: #{$calcite-container-size-width-sm-max}) {
   .close {
     @apply self-stretch;
   }
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index 98438744ed9..a48b695e5b9 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -321,17 +321,17 @@
     &:hover {
       @apply border-color-brand-hover;
       color: theme("colors.brand-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
     }
     &:focus {
       @apply border-color-brand;
       color: theme("colors.brand");
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
     }
     &:active {
       @apply border-color-brand-press;
       color: theme("colors.brand-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);
     }
     calcite-loader {
       color: theme("colors.brand");
@@ -346,17 +346,17 @@
     &:hover {
       @apply border-color-danger-hover;
       color: theme("colors.danger-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-danger-hover);
     }
     &:focus {
       @apply border-color-danger;
       color: theme("colors.danger");
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-danger);
     }
     &:active {
       @apply border-color-danger-press;
       color: theme("colors.danger-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-danger-press);
     }
     calcite-loader {
       color: theme("colors.danger");
@@ -369,13 +369,13 @@
     @apply text-color-1 bg-foreground-1;
     border-color: theme("borderColor.color.1");
     &:hover {
-      box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);
     }
     &:focus {
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
     }
     &:active {
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
     }
     calcite-loader {
       @apply text-color-1;
@@ -419,17 +419,17 @@
     &:hover {
       @apply border-color-brand-hover;
       color: theme("colors.brand-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
     }
     &:focus {
       @apply border-color-brand;
       color: theme("colors.brand");
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
     }
     &:active {
       @apply border-color-brand-press;
       color: theme("colors.brand-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);
     }
     calcite-loader {
       color: theme("colors.brand");
@@ -444,17 +444,17 @@
     &:hover {
       @apply border-color-danger-hover;
       color: theme("colors.danger-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-danger-hover);
     }
     &:focus {
       @apply border-color-danger;
       color: theme("colors.danger");
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-danger);
     }
     &:active {
       @apply border-color-danger-press;
       color: theme("colors.danger-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-danger-press);
     }
     calcite-loader {
       color: theme("colors.danger");
@@ -467,13 +467,13 @@
     @apply text-color-1  bg-transparent;
     border-color: theme("borderColor.color.1");
     &:hover {
-      box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);
     }
     &:focus {
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
     }
     &:active {
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
     }
     calcite-loader {
       @apply text-color-1;
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.scss b/packages/calcite-components/src/components/checkbox/checkbox.scss
index 971b7d822ff..d7f0b3e8632 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.scss
+++ b/packages/calcite-components/src/components/checkbox/checkbox.scss
@@ -39,7 +39,7 @@
       stroke-current
       stroke-1
       transition-default;
-    box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
+    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
     color: theme("backgroundColor.background");
   }
 }
@@ -47,13 +47,13 @@
 :host([indeterminate]) {
   .check-svg {
     @apply bg-brand;
-    box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
+    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
   }
 }
 :host([hovered]) .toggle,
 :host .toggle:hover {
   .check-svg {
-    box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
   }
 }
 
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 60d49810bc4..d973737f295 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -215,16 +215,16 @@ slot[name="image"]::slotted(*) {
 }
 
 :host([kind="neutral"]) {
-  background-color: var(--calcite-ui-foreground-2);
-  color: var(--calcite-ui-text-1);
+  background-color: var(--calcite-color-foreground-2);
+  color: var(--calcite-color-text-1);
   .container {
     border-color: transparent;
   }
   .close {
-    color: var(--calcite-ui-text-3);
+    color: var(--calcite-color-text-3);
   }
   .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
+    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));
   }
 }
 
@@ -238,13 +238,13 @@ slot[name="image"]::slotted(*) {
     @apply text-color-inverse;
   }
   .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-ui-text-inverse));
+    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));
   }
 }
 
 :host([kind="brand"]) {
-  background-color: var(--calcite-ui-brand);
-  color: var(--calcite-ui-text-inverse);
+  background-color: var(--calcite-color-brand);
+  color: var(--calcite-color-text-inverse);
   .container {
     border-color: transparent;
   }
@@ -252,7 +252,7 @@ slot[name="image"]::slotted(*) {
     @apply text-color-inverse;
   }
   .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-ui-text-inverse));
+    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));
   }
 }
 
@@ -263,7 +263,7 @@ slot[name="image"]::slotted(*) {
     @apply text-color-3;
   }
   .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
+    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));
   }
 }
 
@@ -277,23 +277,23 @@ slot[name="image"]::slotted(*) {
 
 :host([kind="neutral"][appearance="outline-fill"]) .container,
 :host([kind="neutral"][appearance="outline"]) .container {
-  border-color: var(--calcite-ui-border-1);
+  border-color: var(--calcite-color-border-1);
 }
 
 :host([kind="inverse"][appearance="outline-fill"]) .container,
 :host([kind="inverse"][appearance="outline"]) .container {
-  border-color: var(--calcite-ui-border-inverse);
+  border-color: var(--calcite-color-border-inverse);
 }
 
 :host([kind="brand"][appearance="outline-fill"]) .container,
 :host([kind="brand"][appearance="outline"]) .container {
-  border-color: var(--calcite-ui-brand);
+  border-color: var(--calcite-color-brand);
 }
 
 :host([kind="brand"][appearance="solid"]),
 :host([kind="inverse"][appearance="solid"]) {
   button {
-    outline-color: var(--calcite-ui-text-inverse);
+    outline-color: var(--calcite-color-text-inverse);
   }
 }
 
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 c07f3199d47..920718a4e01 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
@@ -30,11 +30,11 @@ $size-l: 28px;
 
 .swatch--no-color {
   rect {
-    fill: var(--calcite-ui-foreground-1);
+    fill: var(--calcite-color-foreground-1);
   }
 
   line {
-    stroke: var(--calcite-ui-danger);
+    stroke: var(--calcite-color-danger);
   }
 }
 
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.scss b/packages/calcite-components/src/components/color-picker/color-picker.scss
index d721e4ae2d9..78c59a5e9ff 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.scss
+++ b/packages/calcite-components/src/components/color-picker/color-picker.scss
@@ -67,7 +67,7 @@
 .container {
   @apply bg-foreground-1;
   display: inline-block;
-  border: 1px solid var(--calcite-ui-border-1);
+  border: 1px solid var(--calcite-color-border-1);
 }
 
 .control-and-scope {
@@ -189,7 +189,7 @@
 
   &:hover {
     transition: outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
-    outline: 2px solid var(--calcite-ui-border-2);
+    outline: 2px solid var(--calcite-color-border-2);
     outline-offset: 2px;
   }
 }
diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
index b3d80350a98..ce468a802d3 100644
--- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
+++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
@@ -154,15 +154,15 @@
 
 :host([selected]) .day {
   @apply font-medium;
-  background-color: var(--calcite-ui-brand);
-  color: var(--calcite-ui-foreground-1);
+  background-color: var(--calcite-color-brand);
+  color: var(--calcite-color-foreground-1);
 }
 
 :host(:focus:not([disabled])),
 :host([start-of-range]:not(:focus)),
 :host([end-of-range]:not(:focus)) {
   .day {
-    box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
+    box-shadow: 0 0 0 2px var(--calcite-color-foreground-1);
   }
 }
 
@@ -182,7 +182,7 @@
   .day-wrapper {
     &:before,
     &:after {
-      background-color: var(--calcite-ui-foreground-current);
+      background-color: var(--calcite-color-foreground-current);
     }
   }
 }
@@ -234,7 +234,7 @@
 :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range),
 :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) {
   .day {
-    box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
+    box-shadow: 0 0 0 2px var(--calcite-color-foreground-1);
   }
 }
 
diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
index 6f480f8c24a..4a2868b70d0 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
@@ -108,7 +108,7 @@
   &:hover {
     @apply duration-100 ease-in-out;
     transition-property: outline-color;
-    outline: 2px solid var(--calcite-ui-border-2);
+    outline: 2px solid var(--calcite-color-border-2);
     outline-offset: 2px;
   }
   &:focus {
diff --git a/packages/calcite-components/src/components/graph/graph.scss b/packages/calcite-components/src/components/graph/graph.scss
index 5fe3420c07e..163edac1cdf 100644
--- a/packages/calcite-components/src/components/graph/graph.scss
+++ b/packages/calcite-components/src/components/graph/graph.scss
@@ -9,7 +9,7 @@
   @apply m-0 block h-full w-full p-0;
 
   .graph-path--highlight {
-    fill: var(--calcite-ui-brand);
+    fill: var(--calcite-color-brand);
     @apply opacity-50;
   }
 }
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 55f74a5f91f..d60b5d517fe 100644
--- a/packages/calcite-components/src/components/input-message/input-message.scss
+++ b/packages/calcite-components/src/components/input-message/input-message.scss
@@ -33,19 +33,19 @@
 }
 
 :host([status="invalid"]) .calcite-input-message-icon {
-  color: var(--calcite-ui-danger);
+  color: var(--calcite-color-danger);
 }
 
 :host([status="warning"]) .calcite-input-message-icon {
-  color: var(--calcite-ui-warning);
+  color: var(--calcite-color-warning);
 }
 
 :host([status="valid"]) .calcite-input-message-icon {
-  color: var(--calcite-ui-success);
+  color: var(--calcite-color-success);
 }
 
 :host([status="idle"]) .calcite-input-message-icon {
-  color: var(--calcite-ui-brand);
+  color: var(--calcite-color-brand);
 }
 
 // Validation Text
diff --git a/packages/calcite-components/src/components/loader/loader.scss b/packages/calcite-components/src/components/loader/loader.scss
index b5f1091d460..ac78005852b 100644
--- a/packages/calcite-components/src/components/loader/loader.scss
+++ b/packages/calcite-components/src/components/loader/loader.scss
@@ -25,7 +25,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
   @apply relative mx-auto hidden items-center justify-center opacity-100;
   min-block-size: var(--calcite-loader-size);
   font-size: var(--calcite-loader-font-size);
-  stroke: var(--calcite-ui-brand);
+  stroke: var(--calcite-color-brand);
   stroke-width: $stroke-width;
   fill: none;
   transform: scale(1, 1);
@@ -114,13 +114,13 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 
 :host([type="determinate"]) {
   @apply animate-none;
-  stroke: var(--calcite-ui-border-3);
+  stroke: var(--calcite-color-border-3);
   .loader__svgs {
     @apply animate-none;
   }
   .loader__svg--3 {
     @apply animate-none;
-    stroke: var(--calcite-ui-brand);
+    stroke: var(--calcite-color-brand);
     stroke-dasharray: $loader-circumference;
     transform: rotate(-90deg);
     transition: all var(--calcite-internal-animation-timing-fast) linear;
@@ -211,16 +211,16 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 
 @keyframes loader-color-shift {
   0% {
-    stroke: var(--calcite-ui-brand);
+    stroke: var(--calcite-color-brand);
   }
   33% {
-    stroke: var(--calcite-ui-brand-press);
+    stroke: var(--calcite-color-brand-press);
   }
   66% {
-    stroke: var(--calcite-ui-brand-hover);
+    stroke: var(--calcite-color-brand-hover);
   }
   100% {
-    stroke: var(--calcite-ui-brand);
+    stroke: var(--calcite-color-brand);
   }
 }
 
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index bc52f472b02..749bb6c93cf 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -63,9 +63,9 @@
 
 :host([active]) .content {
   @apply text-color-1;
-  border-color: var(--calcite-ui-brand);
+  border-color: var(--calcite-color-brand);
   .icon {
-    --calcite-ui-icon-color: var(--calcite-ui-brand);
+    --calcite-ui-icon-color: var(--calcite-color-brand);
   }
 }
 :host([layout="vertical"]) .content {
@@ -86,7 +86,7 @@
 
 .icon--dropdown {
   @apply ms-auto me-0 ps-2 relative;
-  --calcite-ui-icon-color: var(--calcite-ui-text-3);
+  --calcite-ui-icon-color: var(--calcite-color-text-3);
 }
 
 :host([layout="vertical"]) .icon--end ~ .icon--dropdown {
@@ -106,7 +106,7 @@
 
 .icon--breadcrumb {
   @apply ps-2 me-0;
-  --calcite-ui-icon-color: var(--calcite-ui-text-3);
+  --calcite-ui-icon-color: var(--calcite-color-text-3);
 }
 
 :host([layout="vertical"]) .icon--breadcrumb {
@@ -127,12 +127,12 @@
 
 calcite-action {
   @apply relative h-auto;
-  border-inline-start: 1px solid var(--calcite-ui-foreground-1);
+  border-inline-start: 1px solid var(--calcite-color-foreground-1);
   &:after {
     @apply block w-px  absolute -start-px;
     content: "";
     inset-block: theme("spacing.3");
-    background-color: var(--calcite-ui-border-3);
+    background-color: var(--calcite-color-border-3);
   }
   &:hover:after {
     @apply h-full;
@@ -143,7 +143,7 @@ calcite-action {
 .content:focus ~ calcite-action,
 .content:hover ~ calcite-action {
   @apply text-color-1;
-  border-inline-start: 1px solid var(--calcite-ui-border-3);
+  border-inline-start: 1px solid var(--calcite-color-border-3);
 }
 
 .container:hover .dropdown-action {
@@ -152,8 +152,8 @@ calcite-action {
 
 .dropdown-menu-items {
   @apply absolute h-auto flex-col hidden overflow-visible min-w-full;
-  border: 1px solid var(--calcite-ui-border-3);
-  background: var(--calcite-ui-foreground-1);
+  border: 1px solid var(--calcite-color-border-3);
+  background: var(--calcite-color-foreground-1);
   inset-block-start: 100%;
   z-index: theme("zIndex.dropdown");
   &.open {
diff --git a/packages/calcite-components/src/components/meter/meter.scss b/packages/calcite-components/src/components/meter/meter.scss
index 5d9dbf12e79..217da0f8cb7 100644
--- a/packages/calcite-components/src/components/meter/meter.scss
+++ b/packages/calcite-components/src/components/meter/meter.scss
@@ -21,14 +21,14 @@
 .container {
   @apply flex relative items-center w-full m-0;
   block-size: var(--calcite-meter-height-internal);
-  background-color: var(--calcite-ui-foreground-2);
-  border: 1px solid var(--calcite-ui-border-3);
+  background-color: var(--calcite-color-foreground-2);
+  border: 1px solid var(--calcite-color-border-3);
   border-radius: var(--calcite-meter-height-internal);
 }
 
 .solid {
-  border: 1px solid var(--calcite-ui-foreground-3);
-  background-color: var(--calcite-ui-foreground-3);
+  border: 1px solid var(--calcite-color-foreground-3);
+  background-color: var(--calcite-color-foreground-3);
 }
 
 .outline {
@@ -46,7 +46,7 @@
 .step-line {
   @apply block absolute inset-y-0;
   inline-size: var(--calcite-meter-space-internal);
-  background-color: var(--calcite-ui-border-3);
+  background-color: var(--calcite-color-border-3);
 }
 
 .label {
@@ -61,7 +61,7 @@
 .label-value {
   inset-block-end: calc(100% + 0.5em);
   font-weight: var(--calcite-font-weight-bold);
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }
 
 .label-range {
@@ -88,15 +88,15 @@
 }
 
 .fill-danger {
-  background-color: var(--calcite-ui-danger);
+  background-color: var(--calcite-color-danger);
 }
 
 .fill-success {
-  background-color: var(--calcite-ui-success);
+  background-color: var(--calcite-color-success);
 }
 
 .fill-warning {
-  background-color: var(--calcite-ui-warning);
+  background-color: var(--calcite-color-warning);
 }
 
 .solid .fill {
@@ -104,17 +104,17 @@
   inset-inline-start: 0;
   max-inline-size: 100%;
   min-inline-size: calc(var(--calcite-meter-height-internal));
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
+  box-shadow: 0 0 0 1px var(--calcite-color-brand);
 }
 
 .solid .fill-danger {
-  box-shadow: 0 0 0 1px var(--calcite-ui-danger);
+  box-shadow: 0 0 0 1px var(--calcite-color-danger);
 }
 
 .solid .fill-success {
-  box-shadow: 0 0 0 1px var(--calcite-ui-success);
+  box-shadow: 0 0 0 1px var(--calcite-color-success);
 }
 
 .solid .fill-warning {
-  box-shadow: 0 0 0 1px var(--calcite-ui-warning);
+  box-shadow: 0 0 0 1px var(--calcite-color-warning);
 }
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
index 9d7053ea7a4..2143fb04c4c 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
@@ -47,8 +47,8 @@
 
 :host([active]) .anchor {
   @apply text-color-1;
-  border-color: var(--calcite-ui-brand);
-  --calcite-ui-icon-color: var(--calcite-ui-brand);
+  border-color: var(--calcite-color-brand);
+  --calcite-ui-icon-color: var(--calcite-color-brand);
 }
 
 .container {
diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.scss b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
index f87264c8387..c365a545112 100644
--- a/packages/calcite-components/src/components/navigation-user/navigation-user.scss
+++ b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
@@ -39,7 +39,7 @@ calcite-avatar ~ .text-container {
 
 :host([active]) .button {
   @apply text-color-1 border-color-brand;
-  --calcite-ui-icon-color: var(--calcite-ui-brand);
+  --calcite-ui-icon-color: var(--calcite-color-brand);
 }
 
 .text-container {
diff --git a/packages/calcite-components/src/components/navigation/navigation.scss b/packages/calcite-components/src/components/navigation/navigation.scss
index d9bdd15ae63..43869df8eb3 100644
--- a/packages/calcite-components/src/components/navigation/navigation.scss
+++ b/packages/calcite-components/src/components/navigation/navigation.scss
@@ -17,12 +17,12 @@
   w-full;
   margin-block: 0;
   margin-inline: auto;
-  background-color: var(--calcite-navigation-background, var(--calcite-ui-foreground-1));
+  background-color: var(--calcite-navigation-background, var(--calcite-color-foreground-1));
   &.primary,
   &.secondary,
   &.tertiary {
     border-block-end: 1px solid;
-    border-block-end-color: var(--calcite-navigation-border-color, var(--calcite-ui-border-3));
+    border-block-end-color: var(--calcite-navigation-border-color, var(--calcite-color-border-3));
   }
 }
 
diff --git a/packages/calcite-components/src/components/notice/notice.scss b/packages/calcite-components/src/components/notice/notice.scss
index 634ebbd0427..674deca70a9 100644
--- a/packages/calcite-components/src/components/notice/notice.scss
+++ b/packages/calcite-components/src/components/notice/notice.scss
@@ -163,8 +163,8 @@
   @apply flex self-stretch;
 }
 
-$noticeKinds: "brand" var(--calcite-ui-brand), "info" var(--calcite-ui-info), "danger" var(--calcite-ui-danger),
-  "success" var(--calcite-ui-success), "warning" var(--calcite-ui-warning);
+$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);
 
 @each $noticeKind in $noticeKinds {
   $name: nth($noticeKind, 1);
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 32b07ce7154..495cf865396 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -31,7 +31,7 @@
 .header {
   @apply bg-foreground-1 flex flex-col
     z-header;
-  border-block-end: var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-ui-border-3));
+  border-block-end: var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-color-border-3));
 }
 
 .header-container {
@@ -42,7 +42,7 @@
 }
 
 .header-container--border-end {
-  border-block-end: 1px solid var(--calcite-ui-border-3);
+  border-block-end: 1px solid var(--calcite-color-border-3);
 }
 
 .action-bar-container {
@@ -114,7 +114,7 @@
 
   flex: 0 0 auto;
   padding: var(--calcite-panel-footer-padding, theme("spacing.2"));
-  border-block-start: 1px solid var(--calcite-ui-border-3);
+  border-block-start: 1px solid var(--calcite-color-border-3);
 }
 
 .fab-container {
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 4a47ae21567..56a721d6bc1 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -54,7 +54,7 @@
 }
 
 .arrow::before {
-  outline: 1px solid var(--calcite-ui-border-3);
+  outline: 1px solid var(--calcite-color-border-3);
 }
 
 .header {
diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss
index 1e83f4fd19d..7302fbcfde9 100644
--- a/packages/calcite-components/src/components/progress/progress.scss
+++ b/packages/calcite-components/src/components/progress/progress.scss
@@ -42,7 +42,7 @@
 
 .text {
   @apply text-n2h px-0 pt-4 pb-0 text-center font-medium;
-  color: var(--calcite-ui-text-2);
+  color: var(--calcite-color-text-2);
 }
 
 @keyframes looping-progress-bar-ani {
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.scss b/packages/calcite-components/src/components/radio-button/radio-button.scss
index 2d2db9682ac..0f68c2027c4 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.scss
+++ b/packages/calcite-components/src/components/radio-button/radio-button.scss
@@ -5,14 +5,14 @@
   }
   .radio {
     @apply bg-foreground-1 cursor-pointer focus-base rounded-full transition-default;
-    box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
+    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
   }
 }
 
 :host([hovered]),
 :host(:not([checked])[focused]:not([disabled])) {
   .radio {
-    box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
   }
 }
 
@@ -30,7 +30,7 @@
 
 :host([hovered][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
+    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
   }
 }
 
@@ -53,34 +53,34 @@
 :host([scale="s"][checked]),
 :host([hovered][scale="s"][checked][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 4px var(--calcite-ui-brand);
+    box-shadow: inset 0 0 0 4px var(--calcite-color-brand);
   }
 }
 :host([scale="s"][focused][checked]:not([disabled])) {
   .radio {
-    box-shadow: inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1);
+    box-shadow: inset 0 0 0 4px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1);
   }
 }
 :host([scale="m"][checked]),
 :host([hovered][scale="m"][checked][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 5px var(--calcite-ui-brand);
+    box-shadow: inset 0 0 0 5px var(--calcite-color-brand);
   }
 }
 :host([scale="m"][focused][checked]:not([disabled])) {
   .radio {
-    box-shadow: inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1);
+    box-shadow: inset 0 0 0 5px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1);
   }
 }
 :host([scale="l"][checked]),
 :host([hovered][scale="l"][checked][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 6px var(--calcite-ui-brand);
+    box-shadow: inset 0 0 0 6px var(--calcite-color-brand);
   }
 }
 :host([scale="l"][focused][checked]:not([disabled])) {
   .radio {
-    box-shadow: inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1);
+    box-shadow: inset 0 0 0 6px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1);
   }
 }
 
diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
index 88afa73f4ea..3f6069c490a 100644
--- a/packages/calcite-components/src/components/rating/rating.scss
+++ b/packages/calcite-components/src/components/rating/rating.scss
@@ -87,7 +87,7 @@ calcite-chip {
 }
 
 .number--count {
-  color: var(--calcite-ui-text-2);
+  color: var(--calcite-color-text-2);
   font-style: italic;
   &:not(:first-child) {
     margin-inline-start: var(--calcite-rating-spacing-unit);
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.scss b/packages/calcite-components/src/components/segmented-control/segmented-control.scss
index f3234b02f98..54c7e164313 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.scss
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.scss
@@ -1,7 +1,7 @@
 :host {
   @apply bg-foreground-1 flex;
   inline-size: fit-content;
-  outline: 1px solid var(--calcite-ui-border-input);
+  outline: 1px solid var(--calcite-color-border-input);
   outline-offset: -1px;
 }
 
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.scss b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
index a5d4809e82c..d5ff56678dd 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
@@ -111,7 +111,7 @@
 :host(:focus-within) {
   .separator:not(:hover):not(:focus) {
     @apply opacity-100;
-    background-color: var(--calcite-ui-border-3);
+    background-color: var(--calcite-color-border-3);
   }
 }
 
@@ -126,7 +126,7 @@
   outline: none;
   &:hover {
     @apply opacity-100;
-    background-color: var(--calcite-ui-border-2);
+    background-color: var(--calcite-color-border-2);
   }
   &:focus {
     @apply bg-brand opacity-100;
diff --git a/packages/calcite-components/src/components/slider/slider.scss b/packages/calcite-components/src/components/slider/slider.scss
index 92654ad49e2..2bd14355e9a 100644
--- a/packages/calcite-components/src/components/slider/slider.scss
+++ b/packages/calcite-components/src/components/slider/slider.scss
@@ -54,7 +54,7 @@
 @include disabled() {
   .track__range,
   .tick--active {
-    background-color: var(--calcite-ui-text-3);
+    background-color: var(--calcite-color-text-3);
   }
 }
 
@@ -124,7 +124,7 @@
       rounded-full;
     block-size: var(--calcite-slider-handle-size);
     inline-size: var(--calcite-slider-handle-size);
-    box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
+    box-shadow: 0 0 0 2px var(--calcite-color-text-3) inset;
     transition: border var(--calcite-internal-animation-timing-medium) ease,
       background-color var(--calcite-internal-animation-timing-medium) ease,
       box-shadow var(--calcite-animation-timing) ease;
@@ -133,12 +133,12 @@
   .handle-extension {
     @apply w-0.5;
     block-size: var(--calcite-slider-handle-extension-height);
-    background-color: var(--calcite-ui-text-3);
+    background-color: var(--calcite-color-text-3);
   }
 
   &:hover {
     .handle {
-      box-shadow: 0 0 0 3px var(--calcite-ui-brand) inset;
+      box-shadow: 0 0 0 3px var(--calcite-color-brand) inset;
     }
     .handle-extension {
       @apply bg-brand;
@@ -227,7 +227,7 @@
 
 .track {
   @apply relative h-0.5 rounded-none;
-  background-color: var(--calcite-ui-border-2);
+  background-color: var(--calcite-color-border-2);
   transition: all var(--calcite-internal-animation-timing-medium) ease-in;
 }
 
@@ -280,8 +280,8 @@
     w-0.5
     border
     border-solid;
-  background-color: var(--calcite-ui-border-input);
-  border-color: var(--calcite-ui-foreground-1);
+  background-color: var(--calcite-color-border-input);
+  border-color: var(--calcite-color-foreground-1);
   inset-block-start: -2px;
   pointer-events: none;
   margin-inline-start: calc(-1 * theme("margin[0.5]"));
@@ -315,7 +315,7 @@
 }
 
 .graph {
-  color: var(--calcite-ui-foreground-3);
+  color: var(--calcite-color-foreground-3);
   block-size: 48px;
 }
 
diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
index 1d0f000be29..3f21c124d93 100644
--- a/packages/calcite-components/src/components/switch/switch.scss
+++ b/packages/calcite-components/src/components/switch/switch.scss
@@ -89,7 +89,7 @@
 :host(:focus) {
   .handle {
     @apply border-color-brand;
-    box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
+    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
   }
 }
 
@@ -109,7 +109,7 @@
   }
   .handle {
     @apply border-color-brand-hover;
-    box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
+    box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
   }
 }
 
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 9baf21af777..94570afd3a4 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.scss
+++ b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -183,12 +183,12 @@
   &:focus,
   &:hover {
     @apply text-color-1;
-    background-color: var(--calcite-ui-foreground-2);
+    background-color: var(--calcite-color-foreground-2);
   }
 
   &:active {
     @apply text-color-1;
-    background-color: var(--calcite-ui-foreground-3);
+    background-color: var(--calcite-color-foreground-3);
   }
 
   & calcite-icon {
@@ -209,11 +209,11 @@
 }
 
 :host([bordered][selected]) {
-  box-shadow: inset 0px -2px var(--calcite-ui-foreground-1);
+  box-shadow: inset 0px -2px var(--calcite-color-foreground-1);
 }
 
 :host([bordered][selected][position="bottom"]) {
-  box-shadow: inset 0 2px 0 var(--calcite-ui-foreground-1);
+  box-shadow: inset 0 2px 0 var(--calcite-color-foreground-1);
 }
 
 :host([bordered]:hover),
@@ -249,8 +249,8 @@
 }
 
 :host([selected][bordered]) .container {
-  border-inline-start-color: var(--calcite-ui-border-1);
-  border-inline-end-color: var(--calcite-ui-border-1);
+  border-inline-start-color: var(--calcite-color-border-1);
+  border-inline-end-color: var(--calcite-color-border-1);
 }
 
 :host([bordered]) {
diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss
index 5686771fd3b..c8f1206a6ec 100644
--- a/packages/calcite-components/src/components/table-cell/table-cell.scss
+++ b/packages/calcite-components/src/components/table-cell/table-cell.scss
@@ -28,7 +28,7 @@
 td {
   @apply text-start focus-base align-middle text-color-1 whitespace-normal;
   background: var(--calcite-internal-table-cell-background);
-  border-inline-end: 1px solid var(--calcite-ui-border-3);
+  border-inline-end: 1px solid var(--calcite-color-border-3);
   font-size: var(--calcite-internal-table-cell-font-size);
   &:focus {
     @apply focus-inset;
@@ -42,12 +42,12 @@ td {
 
 .footer-cell {
   @apply bg-background font-medium text-color-1;
-  border-block-start: 1px solid var(--calcite-ui-border-3);
+  border-block-start: 1px solid var(--calcite-color-border-3);
 }
 
 .number-cell,
 .selection-cell {
-  border-inline-end: 1px solid var(--calcite-ui-border-3);
+  border-inline-end: 1px solid var(--calcite-color-border-3);
   inline-size: 2rem;
   min-inline-size: 2rem;
 }
@@ -58,20 +58,20 @@ td {
 }
 
 .selected-cell:not(.number-cell):not(.footer-cell) {
-  --calcite-table-cell-background: var(--calcite-ui-foreground-current);
-  background: var(--calcite-ui-foreground-current);
+  --calcite-table-cell-background: var(--calcite-color-foreground-current);
+  background: var(--calcite-color-foreground-current);
 }
 
 .selection-cell.selected-cell {
-  box-shadow: inset 0.25rem 0 0 0 var(--calcite-ui-brand);
-  color: var(--calcite-ui-brand);
+  box-shadow: inset 0.25rem 0 0 0 var(--calcite-color-brand);
+  color: var(--calcite-color-brand);
   & calcite-icon {
-    color: var(--calcite-ui-brand);
+    color: var(--calcite-color-brand);
   }
 }
 
 .calcite--rtl.selection-cell.selected-cell {
-  box-shadow: inset -0.25rem 0 0 0 var(--calcite-ui-brand);
+  box-shadow: inset -0.25rem 0 0 0 var(--calcite-color-brand);
 }
 
 .selection-cell {
diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss
index c75490ef772..e332805ac95 100644
--- a/packages/calcite-components/src/components/table-header/table-header.scss
+++ b/packages/calcite-components/src/components/table-header/table-header.scss
@@ -8,8 +8,8 @@
  */
 
 :host {
-  --calcite-internal-table-header-background: var(--calcite-table-header-background, var(--calcite-ui-foreground-2));
-  --calcite-internal-table-header-border-color: var(--calcite-table-border-color, var(--calcite-ui-border-3));
+  --calcite-internal-table-header-background: var(--calcite-table-header-background, var(--calcite-color-foreground-2));
+  --calcite-internal-table-header-border-color: var(--calcite-table-border-color, var(--calcite-color-border-3));
   @apply contents;
 }
 
@@ -60,7 +60,7 @@ th.footer-row {
 }
 
 .selection-cell calcite-icon.active {
-  color: var(--calcite-ui-brand);
+  color: var(--calcite-color-brand);
 }
 .number-cell calcite-icon,
 .selection-cell calcite-icon {
diff --git a/packages/calcite-components/src/components/table-row/table-row.scss b/packages/calcite-components/src/components/table-row/table-row.scss
index 4b2454beb89..ba215e00d8a 100644
--- a/packages/calcite-components/src/components/table-row/table-row.scss
+++ b/packages/calcite-components/src/components/table-row/table-row.scss
@@ -8,7 +8,7 @@
  */
 
 :host {
-  --calcite-internal-table-row-background: var(--calcite-table-row-background, var(--calcite-ui-foreground-1));
+  --calcite-internal-table-row-background: var(--calcite-table-row-background, var(--calcite-color-foreground-1));
   --calcite-internal-table-row-border-color: var(--calcite-table-row-border-color, transparent);
   @apply contents;
 }
diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss
index 55136dc1e92..48c20fc0a76 100644
--- a/packages/calcite-components/src/components/table/table.scss
+++ b/packages/calcite-components/src/components/table/table.scss
@@ -28,7 +28,7 @@
 }
 
 .table-container:not(.bordered) {
-  border-block-end: 1px solid var(--calcite-ui-border-3);
+  border-block-end: 1px solid var(--calcite-color-border-3);
 }
 
 .assistive-text {
@@ -38,13 +38,13 @@
 table {
   @apply w-full border-collapse;
   overflow-x: scroll;
-  border-block-start: 1px solid var(--calcite-ui-border-3);
-  border-inline-start: 1px solid var(--calcite-ui-border-3);
-  border-block-end: 1px solid var(--calcite-ui-border-3);
+  border-block-start: 1px solid var(--calcite-color-border-3);
+  border-inline-start: 1px solid var(--calcite-color-border-3);
+  border-block-end: 1px solid var(--calcite-color-border-3);
 }
 
 tbody {
-  border-block-end: 1px solid var(--calcite-ui-border-3);
+  border-block-end: 1px solid var(--calcite-color-border-3);
 }
 
 .table--fixed {
@@ -53,13 +53,13 @@ tbody {
 
 .bordered {
   ::slotted(calcite-table-row) {
-    --calcite-table-row-border-color: var(--calcite-ui-border-3);
+    --calcite-table-row-border-color: var(--calcite-color-border-3);
   }
 }
 
 .zebra {
   ::slotted(calcite-table-row:nth-child(2n + 1)) {
-    --calcite-table-row-background: var(--calcite-ui-foreground-2);
+    --calcite-table-row-background: var(--calcite-color-foreground-2);
   }
 }
 .selection-actions {
diff --git a/packages/calcite-components/src/components/tabs/tabs.scss b/packages/calcite-components/src/components/tabs/tabs.scss
index 8a64e20321d..a709f739ab1 100644
--- a/packages/calcite-components/src/components/tabs/tabs.scss
+++ b/packages/calcite-components/src/components/tabs/tabs.scss
@@ -3,8 +3,8 @@
 }
 
 :host([bordered]) {
-  box-shadow: inset 0 1px 0 var(--calcite-ui-border-1);
-  background-color: var(--calcite-ui-foreground-1);
+  box-shadow: inset 0 1px 0 var(--calcite-color-border-1);
+  background-color: var(--calcite-color-foreground-1);
 }
 
 :host([bordered]:not([position="bottom"])) ::slotted(calcite-tab-nav) {
@@ -12,7 +12,7 @@
 }
 
 :host([bordered][position="bottom"]) {
-  box-shadow: inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);
+  box-shadow: inset 0 1px 0 var(--calcite-color-border-1), inset 0 -1px 0 var(--calcite-color-border-1);
 }
 
 :host([bordered]) section {
diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
index 281c15cfe57..3318b5e8c0d 100644
--- a/packages/calcite-components/src/components/text-area/text-area.scss
+++ b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -17,7 +17,7 @@ textarea {
   w-full
   m-0;
   min-inline-size: theme("spacing.48");
-  border-block-end: 1px solid var(--calcite-ui-border-3);
+  border-block-end: 1px solid var(--calcite-color-border-3);
   @media screen and (max-width: 480px) {
     @apply resize-none;
   }
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.scss b/packages/calcite-components/src/components/tile-select/tile-select.scss
index 7d298cdfa13..a6c262448da 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.scss
+++ b/packages/calcite-components/src/components/tile-select/tile-select.scss
@@ -4,8 +4,8 @@ $spacing: $baseline * 0.5;
   @apply block;
 
   .container {
-    background-color: var(--calcite-ui-foreground-1);
-    box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
+    background-color: var(--calcite-color-foreground-1);
+    box-shadow: 0 0 0 1px var(--calcite-color-border-2);
     box-sizing: border-box;
     cursor: pointer;
     display: inline-block;
@@ -18,7 +18,7 @@ $spacing: $baseline * 0.5;
 
     &.checked {
       @apply z-default;
-      box-shadow: 0 0 0 1px var(--calcite-ui-brand);
+      box-shadow: 0 0 0 1px var(--calcite-color-brand);
     }
 
     &.heading-only {
@@ -38,7 +38,7 @@ $spacing: $baseline * 0.5;
         &:not(.input-enabled) {
           @apply focus-inset;
           outline-offset: -4px;
-          box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1);
+          box-shadow: 0 0 0 1px var(--calcite-color-brand), inset 0 0 0 2px var(--calcite-color-foreground-1);
         }
       }
     }
@@ -123,7 +123,7 @@ $spacing: $baseline * 0.5;
 :host(:hover) {
   .container {
     &:not(.input-enabled) {
-      box-shadow: 0 0 0 1px var(--calcite-ui-brand);
+      box-shadow: 0 0 0 1px var(--calcite-color-brand);
     }
   }
 }
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index c50c0e01eec..b33f35b425b 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -81,19 +81,19 @@
 :host([href]:hover) {
   .heading {
     @apply underline;
-    color: var(--calcite-ui-text-link);
+    color: var(--calcite-color-text-link);
   }
 }
 :host(:not([embed])) {
   @apply p-3;
-  box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
+  box-shadow: 0 0 0 1px var(--calcite-color-border-2);
 }
 :host(:not([embed])[href]:hover) {
   @apply cursor-pointer;
-  box-shadow: 0 0 0 2px var(--calcite-ui-brand);
+  box-shadow: 0 0 0 2px var(--calcite-color-brand);
 }
 :host(:not([embed])[href]:active) {
-  box-shadow: 0 0 0 3px var(--calcite-ui-brand);
+  box-shadow: 0 0 0 3px var(--calcite-color-brand);
 }
 :host([icon][heading]:not([description]):not([embed])) {
   @apply p-0;
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.scss b/packages/calcite-components/src/components/time-picker/time-picker.scss
index ca3cccf73e5..e912cbd0fcf 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.scss
+++ b/packages/calcite-components/src/components/time-picker/time-picker.scss
@@ -63,7 +63,7 @@
       justify-center
       font-medium;
     &:hover {
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-2);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-2);
       z-index: theme("zIndex.header");
     }
     &:focus,
@@ -73,7 +73,7 @@
     }
     &.inputFocus,
     &:hover.inputFocus {
-      box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
       z-index: theme("zIndex.header");
     }
   }
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.scss b/packages/calcite-components/src/components/tooltip/tooltip.scss
index 231052459f3..2e86e260154 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.scss
+++ b/packages/calcite-components/src/components/tooltip/tooltip.scss
@@ -36,7 +36,7 @@
 }
 
 .arrow::before {
-  outline: 1px solid var(--calcite-ui-border-3);
+  outline: 1px solid var(--calcite-color-border-3);
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss
index 00592dc0a77..571ef73c3bd 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -80,7 +80,7 @@
     // ensure lines don't overlap focus outline
     block-size: 96%;
     content: "";
-    background-color: var(--calcite-ui-border-2);
+    background-color: var(--calcite-color-border-2);
   }
 }
 
@@ -159,7 +159,7 @@
   .checkmark,
   .bullet-point {
     @apply transition-default opacity-0;
-    color: var(--calcite-ui-border-1);
+    color: var(--calcite-color-border-1);
   }
 }
 
@@ -242,7 +242,7 @@
 :host([selected]) {
   .checkmark,
   .bullet-point {
-    color: var(--calcite-ui-brand);
+    color: var(--calcite-color-brand);
   }
 }
 
diff --git a/packages/calcite-components/src/utils/responsive.ts b/packages/calcite-components/src/utils/responsive.ts
index cb882e3516a..2d4d1a26e26 100644
--- a/packages/calcite-components/src/utils/responsive.ts
+++ b/packages/calcite-components/src/utils/responsive.ts
@@ -1,10 +1,10 @@
 import {
-  CoreBreakpointWidthDefaultLg,
-  CoreBreakpointWidthDefaultMd,
-  CoreBreakpointWidthDefaultSm,
-  CoreBreakpointWidthDefaultXs,
-  CoreBreakpointWidthDefaultXxs,
-} from "@esri/calcite-design-tokens/dist/es6/calcite-headless";
+  calciteContainerSizeWidthLg,
+  calciteContainerSizeWidthMd,
+  calciteContainerSizeWidthSm,
+  calciteContainerSizeWidthXs,
+  calciteContainerSizeWidthXxs,
+} from "@esri/calcite-design-tokens/dist/es6/global";
 
 export interface Breakpoints {
   width: {
@@ -21,11 +21,11 @@ export interface Breakpoints {
  */
 export const breakpoints: Breakpoints = {
   width: {
-    large: cssLengthToNumber(CoreBreakpointWidthDefaultLg),
-    medium: cssLengthToNumber(CoreBreakpointWidthDefaultMd),
-    small: cssLengthToNumber(CoreBreakpointWidthDefaultSm),
-    xsmall: cssLengthToNumber(CoreBreakpointWidthDefaultXs),
-    xxsmall: cssLengthToNumber(CoreBreakpointWidthDefaultXxs),
+    large: cssLengthToNumber(calciteContainerSizeWidthLg.max),
+    medium: cssLengthToNumber(calciteContainerSizeWidthMd.max),
+    small: cssLengthToNumber(calciteContainerSizeWidthSm.max),
+    xsmall: cssLengthToNumber(calciteContainerSizeWidthXs.max),
+    xxsmall: cssLengthToNumber(calciteContainerSizeWidthXxs.max),
   },
 };
 
diff --git a/packages/calcite-design-tokens/package.json b/packages/calcite-design-tokens/package.json
index 80f13c6edb3..b4e84576c61 100644
--- a/packages/calcite-design-tokens/package.json
+++ b/packages/calcite-design-tokens/package.json
@@ -19,7 +19,7 @@
     "./scss": "./dist/scss/index.scss",
     "./scss/calcite/dark": "./dist/scss/dark.scss",
     "./scss/calcite/light": "./dist/scss/light.scss",
-    "./scss/headless": "./dist/scss/headless.scss",
+    "./scss/global": "./dist/scss/global.scss",
     "./js": "./dist/js/global.js",
     "./js/calcite/dark": "./dist/js/dark.js",
     "./js/calcite/light": "./dist/js/light.js",
diff --git a/packages/calcite-design-tokens/src/$config.ts b/packages/calcite-design-tokens/src/$config.ts
index 953a434742a..b9ad6784c32 100644
--- a/packages/calcite-design-tokens/src/$config.ts
+++ b/packages/calcite-design-tokens/src/$config.ts
@@ -41,8 +41,6 @@ export const config: CalciteTokenTransformConfig = {
         breakpoint: "breakpoints.scss",
         index: {
           name: "index.scss",
-          import: ["../css/index.css"],
-          forward: ["./mixins.scss"],
           mixin: [
             ["calcite-color-scheme-light", "light"],
             ["calcite-color-scheme-dark", "dark"],
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts
index 67e5376b21e..9a9a6036e94 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts
@@ -19,7 +19,7 @@ const formatters: Partial<Record<PlatformFormats, string>> = {
   js: CalciteJs,
   es6: "javascript/es6",
   ts: CalciteTs,
-  es6Ts: "typescript/module-declarations",
+  es6Ts: "typescript/es6-declarations",
 } as const;
 
 export const format = <T extends keyof typeof formatters>(t: T): (typeof formatters)[T] => {
diff --git a/packages/calcite-design-tokens/support/types/fileExtensions.ts b/packages/calcite-design-tokens/support/types/fileExtensions.ts
index 9c57c285b4f..bb491f285c7 100644
--- a/packages/calcite-design-tokens/support/types/fileExtensions.ts
+++ b/packages/calcite-design-tokens/support/types/fileExtensions.ts
@@ -6,6 +6,6 @@ export const fileExtension: PlatformObject<string> = {
   scss: ".scss",
   js: ".js",
   es6: ".js",
-  ts: ".ts",
-  es6Ts: ".ts",
+  ts: ".d.ts",
+  es6Ts: ".d.ts",
 };
diff --git a/packages/calcite-design-tokens/support/types/tokenStudio/fontWeight.ts b/packages/calcite-design-tokens/support/types/tokenStudio/fontWeight.ts
index d8acf39eb16..a2016418293 100644
--- a/packages/calcite-design-tokens/support/types/tokenStudio/fontWeight.ts
+++ b/packages/calcite-design-tokens/support/types/tokenStudio/fontWeight.ts
@@ -5,41 +5,21 @@ export const FontWeight = {
   // This font weight name comes from token studio transformers
   // eslint-disable-next-line @cspell/spellchecker
   buch: 400,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   demi: 600,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   demibold: 600,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   dreiviertelfett: 700,
   extrabold: 800,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   extrafett: 900,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   extraleicht: 200,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   extralight: 200,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   fett: 800,
   hairline: 1,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   halbfett: 600,
   heavy: 900,
   // This font weight name comes from token studio transformers
   // eslint-disable-next-line @cspell/spellchecker
   kraeftig: 500,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   kräftig: 500,
-  // This font weight name comes from token studio transformers
-  // eslint-disable-next-line @cspell/spellchecker
   leicht: 300,
   light: 300,
   medium: 500,
diff --git a/support/dictionaries/dict-calcite-design-system.txt b/support/dictionaries/dict-calcite-design-system.txt
index 2d88329f599..f49e3e6afd3 100644
--- a/support/dictionaries/dict-calcite-design-system.txt
+++ b/support/dictionaries/dict-calcite-design-system.txt
@@ -75,6 +75,17 @@ tibt
 xsmall
 xxsmall
 
+## style dictionary transforms for tokens studio
+demi
+dreiviertelfett
+extrafett
+extraleicht
+extralight
+fett
+halbfett
+kräftig
+leicht
+
 ## svg
 svgs
 viewbox