Feat(design-tokens): Rename global to global-tokens

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: (