@loadsmart/miranda-tokens

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