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,
            }
        }
    }
})