Theming
Svbstrate accepts an optional theme config that allows you to specify design tokens, as well as other handy things like aliases, variants, and custom properties. Check out the simple example below:
import { createTheme } from '@svbstrate/core';
const theme = createTheme({
breakpoints: [
'400px',
'800px',
'1200px'
],
tokens: {
color: {
primary: '#ff4567',
secondary: '#333',
},
},
aliases: {
c: ['color'],
p: ['padding'],
},
macros: {
cover: {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
},
variants: {
size: {
small: {
p: 20,
},
big: {
p: 40,
}
}
}
})
Last modified 3mo ago