// --color-{paleta}-{odstín} · 0 (transparent) → 900

Palety

Pět základních palet + nová slate (modro-šedá, base pro roli accent). Škála 100 (nejsvětlejší) → 900 (nejtmavší).

primary (zelená)
primary-100
primary-300
primary (500)
primary-700
primary-900
orange (oranžová) — dřív „secondary"
orange-100
orange-300
orange (500)
orange-700
orange-900
third (modrá / info)
third-100
third-300
third (500)
third-700
third-900
danger (červená)
danger-100
danger-300
danger (500)
danger-700
danger-900
neutral (šedá → navy)
neutral-200
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
slate (modro-šedá) — NOVÁ paleta, base pro accent
slate-50
slate-100
slate-300
slate (500)
slate-700
slate-800
slate-900
// --color-{role} · -hover · -bg · -text

Akční role (sémantické tokeny)

Šest akčních rolí, každá má jednotný kontrakt 4 tokenů: --color-{role} (base), -hover, -bg, -text. Definice na jednom místě v abstracts/_vars.scss. HTML třídy (.skin--, .btn--, …) jsou na stránce Role & skiny.

Role → barva (base · bg · text)
Role Token (base) Mapuje na base bg text
primary--color-primaryprimary 500
success--color-success= primary
danger--color-dangerdanger 500
accent--color-accentslate 800
secondary--color-secondaryneutral 600
light--color-lightslate 300
Stavové role (notifikace, ne akce)
Role Token Mapuje na Ukázka
warning--color-warningorange
info--color-infothird