These can be both Sass variables and CSS custom properties.
These are exported into the components folder and are suffixed. Variable naming convention follows CTI (Category / Type / Item) structure.
Where the design decisions have filtered into specific component decisions. Design tokens are a tech-agnostic way to store variables. This is actively being working on and your current implementation of design tokens in your projects might need updating. If the design token is vf-background-primary it should not be used for anything other than a background. These design tokens can be use in projects where component design tokens do not exist and must match the semantic use that should be defined in the codified Design Token.Įg.
Design tokens code#
This category of design tokens is where we have chosen how certain design tokens should be used. This involved working with the design team to translate the token system from design tooling to code and then writing the code to transform these design tokens. They tend not to be used as they're codified as we should rely on Design decisions to determine when to use what Design Token value for what purpose and need. These are the generic design tokens for global key and value pairs for colour, spacing, typography, etc. These are then compiled into various Sass files as needed. Developing a complete token system has great help to feature/design iterations and app maintenance. The design tokens are generated from several Yaml files. Design Token is a way to connect design system with UI engineering system seamlessly.
0 kommentar(er)
