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: --semantic-danger, --border-base, --background-interactive-enabled (siehe Design Tokens für allgemeine Informationen und Color Tokens bezüglich Tokens zu Farben).
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 | --background-base | #ffffff |
| Dark | --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).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).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 --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 |
|---|---|
| White | white |
| Black | black |
Red
| Name | Wert |
|---|---|
| Red 10 | red 10 |
| Red 20 | red 20 |
| Red 30 | red 30 |
| Red 40 | red 40 |
| Red 50 | red 50 |
| Red 60 | red 60 |
| Red 70 | red 70 |
| Red 80 | red 80 |
| Red 90 | red 90 |
| Red 100 | red 100 |
Magenta
| Name | Wert |
|---|---|
| Magenta 10 | magenta 10 |
| Magenta 20 | magenta 20 |
| Magenta 30 | magenta 30 |
| Magenta 40 | magenta 40 |
| Magenta 50 | magenta 50 |
| Magenta 60 | magenta 60 |
| Magenta 70 | magenta 70 |
| Magenta 80 | magenta 80 |
| Magenta 90 | magenta 90 |
| Magenta 100 | magenta 100 |
Purple
| Name | Wert |
|---|---|
| Purple 10 | purple 10 |
| Purple 20 | purple 20 |
| Purple 30 | purple 30 |
| Purple 40 | purple 40 |
| Purple 50 | purple 50 |
| Purple 60 | purple 60 |
| Purple 70 | purple 70 |
| Purple 80 | purple 80 |
| Purple 90 | purple 90 |
| Purple 100 | purple 100 |
Blue
| Name | Wert |
|---|---|
| Blue 10 | blue 10 |
| Blue 20 | blue 20 |
| Blue 30 | blue 30 |
| Blue 40 | blue 40 |
| Blue 50 | blue 50 |
| Blue 60 | blue 60 |
| Blue 70 | blue 70 |
| Blue 80 | blue 80 |
| Blue 90 | blue 90 |
| Blue 100 | blue 100 |
Cyan
| Name | Wert |
|---|---|
| Cyan 10 | cyan 10 |
| Cyan 20 | cyan 20 |
| Cyan 30 | cyan 30 |
| Cyan 40 | cyan 40 |
| Cyan 50 | cyan 50 |
| Cyan 60 | cyan 60 |
| Cyan 70 | cyan 70 |
| Cyan 80 | cyan 80 |
| Cyan 90 | cyan 90 |
| Cyan 100 | cyan 100 |
Teal
| Name | Wert |
|---|---|
| Teal 10 | teal 10 |
| Teal 20 | teal 20 |
| Teal 30 | teal 30 |
| Teal 40 | teal 40 |
| Teal 50 | teal 50 |
| Teal 60 | teal 60 |
| Teal 70 | teal 70 |
| Teal 80 | teal 80 |
| Teal 90 | teal 90 |
| Teal 100 | teal 100 |
Green
| Name | Wert |
|---|---|
| Green 10 | green 10 |
| Green 20 | green 20 |
| Green 30 | green 30 |
| Green 40 | green 40 |
| Green 50 | green 50 |
| Green 60 | green 60 |
| Green 70 | green 70 |
| Green 80 | green 80 |
| Green 90 | green 90 |
| Green 100 | green 100 |
Orange
| Name | Wert |
|---|---|
| Orange 10 | orange 10 |
| Orange 20 | orange 20 |
| Orange 30 | orange 30 |
| Orange 40 | orange 40 |
| Orange 50 | orange 50 |
| Orange 60 | orange 60 |
| Orange 70 | orange 70 |
| Orange 80 | orange 80 |
| Orange 90 | orange 90 |
| Orange 100 | orange 100 |
Yellow
| Name | Wert |
|---|---|
| Yellow 10 | yellow 10 |
| Yellow 20 | yellow 20 |
| Yellow 30 | yellow 30 |
| Yellow 40 | yellow 40 |
| Yellow 50 | yellow 50 |
| Yellow 60 | yellow 60 |
| Yellow 70 | yellow 70 |
| Yellow 80 | yellow 80 |
| Yellow 90 | yellow 90 |
| Yellow 100 | yellow 100 |
Gray
| Name | Wert |
|---|---|
| Gray 10 | gray 10 |
| Gray 20 | gray 20 |
| Gray 30 | gray 30 |
| Gray 40 | gray 40 |
| Gray 50 | gray 50 |
| Gray 60 | gray 60 |
| Gray 70 | gray 70 |
| Gray 80 | gray 80 |
| Gray 90 | gray 90 |
| 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 |
|---|---|---|
| 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 |
|---|---|---|
| Shades contrast 5 | shades contrast 5 light | shades contrast 5 dark |
| Shades contrast 10 | shades contrast 10 light | shades contrast 10 dark |
| Shades contrast 20 | shades contrast 20 light | shades contrast 20 dark |
| Shades contrast 30 | shades contrast 30 light | shades contrast 30 dark |
| Shades contrast 40 | shades contrast 40 light | shades contrast 40 dark |
| Shades contrast 50 | shades contrast 50 light | shades contrast 50 dark |
| Shades contrast 60 | shades contrast 60 light | shades contrast 60 dark |
| Shades contrast 70 | shades contrast 70 light | shades contrast 70 dark |
| Shades contrast 80 | shades contrast 80 light | shades contrast 80 dark |
| Shades contrast 90 | shades contrast 90 light | shades contrast 90 dark |
| Shades contrast 100 | 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 |
|---|---|---|
| Shades base + contrast 5% | 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 |
|---|---|---|
| Shades Shade 10 | shades shade 10 light | shades shade 10 dark |
| Shades Shade 20 | shades shade 20 light | shades shade 20 dark |
| Shades Shade 30 | shades shade 30 light | shades shade 30 dark |
| Shades Shade 40 | shades shade 40 light | shades shade 40 dark |
| Shades Shade 50 | 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 |
|---|---|---|---|
| signal danger | signal danger light theme | signal danger dark theme | Fehler und Gefahrenzustände bei Buttons |
| signal danger light | signal danger light - light theme | signal danger light - dark theme | Heller Fehler-Hintergrund z.B. bei Badges und Callouts |
| signal info | signal info light theme | signal info dark theme | Informationszustand z.B. bei Notifications, Toast |
| signal info light | signal info light - light theme | signal info light - dark theme | Heller Informations-Hintergrund z.B. bei Badges und Callouts |
| signal success | signal success light theme | signal success dark theme | Erfolgszustand z.B. bei Toast |
| signal success light | signal success light - light theme | signal success light - dark theme | Heller Erfolgs-Hintergrund z.B. bei Badges und Callouts |
| signal warning | signal warning light theme | signal warning dark theme | Warnungszustand z.B. bei Notifications |
| signal warning light | signal warning light - light theme | signal warning light - dark theme | Heller Warnungs-Hintergrund z.B. bei Badges und Callouts |
| signal neutral | signal neutral light theme | signal neutral dark theme | Neutraler Zustand derzeit nicht verwendet |
| signal neutral light | signal neutral light - light theme | signal neutral light - dark theme | Heller Neutraler-Hintergrund z.B. bei Badges und Callouts |
| 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) |
| 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 |
|---|---|---|---|
| interactive focus | interactive foucs light | interactive foucs dark | Fokusring |
| interactive contrast | interactive contrast light | interactive contrast dark | Button Border auf Signal Farbe z.B. Notification Bar |
| interactive danger enabled | interactive danger enabled light | interactive danger enabled dark | Bedienbarer Zustand von Gefahren Elementen wie z.B. Danger Button |
| interactive danger disabled | interactive danger disabled light | interactive danger disabled dark | Deaktivierter Zustand von Gefahren Elementen wie z.B. Danger Button |
| interactive danger hover | interactive danger hover light | interactive danger hover dark | Hover Zustand von Gefahren Elementen wie z.B. Danger Button |
| interactive danger selected | interactive danger selected light | interactive danger selected dark | Ausgewählter Zustand von Gefahren Elementen wie z.B. Checkbox |
| interactive danger active | interactive danger active light | interactive danger active dark | Gedrückter Zustand von Gefahren Elementen wie z.B. Danger Button |
| interactive enabled | interactive enabled light | interactive enabled dark | Bedienbarer Zustand von Elementen wie z.B. Button |
| interactive disabled | interactive disabled light | interactive disabled dark | Deaktivierter Zustand von Elementen wie z.B. Button |
| interactive hover | interactive hover light | interactive hover dark | Hover Zustand von Elementen wie z.B. Button |
| interactive selected | interactive selected light | interactive selected dark | Ausgewählter Zustand von Elementen wie z.B. Checkbox |
| 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 |
|---|---|---|---|
| background base | background base light | background base dark | Allgemeiner Hintergrund |
| background highlighted | background highlighted light | background highlighted dark | Hintergrund für Aktionsleisten z.B. Functionbar |
| background danger hover | background danger hover light | background danger hover dark | Hover Zustand für Gefahren Hintergründe z.B. Checkbox bei Fehlern |
| background danger active | background danger active light | background danger active dark | Gedrückter Zustand für Gefahren Hintergründe z.B. Checkbox bei Fehlern |
| background interactive enabled | background interactive enabled light | background interactive enabled dark | Bedienbarer Zustand von Hintergründen für Interaktiven Elementen z.B. Listbox |
| background interactive disabled | background interactive disabled light | background interactive disabled dark | Deaktivierter Zustand von Hintergründen für Interaktiven Elementen z.B. Listbox |
| background interactive hover | background interactive hover light | background interactive hover dark | Hover Zustand von Hintergründen für Interaktiven Elementen z.B. Listbox |
| background interactive selected | background interactive selected light | background interactive selected dark | Ausgewählter Zustand von Hintergründen für Interaktiven Elementen z.B. Listbox |
| 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 |
|---|---|---|---|
| border base | border base light | border base dark | Borders mit Kontrast 3:1 zum Hintergrund. Komponenten sind dadurch visuell erkennbar. |
| 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 |
|---|---|---|---|
| 1 | data 1 light | data 1 dark | Charts |
| 2 | data 2 light | data 2 dark | Charts |
| 3 | data 3 light | data 3 dark | Charts |
| 4 | data 4 light | data 4 dark | Charts |
| 5 | data 5 light | data 5 dark | Charts |
| 6 | data 6 light | data 6 dark | Charts |
| 7 | data 7 light | data 7 dark | Charts |
| 8 | data 8 light | data 8 dark | Charts |
| 9 | data 9 light | data 9 dark | Charts |
| 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 |
|---|---|---|---|
| text heading | text heading light | text heading dark | Überschriften |
| text body | text body light | text body dark | Body Texte |
| text secondary | text secondary light | text secondary dark | Label Texte |
| text tertiary | text tertiary light | text tertiary dark | Placeholder Texte, Helper Texte |
| text disabled | text disabled light | text disabled dark | Texte von deaktivierten Elementen |
| text danger contrast | text danger contrast light | text danger contrast dark | Text auf danger signal |
| text danger | text danger light | text danger dark | Text bei Fehlerzustand z.B. Error Callout Header und Error Text bei Eingabefeldern |
| text primary contrast | text primary contrast light | text primary contrast dark | Text auf primary signal, interactive enabled, interactive hover, interactive active |
| 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. |
| text info contrast | text info contrast light | text info contrast dark | Text auf info signal |
| text info | text info light | text info dark | Text bei Informationszustand z.B. Info Callout Header |
| text success contrast | text success contrast light | text success contrast dark | Text auf success signal |
| text success | text success light | text success dark | Text bei Erfolgszustand z.B. Success Callout Header |
| text warning contrast | text warning contrast light | text warning contrast dark | Text auf warning signal |
| text warning | text warning light | text warning dark | Text bei Warnungszustand z.B. Warning Callout Header |
| text neutral contrast | text neutral contrast light | text neutral contrast dark | Text auf neutral signal |
| text neutral | text neutral light | text neutral dark | Text bei Neutralzustand z.B. Secondary Callout Header |
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 |
|---|---|---|---|
| danger | icon danger light | icon danger dark | Icons im Gefahrenzustand |
| success | icon success light | icon success dark | Icons im Erfolgszustand |
| warning | icon warning light | icon warning dark | Icons im Warnungszustand |
| info | icon info light | icon info dark | Icons im Informationszustand |
| 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) |
| icon interactive | icon interactive light | icon interactive dark | Interaktive Icons z.B. Inline Actions in Grids |
| icon interactive hover | icon interactive hover light | icon interactive hover dark | Hover Zustand bei interaktiven Icons |
| icon interactive active | icon interactive active light | icon interactive active dark | Gedrückter Zustand bei interaktiven Icons |
| icon interactive selected | icon interactive selected light | icon interactive selected dark | Ausgewählter Zustand bei interaktiven Icons (z.B. bei Application Bar, Sidepanel) |
| icon interactive disabled | icon interactive disabled light | icon interactive disabled dark | Deaktivierter Zustand bei interaktiven Icons |
| icon interactive contrast | icon interactive contrast light | icon interactive contrast dark | Interactive Icons auf Signal Tokens |
| 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 |
|---|---|---|---|
| field background | field background light | field background dark | Hintergrund von Eingabefeldern |
| field background disabled | field background disabled light | field background disabled dark | Hintergrund von deaktivierten Eingabefeldern |
| field border enabled | field border enabled light | field border enabled dark | Bedienbarer Zustand Border von Eingabefeldern |
| field border hover | field border hover light | field border hover dark | Hover Zustand Border von Eingabefeldern |
| field border active | field border active light | field border active dark | Gedrückter Zustand Border von Eingabefeldern |
| field border disabled | field border disabled light | field border disabled dark | Deaktivierter Zustand Border von Eingabefeldern |
| field border read-only | field border read-only light | field border read-only dark | Read-Only Zustand Border von Eingabefeldern |
Split Layout
| Name | Wert Light Theme | Wert Dark Theme | Verwendet für |
|---|---|---|---|
| split layout handle | split layout handle light | split layout handle dark | Greifer beim Split Layout |
| split layout border hover | split layout border hover light | split layout border hover dark | Hover Zustand Border Split Layout |
Date Picker
| Name | Wert Light Theme | Wert Dark Theme | Verwendet für |
|---|---|---|---|
| date picker gradient background visible | date picker gradient background visible light | date picker gradient background visible dark | Overlay gradient |
| date picker gradient background not visible | date picker gradient background not visible light | date picker gradient background not visible dark | Overlay gradient |
| date picker separator | date picker separator light | date picker separator dark | Separator Punkte beim Datepicker im Overlay zwischen den unterschiedlichen Jahren |
Grid und Editable Grid
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 |
|---|---|---|---|
| grid border (base + contrast 20%) | grid border light | grid border dark | Border Grid und Editable Grid |
| grid background selected (base + primary light) | grid background selected light | grid background selected dark | Ausgewählter Zustand bei Grid Row |
| grid background hover (base + primary light) | grid background hover light | grid background hover dark | Hover Zustand bei Grid Row |
| editable grid background edited (base + yellow 30 bei 20%) | editable grid background edited light | editable grid background edited dark | Bearbeiteter Zustand bei Editable Grid |
| editable grid background danger (base + danger light) | editable grid background danger light | editable grid background danger dark | Danger Zustand bei Editable Grid |
AKDB Logo
| Name | Wert Light Theme | Wert Dark Theme | Verwendet für |
|---|---|---|---|
| AKDB Logo 1 | AKDB Logo 1 light | AKDB Logo 1 dark | Farbe AKDB Logo |
| 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 |
|---|---|---|---|
| X Range Chart 1 | X Range Chart 1 light | X Range Chart 1 dark | Fortschritt im X Range Chart |
| X Range Chart 2 | X Range Chart 2 light | X Range Chart 2 dark | Fortschritt im X Range Chart |
| X Range Chart 3 | X Range Chart 3 light | X Range Chart 3 dark | Fortschritt im X Range Chart |
| X Range Chart 4 | X Range Chart 4 light | X Range Chart 4 dark | Fortschritt im X Range Chart |
| X Range Chart 5 | X Range Chart 5 light | X Range Chart 5 dark | Fortschritt im X Range Chart |
| X Range Chart 6 | X Range Chart 6 light | X Range Chart 6 dark | Fortschritt im X Range Chart |
| X Range Chart 7 | X Range Chart 7 light | X Range Chart 7 dark | Fortschritt im X Range Chart |
| X Range Chart 8 | X Range Chart 8 light | X Range Chart 8 dark | Fortschritt im X Range Chart |
| X Range Chart 9 | X Range Chart 9 light | X Range Chart 9 dark | Fortschritt im X Range Chart |
| 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 |
|---|---|---|---|
| stepper gradient background | stepper gradient background light | stepper gradient background dark | Gradient beim Stepper (Pfeile Links und Rechts) |
| button field border disabled | button field border disabled light | button field border disabled dark | Disabled Border Button |
| checkbox background | checkbox background light | checkbox background dark | Checkbox Hintergrund |
| overlay background | overlay background light | overlay background dark | Hintergrund von Overlays wie z.B. Modal Dialogs |
| loading indicator background | loading indicator background light | loading indicator background dark | Hintergrund von Balken auf denen ein Ladeindikator angezeigt wird |
| multiselect chip background | multiselect chip background light | multiselect chip background dark | Hintergrund von Multiselect Chips |
| side panel badge | side panel badge light | side panel badge dark | badge im sidepanel |
| 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