The following web format is provided when compiling design tokens to CSS using
CSS variables for
reusability. If you need to support legacy browsers, we suggest the
During compilation, an
index.css file will be created based on the design system YAML
configuration file. Additional
themes/<name>.css files will be created for each theme configured
in the YAML file.
This would look something like the following:
As mentioned above, a design system and multiple theme files are created. The design system file defines primitive variables, while each theme file defines color and palette variables, both of which rely on CSS variables.
The compiled design system file uses
:root and looks something like the following:
While the compiled theme files look loosely like the below (removed some repetition for brevity). Do
note that theme variables are scoped within a class name, not
:root, and as such, cannot be
To activate a design system and theme, link the CSS file within your document to make the CSS variables available.
With this pattern, only 1 design system may be active at a time, as they all rely on
However, multiple themes can be active at a time, as they are scoped by class name. To apply a theme
to the entire document, add the class name to
<body />, while nested themes can be applied to any
If using a bundler like Webpack or Parcel, import the CSS file within the root entry point, or as early as possible.
Since the CSS format is built around variables, we can utilize the
var() function for reusability.
Simply reference the variables listed above like so:
And apply the classes to HTML as normal.