diff --git a/packages/web/src/scss/components/Accordion/_theme.scss b/packages/web/src/scss/components/Accordion/_theme.scss index 8ea2521445..23687a3073 100644 --- a/packages/web/src/scss/components/Accordion/_theme.scss +++ b/packages/web/src/scss/components/Accordion/_theme.scss @@ -1,17 +1,16 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; -$accordion-item-background-color-default: var(--#{globals.$prefix}color-background-interactive-default); -$accordion-item-background-color-hover: var(--#{globals.$prefix}color-background-interactive-hover); -$accordion-item-background-color-active: var(--#{globals.$prefix}color-background-interactive-active); +$accordion-item-background-color-default: var(--#{global-tokens.$token-prefix}color-background-interactive-default); +$accordion-item-background-color-hover: var(--#{global-tokens.$token-prefix}color-background-interactive-hover); +$accordion-item-background-color-active: var(--#{global-tokens.$token-prefix}color-background-interactive-active); $accordion-header-typography: global-tokens.$body-medium-regular; $accordion-header-typography-active: global-tokens.$body-medium-bold; -$accordion-header-typography-color: var(--#{globals.$prefix}color-text-primary); +$accordion-header-typography-color: var(--#{global-tokens.$token-prefix}color-text-primary); $accordion-header-gap: global-tokens.$space-600; $accordion-header-padding-y: global-tokens.$space-900; $accordion-header-padding-x: global-tokens.$space-700; $accordion-border-radius: global-tokens.$radius-200; -$accordion-divider-color: var(--#{globals.$prefix}color-border-basic); +$accordion-divider-color: var(--#{global-tokens.$token-prefix}color-border-basic); $accordion-divider-width: global-tokens.$border-width-100; $accordion-divider-style: solid; $accordion-content-padding-bottom: global-tokens.$space-700; diff --git a/packages/web/src/scss/components/Alert/_Alert.scss b/packages/web/src/scss/components/Alert/_Alert.scss index 4ba997c0be..268c621cc1 100644 --- a/packages/web/src/scss/components/Alert/_Alert.scss +++ b/packages/web/src/scss/components/Alert/_Alert.scss @@ -1,5 +1,5 @@ @use 'theme'; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../tools/dictionaries'; @use '../../tools/typography'; @@ -12,12 +12,12 @@ justify-content: flex-start; width: 100%; padding: theme.$padding; - color: var(--#{globals.$prefix}alert-color); + color: var(--#{global-tokens.$token-prefix}alert-color); border-width: theme.$border-width; border-style: theme.$border-style; - border-color: var(--#{globals.$prefix}alert-border-color); + border-color: var(--#{global-tokens.$token-prefix}alert-border-color); border-radius: theme.$border-radius; - background-color: var(--#{globals.$prefix}alert-background-color); + background-color: var(--#{global-tokens.$token-prefix}alert-background-color); } .Alert--center { @@ -32,15 +32,15 @@ ); .Alert :where(a) { - color: var(--#{globals.$prefix}alert-color); + color: var(--#{global-tokens.$token-prefix}alert-color); @media (hover: hover) { &:hover { - color: var(--#{globals.$prefix}alert-color); + color: var(--#{global-tokens.$token-prefix}alert-color); } } &:active { - color: var(--#{globals.$prefix}alert-color); + color: var(--#{global-tokens.$token-prefix}alert-color); } } diff --git a/packages/web/src/scss/components/Alert/_theme.scss b/packages/web/src/scss/components/Alert/_theme.scss index f1b9fa56aa..8909efbdf6 100644 --- a/packages/web/src/scss/components/Alert/_theme.scss +++ b/packages/web/src/scss/components/Alert/_theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/dictionaries'; $typography: global-tokens.$body-medium-regular; diff --git a/packages/web/src/scss/components/Breadcrumbs/_theme.scss b/packages/web/src/scss/components/Breadcrumbs/_theme.scss index 02617b7bba..9bfb0b5776 100644 --- a/packages/web/src/scss/components/Breadcrumbs/_theme.scss +++ b/packages/web/src/scss/components/Breadcrumbs/_theme.scss @@ -1,10 +1,9 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; $breakpoints: global-tokens.$breakpoints; $typography: global-tokens.$body-small-regular; -$color: var(--#{globals.$prefix}color-text-secondary); +$color: var(--#{global-tokens.$token-prefix}color-text-secondary); $gap-mobile-up: global-tokens.$space-300; $gap-tablet-up: global-tokens.$space-500; diff --git a/packages/web/src/scss/components/Button/_Button.scss b/packages/web/src/scss/components/Button/_Button.scss index dee8d6a77f..17bfb45438 100644 --- a/packages/web/src/scss/components/Button/_Button.scss +++ b/packages/web/src/scss/components/Button/_Button.scss @@ -2,8 +2,8 @@ @use 'sass:map'; @use 'theme'; +@use '@global-tokens' as global-tokens; @use '../../settings/cursors'; -@use '../../settings/globals'; @use '../../tools/dictionaries'; @use '../../tools/typography'; @@ -11,18 +11,18 @@ display: inline-flex; align-items: center; justify-content: center; - height: var(--#{globals.$prefix}button-height); - padding-inline: var(--#{globals.$prefix}button-padding-x); - padding-block: var(--#{globals.$prefix}button-padding-y); + height: var(--#{global-tokens.$token-prefix}button-height); + padding-inline: var(--#{global-tokens.$token-prefix}button-padding-x); + padding-block: var(--#{global-tokens.$token-prefix}button-padding-y); text-align: center; text-decoration: none; vertical-align: middle; - color: var(--#{globals.$prefix}button-color); + color: var(--#{global-tokens.$token-prefix}button-color); border-width: theme.$border-width; border-style: theme.$border-style; - border-color: var(--#{globals.$prefix}button-border-color); + border-color: var(--#{global-tokens.$token-prefix}button-border-color); border-radius: theme.$border-radius; - background-color: var(--#{globals.$prefix}button-background-color); + background-color: var(--#{global-tokens.$token-prefix}button-background-color); user-select: none; cursor: cursors.$buttons; @@ -30,15 +30,15 @@ &:active, &:focus { text-decoration: none; - color: var(--#{globals.$prefix}button-color); + color: var(--#{global-tokens.$token-prefix}button-color); } &:hover { - background-color: var(--#{globals.$prefix}button-background-color-hover); + background-color: var(--#{global-tokens.$token-prefix}button-background-color-hover); } &:active { - background-color: var(--#{globals.$prefix}button-background-color-active); + background-color: var(--#{global-tokens.$token-prefix}button-background-color-active); } &:disabled, @@ -98,6 +98,6 @@ position: absolute; top: 50%; left: 50%; - color: var(--#{globals.$prefix}button-color); + color: var(--#{global-tokens.$token-prefix}button-color); transform: translate(-50%, -50%); } diff --git a/packages/web/src/scss/components/Button/_theme.scss b/packages/web/src/scss/components/Button/_theme.scss index 3541c98fc6..125c8f91ed 100644 --- a/packages/web/src/scss/components/Button/_theme.scss +++ b/packages/web/src/scss/components/Button/_theme.scss @@ -1,7 +1,6 @@ @use 'sass:list'; @use 'sass:map'; -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../settings/dictionaries'; $typography: global-tokens.$body-small-semibold; @@ -11,9 +10,9 @@ $border-style: solid; $border-radius: global-tokens.$radius-full; $breakpoints: global-tokens.$breakpoints; -$disabled-color: var(--#{globals.$prefix}color-disabled-content); -$disabled-border-color: var(--#{globals.$prefix}color-disabled-border); -$disabled-background-color: var(--#{globals.$prefix}color-disabled-background); +$disabled-color: var(--#{global-tokens.$token-prefix}color-disabled-content); +$disabled-border-color: var(--#{global-tokens.$token-prefix}color-disabled-border); +$disabled-background-color: var(--#{global-tokens.$token-prefix}color-disabled-background); $color-action-button-dictionary: ( action-button: dictionaries.$action-button-colors, diff --git a/packages/web/src/scss/components/Checkbox/_theme.scss b/packages/web/src/scss/components/Checkbox/_theme.scss index c235d2a59c..48e078da27 100644 --- a/packages/web/src/scss/components/Checkbox/_theme.scss +++ b/packages/web/src/scss/components/Checkbox/_theme.scss @@ -1,10 +1,11 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; $input-border-radius: global-tokens.$radius-200; $input-width: 18px; $input-margin: 3px; -$input-checked-mark: var(--#{globals.$prefix}checkbox-input-background-image-url); -$input-checked-mark-disabled: var(--#{globals.$prefix}checkbox-input-disabled-background-image-url); -$input-indeterminate-mark: var(--#{globals.$prefix}checkbox-input-indeterminate-background-image-url); -$input-indeterminate-mark-disabled: var(--#{globals.$prefix}checkbox-input-indeterminate-disabled-background-image-url); +$input-checked-mark: var(--#{global-tokens.$token-prefix}checkbox-input-background-image-url); +$input-checked-mark-disabled: var(--#{global-tokens.$token-prefix}checkbox-input-disabled-background-image-url); +$input-indeterminate-mark: var(--#{global-tokens.$token-prefix}checkbox-input-indeterminate-background-image-url); +$input-indeterminate-mark-disabled: var( + --#{global-tokens.$token-prefix}checkbox-input-indeterminate-disabled-background-image-url +); diff --git a/packages/web/src/scss/components/Collapse/_theme.scss b/packages/web/src/scss/components/Collapse/_theme.scss index c3d43aea16..532c9c6499 100644 --- a/packages/web/src/scss/components/Collapse/_theme.scss +++ b/packages/web/src/scss/components/Collapse/_theme.scss @@ -1,4 +1,4 @@ -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/transitions'; $breakpoints: global-tokens.$breakpoints; diff --git a/packages/web/src/scss/components/Container/_theme.scss b/packages/web/src/scss/components/Container/_theme.scss index b2bc18dad0..aa2af2ef9f 100644 --- a/packages/web/src/scss/components/Container/_theme.scss +++ b/packages/web/src/scss/components/Container/_theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; $container-max-width: global-tokens.$container-max-width; $container-paddings: map.get(global-tokens.$containers, padding); diff --git a/packages/web/src/scss/components/Divider/_theme.scss b/packages/web/src/scss/components/Divider/_theme.scss index 08b6ddf220..b3401fc823 100644 --- a/packages/web/src/scss/components/Divider/_theme.scss +++ b/packages/web/src/scss/components/Divider/_theme.scss @@ -1,6 +1,5 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; $border-width: global-tokens.$border-width-100; $border-style: solid; -$border-color: var(--#{globals.$prefix}color-border-basic); +$border-color: var(--#{global-tokens.$token-prefix}color-border-basic); diff --git a/packages/web/src/scss/components/Dropdown/_theme.scss b/packages/web/src/scss/components/Dropdown/_theme.scss index cc4f284e60..992e4d23b7 100644 --- a/packages/web/src/scss/components/Dropdown/_theme.scss +++ b/packages/web/src/scss/components/Dropdown/_theme.scss @@ -1,11 +1,10 @@ -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/dictionaries'; -@use '../../settings/globals'; $breakpoints: global-tokens.$breakpoints; $offset: global-tokens.$space-500; $padding: global-tokens.$space-700; $border-radius: global-tokens.$radius-300; -$background: var(--#{globals.$prefix}color-background-primary); +$background: var(--#{global-tokens.$token-prefix}color-background-primary); $shadow: global-tokens.$shadow-200; $placement-dictionary: dictionaries.$placement; diff --git a/packages/web/src/scss/components/FieldGroup/_theme.scss b/packages/web/src/scss/components/FieldGroup/_theme.scss index 2b512ff66e..e10a9fd60c 100644 --- a/packages/web/src/scss/components/FieldGroup/_theme.scss +++ b/packages/web/src/scss/components/FieldGroup/_theme.scss @@ -1,3 +1,3 @@ -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; $gap: global-tokens.$space-500; diff --git a/packages/web/src/scss/components/FileUploader/_theme.scss b/packages/web/src/scss/components/FileUploader/_theme.scss index f31334b924..0e550560fd 100644 --- a/packages/web/src/scss/components/FileUploader/_theme.scss +++ b/packages/web/src/scss/components/FileUploader/_theme.scss @@ -1,32 +1,32 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; $input-drop-zone-padding: global-tokens.$space-700; $input-drop-zone-column-gap: global-tokens.$space-700; -$input-drop-zone-border: global-tokens.$border-width-200 solid var(--#{globals.$prefix}color-form-field-border-default); +$input-drop-zone-border: global-tokens.$border-width-200 solid + var(--#{global-tokens.$token-prefix}color-form-field-border-default); $input-drop-zone-draggable-border: global-tokens.$border-width-200 dashed - var(--#{globals.$prefix}color-form-field-border-default); + var(--#{global-tokens.$token-prefix}color-form-field-border-default); $input-drop-zone-dragging-border: global-tokens.$border-width-200 dashed - var(--#{globals.$prefix}color-form-field-border-selected); -$input-drop-zone-border-color-hover: var(--#{globals.$prefix}color-form-field-border-hover); -$input-drop-zone-border-color-active: var(--#{globals.$prefix}color-form-field-border-active); + var(--#{global-tokens.$token-prefix}color-form-field-border-selected); +$input-drop-zone-border-color-hover: var(--#{global-tokens.$token-prefix}color-form-field-border-hover); +$input-drop-zone-border-color-active: var(--#{global-tokens.$token-prefix}color-form-field-border-active); $input-drop-zone-border-radius: global-tokens.$radius-300; -$input-drop-zone-background: var(--#{globals.$prefix}color-background-interactive-default); -$input-drop-zone-background-hover: var(--#{globals.$prefix}color-background-interactive-hover); -$input-drop-zone-background-active: var(--#{globals.$prefix}color-background-interactive-active); +$input-drop-zone-background: var(--#{global-tokens.$token-prefix}color-background-interactive-default); +$input-drop-zone-background-hover: var(--#{global-tokens.$token-prefix}color-background-interactive-hover); +$input-drop-zone-background-active: var(--#{global-tokens.$token-prefix}color-background-interactive-active); $input-drop-zone-label-typography: global-tokens.$body-medium-regular; -$input-drop-zone-label-color: var(--#{globals.$prefix}color-text-primary); -$input-drop-zone-icon-color: var(--#{globals.$prefix}color-action-link-primary-default); +$input-drop-zone-label-color: var(--#{global-tokens.$token-prefix}color-text-primary); +$input-drop-zone-icon-color: var(--#{global-tokens.$token-prefix}color-action-link-primary-default); $list-row-gap: global-tokens.$space-700; $attachment-column-gap: global-tokens.$space-700; $attachment-padding: global-tokens.$space-700; $attachment-typography: global-tokens.$body-medium-semibold; -$attachment-color: var(--#{globals.$prefix}color-text-primary); -$attachment-border: global-tokens.$border-width-100 solid var(--#{globals.$prefix}color-border-basic); +$attachment-color: var(--#{global-tokens.$token-prefix}color-text-primary); +$attachment-border: global-tokens.$border-width-100 solid var(--#{global-tokens.$token-prefix}color-border-basic); $attachment-border-radius: global-tokens.$radius-300; -$attachment-background: var(--#{globals.$prefix}color-background-primary); -$attachment-image-border: global-tokens.$border-width-100 solid var(--#{globals.$prefix}color-border-basic); +$attachment-background: var(--#{global-tokens.$token-prefix}color-background-primary); +$attachment-image-border: global-tokens.$border-width-100 solid var(--#{global-tokens.$token-prefix}color-border-basic); $attachment-image-border-radius: global-tokens.$radius-200; $attachment-tap-target-size: global-tokens.$space-1100; diff --git a/packages/web/src/scss/components/Flex/_theme.scss b/packages/web/src/scss/components/Flex/_theme.scss index 681afce8a8..ad4baa8c27 100644 --- a/packages/web/src/scss/components/Flex/_theme.scss +++ b/packages/web/src/scss/components/Flex/_theme.scss @@ -1,5 +1,5 @@ @use 'sass:list'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/dictionaries'; $alignment-x-dictionary: list.join(dictionaries.$alignments-x-extended, space-between); diff --git a/packages/web/src/scss/components/Grid/_theme.scss b/packages/web/src/scss/components/Grid/_theme.scss index edd5a844e6..e85c3ead5d 100644 --- a/packages/web/src/scss/components/Grid/_theme.scss +++ b/packages/web/src/scss/components/Grid/_theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/dictionaries'; $alignments-x: ( diff --git a/packages/web/src/scss/components/Header/_theme.scss b/packages/web/src/scss/components/Header/_theme.scss index 604006866a..4371bcf04d 100644 --- a/packages/web/src/scss/components/Header/_theme.scss +++ b/packages/web/src/scss/components/Header/_theme.scss @@ -1,5 +1,4 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../settings/transitions'; // Header @@ -7,7 +6,7 @@ $header-typography: global-tokens.$body-medium-semibold; $header-breakpoint: global-tokens.$breakpoint-desktop; $header-padding-x: global-tokens.$space-1000; $header-gap: global-tokens.$space-1200; -$header-background-color: var(--#{globals.$prefix}color-background-primary); +$header-background-color: var(--#{global-tokens.$token-prefix}color-background-primary); // HeaderMobileActions $header-mobile-actions-gap: global-tokens.$space-700; @@ -18,16 +17,16 @@ $header-desktop-actions-gap: global-tokens.$space-900; // HeaderLink $header-link-padding-x: global-tokens.$space-700; $header-link-padding-y: global-tokens.$space-600; -$header-link-color: var(--#{globals.$prefix}color-action-link-primary-default); -$header-link-background-color: var(--#{globals.$prefix}color-background-interactive-default); -$header-link-color-hover: var(--#{globals.$prefix}color-action-link-primary-hover); -$header-link-background-color-hover: var(--#{globals.$prefix}color-background-interactive-hover); -$header-link-color-active: var(--#{globals.$prefix}color-action-link-primary-active); -$header-link-background-color-active: var(--#{globals.$prefix}color-background-interactive-active); -$header-link-color-current: var(--#{globals.$prefix}color-selected-default); -$header-link-background-color-current: var(--#{globals.$prefix}color-background-interactive-active); +$header-link-color: var(--#{global-tokens.$token-prefix}color-action-link-primary-default); +$header-link-background-color: var(--#{global-tokens.$token-prefix}color-background-interactive-default); +$header-link-color-hover: var(--#{global-tokens.$token-prefix}color-action-link-primary-hover); +$header-link-background-color-hover: var(--#{global-tokens.$token-prefix}color-background-interactive-hover); +$header-link-color-active: var(--#{global-tokens.$token-prefix}color-action-link-primary-active); +$header-link-background-color-active: var(--#{global-tokens.$token-prefix}color-background-interactive-active); +$header-link-color-current: var(--#{global-tokens.$token-prefix}color-selected-default); +$header-link-background-color-current: var(--#{global-tokens.$token-prefix}color-background-interactive-active); $header-link-current-border-thickness: global-tokens.$border-width-200; -$header-link-current-border-color: var(--#{globals.$prefix}color-selected-default); +$header-link-current-border-color: var(--#{global-tokens.$token-prefix}color-selected-default); $header-link-transition-duration: transitions.$duration-200; $header-link-transition-timing: transitions.$timing-eased-out; @@ -35,12 +34,12 @@ $header-link-transition-timing: transitions.$timing-eased-out; $header-dialog-typography: global-tokens.$body-medium-semibold; $header-dialog-width: 280px; $header-dialog-padding: global-tokens.$space-900; -$header-dialog-color: var(--#{globals.$prefix}color-text-primary); -$header-dialog-background-color: var(--#{globals.$prefix}color-background-primary); +$header-dialog-color: var(--#{global-tokens.$token-prefix}color-text-primary); +$header-dialog-background-color: var(--#{global-tokens.$token-prefix}color-background-primary); $header-dialog-shadow: global-tokens.$shadow-400; $header-dialog-transition-duration: transitions.$duration-200; $header-dialog-transition-timing: transitions.$timing-eased-in-out; -$header-dialog-backdrop-background-color: var(--#{globals.$prefix}color-background-backdrop); +$header-dialog-backdrop-background-color: var(--#{global-tokens.$token-prefix}color-background-backdrop); // HeaderDialogCloseButton $header-dialog-close-button-size: global-tokens.$space-1200; diff --git a/packages/web/src/scss/components/Item/_theme.scss b/packages/web/src/scss/components/Item/_theme.scss index 90ac9882e1..bacd8249a1 100644 --- a/packages/web/src/scss/components/Item/_theme.scss +++ b/packages/web/src/scss/components/Item/_theme.scss @@ -1,6 +1,5 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; $gap: global-tokens.$space-500; -$icon-color-default: var(--#{globals.$prefix}color-selected-content-basic); -$icon-color-disabled: var(--#{globals.$prefix}color-disabled-content); +$icon-color-default: var(--#{global-tokens.$token-prefix}color-selected-content-basic); +$icon-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-content); diff --git a/packages/web/src/scss/components/Modal/_theme.scss b/packages/web/src/scss/components/Modal/_theme.scss index eb147b664f..011999bae2 100644 --- a/packages/web/src/scss/components/Modal/_theme.scss +++ b/packages/web/src/scss/components/Modal/_theme.scss @@ -1,5 +1,4 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../settings/transitions'; $breakpoints: global-tokens.$breakpoints; @@ -11,7 +10,7 @@ $transition-duration: transitions.$duration-200; $transition-scale-ratio: transitions.$scale-ratio-large-objects; $transition-shift-distance: transitions.$shift-distance-medium; -$backdrop-background-color: var(--#{globals.$prefix}color-background-backdrop); +$backdrop-background-color: var(--#{global-tokens.$token-prefix}color-background-backdrop); $common-padding-x: global-tokens.$space-900; $common-padding-x-tablet: global-tokens.$space-1000; @@ -21,9 +20,9 @@ $dialog-width: 640px; $dialog-width-desktop: 680px; $dialog-height: auto; $dialog-max-height: none; -$dialog-text-color: var(--#{globals.$prefix}color-text-primary); +$dialog-text-color: var(--#{global-tokens.$token-prefix}color-text-primary); $dialog-border-radius: global-tokens.$radius-300; -$dialog-background-color: var(--#{globals.$prefix}color-background-primary); +$dialog-background-color: var(--#{global-tokens.$token-prefix}color-background-primary); $dialog-shadow: global-tokens.$shadow-300; $_dialog-scrollable-default-height: min-content; diff --git a/packages/web/src/scss/components/Pagination/_theme.scss b/packages/web/src/scss/components/Pagination/_theme.scss index a948a31008..aa26947db7 100644 --- a/packages/web/src/scss/components/Pagination/_theme.scss +++ b/packages/web/src/scss/components/Pagination/_theme.scss @@ -1,6 +1,5 @@ @use 'sass:map'; -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; $item-gap: global-tokens.$space-300; $item-min-width: 40px; @@ -11,18 +10,18 @@ $item-border-width: global-tokens.$border-width-100; $item-border-style: solid; $item-border-radius: global-tokens.$radius-full; -$item-default-color: var(--#{globals.$prefix}color-action-button-secondary-content); -$item-default-border-color: var(--#{globals.$prefix}color-action-button-secondary-border); -$item-default-background-color: var(--#{globals.$prefix}color-action-button-secondary-default); +$item-default-color: var(--#{global-tokens.$token-prefix}color-action-button-secondary-content); +$item-default-border-color: var(--#{global-tokens.$token-prefix}color-action-button-secondary-border); +$item-default-background-color: var(--#{global-tokens.$token-prefix}color-action-button-secondary-default); -$item-active-color: var(--#{globals.$prefix}color-action-button-secondary-content); -$item-active-border-color: var(--#{globals.$prefix}color-action-button-secondary-border); -$item-active-background-color: var(--#{globals.$prefix}color-action-button-secondary-active); +$item-active-color: var(--#{global-tokens.$token-prefix}color-action-button-secondary-content); +$item-active-border-color: var(--#{global-tokens.$token-prefix}color-action-button-secondary-border); +$item-active-background-color: var(--#{global-tokens.$token-prefix}color-action-button-secondary-active); -$item-hover-color: var(--#{globals.$prefix}color-action-button-secondary-content); -$item-hover-border-color: var(--#{globals.$prefix}color-action-button-secondary-border); -$item-hover-background-color: var(--#{globals.$prefix}color-action-button-secondary-hover); +$item-hover-color: var(--#{global-tokens.$token-prefix}color-action-button-secondary-content); +$item-hover-border-color: var(--#{global-tokens.$token-prefix}color-action-button-secondary-border); +$item-hover-background-color: var(--#{global-tokens.$token-prefix}color-action-button-secondary-hover); -$item-selected-color: var(--#{globals.$prefix}color-action-button-primary-content); -$item-selected-border-color: var(--#{globals.$prefix}color-action-button-primary-border); -$item-selected-background-color: var(--#{globals.$prefix}color-action-button-primary-default); +$item-selected-color: var(--#{global-tokens.$token-prefix}color-action-button-primary-content); +$item-selected-border-color: var(--#{global-tokens.$token-prefix}color-action-button-primary-border); +$item-selected-background-color: var(--#{global-tokens.$token-prefix}color-action-button-primary-default); diff --git a/packages/web/src/scss/components/PartnerLogo/_PartnerLogo.scss b/packages/web/src/scss/components/PartnerLogo/_PartnerLogo.scss index 342e11f27c..d7bcb4b1af 100644 --- a/packages/web/src/scss/components/PartnerLogo/_PartnerLogo.scss +++ b/packages/web/src/scss/components/PartnerLogo/_PartnerLogo.scss @@ -1,9 +1,9 @@ -@use 'theme' as theme; -@use '../../settings/globals'; +@use 'theme'; +@use '@global-tokens' as global-tokens; @use '../../tools/dictionaries'; .PartnerLogo { - --#{globals.$prefix}partner-logo-padding: 0; + --#{global-tokens.$token-prefix}partner-logo-padding: 0; display: inline-block; max-width: 100%; @@ -15,11 +15,11 @@ .PartnerLogo > img, .PartnerLogo > svg { width: fit-content; - height: var(--#{globals.$prefix}partner-logo-image-height); + height: var(--#{global-tokens.$token-prefix}partner-logo-image-height); } @include dictionaries.generate-sizes($class-name: 'PartnerLogo', $sizes: theme.$sizes); .PartnerLogo--safeArea { - padding: var(--#{globals.$prefix}partner-logo-padding); + padding: var(--#{global-tokens.$token-prefix}partner-logo-padding); } diff --git a/packages/web/src/scss/components/PartnerLogo/_theme.scss b/packages/web/src/scss/components/PartnerLogo/_theme.scss index c74cd76d97..11df2a18ab 100644 --- a/packages/web/src/scss/components/PartnerLogo/_theme.scss +++ b/packages/web/src/scss/components/PartnerLogo/_theme.scss @@ -1,7 +1,6 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; -$background-color: var(--#{globals.$prefix}color-background-primary); +$background-color: var(--#{global-tokens.$token-prefix}color-background-primary); $border-radius: global-tokens.$radius-200; $sizes: ( small: ( diff --git a/packages/web/src/scss/components/Pill/_Pill.scss b/packages/web/src/scss/components/Pill/_Pill.scss index f12da8be33..d691920d45 100644 --- a/packages/web/src/scss/components/Pill/_Pill.scss +++ b/packages/web/src/scss/components/Pill/_Pill.scss @@ -1,5 +1,5 @@ @use 'theme'; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../tools/dictionaries'; @use '../../tools/typography'; @@ -11,9 +11,9 @@ height: 1rem; padding: theme.$padding-y theme.$padding-x; text-align: center; - color: var(--#{globals.$prefix}pill-color); + color: var(--#{global-tokens.$token-prefix}pill-color); border-radius: theme.$border-radius; - background-color: var(--#{globals.$prefix}pill-background-color); + background-color: var(--#{global-tokens.$token-prefix}pill-background-color); } @include dictionaries.generate-colors( diff --git a/packages/web/src/scss/components/Pill/_theme.scss b/packages/web/src/scss/components/Pill/_theme.scss index 15a3d70f67..6f3b57b8c8 100644 --- a/packages/web/src/scss/components/Pill/_theme.scss +++ b/packages/web/src/scss/components/Pill/_theme.scss @@ -1,6 +1,6 @@ @use 'sass:list'; @use 'sass:map'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/dictionaries'; $typography: global-tokens.$body-xsmall-bold; diff --git a/packages/web/src/scss/components/Radio/_theme.scss b/packages/web/src/scss/components/Radio/_theme.scss index a359e66f68..cc3d5f7134 100644 --- a/packages/web/src/scss/components/Radio/_theme.scss +++ b/packages/web/src/scss/components/Radio/_theme.scss @@ -1,4 +1,4 @@ -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/transitions'; @use '../../theme/form-fields' as form-fields-theme; diff --git a/packages/web/src/scss/components/ScrollView/_theme.scss b/packages/web/src/scss/components/ScrollView/_theme.scss index 978d873562..5a4122c362 100644 --- a/packages/web/src/scss/components/ScrollView/_theme.scss +++ b/packages/web/src/scss/components/ScrollView/_theme.scss @@ -1,10 +1,9 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../settings/transitions'; $border-width: global-tokens.$border-width-100; $border-style: solid; -$border-color: var(--#{globals.$prefix}color-border-basic); +$border-color: var(--#{global-tokens.$token-prefix}color-border-basic); $start-shadow-size: global-tokens.$space-700; $start-shadow-initial-offset: -1 * transitions.$shift-distance-medium; diff --git a/packages/web/src/scss/components/Stack/_theme.scss b/packages/web/src/scss/components/Stack/_theme.scss index 9c1b026684..b7ef04ea52 100644 --- a/packages/web/src/scss/components/Stack/_theme.scss +++ b/packages/web/src/scss/components/Stack/_theme.scss @@ -1,6 +1,5 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; $breakpoints: global-tokens.$breakpoints; -$border: global-tokens.$border-width-100 solid var(--#{globals.$prefix}color-border-basic); +$border: global-tokens.$border-width-100 solid var(--#{global-tokens.$token-prefix}color-border-basic); $spacing-fallback: global-tokens.$space-600; diff --git a/packages/web/src/scss/components/Tabs/_theme.scss b/packages/web/src/scss/components/Tabs/_theme.scss index ed7d7d9ac8..020a77b214 100644 --- a/packages/web/src/scss/components/Tabs/_theme.scss +++ b/packages/web/src/scss/components/Tabs/_theme.scss @@ -1,12 +1,11 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; $breakpoints: global-tokens.$breakpoints; $item-padding-x: global-tokens.$space-700; $link-padding-y: global-tokens.$space-500; -$link-color-default: var(--#{globals.$prefix}color-action-link-secondary-default); -$link-color-hover: var(--#{globals.$prefix}color-action-link-secondary-hover); -$link-color-active: var(--#{globals.$prefix}color-action-link-secondary-active); +$link-color-default: var(--#{global-tokens.$token-prefix}color-action-link-secondary-default); +$link-color-hover: var(--#{global-tokens.$token-prefix}color-action-link-secondary-hover); +$link-color-active: var(--#{global-tokens.$token-prefix}color-action-link-secondary-active); $link-color-selected: $link-color-active; $spacing-fallback: global-tokens.$space-900; $item-typography: global-tokens.$body-medium-semibold; diff --git a/packages/web/src/scss/components/Tag/_Tag.scss b/packages/web/src/scss/components/Tag/_Tag.scss index 6ef7982cac..59b3b63d3e 100644 --- a/packages/web/src/scss/components/Tag/_Tag.scss +++ b/packages/web/src/scss/components/Tag/_Tag.scss @@ -1,25 +1,25 @@ @use 'sass:map'; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../tools/dictionaries'; @use '../../tools/typography'; @use 'theme'; .Tag { display: inline-block; - padding-inline: var(--#{globals.$prefix}tag-padding-x); - padding-block: var(--#{globals.$prefix}tag-padding-y); + padding-inline: var(--#{global-tokens.$token-prefix}tag-padding-x); + padding-block: var(--#{global-tokens.$token-prefix}tag-padding-y); text-align: center; - color: var(--#{globals.$prefix}tag-color); + color: var(--#{global-tokens.$token-prefix}tag-color); border-width: theme.$border-width; border-style: theme.$border-style; - border-color: var(--#{globals.$prefix}tag-border-color); + border-color: var(--#{global-tokens.$token-prefix}tag-border-color); border-radius: theme.$border-radius; - background-color: var(--#{globals.$prefix}tag-background-color); + background-color: var(--#{global-tokens.$token-prefix}tag-background-color); } .Tag--subtle { - color: var(--#{globals.$prefix}tag-subtle-color); - background-color: var(--#{globals.$prefix}tag-subtle-background-color); + color: var(--#{global-tokens.$token-prefix}tag-subtle-color); + background-color: var(--#{global-tokens.$token-prefix}tag-subtle-background-color); } @include dictionaries.generate-colors( diff --git a/packages/web/src/scss/components/Tag/_theme.scss b/packages/web/src/scss/components/Tag/_theme.scss index b196b9ca38..3093d8505f 100644 --- a/packages/web/src/scss/components/Tag/_theme.scss +++ b/packages/web/src/scss/components/Tag/_theme.scss @@ -1,5 +1,5 @@ @use 'sass:list'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/dictionaries'; $border-width: global-tokens.$border-width-100; diff --git a/packages/web/src/scss/components/TextField/_theme.scss b/packages/web/src/scss/components/TextField/_theme.scss index 1686280c7e..cc74920ff7 100644 --- a/packages/web/src/scss/components/TextField/_theme.scss +++ b/packages/web/src/scss/components/TextField/_theme.scss @@ -1,5 +1,4 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; $input-number-arrows-width: 1.25rem; $input-password-toggle-padding: global-tokens.$space-500; diff --git a/packages/web/src/scss/components/Toast/_ToastBar.scss b/packages/web/src/scss/components/Toast/_ToastBar.scss index 194a510875..a4fcdf9f46 100644 --- a/packages/web/src/scss/components/Toast/_ToastBar.scss +++ b/packages/web/src/scss/components/Toast/_ToastBar.scss @@ -6,7 +6,7 @@ // 6. Add margin to the action to separate it from the dismiss button. // 7. Invisible items should not take up space in the queue. -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../tools/dictionaries'; @use '../../tools/reset'; @use '../../tools/typography'; @@ -33,9 +33,9 @@ .ToastBar__box { max-width: theme.$bar-max-width; padding: theme.$bar-padding; - color: var(--#{globals.$prefix}toast-bar-color); + color: var(--#{global-tokens.$token-prefix}toast-bar-color); border-radius: theme.$bar-border-radius; - background-color: var(--#{globals.$prefix}toast-bar-background-color); + background-color: var(--#{global-tokens.$token-prefix}toast-bar-background-color); box-shadow: theme.$bar-box-shadow; pointer-events: var(--toast-bar-pointer-events, initial); // 3. diff --git a/packages/web/src/scss/components/Toast/_theme.scss b/packages/web/src/scss/components/Toast/_theme.scss index d2dcc66d72..a09d4746a2 100644 --- a/packages/web/src/scss/components/Toast/_theme.scss +++ b/packages/web/src/scss/components/Toast/_theme.scss @@ -1,5 +1,5 @@ @use 'sass:list'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/dictionaries'; @use '../../settings/transitions'; diff --git a/packages/web/src/scss/components/Tooltip/_theme.scss b/packages/web/src/scss/components/Tooltip/_theme.scss index d43b28e5db..f2cd3cfe9d 100644 --- a/packages/web/src/scss/components/Tooltip/_theme.scss +++ b/packages/web/src/scss/components/Tooltip/_theme.scss @@ -1,6 +1,5 @@ -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/dictionaries'; -@use '../../settings/globals'; @use '../../settings/transitions'; $max-width: 288px; @@ -8,13 +7,13 @@ $typography: global-tokens.$body-medium-regular; $padding: global-tokens.$space-600 global-tokens.$space-700; $gap: global-tokens.$space-600; $border-radius: global-tokens.$radius-300; -$color: var(--#{globals.$prefix}color-neutral-content-subtle); -$background-color: var(--#{globals.$prefix}color-neutral-background-basic); +$color: var(--#{global-tokens.$token-prefix}color-neutral-content-subtle); +$background-color: var(--#{global-tokens.$token-prefix}color-neutral-background-basic); $box-shadow: global-tokens.$shadow-400; $transition-duration: transitions.$duration-200; $transition-scale-ratio: transitions.$scale-ratio-small-objects; -$arrow-shape: var(--#{globals.$prefix}tooltip-arrow-background-image-url); +$arrow-shape: var(--#{global-tokens.$token-prefix}tooltip-arrow-background-image-url); $arrow-width: 13px; $arrow-height: 8px; $arrow-corner-offset: global-tokens.$space-600; diff --git a/packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss b/packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss index d2ad4bd3c6..587c9479bb 100644 --- a/packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss +++ b/packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss @@ -1,4 +1,4 @@ -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; $breakpoints: global-tokens.$breakpoints; $root-gap: global-tokens.$space-700; diff --git a/packages/web/src/scss/components/UNSTABLE_Avatar/_UNSTABLE_Avatar.scss b/packages/web/src/scss/components/UNSTABLE_Avatar/_UNSTABLE_Avatar.scss index 854fe9afcb..1baffaae7d 100644 --- a/packages/web/src/scss/components/UNSTABLE_Avatar/_UNSTABLE_Avatar.scss +++ b/packages/web/src/scss/components/UNSTABLE_Avatar/_UNSTABLE_Avatar.scss @@ -1,13 +1,13 @@ @use 'theme'; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../tools/dictionaries'; .UNSTABLE_Avatar { display: inline-flex; align-items: center; justify-content: center; - width: var(--#{globals.$prefix}avatar-width); - height: var(--#{globals.$prefix}avatar-height); + width: var(--#{global-tokens.$token-prefix}avatar-width); + height: var(--#{global-tokens.$token-prefix}avatar-height); overflow: hidden; text-decoration: none; color: theme.$color; diff --git a/packages/web/src/scss/components/UNSTABLE_Avatar/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Avatar/_theme.scss index 3f5fbf6af7..04f3a6ae82 100644 --- a/packages/web/src/scss/components/UNSTABLE_Avatar/_theme.scss +++ b/packages/web/src/scss/components/UNSTABLE_Avatar/_theme.scss @@ -1,13 +1,12 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; -$color: var(--#{globals.$prefix}color-text-secondary); +$color: var(--#{global-tokens.$token-prefix}color-text-secondary); $border-width: global-tokens.$border-width-100; $border-style: solid; -$border-color: var(--#{globals.$prefix}color-border-basic); +$border-color: var(--#{global-tokens.$token-prefix}color-border-basic); $border-radius: global-tokens.$radius-full; $border-radius-square: global-tokens.$radius-200; -$background-color: var(--#{globals.$prefix}color-background-secondary); +$background-color: var(--#{global-tokens.$token-prefix}color-background-secondary); $sizes: ( xsmall: ( diff --git a/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss b/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss index 3221892e9e..d9b14c4316 100644 --- a/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss +++ b/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss @@ -1,4 +1,4 @@ -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; $breakpoints: global-tokens.$breakpoints; $root-padding: global-tokens.$space-1200 global-tokens.$space-900; diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss index aeb7d567f4..3bd1e74172 100644 --- a/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss +++ b/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss @@ -1,5 +1,4 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../settings/transitions'; $padding: global-tokens.$space-500; @@ -9,31 +8,31 @@ $transition-timing: transitions.$timing-eased-out; $track-height: global-tokens.$space-300; $track-border-radius: global-tokens.$radius-100; -$track-background: var(--#{globals.$prefix}color-border-interactive-default); -$track-background-hover: var(--#{globals.$prefix}color-border-interactive-hover); -$track-background-active: var(--#{globals.$prefix}color-border-interactive-active); -$track-background-disabled: var(--#{globals.$prefix}color-disabled-background); -$track-lower-background: var(--#{globals.$prefix}color-selected-default); -$track-lower-background-hover: var(--#{globals.$prefix}color-selected-default); -$track-lower-background-active: var(--#{globals.$prefix}color-selected-default); -$track-lower-background-disabled: var(--#{globals.$prefix}color-disabled-foreground); +$track-background: var(--#{global-tokens.$token-prefix}color-border-interactive-default); +$track-background-hover: var(--#{global-tokens.$token-prefix}color-border-interactive-hover); +$track-background-active: var(--#{global-tokens.$token-prefix}color-border-interactive-active); +$track-background-disabled: var(--#{global-tokens.$token-prefix}color-disabled-background); +$track-lower-background: var(--#{global-tokens.$token-prefix}color-selected-default); +$track-lower-background-hover: var(--#{global-tokens.$token-prefix}color-selected-default); +$track-lower-background-active: var(--#{global-tokens.$token-prefix}color-selected-default); +$track-lower-background-disabled: var(--#{global-tokens.$token-prefix}color-disabled-foreground); $thumb-width: global-tokens.$space-900; $thumb-height: global-tokens.$space-1100; $thumb-border-width: global-tokens.$border-width-200; $thumb-border-width-disabled: global-tokens.$border-width-100; $thumb-border-style: solid; -$thumb-border-color: var(--#{globals.$prefix}color-form-field-border-default); -$thumb-border-color-hover: var(--#{globals.$prefix}color-form-field-border-hover); -$thumb-border-color-active: var(--#{globals.$prefix}color-selected-default); -$thumb-border-color-disabled: var(--#{globals.$prefix}color-disabled-foreground); +$thumb-border-color: var(--#{global-tokens.$token-prefix}color-form-field-border-default); +$thumb-border-color-hover: var(--#{global-tokens.$token-prefix}color-form-field-border-hover); +$thumb-border-color-active: var(--#{global-tokens.$token-prefix}color-selected-default); +$thumb-border-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-foreground); $thumb-border-radius: global-tokens.$radius-200; -$thumb-background-color: var(--#{globals.$prefix}color-form-field-default); -$thumb-background-color-hover: var(--#{globals.$prefix}color-form-field-hover); -$thumb-background-color-active: var(--#{globals.$prefix}color-form-field-active); -$thumb-background-color-disabled: var(--#{globals.$prefix}color-disabled-background); -$thumb-background-image: var(--#{globals.$prefix}slider-thumb-background-image-url); -$thumb-background-image-disabled: var(--#{globals.$prefix}slider-thumb-disabled-background-image-url); +$thumb-background-color: var(--#{global-tokens.$token-prefix}color-form-field-default); +$thumb-background-color-hover: var(--#{global-tokens.$token-prefix}color-form-field-hover); +$thumb-background-color-active: var(--#{global-tokens.$token-prefix}color-form-field-active); +$thumb-background-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-background); +$thumb-background-image: var(--#{global-tokens.$token-prefix}slider-thumb-background-image-url); +$thumb-background-image-disabled: var(--#{global-tokens.$token-prefix}slider-thumb-disabled-background-image-url); $thumb-background-size: global-tokens.$space-500 global-tokens.$space-700; $thumb-box-shadow: global-tokens.$shadow-100; $thumb-box-shadow-hover: global-tokens.$shadow-100; diff --git a/packages/web/src/scss/components/UNSTABLE_Toggle/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Toggle/_theme.scss index 41137ee9ad..f6a6e46de6 100644 --- a/packages/web/src/scss/components/UNSTABLE_Toggle/_theme.scss +++ b/packages/web/src/scss/components/UNSTABLE_Toggle/_theme.scss @@ -1,19 +1,18 @@ -@use '@global' as global-tokens; -@use '../../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../../settings/transitions'; $max-width: 21rem; $input-width: 44px; $input-height: 24px; $input-border-width: global-tokens.$border-width-100; -$input-border-color: var(--#{globals.$prefix}color-action-toggle-unselected-border); -$input-border-color-checked: var(--#{globals.$prefix}color-action-toggle-selected-border); -$input-border-color-disabled: var(--#{globals.$prefix}color-disabled-border); -$input-background-color: var(--#{globals.$prefix}color-action-toggle-unselected-default); -$input-background-color-hover: var(--#{globals.$prefix}color-action-toggle-unselected-hover); -$input-background-color-checked: var(--#{globals.$prefix}color-action-toggle-selected-default); -$input-background-color-checked-hover: var(--#{globals.$prefix}color-action-toggle-selected-hover); -$input-background-color-disabled: var(--#{globals.$prefix}color-disabled-background); +$input-border-color: var(--#{global-tokens.$token-prefix}color-action-toggle-unselected-border); +$input-border-color-checked: var(--#{global-tokens.$token-prefix}color-action-toggle-selected-border); +$input-border-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-border); +$input-background-color: var(--#{global-tokens.$token-prefix}color-action-toggle-unselected-default); +$input-background-color-hover: var(--#{global-tokens.$token-prefix}color-action-toggle-unselected-hover); +$input-background-color-checked: var(--#{global-tokens.$token-prefix}color-action-toggle-selected-default); +$input-background-color-checked-hover: var(--#{global-tokens.$token-prefix}color-action-toggle-selected-hover); +$input-background-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-background); $input-border-radius: global-tokens.$radius-400; $input-focus-shadow: global-tokens.$focus; @@ -22,12 +21,14 @@ $input-mark-spacing: global-tokens.$space-100; $input-mark-position-x: global-tokens.$space-100; $input-mark-position-y: global-tokens.$space-100; $input-mark-border-radius: global-tokens.$radius-full; -$input-mark-background-color: var(--#{globals.$prefix}color-action-toggle-selected-content); -$input-mark-background-color-disabled: var(--#{globals.$prefix}color-disabled-foreground); -$input-mark-image: var(--#{globals.$prefix}toggle-input-mark-background-image-url); -$input-mark-image-checked: var(--#{globals.$prefix}toggle-input-mark-checked-background-image-url); -$input-mark-image-disabled: var(--#{globals.$prefix}toggle-input-mark-disabled-background-image-url); -$input-mark-image-checked-disabled: var(--#{globals.$prefix}toggle-input-mark-checked-disabled-background-image-url); +$input-mark-background-color: var(--#{global-tokens.$token-prefix}color-action-toggle-selected-content); +$input-mark-background-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-foreground); +$input-mark-image: var(--#{global-tokens.$token-prefix}toggle-input-mark-background-image-url); +$input-mark-image-checked: var(--#{global-tokens.$token-prefix}toggle-input-mark-checked-background-image-url); +$input-mark-image-disabled: var(--#{global-tokens.$token-prefix}toggle-input-mark-disabled-background-image-url); +$input-mark-image-checked-disabled: var( + --#{global-tokens.$token-prefix}toggle-input-mark-checked-disabled-background-image-url +); $input-mark-shadow: global-tokens.$shadow-200; $input-transition-duration: transitions.$duration-100; diff --git a/packages/web/src/scss/foundation/_shared.scss b/packages/web/src/scss/foundation/_shared.scss index 71f6fda001..9bfcd7f5da 100644 --- a/packages/web/src/scss/foundation/_shared.scss +++ b/packages/web/src/scss/foundation/_shared.scss @@ -1,4 +1,4 @@ -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; // Always declare margins in the same direction. :where(address, blockquote, h1, h2, h3, h4, h5, h6, p, pre, dl, ol, ul, figure, hr, table, fieldset):not(:last-child) { diff --git a/packages/web/src/scss/foundation/_tokens.scss b/packages/web/src/scss/foundation/_tokens.scss index 47225fc0bd..1ce5fcf6e3 100644 --- a/packages/web/src/scss/foundation/_tokens.scss +++ b/packages/web/src/scss/foundation/_tokens.scss @@ -1,6 +1,5 @@ @use 'sass:meta'; -@use '@global' as global-tokens; -@use '../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../tools/tokens'; $tokens: ( @@ -21,6 +20,6 @@ $tokens: ( --spirit-border-width-200: #{global-tokens.$border-width-200}; @each $key, $value in $tokens { - @include tokens.generate-css-variables($value, globals.$prefix + $key); + @include tokens.generate-css-variables($map: $value, $prefix: '#{global-tokens.$token-prefix}#{$key}'); } } diff --git a/packages/web/src/scss/foundation/_typography.scss b/packages/web/src/scss/foundation/_typography.scss index 1f35855307..5db0549985 100644 --- a/packages/web/src/scss/foundation/_typography.scss +++ b/packages/web/src/scss/foundation/_typography.scss @@ -1,6 +1,6 @@ // 1. We are able to handle our text sizing ourselves, disable any auto adjustments. -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../tools/typography'; :where(html) { diff --git a/packages/web/src/scss/helpers/breakout/_breakout.scss b/packages/web/src/scss/helpers/breakout/_breakout.scss index 79a5602cbb..d199900c5e 100644 --- a/packages/web/src/scss/helpers/breakout/_breakout.scss +++ b/packages/web/src/scss/helpers/breakout/_breakout.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../tools/breakpoint'; @each $breakpoint-name, $breakpoint-value in global-tokens.$breakpoints { diff --git a/packages/web/src/scss/helpers/links/_links.scss b/packages/web/src/scss/helpers/links/_links.scss index f076ac3b66..9a1f6432ca 100644 --- a/packages/web/src/scss/helpers/links/_links.scss +++ b/packages/web/src/scss/helpers/links/_links.scss @@ -8,10 +8,9 @@ // 8. Disable link underline everywhere. @use 'sass:map'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../settings/cursors'; @use '../../settings/dictionaries' as dictionaries-settings; -@use '../../settings/globals'; @use '../../settings/links' as links-settings; @use '../../tools/dictionaries'; @use '../../tools/links' as links-tools; @@ -41,7 +40,7 @@ // stylelint-disable selector-no-qualifying-type -- Increase specificity to override button variant styles. :is(.link-disabled, button.link-disabled), :is(.link-disabled, button.link-disabled):is(:hover, :focus, :active) { - color: var(--#{globals.$prefix}color-disabled-content); + color: var(--#{global-tokens.$token-prefix}color-disabled-content); cursor: cursors.$disabled; } @@ -58,7 +57,7 @@ // 7. [class*='typography-heading'] :visited { - color: var(--#{globals.$prefix}color-action-link-visited-default); + color: var(--#{global-tokens.$token-prefix}color-action-link-visited-default); } // 8. diff --git a/packages/web/src/scss/helpers/typography/_typography.scss b/packages/web/src/scss/helpers/typography/_typography.scss index 1b38f70c0f..11ec5761aa 100644 --- a/packages/web/src/scss/helpers/typography/_typography.scss +++ b/packages/web/src/scss/helpers/typography/_typography.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../../tools/typography'; @each $style-name, $style-value in global-tokens.$styles { diff --git a/packages/web/src/scss/settings/_globals.scss b/packages/web/src/scss/settings/_globals.scss deleted file mode 100644 index 92f4d59d5e..0000000000 --- a/packages/web/src/scss/settings/_globals.scss +++ /dev/null @@ -1 +0,0 @@ -$prefix: 'spirit-'; diff --git a/packages/web/src/scss/settings/_transitions.scss b/packages/web/src/scss/settings/_transitions.scss index 3027d5e1d3..b12cee78e1 100644 --- a/packages/web/src/scss/settings/_transitions.scss +++ b/packages/web/src/scss/settings/_transitions.scss @@ -1,4 +1,4 @@ -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; $_coefficient: 1; // Tweak this to adjust the duration of all transitions during development. diff --git a/packages/web/src/scss/settings/_utilities.scss b/packages/web/src/scss/settings/_utilities.scss index ad8a17f17a..f9658855bc 100644 --- a/packages/web/src/scss/settings/_utilities.scss +++ b/packages/web/src/scss/settings/_utilities.scss @@ -1,6 +1,5 @@ @use 'sass:map'; -@use '@global' as global-tokens; -@use 'globals'; +@use '@global-tokens' as global-tokens; $utilities: ( 'display': ( @@ -136,9 +135,9 @@ $utilities: ( property: color, class: text, values: ( - primary: var(--#{globals.$prefix}color-text-primary), - secondary: var(--#{globals.$prefix}color-text-secondary), - tertiary: var(--#{globals.$prefix}color-text-tertiary), + primary: var(--#{global-tokens.$token-prefix}color-text-primary), + secondary: var(--#{global-tokens.$token-prefix}color-text-secondary), + tertiary: var(--#{global-tokens.$token-prefix}color-text-tertiary), ), ), 'background-color': ( @@ -146,11 +145,11 @@ $utilities: ( property: background-color, class: bg, values: ( - primary: var(--#{globals.$prefix}color-background-primary), - secondary: var(--#{globals.$prefix}color-background-secondary), - tertiary: var(--#{globals.$prefix}color-background-tertiary), - brand-primary: var(--#{globals.$prefix}color-background-brand-primary), - brand-secondary: var(--#{globals.$prefix}color-background-brand-secondary), + primary: var(--#{global-tokens.$token-prefix}color-background-primary), + secondary: var(--#{global-tokens.$token-prefix}color-background-secondary), + tertiary: var(--#{global-tokens.$token-prefix}color-background-tertiary), + brand-primary: var(--#{global-tokens.$token-prefix}color-background-brand-primary), + brand-secondary: var(--#{global-tokens.$token-prefix}color-background-brand-secondary), ), ), 'border-radius': ( diff --git a/packages/web/src/scss/theme/_form-fields.scss b/packages/web/src/scss/theme/_form-fields.scss index bdc7ee1853..76eaad275c 100644 --- a/packages/web/src/scss/theme/_form-fields.scss +++ b/packages/web/src/scss/theme/_form-fields.scss @@ -1,53 +1,52 @@ -@use '@global' as global-tokens; -@use '../settings/globals'; +@use '@global-tokens' as global-tokens; // Common for all form components $input-typography: global-tokens.$body-medium-regular; -$input-color-disabled: var(--#{globals.$prefix}color-disabled-content); -$input-background-color: var(--#{globals.$prefix}color-form-field-default); -$input-background-color-hover: var(--#{globals.$prefix}color-form-field-hover); -$input-background-color-active: var(--#{globals.$prefix}color-form-field-active); -$input-background-color-disabled: var(--#{globals.$prefix}color-disabled-background); -$input-border-color: var(--#{globals.$prefix}color-form-field-border-default); -$input-border-color-success: var(--#{globals.$prefix}color-form-field-success); -$input-border-color-warning: var(--#{globals.$prefix}color-form-field-warning); -$input-border-color-danger: var(--#{globals.$prefix}color-form-field-danger); -$input-border-color-disabled: var(--#{globals.$prefix}color-disabled-border); +$input-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-content); +$input-background-color: var(--#{global-tokens.$token-prefix}color-form-field-default); +$input-background-color-hover: var(--#{global-tokens.$token-prefix}color-form-field-hover); +$input-background-color-active: var(--#{global-tokens.$token-prefix}color-form-field-active); +$input-background-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-background); +$input-border-color: var(--#{global-tokens.$token-prefix}color-form-field-border-default); +$input-border-color-success: var(--#{global-tokens.$token-prefix}color-form-field-success); +$input-border-color-warning: var(--#{global-tokens.$token-prefix}color-form-field-warning); +$input-border-color-danger: var(--#{global-tokens.$token-prefix}color-form-field-danger); +$input-border-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-border); $input-focus-shadow: global-tokens.$focus; -$label-color-default: var(--#{globals.$prefix}color-form-field-label); -$label-color-disabled: var(--#{globals.$prefix}color-disabled-content); +$label-color-default: var(--#{global-tokens.$token-prefix}color-form-field-label); +$label-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-content); $label-required-typography: global-tokens.$body-small-regular; $label-required-margin-left: global-tokens.$space-200; -$label-required-color: var(--#{globals.$prefix}color-form-field-danger); +$label-required-color: var(--#{global-tokens.$token-prefix}color-form-field-danger); $validation-text-typography: global-tokens.$body-small-semibold; $validation-text-margin-top: global-tokens.$space-400; -$validation-text-color-disabled: var(--#{globals.$prefix}color-disabled-content); -$validation-text-color-success: var(--#{globals.$prefix}color-form-field-success); -$validation-text-color-warning: var(--#{globals.$prefix}color-form-field-warning); -$validation-text-color-danger: var(--#{globals.$prefix}color-form-field-danger); +$validation-text-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-content); +$validation-text-color-success: var(--#{global-tokens.$token-prefix}color-form-field-success); +$validation-text-color-warning: var(--#{global-tokens.$token-prefix}color-form-field-warning); +$validation-text-color-danger: var(--#{global-tokens.$token-prefix}color-form-field-danger); $helper-text-typography: global-tokens.$body-small-regular; $helper-text-margin-top: global-tokens.$space-400; -$helper-text-color-default: var(--#{globals.$prefix}color-form-field-helper-text); -$helper-text-color-disabled: var(--#{globals.$prefix}color-disabled-content); +$helper-text-color-default: var(--#{global-tokens.$token-prefix}color-form-field-helper-text); +$helper-text-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-content); // Inline field form components – Checkbox, Radio, etc. $inline-field-gap: global-tokens.$space-500; $inline-field-margin-y: global-tokens.$space-500; -$inline-field-input-border-color-checked: var(--#{globals.$prefix}color-form-field-border-selected); -$inline-field-input-border-color-checked-disabled: var(--#{globals.$prefix}color-disabled-background); +$inline-field-input-border-color-checked: var(--#{global-tokens.$token-prefix}color-form-field-border-selected); +$inline-field-input-border-color-checked-disabled: var(--#{global-tokens.$token-prefix}color-disabled-background); $inline-field-input-border-width: global-tokens.$border-width-200; -$inline-field-input-background-color-checked: var(--#{globals.$prefix}color-selected-default); +$inline-field-input-background-color-checked: var(--#{global-tokens.$token-prefix}color-selected-default); // Box field form components – TextField, TextArea, etc. -$box-field-input-color-default: var(--#{globals.$prefix}color-form-field-content); +$box-field-input-color-default: var(--#{global-tokens.$token-prefix}color-form-field-content); $box-field-input-border-width: global-tokens.$border-width-100; $box-field-input-border-style: solid; -$box-field-input-border-color-focus: var(--#{globals.$prefix}color-border-focus); +$box-field-input-border-color-focus: var(--#{global-tokens.$token-prefix}color-border-focus); $box-field-input-focus-shadow: global-tokens.$focus; $box-field-input-border-radius: global-tokens.$radius-300; -$box-field-input-placeholder-color-default: var(--#{globals.$prefix}color-form-field-placeholder); -$box-field-input-placeholder-color-disabled: var(--#{globals.$prefix}color-disabled-content); +$box-field-input-placeholder-color-default: var(--#{global-tokens.$token-prefix}color-form-field-placeholder); +$box-field-input-placeholder-color-disabled: var(--#{global-tokens.$token-prefix}color-disabled-content); $box-field-input-padding-x: global-tokens.$space-600; $box-field-input-padding-y: calc(#{global-tokens.$space-500} - #{global-tokens.$border-width-100}); $box-field-input-width: 18rem; @@ -73,9 +72,9 @@ $validation-states: ( $item-padding-x: global-tokens.$space-700; $item-padding-y: global-tokens.$space-500; $item-border-radius: global-tokens.$radius-200; -$item-background-color-default: var(--#{globals.$prefix}color-background-interactive-default); -$item-background-color-hover: var(--#{globals.$prefix}color-background-interactive-hover); -$item-background-color-active: var(--#{globals.$prefix}color-background-interactive-active); +$item-background-color-default: var(--#{global-tokens.$token-prefix}color-background-interactive-default); +$item-background-color-hover: var(--#{global-tokens.$token-prefix}color-background-interactive-hover); +$item-background-color-active: var(--#{global-tokens.$token-prefix}color-background-interactive-active); $item-label-typography: global-tokens.$body-medium-semibold; $item-validation-text-typography: global-tokens.$body-small-semibold; $item-helper-text-typography: global-tokens.$body-small-regular; diff --git a/packages/web/src/scss/tools/__tests__/_themes.test.scss b/packages/web/src/scss/tools/__tests__/_themes.test.scss index 1d8fb4dbab..dd6379841e 100644 --- a/packages/web/src/scss/tools/__tests__/_themes.test.scss +++ b/packages/web/src/scss/tools/__tests__/_themes.test.scss @@ -35,19 +35,19 @@ $test-themes: ( @include test.expect() { :root, - .spirit-theme-light-default { + .theme-light-default { --spirit-color-action-button-active: #fff; } - :where(:root, .spirit-theme-light-default) { + :where(:root, .theme-light-default) { color: var(--spirit-color-text-primary); } - .spirit-theme-light-on-brand { + .theme-light-on-brand { --spirit-color-action-button-active: #000; } - :where(.spirit-theme-light-on-brand) { + :where(.theme-light-on-brand) { color: var(--spirit-color-text-primary); } } diff --git a/packages/web/src/scss/tools/__tests__/_typography.test.scss b/packages/web/src/scss/tools/__tests__/_typography.test.scss index f9f317eb53..317ce507f7 100644 --- a/packages/web/src/scss/tools/__tests__/_typography.test.scss +++ b/packages/web/src/scss/tools/__tests__/_typography.test.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use 'true' as test; @use '../typography'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @include test.describe('generate mixin') { @include test.it('should generate typography styles for a given token and breakpoint') { diff --git a/packages/web/src/scss/tools/_dictionaries.scss b/packages/web/src/scss/tools/_dictionaries.scss index ea4c08a6fd..8c174ed1d8 100644 --- a/packages/web/src/scss/tools/_dictionaries.scss +++ b/packages/web/src/scss/tools/_dictionaries.scss @@ -2,8 +2,7 @@ @use 'sass:map'; @use 'sass:meta'; @use 'sass:string'; -@use '@global' as global-tokens; -@use '../settings/globals'; +@use '@global-tokens' as global-tokens; @use './alignment'; @use './links'; @use './list' as spirit-list; @@ -61,8 +60,8 @@ #{$dictionary-group-name}-#{$dictionary-item-name} ); - --#{globals.$prefix}#{$component-infix}-#{$property-name}: var( - --#{globals.$prefix}color-#{$color-group}-#{$property-value} + --#{global-tokens.$token-prefix}#{$component-infix}-#{$property-name}: var( + --#{global-tokens.$token-prefix}color-#{$color-group}-#{$property-value} ); } } @@ -101,7 +100,9 @@ #{$selector}-#{string.unquote($variant-class)} { color: var( - --#{globals.$prefix}color-action-link-#{string.unquote($dictionary-value)}-#{string.unquote($state)} + --#{global-tokens.$token-prefix}color-action-link-#{string.unquote( + $dictionary-value + )}-#{string.unquote($state)} ); } } @@ -149,7 +150,7 @@ @if $variable-key == 'typography' { @include typography.generate($variable-value); } @else { - --#{globals.$prefix}#{$component-infix}-#{$variable-key}: #{$variable-value}; + --#{global-tokens.$token-prefix}#{$component-infix}-#{$variable-key}: #{$variable-value}; } } } diff --git a/packages/web/src/scss/tools/_links.scss b/packages/web/src/scss/tools/_links.scss index c0f6120bfd..61059fb9fd 100644 --- a/packages/web/src/scss/tools/_links.scss +++ b/packages/web/src/scss/tools/_links.scss @@ -1,5 +1,4 @@ -@use '@global' as global-tokens; -@use '../settings/globals'; +@use '@global-tokens' as global-tokens; @use '../settings/links'; @mixin base($set-color: false) { @@ -7,7 +6,7 @@ text-underline-offset: links.$text-underline-offset; @if $set-color { - color: var(--#{globals.$prefix}color-action-link-primary-default); + color: var(--#{global-tokens.$token-prefix}color-action-link-primary-default); } @media (hover: hover) { @@ -15,7 +14,7 @@ text-decoration: links.$text-decoration-hover; @if $set-color { - color: var(--#{globals.$prefix}color-action-link-primary-hover); + color: var(--#{global-tokens.$token-prefix}color-action-link-primary-hover); } } } @@ -24,7 +23,7 @@ text-decoration: links.$text-decoration-hover; @if $set-color { - color: var(--#{globals.$prefix}color-action-link-primary-active); + color: var(--#{global-tokens.$token-prefix}color-action-link-primary-active); } } } diff --git a/packages/web/src/scss/tools/_themes.scss b/packages/web/src/scss/tools/_themes.scss index 12a79a0705..9834497945 100644 --- a/packages/web/src/scss/tools/_themes.scss +++ b/packages/web/src/scss/tools/_themes.scss @@ -3,7 +3,7 @@ // 2. Set the default text color in each theme. @use 'sass:map'; -@use '../settings/globals'; +@use '@global-tokens' as global-tokens; @use 'string' as string-tools; @use 'svg'; @use 'tokens' as tokens-tools; @@ -32,7 +32,7 @@ // 2. :where(#{$selector}) { - color: var(--#{globals.$prefix}color-text-primary); + color: var(--#{global-tokens.$token-prefix}color-text-primary); } $is-default-theme: false; @@ -41,43 +41,43 @@ @mixin generate-background-image-urls($themed-tokens) { // Checkbox - --#{globals.$prefix}checkbox-input-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}checkbox-input-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; - --#{globals.$prefix}checkbox-input-disabled-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}checkbox-input-disabled-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; - --#{globals.$prefix}checkbox-input-indeterminate-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}checkbox-input-indeterminate-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; - --#{globals.$prefix}checkbox-input-indeterminate-disabled-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}checkbox-input-indeterminate-disabled-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; // Slider - --#{globals.$prefix}slider-thumb-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}slider-thumb-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; - --#{globals.$prefix}slider-thumb-disabled-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}slider-thumb-disabled-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; // Toggle - --#{globals.$prefix}toggle-input-mark-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}toggle-input-mark-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; - --#{globals.$prefix}toggle-input-mark-disabled-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}toggle-input-mark-disabled-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; - --#{globals.$prefix}toggle-input-mark-checked-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}toggle-input-mark-checked-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; - --#{globals.$prefix}toggle-input-mark-checked-disabled-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}toggle-input-mark-checked-disabled-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; // Tooltip - --#{globals.$prefix}tooltip-arrow-background-image-url: #{svg.escape( + --#{global-tokens.$token-prefix}tooltip-arrow-background-image-url: #{svg.escape( url('data:image/svg+xml,') )}; } diff --git a/packages/web/src/scss/tools/_typography.scss b/packages/web/src/scss/tools/_typography.scss index b5f7305a36..25f05d46bc 100644 --- a/packages/web/src/scss/tools/_typography.scss +++ b/packages/web/src/scss/tools/_typography.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use 'sass:string'; @use 'breakpoint'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @mixin generate($token) { @each $breakpoint-name, $breakpoint-value in global-tokens.$breakpoints { diff --git a/packages/web/src/scss/utilities/_utilities.scss b/packages/web/src/scss/utilities/_utilities.scss index 75f9fae8a6..2e9893bccb 100644 --- a/packages/web/src/scss/utilities/_utilities.scss +++ b/packages/web/src/scss/utilities/_utilities.scss @@ -1,6 +1,6 @@ @use 'sass:map'; @use 'sass:meta'; -@use '@global' as global-tokens; +@use '@global-tokens' as global-tokens; @use '../settings/utilities' as utilities-settings; @use '../tools/breakpoint'; @use '../tools/utilities';