diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index 3f16ff76..bdfaa515 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -39,7 +39,7 @@
   );
 </script>
 
-<p style="margin-bottom: var(--cds-layout-02)">
+<p style="margin-bottom: var(--bx-layout-02)">
   Source code:
   <OutboundLink size="lg" inline href="{source}">
     {component.filePath}
@@ -68,7 +68,7 @@
               <InlineSnippet code="{prop.name}" />
               {#if prop.reactive}
                 <div
-                  style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
+                  style="white-space: nowrap; margin-top: var(--bx-spacing-03); margin-bottom: var(--bx-spacing-{prop.isRequired
                     ? '01'
                     : '03'})"
                 >
@@ -134,7 +134,7 @@
 
 {#if component.typedefs.length > 0}
   <CodeSnippet
-    style="margin-top: var(--cds-spacing-08)"
+    style="margin-top: var(--bx-spacing-08)"
     class="my-layout-01-03"
     type="multi"
     code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
@@ -216,14 +216,14 @@
 
 <style>
   .description {
-    margin-bottom: var(--cds-spacing-04);
+    margin-bottom: var(--bx-spacing-04);
   }
 
   .cell {
     position: relative;
     z-index: 9;
     min-height: 1.25rem;
-    margin-bottom: var(--cds-spacing-02);
+    margin-bottom: var(--bx-spacing-02);
   }
 
   .overflow {
@@ -231,13 +231,13 @@
   }
 
   :global(.my-layout-01-03) {
-    margin-top: var(--cds-layout-01);
-    margin-bottom: var(--cds-layout-03);
+    margin-top: var(--bx-layout-01);
+    margin-bottom: var(--bx-layout-03);
   }
 
   :global(.overflow .bx--structured-list) {
-    margin-top: var(--cds-layout-01);
-    margin-bottom: var(--cds-layout-04);
+    margin-top: var(--bx-layout-01);
+    margin-bottom: var(--bx-layout-04);
   }
 
   code {
diff --git a/docs/src/components/InlineSnippet.svelte b/docs/src/components/InlineSnippet.svelte
index 136fe90b..78a95a27 100644
--- a/docs/src/components/InlineSnippet.svelte
+++ b/docs/src/components/InlineSnippet.svelte
@@ -11,6 +11,6 @@
 
 <style>
   div {
-    margin-bottom: var(--cds-spacing-03);
+    margin-bottom: var(--bx-spacing-03);
   }
 </style>
diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index b480dfed..0f26bfdb 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -16,9 +16,7 @@
 <div class="preview">
   {#if framed}
     <div class="framed-header">
-      <div
-        style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
-      >
+      <div style="margin-left: var(--bx-spacing-05); color: var(--bx-text-02)">
         Content loaded in an iframe
       </div>
       <Button
@@ -49,7 +47,7 @@
 
 <style>
   .preview {
-    margin-bottom: var(--cds-layout-04);
+    margin-bottom: var(--bx-layout-04);
     margin-left: -1rem;
     margin-right: -1rem;
     max-width: 66rem;
@@ -60,14 +58,14 @@
   }
 
   .preview-viewer {
-    border: 1px solid var(--cds-ui-03);
+    border: 1px solid var(--bx-ui-03);
     border-bottom: 0;
     position: relative;
     z-index: 9999;
   }
 
   .preview-viewer:not(.framed) {
-    padding: var(--cds-spacing-06) var(--cds-spacing-05);
+    padding: var(--bx-spacing-06) var(--bx-spacing-05);
   }
 
   .preview-viewer.framed {
diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte
index bfdbf3eb..55bb2464 100644
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@@ -31,9 +31,9 @@
           <svelte:component
             this="{LogoGithub}"
             size="{32}"
-            style="fill: var(--cds-icon-01)"
+            style="fill: var(--bx-icon-01)"
           />
-          <Launch size="{20}" style="fill: var(--cds-icon-01)" />
+          <Launch size="{20}" style="fill: var(--bx-icon-01)" />
         </div>
       </div>
     </svelte:component>
@@ -47,11 +47,11 @@
   }
 
   .borderRight {
-    border-right: 1px solid var(--cds-ui-03);
+    border-right: 1px solid var(--bx-ui-03);
   }
 
   .borderBottom {
-    border-bottom: 1px solid var(--cds-ui-03);
+    border-bottom: 1px solid var(--bx-ui-03);
   }
 
   .card {
@@ -68,19 +68,19 @@
   }
 
   .title {
-    margin-top: calc(-1 * var(--cds-spacing-02));
-    margin-bottom: var(--cds-spacing-01);
+    margin-top: calc(-1 * var(--bx-spacing-02));
+    margin-bottom: var(--bx-spacing-01);
   }
 
   .subtitle {
-    color: var(--cds-text-02);
+    color: var(--bx-text-02);
   }
 
   @media (max-width: 671px) {
     .card-wrapper,
     .borderRight {
       border-right: 0;
-      border-bottom: 1px solid var(--cds-ui-03);
+      border-bottom: 1px solid var(--bx-ui-03);
     }
   }
 </style>
diff --git a/docs/src/global.css b/docs/src/global.css
index 87714409..17e95f52 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -1,5 +1,5 @@
 html[theme="g90"] .code-override {
-  border: 1px solid var(--cds-ui-03);
+  border: 1px solid var(--bx-ui-03);
 }
 
 .code-override .bx--snippet {
@@ -23,9 +23,9 @@ html[theme="g90"] .code-override {
 }
 
 .code-override .bx--snippet-container pre {
-  font-size: var(--cds-code-02-font-size);
-  line-height: var(--cds-code-02-line-height);
-  letter-spacing: var(--cds-code-02-letter-spacing);
+  font-size: var(--bx-code-02-font-size);
+  line-height: var(--bx-code-02-line-height);
+  letter-spacing: var(--bx-code-02-letter-spacing);
   cursor: text;
 }
 
@@ -118,7 +118,7 @@ html[theme="g90"] .code-override {
 }
 
 .prose .toc {
-  margin-bottom: var(--cds-layout-01);
+  margin-bottom: var(--bx-layout-01);
 }
 
 .table {
@@ -126,9 +126,9 @@ html[theme="g90"] .code-override {
   max-height: calc(100vh - 3rem);
   top: 3rem;
   margin-top: -3rem;
-  padding-top: var(--cds-spacing-05);
-  padding-bottom: var(--cds-spacing-05);
-  padding-left: var(--cds-spacing-08);
+  padding-top: var(--bx-spacing-05);
+  padding-bottom: var(--bx-spacing-05);
+  padding-left: var(--bx-spacing-08);
   overflow-y: auto;
 }
 
@@ -149,7 +149,7 @@ html[theme="g90"] .code-override {
 
 .preview-viewer > .bx--aspect-ratio,
 .preview-viewer [data-outline] {
-  outline: 1px solid var(--cds-interactive-04);
+  outline: 1px solid var(--bx-interactive-04);
 }
 
 [data-outline] {
@@ -157,7 +157,7 @@ html[theme="g90"] .code-override {
 }
 
 [data-outline] ~ [data-outline] {
-  margin-top: var(--cds-spacing-08);
+  margin-top: var(--bx-spacing-08);
 }
 
 #select-theme {
@@ -169,46 +169,46 @@ html[theme="g90"] .code-override {
 }
 
 .prose .toc {
-  margin-bottom: var(--cds-layout-01);
+  margin-bottom: var(--bx-layout-01);
 }
 
 .code-01 {
-  font-size: var(--cds-code-01-font-size);
-  font-weight: var(--cds-code-01-font-weight);
-  letter-spacing: var(--cds-code-01-letter-spacing);
-  line-height: var(--cds-code-01-line-height);
+  font-size: var(--bx-code-01-font-size);
+  font-weight: var(--bx-code-01-font-weight);
+  letter-spacing: var(--bx-code-01-letter-spacing);
+  line-height: var(--bx-code-01-line-height);
 }
 
 .body-short-01 {
-  font-size: var(--cds-body-short-01-font-size);
-  font-weight: var(--cds-body-short-01-font-weight);
-  letter-spacing: var(--cds-body-short-01-letter-spacing);
-  line-height: var(--cds-body-short-01-line-height);
+  font-size: var(--bx-body-short-01-font-size);
+  font-weight: var(--bx-body-short-01-font-weight);
+  letter-spacing: var(--bx-body-short-01-letter-spacing);
+  line-height: var(--bx-body-short-01-line-height);
 }
 
 .bx--col > h1 {
-  font-size: var(--cds-expressive-heading-05-font-size);
-  font-weight: var(--cds-expressive-heading-05-font-weight);
-  letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
-  line-height: var(--cds-expressive-heading-05-line-height);
-  margin-bottom: var(--cds-layout-01);
+  font-size: var(--bx-expressive-heading-05-font-size);
+  font-weight: var(--bx-expressive-heading-05-font-weight);
+  letter-spacing: var(--bx-expressive-heading-05-letter-spacing);
+  line-height: var(--bx-expressive-heading-05-line-height);
+  margin-bottom: var(--bx-layout-01);
 }
 
 .big-paragraph {
-  font-size: var(--cds-expressive-heading-03-font-size);
-  font-weight: var(--cds-expressive-heading-03-font-weight);
-  letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
-  line-height: var(--cds-expressive-heading-03-line-height);
-  margin-top: var(--cds-layout-03);
-  margin-bottom: var(--cds-layout-06);
+  font-size: var(--bx-expressive-heading-03-font-size);
+  font-weight: var(--bx-expressive-heading-03-font-weight);
+  letter-spacing: var(--bx-expressive-heading-03-letter-spacing);
+  line-height: var(--bx-expressive-heading-03-line-height);
+  margin-top: var(--bx-layout-03);
+  margin-bottom: var(--bx-layout-06);
 }
 
 .big-link,
 .bx--col > .big-paragraph > code {
-  font-size: var(--cds-expressive-heading-03-font-size);
-  font-weight: var(--cds-expressive-heading-03-font-weight);
-  letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
-  line-height: var(--cds-expressive-heading-03-line-height);
+  font-size: var(--bx-expressive-heading-03-font-size);
+  font-weight: var(--bx-expressive-heading-03-font-weight);
+  letter-spacing: var(--bx-expressive-heading-03-letter-spacing);
+  line-height: var(--bx-expressive-heading-03-line-height);
 }
 
 .bx--col > p {
@@ -216,32 +216,32 @@ html[theme="g90"] .code-override {
 }
 
 .bx--col > p > code {
-  font-size: var(--cds-code-02-font-size);
-  font-weight: var(--cds-code-02-font-weight);
-  line-height: var(--cds-code-02-line-height);
-  letter-spacing: var(--cds-code-02-letter-spacing);
-  background-color: var(--cds-ui-03);
+  font-size: var(--bx-code-02-font-size);
+  font-weight: var(--bx-code-02-font-weight);
+  line-height: var(--bx-code-02-line-height);
+  letter-spacing: var(--bx-code-02-letter-spacing);
+  background-color: var(--bx-ui-03);
   border-radius: 0.25rem;
-  padding: 0 var(--cds-spacing-02);
+  padding: 0 var(--bx-spacing-02);
 }
 
 [class*="bx--col"] > h2,
 .bx--tab-content > h2 {
-  font-size: var(--cds-expressive-heading-04-font-size);
-  font-weight: var(--cds-expressive-heading-04-font-weight);
-  letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
-  line-height: var(--cds-expressive-heading-04-line-height);
-  padding-top: var(--cds-layout-03);
-  margin-bottom: var(--cds-layout-01);
+  font-size: var(--bx-expressive-heading-04-font-size);
+  font-weight: var(--bx-expressive-heading-04-font-weight);
+  letter-spacing: var(--bx-expressive-heading-04-letter-spacing);
+  line-height: var(--bx-expressive-heading-04-line-height);
+  padding-top: var(--bx-layout-03);
+  margin-bottom: var(--bx-layout-01);
 }
 
 .bx--col > h4 {
-  font-size: var(--cds-expressive-heading-02-font-size);
-  font-weight: var(--cds-expressive-heading-02-font-weight);
-  letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
-  line-height: var(--cds-expressive-heading-02-line-height);
-  padding-top: var(--cds-layout-04);
-  margin-bottom: var(--cds-layout-01);
+  font-size: var(--bx-expressive-heading-02-font-size);
+  font-weight: var(--bx-expressive-heading-02-font-weight);
+  letter-spacing: var(--bx-expressive-heading-02-letter-spacing);
+  line-height: var(--bx-expressive-heading-02-line-height);
+  padding-top: var(--bx-layout-04);
+  margin-bottom: var(--bx-layout-01);
 }
 
 .bx--col > h2,
@@ -252,5 +252,5 @@ html[theme="g90"] .code-override {
 }
 
 .bx--col > p {
-  margin-bottom: var(--cds-layout-02);
+  margin-bottom: var(--bx-layout-02);
 }
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 75fde5c0..6b615632 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -150,7 +150,7 @@
             {#each api_components as component (component.moduleName)}
               <Tab label="{component.moduleName}" />
             {/each}
-            <div slot="content" style="padding-top: var(--cds-spacing-06)">
+            <div slot="content" style="padding-top: var(--bx-spacing-06)">
               {#each api_components as component (component.moduleName)}
                 <TabContent>
                   <ComponentApi component="{component}" />
@@ -177,13 +177,13 @@
   .bar {
     display: flex;
     justify-content: space-between;
-    margin-bottom: var(--cds-layout-02);
-    border-bottom: 1px solid var(--cds-ui-03);
+    margin-bottom: var(--bx-layout-02);
+    border-bottom: 1px solid var(--bx-ui-03);
   }
 
   :global(.toc h5) {
-    margin-top: var(--cds-spacing-06);
-    margin-bottom: var(--cds-spacing-03);
+    margin-top: var(--bx-spacing-06);
+    margin-bottom: var(--bx-spacing-03);
   }
 
   .toc.mobile {
@@ -193,7 +193,7 @@
   @media (max-width: 1056px) {
     .toc.mobile {
       display: block;
-      margin-bottom: var(--cds-spacing-09);
+      margin-bottom: var(--bx-spacing-09);
     }
   }
 </style>
diff --git a/docs/src/pages/components/Breakpoint.svx b/docs/src/pages/components/Breakpoint.svx
index 134d7a76..072a5659 100644
--- a/docs/src/pages/components/Breakpoint.svx
+++ b/docs/src/pages/components/Breakpoint.svx
@@ -8,7 +8,7 @@
 
 The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
 
-<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
   <ListItem><strong>Small</strong>: less than 672px</ListItem>
   <ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
   <ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx
index 961a481d..9e14165f 100644
--- a/docs/src/pages/components/FileUploader.svx
+++ b/docs/src/pages/components/FileUploader.svx
@@ -44,7 +44,7 @@ See the [item examples below](#item-uploading) for different statuses.
 
 There are two ways to clear files in `FileUploader`:
 
-<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
   <ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
   <ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
 </UnorderedList>
@@ -111,7 +111,7 @@ The following example accepts files smaller than 1 kB.
 
 <FileUploaderDropContainer
   multiple
-  labelText="Drag and drop files here or click to upload" 
+  labelText="Drag and drop files here or click to upload"
   validateFiles={files => {
     return files.filter(file => file.size < 1_024)
   }}
diff --git a/docs/src/pages/components/Popover.svx b/docs/src/pages/components/Popover.svx
index 75622734..40089d01 100644
--- a/docs/src/pages/components/Popover.svx
+++ b/docs/src/pages/components/Popover.svx
@@ -10,7 +10,7 @@ By default, the position of the popover component is absolute.
 <div data-outline>
     Parent
     <Popover open>
-        <div style="padding: var(--cds-spacing-05)">Content</div>
+        <div style="padding: var(--bx-spacing-05)">Content</div>
     </Popover>
 </div>
 
@@ -21,7 +21,7 @@ Set `relative` to `true` to use a relative position.
 <div data-outline>
     Parent
     <Popover relative open>
-        <div style="padding: var(--cds-spacing-05)">Content</div>
+        <div style="padding: var(--bx-spacing-05)">Content</div>
     </Popover>
 </div>
 
@@ -32,7 +32,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
 <div data-outline>
     Parent
     <Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
-        <div style="padding: var(--cds-spacing-05)">Content</div>
+        <div style="padding: var(--bx-spacing-05)">Content</div>
     </Popover>
 </div>
 
@@ -45,67 +45,67 @@ The default `align` value is `"top"`.
 <div data-outline>
     Parent
     <Popover open align="top-left">
-        <div style="padding: var(--cds-spacing-05)">top-left</div>
+        <div style="padding: var(--bx-spacing-05)">top-left</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="top-right">
-        <div style="padding: var(--cds-spacing-05)">top-right</div>
+        <div style="padding: var(--bx-spacing-05)">top-right</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="bottom">
-        <div style="padding: var(--cds-spacing-05)">bottom</div>
+        <div style="padding: var(--bx-spacing-05)">bottom</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="bottom-left">
-        <div style="padding: var(--cds-spacing-05)">bottom-left</div>
+        <div style="padding: var(--bx-spacing-05)">bottom-left</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="bottom-right">
-        <div style="padding: var(--cds-spacing-05)">bottom-right</div>
+        <div style="padding: var(--bx-spacing-05)">bottom-right</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="left">
-        <div style="padding: var(--cds-spacing-05)">left</div>
+        <div style="padding: var(--bx-spacing-05)">left</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="left-bottom">
-        <div style="padding: var(--cds-spacing-05)">left-bottom</div>
+        <div style="padding: var(--bx-spacing-05)">left-bottom</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="left-right">
-        <div style="padding: var(--cds-spacing-05)">left-right</div>
+        <div style="padding: var(--bx-spacing-05)">left-right</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="right">
-        <div style="padding: var(--cds-spacing-05)">right</div>
+        <div style="padding: var(--bx-spacing-05)">right</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="right-bottom">
-        <div style="padding: var(--cds-spacing-05)">right-bottom</div>
+        <div style="padding: var(--bx-spacing-05)">right-bottom</div>
     </Popover>
 </div>
 <div data-outline>
     Parent
     <Popover open align="right-top">
-        <div style="padding: var(--cds-spacing-05)">right-top</div>
+        <div style="padding: var(--bx-spacing-05)">right-top</div>
     </Popover>
 </div>
 
@@ -114,7 +114,7 @@ The default `align` value is `"top"`.
 <div data-outline>
     Parent
     <Popover caret open>
-        <div style="padding: var(--cds-spacing-05)">Content</div>
+        <div style="padding: var(--bx-spacing-05)">Content</div>
     </Popover>
 </div>
 
@@ -127,7 +127,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
 <div data-outline>
     Parent
     <Popover caret align="top-left" open>
-        <div style="padding: var(--cds-spacing-05)">Content</div>
+        <div style="padding: var(--bx-spacing-05)">Content</div>
     </Popover>
 </div>
 
@@ -136,7 +136,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
 <div data-outline>
     Parent
     <Popover light open>
-        <div style="padding: var(--cds-spacing-05)">Content</div>
+        <div style="padding: var(--bx-spacing-05)">Content</div>
     </Popover>
 </div>
 
@@ -145,7 +145,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
 <div data-outline>
     Parent
     <Popover highContrast open>
-        <div style="padding: var(--cds-spacing-05)">Content</div>
+        <div style="padding: var(--bx-spacing-05)">Content</div>
     </Popover>
 </div>
 
diff --git a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
index 9f2473f9..f78e421d 100644
--- a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
+++ b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
@@ -17,10 +17,10 @@
 <style>
   p,
   h1 {
-    margin-bottom: var(--cds-spacing-08);
+    margin-bottom: var(--bx-spacing-08);
   }
 
   h6 {
-    margin-bottom: var(--cds-spacing-03);
+    margin-bottom: var(--bx-spacing-03);
   }
 </style>
diff --git a/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte b/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
index a58be9eb..97796b22 100644
--- a/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
+++ b/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
@@ -6,7 +6,7 @@
 
 <Checkbox labelText="Label text" bind:checked />
 
-<div style="margin: var(--cds-layout-01) 0">
+<div style="margin: var(--bx-layout-01) 0">
   <Button on:click="{() => (checked = !checked)}">Toggle</Button>
 </div>
 
diff --git a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
index d66c444b..42330984 100644
--- a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
+++ b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
@@ -9,7 +9,7 @@
   <Checkbox bind:group labelText="{value}" value="{value}" />
 {/each}
 
-<div style="margin: var(--cds-layout-01) 0">
+<div style="margin: var(--bx-layout-01) 0">
   <Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
 </div>
 
diff --git a/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
index ca658505..1bea4956 100644
--- a/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
@@ -11,6 +11,6 @@
   bind:toggled
   size="sm"
   labelText="Trigger snippet overflow"
-  style="margin-bottom: var(--cds-spacing-05)"
+  style="margin-bottom: var(--bx-spacing-05)"
 />
 <CodeSnippet type="multi" code="{code}" />
diff --git a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
index 10634950..c274a222 100644
--- a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@@ -8,7 +8,7 @@
 
 <Toggle
   size="sm"
-  style="margin-bottom: var(--cds-spacing-05)"
+  style="margin-bottom: var(--bx-spacing-05)"
   labelText="Show code snippets"
   bind:toggled
 />
diff --git a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
index 7e53612f..6c7cec93 100644
--- a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
@@ -37,6 +37,6 @@
 
 <style>
   div {
-    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+    margin: var(--bx-layout-01) 0 var(--bx-layout-03);
   }
 </style>
diff --git a/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte b/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
index 517c25c2..82d9b2dc 100644
--- a/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
+++ b/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
@@ -24,6 +24,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
index 21e92b03..7b3bd53b 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
@@ -48,11 +48,11 @@
 <style>
   div {
     position: absolute;
-    width: calc(100% - var(--cds-spacing-05));
-    height: calc(100% - var(--cds-spacing-06));
+    width: calc(100% - var(--bx-spacing-05));
+    height: calc(100% - var(--bx-spacing-06));
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--cds-text-02);
+    color: var(--bx-text-02);
   }
 </style>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
index 132edc46..c21ac4ad 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
@@ -29,11 +29,11 @@
 <style>
   div {
     position: absolute;
-    width: calc(100% - var(--cds-spacing-05));
-    height: calc(100% - var(--cds-spacing-06));
+    width: calc(100% - var(--bx-spacing-05));
+    height: calc(100% - var(--bx-spacing-06));
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--cds-text-02);
+    color: var(--bx-text-02);
   }
 </style>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
index d957059e..87566ac0 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
@@ -46,15 +46,15 @@
 <style>
   div {
     position: absolute;
-    width: calc(100% - var(--cds-spacing-05));
-    height: calc(100% - var(--cds-spacing-06));
+    width: calc(100% - var(--bx-spacing-05));
+    height: calc(100% - var(--bx-spacing-06));
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--cds-text-02);
+    color: var(--bx-text-02);
   }
 
   p {
-    outline: 1px solid var(--cds-interactive-01);
+    outline: 1px solid var(--bx-interactive-01);
   }
 </style>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
index c9363250..f8a3a473 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
@@ -51,15 +51,15 @@
 <style>
   div {
     position: absolute;
-    width: calc(100% - var(--cds-spacing-05));
-    height: calc(100% - var(--cds-spacing-06));
+    width: calc(100% - var(--bx-spacing-05));
+    height: calc(100% - var(--bx-spacing-06));
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--cds-text-02);
+    color: var(--bx-text-02);
   }
 
   p {
-    outline: 1px solid var(--cds-interactive-01);
+    outline: 1px solid var(--bx-interactive-01);
   }
 </style>
diff --git a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
index 0de755a2..bb1bb5f3 100644
--- a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
+++ b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
@@ -37,6 +37,6 @@
 
 <style>
   div {
-    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+    margin: var(--bx-layout-01) 0 var(--bx-layout-03);
   }
 </style>
diff --git a/docs/src/pages/framed/Grid/PaddedGrid.svelte b/docs/src/pages/framed/Grid/PaddedGrid.svelte
index a960ba17..ae49a9cd 100644
--- a/docs/src/pages/framed/Grid/PaddedGrid.svelte
+++ b/docs/src/pages/framed/Grid/PaddedGrid.svelte
@@ -43,7 +43,7 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
-    padding: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
+    padding: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
index b1c8c3b3..e4199d48 100644
--- a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
+++ b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
@@ -39,6 +39,6 @@
 
 <style>
   div {
-    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+    margin: var(--bx-layout-01) 0 var(--bx-layout-03);
   }
 </style>
diff --git a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
index cc76a330..b714efc5 100644
--- a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
+++ b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
@@ -6,7 +6,7 @@
 
 <NumberInput allowEmpty bind:value />
 
-<div style="margin: var(--cds-layout-01) 0">
+<div style="margin: var(--bx-layout-01) 0">
   <Button on:click="{() => (value = null)}">Set to null</Button>
   <Button on:click="{() => (value = 0)}">Set to 0</Button>
 </div>
diff --git a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
index ff416901..c240ffe7 100644
--- a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
+++ b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
@@ -21,7 +21,7 @@
   status="{status}"
 />
 
-<ButtonSet style="margin-top: var(--cds-spacing-08)">
+<ButtonSet style="margin-top: var(--bx-spacing-08)">
   <Button
     disabled="{value > 0}"
     on:click="{() => {
diff --git a/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte b/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
index f833e346..fb66719b 100644
--- a/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
+++ b/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
@@ -32,7 +32,7 @@
   />
 </ProgressIndicator>
 
-<div style="margin: var(--cds-layout-02) 0">
+<div style="margin: var(--bx-layout-02) 0">
   <Button
     kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
     on:click="{() => {
diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
index 839a9e8e..cba9a7dc 100644
--- a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
+++ b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
@@ -26,6 +26,6 @@
 
 <style>
   div {
-    margin: var(--cds-spacing-05) 0;
+    margin: var(--bx-spacing-05) 0;
   }
 </style>
diff --git a/docs/src/pages/framed/Search/SearchReactive.svelte b/docs/src/pages/framed/Search/SearchReactive.svelte
index 23dee3dc..ef32455e 100644
--- a/docs/src/pages/framed/Search/SearchReactive.svelte
+++ b/docs/src/pages/framed/Search/SearchReactive.svelte
@@ -30,6 +30,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/Select/SelectReactive.svelte b/docs/src/pages/framed/Select/SelectReactive.svelte
index e7110169..02e8a930 100644
--- a/docs/src/pages/framed/Select/SelectReactive.svelte
+++ b/docs/src/pages/framed/Select/SelectReactive.svelte
@@ -12,7 +12,7 @@
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-<div style="margin: var(--cds-layout-01) 0">
+<div style="margin: var(--bx-layout-01) 0">
   Selected: <strong>{selected}</strong>
 </div>
 
diff --git a/docs/src/pages/framed/Tabs/TabsReactive.svelte b/docs/src/pages/framed/Tabs/TabsReactive.svelte
index c6e5070a..93747f3c 100644
--- a/docs/src/pages/framed/Tabs/TabsReactive.svelte
+++ b/docs/src/pages/framed/Tabs/TabsReactive.svelte
@@ -15,7 +15,7 @@
   </svelte:fragment>
 </Tabs>
 
-<div style="margin: var(--cds-layout-01) 0">
+<div style="margin: var(--bx-layout-01) 0">
   <Button on:click="{() => (selected = 1)}">Set index to 1</Button>
 </div>
 
diff --git a/docs/src/pages/framed/Toggle/ToggleReactive.svelte b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
index 4b88ef14..6fbd232b 100644
--- a/docs/src/pages/framed/Toggle/ToggleReactive.svelte
+++ b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
@@ -17,6 +17,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
index 70fa73e3..b14e9911 100644
--- a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
+++ b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
@@ -8,7 +8,7 @@
   <p>Resources are provisioned based on your account's organization.</p>
 </Tooltip>
 
-<div style="margin-top: var(--cds-spacing-12);">
+<div style="margin-top: var(--bx-spacing-12);">
   <Button size="small" on:click="{() => (open = !open)}">
     {open ? "Close tooltip" : "Open tooltip"}
   </Button>
@@ -18,6 +18,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeView.svelte b/docs/src/pages/framed/TreeView/TreeView.svelte
index 4489cb9c..7d84d9d5 100644
--- a/docs/src/pages/framed/TreeView/TreeView.svelte
+++ b/docs/src/pages/framed/TreeView/TreeView.svelte
@@ -60,6 +60,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewActive.svelte b/docs/src/pages/framed/TreeView/TreeViewActive.svelte
index fafeb48c..8f82f549 100644
--- a/docs/src/pages/framed/TreeView/TreeViewActive.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewActive.svelte
@@ -60,6 +60,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte b/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
index abbd09e0..af01ce17 100644
--- a/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
@@ -58,6 +58,6 @@
 
 <style>
   div {
-    margin-bottom: var(--cds-spacing-05);
+    margin-bottom: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte b/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
index 69bda008..0837ddcd 100644
--- a/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
@@ -66,6 +66,6 @@
 
 <style>
   div {
-    margin-bottom: var(--cds-spacing-05);
+    margin-bottom: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewCompact.svelte b/docs/src/pages/framed/TreeView/TreeViewCompact.svelte
index 0a9bf2b9..126c1871 100644
--- a/docs/src/pages/framed/TreeView/TreeViewCompact.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewCompact.svelte
@@ -61,6 +61,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte b/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
index ea10f4ac..36022432 100644
--- a/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
@@ -56,6 +56,6 @@
 
 <style>
   div {
-    margin-bottom: var(--cds-spacing-05);
+    margin-bottom: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte b/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
index 0c1efeb3..49544dbf 100644
--- a/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
@@ -62,6 +62,6 @@
 
 <style>
   div {
-    margin-bottom: var(--cds-spacing-05);
+    margin-bottom: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte b/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
index 90743621..6155f830 100644
--- a/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
@@ -63,6 +63,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
index 5c534e0e..c96fab12 100644
--- a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
@@ -89,6 +89,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte b/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
index 6ea62569..7e3d9f5b 100644
--- a/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
@@ -60,6 +60,6 @@
 
 <style>
   div {
-    margin-top: var(--cds-spacing-05);
+    margin-top: var(--bx-spacing-05);
   }
 </style>
diff --git a/docs/src/pages/framed/UIShell/HeaderSearch.svelte b/docs/src/pages/framed/UIShell/HeaderSearch.svelte
index 221dc304..eed6dc11 100644
--- a/docs/src/pages/framed/UIShell/HeaderSearch.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderSearch.svelte
@@ -116,7 +116,7 @@
         </p>
         <div style="overflow-x: scroll;">
           {#each events as { type, ...rest }}
-            <div style="display: block; margin-bottom: var(--cds-layout-01)">
+            <div style="display: block; margin-bottom: var(--bx-layout-01)">
               <div><strong>on:{type}</strong></div>
               {#if Object.keys(rest).length > 0}
                 <pre>{JSON.stringify(rest, null, 2)}</pre>
diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
index e261ca45..ed28c88f 100644
--- a/docs/src/pages/framed/_reset.svelte
+++ b/docs/src/pages/framed/_reset.svelte
@@ -28,11 +28,11 @@
   :global(body.framed) {
     min-height: 100vh;
     width: 100%;
-    padding: var(--cds-spacing-06) var(--cds-spacing-05);
+    padding: var(--bx-spacing-06) var(--bx-spacing-05);
   }
 
   :global(.framed :not(.bx--content) [class^="bx--col"]) {
-    outline: 1px solid var(--cds-interactive-04);
+    outline: 1px solid var(--bx-interactive-04);
   }
 
   :global(.framed .bx--content [class^="bx--col"]) {
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index ffecc04d..d0a630fd 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -92,12 +92,12 @@
         </p>
       </Column>
     </Row>
-    <Row style="margin-bottom: var(--cds-layout-02)">
+    <Row style="margin-bottom: var(--bx-layout-02)">
       <Column max="{10}" xlg="{10}">
         <h2 style="margin-top: var(--cds-layout-02)">Installation</h2>
       </Column>
     </Row>
-    <Row style="margin-bottom: var(--cds-layout-02)">
+    <Row style="margin-bottom: var(--bx-layout-02)">
       <Column noGutter>
         <Tabs>
           <Tab label="Yarn" />
@@ -117,7 +117,7 @@
         </Tabs>
       </Column>
     </Row>
-    <Row style="margin-bottom: var(--cds-layout-04)">
+    <Row style="margin-bottom: var(--bx-layout-04)">
       <Column>
         <h2>Styling</h2>
         <p>
@@ -126,7 +126,7 @@
           light, 3 dark).
         </p>
         <RadioButtonGroup
-          style="margin-top: var(--cds-spacing-08)"
+          style="margin-top: var(--bx-spacing-08)"
           legendText="Carbon themes"
           bind:selected="{$theme}"
         >
@@ -216,7 +216,7 @@
       </Column>
     </Row>
 
-    <Row style="margin-bottom: var(--cds-layout-02)">
+    <Row style="margin-bottom: var(--bx-layout-02)">
       <Column>
         <h2>Dynamic theming</h2>
         <p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
@@ -248,7 +248,7 @@
       </Column>
     </Row>
 
-    <Row style="margin-bottom: var(--cds-layout-02)">
+    <Row style="margin-bottom: var(--bx-layout-02)">
       <Column>
         <h2>Portfolio</h2>
         <p>
@@ -314,6 +314,6 @@
 
 <style>
   p {
-    margin-bottom: var(--cds-spacing-05);
+    margin-bottom: var(--bx-spacing-05);
   }
 </style>
diff --git a/src/Theme/Theme.svelte b/src/Theme/Theme.svelte
index ee26f45d..38a3c969 100644
--- a/src/Theme/Theme.svelte
+++ b/src/Theme/Theme.svelte
@@ -79,7 +79,7 @@
 
   $: if (typeof window !== "undefined") {
     Object.entries(tokens).forEach(([token, value]) => {
-      document.documentElement.style.setProperty(`--cds-${token}`, value);
+      document.documentElement.style.setProperty(`--bx-${token}`, value);
     });
 
     if (theme in themes) {
diff --git a/tests/AspectRatioColumns.test.svelte b/tests/AspectRatioColumns.test.svelte
index b96aa28f..411cd676 100644
--- a/tests/AspectRatioColumns.test.svelte
+++ b/tests/AspectRatioColumns.test.svelte
@@ -6,13 +6,13 @@
   <Row>
     <Column
       aspectRatio="2x1"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       2x1
     </Column>
     <Column
       aspectRatio="2x1"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       2x1
     </Column>
diff --git a/tests/CondensedGrid.test.svelte b/tests/CondensedGrid.test.svelte
index b32e56fa..cdf94631 100644
--- a/tests/CondensedGrid.test.svelte
+++ b/tests/CondensedGrid.test.svelte
@@ -4,9 +4,9 @@
 
 <Grid condensed>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
   </Row>
 </Grid>
diff --git a/tests/FullWidthGrid.test.svelte b/tests/FullWidthGrid.test.svelte
index cfa70ce2..5be49b47 100644
--- a/tests/FullWidthGrid.test.svelte
+++ b/tests/FullWidthGrid.test.svelte
@@ -4,9 +4,9 @@
 
 <Grid fullWidth>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
   </Row>
 </Grid>
diff --git a/tests/Grid.test.svelte b/tests/Grid.test.svelte
index 7ffec15f..3632247d 100644
--- a/tests/Grid.test.svelte
+++ b/tests/Grid.test.svelte
@@ -4,9 +4,9 @@
 
 <Grid>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
   </Row>
 </Grid>
diff --git a/tests/NarrowGrid.test.svelte b/tests/NarrowGrid.test.svelte
index a39cd612..8a103fb9 100644
--- a/tests/NarrowGrid.test.svelte
+++ b/tests/NarrowGrid.test.svelte
@@ -4,9 +4,9 @@
 
 <Grid narrow>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
   </Row>
 </Grid>
diff --git a/tests/OffsetColumns.test.svelte b/tests/OffsetColumns.test.svelte
index 085ec706..f15fe9a6 100644
--- a/tests/OffsetColumns.test.svelte
+++ b/tests/OffsetColumns.test.svelte
@@ -6,25 +6,25 @@
   <Row>
     <Column
       sm="{{ span: 1, offset: 3 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       Offset 3
     </Column>
     <Column
       sm="{{ span: 2, offset: 2 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       Offset 2
     </Column>
     <Column
       sm="{{ span: 3, offset: 1 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       Offset 1
     </Column>
     <Column
       sm="{{ span: 4, offset: 0 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       Offset 0
     </Column>
diff --git a/tests/PaddedGrid.test.svelte b/tests/PaddedGrid.test.svelte
index 5b7a7c74..ece49cfc 100644
--- a/tests/PaddedGrid.test.svelte
+++ b/tests/PaddedGrid.test.svelte
@@ -4,16 +4,16 @@
 
 <Grid padding>
   <Row padding>
-    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+    <Column padding style="outline: 1px solid var(--bx-interactive-04)">
       Column
     </Column>
-    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+    <Column padding style="outline: 1px solid var(--bx-interactive-04)">
       Column
     </Column>
-    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+    <Column padding style="outline: 1px solid var(--bx-interactive-04)">
       Column
     </Column>
-    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+    <Column padding style="outline: 1px solid var(--bx-interactive-04)">
       Column
     </Column>
   </Row>
diff --git a/tests/Popover.test.svelte b/tests/Popover.test.svelte
index ea2c42d2..d56ec71c 100644
--- a/tests/Popover.test.svelte
+++ b/tests/Popover.test.svelte
@@ -16,5 +16,5 @@
     console.log('on:click:outside');
   }}"
 >
-  <div style="padding: var(--cds-spacing-05)">Content</div>
+  <div style="padding: var(--bx-spacing-05)">Content</div>
 </Popover>
diff --git a/tests/ResponsiveGrid.test.svelte b/tests/ResponsiveGrid.test.svelte
index b0b3c5b9..0c163432 100644
--- a/tests/ResponsiveGrid.test.svelte
+++ b/tests/ResponsiveGrid.test.svelte
@@ -8,7 +8,7 @@
       sm="{1}"
       md="{4}"
       lg="{8}"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       sm: 1, md: 4, lg: 8
     </Column>
@@ -16,7 +16,7 @@
       sm="{1}"
       md="{2}"
       lg="{2}"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       sm: 1, md: 2, lg: 2
     </Column>
@@ -24,7 +24,7 @@
       sm="{1}"
       md="{1}"
       lg="{1}"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       sm: 1, md: 1, lg: 1
     </Column>
@@ -32,7 +32,7 @@
       sm="{1}"
       md="{1}"
       lg="{1}"
-      style="outline: 1px solid var(--cds-interactive-04)"
+      style="outline: 1px solid var(--bx-interactive-04)"
     >
       sm: 1, md: 1, lg: 1
     </Column>