The following web format is provided when compiling design tokens for advanced solutions, like CSS-in-JS. It currently supports 2 different targets:
This format is different from other CSS-like formats, and the base JS/TS format, as it does not generate a standard list of variables (design tokens), but instead generates a design system and theme hierarchy composed of classes. This layer is powered by the @aesthetic/system package.
For the remainder of this documentation, we'll use TypeScript as our format.
During compilation, an
index.ts file will be created based on the design system YAML configuration
themes/<name>.ts files will be created for each theme configured in the YAML
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 through an exported
Design class instance. Each theme file defines
color and palette variables through an exported
Theme class instance, while also inheriting all
primitive variables from the parent design system.
The compiled design system file looks something like the following:
While the compiled theme files look loosely like this (removed some repetition for brevity):
Variables can be accessed from both
Theme instances using the
property, which is a multidimensional object.
There are far more advanced ways of utilizing design tokens. We suggest reading the documentation on the design system package itself for more examples.