Zum Inhalt springen
Teekampagne UI

Theme

Die Farben kommen von der Packung, dem Blatt und der Tasse. Quelle ist packages/ui/src/styles/theme.css.

Farben

  • backgroundSeitengrund, Papier
  • foregroundText, grünliches Schwarz
  • primaryPackungsgrün, 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 First Flush
  • maltTee-Punkt Assam
  • highlightTassengold, nur für den Kauf-Button

Schrift

Newsreader für Überschriften

Darjeeling First Flush

Instrument Sans für Fließtext, Preise und Bedienelemente. Die Teekampagne kauft direkt im Teegarten, in großen Mengen und nur eine Sorte pro Ernte.

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.