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

- 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)
chanzuckerberg · Apr 4, 2024 · 2d7b1a5 · 2d7b1a5
1 parent a68a255
commit 2d7b1a5
Show file tree

Hide file tree

Showing 66 changed files with 565 additions and 541 deletions.
diff --git 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) * 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
@@ -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
@@ -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
@@ -15,10 +15,10 @@ export class Tier1Layout extends Component {
                 <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
-                      maxWidth: `var(${listItem.name})`,
+                      maxWidth: `calc(var(${listItem.name}) * 1rem)`,
                     }}
                     name={listItem.name}
-                    value={listItem.value}
+                    value={listItem.value + 'rem'}
                   />
                 </Grid.Item>
               );

diff --git 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}) * 1rem)`,
+                    height: `calc(var(${listItem.name}) * 1rem)`,
                     minHeight: '0',
                   }}
                   name={listItem.name}
-                  value={listItem.value}
+                  value={listItem.value + 'rem'}
                 />
               </Grid.Item>
             ))}
@@ -35,12 +35,12 @@ 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}) * 1rem)`,
+                        height: `calc(var(${listItem.name}) * 1rem)`,
                         minHeight: '0',
                       }}
                       name={listItem.name}
-                      value={listItem.value}
+                      value={listItem.value + 'rem'}
                     />
                   </Grid.Item>
                 );

diff --git 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
@@ -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
@@ -25,12 +25,12 @@ export const Sizes: StoryObj = {
               <Grid.Item key={listItem.name}>
                 <TokenSpecimen
                   inlineStyles={{
-                    width: `var(${listItem.name})`,
-                    height: `var(${listItem.name})`,
+                    width: `calc(var(${listItem.name}) * 1rem)`,
+                    height: `calc(var(${listItem.name}) * 1rem)`,
                     minHeight: '0',
                   }}
                   name={listItem.name}
-                  value={listItem.value}
+                  value={listItem.value + 'rem'}
                 />
               </Grid.Item>
             );

diff --git 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
@@ -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": "0.5",
+  "eds-theme-size-slider-thumb": "1.5",
   "eds-theme-color-body-background": "#EEE7E4",
   "eds-theme-color-body-background-inverted": "#383C43",
   "eds-theme-color-background-input": "rgb(var(--eds-color-white) / 1)",
@@ -537,27 +537,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",
@@ -716,34 +716,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": "71.25",
+  "eds-l-sidebar-width": "13.5",
+  "eds-l-linelength-width": "36",
+  "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": "0.5",
+  "eds-size-2": "1",
+  "eds-size-3": "1.5",
+  "eds-size-4": "2",
+  "eds-size-5": "2.5",
+  "eds-size-6": "3",
+  "eds-size-7": "3.5",
+  "eds-size-8": "4",
+  "eds-size-9": "4.5",
+  "eds-size-10": "5",
+  "eds-size-11": "5.5",
+  "eds-size-12": "6",
+  "eds-size-20": "10",
+  "eds-size-base-unit": "0.5",
+  "eds-size-half": "0.25",
+  "eds-size-quarter": "0.125",
+  "eds-size-1-and-half": "0.75",
+  "eds-size-2-and-half": "1.275",
   "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
@@ -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) * 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) * 1rem);
+  margin: calc(var(--eds-size-2) * 1rem) 0 calc(var(--eds-size-4) * 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
@@ -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);
 }