Kontextuelle Farben

Die hier aufgeführten Farben definieren die semantischen, kontextabhängigen Farben der Level. In der Regel sind keine Anpassungen erforderlich, es sei denn, du möchtest zusätzliche Level-Hintergründe hinzufügen oder bestehende Zuordnungen ändern. Für die Erstellung neuer Komponenten und Designs sollten kontextuelle Farben verwendet werden, damit diese auf den jeweiligen Kontext reagieren und sich abhängig vom verwendeten Level anpassen.

Layout-Token

Layout-Token sind die Standardwerte für die Seitengestaltung. Die Gruppe umfasst Hintergründe für große Flächen sowie Text- und Rahmenfarben.

Token	Einsatz	Farbe
--kern-color-layout-border-contextual	Kontextuelle, barrierefreie Rahmenfarbe
--kern-color-layout-text-default-contextual	Kontextuelle, barrierefreie Textfarbe, textbegleitende Icons
--kern-color-layout-text-muted-contextual	Kontextuelle, zurückgenommene Textfarbe
--kern-color-layout-text-inverse-contextual	Kontextuelle, invertierte Textfarbe
--kern-color-layout-background-default-contextual	Kontextuelle Standardfarbe für Hintergründe
--kern-color-layout-layer-surface-contextual	Kontextuelle Hintergrundfarbe für Elemente, die auf dem default Hintergrund liegen

Action-Token

Action-Token definieren interaktive Elemente wie Links und Buttons.

Token	Einsatz	Farbe
--kern-color-action-default-contextual	Kontextuelle Primärfarbe für interaktive Elemente
--kern-color-action-on-default-contextual	Kontextuelle Farbe für Elemente auf der Primärfarbe
--kern-color-action-visited-contextual	Kontextuelle Farbe für besuchte Elemente
--kern-color-action-focus-default-contextual	Kontextuelle Primärfarbe für den Fokus-Zustand
--kern-color-action-state-indicator-default-contextual	Kontextuelle Standardfarbe für den Interaktions-Status
--kern-color-action-state-indicator-tint-contextual	Kontextuelle, helle Farbe für Interaktions-Status

Token für Form Inputs

Token des „Form Inputs“ definieren die spezifischen Farbwerte von Formularfeldern.

Token	Einsatz	Farbe
--kern-color-form-input-border-contextual	Kontextuelle, barrierefreie Rahmenfarbe für Formularfelder

Feedback-Token

Die Feedback-Token definieren die Werte von Statusmeldungen.

Token	Einsatz	Farbe
--kern-color-feedback-default-contextual	Kontextuelle neutrale Standard-Farbe für Feedback
--kern-color-feedback-default-background-contextual	Kontextuelle neutrale Standard-Hintergrundfarbe für Feedback
--kern-color-feedback-info-contextual	Kontextuelle Farbe für Info-Status
--kern-color-feedback-info-background-contextual	Kontextuelle Hintergrundfarbe für Info-Status
--kern-color-feedback-success-contextual	Kontextuelle Farbe für Erfolgs-Status
--kern-color-feedback-success-background-contextual	Kontextuelle Hintergrundfarbe für Erfolgs-Status
--kern-color-feedback-warning-contextual	Kontextuelle Farbe für Warnungs-Status
--kern-color-feedback-warning-background-contextual	Kontextuelle Hintergrundfarbe für Warnungs-Status
--kern-color-feedback-danger-contextual	Kontextuelle Farbe für Fehler-Status
--kern-color-feedback-danger-background-contextual	Kontextuelle Hintergrundfarbe für Fehler-Status

Token für dekorative Elemente

Diese Farbwerte sind ausschließlich für dekorative Zwecke vorgesehen und müssen keine Kontrastanforderungen erfüllen.

Token	Einsatz	Farbe
--kern-color-decorative-brand-contextual	Kontextuelle Markenfarbe für Schmuckelemente
--kern-color-decorative-border-contextual	Kontextuelle, dekorative Rahmenfarbe