From b31d8c0f1a31113e40f5d58d724677093a0bb17e Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Thu, 4 Apr 2024 15:21:40 -0500 Subject: [PATCH] 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) --- .../components/ColorList/ColorList.module.css | 8 +- .../DesignTokens/Tier1/Animation.jsx | 12 +- .../components/DesignTokens/Tier1/Borders.jsx | 9 +- .../components/DesignTokens/Tier1/Layout.jsx | 4 +- .../components/DesignTokens/Tier1/Sizes.jsx | 12 +- .../Guidelines/CodeGuidelines.stories.mdx | 2 +- .storybook/data/tokens.json | 102 ++++++------ .../WireframeDemo/WireframeDemo.module.css | 8 +- .../Accordion/Accordion-v2.module.css | 4 +- src/components/Accordion/Accordion.module.css | 28 ++-- src/components/Avatar/Avatar.module.css | 32 ++-- src/components/Badge/Badge.module.css | 12 +- .../Breadcrumbs/Breadcrumbs.module.css | 6 +- src/components/Button/Button-v2.module.css | 4 +- src/components/Button/Button.module.css | 20 +-- .../ButtonGroup/ButtonGroup.module.css | 2 +- src/components/Card/Card-v2.module.css | 2 +- src/components/Card/Card.module.css | 6 +- src/components/Checkbox/Checkbox.module.css | 2 +- .../ClickableStyle/ClickableStyle.module.css | 20 +-- src/components/FieldNote/FieldNote.module.css | 2 +- src/components/Fieldset/Fieldset.module.css | 6 +- src/components/Grid/Grid.module.css | 12 +- .../HorizontalStepper.module.css | 14 +- src/components/Hr/Hr.module.css | 8 +- .../InlineNotification.module.css | 14 +- src/components/Input/Input.module.css | 2 +- .../InputField/InputField.module.css | 6 +- src/components/Label/Label.module.css | 2 +- src/components/Link/Link.module.css | 20 +-- src/components/Menu/Menu.module.css | 2 +- src/components/Modal/Modal-v2.module.css | 4 +- src/components/Modal/Modal.module.css | 46 +++--- .../NumberIcon/NumberIcon-v2.module.css | 4 +- .../NumberIcon/NumberIcon.module.css | 16 +- .../PageLevelBanner.module.css | 14 +- src/components/Popover/Popover.module.css | 24 +-- .../PopoverContainer.module.css | 2 +- .../PopoverListItem.module.css | 8 +- .../PopoverListItem/PopoverListItem.tsx | 2 +- .../ProgressBar/ProgressBar.module.css | 8 +- src/components/Radio/Radio-v2.module.css | 4 +- src/components/Radio/Radio.module.css | 20 +-- src/components/SearchBar/SearchBar.module.css | 4 +- src/components/Section/Section.module.css | 14 +- src/components/Select/Select-v2.module.css | 10 +- src/components/Select/Select.module.css | 12 +- src/components/Skeleton/Skeleton.module.css | 4 +- src/components/Slider/Slider.module.css | 24 +-- src/components/TabGroup/TabGroup.module.css | 16 +- src/components/Table/Table.module.css | 10 +- src/components/Tabs/Tabs.module.css | 22 +-- src/components/Tag/Tag.module.css | 12 +- src/components/Tag/Tag.stories.module.css | 2 +- .../TextareaField/TextareaField.module.css | 2 +- src/components/Toast/Toast.module.css | 18 +-- src/components/Toggle/Toggle.module.css | 22 +-- src/components/Tooltip/Tooltip-v2.module.css | 2 +- src/components/Tooltip/Tooltip.module.css | 18 +-- src/design-tokens/mixins.css | 26 +-- src/design-tokens/primitives.json | 153 ++++++++++-------- src/tokens-dist/css/variables.css | 78 ++++----- src/tokens-dist/json/variables-nested.json | 102 ++++++------ 63 files changed, 555 insertions(+), 531 deletions(-) diff --git a/.storybook/components/ColorList/ColorList.module.css b/.storybook/components/ColorList/ColorList.module.css index 46345c995..c59ebd692 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) * 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..92d481d8f 100755 --- a/.storybook/components/DesignTokens/Tier1/Animation.jsx +++ b/.storybook/components/DesignTokens/Tier1/Animation.jsx @@ -15,10 +15,10 @@ export class Tier1Animation extends Component { @@ -34,10 +34,10 @@ export class Tier1Animation extends Component { @@ -53,10 +53,10 @@ export class Tier1Animation extends Component { 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 { ); @@ -32,6 +32,7 @@ export class Tier1Borders extends Component {
{filterTokens(`eds-border-radius`).map(function (listItem) { + const unit = listItem.name.indexOf('round') > 0 ? '%' : 'px'; return ( ); diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx index f93e9b36a..b7833bf68 100755 --- a/.storybook/components/DesignTokens/Tier1/Layout.jsx +++ b/.storybook/components/DesignTokens/Tier1/Layout.jsx @@ -15,10 +15,10 @@ export class Tier1Layout extends Component { ); diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx index 46d0e4b0c..98aae2df1 100755 --- a/.storybook/components/DesignTokens/Tier1/Sizes.jsx +++ b/.storybook/components/DesignTokens/Tier1/Sizes.jsx @@ -15,12 +15,12 @@ export class Tier1Sizes extends Component { ))} @@ -35,12 +35,12 @@ export class Tier1Sizes extends Component { ); 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 2810e9230..ae3c78163 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": "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 index 9bc360ac7..68c2776ae 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) * 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 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..7c647570a 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) * 1rem) calc(var(--eds-size-1) * 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) * 1rem) calc(var(--eds-size-1) * 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) * 1rem) calc(var(--eds-size-3) * 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) * 1rem) calc(var(--eds-size-2) * 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) * 1rem); + padding-right: calc(var(--eds-size-3) * 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) * 1rem); + padding-right: calc(var(--eds-size-5) * 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) * 1rem); + padding-right: calc(var(--eds-size-4) * 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..330c9420f 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) * 1rem); + width: calc(var(--eds-size-3) * 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) * 1rem); + width: calc(var(--eds-size-4) * 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) * 1rem); + width: calc(var(--eds-size-5) * 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) * 1rem); + width: calc(var(--eds-size-6) * 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) * 1rem); + width: calc(var(--eds-size-8) * 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) * 1rem); + width: calc(var(--eds-size-12) * 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) * 1rem) * 20); + width: calc(calc(var(--eds-size-base-unit) * 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..ed66983ab 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) * 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) * 1rem); + padding-right: calc(var(--eds-size-half) * 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) * 1rem); padding: 0; } diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.css b/src/components/Breadcrumbs/Breadcrumbs.module.css index 794553694..4cd66af40 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) * 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) * 1rem); + margin-right: calc(var(--eds-size-1) * 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..ef7fb241d 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) * 1rem); + padding: 0 calc(var(--eds-size-1) * 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) * 1rem); + padding: 0 calc(var(--eds-size-1) * 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) * 1rem); + padding: 0 calc(var(--eds-size-2) * 1rem); } /** diff --git a/src/components/ButtonGroup/ButtonGroup.module.css b/src/components/ButtonGroup/ButtonGroup.module.css index 7f24f2649..3003ff8e6 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) * 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..0ee3caed8 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) * 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..062773b9c 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) * 1rem); } .checkbox__input { diff --git a/src/components/ClickableStyle/ClickableStyle.module.css b/src/components/ClickableStyle/ClickableStyle.module.css index e7bdc5271..e0ba82b9a 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 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) * 1rem); + padding: 0 calc(var(--eds-size-1) * 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) * 1rem); + padding: 0 calc(var(--eds-size-1) * 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) * 1rem); + padding: 0 calc(var(--eds-size-2) * 1rem); } /** diff --git a/src/components/FieldNote/FieldNote.module.css b/src/components/FieldNote/FieldNote.module.css index 18e56c2ef..2800fca2b 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) * 1rem); } /** diff --git a/src/components/Fieldset/Fieldset.module.css b/src/components/Fieldset/Fieldset.module.css index 86f06fbe9..d84c7a195 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) * 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) * 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) * 1rem); } /** diff --git a/src/components/Grid/Grid.module.css b/src/components/Grid/Grid.module.css index 503c86206..ee2387be6 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) * 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) * 1rem); + grid-column-gap: calc(var(--eds-size-3) * 1rem); > * { padding: 0; @@ -31,7 +31,7 @@ } .grid--gap-sm { - gap: var(--eds-size-1); + gap: calc(var(--eds-size-1) * 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) * 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) * 1rem); width: 100%; @supports (display: grid) { diff --git a/src/components/HorizontalStepper/HorizontalStepper.module.css b/src/components/HorizontalStepper/HorizontalStepper.module.css index 814f5ba91..bc0f24d36 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) * 1rem); + margin-right: calc(var(--eds-size-1) * 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) * 1rem); } /*------------------------------------*\ @@ -36,7 +36,7 @@ .horizontal-step { display: flex; align-items: center; - gap: var(--eds-size-1); + gap: calc(var(--eds-size-1) * 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) * 1rem); + margin-right: calc(var(--eds-size-1) * 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..efe7a1799 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) * 1rem); + margin-bottom: calc(var(--eds-size-4) * 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..113943cb8 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) * 1rem) calc(var(--eds-size-half) * 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) * 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) * 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..54184acc0 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) * 1rem); } diff --git a/src/components/InputField/InputField.module.css b/src/components/InputField/InputField.module.css index 6eda50209..c9ce56527 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) * 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) * 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) * 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..ba56ae785 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) * 1rem); } /** diff --git a/src/components/Link/Link.module.css b/src/components/Link/Link.module.css index c27530862..f7c81cb57 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 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) * 1rem); + padding: 0 calc(var(--eds-size-1) * 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) * 1rem); + padding: 0 calc(var(--eds-size-1) * 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) * 1rem); + padding: 0 calc(var(--eds-size-2) * 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..073245b7b 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) * 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) * 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) * 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) * 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) * 1rem); + height: calc(var(--eds-size-6) * 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) * 1rem); + right: calc(var(--eds-size-1) * 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) * 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) * 1rem); + padding-bottom: calc(var(--eds-size-2-and-half) * 1rem); padding-left: var(--modal-horizontal-padding); - padding-right: var(--eds-size-3); + padding-right: calc(var(--eds-size-3) * 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) * 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) * 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) * 1rem); + left: calc(var(--eds-size-2) * 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) * 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) * 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..5c564a45b 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) * 1rem); + width: calc(var(--eds-size-2-and-half) * 1rem); + min-width: calc(var(--eds-size-2-and-half) * 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) * 1rem); + width: calc(var(--eds-size-3) * 1rem); + min-width: calc(var(--eds-size-3) * 1rem); } /** diff --git a/src/components/PageLevelBanner/PageLevelBanner.module.css b/src/components/PageLevelBanner/PageLevelBanner.module.css index 66b48b4f2..34cf666b8 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) * 1rem); grid-template-columns: min-content 1fr; - padding: var(--eds-size-2) var(--eds-size-4); + padding: calc(var(--eds-size-2) * 1rem) calc(var(--eds-size-4) * 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) * 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) * 1rem); + right: calc(var(--eds-size-half) * 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) * 1rem); } /*------------------------------------*\ diff --git a/src/components/Popover/Popover.module.css b/src/components/Popover/Popover.module.css index 8b290e7a0..489d38a36 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) * 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) * 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) * 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) * 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) * 1rem); @mixin down-arrow; } :where([data-popper-placement='top-end'] > .popover-content__arrow) { - right: var(--eds-size-2); + right: calc(var(--eds-size-2) * 1rem); @mixin down-arrow; } :where([data-popper-placement='bottom-start'] > .popover-content__arrow) { - left: var(--eds-size-2); + left: calc(var(--eds-size-2) * 1rem); @mixin up-arrow; } :where([data-popper-placement='bottom-end'] > .popover-content__arrow) { - right: var(--eds-size-2); + right: calc(var(--eds-size-2) * 1rem); @mixin up-arrow; } :where([data-popper-placement='right-start'] > .popover-content__arrow) { - top: var(--eds-size-2); + top: calc(var(--eds-size-2) * 1rem); @mixin left-arrow; } :where([data-popper-placement='right-end'] > .popover-content__arrow) { - bottom: var(--eds-size-2); + bottom: calc(var(--eds-size-2) * 1rem); @mixin left-arrow; } :where([data-popper-placement='left-start'] > .popover-content__arrow) { - top: var(--eds-size-2); + top: calc(var(--eds-size-2) * 1rem); @mixin right-arrow; } :where([data-popper-placement='left-end'] > .popover-content__arrow) { - bottom: var(--eds-size-2); + bottom: calc(var(--eds-size-2) * 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..eb2356f17 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) * 1rem) calc(var(--eds-size-2) * 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) * 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) * 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) * 1rem) + calc(var(--eds-size-1-and-half) * 1rem)); } diff --git a/src/components/PopoverListItem/PopoverListItem.tsx b/src/components/PopoverListItem/PopoverListItem.tsx index aee2a830b..d2636191a 100644 --- a/src/components/PopoverListItem/PopoverListItem.tsx +++ b/src/components/PopoverListItem/PopoverListItem.tsx @@ -64,7 +64,7 @@ export const PopoverListItem = React.forwardRef( > {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) * 1rem) */}
) : ( diff --git a/src/components/ProgressBar/ProgressBar.module.css b/src/components/ProgressBar/ProgressBar.module.css index 3e7974438..899ec0179 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) * 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) * 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..5d788a736 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) * 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) * 1rem); /* Set same dimensions as the RadioSvg element. */ - height: var(--eds-size-2); - width: var(--eds-size-2); + height: calc(var(--eds-size-2) * 1rem); + width: calc(var(--eds-size-2) * 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) * 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..549c3b97b 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) * 1rem); } /** @@ -16,7 +16,7 @@ .search-button { padding-top: 1px; padding-bottom: 1px; - height: var(--eds-size-5); + height: calc(var(--eds-size-5) * 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..452448c79 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) * 1rem); + padding-bottom: calc(var(--eds-size-4) * 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) * 1rem); + margin-bottom: calc(var(--eds-size-3) * 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) * 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) * 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) * 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..ae91e1858 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) * 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) * 1rem); width: 100%; - padding: 0 var(--eds-size-2); + padding: 0 calc(var(--eds-size-2) * 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..9a1d26a47 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) * 1rem); } /** @@ -39,7 +39,7 @@ appearance: none; background: transparent; - height: var(--eds-theme-size-slider-thumb); + height: calc(var(--eds-theme-size-slider-thumb) * 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) * 1rem); + border-radius: calc(var(--eds-border-radius-full) * 1px); } /** * Slider Input Track @@ -71,22 +71,22 @@ .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); + border-radius: calc(var(--eds-border-radius-full) * 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) * 1rem); + width: calc(var(--eds-theme-size-slider-thumb) * 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) * 1rem); } .slider__input:not(:disabled)::-webkit-slider-thumb { cursor: grab; @@ -114,8 +114,8 @@ height: var(--eds-theme-size-slider-thumb); width: var(--eds-theme-size-slider-thumb); 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; 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..552da690b 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) * 1rem) calc(var(--eds-size-1) * 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) * 1rem) calc(var(--eds-size-1) * 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) * 1rem) calc(var(--eds-size-1) * 1rem); } /** @@ -45,7 +45,7 @@ * On table header cells that are sortable, the content is wrapped by a