stylesheet

The stylesheet function creates a named collection of element styles using design tokens. It is returned by defineSystem and is bound to that system's token set.

Signature

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

const styles = stylesheet({
  elementName: {
    // token properties
    bgColor: 'action',
    borderRadius: 'medium',
    // raw CSS escape hatch
    style: { cursor: 'pointer' },
  },
})

Element Definition

Each key in the stylesheet object defines a named element. The value is an object with:

Token properties -- Any token defined in your system (bgColor, textColor, borderRadius, paddingX, etc.). Values are type-checked against the token's allowed values.

style -- An optional escape hatch for raw CSS properties not covered by tokens.

$type -- An optional hint ('view' or 'text') that can influence how tokens are resolved on different platforms.

Multiple Elements

Stylesheets commonly define multiple elements that together describe a component's visual structure:

export const cardStyles = stylesheet({
  card: {
    bgColor: 'elevated',
    borderRadius: 'large',
    borderColor: 'subtle',
    borderWidth: 'thin',
    shadow: 'small',
    padding: 3,
  },
  title: {
    typo: 'heading_3',
    marginBottom: 1,
  },
  body: {
    textColor: 'subtle',
    lineHeight: 1.6,
  },
})

When consumed by useStyles, you get back an object with s.card, s.title, and s.body that can be spread onto the corresponding JSX elements.

Chaining with Variants

Call .variants() on a stylesheet to add conditional styles. See the Variants page for details.

const styles = stylesheet({
  container: { bgColor: 'action' },
}).variants<{ size: 'm' | 's' }>(($) => ({
  [$.size('m')]: { container: { paddingX: 3 } },
  [$.size('s')]: { container: { paddingX: 2 } },
}))

Responsive Styles

Use breakpoint keys prefixed with @ to apply different token values at different screen sizes:

const styles = stylesheet({
  container: {
    paddingX: 2,
    '@md': { paddingX: 4 },
    '@lg': { paddingX: 6 },
  },
})