Skip to content

Commit 58b4435

Browse files
committed
updated ReadMe file
1 parent 9105fe2 commit 58b4435

File tree

1 file changed

+6
-22
lines changed

1 file changed

+6
-22
lines changed

core/src/foundations/README.md

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,9 @@ Design tokens represent small, repeated design decisions that make up a design s
88

99
## Design Tokens Architecture
1010

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).
1312

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`:
2414

2515
- `ionic.vars.scss` - SCSS variables, based on the native ones, that are used internally on all CSS/SCSS code.
2616
- `ionic.utility.scss` - list of utility classes based on each Design Token.
@@ -50,7 +40,7 @@ Example:
5040
}
5141
```
5242

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`.
5444

5545
Examples:
5646

@@ -66,17 +56,11 @@ Utility class:
6656
.ion-color-primary-100
6757
```
6858

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
7660

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.
7862

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 tokens command, 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.
8064

8165
## How to use
8266

0 commit comments

Comments
 (0)