-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(design-tokens): Rename global to global-tokens
- Loading branch information
1 parent
0525aab
commit c9eafa1
Showing
11 changed files
with
16 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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? | ||
``` | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
@forward 'global-tokens'; |
This file was deleted.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.