Colors

Diese Seite bietet einen einfachen Einstieg in die Farbgestaltung des Mate Design Systems. Sie erklärt die grundlegenden Prinzipien und zeigt, wie das modulare System aus Themes, Tokens, Rollen und Werten funktioniert. Darauf folgen konkrete Color Tokens mit Anwendungsbeispielen und die Möglichkeit, Tokenwerte in Storybook einzusehen.

Farbmanagement im Designsystem

Zur Verwaltung von Farben setzen wir auf ein Konzept, das aus Themes, Tokens, Rollen und Werten besteht.

Theme

Ein Theme ist ein Farbschema, das gezielt eine bestimmte visuelle Ästhetik erzeugt. Es legt fest, welche Farbwerte einem Token zugewiesen werden. Im Mate Design System steht ein Light und ein Dark Theme zur Verfügung (siehe Themes).

Token

Tokens sind Identifikatoren, die auf einer definierten Rolle basieren, um Farben zuzuordnen. Anders als statische Hex-Codes sind Tokens universell einsetzbar und funktionieren nahtlos über verschiedene Themes hinweg. Beispiele hierfür sind: --mate-signal-danger, --mate-border-base, --mate-background-interactive-enabled (siehe Design Tokens für allgemeine Informationen und die Tokenabschnitte dieser Seite für die Farbwerte).

Rolle

Eine Rolle beschreibt den festgelegten Einsatz einer Farbe innerhalb des Systems. Diese Rollen bleiben konstant, unabhängig von den gewählten Themes, und gewährleisten so ein einheitliches Erscheinungsbild.

Wert

Der Wert repräsentiert das spezifische visuelle Attribut als Hex-Code, das einem Token durch das jeweilige Theme zugeordnet wird.Diese modulare Struktur ermöglicht es uns, Farben systematisch und anpassungsfähig zu steuern, was eine konsistente Benutzererfahrung über verschiedene Oberflächen und Anwendungsfälle hinweg garantiert.

Themes

Im Mate Design System gibt es zwei Themes, benannt nach ihrer Hintergrundfarbe. Beim Light Theme ist die Haupt Hintergrundfarbe weiß und beim Dark Theme dunkelgrau.

Theme	Token	Hex value
Light	--mate-background-base	#ffffff
Dark	--mate-background-base	#21272A

Basierend auf diesen Hintergrundfarben werden die Tokens so gesetzt, dass eine ästhetische und barrierefreie Nutzererfahrung entsteht.

Farbanatomie

Die Standard-Themes von Mate basieren auf der AKDB-Farbpalette. Dabei dominieren die „Shades Contrast" Farben, die Graustufen mit Transparenzen darstellen, während die „Base-Blue"-Farben für primäre Aktionselemente eingesetzt werden. Weitere Farben werden gezielt und sparsam verwendet – etwa, um Zustände wie Erfolg, Warnung oder Gefahr darzustellen.

Farbwerte bei Light Theme

Primäre UI-Elemente nutzen vorwiegend Werte der Farbskala 60–100 (z. B. Buttons). Interface-Elemente, die auf Shades Contrast basieren, verwenden ebenfalls Werte von 60–100 (z. B. Texte, Icons).

broken_image

Farbwerte bei Light Theme

Farbwerte bei Light Theme

Farbwerte bei Dark Theme

Primäre UI-Elemente verwenden primär Werte der Farbskala 10–50 (z. B. Buttons). Interface-Elemente, die auf Shades Contrast basieren, nutzen Werte von 60–100 (z. B. Texte, Icons).

broken_image

Farbwerte bei Dark Theme

Farbwerte bei Dark Theme
Erfahre mehr über die konkreten Farbwerte unter den Color Tokens.

High Contrast Mode

Neben dem Light- und Dark-Theme unterstützen die Komponenten auch den High Contrast Mode des Betriebssystems (z. B. Windows). Die Farbwerte werden dynamisch an die Systemeinstellungen angepasst. Aufbau und Richtlinien für den High Contrast Mode orientieren sich an den Windows-Vorgaben.

Tokens

Anstatt feste Farbwerte wie Hex-Codes direkt zu verwenden, kapseln Tokens die Farbdefinitionen in abstrakte Einheiten, die systemweite Änderungen und Anpassungen erleichtern. Dadurch können wir nicht nur das gesamte Farbschema effizient aktualisieren, sondern auch dynamische Funktionen wie die Unterscheidung zwischen Light und Dark Theme umsetzen.

Aufbau und Funktionsweise

Tokens setzen sich aus zwei zentralen Komponenten zusammen:* Rolle:
Definiert, für welchen UI-Bereich oder welches Anwendungselement ein Token gedacht ist. Ob Hintergründe, Texte oder Rahmen – die Rolle bleibt in allen Themes unverändert.* Wert:
Der konkrete Farbcode (z. B. Hex-Code), der im jeweiligen Theme angewendet wird. Ein Token wie --mate-text-primary erscheint im Light-Theme als Blue 70 und im Dark-Theme als Blue 30. Erfahre mehr über die Namenskonvention unter Design Tokens.

Base Tokens

Die Base Tokens bilden die grundlegenden Farbwerte auf einer Skala von 10 bis 100 in 10er-Schritten ab. Auch hier nutzen wir Tokens, um Werte bei Bedarf schnell und skalierbar anzupassen.Werte von 10 bis 50 weisen gegenüber reinem Schwarz ein Kontrastverhältnis von über 4,5 : 1 auf, Werte von 60 bis 100 gegenüber Weiß ein Kontrastverhältnis von über 4,5 : 1.Selbst wenn nicht alle Farbwerte in den UIs direkt verwendet werden, stellen sie sicher, dass unsere Palette für zukünftige Anwendungsfälle bereit ist.Base Tokens dienen ausschließlich als Grundlage für andere Tokens und sollten nicht direkt in UI-Designs eingesetzt werden und sind von spezifischen Anwendungsfällen entkoppelt.

White and Black

Name	Wert
--mate-white-and-black-white	white
--mate-white-and-black-black	black

Red

Name	Wert
--mate-red-10	red 10
--mate-red-20	red 20
--mate-red-30	red 30
--mate-red-40	red 40
--mate-red-50	red 50
--mate-red-60	red 60
--mate-red-70	red 70
--mate-red-80	red 80
--mate-red-90	red 90
--mate-red-100	red 100

Magenta

Name	Wert
--mate-magenta-10	magenta 10
--mate-magenta-20	magenta 20
--mate-magenta-30	magenta 30
--mate-magenta-40	magenta 40
--mate-magenta-50	magenta 50
--mate-magenta-60	magenta 60
--mate-magenta-70	magenta 70
--mate-magenta-80	magenta 80
--mate-magenta-90	magenta 90
--mate-magenta-100	magenta 100

Purple

Name	Wert
--mate-purple-10	purple 10
--mate-purple-20	purple 20
--mate-purple-30	purple 30
--mate-purple-40	purple 40
--mate-purple-50	purple 50
--mate-purple-60	purple 60
--mate-purple-70	purple 70
--mate-purple-80	purple 80
--mate-purple-90	purple 90
--mate-purple-100	purple 100

Blue

Name	Wert
--mate-blue-10	blue 10
--mate-blue-20	blue 20
--mate-blue-30	blue 30
--mate-blue-40	blue 40
--mate-blue-50	blue 50
--mate-blue-60	blue 60
--mate-blue-70	blue 70
--mate-blue-80	blue 80
--mate-blue-90	blue 90
--mate-blue-100	blue 100

Cyan

Name	Wert
--mate-cyan-10	cyan 10
--mate-cyan-20	cyan 20
--mate-cyan-30	cyan 30
--mate-cyan-40	cyan 40
--mate-cyan-50	cyan 50
--mate-cyan-60	cyan 60
--mate-cyan-70	cyan 70
--mate-cyan-80	cyan 80
--mate-cyan-90	cyan 90
--mate-cyan-100	cyan 100

Teal

Name	Wert
--mate-teal-10	teal 10
--mate-teal-20	teal 20
--mate-teal-30	teal 30
--mate-teal-40	teal 40
--mate-teal-50	teal 50
--mate-teal-60	teal 60
--mate-teal-70	teal 70
--mate-teal-80	teal 80
--mate-teal-90	teal 90
--mate-teal-100	teal 100

Green

Name	Wert
--mate-green-10	green 10
--mate-green-20	green 20
--mate-green-30	green 30
--mate-green-40	green 40
--mate-green-50	green 50
--mate-green-60	green 60
--mate-green-70	green 70
--mate-green-80	green 80
--mate-green-90	green 90
--mate-green-100	green 100

Orange

Name	Wert
--mate-orange-10	orange 10
--mate-orange-20	orange 20
--mate-orange-30	orange 30
--mate-orange-40	orange 40
--mate-orange-50	orange 50
--mate-orange-60	orange 60
--mate-orange-70	orange 70
--mate-orange-80	orange 80
--mate-orange-90	orange 90
--mate-orange-100	orange 100

Yellow

Name	Wert
--mate-yellow-10	yellow 10
--mate-yellow-20	yellow 20
--mate-yellow-30	yellow 30
--mate-yellow-40	yellow 40
--mate-yellow-50	yellow 50
--mate-yellow-60	yellow 60
--mate-yellow-70	yellow 70
--mate-yellow-80	yellow 80
--mate-yellow-90	yellow 90
--mate-yellow-100	yellow 100

Gray

Name	Wert
--mate-gray-10	gray 10
--mate-gray-20	gray 20
--mate-gray-30	gray 30
--mate-gray-40	gray 40
--mate-gray-50	gray 50
--mate-gray-60	gray 60
--mate-gray-70	gray 70
--mate-gray-80	gray 80
--mate-gray-90	gray 90
--mate-gray-100	gray 100

Shades

Shades Base

Der Shades-Base-Token bildet die Grundlage für die Semantic Tokens und Component Tokens, die sowohl die Hintergründe der Benutzeroberfläche als auch die Hintergründe einzelner Komponenten festlegen.

Name	Wert Light Theme	Wert Dark Theme
--mate-shades-base	shades base light	shades base dark

Shades Contrast

Die Shades Contrast Tokens bilden eine zusätzliche Graustufenskala, die sich je nach Modus an unterschiedliche Blautöne und Deckkraftstufen anlehnt. Im Light Mode leitet sich Shades Contrast 100 von Blue 100 ab und besitzt volle Deckkraft (100 %). Sämtliche Abstufungen verwenden denselben Farbwert, reduzieren jedoch die Deckkraft auf den jeweiligen Prozentsatz (z. B. Shades Contrast 5 = 5 % Deckkraft, ansonsten identischer Farbton). Im Dark Mode fungiert Blue 10 als Basis für Shades Contrast 100, das ebenfalls mit 100 % Deckkraft ansetzt, während niedrigere Werte wie Shades Contrast 5 den gleichen Farbwert mit entsprechend verringerter Transparenz nutzen. So kann man etwa für „--text-body: shades-contrast(90)" in beiden Modi jeweils auf denselben Farbton zurückgreifen – im Light Mode auf den dunklen, im Dark Mode auf den hellen Blauton.Je nach Deckkraft lässt sich mit den Shades Contrast Tokens das Kontrastverhältnis zum Hintergrund präzise steuern: Bei Shades Contrast 10 bis 50 liegt der Kontrast unter 4,5 : 1, ab Shades Contrast 60 hingegen bei mindestens 4,5 : 1. Durch die Transparenz der Tokens scheint der Hintergrund leicht durch, was einerseits ein gleichbleibendes, definiertes Kontrastverhältnis ermöglicht und andererseits für ein harmonisches Ineinander­überblenden der Farben sorgt. Der Einsatz eines Blautons als Grundfarbe verleiht der Oberfläche eine zeitlose, augenschonende Ästhetik, die weniger hart wirkt als klassisches Schwarz auf Weiß oder umgekehrt. Als Basis für Semantic Tokens kommen die Shades Contrast Tokens unter anderem in Texten, Rahmen oder Hintergründen zum Einsatz und gewährleisten so konsistente Farb- und Kontrastverhältnisse in Light und Dark Mode.

Name	Wert Light Theme	Wert Dark Theme
--mate-shades-contrast-5pct	shades contrast 5 light	shades contrast 5 dark
--mate-shades-contrast-10pct	shades contrast 10 light	shades contrast 10 dark
--mate-shades-contrast-20pct	shades contrast 20 light	shades contrast 20 dark
--mate-shades-contrast-30pct	shades contrast 30 light	shades contrast 30 dark
--mate-shades-contrast-40pct	shades contrast 40 light	shades contrast 40 dark
--mate-shades-contrast-50pct	shades contrast 50 light	shades contrast 50 dark
--mate-shades-contrast-60pct	shades contrast 60 light	shades contrast 60 dark
--mate-shades-contrast-70pct	shades contrast 70 light	shades contrast 70 dark
--mate-shades-contrast-80pct	shades contrast 80 light	shades contrast 80 dark
--mate-shades-contrast-90pct	shades contrast 90 light	shades contrast 90 dark
--mate-shades-contrast-100pct	shades contrast 100 light	shades contrast 100 dark

Zusätzlich gibt es den Shades-Base + Contrast 5 %-Token, der als Basis für hervorgehobene Hintergründe dient. Er reproduziert das Erscheinungsbild, das entsteht, wenn man „Shades Contrast 5" auf „Shades Base" anwendet, ist jedoch kein Transparenz-Wert, sodass der Hintergrund im UI über anderen Elementen liegt, ohne dass diese durchscheinen.

Name	Wert Light Theme	Wert Dark Theme
--mate-shades-base-contrast-5pct	shades base + contrast 5	shades base dark

Shades Shade

Um Schatten sowohl im Light‑ als auch im Dark‑Mode korrekt darzustellen, wurden ergänzend zu den Shades Contrast Tokens die Shades Shade Tokens definiert. Im Light‑Theme entsprechen ihre Werte exakt denen der jeweiligen Shades Contrast Tokens, im Dark‑Theme hingegen weichen sie bewusst ab – andernfalls würden Schatten etwa hinter Modal‑Dialogs oder Listboxen mit hellen Blautönen erscheinen und ihre Wirkung verfehlen. Da Schatten für den Betrachter stets einen dunkleren Farbton aufweisen müssen, war die Erstellung dieser speziellen Palette unerlässlich.

Name	Wert Light Theme	Wert Dark Theme
--mate-shades-shade-10pct	shades shade 10 light	shades shade 10 dark
--mate-shades-shade-20pct	shades shade 20 light	shades shade 20 dark
--mate-shades-shade-30pct	shades shade 30 light	shades shade 30 dark
--mate-shades-shade-40pct	shades shade 40 light	shades shade 40 dark
--mate-shades-shade-50pct	shades shade 50 light	shades shade 50 dark

Semantic Tokens

Semantic Tokens verwenden Werte aus den Base Tokens und dienen dazu den Werten einen inhaltlichen oder kontextuellen Sinn zu verleihen und werden direkt in UI Elementen verwendet. Als Beispiel wird der Semantic Token mit der Rolle --text-heading für Überschriften gesetzt, welcher im Light Theme den Wert Blue 100 hat und im Dark Theme den Wert Blue 10 hat. So ist auf einem hellen Hintergrund die Überschrift in einem dunklen Blau dargestellt und auf einem dunklen Hintergrund in einem hellen Blau Ton, um den optimalen Kontrast sicherzustellen. Ändert sich das visuelle Erscheinungsbild, müssen nur die Base Colors und die semantischen Zuordnungen angepasst werden. Soll beispielsweise Lila statt Blau als Primärfarbe dienen, ändert man einfach die Zuordnung von der Blau‑ auf die Lila‑Palette. Möchte man darüber hinaus eine neue Lila‑Palette mit anderen Abstufungen verwenden, erstellt man diese unter Berücksichtigung der richtigen Kontraste. Durch die Verwendung der Semantic Tokens ist klar ersichtlich wofür ein Token verwendet wird.

Signal

Mit Signal Farben werden Signalzustände wie danger, info, success, warning, neutral und die Primärfarbe des UIs an die Nutzer kommuniziert. Die normalen Signal Tokens wie z.B. signal danger besitzen einen 3:1 Kontrast zum Hintergrund und einen 4,5:1 Kontrast zu weiß. Deswegen eignen sie sich für z.B. Buttons, Notifications oder andere Elemente, die vom Hintergrund unterscheidbar sein sollen und mit weißen Elementen kombiniert sind.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-signal-danger	signal danger light theme	signal danger dark theme	Fehler und Gefahrenzustände bei Buttons
--mate-signal-danger-light	signal danger light - light theme	signal danger light - dark theme	Heller Fehler-Hintergrund z.B. bei Badges und Callouts
--mate-signal-info	signal info light theme	signal info dark theme	Informationszustand z.B. bei Notifications, Toast
--mate-signal-info-light	signal info light - light theme	signal info light - dark theme	Heller Informations-Hintergrund z.B. bei Badges und Callouts
--mate-signal-success	signal success light theme	signal success dark theme	Erfolgszustand z.B. bei Toast
--mate-signal-success-light	signal success light - light theme	signal success light - dark theme	Heller Erfolgs-Hintergrund z.B. bei Badges und Callouts
--mate-signal-warning	signal warning light theme	signal warning dark theme	Warnungszustand z.B. bei Notifications
--mate-signal-warning-light	signal warning light - light theme	signal warning light - dark theme	Heller Warnungs-Hintergrund z.B. bei Badges und Callouts
--mate-signal-neutral	signal neutral light theme	signal neutral dark theme	Neutraler Zustand derzeit nicht verwendet
--mate-signal-neutral-light	signal neutral light - light theme	signal neutral light - dark theme	Heller Neutraler-Hintergrund z.B. bei Badges und Callouts
--mate-signal-primary	signal primary light theme	signal primary dark theme	Primärfarbe des UIs welche neben Graustufen das UI maßgeblich prägt. Verwendet für Interactive Enabled (z.B. als Farbe für den Primary Button, siehe unten)
--mate-signal-primary-light	signal primary light - light theme	signal primary light - dark theme	Heller Primär Hintergrund verwendet z.B. für interactive active und interactive selected Zuständen.

Interactive

Die Interactive Tokens kommunizieren die Zustände interaktiver Komponenten – etwa den Hover‑Zustand –, die bei der Bedienung der UI auftreten. Sie kommen nur zum Einsatz, wenn keine spezifischen Semantic‑ oder Component‑Tokens definiert sind. Daher gelten sie beispielsweise nicht für Icons oder Eingabefelder.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-interactive-focus	interactive foucs light	interactive foucs dark	Fokusring
--mate-interactive-contrast	interactive contrast light	interactive contrast dark	Button Border auf Signal Farbe z.B. Notification Bar
--mate-interactive-danger-enabled	interactive danger enabled light	interactive danger enabled dark	Bedienbarer Zustand von Gefahren Elementen wie z.B. Danger Button
--mate-interactive-danger-disabled	interactive danger disabled light	interactive danger disabled dark	State Disabled von Gefahren Elementen wie z.B. Danger Button
--mate-interactive-danger-hover	interactive danger hover light	interactive danger hover dark	Hover Zustand von Gefahren Elementen wie z.B. Danger Button
--mate-interactive-danger-selected	interactive danger selected light	interactive danger selected dark	Ausgewählter Zustand von Gefahren Elementen wie z.B. Checkbox
--mate-interactive-danger-active	interactive danger active light	interactive danger active dark	Gedrückter Zustand von Gefahren Elementen wie z.B. Danger Button
--mate-interactive-enabled	interactive enabled light	interactive enabled dark	Bedienbarer Zustand von Elementen wie z.B. Button
--mate-interactive-disabled	interactive disabled light	interactive disabled dark	State Disabled von Elementen wie z.B. Button
--mate-interactive-hover	interactive hover light	interactive hover dark	Hover Zustand von Elementen wie z.B. Button
--mate-interactive-selected	interactive selected light	interactive selected dark	Ausgewählter Zustand von Elementen wie z.B. Checkbox
--mate-interactive-active	interactive active light	interactive active dark	Gedrückter Zustand von Elementen wie z.B. Button

Background

Die Background Tokens definieren die Farbe vom Systemhintergrund, von Leisten und interaktiven Elementen.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-background-base	background base light	background base dark	Allgemeiner Hintergrund
--mate-background-highlighted	background highlighted light	background highlighted dark	Hintergrund für Aktionsleisten z.B. Functionbar
--mate-background-danger-hover	background danger hover light	background danger hover dark	Hover Zustand für Gefahren Hintergründe z.B. Checkbox bei Fehlern
--mate-background-danger-active	background danger active light	background danger active dark	Gedrückter Zustand für Gefahren Hintergründe z.B. Checkbox bei Fehlern
--mate-background-interactive-enabled	background interactive enabled light	background interactive enabled dark	Bedienbarer Zustand von Hintergründen für Interaktiven Elementen z.B. Listbox
--mate-background-interactive-disabled	background interactive disabled light	background interactive disabled dark	State Disabled von Hintergründen für Interaktiven Elementen z.B. Listbox
--mate-background-interactive-hover	background interactive hover light	background interactive hover dark	Hover Zustand von Hintergründen für Interaktiven Elementen z.B. Listbox
--mate-background-interactive-selected	background interactive selected light	background interactive selected dark	Ausgewählter Zustand von Hintergründen für Interaktiven Elementen z.B. Listbox
--mate-background-interactive-active	background interactive active light	background interactive active dark	Gedrückter Zustand von Hintergründen für Interaktiven Elementen z.B. Listbox

Border

Die Border Tokens definieren die im UI befindlichen Borders, sofern keine spezifischen Component Tokens vorliegen.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-border-base	border base light	border base dark	Borders mit Kontrast 3:1 zum Hintergrund. Komponenten sind dadurch visuell erkennbar.
--mate-border-light	border light - light theme	border light - dark theme	Border, wenn keine Kontrasterforderungen erfüllt sein müssen z.B. Verwendung innerhalb von Komponenten oder beim Divider.

Data

Die Data Tokens definieren die Farben für Visualisierungen z.B. mittels Charts.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-data-1	data 1 light	data 1 dark	Charts
--mate-data-2	data 2 light	data 2 dark	Charts
--mate-data-3	data 3 light	data 3 dark	Charts
--mate-data-4	data 4 light	data 4 dark	Charts
--mate-data-5	data 5 light	data 5 dark	Charts
--mate-data-6	data 6 light	data 6 dark	Charts
--mate-data-7	data 7 light	data 7 dark	Charts
--mate-data-8	data 8 light	data 8 dark	Charts
--mate-data-9	data 9 light	data 9 dark	Charts
--mate-data-10	data 10 light	data 10 dark	Charts

Text

Die Text‑Tokens legen fest, welche Tokens für sämtliche Texte im UI verwendet werden. Da Texte höhere Kontrastwerte erfordern, ist es besonders essenziell, auf die korrekte Tokenverwendung zu achten, um eine barrierefreie Nutzererfahrung zu gewährleisten. Jeder Text muss einen Text‑Token verwenden.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-text-heading	text heading light	text heading dark	Überschriften
--mate-text-body	text body light	text body dark	Body Texte
--mate-text-secondary	text secondary light	text secondary dark	Label Texte
--mate-text-tertiary	text tertiary light	text tertiary dark	Placeholder Texte, Helper Texte
--mate-text-disabled	text disabled light	text disabled dark	Texte von Elementen im State Disabled
--mate-text-danger-contrast	text danger contrast light	text danger contrast dark	Text auf danger signal
--mate-text-danger	text danger light	text danger dark	Text im State Error z.B. Error Callout Header und Error Text bei Eingabefeldern
--mate-text-primary-contrast	text primary contrast light	text primary contrast dark	Text auf primary signal, interactive enabled, interactive hover, interactive active
--mate-text-primary	text primary light	text primary dark	Hervorgehobener Text bei vielen interaktiven UI Elementen im Einsatz. Zudem verwendet bei Begleitelementen von Text, die mit oder anstatt von Text in Buttons verwendet werden z.B. Pfeil Icon in "Weiter" Button.
--mate-text-info-contrast	text info contrast light	text info contrast dark	Text auf info signal
--mate-text-info	text info light	text info dark	Text bei Informationszustand z.B. Info Callout Header
--mate-text-success-contrast	text success contrast light	text success contrast dark	Text auf success signal
--mate-text-success	text success light	text success dark	Text bei Erfolgszustand z.B. Success Callout Header
--mate-text-warning-contrast	text warning contrast light	text warning contrast dark	Text auf warning signal
--mate-text-warning	text warning light	text warning dark	Text bei Warnungszustand z.B. Warning Callout Header
--mate-text-neutral-contrast	text neutral contrast light	text neutral contrast dark	Text auf neutral signal
--mate-text-neutral	text neutral light	text neutral dark	Text bei Neutralzustand z.B. Secondary Callout Header
--mate-text-required	text required light	text required dark	Required Indikator (*) neben dem Label von Pflichtfeldern

Icon

Die Icon‑Tokens legen fest, welche Tokens für interaktive und nicht‑interaktive Icons verwendet werden.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-icon-danger	icon danger light	icon danger dark	Icons im Gefahrenzustand
--mate-icon-success	icon success light	icon success dark	Icons im Erfolgszustand
--mate-icon-warning	icon warning light	icon warning dark	Icons im Warnungszustand
--mate-icon-info	icon info light	icon info dark	Icons im Informationszustand
--mate-icon-neutral	icon neutral light	icon neutral dark	Icons im Neutralzustand (nicht bei interaktiven oder nicht interaktiven Icons verwenden, sondern nur beim Zustand "neutral" z.B. im Callout oder bei neutralem Badge)
--mate-icon-interactive-enabled	icon interactive light	icon interactive dark	Interaktive Icons z.B. Inline Actions in Grids
--mate-icon-interactive-hover	icon interactive hover light	icon interactive hover dark	Hover Zustand bei interaktiven Icons
--mate-icon-interactive-active	icon interactive active light	icon interactive active dark	Gedrückter Zustand bei interaktiven Icons
--mate-icon-interactive-selected	icon interactive selected light	icon interactive selected dark	Ausgewählter Zustand bei interaktiven Icons (z.B. bei Application Bar, Sidepanel)
--mate-icon-interactive-disabled	icon interactive disabled light	icon interactive disabled dark	State Disabled bei interaktiven Icons
--mate-icon-interactive-contrast	icon interactive contrast light	icon interactive contrast dark	Interactive Icons auf Signal Tokens
--mate-icon-not-interactive	icon not interactive light	icon not interactive dark	Nicht interaktive Icons z.B. Telefon-Icon in Facet

Component Tokens

Für einige Komponenten wurden zusätzlich individuelle Component‑Tokens definiert, die auf Base‑ und Semantic‑Tokens basieren. Dadurch lässt sich die Visualität einzelner Komponenten feingranular steuern. In manchen Fällen ist es zudem wenig sinnvoll, einen eigenen Semantic‑Token anzulegen, wenn es sich um einen UI‑Einzelfall handelt, der sich nicht sinnvoll generalisieren lässt.

Field

Diese Component Tokens betreffen alle Eingabefelder wie z.B. Textfelder, Datepicker Comboboxen, Dropdowns.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-components-field-background	field background light	field background dark	Hintergrund von Eingabefeldern
--mate-components-field-background-disabled	field background disabled light	field background disabled dark	Hintergrund von Eingabefeldern im State Disabled
--mate-components-field-border-enabled	field border enabled light	field border enabled dark	Bedienbarer Zustand Border von Eingabefeldern
--mate-components-field-border-hover	field border hover light	field border hover dark	Hover Zustand Border von Eingabefeldern
--mate-components-field-border-active	field border active light	field border active dark	Gedrückter Zustand Border von Eingabefeldern
--mate-components-field-border-disabled	field border disabled light	field border disabled dark	State Disabled Border von Eingabefeldern
--mate-components-field-border-read-only	field border read-only light	field border read-only dark	State Read Only Border von Eingabefeldern

Split Layout

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-components-split-layout-handle	split layout handle light	split layout handle dark	Greifer beim Split Layout
--mate-components-split-layout-border-hover	split layout border hover light	split layout border hover dark	Hover Zustand Border Split Layout

Calendar Event

Diese Component Tokens sind für die Darstellung von Terminen in Kalender- und Belegungsansichten vorgesehen. Je Farbe gibt es zwei Tokens: background für die Fläche des Termins und line für dessen farbige Kante. Die Farben transportieren keine Wertung, sondern unterscheiden Kategorien voneinander – für Zustände wie Erfolg oder Fehler sind die Signal Tokens zuständig.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-components-calendar-event-background-blue	calendar event background blue light	calendar event background blue dark	Fläche eines Termins, folgt signal info light
--mate-components-calendar-event-background-red	calendar event background red light	calendar event background red dark	Fläche eines Termins, folgt signal danger light
--mate-components-calendar-event-background-orange	calendar event background orange light	calendar event background orange dark	Fläche eines Termins, folgt signal warning light
--mate-components-calendar-event-background-green	calendar event background green light	calendar event background green dark	Fläche eines Termins, folgt signal success light
--mate-components-calendar-event-background-gray	calendar event background gray light	calendar event background gray dark	Fläche eines Termins, folgt signal neutral light
--mate-components-calendar-event-background-magenta	calendar event background magenta light	calendar event background magenta dark	Fläche eines Termins, Magenta 60 bei 14 %
--mate-components-calendar-event-background-purple	calendar event background purple light	calendar event background purple dark	Fläche eines Termins, Purple 60 bei 12 %
--mate-components-calendar-event-background-yellow	calendar event background yellow light	calendar event background yellow dark	Fläche eines Termins, Yellow 60 bei 14 %
--mate-components-calendar-event-background-cyan	calendar event background cyan light	calendar event background cyan dark	Fläche eines Termins, Cyan 60 bei 12 %
--mate-components-calendar-event-background-teal	calendar event background teal light	calendar event background teal dark	Fläche eines Termins, Teal 60 bei 12 %
--mate-components-calendar-event-line-blue	calendar event line blue light	calendar event line blue dark	Kante eines Termins, folgt signal info
--mate-components-calendar-event-line-red	calendar event line red light	calendar event line red dark	Kante eines Termins, folgt signal danger
--mate-components-calendar-event-line-orange	calendar event line orange light	calendar event line orange dark	Kante eines Termins, folgt signal warning
--mate-components-calendar-event-line-green	calendar event line green light	calendar event line green dark	Kante eines Termins, folgt signal success
--mate-components-calendar-event-line-gray	calendar event line gray light	calendar event line gray dark	Kante eines Termins, folgt signal neutral
--mate-components-calendar-event-line-magenta	calendar event line magenta light	calendar event line magenta dark	Kante eines Termins, Magenta 60 bzw. 50
--mate-components-calendar-event-line-purple	calendar event line purple light	calendar event line purple dark	Kante eines Termins, Purple 60 bzw. 50
--mate-components-calendar-event-line-yellow	calendar event line yellow light	calendar event line yellow dark	Kante eines Termins, Yellow 60 bzw. 50
--mate-components-calendar-event-line-cyan	calendar event line cyan light	calendar event line cyan dark	Kante eines Termins, Cyan 60 bzw. 50
--mate-components-calendar-event-line-teal	calendar event line teal light	calendar event line teal dark	Kante eines Termins, Teal 60 bzw. 50

Die fünf Farben Blau, Rot, Orange, Grün und Grau folgen den Signal Tokens und wechseln daher mit dem Theme. Magenta, Purple, Gelb, Cyan und Teal tragen feste Werte, die in beiden Themes gleich sind: eine Base-Farbe mit Transparenz für die Fläche und die volle Base-Farbe für die Kante.

Info für Dev

Diese Tokens werden im Theme von keiner Komponente verwendet. Sie stehen Produkten zur Verfügung, die eine eigene Kalender- oder Belegungsansicht bauen.

Date Picker

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-components-date-picker-gradient-background-visible	date picker gradient background visible light	date picker gradient background visible dark	Overlay gradient
--mate-components-date-picker-gradient-background-not-visible	date picker gradient background not visible light	date picker gradient background not visible dark	Overlay gradient
--mate-components-date-picker-separator	date picker separator light	date picker separator dark	Separator Punkte beim Datepicker im Overlay zwischen den unterschiedlichen Jahren

Grid und Grid Pro

Da es unter anderem aufgrund überlappender Borders nicht möglich ist, Transparenzen im Grid zu verwenden, wurden manuell Component‑Tokens auf Basis von Transparenzwerten, die auf Hintergründe gelegt wurden, definiert. Die zugrunde liegenden Werte sind im Figma‑File erläutert.

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-components-grid-border (base + contrast 20%)	grid border light	grid border dark	Border Grid und Grid Pro
--mate-components-grid-background-selected (base + primary light)	grid background selected light	grid background selected dark	Ausgewählter Zustand bei Grid Row
--mate-components-grid-background-hover (base + primary light)	grid background hover light	grid background hover dark	Hover Zustand bei Grid Row
--mate-components-grid-background-edited (base + yellow 30 bei 20%)	editable grid background edited light	editable grid background edited dark	Bearbeiteter Zustand bei Grid Pro
--mate-components-grid-background-danger (base + danger light)	editable grid background danger light	editable grid background danger dark	Danger Zustand bei Grid Pro

AKDB Logo

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-components-akdb-logo-1	AKDB Logo 1 light	AKDB Logo 1 dark	Farbe AKDB Logo
--mate-components-akdb-logo-2	AKDB Logo 2 light	AKDB Logo 2 dark	Farbe AKDB Logo

X-Range Chart

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-components-x-range-chart-1	X Range Chart 1 light	X Range Chart 1 dark	Fortschritt im X Range Chart
--mate-components-x-range-chart-2	X Range Chart 2 light	X Range Chart 2 dark	Fortschritt im X Range Chart
--mate-components-x-range-chart-3	X Range Chart 3 light	X Range Chart 3 dark	Fortschritt im X Range Chart
--mate-components-x-range-chart-4	X Range Chart 4 light	X Range Chart 4 dark	Fortschritt im X Range Chart
--mate-components-x-range-chart-5	X Range Chart 5 light	X Range Chart 5 dark	Fortschritt im X Range Chart
--mate-components-x-range-chart-6	X Range Chart 6 light	X Range Chart 6 dark	Fortschritt im X Range Chart
--mate-components-x-range-chart-7	X Range Chart 7 light	X Range Chart 7 dark	Fortschritt im X Range Chart
--mate-components-x-range-chart-8	X Range Chart 8 light	X Range Chart 8 dark	Fortschritt im X Range Chart
--mate-components-x-range-chart-9	X Range Chart 9 light	X Range Chart 9 dark	Fortschritt im X Range Chart
--mate-components-x-range-chart-10	X Range Chart 10 light	X Range Chart 10 dark	Fortschritt im X Range Chart

Other

Name	Wert Light Theme	Wert Dark Theme	Verwendet für
--mate-components-other-stepper-gradient-background	stepper gradient background light	stepper gradient background dark	Gradient beim Stepper (Pfeile Links und Rechts)
--mate-components-other-button-border-disabled	button field border disabled light	button field border disabled dark	Disabled Border Button
--mate-components-other-checkbox-background	checkbox background light	checkbox background dark	Checkbox Hintergrund
--mate-components-other-overlay-background	overlay background light	overlay background dark	Hintergrund von Overlays wie z.B. Dialoge
--mate-components-other-loading-indicator-background	loading indicator background light	loading indicator background dark	Hintergrund von Balken auf denen ein Ladeindikator angezeigt wird
--mate-components-other-multiselect-chip-background	multiselect chip background light	multiselect chip background dark	Hintergrund von Multiselect Chips
--mate-components-other-side-panel-badge	side panel badge light	side panel badge dark	badge im sidepanel
--mate-components-other-global-header-background (dark base + contrast 10)	global header background light	global header background dark	Hintergrund des Global Headers

Develop

Die Tokens für die Farben können in Storybook betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/grundlagen-design-tokens--docs