Tokens

The names of every Feitio value: where they come from, how to use them in CSS and TypeScript, and the full list.

What they are

Every Feitio value (color, space, type, corner, duration) is a named token. Nobody writes a value by hand: you write the name, and the value comes from the theme and mode.

Where they come from

• The source is JSON in the open DTCG format, in tokens/: base.tokens.json for what does not change with the theme, and one file per theme and mode in tokens/themes/.
• bun run build generates the CSS variables (css/tokens.css) and the TypeScript names (js/tokens.ts).
• bun run check tests the contrast of every color pair and whether every color fits an ordinary screen (sRGB).

How to use

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 exports every name with its variable, and the TokenName type: a wrong name does not compile.

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

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

The base tokens

The same in every theme and mode.

The color roles

The home theme values, by day and at night. A facade fills the same names with other values.

Rules

• No hand-written value where a token exists.
• A new token goes in the JSON, never in the generated CSS: the build overwrites hand edits.
• A new color goes through the contrast test before it gets in.