Extend the definition of tokens in your design system, allowing more possibilities for managing your tokens, and for working with them in code.
What are custom token properties?
Custom token properties are extra layers of information about the tokens in your design system, such as statuses, code names, boolean values and links to documentation or other external sources.
These custom properties can be used to:
- Manage and analyze tokens
- Export tokens to various code platforms
- Send additional parameters to code exporters (eg. to use for conditional rendering)
- Display in Supernova documentation
Examples of custom token properties
There are many ways that you can use custom properties. Here are a few examples of how others use custom properties to extend or enrich their design tokens.
|
Name |
Type |
Description |
|---|---|---|
|
Internal token |
Boolean |
Used for tokens that are not supposed to be exported as variables to code. These tokens are created only for easier management of a token set. |
|
CTI structure |
Text |
Used for generating variable names based on CTI structure (Category / Type / Item) as defined in Style Dictionary or any other token naming schema (eg. Mineral UI). |
|
Deprecated |
Boolean |
Used if the token is not supposed to be used anymore in new components, but still needs to exist in the codebase before it's removed completely. |
|
Themeable |
Boolean |
If the token is themeable or not (eg. Salesforce Lightning). |
|
Group |
Text |
Used for structuring design tokens into groups, so it can be used by exporters for generating Sass maps (like in this article by Cristiano Rastelli). |
|
iOS/Android/Web Platform |
Boolean(s) |
Used 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). |
Types of custom properties
The following types of custom properties can be created for a token.
|
Property type |
Description |
|---|---|
|
Text |
A common text value. |
|
Number |
A numeric value. |
|
Boolean |
A true or false value. |
|
Select |
A selection with one or more options. |
|
Code |
A string or code value. |
|
URL |
A link to an external URL. |
|
Documentation link |
A link to a page on your documentation site. |
Default properties
Some properties are shown in token detail by default.
|
Property Name |
Description |
Required? |
|---|---|---|
|
Name |
The name of the token. |
Yes |
|
Value |
The default value of the token. |
Yes |
|
Description |
Description of what the property should be used for. |
Yes |
|
Last edited |
When the token was last edited. |
Yes |
|
Token set |
Name of a set if a token belongs to one (for example, Core) |
No |