feat(tokens)!: remove units from design system tokens (#1912)

- for size tokens (lengths, times, percentages), remove the unit
- updates usages of tier 2+ tokens
- instead, compose the unit into the token value with a unit using
  calc()
- This is not backwards-compatible with tokens having units, so themes
  need updating
- Tokens will have a comment denoting the unit to use (when not px)

.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 {

.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}

.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>
               );

.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>
               );

.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>
                 );

.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>
             );

.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>
         ))}

.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>
             );

.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;

.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",

.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;

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);
 }