Semantische Farben

Die Farben sind in KERN als Token angelegt. Eine Übersicht findest im Folgenden. Die Benennungssystematik der Token folgt dem allgemeinen Prinzip wie unter Design-Token beschrieben. Um die richtige Verwendung der Farben musst du dich nicht kümmern, so lange du mit den vorgefertigten Komponenten arbeitest. Dort sind bereits die zu verwendenden Token eingesetzt.

Anders als die generischen Farben geben die semantischen Farben eine bestimmte Nutzung vor. Für deine eigenen Layouts und Komponenten empfiehlt es sich unsere neuen kontextuellen Farben zu verwenden.

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	Barrierefreie Rahmenfarbe
--kern-color-layout-border-level-1	Barrierefreie Rahmenfarbe auf dem 1. Level
--kern-color-layout-border-level-2	Barrierefreie Rahmenfarbe auf dem 2. Level
--kern-color-layout-text-default	Barrierefreie Textfarbe, textbegleitende Icons
--kern-color-layout-text-muted	Zurückgenommene Textfarbe
--kern-color-layout-text-inverse	Invertierte Textfarbe
--kern-color-layout-background-default	Standardfarbe für Hintergründe im default Level
--kern-color-layout-background-hued	Hintergrundfarbe um sich vom Standardhintergrund abzugrenzen.
--kern-color-layout-background-surface	Hintergrundfarbe für Elemente, die auf dem default Level liegen
--kern-color-layout-background-level-1	Standardfarbe für Hintergründe im Level 1
--kern-color-layout-background-level-1-surface	Hintergrundfarbe für Elemente, die auf dem Level 1 liegen
--kern-color-layout-background-level-2	Standardfarbe für Hintergründe im Level 2
--kern-color-layout-background-level-2-surface	Hintergrundfarbe für Elemente, die auf dem Level 2 liegen

Action-Token

Action-Token definieren interaktive Elemente wie Links und Buttons.

Token	Einsatz	Farbe
--kern-color-action-default	Primärfarbe für interaktive Elemente
--kern-color-action-on-default	Farbe für Elemente auf der Primärfarbe
--kern-color-action-visited	Farbe für besuchte Elemente
--kern-color-action-focus-default	Primärfarbe für den Fokus-Zustand
--kern-color-action-state-indicator-default	Standardfarbe für den Interaktions-Status
--kern-color-action-state-indicator-tint	Helle Farbe für Interaktions-Status
--kern-color-action-state-indicator-shade	Dunkle Farbe für Interaktions-Status
--kern-color-action-state-opacity-hover	Transparenz für Hover-Effekte (Beispiel mit --kern-color-state-indicator-default)
--kern-color-action-state-opacity-active	Transparenz für active State (Beispiel mit --kern-color-state-indicator-default)
--kern-color-action-state-opacity-pressed	Transparenz für pressed State (Beispiel mit --kern-color-state-indicator-default)
--kern-color-action-state-opacity-selected	Transparenz für selected State (Beispiel mit --kern-color-state-indicator-default)
--kern-color-action-state-opacity-disabled	Transparenz für disabled State (Beispiel mit --kern-color-action-default)
--kern-color-action-state-opacity-overlay	Transparenz für Overlay-Effekte (Beispiel mit --kern-color-state-indicator-shade)

Token für Form Inputs

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

Token	Einsatz	Farbe
--kern-color-form-input-border	Barrierefreie Rahmenfarbe für Formularfelder

Feedback-Token

Die Feedback-Token definieren die Werte von Statusmeldungen.

Token	Einsatz	Farbe
--kern-color-feedback-default	Neutrale Standard-Farbe für Feedback
--kern-color-feedback-default-background	Neutrale Standard-Hintergrundfarbe für Feedback
--kern-color-feedback-info	Farbe für Info-Status
--kern-color-feedback-info-background	Hintergrundfarbe für Info-Status
--kern-color-feedback-success	Farbe für Erfolgs-Status
--kern-color-feedback-success-background	Hintergrundfarbe für Erfolgs-Status
--kern-color-feedback-warning	Farbe für Warnungs-Status
--kern-color-feedback-warning-background	Hintergrundfarbe für Warnungs-Status
--kern-color-feedback-danger	Farbe für Fehler-Status
--kern-color-feedback-danger-background	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-default	Markenfarbe für Schmuckelemente
--kern-color-decorative-border-default	Dekorative Rahmenfarbe
--kern-color-decorative-border-level-1	Dekorative Rahmenfarbe auf dem 1. Level
--kern-color-decorative-border-level-2	Dekorative Rahmenfarbe auf dem 2. Level