You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: core/src/foundations/README.md
+6-22Lines changed: 6 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,19 +8,9 @@ Design tokens represent small, repeated design decisions that make up a design s
8
8
9
9
## Design Tokens Architecture
10
10
11
-
The Ionic Design Tokens are stored on `core/src/foundations/tokens`. Here we have the abstract primitive tokens that will be common between all themes.
12
-
Inside the `core/src/foundations/tokens/theme` we have the tokens that are specific to the new IOnic Theme, like primary colors, font-family and color states.
11
+
The Ionic Design Tokens come from the [outsystems-design-tokens repo](https://github.com/OutSystems/outsystems-design-tokens).
13
12
14
-
Currently, six categories of tokens are stored:
15
-
16
-
- Colors
17
-
- Font
18
-
- Scale
19
-
- Border
20
-
- Elevation
21
-
- Z-index
22
-
23
-
Using [Style Dictionary](https://amzn.github.io/style-dictionary/), these tokens generate 2 files inside `core/src/foundations`:
13
+
Using the [outsystems-design-tokens package](https://www.npmjs.com/package/outsystems-design-tokens), we use its npx run build.tokens to pass our configuration file, that will generate 2 files inside `core/src/foundations`:
24
14
25
15
-`ionic.vars.scss` - SCSS variables, based on the native ones, that are used internally on all CSS/SCSS code.
26
16
-`ionic.utility.scss` - list of utility classes based on each Design Token.
@@ -50,7 +40,7 @@ Example:
50
40
}
51
41
```
52
42
53
-
The `tokens.js` script, responsible for generating CSS and SCSS variables along with utility classes, will follow the same nomenclature: `prefix - CSS property name - type variation - modifier name`.
43
+
The `index.js` script, on the scripts/tokens folder, is responsible for generating SCSS variables and utility classes, will follow the same nomenclature: `prefix - CSS property name - type variation - modifier name`.
54
44
55
45
Examples:
56
46
@@ -66,17 +56,11 @@ Utility class:
66
56
.ion-color-primary-100
67
57
```
68
58
69
-
## When to change the Design Tokens
70
-
71
-
It's not expected that the `design-tokens.json` needs to be changed frequently. This represents the base of all the Ionic Design System and any change to the json file should be taken carefully, synced with the UX/UI Team and reviewed by other devs.
72
-
73
-
Adding new tokens is more or less risk free. However, changing values will result in visual breaking changes and renaming tokens might cause the build to be broken.
74
-
75
-
## How to change the Design Tokens
59
+
## Managing the Design Tokens
76
60
77
-
Using `npm run build.tokens` will generate the `ionic.root.scss`, `ionic.vars.scss`, and `ionic.utility.scss` files with the updated values that come from the `design-tokens.json`.
61
+
It's not expected that the Tokens need to be changed frequently. This represents the base of all the Ionic Design System and any change to them should be taken carefully, synced with the UX/UI Team and reviewed by other devs.
78
62
79
-
Design Tokens will also be generated automatically with the `npm run build` command. This ensures that if someone modifies the JSON without running the build tokenscommand, the changes will be applied correctly.
63
+
With the current architecture, this management is done on the [outsystems-design-tokens repo](https://github.com/OutSystems/outsystems-design-tokens) and updated its dependency here when necessary.
0 commit comments