Core tokens builder for Spectrum CSS
This package uses StyleDictionary to build Spectrum core tokens for CSS.
The output is concatenated into a single dist/index.css for use in Spectrum CSS. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens.
On the <html> element, start with .spectrum, add in .spectrum--light, then .spectrum--medium. To switch to Express, add .spectrum--express.
Overrides and additions to core tokens can be added to custom.css.
Ensure that you correctly scope any added tokens:
-
.spectrum- Global, unchanging tokens or tokens specific to the Spectrum flavor -
.spectrum--express- Tokens specific to the Express flavor -
.spectrum--lightest- Tokens specific to the light color stop (soon to be deprecated) -
.spectrum--light- Tokens specific to the light color stop -
.spectrum--dark- Tokens specific to the dark color stop -
.spectrum--darkest- Tokens specific to the darkest color stop -
.spectrum--medium- Tokens specific to the medium (desktop) scale -
.spectrum--large- Tokens specific to the large (mobile) scale -
.spectrum--express.spectrum--*- Tokens specific to the Express flavor for any of the above color stops and scales