Generated types

Systhema generates nine TypeScript aliases during systhema-core sync. They describe your project's color modes, responsive scopes and component variants, plus the fixed aspect-ratio vocabulary.

Importing typesLink to this section

Use type-only imports. The core root re-exports ColorSystem, ResponsiveSizing, LayoutBackground, GapSize, ButtonVariant, CardVariant, AccordionVariant and AspectRatio:

import type { ButtonVariant, ColorSystem, GapSize } from '@systhemaui/core'

All nine aliases, including TypographyColor, are available through the generated subpath:

import type { LayoutBackground, TypographyColor } from '@systhemaui/core/tmp/types'

Type definitionsLink to this section

The full generated list with the default tokens is:

type ColorSystem = 'dark' | 'default'

type ResponsiveSizing = 'lg' | 'md' | 'sm'

type LayoutBackground = 'main' | 'alternative'

type TypographyColor = 'label' | 'heading' | 'body'

type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'

type ButtonVariant = 'primary' | 'secondary'

type CardVariant = 'default' | 'highlighted'

type AccordionVariant = 'default'

type AspectRatio =
  | 'auto'
  | '32/9'
  | '21/9'
  | '21/9-md'
  | '14/3'
  | '5/2'
  | '3/1'
  | '4/1'
  | '2/1'
  | '16/5'
  | '8/3'
  | '16/9'
  | '16/10'
  | '8/5'
  | '5/4'
  | '4/3'
  | '3/2'
  | '1.618/1'
  | '1/1'
  | '9/8'
  | '2/3'
  | '3/4'
  | '4/5'
  | '6/7'
  | '9/16'
  | '10/16'
  | '1/2'
  | '9/21'
  | '1/1.618'

Union order is not significant. AspectRatio is a fixed list in the generator; the other eight aliases come from tokens and customTokens.

How unions are collectedLink to this section

The generator reads JSON under .systhema/artifacts/tokens/ recursively. It finds colorSystem.<mode>.tokens.json and responsiveSizing.<scope>.tokens.json by basename, then adds configuration overrides.

A variant found in one mode or scope enters the union; that does not guarantee the variant has values in every other mode or scope. Add the corresponding token values wherever your UI needs them.

Regenerating typesLink to this section

pnpm systhema-core sync

sync copies token inputs, generates types and the safelist, then refreshes the package cache. For an already populated artifact directory, you can run the type generator on its own:

pnpm systhema-core generate-types

The generator writes .systhema/artifacts/types.ts and types.d.ts with the aliases. types.js is an empty ES module because types have no runtime values. The package's tmp/types import resolves through the artifact mirror in core's dist/tmp/. An install can reset that mirror; run sync before typechecking when it is missing or stale. Never edit the generated files.

The same generator writes .systhema/artifacts/safelist.txt, including token-derived color, background, button, card and accordion classes, configured column spans and React animation/transition classes. The safelist also contains fixed component support classes.

Using types in componentsLink to this section

import { Button, Paragraph } from '@systhemaui/next'
import type { ButtonVariant, TypographyColor } from '@systhemaui/core/tmp/types'

interface ActionProps {
  variant?: ButtonVariant
  color?: TypographyColor
}

export function Action({ variant = 'primary', color = 'body' }: ActionProps) {
  return (
    <Paragraph className={`color-${color}`}>
      <Button.button variant={variant}>Continue</Button.button>
    </Paragraph>
  )
}

RelatedLink to this section

• Generated artifacts
• Custom tokens
• Token collections