Skip to content

Commit

Permalink
feat(tokens)!: remove units from design system tokens
Browse files Browse the repository at this point in the history
- 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)
  • Loading branch information
booc0mtaco committed Apr 4, 2024
1 parent a68a255 commit b31d8c0
Show file tree
Hide file tree
Showing 63 changed files with 555 additions and 531 deletions.
8 changes: 4 additions & 4 deletions .storybook/components/ColorList/ColorList.module.css
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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 {
Expand Down
12 changes: 6 additions & 6 deletions .storybook/components/DesignTokens/Tier1/Animation.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -53,10 +53,10 @@ 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}
value={listItem.value + 's'}
variant="animation-fade"
/>
</Grid.Item>
Expand Down
9 changes: 5 additions & 4 deletions .storybook/components/DesignTokens/Tier1/Borders.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions .storybook/components/DesignTokens/Tier1/Layout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
12 changes: 6 additions & 6 deletions .storybook/components/DesignTokens/Tier1/Sizes.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
))}
Expand All @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
102 changes: 51 additions & 51 deletions .storybook/data/tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions .storybook/pages/WireframeDemo/WireframeDemo.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}

/**
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/components/Accordion/Accordion-v2.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Loading

0 comments on commit b31d8c0

Please sign in to comment.