defineSystem

defineSystem creates a styling system from a set of token definitions and configuration. It is the foundation of every toned-styles project.

Signature

import { defineSystem } from '@toned/core'

const { system, stylesheet, t } = defineSystem(tokens, config)

Parameters

tokens -- An object whose values are token definitions created with defineToken or defineCssToken. Each token describes a semantic property (e.g. bgColor, paddingX) and its allowed values.

config -- System configuration including breakpoints. The base system ships with xs (0), sm (480), md (768), lg (992), and xl (1200).

Return Value

An object with three properties:

system -- The compiled system object. Pass this to the Vite plugin (toned({ system })) or to inject(system) for runtime CSS generation.

stylesheet -- A factory function for creating type-safe stylesheets bound to this system's tokens. Every token property gets full autocompletion.

t -- A utility for creating inline token styles. Useful for one-off styling without defining a full stylesheet.

Example

import { defineSystem } from '@toned/core'
import * as colour from './colour.ts'
import * as border from './border.ts'
import * as layout from './layout.ts'
import * as config from './config.ts'

export const { system, stylesheet, t } = defineSystem(
  {
    ...colour,
    ...border,
    ...layout,
  },
  config,
)

Using the t Utility

The t function lets you apply tokens inline without defining a stylesheet. This is handy for one-off styles:

import { t } from '@toned/systems/base'

function Heading() {
  return <h1 {...t({ typo: 'heading_1' })}>Hello</h1>
}