CSS
The following web format is provided when compiling design tokens to CSS using web-css
. It
utilizes
CSS variables for
reusability. If you need to support legacy browsers, we suggest the
css-vars-ponyfill library.
#
File structureDuring 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:
#
VariablesAs 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
polyfilled.
#
IntegrationTo 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 :root
.
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
child element.
If using a bundler like Webpack or Parcel, import the CSS file within the root entry point, or as early as possible.
#
UsageSince 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.