Všechny tokeny na jednom místě — hodnota ve světlém i tmavém motivu a spočítaný kontrast.
Tabulka je postavená z toho samého souboru, ze kterého se generuje stylopis i preset pro Tailwind. Nemůže tedy popisovat paletu, kterou produkt nemá — a kontrast se počítá, ne opisuje: číslo napsané rukou platí jen v den, kdy bylo napsáno.
Kontrast se počítá proti světlému motivu. 4,5 je práh pro běžný text, 3 pro velký text a rozhraní. Tokeny inkoustu mají projít na obou plochách; tokeny linek jen na té, na které se kreslí.
| Token | Světlý | Tmavý | Kontrast na --bg | Kontrast na --surface |
|---|---|---|---|---|
--bg | #f1f0ed | #0b0a09 | 1.00plocha | 1.14plocha |
--surface | #ffffff | #2e2b27 | 1.14plocha | 1.00plocha |
--surface-2 | #f4f3f0 | #3e3934 | 1.03plocha | 1.11plocha |
--surface-3 | #e6e4df | #4e473f | 1.11plocha | 1.27plocha |
--border | #ddd9d3 | #665d53 | 1.23dekorace | 1.41dekorace |
--border-strong | #8d8a84 | #8f8376 | 3.02obrys 3 ✓ | 3.44obrys 3 ✓ |
--ink | #0c0a09 | #fffefd | 17.34text 4,5 ✓ | 19.76text 4,5 ✓ |
--ink-2 | #3f3b37 | #eeeae3 | 9.74text 4,5 ✓ | 11.10text 4,5 ✓ |
--ink-3 | #57534e | #cbc3b7 | 6.69text 4,5 ✓ | 7.63text 4,5 ✓ |
--ink-4 | #696460 | #aba398 | 5.13text 4,5 ✓ | 5.85text 4,5 ✓ |
--ink-5 | #d6d3d1 | #605c57 | 1.31dekorace | 1.49dekorace |
--blue-accent | #2563eb | #5192f7 | 4.54text 4,5 ✓ | 5.17text 4,5 ✓ |
--blue-accent-ink | #1d4ed8 | #bfdbfe | 5.88text 4,5 ✓ | 6.70text 4,5 ✓ |
--blue-accent-bg | #eff6ff | #0f1b30 | 1.05plocha | 1.09plocha |
--blue-accent-border | #bfdbfe | #1e3a8a | 1.25dekorace | 1.42dekorace |
--accent | var(--blue-accent) | var(--blue-accent) | — | — |
--accent-ink | var(--blue-accent-ink) | var(--blue-accent-ink) | — | — |
--accent-bg | var(--blue-accent-bg) | var(--blue-accent-bg) | — | — |
--accent-border | var(--blue-accent-border) | var(--blue-accent-border) | — | — |
--ok | #047454 | #22c55e | 5.07text 4,5 ✓ | 5.78text 4,5 ✓ |
--ok-bg | #eaf7ee | #0a2013 | 1.03plocha | 1.10plocha |
--ok-border | #a7dfba | #166534 | 1.33dekorace | 1.51dekorace |
--warn | #b05109 | #f59e0b | 4.58text 4,5 ✓ | 5.21text 4,5 ✓ |
--warn-bg | #fffbeb | #2a1e07 | 1.10plocha | 1.04plocha |
--warn-border | #fde68a | #92400e | 1.09dekorace | 1.25dekorace |
--danger | #b91c1c | #f36464 | 5.68text 4,5 ✓ | 6.47text 4,5 ✓ |
--danger-bg | #fef2f2 | #2a1010 | 1.04plocha | 1.09plocha |
--danger-border | #fecaca | #991b1b | 1.27dekorace | 1.45dekorace |
--custom | #6d28d9 | #ae94fa | 6.23text 4,5 ✓ | 7.10text 4,5 ✓ |
--custom-bg | #f5f3ff | #1e1533 | 1.04plocha | 1.10plocha |
--custom-border | #ddd6fe | #6d28d9 | 1.22dekorace | 1.39dekorace |
--plan | #faf5ff | #faf5ff | 1.06plocha | 1.07plocha |
--plan-bg | #6b21a8 | #9333ea | 7.65plocha | 8.72plocha |
--plan-border | #7e22ce | #a855f7 | 6.13dekorace | 6.98dekorace |
--code-comment | #696460 | #aba398 | 5.13text 4,5 ✓ | 5.85text 4,5 ✓ |
--code-keyword | #6d28d9 | #c4aefc | 6.23text 4,5 ✓ | 7.10text 4,5 ✓ |
--code-string | #047454 | #5ddb99 | 5.07text 4,5 ✓ | 5.78text 4,5 ✓ |
--code-tag | #2563eb | #7ab0fa | 4.54text 4,5 ✓ | 5.17text 4,5 ✓ |
--code-attr | #b05109 | #f5b74a | 4.58text 4,5 ✓ | 5.21text 4,5 ✓ |
--code-number | #b91c1c | #f79a9a | 5.68text 4,5 ✓ | 6.47text 4,5 ✓ |
--code-punct | #57534e | #cbc3b7 | 6.69text 4,5 ✓ | 7.63text 4,5 ✓ |
--s-1 | 4px | 4px | — | — |
--s-2 | 8px | 8px | — | — |
--s-3 | 12px | 12px | — | — |
--s-4 | 16px | 16px | — | — |
--s-5 | 24px | 24px | — | — |
--s-6 | 32px | 32px | — | — |
--s-7 | 48px | 48px | — | — |
--s-8 | 72px | 72px | — | — |
--r-xs | 4px | 4px | — | — |
--r-sm | 6px | 6px | — | — |
--r-md | 10px | 10px | — | — |
--r-lg | 14px | 14px | — | — |
--font-sans | "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | — | — |
--font-mono | "Geist Mono", ui-monospace, Menlo, Consolas, monospace | "Geist Mono", ui-monospace, Menlo, Consolas, monospace | — | — |
--motion-ease | cubic-bezier(0.2, 0.6, 0.3, 1) | cubic-bezier(0.2, 0.6, 0.3, 1) | — | — |
--motion-dur | 0.22s | 0.22s | — | — |