# Tokens

Die Namen aller Feitio-Werte: woher sie stammen, wie man sie in CSS und TypeScript verwendet und die vollständige Liste.

## Was sie sind

Jeder Feitio-Wert (Farbe, Raum, Typus, Ecke, Dauer) ist ein benannter Token. Niemand schreibt einen Wert von Hand: Sie schreiben den Namen, und der Wert wird aus dem Theme und dem Mode abgerufen.

## Woher sie kommen

-   Die Quelle ist JSON im offenen [DTCG](https://www.designtokens.org/)\-Format, in `tokens/`: `base.tokens.json` für das, was sich nicht mit dem Theme ändert, und eine Datei pro Theme und Mode in `tokens/themes/`.
-   `bun run build` generiert die CSS-Variablen (`css/tokens.css`) und die TypeScript-Namen (`js/tokens.ts`).
-   `bun run check` testet den Kontrast jedes Farbpaares und ob jede Farbe einem gewöhnlichen Bildschirm (sRGB) entspricht.

## Wie man sie verwendet

### CSS

```css
.minha-area {
  padding: var(--feitio-space-5) var(--feitio-space-4);
  border-radius: var(--feitio-radius);
  background: var(--feitio-color-surface-raised);
}
```

### TypeScript

`js/tokens.ts` exportiert jeden Namen mit seiner Variable und den `TokenName`\-Typ: ein falscher Name kompiliert nicht.

```jsx
import { tokens, type TokenName } from '@feitio/core/js/tokens.ts';

const gap: TokenName = 'space.4';
element.style.gap = tokens[gap];   // 'var(--feitio-space-4)'
```

## Basis-Tokens

Gleich in jedem Theme und Mode.

Token

Wert

Gruppe

`--feitio-font-text`

`"Alegreya", "Georgia", serif`

Typ

`--feitio-font-ui`

`"Alegreya Sans", "Gill Sans", sans-serif`

Typ

`--feitio-font-weight-regular`

`400`

Typ

`--feitio-font-weight-medium`

`500`

Typ

`--feitio-font-weight-bold`

`700`

Typ

`--feitio-font-weight-heavy`

`800`

Typ

`--feitio-font-size-small`

`1rem`

Typ

`--feitio-font-size-body`

`1.25rem`

Typ

`--feitio-font-size-h3`

`1.5rem`

Typ

`--feitio-font-size-h2`

`2rem`

Typ

`--feitio-font-size-h1`

`2.75rem`

Typ

`--feitio-font-size-display`

`4rem`

Typ

`--feitio-line-height-text`

`1.6`

Zeilenhöhe

`--feitio-line-height-heading`

`1.08`

Zeilenhöhe

`--feitio-space-1`

`0.25rem`

Raum

`--feitio-space-2`

`0.5rem`

Raum

`--feitio-space-3`

`1rem`

Raum

`--feitio-space-4`

`1.5rem`

Raum

`--feitio-space-5`

`2.5rem`

Raum

`--feitio-space-6`

`4rem`

Raum

`--feitio-space-7`

`6rem`

Raum

`--feitio-measure-reading`

`46rem`

Maßstab

`--feitio-radius-top-left`

`6px`

Ecken

`--feitio-radius-top-right`

`10px`

Ecken

`--feitio-radius-bottom-right`

`6px`

Ecken

`--feitio-radius-bottom-left`

`8px`

Ecken

`--feitio-border-width`

`1px`

Linie

`--feitio-focus-width`

`3px`

Fokus

`--feitio-focus-offset`

`3px`

Fokus

`--feitio-duration-place`

`260ms`

Dauer

`--feitio-duration-change`

`320ms`

Dauer

`--feitio-easing-place`

`cubic-bezier(0.2, 0.9, 0.3, 1.25)`

Verlauf

`--feitio-easing-change`

`cubic-bezier(0.3, 0, 0.2, 1)`

Verlauf

## Darstellung der Farbrollen

Die Werten des Home-Themas tagsüber und nachts. Eine Fassade füllt dieselben Namen mit anderen Werten.

Token

Tag

Nacht

`--feitio-color-surface`

`oklch(96% 0.018 80)`

`oklch(22% 0.016 55)`

`--feitio-color-surface-raised`

`oklch(92.5% 0.026 76)`

`oklch(27.5% 0.02 55)`

`--feitio-color-surface-top`

`oklch(98.5% 0.01 85)`

`oklch(31% 0.022 55)`

`--feitio-color-text`

`oklch(26% 0.022 55)`

`oklch(93% 0.022 80)`

`--feitio-color-text-soft`

`oklch(46% 0.025 55)`

`oklch(76% 0.03 72)`

`--feitio-color-accent`

`oklch(54% 0.165 40)`

`oklch(54% 0.165 40)`

`--feitio-color-accent-strong`

`oklch(50% 0.16 38)`

`oklch(77% 0.15 52)`

`--feitio-color-on-accent`

`oklch(97% 0.015 80)`

`oklch(97% 0.015 80)`

`--feitio-color-line`

`oklch(26% 0.022 55 / 0.15)`

`oklch(93% 0.022 80 / 0.15)`

`--feitio-color-shadow`

`oklch(26% 0.022 55 / 0.9)`

`oklch(12% 0.01 55 / 0.95)`

`--feitio-color-ok`

`oklch(45% 0.09 140)`

`oklch(78% 0.1 140)`

`--feitio-color-ok-surface`

`oklch(91% 0.04 135)`

`oklch(30% 0.04 140)`

`--feitio-color-warn`

`oklch(50% 0.1 85)`

`oklch(83% 0.11 88)`

`--feitio-color-warn-surface`

`oklch(92% 0.06 90)`

`oklch(32% 0.05 85)`

`--feitio-color-error`

`oklch(45% 0.15 15)`

`oklch(76% 0.12 15)`

`--feitio-color-error-surface`

`oklch(91% 0.04 15)`

`oklch(31% 0.06 15)`

## Regeln

-   Kein handgeschriebener Wert, wo ein Token existiert.
-   Ein neuer Token geht in das JSON, nie in den generierten CSS: das Build überschreibt manuelle Änderungen.
-   Eine neue Farbe muss den Kontrasttest bestehen, bevor sie hinzukommt.