TokenAxis

interface · packages/composition/src/appearance/index.ts:44

interface TokenAxis<Slots> {
  readonly tokens: Readonly<Record<string, string>>
  readonly slot: keyof Slots & string
  readonly property: keyof Declarations & string
  readonly breakpoints?: Readonly<Record<string, string>>
}

A choice among a theme's tokens, written as one declaration on one slot: Appearance.token(t.space, { slot: 'root', property: 'gap' }), where t is Theme.ref(theme). The names are the group's keys; a name is stored, its var(...) is drawn. With breakpoints (such as Theme.tokens.breakpoint, smallest first, or the same measured on the page, Theme.inContainer(PAGE_CONTAINER, …)), a node may choose a name per breakpoint: { base: 'sm', md: 'lg' }.

Members

readonly tokens: Readonly<Record<string, string>>

readonly slot: keyof Slots & string

readonly property: keyof Declarations & string

readonly breakpoints?: Readonly<Record<string, string>>