Design tokens
The Design tokens W3C Group describes the Design tokens format as is:
Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across organisations.
Pinceau uses Design tokens as a standard format to describe values in its configuration file.
Most of the examples you may have already seen from the configuration file may seem like a plain key/value object, but here is what it looks like after being normalized:
defineTheme({
media: {
tablet: '(min-width: 768px)',
desktop: '(min-width: 1024px)',
},
color: {
white: '#FFFFFF',
black: '#191919',
primary: '#ED4D31',
secondary: '#4560B0',
tertiary: '#FBEFDE',
},
space: {
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem',
}
})
Why Design tokens ?
Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across organisations.
Pinceau is a tool made to make it easier to implement styling coming from a global theme definition.
Having a standard format to store and expose your design decisions makes it a lot easier for us to build tooling on top of your theme without enforcing a structure for it.
It both enables you to write styling how it pleases you and us to create tooling that is future-proof.
Should I write my tokens with value ?
value ?Most of the time, there should be no need for it.
Reaching for myColor: { value: 'red' } over myColor: 'red' has no impact on outputs.
What it might be useful for is:
- Using other Design tokens attributes for you to consume them later
- Using the $schema key for this specific token
- Creating a sync with tokens generated by tools like Figma Tokens
- You like it better this way 👩🎨