diff --git a/.storybook/components/ColorList/ColorList.module.css b/.storybook/components/ColorList/ColorList.module.css
index 46345c995..2a494e00e 100644
--- a/.storybook/components/ColorList/ColorList.module.css
+++ b/.storybook/components/ColorList/ColorList.module.css
@@ -1,7 +1,7 @@
 .color-list__label {
   width: fit-content;
-  padding: var(--eds-size-half);
-  border-radius: var(--eds-theme-box-button-border-radius);
+  padding: calc(var(--eds-size-half) / 16 * 1rem);
+  border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
 
   font: var(--eds-theme-typography-label-md-subtle);
   color: rgb(235, 87, 87);
@@ -13,9 +13,9 @@
   width: 100%;
   height: 5rem;
   border: var(--eds-theme-color-border-neutral-subtle) solid
-    var(--eds-border-width-sm);
+    calc(var(--eds-border-width-sm) * 1px);
   outline: var(--eds-theme-color-border-neutral-strong) solid
-    var(--eds-border-width-sm);
+    calc(var(--eds-border-width-sm) * 1px);
 }
 
 .color-list__input::-webkit-color-swatch {
diff --git a/.storybook/components/DesignTokens/Tier1/Animation.jsx b/.storybook/components/DesignTokens/Tier1/Animation.jsx
index 849c935de..c84450e75 100755
--- a/.storybook/components/DesignTokens/Tier1/Animation.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Animation.jsx
@@ -15,10 +15,10 @@ export class Tier1Animation extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      transitionDuration: `var(${listItem.name})`,
+                      transitionDuration: `calc(var(${listItem.name}) * 1s)`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 's'}
                     variant="animation-fade"
                   />
                 </Grid.Item>
@@ -34,10 +34,10 @@ export class Tier1Animation extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      transitionDuration: `var(${listItem.name})`,
+                      transitionDuration: `calc(var(${listItem.name}) * 1s)`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 's'}
                     variant="animation-move"
                   />
                 </Grid.Item>
@@ -53,7 +53,7 @@ export class Tier1Animation extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      transitionTimingFunction: `var(${listItem.name})`,
+                      transitionTimingFunction: `calc(var(${listItem.name}) * 1s)`,
                     }}
                     name={listItem.name}
                     value={listItem.value}
diff --git a/.storybook/components/DesignTokens/Tier1/Borders.jsx b/.storybook/components/DesignTokens/Tier1/Borders.jsx
index 0de5059e9..a3f17f8cc 100755
--- a/.storybook/components/DesignTokens/Tier1/Borders.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Borders.jsx
@@ -16,12 +16,12 @@ export class Tier1Borders extends Component {
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: 'transparent',
-                      borderWidth: `var(${listItem.name})`,
+                      borderWidth: `calc(var(${listItem.name}) * 1px)`,
                       borderStyle: 'solid',
                       borderColor: 'black',
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 'px'}
                   />
                 </Grid.Item>
               );
@@ -32,6 +32,7 @@ export class Tier1Borders extends Component {
         <Section title="Border Radius">
           <Grid>
             {filterTokens(`eds-border-radius`).map(function (listItem) {
+              const unit = listItem.name.indexOf('round') > 0 ? '%' : 'px';
               return (
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
@@ -40,10 +41,10 @@ export class Tier1Borders extends Component {
                       borderWidth: '2px',
                       borderStyle: 'solid',
                       borderColor: 'black',
-                      borderRadius: `var(${listItem.name})`,
+                      borderRadius: `calc(var(${listItem.name}) * 1${unit})`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + unit}
                   />
                 </Grid.Item>
               );
diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx
index f93e9b36a..f9aeb8377 100755
--- a/.storybook/components/DesignTokens/Tier1/Layout.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Layout.jsx
@@ -15,10 +15,12 @@ export class Tier1Layout extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      maxWidth: `var(${listItem.name})`,
+                      maxWidth: `calc(var(${listItem.name}) / 16 * 1rem)`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={
+                      listItem.value + 'px' + ` (${listItem.value / 16} rem)`
+                    }
                   />
                 </Grid.Item>
               );
diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
index 46d0e4b0c..00779da65 100755
--- a/.storybook/components/DesignTokens/Tier1/Sizes.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
@@ -15,12 +15,12 @@ export class Tier1Sizes extends Component {
                 <TokenSpecimen
                   comment="Calculated from a multiple of the base font size"
                   inlineStyles={{
-                    width: `var(${listItem.name})`,
-                    height: `var(${listItem.name})`,
+                    width: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                    height: `calc(var(${listItem.name}) /16 * 1rem)`,
                     minHeight: '0',
                   }}
                   name={listItem.name}
-                  value={listItem.value}
+                  value={listItem.value + 'px' + ` (${listItem.value / 16}rem)`}
                 />
               </Grid.Item>
             ))}
@@ -35,12 +35,14 @@ export class Tier1Sizes extends Component {
                   <Grid.Item key={listItem.name}>
                     <TokenSpecimen
                       inlineStyles={{
-                        width: `var(${listItem.name})`,
-                        height: `var(${listItem.name})`,
+                        width: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                        height: `calc(var(${listItem.name}) / 16 * 1rem)`,
                         minHeight: '0',
                       }}
                       name={listItem.name}
-                      value={listItem.value}
+                      value={
+                        listItem.value + 'px' + ` (${listItem.value / 16}rem)`
+                      }
                     />
                   </Grid.Item>
                 );
diff --git a/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx b/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx
index 6003c6099..4d888b0e4 100755
--- a/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx
@@ -26,12 +26,12 @@ export const Borders: StoryObj = {
                 <TokenSpecimen
                   inlineStyles={{
                     backgroundColor: 'transparent',
-                    borderWidth: `var(${listItem.name})`,
+                    borderWidth: `calc(var(${listItem.name}) * 1px)`,
                     borderStyle: 'solid',
                     borderColor: 'black',
                   }}
                   name={listItem.name}
-                  value={listItem.value}
+                  value={listItem.value + 'px'}
                 />
               </Grid.Item>
             );
diff --git a/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx b/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx
index 8b9f995a4..ab6467bc8 100755
--- a/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx
@@ -24,12 +24,12 @@ export const Forms: StoryObj = {
             <TokenSpecimen
               inlineStyles={{
                 backgroundColor: 'transparent',
-                borderWidth: `var(${listItem.name})`,
+                borderWidth: `calc(var(${listItem.name}) * 1px)`,
                 borderStyle: 'solid',
                 borderColor: 'black',
               }}
               name={listItem.name}
-              value={listItem.value}
+              value={listItem.value + 'px'}
             />
           </Grid.Item>
         ))}
@@ -42,10 +42,10 @@ export const Forms: StoryObj = {
                 borderWidth: '1px',
                 borderStyle: 'solid',
                 borderColor: 'black',
-                borderRadius: `var(${listItem.name})`,
+                borderRadius: `calc(var(${listItem.name}) * 1px)`,
               }}
               name={listItem.name}
-              value={listItem.value}
+              value={listItem.value + 'px'}
             />
           </Grid.Item>
         ))}
diff --git a/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx b/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx
index 672017d7b..e73887043 100644
--- a/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx
@@ -25,12 +25,16 @@ export const Sizes: StoryObj = {
               <Grid.Item key={listItem.name}>
                 <TokenSpecimen
                   inlineStyles={{
-                    width: `var(${listItem.name})`,
-                    height: `var(${listItem.name})`,
+                    width: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                    height: `calc(var(${listItem.name}) / 16 * 1rem)`,
                     minHeight: '0',
                   }}
                   name={listItem.name}
-                  value={listItem.value}
+                  value={
+                    listItem.value +
+                    'px' +
+                    ` (${Number(listItem.value) / 16} rem)`
+                  }
                 />
               </Grid.Item>
             );
diff --git a/.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx b/.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx
index 8948ea0db..91e4918a3 100644
--- a/.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx
+++ b/.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx
@@ -187,7 +187,7 @@ Examples:
 
 ```css
 .dropdown-button__icon {
-  transition: transform var(--eds-anim-move-medium) var(--eds-anim-ease);
+  transition: transform calc(var(--eds-anim-move-medium) * 1s) var(--eds-anim-ease);
 
   @media (prefers-reduced-motion) {
     transition: none;
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
index ece3251b1..26173943a 100644
--- a/.storybook/data/tokens.json
+++ b/.storybook/data/tokens.json
@@ -148,21 +148,21 @@
   "eds-theme-typography-tab-sm": "var(--eds-typography-preset-008-light)",
   "eds-theme-typography-tab-sm-active": "var(--eds-typography-preset-009)",
   "eds-theme-typography-tag": "var(--eds-typography-preset-009)",
-  "eds-theme-border-radius-actions": "9999px",
-  "eds-theme-border-radius-surfaces-lg": "0px",
+  "eds-theme-border-radius-actions": "9999",
+  "eds-theme-border-radius-surfaces-lg": "0",
   "eds-theme-border-radius-surfaces-md": "6",
   "eds-theme-border-radius-objects-md": "4",
   "eds-theme-border-radius-objects-sm": "2",
-  "eds-theme-border-radius-objects-xs": "0px",
-  "eds-theme-border-radius-tab-underline": "50%",
-  "eds-theme-border-width": "1px",
-  "eds-theme-box-button-border-radius": "4px",
-  "eds-theme-box-focus-ring-outline-width": "1px",
-  "eds-theme-box-focus-ring-outline-offset": "2px",
-  "eds-theme-form-border-width": "1px",
-  "eds-theme-form-border-radius": "4px",
-  "eds-theme-size-slider-track-height": "0.5rem",
-  "eds-theme-size-slider-thumb": "1.5rem",
+  "eds-theme-border-radius-objects-xs": "0",
+  "eds-theme-border-radius-tab-underline": "50",
+  "eds-theme-border-width": "1",
+  "eds-theme-box-button-border-radius": "4",
+  "eds-theme-box-focus-ring-outline-width": "1",
+  "eds-theme-box-focus-ring-outline-offset": "2",
+  "eds-theme-form-border-width": "1",
+  "eds-theme-form-border-radius": "4",
+  "eds-theme-size-slider-track-height": "8",
+  "eds-theme-size-slider-thumb": "24",
   "eds-theme-color-body-background": "#F4F6F8",
   "eds-theme-color-body-background-inverted": "#383C43",
   "eds-theme-color-background-input": "rgb(var(--eds-color-white) / 1)",
@@ -546,27 +546,27 @@
   "eds-theme-color-transparent-black-0": "rgba(0, 0, 0, 0)",
   "eds-theme-color-transparent-black-30": "rgba(0, 0, 0, .3)",
   "eds-theme-color-transparent-white-0": "rgba(255, 255, 255, 0)",
-  "eds-anim-fade-quick": "0.15s",
-  "eds-anim-fade-long": "0.4s",
-  "eds-anim-move-quick": "0.15s",
-  "eds-anim-move-medium": "0.3s",
-  "eds-anim-move-long": "0.4s",
+  "eds-anim-fade-quick": "0.15",
+  "eds-anim-fade-long": "0.4",
+  "eds-anim-move-quick": "0.15",
+  "eds-anim-move-medium": "0.3",
+  "eds-anim-move-long": "0.4",
   "eds-anim-ease": "ease",
-  "eds-border-width-sm": "1px",
-  "eds-border-width-md": "2px",
-  "eds-border-width-lg": "4px",
-  "eds-border-width-xl": "8px",
+  "eds-border-width-sm": "1",
+  "eds-border-width-md": "2",
+  "eds-border-width-lg": "4",
+  "eds-border-width-xl": "8",
   "eds-border-radius-50": "2",
   "eds-border-radius-100": "4",
   "eds-border-radius-150": "6",
   "eds-border-radius-200": "8",
   "eds-border-radius-500": "20",
-  "eds-border-radius-none": "0px",
-  "eds-border-radius-md": "4px",
-  "eds-border-radius-lg": "8px",
-  "eds-border-radius-xl": "20px",
-  "eds-border-radius-round": "50%",
-  "eds-border-radius-full": "9999px",
+  "eds-border-radius-none": "0",
+  "eds-border-radius-md": "4",
+  "eds-border-radius-lg": "8",
+  "eds-border-radius-xl": "20",
+  "eds-border-radius-round": "50",
+  "eds-border-radius-full": "9999",
   "eds-color-white": "255 255 255",
   "eds-color-black": "0 0 0",
   "eds-color-brand-grape-100": "#F0F0FC",
@@ -728,34 +728,34 @@
   "eds-color-other-ruby-600": "#D41E52",
   "eds-color-other-ruby-700": "#BD0044",
   "eds-color-other-ruby-800": "#8F0134",
-  "eds-l-max-width": "71.25rem",
-  "eds-l-sidebar-width": "13.5rem",
-  "eds-l-linelength-width": "36rem",
-  "eds-outline-width-sm": "1px",
-  "eds-outline-width-md": "2px",
-  "eds-outline-width-lg": "4px",
+  "eds-l-max-width": "1140",
+  "eds-l-sidebar-width": "216",
+  "eds-l-linelength-width": "576",
+  "eds-outline-width-sm": "1",
+  "eds-outline-width-md": "2",
+  "eds-outline-width-lg": "4",
   "eds-box-shadow-sm": "0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05)",
   "eds-box-shadow-md": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)",
   "eds-box-shadow-lg": "0px 4px 12px rgba(0, 0, 0, 0.16)",
   "eds-box-shadow-xl": "0px 6px 20px rgba(0, 0, 0, 0.2)",
-  "eds-size-1": "0.5rem",
-  "eds-size-2": "1rem",
-  "eds-size-3": "1.5rem",
-  "eds-size-4": "2rem",
-  "eds-size-5": "2.5rem",
-  "eds-size-6": "3rem",
-  "eds-size-7": "3.5rem",
-  "eds-size-8": "4rem",
-  "eds-size-9": "4.5rem",
-  "eds-size-10": "5rem",
-  "eds-size-11": "5.5rem",
-  "eds-size-12": "6rem",
-  "eds-size-20": "10rem",
-  "eds-size-base-unit": "0.5rem",
-  "eds-size-half": "0.25rem",
-  "eds-size-quarter": "0.125rem",
-  "eds-size-1-and-half": "0.75rem",
-  "eds-size-2-and-half": "1.275rem",
+  "eds-size-1": "8",
+  "eds-size-2": "16",
+  "eds-size-3": "24",
+  "eds-size-4": "32",
+  "eds-size-5": "40",
+  "eds-size-6": "48",
+  "eds-size-7": "56",
+  "eds-size-8": "64",
+  "eds-size-9": "72",
+  "eds-size-10": "80",
+  "eds-size-11": "88",
+  "eds-size-12": "96",
+  "eds-size-20": "320",
+  "eds-size-base-unit": "8",
+  "eds-size-half": "4",
+  "eds-size-quarter": "2",
+  "eds-size-1-and-half": "12",
+  "eds-size-2-and-half": "20",
   "eds-z-index-0": "0",
   "eds-z-index-100": "100",
   "eds-z-index-200": "200",
diff --git a/.storybook/pages/WireframeDemo/WireframeDemo.module.css b/.storybook/pages/WireframeDemo/WireframeDemo.module.css
index 9bc360ac7..dac4cf200 100644
--- a/.storybook/pages/WireframeDemo/WireframeDemo.module.css
+++ b/.storybook/pages/WireframeDemo/WireframeDemo.module.css
@@ -25,7 +25,7 @@
 .logged-out-page {
   background-color: var(--eds-theme-color-background-brand-primary-default);
   min-height: 100vh;
-  padding: var(--eds-size-4);
+  padding: calc(var(--eds-size-4) / 16 * 1rem);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -41,8 +41,8 @@
 }
 
 .logged-out-page__button-group {
-  gap: var(--eds-size-2);
-  margin: var(--eds-size-2) 0 var(--eds-size-4) 0;
+  gap: calc(var(--eds-size-2) / 16 * 1rem);
+  margin: calc(var(--eds-size-2) / 16 * 1rem) 0 calc(var(--eds-size-4) / 16 * 1rem) 0;
 }
 
 /**
@@ -77,7 +77,7 @@
 .watch-page__avatar {
   background-color: var(--eds-theme-color-background-brand-primary-strong);
   color: var(--eds-theme-color-text-neutral-default-inverse);
-  border-radius: var(--eds-border-radius-full);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/components/Accordion/Accordion-v2.module.css b/src/components/Accordion/Accordion-v2.module.css
index 9adc13213..6cc729e4a 100644
--- a/src/components/Accordion/Accordion-v2.module.css
+++ b/src/components/Accordion/Accordion-v2.module.css
@@ -76,7 +76,7 @@
  * Animates the icon rotation when opening and closing.
  */
  .accordion-button > .accordion-button__trailing-icon {
-  transition: transform var(--eds-anim-move-medium) var(--eds-anim-ease);
+  transition: transform calc(var(--eds-anim-move-medium) * 1s) var(--eds-anim-ease);
 
   @media screen and (prefers-reduced-motion) {
     transition: none;
@@ -124,6 +124,6 @@
  * Accordion Row houses one Accordion Button subcomponent and its relevant Accordion Panel subcomponent.
  */
 .accordion-row {
-  border-bottom: var(--eds-border-width-sm) solid
+  border-bottom: calc(var(--eds-border-width-sm) * 1px) solid
     var(--eds-theme-color-border-utility-default-low-emphasis);
 }
diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css
index 87b4947ce..a4a532e2e 100644
--- a/src/components/Accordion/Accordion.module.css
+++ b/src/components/Accordion/Accordion.module.css
@@ -11,8 +11,8 @@
  */
 .accordion--outline {
   border: var(--eds-theme-color-border-neutral-subtle) solid
-    var(--eds-border-width-sm);
-  border-radius: var(--eds-border-radius-md);
+    calc(var(--eds-border-width-sm) * 1px);
+  border-radius: calc(var(--eds-border-radius-md) * 1px);
 }
 
 /**
@@ -25,7 +25,7 @@
   border: 0;
   border-radius: 0;
 
-  padding: var(--eds-size-1-and-half) var(--eds-size-1);
+  padding: calc(var(--eds-size-1-and-half) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
   height: unset;
   min-height: 3.375rem;
 
@@ -40,7 +40,7 @@
  * Small variant.
  */
 .accordion-button--sm {
-  padding: var(--eds-size-half) var(--eds-size-1);
+  padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
   min-height: 2.25rem;
 }
 
@@ -48,14 +48,14 @@
  * Outline variant.
  */
 .accordion-button--outline {
-  padding: var(--eds-size-1-and-half) var(--eds-size-3);
+  padding: calc(var(--eds-size-1-and-half) / 16 * 1rem) calc(var(--eds-size-3) / 16 * 1rem);
 }
 
 /**
  * Small outline variant.
  */
 .accordion-button--sm.accordion-button--outline {
-  padding: var(--eds-size-half) var(--eds-size-2);
+  padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-2) / 16 * 1rem);
 }
 
 /**
@@ -93,7 +93,7 @@
  * Animates the icon rotation when opening and closing.
  */
 .accordion-button > .accordion-button__icon {
-  transition: transform var(--eds-anim-move-medium) var(--eds-anim-ease);
+  transition: transform calc(var(--eds-anim-move-medium) * 1s) var(--eds-anim-ease);
 
   @media screen and (prefers-reduced-motion) {
     transition: none;
@@ -105,8 +105,8 @@
  * Reveals itself below the associated Accordion Button.
  */
 .accordion-panel {
-  padding-left: var(--eds-size-1);
-  padding-right: var(--eds-size-3);
+  padding-left: calc(var(--eds-size-1) / 16 * 1rem);
+  padding-right: calc(var(--eds-size-3) / 16 * 1rem);
   padding-bottom: 1.625rem;
 
   font: var(--eds-theme-typography-body-sm);
@@ -128,23 +128,23 @@
  * Outline variant.
  */
 .accordion-panel--outline {
-  padding-left: var(--eds-size-3);
-  padding-right: var(--eds-size-5);
+  padding-left: calc(var(--eds-size-3) / 16 * 1rem);
+  padding-right: calc(var(--eds-size-5) / 16 * 1rem);
 }
 
 /**
  * Small outline variant.
  */
 .accordion-panel--sm.accordion-panel--outline {
-  padding-left: var(--eds-size-2);
-  padding-right: var(--eds-size-4);
+  padding-left: calc(var(--eds-size-2) / 16 * 1rem);
+  padding-right: calc(var(--eds-size-4) / 16 * 1rem);
 }
 
 /**
  * Accordion Row houses one Accordion Button subcomponent and its relevant Accordion Panel subcomponent.
  */
 .accordion-row {
-  border-bottom: var(--eds-border-width-sm) solid
+  border-bottom: calc(var(--eds-border-width-sm) * 1px) solid
     var(--eds-theme-color-border-neutral-subtle);
 }
 
diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css
index 318456891..29610b706 100644
--- a/src/components/Avatar/Avatar.module.css
+++ b/src/components/Avatar/Avatar.module.css
@@ -33,58 +33,58 @@
 .avatar--xs {
   font: var(--eds-theme-typography-tag);
 
-  height: var(--eds-size-3);
-  width: var(--eds-size-3);
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+  width: calc(var(--eds-size-3) / 16 * 1rem);
 }
 
 .avatar--sm {
   font: var(--eds-theme-typography-title-sm-bold);
 
-  height: var(--eds-size-4);
-  width: var(--eds-size-4);
+  height: calc(var(--eds-size-4) / 16 * 1rem);
+  width: calc(var(--eds-size-4) / 16 * 1rem);
 }
 
 .avatar--md {
   font: var(--eds-theme-typography-title-md-bold);
 
-  height: var(--eds-size-5);
-  width: var(--eds-size-5);
+  height: calc(var(--eds-size-5) / 16 * 1rem);
+  width: calc(var(--eds-size-5) / 16 * 1rem);
 }
 
 .avatar--lg {
   font: var(--eds-theme-typography-title-md-bold);
 
-  height: var(--eds-size-6);
-  width: var(--eds-size-6);
+  height: calc(var(--eds-size-6) / 16 * 1rem);
+  width: calc(var(--eds-size-6) / 16 * 1rem);
 }
 
 .avatar--xl {
   font: var(--eds-theme-typography-headline-md-bold);
 
-  height: var(--eds-size-8);
-  width: var(--eds-size-8);
+  height: calc(var(--eds-size-8) / 16 * 1rem);
+  width: calc(var(--eds-size-8) / 16 * 1rem);
 }
 
 .avatar--xxl {
   font: var(--eds-theme-typography-headline-lg-bold);
 
-  height: var(--eds-size-12);
-  width: var(--eds-size-12);
+  height: calc(var(--eds-size-12) / 16 * 1rem);
+  width: calc(var(--eds-size-12) / 16 * 1rem);
 }
 
 .avatar--xxxl {
   font: var(--eds-theme-typography-headline-lg-bold);
 
-  height: calc(var(--eds-size-base-unit) * 20);
-  width: calc(var(--eds-size-base-unit) * 20);
+  height: calc(calc(var(--eds-size-base-unit) / 16 * 1rem) * 20);
+  width: calc(calc(var(--eds-size-base-unit) / 16 * 1rem) * 20);
 }
 
 .avatar--circle {
-  border-radius: var(--eds-border-radius-full);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 }
 
 .avatar--square {
-  border-radius: var(--eds-border-radius-none);
+  border-radius: calc(var(--eds-border-radius-none) * 1px);
 }
 
 .avatar__image {
diff --git a/src/components/Badge/Badge.module.css b/src/components/Badge/Badge.module.css
index 6a361fabf..b399ffeff 100644
--- a/src/components/Badge/Badge.module.css
+++ b/src/components/Badge/Badge.module.css
@@ -20,7 +20,7 @@
    * Custom property allows for easy change of downstream size handling.
    * Kind of a source of truth for badge size related properties.
    */
-  --badge-height: calc(var(--eds-size-2-and-half) + 2 * var(--eds-border-width-sm));
+  --badge-height: calc(calc(var(--eds-size-2-and-half) / 16 * 1rem) + 2 * calc(var(--eds-border-width-sm) * 1px));
 
   z-index: 100;
 
@@ -36,11 +36,11 @@
   min-width: var(--badge-height);
 
   border: var(--eds-theme-color-text-neutral-default-inverse) solid
-    var(--eds-border-width-sm);
-  border-radius: var(--eds-border-radius-full);
+    calc(var(--eds-border-width-sm) * 1px);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 
-  padding-left: var(--eds-size-half);
-  padding-right: var(--eds-size-half);
+  padding-left: calc(var(--eds-size-half) / 16 * 1rem);
+  padding-right: calc(var(--eds-size-half) / 16 * 1rem);
 
   background-color: var(--eds-theme-color-background-brand-primary-strong);
   color: var(--eds-theme-color-text-neutral-default-inverse);
@@ -52,6 +52,6 @@
  * Empty badge variant for visual indication purposes.
  */
 .badge--empty {
-  --badge-height: var(--eds-size-2);
+  --badge-height: calc(var(--eds-size-2) / 16 * 1rem);
   padding: 0;
 }
diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.css b/src/components/Breadcrumbs/Breadcrumbs.module.css
index 794553694..ceca474c7 100755
--- a/src/components/Breadcrumbs/Breadcrumbs.module.css
+++ b/src/components/Breadcrumbs/Breadcrumbs.module.css
@@ -59,7 +59,7 @@
  */
 .breadcrumbs__item-back {
   display: flex;
-  margin-right: var(--eds-size-1-and-half);
+  margin-right: calc(var(--eds-size-1-and-half) / 16 * 1rem);
   @media all and (min-width: $eds-bp-md) {
     /* Hidden for larger breakpoints. */
     display: none;
@@ -125,8 +125,8 @@
  */
 .breadcrumbs__separator {
   color: var(--eds-theme-color-icon-neutral-subtle);
-  margin-left: var(--eds-size-1);
-  margin-right: var(--eds-size-1);
+  margin-left: calc(var(--eds-size-1) / 16 * 1rem);
+  margin-right: calc(var(--eds-size-1) / 16 * 1rem);
   cursor: default;
 }
 
diff --git a/src/components/Button/Button-v2.module.css b/src/components/Button/Button-v2.module.css
index 2f7d92630..739c36d68 100644
--- a/src/components/Button/Button-v2.module.css
+++ b/src/components/Button/Button-v2.module.css
@@ -6,8 +6,8 @@
 
 .button {
   position: relative;
-  border-radius: var(--eds-border-radius-full);
-  border: var(--eds-border-width-sm) solid;
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
+  border: calc(var(--eds-border-width-sm) * 1px) solid;
   overflow: hidden;
   display: flex;
 }
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index 34a9c3f22..e042881b2 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -14,18 +14,18 @@
  align-items: center;
  /* Adds a gap between children to automatically handle spacing between icons and text. */
  gap: 0.75rem;
- border-width: var(--eds-theme-border-width);
+ border-width: calc(var(--eds-theme-border-width) * 1px);
  border-style: solid;
- border-radius: var(--eds-theme-box-button-border-radius);
+ border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
  cursor: pointer;
  transition-property: color, background-color, border-color;
- transition-duration: var(--eds-anim-fade-quick);
+ transition-duration: calc(var(--eds-anim-fade-quick) * 1s);
  transition-timing-function: var(--eds-anim-ease);
 
  :where(svg) {
    /* Adds default size for icons passed in for consistency. */
    --icon-size-default: 2em;
-   transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+   transition: color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
 
    @media screen and (prefers-reduced-motion) {
      transition: none;
@@ -442,8 +442,8 @@
   * Height is used instead of vertical padding because the icon size we use would
   * cause the height to expand
   */
- height: var(--eds-size-3);
- padding: 0 var(--eds-size-1);
+ height: calc(var(--eds-size-3) / 16 * 1rem);
+ padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -454,8 +454,8 @@
   * Height is used instead of vertical padding because the icon size we use would
   * cause the height to expand
   */
- height: var(--eds-size-4);
- padding: 0 var(--eds-size-1);
+ height: calc(var(--eds-size-4) / 16 * 1rem);
+ padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -466,8 +466,8 @@
   * Height is used instead of vertical padding because the icon size we use would
   * cause the height to expand
   */
- height: var(--eds-size-5);
- padding: 0 var(--eds-size-2);
+ height: calc(var(--eds-size-5) / 16 * 1rem);
+ padding: 0 calc(var(--eds-size-2) / 16 * 1rem);
 }
 
 /**
diff --git a/src/components/ButtonGroup/ButtonGroup.module.css b/src/components/ButtonGroup/ButtonGroup.module.css
index 7f24f2649..fefcc6125 100644
--- a/src/components/ButtonGroup/ButtonGroup.module.css
+++ b/src/components/ButtonGroup/ButtonGroup.module.css
@@ -15,7 +15,7 @@
  * Spacing variants.
  */
 .button-group--spacing-1x {
-  gap: var(--eds-size-1);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 .button-group--spacing-max {
diff --git a/src/components/Card/Card-v2.module.css b/src/components/Card/Card-v2.module.css
index c60d2674e..04c58d29b 100755
--- a/src/components/Card/Card-v2.module.css
+++ b/src/components/Card/Card-v2.module.css
@@ -13,7 +13,7 @@
 
   padding: 1.5rem;
   height: 100%;
-  border: var(--eds-theme-border-width) solid;
+  border: calc(var(--eds-theme-border-width) * 1px) solid;
 
 
   &.card--container-style-low {
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
index 2d27e532c..7f1f3a93a 100755
--- a/src/components/Card/Card.module.css
+++ b/src/components/Card/Card.module.css
@@ -9,10 +9,10 @@
 :where(.card) {
   display: flex;
   flex-direction: column;
-  padding: var(--eds-size-2);
+  padding: calc(var(--eds-size-2) / 16 * 1rem);
   height: 100%;
-  border-radius: var(--eds-border-radius-lg);
-  border-width: var(--eds-theme-border-width);
+  border-radius: calc(var(--eds-border-radius-lg) * 1px);
+  border-width: calc(var(--eds-theme-border-width) * 1px);
   border-style: solid;
   border-color: var(--eds-theme-color-border-neutral-subtle);
   background-color: var(--eds-theme-color-background-neutral-default);
diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
index 0ecb61736..e5e39b7bb 100644
--- a/src/components/Checkbox/Checkbox.module.css
+++ b/src/components/Checkbox/Checkbox.module.css
@@ -2,7 +2,7 @@
 
 .checkbox {
   display: flex;
-  gap: var(--eds-size-1);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 .checkbox__input {
diff --git a/src/components/ClickableStyle/ClickableStyle.module.css b/src/components/ClickableStyle/ClickableStyle.module.css
index e7bdc5271..653f85516 100644
--- a/src/components/ClickableStyle/ClickableStyle.module.css
+++ b/src/components/ClickableStyle/ClickableStyle.module.css
@@ -14,20 +14,20 @@
   align-items: center;
   /* Adds a gap between children to automatically handle spacing between icons and text. */
   gap: 0.75rem;
-  border-width: var(--eds-theme-border-width);
+  border-width: calc(var(--eds-theme-border-width) * 1px);
   border-style: solid;
-  border-radius: var(--eds-theme-box-button-border-radius);
+  border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
   cursor: pointer;
   /* Removes the underline in the case that the rendered element is an <a> tag. */
   text-decoration: none;
   transition-property: color, background-color, border-color;
-  transition-duration: var(--eds-anim-fade-quick);
+  transition-duration: calc(var(--eds-anim-fade-quick) * 1s);
   transition-timing-function: var(--eds-anim-ease);
 
   :where(svg) {
     /* Adds default size for icons passed in for consistency. */
     --icon-size-default: 2em;
-    transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+    transition: color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
 
     @media screen and (prefers-reduced-motion) {
       transition: none;
@@ -493,8 +493,8 @@ button:where(.clickable-style--link) {
    * Height is used instead of vertical padding because the icon size we use would
    * cause the height to expand
    */
-  height: var(--eds-size-3);
-  padding: 0 var(--eds-size-1);
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+  padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -505,8 +505,8 @@ button:where(.clickable-style--link) {
    * Height is used instead of vertical padding because the icon size we use would
    * cause the height to expand
    */
-  height: var(--eds-size-4);
-  padding: 0 var(--eds-size-1);
+  height: calc(var(--eds-size-4) / 16 * 1rem);
+  padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -517,8 +517,8 @@ button:where(.clickable-style--link) {
    * Height is used instead of vertical padding because the icon size we use would
    * cause the height to expand
    */
-  height: var(--eds-size-5);
-  padding: 0 var(--eds-size-2);
+  height: calc(var(--eds-size-5) / 16 * 1rem);
+  padding: 0 calc(var(--eds-size-2) / 16 * 1rem);
 }
 
 /**
diff --git a/src/components/FieldNote/FieldNote.module.css b/src/components/FieldNote/FieldNote.module.css
index 18e56c2ef..9e5ef473e 100755
--- a/src/components/FieldNote/FieldNote.module.css
+++ b/src/components/FieldNote/FieldNote.module.css
@@ -18,7 +18,7 @@
   /* Centers icon with accompanying text */
   position: relative;
   bottom: 1px;
-  margin-right: var(--eds-size-half);
+  margin-right: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
 /**
diff --git a/src/components/Fieldset/Fieldset.module.css b/src/components/Fieldset/Fieldset.module.css
index 86f06fbe9..fcb63d66b 100644
--- a/src/components/Fieldset/Fieldset.module.css
+++ b/src/components/Fieldset/Fieldset.module.css
@@ -10,7 +10,7 @@
 .fieldset {
   @mixin fieldsetStyles;
    /* Overrides default browser styling. */
-  margin: var(--eds-size-2);
+  margin: calc(var(--eds-size-2) / 16 * 1rem);
 }
 
 /*------------------------------------*\
@@ -21,7 +21,7 @@
  * The contents of the fieldset. Spaces them apart.
  */
  .fieldset-items > :not(:last-child) {
-  margin-bottom: var(--eds-size-1-and-half);
+  margin-bottom: calc(var(--eds-size-1-and-half) / 16 * 1rem);
 }
 
 /*------------------------------------*\
@@ -38,7 +38,7 @@
   @mixin legendReset;
   font: var(--eds-theme-typography-form-label);
   /* Adjust margin between legend and option list */
-  margin-bottom: var(--eds-size-2);
+  margin-bottom: calc(var(--eds-size-2) / 16 * 1rem);
 }
 
 /**
diff --git a/src/components/Grid/Grid.module.css b/src/components/Grid/Grid.module.css
index 503c86206..c90aa226e 100755
--- a/src/components/Grid/Grid.module.css
+++ b/src/components/Grid/Grid.module.css
@@ -13,15 +13,15 @@
   margin: 0 -1.5rem;
 
   > * {
-    padding: var(--eds-size-1-and-half);
+    padding: calc(var(--eds-size-1-and-half) / 16 * 1rem);
     width: 100%;
   }
 
   @supports (display: grid) {
     margin: 0;
     display: grid;
-    grid-row-gap: var(--eds-size-3);
-    grid-column-gap: var(--eds-size-3);
+    grid-row-gap: calc(var(--eds-size-3) / 16 * 1rem);
+    grid-column-gap: calc(var(--eds-size-3) / 16 * 1rem);
 
     > * {
       padding: 0;
@@ -31,7 +31,7 @@
 }
 
 .grid--gap-sm {
-  gap: var(--eds-size-1);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -96,7 +96,7 @@
   @media all and (min-width: $eds-bp-md) {
     display: flex;
     flex-wrap: wrap;
-    margin: 0 var(--eds-size-1-and-half);
+    margin: 0 calc(var(--eds-size-1-and-half) / 16 * 1rem);
   }
 
   @supports (display: grid) {
@@ -207,7 +207,7 @@
  */
  .grid__item {
   .grid & {
-    padding: var(--eds-size-1-and-half);
+    padding: calc(var(--eds-size-1-and-half) / 16 * 1rem);
     width: 100%;
 
     @supports (display: grid) {
diff --git a/src/components/HorizontalStepper/HorizontalStepper.module.css b/src/components/HorizontalStepper/HorizontalStepper.module.css
index 814f5ba91..e8766c1cd 100644
--- a/src/components/HorizontalStepper/HorizontalStepper.module.css
+++ b/src/components/HorizontalStepper/HorizontalStepper.module.css
@@ -17,13 +17,13 @@
  * The decorative line between steps.
  */
 .horizontal-stepper__line {
-  border: var(--eds-theme-border-width) solid
+  border: calc(var(--eds-theme-border-width) * 1px) solid
     var(--eds-theme-color-border-neutral-default);
-  margin-left: var(--eds-size-1);
-  margin-right: var(--eds-size-1);
+  margin-left: calc(var(--eds-size-1) / 16 * 1rem);
+  margin-right: calc(var(--eds-size-1) / 16 * 1rem);
   /* Used to grow and shrink lines before wrapping step text. */
   flex-grow: 1;
-  min-width: var(--eds-size-2);
+  min-width: calc(var(--eds-size-2) / 16 * 1rem);
 }
 
 /*------------------------------------*\
@@ -36,7 +36,7 @@
  .horizontal-step {
   display: flex;
   align-items: center;
-  gap: var(--eds-size-1);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
   /**
    * Required to prevent overflowing outside container.
    */
@@ -80,8 +80,8 @@
  * Horizontal Step Incomplete.
  */
 .horizontal-step__incomplete-icon {
-  margin-left: var(--eds-size-1);
-  margin-right: var(--eds-size-1);
+  margin-left: calc(var(--eds-size-1) / 16 * 1rem);
+  margin-right: calc(var(--eds-size-1) / 16 * 1rem);
   fill: var(--eds-theme-color-icon-disabled);
 }
 
diff --git a/src/components/Hr/Hr.module.css b/src/components/Hr/Hr.module.css
index e59790903..68255f375 100755
--- a/src/components/Hr/Hr.module.css
+++ b/src/components/Hr/Hr.module.css
@@ -7,12 +7,12 @@
  * 
  */
 .hr {
-  margin-top: var(--eds-size-4);
-  margin-bottom: var(--eds-size-4);
+  margin-top: calc(var(--eds-size-4) / 16 * 1rem);
+  margin-bottom: calc(var(--eds-size-4) / 16 * 1rem);
   border-top: none;
   border-right: none;
   border-left: none;
-  border-bottom-width: var(--eds-border-width-sm);
+  border-bottom-width: calc(var(--eds-border-width-sm) * 1px);
   border-bottom-style: solid;
   border-bottom-color: var(--eds-theme-color-border-neutral-subtle);
 }
@@ -21,7 +21,7 @@
  * Horizontal rule with a thick border.
  */
 .hr--lg {
-  border-width: var(--eds-border-width-lg);
+  border-width: calc(var(--eds-border-width-lg) * 1px);
 }
 
 /**
diff --git a/src/components/InlineNotification/InlineNotification.module.css b/src/components/InlineNotification/InlineNotification.module.css
index 5a92fc811..ee86302f2 100644
--- a/src/components/InlineNotification/InlineNotification.module.css
+++ b/src/components/InlineNotification/InlineNotification.module.css
@@ -9,8 +9,8 @@
  */
 .inline-notification {
   display: inline-flex;
-  padding: var(--eds-size-quarter) var(--eds-size-half);
-  border-radius: var(--eds-border-radius-md);
+  padding: calc(var(--eds-size-quarter) / 16 * 1rem) calc(var(--eds-size-half) / 16 * 1rem);
+  border-radius: calc(var(--eds-border-radius-md) * 1px);
 }
 
 /**
@@ -26,7 +26,7 @@
  * Text that sits right of the icon.
  */
 .inline-notification__text {
-  margin: var(--eds-size-half);
+  margin: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
 /**
@@ -35,19 +35,19 @@
 .inline-notification--brand {
   @mixin messagingBrand;
 
-  border: var(--eds-theme-border-width) solid
+  border: calc(var(--eds-theme-border-width) * 1px) solid
     var(--eds-theme-color-border-brand-primary-strong);
 }
 .inline-notification--success {
   @mixin messagingSuccess;
 
-  border: var(--eds-theme-border-width) solid
+  border: calc(var(--eds-theme-border-width) * 1px) solid
     var(--eds-theme-color-border-utility-success-default);
 }
 .inline-notification--warning {
   @mixin messagingWarning;
 
-  border: var(--eds-theme-border-width) solid
+  border: calc(var(--eds-theme-border-width) * 1px) solid
     var(--eds-theme-color-border-utility-warning-strong);
 }
 .inline-notification--subtle {
@@ -62,7 +62,7 @@
   border: 0;
   border-radius: 0;
   /*  Accounts for the lack of border in height to make it 44px. */
-  padding: calc(var(--eds-size-1) + var(--eds-theme-border-width)); 
+  padding: calc(calc(var(--eds-size-1) / 16 * 1rem) + calc(var(--eds-theme-border-width) * 1px)); 
 }
 .inline-notification--full-width-subtle {
   background-color: var(--eds-theme-color-background-neutral-default);
diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css
index eed2f36cb..e9d7288a1 100644
--- a/src/components/Input/Input.module.css
+++ b/src/components/Input/Input.module.css
@@ -9,5 +9,5 @@
  */
 .input {
   @mixin inputStyles;
-  padding-left: var(--eds-size-2);
+  padding-left: calc(var(--eds-size-2) / 16 * 1rem);
 }
diff --git a/src/components/InputField/InputField.module.css b/src/components/InputField/InputField.module.css
index 6eda50209..b1439cc9a 100644
--- a/src/components/InputField/InputField.module.css
+++ b/src/components/InputField/InputField.module.css
@@ -8,7 +8,7 @@
 .input-field__overline {
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--eds-size-half);
+  margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
   color: var(--eds-theme-color-form-label);
 }
 
@@ -55,7 +55,7 @@
 }
 
 .input-field--has-fieldNote {
-  margin-bottom: var(--eds-size-half);
+  margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
 .input-field--invalid-length {
@@ -71,7 +71,7 @@
  */
 .input-field__input-within {
   position: absolute;
-  right: var(--eds-size-2);
+  right: calc(var(--eds-size-2) / 16 * 1rem);
   top: 0;
   bottom: 0;
   display: grid;
diff --git a/src/components/Label/Label.module.css b/src/components/Label/Label.module.css
index e42824b44..04c995a69 100644
--- a/src/components/Label/Label.module.css
+++ b/src/components/Label/Label.module.css
@@ -24,7 +24,7 @@
   display: inline-block;
   position: relative;
   top: 3px;
-  margin-left: var(--eds-size-1);
+  margin-left: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
diff --git a/src/components/Link/Link.module.css b/src/components/Link/Link.module.css
index c27530862..fe05a85c0 100644
--- a/src/components/Link/Link.module.css
+++ b/src/components/Link/Link.module.css
@@ -14,20 +14,20 @@
   align-items: center;
   /* Adds a gap between children to automatically handle spacing between icons and text. */
   gap: 0.75rem;
-  border-width: var(--eds-theme-border-width);
+  border-width: calc(var(--eds-theme-border-width) * 1px);
   border-style: solid;
-  border-radius: var(--eds-theme-box-button-border-radius);
+  border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
   cursor: pointer;
   /* Removes the underline in the case that the rendered element is an <a> tag. */
   text-decoration: none;
   transition-property: color, background-color, border-color;
-  transition-duration: var(--eds-anim-fade-quick);
+  transition-duration: calc(var(--eds-anim-fade-quick) * 1s);
   transition-timing-function: var(--eds-anim-ease);
 
   :where(svg) {
     /* Adds default size for icons passed in for consistency. */
     --icon-size-default: 2em;
-    transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+    transition: color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
 
     @media screen and (prefers-reduced-motion) {
       transition: none;
@@ -497,8 +497,8 @@ button:where(.link--link) {
    * Height is used instead of vertical padding because the icon size we use would
    * cause the height to expand
    */
-  height: var(--eds-size-3);
-  padding: 0 var(--eds-size-1);
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+  padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -509,8 +509,8 @@ button:where(.link--link) {
    * Height is used instead of vertical padding because the icon size we use would
    * cause the height to expand
    */
-  height: var(--eds-size-4);
-  padding: 0 var(--eds-size-1);
+  height: calc(var(--eds-size-4) / 16 * 1rem);
+  padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -521,7 +521,7 @@ button:where(.link--link) {
    * Height is used instead of vertical padding because the icon size we use would
    * cause the height to expand
    */
-  height: var(--eds-size-5);
-  padding: 0 var(--eds-size-2);
+  height: calc(var(--eds-size-5) / 16 * 1rem);
+  padding: 0 calc(var(--eds-size-2) / 16 * 1rem);
 }
 
diff --git a/src/components/Menu/Menu.module.css b/src/components/Menu/Menu.module.css
index f6fa22203..2dc643791 100644
--- a/src/components/Menu/Menu.module.css
+++ b/src/components/Menu/Menu.module.css
@@ -29,7 +29,7 @@
   justify-content: space-evenly;
   align-items: center;
 
-  border-radius: var(--eds-border-radius-md);
+  border-radius: calc(var(--eds-border-radius-md) * 1px);
 }
 .menu__plain-button:hover {
   background-color: var(--eds-theme-color-button-secondary-neutral-background-hover);
diff --git a/src/components/Modal/Modal-v2.module.css b/src/components/Modal/Modal-v2.module.css
index 94c6508ed..e52414e41 100755
--- a/src/components/Modal/Modal-v2.module.css
+++ b/src/components/Modal/Modal-v2.module.css
@@ -44,7 +44,7 @@
  * Modal transition animations.
  */
 .modal__transition--enter {
-  transition: opacity var(--eds-anim-fade-long) var(--eds-anim-ease);
+  transition: opacity calc(var(--eds-anim-fade-long) * 1s) var(--eds-anim-ease);
   @media (prefers-reduced-motion) {
     transition: none;
   }
@@ -59,7 +59,7 @@
 }
 
 .modal__transition--leave {
-  transition: opacity var(--eds-anim-fade-long) var(--eds-anim-ease);
+  transition: opacity calc(var(--eds-anim-fade-long) * 1s) var(--eds-anim-ease);
   @media (prefers-reduced-motion) {
     transition: none;
   }
diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css
index fd5cb4b72..49375bc8f 100755
--- a/src/components/Modal/Modal.module.css
+++ b/src/components/Modal/Modal.module.css
@@ -31,7 +31,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--eds-size-2);
+  padding: calc(var(--eds-size-2) / 16 * 1rem);
   /**
    * Ensures modal is above other components. This is not a design token for now since we need to align on 
    * z-indeces across the app and in the platform. https://app.shortcut.com/czi-edu/story/203871.
@@ -43,7 +43,7 @@
  * Modal transition animations.
  */
 .modal__transition--enter {
-  transition: opacity var(--eds-anim-fade-long) var(--eds-anim-ease);
+  transition: opacity calc(var(--eds-anim-fade-long) * 1s) var(--eds-anim-ease);
   @media (prefers-reduced-motion) {
     transition: none;
   }
@@ -55,7 +55,7 @@
   opacity: 1;
 }
 .modal__transition--leave {
-  transition: opacity var(--eds-anim-fade-long) var(--eds-anim-ease);
+  transition: opacity calc(var(--eds-anim-fade-long) * 1s) var(--eds-anim-ease);
   @media (prefers-reduced-motion) {
     transition: none;
   }
@@ -75,7 +75,7 @@
   height: 43.125rem;
   max-height: 90vh;
   overflow: hidden;
-  border-radius: var(--eds-border-radius-lg);
+  border-radius: calc(var(--eds-border-radius-lg) * 1px);
   background-color: var(--eds-theme-color-background-neutral-default);
   /** 
   * This transparent border is for Window High Contrast Mode, which removes all
@@ -93,7 +93,7 @@
   flex-direction: column;
 
   width: 22.5rem;
-  --modal-horizontal-padding: var(--eds-size-4);
+  --modal-horizontal-padding: calc(var(--eds-size-4) / 16 * 1rem);
 }
 
 /**
@@ -103,7 +103,7 @@
 .modal__content--md {
   @media all and (min-width: $eds-bp-md) {
     width: 42rem;
-    --modal-horizontal-padding: var(--eds-size-6);
+    --modal-horizontal-padding: calc(var(--eds-size-6) / 16 * 1rem);
   }
 }
 
@@ -113,7 +113,7 @@
 .modal__content--lg {
   @media all and (min-width: $eds-bp-xl) {
     width: 64rem;
-    --modal-horizontal-padding: var(--eds-size-8);
+    --modal-horizontal-padding: calc(var(--eds-size-8) / 16 * 1rem);
   }
 }
 
@@ -138,8 +138,8 @@
   right: 0;
 
   /* Minimum button target size is 44px, but 3rem (48px) is next closest ramp size. */
-  width: var(--eds-size-6);
-  height: var(--eds-size-6);
+  width: calc(var(--eds-size-6) / 16 * 1rem);
+  height: calc(var(--eds-size-6) / 16 * 1rem);
 
   cursor: pointer;
 
@@ -151,8 +151,8 @@
  */
 .modal__close-icon {
   position: absolute;
-  top: var(--eds-size-1);
-  right: var(--eds-size-1);
+  top: calc(var(--eds-size-1) / 16 * 1rem);
+  right: calc(var(--eds-size-1) / 16 * 1rem);
   color: var(--eds-theme-color-icon-neutral-subtle);
 }
 
@@ -171,7 +171,7 @@
  * The body of the modal
  */
  .modal-body {
-  padding: var(--eds-size-4) var(--modal-horizontal-padding);
+  padding: calc(var(--eds-size-4) / 16 * 1rem) var(--modal-horizontal-padding);
   flex: 1;
 }
 
@@ -193,16 +193,16 @@
  * Footer for the modal.
  */
  .modal-footer {
-  padding-top: var(--eds-size-2-and-half);
-  padding-bottom: var(--eds-size-2-and-half);
+  padding-top: calc(var(--eds-size-2-and-half) / 16 * 1rem);
+  padding-bottom: calc(var(--eds-size-2-and-half) / 16 * 1rem);
   padding-left: var(--modal-horizontal-padding);
-  padding-right: var(--eds-size-3);
+  padding-right: calc(var(--eds-size-3) / 16 * 1rem);
 
   width: 100%;
   background-color: var(--eds-theme-color-background-neutral-default);
 
-  border-bottom-left-radius: var(--eds-border-radius-lg);
-  border-bottom-right-radius: var(--eds-border-radius-lg);
+  border-bottom-left-radius: calc(var(--eds-border-radius-lg) * 1px);
+  border-bottom-right-radius: calc(var(--eds-border-radius-lg) * 1px);
 
   z-index: 100;
 }
@@ -227,7 +227,7 @@
  .modal-header {
   width: 100%;
   background-color: var(--eds-theme-color-background-neutral-default);
-  padding-top: var(--eds-size-7);
+  padding-top: calc(var(--eds-size-7) / 16 * 1rem);
   padding-left: var(--modal-horizontal-padding);
   padding-right: var(--modal-horizontal-padding);
 }
@@ -260,7 +260,7 @@
     font: var(--eds-theme-typography-headline-secondary-lg);
     
     @media all and (min-width: $eds-bp-sm-2) {
-      margin-bottom: var(--eds-size-3);
+      margin-bottom: calc(var(--eds-size-3) / 16 * 1rem);
     }
     @media all and (min-width: $eds-bp-xl) {
       font: var(--eds-theme-typography-headline-secondary-md);
@@ -275,8 +275,8 @@
 .modal-header__brand-asset {
   align-self: flex-end;
   position: relative;
-  top: var(--eds-size-2);
-  left: var(--eds-size-2);
+  top: calc(var(--eds-size-2) / 16 * 1rem);
+  left: calc(var(--eds-size-2) / 16 * 1rem);
 
   width: 8.5rem;
   height: 8.5rem;
@@ -290,7 +290,7 @@
     display: block;
     width: 14rem;
     height: 14rem;
-    left: var(--eds-size-3);
+    left: calc(var(--eds-size-3) / 16 * 1rem);
   }
 
   @media all and (min-width: $eds-bp-xl) {
@@ -310,5 +310,5 @@
  .modal-stepper {
   color: var(--eds-theme-color-icon-neutral-default);
   display: flex;
-  gap: var(--eds-size-1-and-half);
+  gap: calc(var(--eds-size-1-and-half) / 16 * 1rem);
 }
diff --git a/src/components/NumberIcon/NumberIcon-v2.module.css b/src/components/NumberIcon/NumberIcon-v2.module.css
index 27d905fc2..03887761e 100644
--- a/src/components/NumberIcon/NumberIcon-v2.module.css
+++ b/src/components/NumberIcon/NumberIcon-v2.module.css
@@ -16,9 +16,9 @@
   align-items: center;
 
   /* The circle part of the icon, made with borders. */
-  border: var(--eds-border-width-sm) solid;
+  border: calc(var(--eds-border-width-sm) * 1px) solid;
   border-color: inherit;
-  border-radius: var(--eds-border-radius-full);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 
   cursor: pointer;
 }
diff --git a/src/components/NumberIcon/NumberIcon.module.css b/src/components/NumberIcon/NumberIcon.module.css
index eb0f2d1d0..b06811b12 100644
--- a/src/components/NumberIcon/NumberIcon.module.css
+++ b/src/components/NumberIcon/NumberIcon.module.css
@@ -16,9 +16,9 @@
   align-items: center;
 
   /* The circle part of the icon, made with borders. */
-  border: var(--eds-border-width-sm) solid;
+  border: calc(var(--eds-border-width-sm) * 1px) solid;
   border-color: inherit;
-  border-radius: var(--eds-border-radius-full);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 }
 
 .number-icon--incomplete {
@@ -33,15 +33,15 @@
   /* Line height set to 1 here since this should only ever be on 1 line and it evens out padding in circle. */
   line-height: 1;
   /* Height and width should be the same to make the icon a circle and not oblong. */
-  height: var(--eds-size-2-and-half);
-  width: var(--eds-size-2-and-half);
-  min-width: var(--eds-size-2-and-half);
+  height: calc(var(--eds-size-2-and-half) / 16 * 1rem);
+  width: calc(var(--eds-size-2-and-half) / 16 * 1rem);
+  min-width: calc(var(--eds-size-2-and-half) / 16 * 1rem);
 }
 
 .number-icon--lg {
-  height: var(--eds-size-3);
-  width: var(--eds-size-3);
-  min-width: var(--eds-size-3);
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+  width: calc(var(--eds-size-3) / 16 * 1rem);
+  min-width: calc(var(--eds-size-3) / 16 * 1rem);
 }
 
 /**
diff --git a/src/components/PageLevelBanner/PageLevelBanner.module.css b/src/components/PageLevelBanner/PageLevelBanner.module.css
index 66b48b4f2..bf971e611 100644
--- a/src/components/PageLevelBanner/PageLevelBanner.module.css
+++ b/src/components/PageLevelBanner/PageLevelBanner.module.css
@@ -12,11 +12,11 @@
   position: relative;
   /* Grid is used to separate the icon from the text with correct spacing. */
   display: grid;
-  gap: var(--eds-size-2);
+  gap: calc(var(--eds-size-2) / 16 * 1rem);
   grid-template-columns: min-content 1fr;
-  padding: var(--eds-size-2) var(--eds-size-4);
+  padding: calc(var(--eds-size-2) / 16 * 1rem) calc(var(--eds-size-4) / 16 * 1rem);
   background-color: var(--eds-theme-color-neutral-subtle-background);
-  border-bottom: var(--eds-border-width-md) solid var(--messaging-border-color);
+  border-bottom: calc(var(--eds-border-width-md) * 1px) solid var(--messaging-border-color);
 }
 
 /**
@@ -26,7 +26,7 @@
  */
 .banner__icon {
   color: var(--messaging-icon-color);
-  --icon-size-default: var(--eds-size-3);
+  --icon-size-default: calc(var(--eds-size-3) / 16 * 1rem);
 }
 
 /**
@@ -36,8 +36,8 @@
  */
 .banner__close-btn.banner__close-btn {
   position: absolute;
-  top: var(--eds-size-half);
-  right: var(--eds-size-half);
+  top: calc(var(--eds-size-half) / 16 * 1rem);
+  right: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
 .banner__description {
@@ -50,7 +50,7 @@
  * Add extra right padding to account for close button.
  */
 .banner--dismissable {
-  padding-right: var(--eds-size-9);
+  padding-right: calc(var(--eds-size-9) / 16 * 1rem);
 }
 
 /*------------------------------------*\
diff --git a/src/components/Popover/Popover.module.css b/src/components/Popover/Popover.module.css
index 8b290e7a0..0d95e840e 100644
--- a/src/components/Popover/Popover.module.css
+++ b/src/components/Popover/Popover.module.css
@@ -17,28 +17,28 @@
 @define-mixin down-arrow {
   bottom: -0.25rem;
 
-  border: var(--eds-size-half) solid transparent;
+  border: calc(var(--eds-size-half) / 16 * 1rem) solid transparent;
   border-top-color: var(--eds-theme-color-background-neutral-default);
   border-bottom: none;
 }
 @define-mixin up-arrow {
   top: -0.25rem;
 
-  border: var(--eds-size-half) solid transparent;
+  border: calc(var(--eds-size-half) / 16 * 1rem) solid transparent;
   border-bottom-color: var(--eds-theme-color-background-neutral-default);
   border-top: none;
 }
 @define-mixin left-arrow {
   left: -0.25rem;
 
-  border: var(--eds-size-half) solid transparent;
+  border: calc(var(--eds-size-half) / 16 * 1rem) solid transparent;
   border-right-color: var(--eds-theme-color-background-neutral-default);
   border-left: none;
 }
 @define-mixin right-arrow {
   right: -0.25rem;
 
-  border: var(--eds-size-half) solid transparent;
+  border: calc(var(--eds-size-half) / 16 * 1rem) solid transparent;
   border-left-color: var(--eds-theme-color-background-neutral-default);
   border-right: none;
 }
@@ -47,42 +47,42 @@
  * Arrow placement according to popover placement.
  */
 :where([data-popper-placement='top-start'] > .popover-content__arrow) {
-  left: var(--eds-size-2);
+  left: calc(var(--eds-size-2) / 16 * 1rem);
 
   @mixin down-arrow;
 }
 :where([data-popper-placement='top-end'] > .popover-content__arrow) {
-  right: var(--eds-size-2);
+  right: calc(var(--eds-size-2) / 16 * 1rem);
 
   @mixin down-arrow;
 }
 :where([data-popper-placement='bottom-start'] > .popover-content__arrow) {
-  left: var(--eds-size-2);
+  left: calc(var(--eds-size-2) / 16 * 1rem);
 
   @mixin up-arrow;
 }
 :where([data-popper-placement='bottom-end'] > .popover-content__arrow) {
-  right: var(--eds-size-2);
+  right: calc(var(--eds-size-2) / 16 * 1rem);
 
   @mixin up-arrow;
 }
 :where([data-popper-placement='right-start'] > .popover-content__arrow) {
-  top: var(--eds-size-2);
+  top: calc(var(--eds-size-2) / 16 * 1rem);
 
   @mixin left-arrow;
 }
 :where([data-popper-placement='right-end'] > .popover-content__arrow) {
-  bottom: var(--eds-size-2);
+  bottom: calc(var(--eds-size-2) / 16 * 1rem);
 
   @mixin left-arrow;
 }
 :where([data-popper-placement='left-start'] > .popover-content__arrow) {
-  top: var(--eds-size-2);
+  top: calc(var(--eds-size-2) / 16 * 1rem);
 
   @mixin right-arrow;
 }
 :where([data-popper-placement='left-end'] > .popover-content__arrow) {
-  bottom: var(--eds-size-2);
+  bottom: calc(var(--eds-size-2) / 16 * 1rem);
 
   @mixin right-arrow;
 }
diff --git a/src/components/PopoverContainer/PopoverContainer.module.css b/src/components/PopoverContainer/PopoverContainer.module.css
index 70e691485..799ad6939 100644
--- a/src/components/PopoverContainer/PopoverContainer.module.css
+++ b/src/components/PopoverContainer/PopoverContainer.module.css
@@ -8,7 +8,7 @@
  * Popover container
  */
 .popover-container {
-  border-radius: var(--eds-border-radius-md);
+  border-radius: calc(var(--eds-border-radius-md) * 1px);
   overflow: auto;
   box-shadow: var(--eds-box-shadow-md);
   background-color: var(--eds-theme-color-background-neutral-default);
diff --git a/src/components/PopoverListItem/PopoverListItem.module.css b/src/components/PopoverListItem/PopoverListItem.module.css
index 6c476e71b..ae3c81ed1 100644
--- a/src/components/PopoverListItem/PopoverListItem.module.css
+++ b/src/components/PopoverListItem/PopoverListItem.module.css
@@ -8,7 +8,7 @@
 .popover-list-item {
   display: flex;
   font-size: 0.875rem;
-  padding: var(--eds-size-1) var(--eds-size-2);
+  padding: calc(var(--eds-size-1) / 16 * 1rem) calc(var(--eds-size-2) / 16 * 1rem);
   background-color: var(--eds-theme-color-form-background);
   cursor: pointer;
 }
@@ -24,12 +24,12 @@
 }
 
 .popover-list-item__icon {
-  padding-right: var(--eds-size-1-and-half);
+  padding-right: calc(var(--eds-size-1-and-half) / 16 * 1rem);
   /* This var. matches the height set in the icon, but makes sure it is locked to only that height */
-  height: var(--eds-size-1-and-half);
+  height: calc(var(--eds-size-1-and-half) / 16 * 1rem);
 }
 
 .popover-list-item__no-icon {
   /* right padding applies space for the icon itself and the padding for that icon container */
-  padding-right: calc(var(--eds-size-3) + var(--eds-size-1-and-half));
+  padding-right: calc(calc(var(--eds-size-3) / 16 * 1rem) + calc(var(--eds-size-1-and-half) / 16 * 1rem));
 }
diff --git a/src/components/PopoverListItem/PopoverListItem.tsx b/src/components/PopoverListItem/PopoverListItem.tsx
index aee2a830b..90f6a135b 100644
--- a/src/components/PopoverListItem/PopoverListItem.tsx
+++ b/src/components/PopoverListItem/PopoverListItem.tsx
@@ -64,7 +64,7 @@ export const PopoverListItem = React.forwardRef<HTMLDivElement, Props>(
       >
         {icon ? (
           <div className={styles['popover-list-item__icon']}>
-            {/* TODO: can link to CSS Var? var(--eds-size-1-and-half) */}
+            {/* TODO: can link to CSS Var? calc(var(--eds-size-1-and-half) / 16 * 1rem) */}
             <Icon name={icon} purpose="decorative" size="1.5rem" />
           </div>
         ) : (
diff --git a/src/components/ProgressBar/ProgressBar.module.css b/src/components/ProgressBar/ProgressBar.module.css
index 3e7974438..dc2ddf84d 100644
--- a/src/components/ProgressBar/ProgressBar.module.css
+++ b/src/components/ProgressBar/ProgressBar.module.css
@@ -9,8 +9,8 @@
  */
 .progress-bar {
   border: var(--eds-theme-color-progress-bar-border) solid
-    var(--eds-border-width-sm);
-  border-radius: var(--eds-border-radius-full);
+    calc(var(--eds-border-width-sm) * 1px);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 
   /* Prevents child segments from clipping outside the borders */
   overflow: hidden;
@@ -26,7 +26,7 @@
  */
 .progress-bar__segments-wrapper {
   display: flex;
-  gap: var(--eds-size-half);
+  gap: calc(var(--eds-size-half) / 16 * 1rem);
 
   height: 100%;
 }
@@ -47,7 +47,7 @@
   justify-content: space-between;
   align-items: center;
 
-  margin-bottom: var(--eds-size-1);
+  margin-bottom: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
diff --git a/src/components/Radio/Radio-v2.module.css b/src/components/Radio/Radio-v2.module.css
index f1cf41efc..935155188 100755
--- a/src/components/Radio/Radio-v2.module.css
+++ b/src/components/Radio/Radio-v2.module.css
@@ -128,12 +128,12 @@
 
 .radio__input:focus-visible + .radio__icon {
   border: 0.125rem solid var(--eds-theme-color-border-utility-focus);
-  border-radius: var(--eds-border-radius-full);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 }
 
 @supports not selector(:focus-visible) {
   .radio__input:focus + .radio__icon {
     border: 0.125rem solid var(--eds-theme-color-border-utility-focus);
-    border-radius: var(--eds-border-radius-full);
+    border-radius: calc(var(--eds-border-radius-full) * 1px);
   }
 }
diff --git a/src/components/Radio/Radio.module.css b/src/components/Radio/Radio.module.css
index 8b4a9cb76..51a213c36 100755
--- a/src/components/Radio/Radio.module.css
+++ b/src/components/Radio/Radio.module.css
@@ -7,7 +7,7 @@
  */
 .radio {
   display: flex;
-  gap: var(--eds-size-1);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -29,10 +29,10 @@
   margin: 0;
   /* Remove the radio from the page flow, positioning it on top of the SVG. */
   position: absolute;
-  left: var(--eds-size-half);
+  left: calc(var(--eds-size-half) / 16 * 1rem);
   /* Set same dimensions as the RadioSvg element. */
-  height: var(--eds-size-2);
-  width: var(--eds-size-2);
+  height: calc(var(--eds-size-2) / 16 * 1rem);
+  width: calc(var(--eds-size-2) / 16 * 1rem);
   /**
    * Hide the input element visually.
    * This ensures the radio is still "physically" present so that all users,
@@ -48,17 +48,17 @@
 .radio__icon {
   color: var(--eds-theme-color-radio-brand-background);
   /* Creates space for the border so that there's no jitter when the focus border is visible. */
-  border: var(--eds-border-width-sm) solid transparent;
+  border: calc(var(--eds-border-width-sm) * 1px) solid transparent;
 }
 .radio__input:focus-visible + .radio__icon {
-  border: var(--eds-border-width-sm) solid var(--eds-theme-color-focus-ring);
-  border-radius: var(--eds-border-radius-full);
+  border: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-focus-ring);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 }
 
 @supports not selector(:focus-visible) {
   .radio__input:focus + .radio__icon {
-    border: var(--eds-border-width-sm) solid var(--eds-theme-color-focus-ring);
-    border-radius: var(--eds-border-radius-full);
+    border: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-focus-ring);
+    border-radius: calc(var(--eds-border-radius-full) * 1px);
   }
 }
 
@@ -89,7 +89,7 @@
  * Used for centering the label with the radio input button.
  */
 .radio__label--md {
-  top: var(--eds-size-quarter);
+  top: calc(var(--eds-size-quarter) / 16 * 1rem);
 }
 .radio__label--lg {
   /* This is a 1px increase in top spacing from the md variant. Size is too specific to have a token. */
diff --git a/src/components/SearchBar/SearchBar.module.css b/src/components/SearchBar/SearchBar.module.css
index e20281db0..0d69f4671 100644
--- a/src/components/SearchBar/SearchBar.module.css
+++ b/src/components/SearchBar/SearchBar.module.css
@@ -7,7 +7,7 @@
  */
 .search-bar {
   display: flex;
-  gap: var(--eds-size-1);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -16,7 +16,7 @@
 .search-button {
   padding-top: 1px;
   padding-bottom: 1px;
-  height: var(--eds-size-5);
+  height: calc(var(--eds-size-5) / 16 * 1rem);
   box-sizing: content-box;
   border: 0;
 }
diff --git a/src/components/Section/Section.module.css b/src/components/Section/Section.module.css
index 063d65591..8d8d86672 100755
--- a/src/components/Section/Section.module.css
+++ b/src/components/Section/Section.module.css
@@ -8,8 +8,8 @@
  * A section is a discrete section of a web page.
  */
 .section {
-  padding-top: var(--eds-size-4);
-  padding-bottom: var(--eds-size-4);
+  padding-top: calc(var(--eds-size-4) / 16 * 1rem);
+  padding-bottom: calc(var(--eds-size-4) / 16 * 1rem);
 }
 
 /**
@@ -21,8 +21,8 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  gap: var(--eds-size-1);
-  margin-bottom: var(--eds-size-3);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
+  margin-bottom: calc(var(--eds-size-3) / 16 * 1rem);
 
   /**
    * Section header within centered section
@@ -45,7 +45,7 @@
   flex-grow: 1;
   display: flex;
   flex-direction: row;
-  gap: var(--eds-size-1);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
   /*  To center the header, flex-grow must be disabled. */
   .section--center & {
     flex-grow: 0;
@@ -102,7 +102,7 @@
 */
 .section__overline {
   margin-top: 0;
-  margin-bottom: var(--eds-size-1);
+  margin-bottom: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -111,7 +111,7 @@
  * Optional string that appears beneath the section title.
  */
 .section__description {
-  margin-top: var(--eds-size-half);
+  margin-top: calc(var(--eds-size-half) / 16 * 1rem);
   margin-bottom: 0;
 }
 
diff --git a/src/components/Select/Select-v2.module.css b/src/components/Select/Select-v2.module.css
index d70568fec..c95aa4051 100644
--- a/src/components/Select/Select-v2.module.css
+++ b/src/components/Select/Select-v2.module.css
@@ -41,7 +41,7 @@
   width: 100%;
   padding: 0.5rem;
 
-  border: var(--eds-border-width-sm) solid;
+  border: calc(var(--eds-border-width-sm) * 1px) solid;
   border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
 
   display: flex;
@@ -62,7 +62,7 @@
   flex-shrink: 0;
   transform: rotate(0);
 
-  transition: transform var(--eds-anim-move-medium) ease-out;
+  transition: transform calc(var(--eds-anim-move-medium) * 1s) ease-out;
 
   @media (prefers-reduced-motion) {
     transition: none;
@@ -122,7 +122,7 @@
 
 .select-button:focus-visible {
   border-color: var(--eds-theme-color-border-utility-focus);
-  outline: var(--eds-border-width-sm) solid var(--eds-theme-color-border-utility-focus);
+  outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-focus);
 }
 
 .select-button--error {
@@ -134,7 +134,7 @@
 
   &:focus-visible {
     border-color: var(--eds-theme-color-border-utility-critical);
-    outline: var(--eds-border-width-sm) solid var(--eds-theme-color-border-utility-critical);
+    outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-critical);
   }
 }
 
@@ -147,6 +147,6 @@
 
   &:focus-visible {
     border-color: var(--eds-theme-color-border-utility-warning);
-    outline: var(--eds-border-width-sm) solid var(--eds-theme-color-border-utility-warning);
+    outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-warning);
   }
 }
\ No newline at end of file
diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css
index e9ddfae19..92ee64568 100644
--- a/src/components/Select/Select.module.css
+++ b/src/components/Select/Select.module.css
@@ -29,7 +29,7 @@
 .select__overline {
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--eds-size-half);
+  margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
   color: var(--eds-theme-color-form-label);
 }
 
@@ -75,12 +75,12 @@
   font-size: inherit;
   color: var(--eds-theme-color-text-neutral-subtle);
 
-  height: var(--eds-size-5);
+  height: calc(var(--eds-size-5) / 16 * 1rem);
   width: 100%;
-  padding: 0 var(--eds-size-2);
+  padding: 0 calc(var(--eds-size-2) / 16 * 1rem);
 
-  border: var(--eds-theme-border-width) solid var(--eds-theme-color-form-border);
-  border-radius: var(--eds-border-radius-md);
+  border: calc(var(--eds-theme-border-width) * 1px) solid var(--eds-theme-color-form-border);
+  border-radius: calc(var(--eds-border-radius-md) * 1px);
 
   display: flex;
   /* Place button text on the left and the expand more icon on the right. */
@@ -110,7 +110,7 @@
   flex-shrink: 0;
   transform: rotate(0);
 
-  transition: transform var(--eds-anim-move-medium) ease-out;
+  transition: transform calc(var(--eds-anim-move-medium) * 1s) ease-out;
   @media (prefers-reduced-motion) {
     /* Turns off animation if user prefers reduced motion. */
     transition: none;
diff --git a/src/components/Skeleton/Skeleton.module.css b/src/components/Skeleton/Skeleton.module.css
index 7ccc4ae5f..cf319fb27 100644
--- a/src/components/Skeleton/Skeleton.module.css
+++ b/src/components/Skeleton/Skeleton.module.css
@@ -15,7 +15,7 @@
  * Skeleton
  */
 .skeleton {
-  border-radius: var(--eds-border-radius-lg);
+  border-radius: calc(var(--eds-border-radius-lg) * 1px);
   background-color: var(--eds-theme-color-background-neutral-medium);
   background-image: linear-gradient(
     to right,
@@ -30,7 +30,7 @@
 }
 
 .skeleton.skeleton-circle {
-  border-radius: var(--eds-border-radius-full);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
diff --git a/src/components/Slider/Slider.module.css b/src/components/Slider/Slider.module.css
index da9c55835..41298740d 100644
--- a/src/components/Slider/Slider.module.css
+++ b/src/components/Slider/Slider.module.css
@@ -10,7 +10,7 @@
 .slider {
   display: flex;
   flex-direction: column;
-  gap: var(--eds-size-1-and-half);
+  gap: calc(var(--eds-size-1-and-half) / 16 * 1rem);
 }
 
 /**
@@ -39,7 +39,7 @@
   appearance: none;
   background: transparent;
 
-  height: var(--eds-theme-size-slider-thumb);
+  height: calc(var(--eds-theme-size-slider-thumb) / 16 * 1rem);
 }
 .slider__input:focus {
   outline: none;
@@ -61,8 +61,8 @@
  */
 .slider__input::-webkit-slider-runnable-track {
   background: var(--slider-track-background);
-  height: var(--eds-theme-size-slider-track-height);
-  border-radius: var(--eds-border-radius-full);
+  height: calc(var(--eds-theme-size-slider-track-height) / 16 * 1rem);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 }
 /**
  * Slider Input Track
@@ -70,23 +70,23 @@
 /* Firefox */
 .slider__input::-moz-range-track {
   background: var(--slider-track-background);
-  height: var(--eds-theme-size-slider-track-height);
-  border-radius: var(--eds-border-radius-full);
+  height: calc(var(--eds-theme-size-slider-track-height) / 16 * 1rem);
+  border-radius: calc(var(--eds-border-radius-full) / 16 * 1px);
 }
 
 /* Chrome, Safari, Edge Chromium */
 .slider__input::-webkit-slider-thumb {
   appearance: none;
 
-  height: var(--eds-theme-size-slider-thumb);
-  width: var(--eds-theme-size-slider-thumb);
+  height: calc(var(--eds-theme-size-slider-thumb) / 16 * 1rem);
+  width: calc(var(--eds-theme-size-slider-thumb) / 16 * 1rem);
   background: var(--eds-theme-color-text-neutral-default-inverse);
-  border: var(--eds-border-width-md) solid var(--eds-theme-color-border-neutral-default);
-  border-radius: var(--eds-border-radius-full);
+  border: calc(var(--eds-border-width-md) * 1px) solid var(--eds-theme-color-border-neutral-default);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 
   /* Centers thumb on the track */
   /* prettier-ignore */
-  margin-top: calc(var(--eds-theme-size-slider-track-height) / 2 - var(--eds-theme-size-slider-thumb) / 2);
+  margin-top: calc((var(--eds-theme-size-slider-track-height) / 2 - var(--eds-theme-size-slider-thumb) / 2) / 16 * 1rem);
 }
 .slider__input:not(:disabled)::-webkit-slider-thumb {
   cursor: grab;
@@ -111,11 +111,11 @@
 .slider__input::-moz-range-thumb {
   box-sizing: border-box;
 
-  height: var(--eds-theme-size-slider-thumb);
-  width: var(--eds-theme-size-slider-thumb);
+  height: calc(var(--eds-theme-size-slider-thumb) / 16 * 1rem);
+  width: calc(var(--eds-theme-size-slider-thumb) / 16 * 1rem);
   background: var(--eds-theme-color-text-neutral-default-inverse);
-  border: var(--eds-border-width-md) solid var(--eds-theme-color-border-neutral-default);
-  border-radius: var(--eds-border-radius-full);
+  border: calc(var(--eds-border-width-md) * 1px) solid var(--eds-theme-color-border-neutral-default);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 }
 .slider__input:not(:disabled)::-moz-range-thumb {
   cursor: grab;
@@ -143,8 +143,8 @@
   color: var(--eds-theme-color-text-neutral-default);
 
   /* Calculates offset of the markers to align with actual values */
-  padding-left: calc(var(--eds-theme-size-slider-thumb) / 2);
-  padding-right: calc(var(--eds-theme-size-slider-thumb) / 2);
+  padding-left: calc(var(--eds-theme-size-slider-thumb) / 16 / 2 * 1rem);
+  padding-right: calc(var(--eds-theme-size-slider-thumb) / 16 / 2 * 1rem);
 }
 
 /**
diff --git a/src/components/TabGroup/TabGroup.module.css b/src/components/TabGroup/TabGroup.module.css
index 7a4984d6c..3c80f7d0a 100644
--- a/src/components/TabGroup/TabGroup.module.css
+++ b/src/components/TabGroup/TabGroup.module.css
@@ -65,7 +65,7 @@
   list-style: none;
   display: flex;
   gap: 0.5rem;
-  border-bottom: var(--eds-theme-border-width) solid
+  border-bottom: calc(var(--eds-theme-border-width) * 1px) solid
     var(--eds-theme-color-border-utility-default-low-emphasis);
   font: var(--eds-theme-typography-tab-lg);
   line-height: 1.429;
@@ -140,9 +140,9 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease),
-    box-shadow var(--eds-anim-fade-quick) var(--eds-anim-ease),
-    background-color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+  transition: color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
+    box-shadow calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
+    background-color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
 
   &:focus-visible {
     box-shadow: inset 0 0 0 0.125rem var(--eds-theme-color-border-utility-focus);
@@ -175,9 +175,9 @@
 }
 
 .tab__highlight {
-  border-radius: var(--eds-border-radius-full);
-  transition: bottom var(--eds-anim-fade-quick) var(--eds-anim-ease),
-              width var(--eds-anim-fade-quick) var(--eds-anim-ease);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
+  transition: bottom calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
+              width calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
 
   .tabs__item.eds-is-active & {
     position: absolute;
@@ -192,7 +192,7 @@
     bottom: 0.25rem;
     width: calc(100% - 0.5rem);
 
-    border-radius: var(--eds-border-radius-full);
+    border-radius: calc(var(--eds-border-radius-full) * 1px);
   }
 
   .tabs--has-divider & {
diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
index 70ab09333..f50561a1e 100755
--- a/src/components/Table/Table.module.css
+++ b/src/components/Table/Table.module.css
@@ -17,7 +17,7 @@
 :where(.table-cell) {
   font: var(--eds-theme-typography-body-sm);
 
-  padding: var(--eds-size-2) var(--eds-size-1);
+  padding: calc(var(--eds-size-2) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -26,7 +26,7 @@
  */
 :where(.table-header-cell) {
   font: var(--eds-theme-typography-label-sm);
-  padding: var(--eds-size-1) var(--eds-size-1);
+  padding: calc(var(--eds-size-1) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
   text-align: left;
 }
 
@@ -36,7 +36,7 @@
  * Adjusts the padding to match the table__cell padding for alignment.
  */
 .table-header-cell--body {
-  padding: var(--eds-size-2) var(--eds-size-1);
+  padding: calc(var(--eds-size-2) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -45,7 +45,7 @@
  * On table header cells that are sortable, the content is wrapped by a <Button>.
  */
 .table-header-cell__sort-button {
-  gap: var(--eds-size-half);
+  gap: calc(var(--eds-size-half) / 16 * 1rem);
   text-decoration: none;
   font-weight: var(--eds-font-weight-bold);
 }
@@ -55,7 +55,7 @@
  */
 .table-row {
   vertical-align: top;
-  border-bottom-width: var(--eds-theme-border-width);
+  border-bottom-width: calc(var(--eds-theme-border-width) * 1px);
   border-bottom-style: solid;
   border-bottom-color: var(--eds-theme-color-border-neutral-subtle);
 }
diff --git a/src/components/Tabs/Tabs.module.css b/src/components/Tabs/Tabs.module.css
index e526f3af6..182fef5c2 100644
--- a/src/components/Tabs/Tabs.module.css
+++ b/src/components/Tabs/Tabs.module.css
@@ -17,7 +17,7 @@
   /* Tab overflow behavior*/
   overflow-x: auto;
   position: relative;
-  padding-bottom: var(--eds-size-2);
+  padding-bottom: calc(var(--eds-size-2) / 16 * 1rem);
 }
 
 /**
@@ -29,7 +29,7 @@
   -webkit-mask-image: -webkit-linear-gradient(
     left,
     transparent,
-    white var(--eds-size-8)
+    white calc(var(--eds-size-8) / 16 * 1rem)
   );
 }
 
@@ -42,7 +42,7 @@
   -webkit-mask-image: -webkit-linear-gradient(
     right,
     transparent,
-    white var(--eds-size-8)
+    white calc(var(--eds-size-8) / 16 * 1rem)
   );
 }
 
@@ -50,8 +50,8 @@
   -webkit-mask-image: -webkit-linear-gradient(
     left,
     transparent,
-    white var(--eds-size-8),
-    white calc(100% - var(--eds-size-8)),
+    white calc(var(--eds-size-8) / 16 * 1rem),
+    white calc(100% - calc(var(--eds-size-8) / 16 * 1rem)),
     transparent 100%
   );
 }
@@ -65,7 +65,7 @@
   list-style: none;
   /* Set to display flex to place tabs side by side. */
   display: flex;
-  border-bottom: var(--eds-theme-border-width) solid
+  border-bottom: calc(var(--eds-theme-border-width) * 1px) solid
     var(--eds-theme-color-border-neutral-subtle);
   font: var(--eds-theme-typography-tab-lg);
   line-height: 1.429;
@@ -105,12 +105,12 @@
  */
 .tabs__link {
   display: block;
-  padding: var(--eds-size-1-and-half);
+  padding: calc(var(--eds-size-1-and-half) / 16 * 1rem);
   text-decoration: none;
   color: var(--eds-theme-color-text-neutral-default);
-  transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease),
-    box-shadow var(--eds-anim-fade-quick) var(--eds-anim-ease),
-    background-color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+  transition: color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
+    box-shadow calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
+    background-color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
 
   &:focus-visible {
     @mixin focus;
@@ -131,7 +131,7 @@
    */
   .tabs__item.eds-is-active & {
     color: var(--eds-theme-color-text-brand-default);
-    box-shadow: inset 0 calc(var(--eds-border-width-md) * -1) 0 0
+    box-shadow: inset 0 calc(calc(var(--eds-border-width-md) * 1px) * -1) 0 0
       var(--eds-theme-color-border-brand-primary-strong);
   }
 }
diff --git a/src/components/Tag/Tag.module.css b/src/components/Tag/Tag.module.css
index 7b8def48f..182fa4d40 100644
--- a/src/components/Tag/Tag.module.css
+++ b/src/components/Tag/Tag.module.css
@@ -9,16 +9,16 @@
  */
 .tag {
   width: max-content;
-  height: var(--eds-size-3);
-  padding-left: var(--eds-size-1-and-half);
-  padding-right: var(--eds-size-1-and-half);
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+  padding-left: calc(var(--eds-size-1-and-half) / 16 * 1rem);
+  padding-right: calc(var(--eds-size-1-and-half) / 16 * 1rem);
 
   display: inline-flex;
   align-items: center;
 
   /* border color matches the background color, unless a color variant is applied */
-  border: var(--eds-theme-border-width) solid var(--tag-secondary-color) ;
-  border-radius: var(--eds-border-radius-full);
+  border: calc(var(--eds-theme-border-width) * 1px) solid var(--tag-secondary-color) ;
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 
   background-color: var(--tag-secondary-color);
   color: var(--tag-primary-color);
@@ -29,7 +29,7 @@
  * If tags are used inline, ensures spacing between tags.
  */
 .tag > :not(:last-child) {
-  margin-right: var(--eds-size-half);
+  margin-right: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
 /**
diff --git a/src/components/Tag/Tag.stories.module.css b/src/components/Tag/Tag.stories.module.css
index d46863346..431c80279 100644
--- a/src/components/Tag/Tag.stories.module.css
+++ b/src/components/Tag/Tag.stories.module.css
@@ -3,5 +3,5 @@
 \*------------------------------------*/
 
 .tagList > :not(:last-child) {
-  margin-right: var(--eds-size-half);
+  margin-right: calc(var(--eds-size-half) / 16 * 1rem);
 }
diff --git a/src/components/TextareaField/TextareaField.module.css b/src/components/TextareaField/TextareaField.module.css
index be35910ed..c28361a2a 100644
--- a/src/components/TextareaField/TextareaField.module.css
+++ b/src/components/TextareaField/TextareaField.module.css
@@ -21,7 +21,7 @@
 .textarea-field__overline {
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--eds-size-half);
+  margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
 .textarea-field__overline--no-label {
diff --git a/src/components/Toast/Toast.module.css b/src/components/Toast/Toast.module.css
index b46a3f7d1..aee801527 100644
--- a/src/components/Toast/Toast.module.css
+++ b/src/components/Toast/Toast.module.css
@@ -13,22 +13,22 @@
   width: 100%;
   max-width: 25rem;
 
-  padding-left: var(--eds-size-2);
-  padding-right: var(--eds-size-1);
+  padding-left: calc(var(--eds-size-2) / 16 * 1rem);
+  padding-right: calc(var(--eds-size-1) / 16 * 1rem);
 
   display: grid;
-  gap: var(--eds-size-1);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
   grid-template-columns: 1fr min-content;
   align-items: center;
 
   border-style: solid;
-  border-width: var(--eds-border-width-sm);
+  border-width: calc(var(--eds-border-width-sm) * 1px);
   /**
    * The thick left border operates as a foreground band of color, 
    * so foreground rather than border is used
    */
-  border-left-width: var(--eds-border-width-lg);
-  border-radius: var(--eds-size-half);
+  border-left-width: calc(var(--eds-border-width-lg) * 1px);
+  border-radius: calc(var(--eds-size-half) / 16 * 1rem);
   /**
    * The border CSS variables are defined in the messaging mixins    
    */
@@ -50,13 +50,13 @@
  * The toast content, usually an icon and text message. Does not include the optional close button
  */
 .toast__content {
-  padding-top: var(--eds-size-2);
-  padding-bottom: var(--eds-size-2);
+  padding-top: calc(var(--eds-size-2) / 16 * 1rem);
+  padding-bottom: calc(var(--eds-size-2) / 16 * 1rem);
   /**
    * Grid places the icon on the left and message on the right, with both vertically aligned to the center.   
    */
   display: grid;
-  gap: var(--eds-size-2);
+  gap: calc(var(--eds-size-2) / 16 * 1rem);
   grid-template-columns: min-content 1fr;
   align-items: center;
 }
diff --git a/src/components/Toggle/Toggle.module.css b/src/components/Toggle/Toggle.module.css
index 651d57737..ad6024e0c 100644
--- a/src/components/Toggle/Toggle.module.css
+++ b/src/components/Toggle/Toggle.module.css
@@ -5,23 +5,23 @@
  */
 .toggle__button {
   /* The transparent border is used to support Windows high contrast mode and reduce potential jiggling with adding / removing borders */
-  border: var(--eds-theme-border-width) solid transparent;
+  border: calc(var(--eds-theme-border-width) * 1px) solid transparent;
   padding: 0;
 
   position: relative;
   display: inline-flex;
 
-  height: var(--eds-size-3);
-  width: var(--eds-size-7);
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+  width: calc(var(--eds-size-7) / 16 * 1rem);
 
   flex-shrink: 0;
   align-items: center;
 
-  border-radius: var(--eds-border-radius-full);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 
   cursor: pointer;
 
-  transition: background-color var(--eds-anim-move-quick) var(--eds-anim-ease);
+  transition: background-color calc(var(--eds-anim-move-quick) * 1s) var(--eds-anim-ease);
 
   @media screen and (prefers-reduced-motion) {
     transition: none;
@@ -81,7 +81,7 @@
   display: flex;
   align-items: center;
 
-  gap: var(--eds-size-1);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -90,16 +90,16 @@
 .toggle__button-thumb {
   display: inline-block;
 
-  height: var(--eds-size-2-and-half);
-  width: var(--eds-size-2-and-half);
+  height: calc(var(--eds-size-2-and-half) / 16 * 1rem);
+  width: calc(var(--eds-size-2-and-half) / 16 * 1rem);
 
   /* The transparent border is used to support Windows high contrast mode and reduce potential jiggling with adding / removing borders */
-  border: var(--eds-theme-border-width) solid transparent;
-  border-radius: var(--eds-border-radius-full);
+  border: calc(var(--eds-theme-border-width) * 1px) solid transparent;
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 
   background-color: var(--eds-theme-color-toggle-thumb);
 
-  transition: transform var(--eds-anim-move-quick) var(--eds-anim-ease);
+  transition: transform calc(var(--eds-anim-move-quick) * 1s) var(--eds-anim-ease);
 
   @media screen and (prefers-reduced-motion) {
     transition: none;
diff --git a/src/components/Tooltip/Tooltip-v2.module.css b/src/components/Tooltip/Tooltip-v2.module.css
index 47ceb4acf..340ddf718 100644
--- a/src/components/Tooltip/Tooltip-v2.module.css
+++ b/src/components/Tooltip/Tooltip-v2.module.css
@@ -4,7 +4,7 @@
 
 .tooltip {
   border-style: solid;
-  border-width: var(--eds-border-width-sm);
+  border-width: calc(var(--eds-border-width-sm) * 1px);
   border-radius: calc(var(--eds-theme-border-radius-surfaces-md) * 1px);
   box-shadow: var(--eds-box-shadow-md);
   max-width: 14rem;
diff --git a/src/components/Tooltip/Tooltip-v2.stories.tsx b/src/components/Tooltip/Tooltip-v2.stories.tsx
index 28770f6ba..0b0228f9e 100644
--- a/src/components/Tooltip/Tooltip-v2.stories.tsx
+++ b/src/components/Tooltip/Tooltip-v2.stories.tsx
@@ -89,6 +89,10 @@ export const LongTriggerText: Story = {
   args: {
     children: <div className="fpo p-1">Longer text to test placement</div>,
   },
+  parameters: {
+    // Sets the delay (in milliseconds) for a specific story.
+    chromatic: { delay: 300 },
+  },
 };
 
 /**
diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
index 09e1c38f4..39188a5d2 100644
--- a/src/components/Tooltip/Tooltip.module.css
+++ b/src/components/Tooltip/Tooltip.module.css
@@ -10,8 +10,8 @@
 
 .tooltip {
   border-style: solid;
-  border-width: var(--eds-border-width-sm);
-  border-radius: var(--eds-border-radius-lg);
+  border-width: calc(var(--eds-border-width-sm) * 1px);
+  border-radius: calc(var(--eds-border-radius-lg) * 1px);
   box-shadow: var(--eds-box-shadow-md);
 
   @media (prefers-reduced-motion) {
@@ -32,10 +32,10 @@
 }
 
 .tooltip :global(.tippy-content) {
-  padding-left: var(--eds-size-2);
-  padding-right: var(--eds-size-2);
-  padding-bottom: var(--eds-size-1);
-  padding-top: var(--eds-size-1);
+  padding-left: calc(var(--eds-size-2) / 16 * 1rem);
+  padding-right: calc(var(--eds-size-2) / 16 * 1rem);
+  padding-bottom: calc(var(--eds-size-1) / 16 * 1rem);
+  padding-top: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 /**
@@ -44,8 +44,8 @@
 .tooltip :global(.tippy-arrow) {
   position: absolute;
 
-  width: var(--eds-size-2);
-  height: var(--eds-size-2);
+  width: calc(var(--eds-size-2) / 16 * 1rem);
+  height: calc(var(--eds-size-2) / 16 * 1rem);
 }
 
 .tooltip :global(.tippy-arrow::before) {
@@ -53,7 +53,7 @@
 
   border-style: solid;
   border-color: transparent;
-  border-width: var(--eds-size-1);
+  border-width: calc(var(--eds-size-1) / 16 * 1rem);
 
   content: '';
 }
diff --git a/src/design-tokens/mixins.css b/src/design-tokens/mixins.css
index 80dc29f99..6439b0614 100644
--- a/src/design-tokens/mixins.css
+++ b/src/design-tokens/mixins.css
@@ -58,9 +58,9 @@
 }
 
 @define-mixin focus {
-  outline: var(--eds-theme-box-focus-ring-outline-width) solid
+  outline: calc(var(--eds-theme-box-focus-ring-outline-width) * 1px) solid
     var(--eds-theme-color-focus-ring);
-  outline-offset: var(--eds-theme-box-focus-ring-outline-offset);
+  outline-offset: calc(var(--eds-theme-box-focus-ring-outline-offset) * 1px);
 }
 
 @define-mixin focusInside {
@@ -78,17 +78,17 @@
   font-family: inherit;
   -webkit-appearance: none;
   width: 100%;
-  border-width: var(--eds-theme-form-border-width);
+  border-width: calc(var(--eds-theme-form-border-width) * 1px);
   border-style: solid;
   border-color: var(--eds-theme-color-form-border);
-  border-radius: var(--eds-theme-form-border-radius);
+  border-radius: calc(var(--eds-theme-form-border-radius) * 1px);
   outline: none;
-  padding: var(--eds-size-1);
+  padding: calc(var(--eds-size-1) / 16 * 1rem);
   margin: 0;
   color: var(--eds-theme-color-text-neutral-default);
   background-color: var(--eds-theme-color-form-background);
-  transition: box-shadow var(--eds-anim-fade-quick) var(--eds-anim-ease),
-    border-color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+  transition: box-shadow calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
+    border-color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
 
   &:hover {
     border-color: var(--eds-theme-color-form-border-hover);
@@ -214,15 +214,15 @@
   -webkit-appearance: none;
   width: 100%;
 
-  border: var(--eds-border-width-sm) solid;
+  border: calc(var(--eds-border-width-sm) * 1px) solid;
   border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
 
   outline: none;
   padding: 0.5rem;
   margin: 0;
 
-  transition: box-shadow var(--eds-anim-fade-quick) var(--eds-anim-ease),
-  border-color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+  transition: box-shadow calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
+  border-color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
   
   @media screen and (prefers-reduced-motion) {
     transition: none;
@@ -238,7 +238,7 @@
 
   &:focus {
     border-color: var(--eds-theme-color-border-utility-focus);
-    outline: var(--eds-border-width-sm) solid var(--eds-theme-color-border-utility-focus);
+    outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-focus);
   }
 
   &:read-only:not(:disabled) {
@@ -259,7 +259,7 @@
 
     &:focus {
       border-color: var(--eds-theme-color-border-utility-critical);
-      outline: var(--eds-border-width-sm) solid var(--eds-theme-color-border-utility-critical);
+      outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-critical);
     }
   }
 
@@ -272,7 +272,7 @@
 
     &:focus {
       border-color: var(--eds-theme-color-border-utility-warning);
-      outline: var(--eds-border-width-sm) solid var(--eds-theme-color-border-utility-warning);
+      outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-warning);
     }
   }
 
diff --git a/src/design-tokens/primitives.json b/src/design-tokens/primitives.json
index 2d338dcc8..ba04ddb0f 100644
--- a/src/design-tokens/primitives.json
+++ b/src/design-tokens/primitives.json
@@ -3,21 +3,26 @@
     "anim": {
       "fade": {
         "quick": {
-          "value": "0.15s"
+          "value": "0.15",
+          "comment": "Seconds (s)"
         },
         "long": {
-          "value": "0.4s"
+          "value": "0.4",
+          "comment": "Seconds (s)"
         }
       },
       "move": {
         "quick": {
-          "value": "0.15s"
+          "value": "0.15",
+          "comment": "Seconds (s)"
         },
         "medium": {
-          "value": "0.3s"
+          "value": "0.3",
+          "comment": "Seconds (s)"
         },
         "long": {
-          "value": "0.4s"
+          "value": "0.4",
+          "comment": "Seconds (s)"
         }
       },
       "ease": {
@@ -28,36 +33,36 @@
     "border": {
       "width": {
         "sm": {
-          "value": "1px",
-          "comment":"@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          "value": "1",
+          "comment": "TODO-AH @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "md": {
-          "value": "2px",
-          "comment":"@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          "value": "2",
+          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "lg": {
-          "value": "4px",
-          "comment":"@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          "value": "4",
+          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "xl": {
-          "value": "8px",
-          "comment":"@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          "value": "8",
+          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         }
       },
       "radius": {
         "none": {
-          "value": "0px"
+          "value": "0"
         },
         "md": {
-          "value": "4px",
+          "value": "4",
           "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "lg": {
-          "value": "8px",
+          "value": "8",
           "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "xl": {
-          "value": "20px",
+          "value": "20",
           "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "50": { "value": "2", "group": "size" },
@@ -66,11 +71,11 @@
         "200": { "value": "8", "group": "size" },
         "500": { "value": "20", "group": "size" },
         "round": {
-          "value": "50%",
-          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          "value": "50",
+          "comment": "Percentage (%) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "full": {
-          "value": "9999px"
+          "value": "9999"
         }
       }
     },
@@ -476,30 +481,30 @@
     },
     "l": {
       "max-width": {
-        "value": "71.25rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "value": "1140",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "sidebar-width": {
-        "value": "13.5rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "value": "216",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "linelength-width": {
-        "value": "36rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "value": "576",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       }
     },
     "outline": {
       "width": {
         "sm": {
-          "value": "1px",
+          "value": "1",
           "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "md": {
-          "value": "2px",
+          "value": "2",
           "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "lg": {
-          "value": "4px",
+          "value": "4",
           "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         }
       }
@@ -524,76 +529,94 @@
     },
     "size": {
       "base-unit": {
-        "value": "0.5rem",
-        "group": "size"
+        "value": "8",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "half": {
-        "value": "0.25rem",
-        "group": "size"
+        "value": "4",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "quarter": {
-        "value": "0.125rem",
-        "group": "size"
+        "value": "2",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "1": {
-        "value": "0.5rem",
-        "group": "size"
+        "value": "8",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "1-and-half": {
-        "value": "0.75rem",
-        "group": "size"
+        "value": "12",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "2": {
-        "value": "1rem",
-        "group": "size"
+        "value": "16",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "2-and-half": {
-        "value": "1.275rem",
-        "group": "size"
+        "value": "20",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "3": {
-        "value": "1.5rem",
-        "group": "size"
+        "value": "24",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "4": {
-        "value": "2rem",
-        "group": "size"
+        "value": "32",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "5": {
-        "value": "2.5rem",
-        "group": "size"
+        "value": "40",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "6": {
-        "value": "3rem",
-        "group": "size"
+        "value": "48",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "7": {
-        "value": "3.5rem",
-        "group": "size"
+        "value": "56",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "8": {
-        "value": "4rem",
-        "group": "size"
+        "value": "64",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "9": {
-        "value": "4.5rem",
-        "group": "size"
+        "value": "72",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "10": {
-        "value": "5rem",
-        "group": "size"
+        "value": "80",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "11": {
-        "value": "5.5rem",
-        "group": "size"
+        "value": "88",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "12": {
-        "value": "6rem",
-        "group": "size"
+        "value": "96",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       },
       "20": {
-        "value": "10rem",
-        "group": "size"
+        "value": "320",
+        "group": "size",
+        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
       }
     },
     "z-index": {
diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
index 20a162406..e14c5173c 100644
--- a/src/tokens-dist/css/variables.css
+++ b/src/tokens-dist/css/variables.css
@@ -7,34 +7,34 @@
   --eds-z-index-200: 200; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-z-index-100: 100; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-z-index-0: 0; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-2-and-half: 1.275rem;
-  --eds-size-1-and-half: 0.75rem;
-  --eds-size-quarter: 0.125rem;
-  --eds-size-half: 0.25rem;
-  --eds-size-base-unit: 0.5rem;
-  --eds-size-20: 10rem;
-  --eds-size-12: 6rem;
-  --eds-size-11: 5.5rem;
-  --eds-size-10: 5rem;
-  --eds-size-9: 4.5rem;
-  --eds-size-8: 4rem;
-  --eds-size-7: 3.5rem;
-  --eds-size-6: 3rem;
-  --eds-size-5: 2.5rem;
-  --eds-size-4: 2rem;
-  --eds-size-3: 1.5rem;
-  --eds-size-2: 1rem;
-  --eds-size-1: 0.5rem;
+  --eds-size-2-and-half: 20; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-1-and-half: 12; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-quarter: 2; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-half: 4; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-base-unit: 8; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-20: 320; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-12: 96; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-11: 88; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-10: 80; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-9: 72; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-8: 64; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-7: 56; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-6: 48; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-5: 40; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-4: 32; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-3: 24; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-2: 16; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-1: 8; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-box-shadow-xl: 0px 6px 20px rgba(0, 0, 0, 0.2); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-box-shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.16); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-box-shadow-md: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-box-shadow-sm: 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-outline-width-lg: 4px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-outline-width-md: 2px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-outline-width-sm: 1px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-l-linelength-width: 36rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-l-sidebar-width: 13.5rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-l-max-width: 71.25rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-outline-width-lg: 4; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-outline-width-md: 2; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-outline-width-sm: 1; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-l-linelength-width: 576; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-l-sidebar-width: 216; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-l-max-width: 1140; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-color-other-ruby-800: #8F0134; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-color-other-ruby-700: #BD0044; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-color-other-ruby-600: #D41E52; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
@@ -196,27 +196,27 @@
   --eds-color-brand-grape-100: #F0F0FC; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-color-black: 0 0 0; /* Specified as a value to color-func rgb() so that it can be blended */
   --eds-color-white: 255 255 255; /* Specified as a value to color-func rgb() so that it can be blended */
-  --eds-border-radius-full: 9999px;
-  --eds-border-radius-round: 50%; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-radius-xl: 20px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-radius-lg: 8px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-radius-md: 4px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-radius-none: 0px;
+  --eds-border-radius-full: 9999;
+  --eds-border-radius-round: 50; /* Percentage (%) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-border-radius-xl: 20; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-border-radius-lg: 8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-border-radius-md: 4; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-border-radius-none: 0;
   --eds-border-radius-500: 20;
   --eds-border-radius-200: 8;
   --eds-border-radius-150: 6;
   --eds-border-radius-100: 4;
   --eds-border-radius-50: 2;
-  --eds-border-width-xl: 8px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-width-lg: 4px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-width-md: 2px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-width-sm: 1px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-border-width-xl: 8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-border-width-lg: 4; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-border-width-md: 2; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-border-width-sm: 1; /* TODO-AH @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-anim-ease: ease; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-anim-move-long: 0.4s;
-  --eds-anim-move-medium: 0.3s;
-  --eds-anim-move-quick: 0.15s;
-  --eds-anim-fade-long: 0.4s;
-  --eds-anim-fade-quick: 0.15s;
+  --eds-anim-move-long: 0.4; /* Seconds (s) */
+  --eds-anim-move-medium: 0.3; /* Seconds (s) */
+  --eds-anim-move-quick: 0.15; /* Seconds (s) */
+  --eds-anim-fade-long: 0.4; /* Seconds (s) */
+  --eds-anim-fade-quick: 0.15; /* Seconds (s) */
   --eds-theme-color-transparent-white-0: rgba(255, 255, 255, 0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-transparent-black-30: rgba(0, 0, 0, .3); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-transparent-black-0: rgba(0, 0, 0, 0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
index c6d8211dd..03b653747 100644
--- a/src/tokens-dist/json/variables-nested.json
+++ b/src/tokens-dist/json/variables-nested.json
@@ -288,45 +288,45 @@
       },
       "border": {
         "radius": {
-          "actions": "9999px",
+          "actions": "9999",
           "surfaces": {
-            "lg": "0px",
+            "lg": "0",
             "md": "6"
           },
           "objects": {
             "md": "4",
             "sm": "2",
-            "xs": "0px"
+            "xs": "0"
           },
-          "tabUnderline": "50%"
+          "tabUnderline": "50"
         },
-        "width": "1px"
+        "width": "1"
       },
       "box": {
         "button": {
           "border": {
-            "radius": "4px"
+            "radius": "4"
           }
         },
         "focus-ring": {
           "outline": {
-            "width": "1px",
-            "offset": "2px"
+            "width": "1",
+            "offset": "2"
           }
         }
       },
       "form": {
         "border": {
-          "width": "1px",
-          "radius": "4px"
+          "width": "1",
+          "radius": "4"
         }
       },
       "size": {
         "slider": {
           "track": {
-            "height": "0.5rem"
+            "height": "8"
           },
-          "thumb": "1.5rem"
+          "thumb": "24"
         }
       },
       "color": {
@@ -1097,22 +1097,22 @@
     },
     "anim": {
       "fade": {
-        "quick": "0.15s",
-        "long": "0.4s"
+        "quick": "0.15",
+        "long": "0.4"
       },
       "move": {
-        "quick": "0.15s",
-        "medium": "0.3s",
-        "long": "0.4s"
+        "quick": "0.15",
+        "medium": "0.3",
+        "long": "0.4"
       },
       "ease": "ease"
     },
     "border": {
       "width": {
-        "sm": "1px",
-        "md": "2px",
-        "lg": "4px",
-        "xl": "8px"
+        "sm": "1",
+        "md": "2",
+        "lg": "4",
+        "xl": "8"
       },
       "radius": {
         "50": "2",
@@ -1120,12 +1120,12 @@
         "150": "6",
         "200": "8",
         "500": "20",
-        "none": "0px",
-        "md": "4px",
-        "lg": "8px",
-        "xl": "20px",
-        "round": "50%",
-        "full": "9999px"
+        "none": "0",
+        "md": "4",
+        "lg": "8",
+        "xl": "20",
+        "round": "50",
+        "full": "9999"
       }
     },
     "color": {
@@ -1324,15 +1324,15 @@
       }
     },
     "l": {
-      "max-width": "71.25rem",
-      "sidebar-width": "13.5rem",
-      "linelength-width": "36rem"
+      "max-width": "1140",
+      "sidebar-width": "216",
+      "linelength-width": "576"
     },
     "outline": {
       "width": {
-        "sm": "1px",
-        "md": "2px",
-        "lg": "4px"
+        "sm": "1",
+        "md": "2",
+        "lg": "4"
       }
     },
     "box-shadow": {
@@ -1342,24 +1342,24 @@
       "xl": "0px 6px 20px rgba(0, 0, 0, 0.2)"
     },
     "size": {
-      "1": "0.5rem",
-      "2": "1rem",
-      "3": "1.5rem",
-      "4": "2rem",
-      "5": "2.5rem",
-      "6": "3rem",
-      "7": "3.5rem",
-      "8": "4rem",
-      "9": "4.5rem",
-      "10": "5rem",
-      "11": "5.5rem",
-      "12": "6rem",
-      "20": "10rem",
-      "base-unit": "0.5rem",
-      "half": "0.25rem",
-      "quarter": "0.125rem",
-      "1-and-half": "0.75rem",
-      "2-and-half": "1.275rem"
+      "1": "8",
+      "2": "16",
+      "3": "24",
+      "4": "32",
+      "5": "40",
+      "6": "48",
+      "7": "56",
+      "8": "64",
+      "9": "72",
+      "10": "80",
+      "11": "88",
+      "12": "96",
+      "20": "320",
+      "base-unit": "8",
+      "half": "4",
+      "quarter": "2",
+      "1-and-half": "12",
+      "2-and-half": "20"
     },
     "z-index": {
       "0": "0",