Tokens

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

Auf dieser Seite

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-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

.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.

TypeScript

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.