Miranda Tokens
This package uses Style Dictionary under the hood to manage the base tokens, and offers a set of tools built on top of the processed tokens to allow them to be consume from Javascript-based styling.
How tokens are managed
Our tokens are structured inside the src/tokens folder.
- platforms folder contains tokens that are specific to a platform (web or mobile, for example). Notice that, any token overridden for a given plaform must be also overridden for the other supported platforms.
- brands folder contains tokens that are specific to a brand customization. As with the platform tokens, any token overridden for a given brand must be also overridden for the other available brands.
- globals folder contains tokens that apply to the entire Design System. We should also have here the tokens that converge platform of brand-specific ones so when the build runs, the proper tokens set is generated to each platform vs brand combination:
...
tokens
│
|- brands
│ │
│ |-──brand-1
│ │ │
│ │ │ color.js // { brand: { color: { primary: { value: 'red' } } } }
│ │
│ └───brand-2
│ │
│ │ color.js // { brand: { color: { primary: { value: 'green' } } } }
│
|- platforms
│ │
│ |-──platform-1
│ │ │
│ │ │ font.js // { platform: { font: { family: { value: 'Verdana' } } } }
│ │
│ └───platform-2
│ │
│ │ font.js // { platform: { font: { family: { value: 'Roboto' } } } }
│
|- globals
│ │
│ |-color
│ │ │
│ │ │ index.js // { color: { primary: { value'{brand.color.primary.value}' } } }
│ │
│ |-font
│ │
│ │ index.js // { font: { family: { value'{platform.font.family.value}' } } }
│
...
How to add a new token
-
First evaluate if your token should be brand or platform specific:
-
If yes, the new token is brand or platform specific: 1.1. Add the new token under the existing category (font, color, spacing, etc) file, or add a new file to represent the new category in the respective brand or platform folder. 1.2. Likewise, add the equivalent token for the other brands or platforms.
-
If no, the new token is not brand or platform specific: 2.1. Add the token under the existing category under the globals folder
-
After that, to generate the updated base theme, run:
npm run build-tokens
You should see something like this output:
Build started...
Processing canonical theme
web
✔︎ src/themes/base.theme.js
Processing: [web] [loadsmart]
web
✔︎ dist/tokens/web/loadsmart/variables.css
✔︎ dist/tokens/web/loadsmart/variables.scss
✔︎ dist/tokens/web/loadsmart/index.js
End processing