Theme

Die Farben kommen aus den Brand Guidelines: das Packungsgrün und eine Pantone-Farbe pro Tee. Quelle ist packages/ui/src/styles/theme.css.

Farben

backgroundSeitengrund, Papier
foregroundText, grünliches Schwarz
primaryPackungsgrün Pantone 357 C, Haupt-Buttons
secondaryZweite Flächen, Chips
mutedRuhige Flächen
muted-foregroundZweittext
accentZartes Grün, Auswahl
destructiveFehler, Entfernen
borderHaarlinien, nur Dekoration
inputRand von Eingabefeldern
ringFokus-Rahmen
goldTee-Punkt Darjeeling First Flush, Pantone 1385 C
mossTee-Punkt Darjeeling Second Flush, Pantone 363 C
leafTee-Punkt Grüner Darjeeling, Pantone 360 C
stoneTee-Punkt Darjeeling Earl Grey, Pantone Warm Gray 10 U
maltTee-Punkt Assam Second Flush, Pantone 174 C
roseTee-Punkt Grüner Assam, Pantone 1787 C
highlightMarkengrün für Kaufaktionen und Hervorhebungen

Schrift

Libre Baskerville für alles

Darjeeling First Flush

Die Brand Guidelines setzen alles in Baskerville, nur Regular und Kursiv. Überschriften heben sich durch Versalien oder einen größeren Schriftgrad ab. Die Teekampagne kauft direkt im Teegarten.

Barrierefreiheit

Text erreicht mindestens 4,5:1, Ränder von Bedienelementen und der Fokus-Rahmen mindestens 3:1 (WCAG 1.4.3 und 1.4.11). Das Skript check-contrast prüft jedes Paar in allen drei Themes.
Jedes fokussierbare Element zeigt einen 2px-Rahmen in der Farbe ring, auch im Kontrastmodus von Windows (WCAG 2.4.7).
Animationen und Übergänge entfallen bei der Systemeinstellung „Bewegung reduzieren“ (WCAG 2.3.3).
Bedienziele sind mindestens 24 × 24 px groß oder haben genug Abstand (WCAG 2.5.8).
Farbe trägt nie allein eine Information. Ein Tee-Punkt steht immer neben dem Namen des Tees.

Das grüne Band

Die Klasse theme-leaf setzt alle Farben für Flächen im Packungsgrün neu. Komponenten darin brauchen keine eigenen Farben.