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