tokens.config.ts
The tokens.config.ts file is the central piece of your styling API.
This is the place where you must structure and store all your Design tokens.
Even though it looks like a plain key/value object, defineTheme() content is a living object that provides all the tooling needed for you to create a clean and maintainable theming definition.
If you want to combine two or more tokens configurations, take a look at the Multi layer page.
Your first theme
You can start creating your own theme simply by adding a tokens.config.ts file at the root of your project, here is a sample for it:
import { defineTheme } from 'pinceau'
export default 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'
}
})
In addition to these outputs, Pinceau also creates:
utils.tsthat is used to expose your Utils Properties anywhere you need it-
definitions.tsthat is used by the VSCode extension schema.tsthat will be used by Nuxt Studio to provide a GUI over all your tokens configuration
Tokens references
Inside your configuration, you can use references to already defined tokens.
Let's create a primary color from another color in our configuration.
defineTheme({
primary: '{color.blue.500}',
blue: {
50: '#C5CDE8',
100: '#B6C1E2',
200: '#99A8D7',
300: '#7B8FCB',
400: '#5E77C0',
500: '#4560B0',
600: '#354A88',
700: '#25345F',
800: '#161E37',
900: '#06080F',
},
})
The $dt('color.primary') or '{color.primary}' references will point to var(--color-blue-500).
This is useful when creating some global tokens in your themes that will be overwritten at multiple levels.
Configuration structure
If you have no configuration generated, defineTheme typing will suggest you a structure for your tokens.
Once you start adding some tokens, your scaffolding will become the typing.
You are free to follow the suggestion, or to organize your tokens using any naming you like.
There is only two reserved keys in the configuration:
-
mediais used to define your Media queries -
utilsis used to define your Utils properties
defineTheme typing
The defineTheme function is not only a type-helper!
Its typing will be based on a merged version of all your theming layers.
That gives you an autocompletable object that references all the actual tokens from your project.