Skip to content

Commit

Permalink
Feat(web): Rename global to global-tokens and remove globals settings
Browse files Browse the repository at this point in the history
  • Loading branch information
crishpeen committed Oct 17, 2024
1 parent 5b64b99 commit aabaf32
Show file tree
Hide file tree
Showing 56 changed files with 260 additions and 280 deletions.
13 changes: 6 additions & 7 deletions packages/web/src/scss/components/Accordion/_theme.scss
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 7 additions & 7 deletions packages/web/src/scss/components/Alert/_Alert.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use 'theme';
@use '../../settings/globals';
@use '@global-tokens' as global-tokens;
@use '../../tools/dictionaries';
@use '../../tools/typography';

Expand All @@ -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 {
Expand All @@ -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);
}
}
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/Alert/_theme.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
5 changes: 2 additions & 3 deletions packages/web/src/scss/components/Breadcrumbs/_theme.scss
Original file line number Diff line number Diff line change
@@ -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;
22 changes: 11 additions & 11 deletions packages/web/src/scss/components/Button/_Button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,43 @@

@use 'sass:map';
@use 'theme';
@use '@global-tokens' as global-tokens;
@use '../../settings/cursors';
@use '../../settings/globals';
@use '../../tools/dictionaries';
@use '../../tools/typography';

.Button {
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;

&:hover,
&: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,
Expand Down Expand Up @@ -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%);
}
9 changes: 4 additions & 5 deletions packages/web/src/scss/components/Button/_theme.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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,
Expand Down
13 changes: 7 additions & 6 deletions packages/web/src/scss/components/Checkbox/_theme.scss
Original file line number Diff line number Diff line change
@@ -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
);
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/Collapse/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use '@global' as global-tokens;
@use '@global-tokens' as global-tokens;
@use '../../settings/transitions';

$breakpoints: global-tokens.$breakpoints;
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/Container/_theme.scss
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
5 changes: 2 additions & 3 deletions packages/web/src/scss/components/Divider/_theme.scss
Original file line number Diff line number Diff line change
@@ -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);
5 changes: 2 additions & 3 deletions packages/web/src/scss/components/Dropdown/_theme.scss
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/FieldGroup/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@use '@global' as global-tokens;
@use '@global-tokens' as global-tokens;

$gap: global-tokens.$space-500;
32 changes: 16 additions & 16 deletions packages/web/src/scss/components/FileUploader/_theme.scss
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/Flex/_theme.scss
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/Grid/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use 'sass:map';
@use '@global' as global-tokens;
@use '@global-tokens' as global-tokens;
@use '../../settings/dictionaries';

$alignments-x: (
Expand Down
29 changes: 14 additions & 15 deletions packages/web/src/scss/components/Header/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
@use '@global' as global-tokens;
@use '../../settings/globals';
@use '@global-tokens' as global-tokens;
@use '../../settings/transitions';

// Header
$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;
Expand All @@ -18,29 +17,29 @@ $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;

// HeaderDialog
$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;
Expand Down
7 changes: 3 additions & 4 deletions packages/web/src/scss/components/Item/_theme.scss
Original file line number Diff line number Diff line change
@@ -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);
9 changes: 4 additions & 5 deletions packages/web/src/scss/components/Modal/_theme.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
Loading

0 comments on commit aabaf32

Please sign in to comment.