BREAKING CHANGE(web): Introduce themes and use new design tokens for …

packages/web/src/scss/foundation/_shared.scss

@@ -1,6 +1,6 @@
-@use '@tokens' as tokens;
+@use '@global' 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) {
-    margin-bottom: tokens.$space-600;
+    margin-bottom: global-tokens.$space-700;
 }

packages/web/src/scss/foundation/_tokens.scss

@@ -1,99 +1,60 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 
 :root {
     // Print all token values as CSS variables
     // Borders
-    --spirit-border-style-0: #{tokens.$border-style-0};
-    --spirit-border-style-100: #{tokens.$border-style-100};
-    --spirit-border-style-200: #{tokens.$border-style-200};
-    --spirit-border-width-0: #{tokens.$border-width-0};
-    --spirit-border-width-100: #{tokens.$border-width-100};
-    --spirit-border-width-200: #{tokens.$border-width-200};
-
-    // Colors
-    /// Action colors
-    @each $color-name, $color-value in tokens.$action-colors {
-        --spirit-color-action-#{$color-name}: #{$color-value};
-    }
-
-    /// Background colors
-    @each $color-name, $color-value in tokens.$background-colors {
-        --spirit-color-background-#{$color-name}: #{$color-value};
-    }
-
-    /// Border colors
-    @each $color-name, $color-value in tokens.$border-colors {
-        --spirit-color-border-#{$color-name}: #{$color-value};
-    }
-
-    /// Brand colors
-    @each $color-name, $color-value in tokens.$brand-colors {
-        --spirit-color-brand-#{$color-name}: #{$color-value};
-    }
-
-    /// Emotion
-    @each $color-name, $color-value in tokens.$emotion-colors {
-        --spirit-color-emotion-#{$color-name}: #{$color-value};
-    }
-
-    /// Focus colors
-    @each $color-name, $color-value in tokens.$focus-colors {
-        --spirit-color-focus-#{$color-name}: #{$color-value};
-    }
-
-    /// Text colors
-    @each $color-name, $color-value in tokens.$text-colors {
-        --spirit-color-text-#{$color-name}: #{$color-value};
-    }
+    --spirit-border-width-0: #{global-tokens.$border-width-0};
+    --spirit-border-width-100: #{global-tokens.$border-width-100};
+    --spirit-border-width-200: #{global-tokens.$border-width-200};
 
     // Gradients
-    @each $gradient-name, $gradient-value in tokens.$gradients {
+    @each $gradient-name, $gradient-value in global-tokens.$gradients {
         --spirit-gradient-#{$gradient-name}: #{$gradient-value};
     }
 
-    // Measures
-    @each $space-name, $space-value in tokens.$spaces {
+    // Spacing
+    @each $space-name, $space-value in global-tokens.$spaces {
         --spirit-space-#{$space-name}: #{$space-value};
     }
 
     // Other
     /// Containers
-    @each $container-name, $container-value in tokens.$containers {
+    @each $container-name, $container-value in global-tokens.$containers {
         --spirit-container-#{$container-name}: #{$container-value};
     }
 
     /// Grids
-    @each $grid-name, $grid-value in tokens.$grids {
+    @each $grid-name, $grid-value in global-tokens.$grids {
         --spirit-grid-#{$grid-name}: #{$grid-value};
     }
 
     /// Container paddings
-    @each $container-padding-name, $container-padding-value in tokens.$container-paddings {
+    @each $container-padding-name, $container-padding-value in global-tokens.$container-paddings {
         --spirit-container-padding-#{$container-padding-name}: #{$container-padding-value};
     }
 
-    /// Grid gutters
-    @each $grid-gutter-name, $grid-gutter-value in tokens.$grid-gutters {
-        --spirit-grid-gutter-#{$grid-gutter-name}: #{$grid-gutter-value};
+    /// Grid spacings
+    @each $grid-spacing-name, $grid-spacing-value in global-tokens.$grid-spacings {
+        --spirit-grid-spacing-#{$grid-spacing-name}: #{$grid-spacing-value};
     }
 
     /// Breakpoints
-    @each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
+    @each $breakpoint-name, $breakpoint-value in global-tokens.$breakpoints {
         --spirit-breakpoint-#{$breakpoint-name}: #{$breakpoint-value};
     }
 
     // Radii
-    @each $radius-name, $radius-value in tokens.$radii {
+    @each $radius-name, $radius-value in global-tokens.$radii {
         --spirit-radius-#{$radius-name}: #{$radius-value};
     }
 
     // Shadows
-    @each $shadow-name, $shadow-value in tokens.$shadows {
+    @each $shadow-name, $shadow-value in global-tokens.$shadows {
         --spirit-shadow-#{$shadow-name}: #{$shadow-value};
     }
 
     // Typography
-    @each $style-name, $style-value in tokens.$styles {
+    @each $style-name, $style-value in global-tokens.$styles {
         @each $breakpoint-name, $breakpoint-value in $style-value {
             @each $property-name, $property-value in $breakpoint-value {
                 --spirit-typography-#{$style-name}-#{$breakpoint-name}-#{$property-name}: #{$property-value};

packages/web/src/scss/foundation/_typography.scss

@@ -1,14 +1,20 @@
 // 1. We are able to handle our text sizing ourselves, disable any auto adjustments.
+// 2. We need to apply a global color to all elements in order to make the theme work.
+//    Otherwise, we would have to apply the color to every single element in the project.
 
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../settings/globals';
 @use '../tools/typography';
 
 :where(html) {
     text-size-adjust: none; // 1.
 }
 
 :where(body) {
-    @include typography.generate(tokens.$body-medium-text-regular);
+    @include typography.generate(global-tokens.$body-3-regular);
+}
 
-    color: tokens.$text-primary-default;
+// stylelint-disable-next-line selector-max-universal -- 2.
+* {
+    color: var(--#{globals.$prefix}color-text-primary);
 }

packages/web/src/scss/foundation/index.scss

@@ -1,10 +1,9 @@
-// This code is commented out until we switch it to the new token system
-// @forward '@csstools/normalize.css/normalize.css';
-// @forward 'box-sizing';
-// @forward 'images';
-// @forward 'interactions';
-// @forward 'links';
-// @forward 'reset';
-// @forward 'shared';
-// @forward 'tokens';
-// @forward 'typography';
+@forward '@csstools/normalize.css/normalize.css';
+@forward 'box-sizing';
+@forward 'images';
+@forward 'interactions';
+@forward 'links';
+@forward 'reset';
+@forward 'shared';
+@forward 'tokens';
+@forward 'typography';

packages/web/src/scss/helpers/breakout/_breakout.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../tools/breakpoint';
 
-@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
+@each $breakpoint-name, $breakpoint-value in global-tokens.$breakpoints {
     $suffix: breakpoint.get-modifier('suffix', $breakpoint-name, $breakpoint-value);
 
     @include breakpoint.up($breakpoint-value) {
@@ -17,7 +17,7 @@ $previous-breakpoint: (
     value: 0,
 );
 
-@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
+@each $breakpoint-name, $breakpoint-value in global-tokens.$breakpoints {
     @if map.get($previous-breakpoint, name) != '' {
         @include breakpoint.up(map.get($previous-breakpoint, value)) {
             @include breakpoint.down($breakpoint-value) {

packages/web/src/scss/helpers/index.scss

@@ -1,10 +1,9 @@
-// This code is commented out until we switch it to the new token system
-// @forward 'accessibility';
-// @forward 'animations';
-// @forward 'breakout';
-// @forward 'images';
-// @forward 'links';
-// @forward 'lists';
-// @forward 'scroll-control';
-// @forward 'text';
-// @forward 'typography';
+@forward 'accessibility';
+@forward 'animations';
+@forward 'breakout';
+@forward 'images';
+@forward 'links';
+@forward 'lists';
+@forward 'scroll-control';
+@forward 'text';
+@forward 'typography';

packages/web/src/scss/helpers/links/_links.scss

@@ -8,23 +8,28 @@
 // 8. Disable link underline everywhere.
 
 @use 'sass:map';
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../settings/cursors';
-@use '../../settings/dictionaries' as dictionaries-settings;
+@use '../../settings/globals';
+
+// @use '../../settings/dictionaries' as dictionaries-settings;
 @use '../../settings/links' as links-settings;
-@use '../../tools/dictionaries';
+
+// @use '../../tools/dictionaries';
 @use '../../tools/links' as links-tools;
 
+// TODO
 // 1.
-@include dictionaries.prepare-button-links(dictionaries-settings.$action-link-colors);
+// @include dictionaries.prepare-button-links(dictionaries-settings.$action-link-colors);
 
+// TODO
 // 2.
-@include dictionaries.generate-link-colors(
-    '.link',
-    dictionaries-settings.$action-link-colors,
-    tokens.$action-colors,
-    (default, hover, active, disabled)
-);
+// @include dictionaries.generate-link-colors(
+//    '.link',
+//    dictionaries-settings.$action-link-colors,
+//    tokens.$action-colors,
+//    (default, hover, active, disabled)
+// );
 
 // 3.
 [class*='typography-heading'] a {
@@ -59,16 +64,17 @@ button.link-disabled:not(.link-underlined) {
 
 // 7.
 [class*='typography-heading'] :visited {
-    color: map.get(tokens.$action-colors, link-primary-visited);
+    color: var(--#{globals.$prefix}color-action-link-visited-default);
 }
 
+// TODO
 // 7.
-@include dictionaries.generate-link-colors(
-    '[class*="typography-heading"] .link',
-    dictionaries-settings.$text-colors,
-    tokens.$action-colors,
-    visited
-);
+// @include dictionaries.generate-link-colors(
+//    '[class*="typography-heading"] .link',
+//    dictionaries-settings.$text-colors,
+//    tokens.$action-colors,
+//    visited
+// );
 
 // 8.
 // stylelint-disable selector-no-qualifying-type -- Increase specificity to override button variant styles.

packages/web/src/scss/helpers/typography/_typography.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../tools/typography';
 
-@each $style-name, $style-value in tokens.$styles {
+@each $style-name, $style-value in global-tokens.$styles {
     .typography-#{$style-name} {
         @include typography.generate($style-value);
     }

packages/web/src/scss/index.scss

@@ -1,6 +1,7 @@
 // ⚠️ Order matters!
 // Layers are ordered by specificity, from the most generic rules to components to high-specificity overrides.
 
+@forward 'themes';
 @forward 'foundation';
 @forward 'components';
 @forward 'helpers';

packages/web/src/scss/settings/_dictionaries.scss

@@ -1,5 +1,4 @@
 @use 'sass:list';
-@use '@tokens' as tokens;
 
 $_alignments-x-extended: stretch;
 $_alignments-y-extended: stretch;

packages/web/src/scss/settings/_globals.scss

@@ -0,0 +1 @@
+$prefix: 'spirit-';

packages/web/src/scss/settings/_transitions.scss

@@ -1,4 +1,4 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 
 $_coefficient: 1; // Tweak this to adjust the duration of all transitions during development.
 
@@ -16,4 +16,4 @@ $timing-eased-in-out-fast: cubic-bezier(0.4, 0, 0.2, 1);
 $scale-ratio-small-objects: 0.95;
 $scale-ratio-large-objects: 0.975;
 
-$shift-distance-medium: tokens.$space-600;
+$shift-distance-medium: global-tokens.$space-700;