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)

.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,14 @@ 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' + ` (${listItem.value + 0 / 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);
 }