@lowes-tech/bds-tokens v1.0.0
Lowe's Backyard Design Tokens
Welcome to the Lowe's Backyard Design Token generator. These tokens are the source of truth for all Lowe's Digital design properties see below for the token categories included.
This generator will take the YAML files and create variable files for both web and applications depending on platform need.
All platform specific generated tokens are located in the 'dist' directory. You can see all the themes, types and formats that are created in the table below.
Quick Start
- Run
cd packages/bds-tokento enter backyard-tokens directory. - Run
npm installin the backyard-tokens directory.
Available Commands
npm run buildto build all Design Token files.
All Themes created
| Theme | Format(s) |
|---|---|
| android | xml |
| associate | xml |
| backyard | scss, sass, less, json, module.js, common.js, stylus, custom-properties |
| core-platform | scss, sass, less, json, module.js, common.js, stylus, custom-properties |
| dotcom | scss, sass, less, json, module.js, common.js, stylus, custom-properties |
| iOS | json |
| omnia | scss, sass, less, json, module.js, common.js, stylus, custom-properties |
Token Categories Included
- Colors
- Background
- Border
- Icon
- Font
- Shared
- Chart (*Core Platform only)
- Typography
- Font Stack
- Font Weight
- Sizing
- Layout
- Media Queries
- Gutters
- Borders
- Border Width
- Border Radius
- Box Shadow
Encapsulated Theme Note
The encapsulated theme will create itself from both light and dark themes, so that all tokens for both are available with the prefix of 'theme-light' or 'theme-dark'.
Both Associate Theme and Omnia Theme consume this encapsulated theme for their color tokens.
When needing to override a color token in either Associate or Omnia, make sure you override using the correct prop name
theme-light-<color-name>
theme-dark-<color-name>
Output will be:
Android XML: THEME_LIGHT_<color> or THEME_DARK_<color>
WEB SCSS: $theme-light-<color> or $theme-dark-<color>
These prefixes will ONLY be for colors, all other tokens will not have prefixes as they should not change from light to dark themes.