Feat: Rename global to global-tokens and remove globals settings

apps/demo/partials/cover.hbs

@@ -1,4 +1,4 @@
-<div class="spirit-theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700 {{#unless (eq page 'components')}}hide-from-visual-tests{{/unless}}">
+<div class="theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700 {{#unless (eq page 'components')}}hide-from-visual-tests{{/unless}}">
   <div class="Container">
 
     <h1

apps/demo/partials/header.hbs

@@ -1,4 +1,4 @@
-<header class="Header spirit-theme-light-on-brand {{#unless (eq page 'components')}}hide-from-visual-tests{{/unless}}">
+<header class="Header theme-light-on-brand {{#unless (eq page 'components')}}hide-from-visual-tests{{/unless}}">
   <a href="/" aria-label="Spirit Development Preview">
     {{> web/assets/spiritLogoInverted }}
   </a>

apps/demo/partials/layout/base.hbs

@@ -42,9 +42,9 @@
         const theme = event.target.value;
 
         themes.forEach((theme) => {
-          targetElement.classList.remove(`spirit-theme-${theme}`);
+          targetElement.classList.remove(`theme-${theme}`);
         });
-        targetElement.classList.add(`spirit-theme-${theme}`);
+        targetElement.classList.add(`theme-${theme}`);
       };
     </script>
 

apps/web-twig-demo/templates/layout/base.html.twig

@@ -44,9 +44,9 @@
         const theme = event.target.value;
 
         themes.forEach((theme) => {
-          targetElement.classList.remove(`spirit-theme-${theme}`);
+          targetElement.classList.remove(`theme-${theme}`);
         });
-        targetElement.classList.add(`spirit-theme-${theme}`);
+        targetElement.classList.add(`theme-${theme}`);
       };
     </script>
 

apps/web-twig-demo/templates/partials/cover.html.twig

@@ -1,4 +1,4 @@
-<div class="spirit-theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700 hide-from-visual-tests">
+<div class="theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700 hide-from-visual-tests">
   <Container>
 
     <h1

apps/web-twig-demo/templates/partials/header.html.twig

@@ -1,4 +1,4 @@
-<Header UNSAFE_className="spirit-theme-light-on-brand hide-from-visual-tests">
+<Header UNSAFE_className="theme-light-on-brand hide-from-visual-tests">
 
   <Link href="http://localhost:3456" aria-label="Spirit Development Preview">
     {% include 'assets/spiritLogoInverted.html.twig' %}

index.html

@@ -2,7 +2,7 @@
 
   {{> header}}
 
-  <div class="spirit-theme-light-on-brand bg-primary text-primary text-center py-1200 py-tablet-1700">
+  <div class="theme-light-on-brand bg-primary text-primary text-center py-1200 py-tablet-1700">
     <div class="Container">
 
       <h1 class="typography-heading-xlarge-bold">

packages/design-tokens/README.md

@@ -25,7 +25,7 @@ They are managed in our [Figma][spirit-figma] and exported to our [Supernova wor
 
 All content in `src` is generated by Supernova and should not be edited manually.
 
-The `scss` directory contains `@global.scss` and `@themes.scss` files linking all available tokens.
+The `scss` directory contains `@global-tokens.scss` and `@themes.scss` files linking all available tokens.
 
 ### Global Tokens
 
@@ -149,7 +149,7 @@ This way the [`spirit-web`][web-docs] package or your own components can simply
 
 ```scss
 @use 'sass:map';
-@use '@global' as global-tokens;
+@use '@global-tokens' as global-tokens;
 
 .MyComponentThatMightGoToSpiritInFuture {
   font-family: map.get(global-tokens.$body-1-regular, font-family);
@@ -160,7 +160,7 @@ This way the [`spirit-web`][web-docs] package or your own components can simply
 For your components you can also load the token files directly:
 
 ```scss
-@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/@global' as global-tokens;
+@use 'node_modules/@lmc-eu/spirit-design-tokens/scss/@global-tokens' as global-tokens;
 ```
 
 As mentioned, all themes contain the same set of tokens, so to use them you need to either
@@ -183,7 +183,7 @@ The structure is the same as in the SASS.
 ## Rebranding Spirit
 
 The system is designed to be easily rebranded. To do so, you need to provide
-your own design tokens and use `@global` and `@themes` files. Then forward your tokens
+your own design tokens and use `@global-tokens` and `@themes` files. Then forward your tokens
 to these files and set the correct load path for your project.
 
 Your tokens should contain the same structure as the Spirit tokens. The simplest
@@ -195,15 +195,15 @@ to your needs. You can also add new tokens required by your design system.
 
 <details>
 <summary>
-Why do I need to rename <code>@global</code> to <code>global-tokens</code> when @using?
+Why do I need to rename <code>@global-tokens</code> to <code>global-tokens</code> when @using?
 </summary>
 
-Because @using the `@global` module without renaming would produce an error:
+Because @using the `@global-tokens` module without renaming would produce an error:
 
 ```log
-Error: Invalid Sass identifier "@global"
+Error: Invalid Sass identifier "@global-tokens"
   ╷
-1 │ @use '@global';
+1 │ @use '@global-tokens';
   │ ^^^^^^^^^^^^^^
 ```
 
@@ -212,18 +212,18 @@ Error: Invalid Sass identifier "@global"
 <details>
 <summary>Why is there the <code>@</code> prefix?</summary>
 
-We prefix the `@global.scss` file with `@` to differentiate it from other Sass
+We prefix the `@global-tokens.scss` file with `@` to differentiate it from other Sass
 files in the directory.
 
 In order for developers to know the file behaves differently than usual Sass
 partials, a `@` prefix is added to mark this behavior both in filesystem and
 inside Sass files. As a result, it's clear why e.g. `@use 'tools'` refers to
-a local file and `@use '@global'` does not. However, **it's only a naming
+a local file and `@use '@global-tokens'` does not. However, **it's only a naming
 convention,** there is no special tooling or configuration for Sass partials
 starting with `@`.
 
 Imported module **needs to be renamed to be compatible with SCSS** syntax
-when it's used later on. That's why `@use '@global' as global-tokens`.
+when it's used later on. That's why `@use '@global-tokens' as global-tokens`.
 
 Look at the following snippets and compare which one offers better
 comprehensibility.
@@ -234,7 +234,7 @@ Without `@` prefix:
 // _Button.scss
 
 @use 'tools'; // Calls './_tools.scss'. You don't have to explain this to me.
-@use 'global'; // Wait, this file doesn't exist… What's going on here? Is it
+@use 'global-tokens'; // Wait, this file doesn't exist… What's going on here? Is it
 // an error?
 ```
 
@@ -244,7 +244,7 @@ With `@` prefix:
 // _Button.scss
 
 @use 'tools'; // Calls './_tools.scss'.
-@use '@global' as global-tokens; // OK, './[email protected]' is not here, but the at-sign
+@use '@global-tokens' as global-tokens; // OK, './[email protected]' is not here, but the at-sign
 // prefix suggests a special behavior. Maybe I'll learn more in the docs?
 ```
 

packages/design-tokens/src/scss/@global-tokens.scss

@@ -0,0 +1 @@
+@forward 'global-tokens';

packages/design-tokens/src/scss/global/_other.scss → packages/design-tokens/src/scss/global-tokens/_other.scss

@@ -15,6 +15,8 @@ $grid-spacing-mobile: 16px !default;
 $grid-spacing-tablet: 32px !default;
 $grid-spacing-desktop: 32px !default;
 
+$token-prefix: 'spirit-' !default;
+
 $containers: (
     max-width: $container-max-width,
     padding: (

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;

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);
     }
 }

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;

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;

packages/web/src/scss/components/Button/_Button.scss

@@ -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,
@@ -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%);
 }

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,

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
+);

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;

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);

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);

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;

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;