---
title: "Generated types"
description: "Import token-derived TypeScript unions and regenerate them after changing tokens or configuration."
requested_language: fr
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/fr/next/reference/generated-types
version: unreleased (main)
docs_index: https://docs.systhema.app/fr/next/llms.txt
---
> This page isn't translated yet. Showing English.


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 types

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

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

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

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

## Type definitions

The full generated list with the default tokens is:

```ts
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 collected

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.

| Type               | Source                                                                 | Fallback when no values are found |
| ------------------ | ---------------------------------------------------------------------- | --------------------------------- |
| `ColorSystem`      | Color-system filenames plus `customTokens.colorSystem` keys.           | `'default'`                       |
| `ResponsiveSizing` | Responsive-sizing filenames plus `customTokens.responsiveSizing` keys. | `'default'`                       |
| `LayoutBackground` | `layout.bg` keys across color-system files and modes in overrides.     | `'main'`                          |
| `TypographyColor`  | `typography` keys across color-system files and modes in overrides.    | `'label' \| 'heading' \| 'body'`  |
| `GapSize`          | `gap` keys across sizing files and scopes in overrides.                | `'default'`                       |
| `ButtonVariant`    | `button` keys across sizing files and scopes in overrides.             | `'primary'`                       |
| `CardVariant`      | `card` keys across sizing files and scopes in overrides.               | `'default'`                       |
| `AccordionVariant` | `accordion` keys across sizing files and scopes in overrides.          | `'default'`                       |
| `AspectRatio`      | Fixed generator vocabulary.                                            | Same fixed list.                  |

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 types

```bash
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:

```bash
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 components

```tsx
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>
  )
}
```

## Related

- [Generated artifacts](https://docs.systhema.app/fr/next/concepts/generated-artifacts.md)
- [Custom tokens](https://docs.systhema.app/fr/next/design/custom-tokens.md)
- [Token collections](https://docs.systhema.app/fr/next/design/token-collections.md)