Extend the definition of tokens in your design system, allowing more possibilities for working with tokens in code
Custom properties are the most useful for storing additional metadata next to design tokens.
Defined custom properties will be:
There are many ways how to use custom properties. Here is a list of a few examples of how others use custom properties for design tokens.
For tokens that are not supposed to be exported as variables to code. These tokens are created only for easier management of our token set. For example, for having tokens in Measures for referencing purposes, but not meant to be used in final code components.
For generating variable names based on CTI structure (Category / Type / Item) as defined in Style Dictionary or any other token naming schema (like in Mineral UI).
If the token is not supposed to be used anymore in new components, but still needs to exist in the codebase before removed completely.
If the token is themeable or not (as seen e.g. Salesforce Lightning).
For structuring design tokens into groups, so it can be used by exporters for generating Sass maps (like in this article by Cristiano Rastelli).
To define which tokens are supposed to be generated for a specific platform and which to ignore (e.g. tokens for responsive breakpoints only for web, nothing else).
A custom property consists of the following structure:
Once a property is defined, everything but the type can be edited.
Custom property type
A common text value; sent to an exporter wrapped in quotes
"key": "text value"
A numeric value; sent to an exporter as a number
A true or false value, sent to an exporter as a boolean
Similar to text, but sent to an exporter like a constant
Custom properties for tokens are applied at the design system level, to all tokens, and can be overridden for each token. You can create, edit and remove custom properties of a design system.
Design system → Settings → Custom properties
Custom properties defined at the design system level can be overridden on any token.
Override custom properties for a token
Reset override to default
This documentation was created using Supernova's fully customizable documentation engine.Start building your docs now!
© 2022 Supernova.io