Fundamenty

Wartości, z których zbudowane jest wszystko inne: kolor, krój, odstępy, narożniki, siatka, cienie, ikony i ruch. Każda zadeklarowana raz, w jednym pliku tokenów.

Stan rozdziału:: gotowe

Jedno źródło

Wszystkie wartości w tym rozdziale pochodzą z src/tokens/tokeny.ts. Strona czyta je i pokazuje; żywe przykłady są zbudowane z tych samych tokenów przez zmienne CSS --mp-*. Jeżeli w tabeli stoi 16 px, a przykład ma narożnik 16 px, to dlatego, że obie liczby to jedna liczba.

Każdy token ma pochodzenie: brandbook (wartość stoi w Brandbooku 1.0), z aplikacji (istnieje w kodzie, brandbook o niej milczy) albo propozycja Kanonu (bez niej nie da się zbudować interfejsu, czeka na zatwierdzenie).

Rozdziały

Rozdział	Co zawiera	Aplikacja dziś
Kolor	Paleta z brandbooka, zasady użycia, barwy stanów, tabela kontrastów liczona przy budowaniu.	rozjazd: błękit zamiast fioletu
Typografia	Manrope, wagi, skala z brandbooka i dwa stopnie dodane przez Kanon.	rozjazd: DM Sans
Odstępy, narożniki, siatka	Krok 8 px, wnętrze karty 24 px, karta 16 px, przycisk 10 px, siatka 12 kolumn.	rozjazd: przycisk 8 px
Cienie	Dwa poziomy. Brandbook nie definiuje cieni, więc to propozycja.	rozjazd: cień skeuomorficzny z Untitled UI
Ikonografia	Lucide, rozmiary, zasada „ikona obok słowa”.	zgodne
Ruch	Trzy czasy, jedna krzywa, `prefers-reduced-motion` wyłącza wszystko.	częściowo: przejścia 100 ms liniowe

Jak używać tokenów w kodzie

W Kanonie tokeny wchodzą do strony jako zmienne CSS wypisane z pliku TypeScript. Utility Tailwinda sięgają po nie składnią bg-(--mp-kolor-fiolet), więc nie ma drugiej listy nazw do utrzymania. Aplikacja ma dziś inny mechanizm (@theme w system.css z paletą Untitled UI); przejście na tokeny z brandbooka opisuje strona Kolor.

:root {
  --mp-kolor-fiolet: #6B3FEC;
  --mp-naroznik-przycisk: 10px;
  --mp-odstep-3: 1.5rem;
}

.przycisk-glowny {
  background: var(--mp-kolor-fiolet);
  border-radius: var(--mp-naroznik-przycisk);
  padding-inline: var(--mp-odstep-2);
}