Design Tokens

Design Tokens sind die benannten Werte, aus denen das Mate Design System Farben, Größen, Abstände, Schrift und Schatten seiner Oberflächen aufbaut.

Overview

Was ein Design Token ist

Design Tokens sind die visuellen Bausteine des Design Systems. Sie treten an die Stelle hartkodierter Werte wie Hex-Werten für Farben oder Pixelwerten für Größen und Abstände und halten Benutzeroberflächen dadurch wartbar, konsistent und skalierbar.

Alle öffentlichen Tokens sind CSS Custom Properties im Namensraum --mate-*. Es gibt 473 davon; dieselben 473 liefert das Paket @mate/token als JavaScript-Konstanten aus. Nicht jeder Token ist jedoch CSS: Aus derselben Quelle entstehen zusätzlich die Standardtexte im Paket @mate/default-text, die Icon-Namen im Paket @mate/icon und die Illustrationen im Paket @mate/illustration. Ihre Kataloge stehen unter Default Texts, Icons und Illustrations.

Die vier Ebenen

Die CSS-Tokens sind in vier Ebenen aufgeteilt. Drei davon liegen als generierte Dateien unter packages/theme/gen/, die vierte ist eine Namensgruppe innerhalb der dritten. Die Ladereihenfolge des Themes folgt diesem Aufbau: erst die festen Werte, dann je Achse die internen Varianten und unmittelbar danach deren Zuordnung.

Ebene	Datei im Theme	Tokens	Selektor	Für Anwendungen
Core	gen/base-colours.css gen/base-sizes.css gen/style.css	147	:root	nur, wenn kein semantischer Token die Rolle trägt
Interne Theme-Varianten	gen/theme.css gen/device.css	652	:root	nein, nicht öffentlich
Semantische Ebene	gen/theme-switch.css gen/device-switch.css	326	:root und [theme~="light"] bzw. [theme~="desktop"], dazu [theme~="dark"] bzw. [theme~="mobile"] und je eine Media Query	ja, das ist die öffentliche Ebene
Component-Ebene	dieselben zwei Dateien	71, in den 326 enthalten	wie semantische Ebene	ja, aber nur für die jeweilige Komponente

Die 473 öffentlichen Tokens sind die Summe aus Core-Ebene und semantischer Ebene. Die 71 Component-Tokens sind ein Teil der 326 und werden nicht dazugezählt. Die 652 internen Varianten zählen nicht mit, weil sie nicht Teil der öffentlichen Schnittstelle sind und auch von @mate/token nicht exportiert werden.

Core-Ebene

Die Core-Ebene trägt die Rohwerte. gen/base-colours.css enthält 102 Farben – zehn Farbtöne zu je zehn Stufen sowie Weiß und Schwarz. gen/base-sizes.css enthält 43 Tokens für Schriftgrößen, Schriftfamilien, Schriftschnitte, die Sizing- und die Spacing-Skala sowie Rahmenstärken und Eckenradien; gen/style.css enthält die beiden Schattentokens. Alle 147 stehen mit festen Werten am Wurzelelement und ändern sich durch kein Theme. Sie sind vollständig dokumentiert, in eigenem CSS ist ihnen aber die semantische Ebene vorzuziehen, weil sie beim Theme-Wechsel nicht umschalten.

Interne Theme-Varianten

Die internen Varianten sind die Wertevorräte, aus denen sich die Themes bedienen. gen/theme.css enthält 316 Tokens, je 158 mit dem Segment --mate-light- und --mate-dark-; gen/device.css enthält 336 Tokens, je 168 mit dem Segment --mate-desktop- und --mate-mobile-. Alle 652 stehen ebenfalls am Wurzelelement, sind unabhängig vom aktiven Theme immer gleichzeitig vorhanden und schalten selbst nicht um. Anwendungen verwenden sie nicht: Wer --mate-mobile-sizing-md statt --mate-sizing-md schreibt, schreibt ein Theme fest und verliert die automatische Umschaltung.

Semantische Ebene

Die semantische Ebene ist die öffentliche Ebene und die einzige, die umschaltet. Sie umfasst 326 Tokens: 158 Farb-Tokens in gen/theme-switch.css und 168 Größen-, Abstands- und Schrift-Tokens in gen/device-switch.css. Jeder dieser Tokens trägt keinen eigenen Wert, sondern verweist auf eine interne Variante, und zwar dreimal – im Block für Light beziehungsweise Desktop, im Block für Dark beziehungsweise Mobile und in einer Media Query, die die Systemeinstellung auswertet. In eigenem CSS ist diese Ebene zu verwenden.

Component-Ebene

Die Component-Ebene umfasst die 71 Tokens mit dem Präfix --mate-components-, davon 57 Farb-Tokens und 14 Größen-Tokens. Sie ist keine fünfte Datei, sondern eine Namensgruppe innerhalb der semantischen Ebene: Diese Tokens stehen in denselben beiden Dateien, unter denselben Selektoren und schalten genauso um. Jeder von ihnen vermisst oder färbt ein Bauteil einer bestimmten Komponente, etwa --mate-components-button-button-height. Für eigene Elemente sind deshalb nicht sie zu verwenden, sondern die allgemeine semantische Ebene.

Die Tokendefinition beschränkt sich vollständig auf packages/theme/gen/. Die Verzeichnisse base, color/base, color/contrast und size/base des Theme-Pakets enthalten das Styling der einzelnen Komponenten und deklarieren keinen einzigen Token; sie konsumieren nur. Eine Ausnahme fällt dabei auf: color/contrast verwendet überhaupt keine Tokens. Daraus folgt eine wichtige Konsequenz für den High Contrast Mode – dort werden CSS-Systemfarben unmittelbar auf die Eigenschaften der Komponenten gesetzt, und die Farb-Tokens behalten ihren Wert. Eigenes CSS, das mit Tokens arbeitet, wechselt im Kontrastmodus also nicht automatisch mit. Ausführlich steht das unter High Contrast Theme.

Naming-Convention

Der Name eines Tokens trägt die Information mit: Er benennt die Ebene, die Kategorie und die Stufe. Wer den Aufbau kennt, findet den passenden Token, ohne die Kataloge durchzusehen. Die Systematik unterscheidet Core-Level-Tokens, die eine Kategorie des Systems beschreiben, und Component-Level-Tokens, die einem Bauteil einer Komponente zugeordnet sind.

Core-Level-Tokens

Die Benennung der Core-Level-Tokens beruht auf folgender Systematik:

broken_image

Figma

core-level-naming

Beispiele für Core-Level-Tokens

broken_image

Figma

core-level-examples

Jeder öffentlich nutzbare Token beginnt mit dem Präfix --mate-. Danach folgt die Kategorie, zuletzt die Stufe.

Ein Core-Farbtoken heißt --mate-<farbton>-<stufe>. Das System kennt zehn Farbtöne: red, magenta, purple, blue, cyan, teal, green, orange, yellow und gray. Jeder Farbton hat zehn Stufen von 10 bis 100 in Zehnerschritten, niedrige Stufen sind hell, hohe Stufen dunkel. --mate-blue-70 ist damit die siebte Stufe des Blautons. Alle Farbwerte stehen unter Colors.

Ein Core-Größentoken heißt --mate-<kategorie>-<zahl>. Die dreistellige Zahl ist der Wert in rem, mit 100 multipliziert, auf eine ganze Zahl gekürzt und mit führenden Nullen aufgefüllt: --mate-sizing-150 trägt 1.5rem, --mate-spacing-075 trägt 0.75rem, --mate-border-width-006 trägt 0.063rem und --mate-typography-font-sizing-112 trägt 1.125rem. Diese Systematik verwenden fünf Kategorien: sizing, spacing, border-width, border-radius und typography-font-sizing. Der Name nennt hier den Wert und nicht den Zweck – deshalb ist diese Ebene die Rohskala, aus der die semantische Ebene schöpft.

Auf der semantischen Ebene steht statt der Zahl ein Stufenkürzel. Die folgende Tabelle führt alle vorkommenden Kürzel auf. Nicht jede Kategorie kennt jede Stufe.

Stufe	Bedeutung	Kategorien
zero	Nullwert, kein Abstand	spacing
xxxxs	kleinste Stufe der Skala	sizing
xxxs	eine Stufe unter xxs	sizing, spacing
xxs	eine Stufe unter xs	sizing, spacing
xs	extra small	sizing, spacing, typography
sm	small	sizing, spacing, icon-sizing, border-width, corner-radius, typography
sm-md	Zwischenstufe zwischen sm und md	icon-sizing
md	medium, mittlere Stufe	sizing, spacing, icon-sizing, border-width, corner-radius, typography
md-lg	Zwischenstufe zwischen md und lg	sizing
lg	large	sizing, spacing, icon-sizing, border-width, corner-radius, typography
xl	eine Stufe über lg	sizing, spacing, typography
xxl	eine Stufe über xl	sizing, spacing, typography
xxxl	größte Stufe der Skala	sizing, spacing
margin	Standardwert für Außenabstände	spacing
padding	Standardwert für Innenabstände	spacing

zero, margin und padding sind keine Größenstufen, sondern benannte Festlegungen: --mate-spacing-margin und --mate-spacing-padding verweisen beide auf --mate-spacing-md. Die Zwischenstufen sm-md und md-lg gibt es nur dort, wo eine Kategorie einen Wert zwischen zwei Standardstufen braucht – --mate-icon-sizing-sm-md bei den Icon-Größen, --mate-sizing-md-lg bei den Größen.

Bei der Typografie steht das Stufenkürzel nicht am Ende, sondern hinter der Rolle, etwa in --mate-typography-heading-xl-font-size oder --mate-typography-body-md-regular-font-size. Dort kennt nur die Rolle heading die Stufen xl und xxl; die Rollen body und label reichen von xs bis lg und tragen zusätzlich den Schriftschnitt regular, medium oder bold im Namen.

Farbtokens mit einer Deckkraft tragen diese als Endung <zahl>pct. Die Endung kommt ausschließlich in der Gruppe shades vor: --mate-shades-contrast-5pct bis --mate-shades-contrast-100pct – Stufe 5, danach Zehnerschritte – sowie --mate-shades-shade-10pct bis --mate-shades-shade-50pct. Die Zahl benennt also die Deckkraft in Prozent und nicht eine Position in einer Farbskala.

Component-Level-Tokens

Die Benennung der Component-Level-Tokens beruht auf folgender Systematik:

broken_image

Figma

component-level-naming

Beispiele für Component-Level-Tokens

broken_image

Figma

component-level-examples

Ein Component-Level-Token heißt --mate-components-<gruppe>-<eigenschaft>. Die Gruppe benennt die Komponente oder den Komponentenbereich, die Eigenschaft benennt das Bauteil und, wo nötig, dessen Zustand: --mate-components-field-border-hover ist die Rahmenfarbe eines Eingabefeldes im Hover-Zustand, --mate-components-grid-background-selected die Hintergrundfarbe einer ausgewählten Tabellenzeile.

Es gibt sechzehn Gruppen. Farben liegen in akdb-logo, calendar-event, date-picker, field, grid, split-layout, x-range-chart und other, Größen in button, checkbox, facets, global-header, input, notification-bar, radio-button und stepper.

Die Gruppe other ist keine Komponente, sondern eine Sammelgruppe. Sie führt die Farbtokens einzelner Komponenten zusammen, für die sich keine eigene Gruppe lohnt, etwa --mate-components-other-overlay-background für den Hintergrund von Overlays oder --mate-components-other-side-panel-badge für das Badge im Side Panel.

Component-Level-Tokens tragen sowohl Farben als auch Größen. --mate-components-field-background ist eine Farbe und wechselt mit der Farb-Achse, --mate-components-input-input-height ist eine Größe und wechselt mit der Geräte-Achse. Die Größen der Komponenten stehen unter Sizing, ihre Farben unter Colors.

Neben den öffentlichen Tokens liefert das Theme interne Varianten aus. Sie tragen die Theme-Achse als zweites Segment, direkt hinter --mate-: light und dark für die Farb-Achse, desktop und mobile für die Geräte-Achse. --mate-light-text-body und --mate-dark-text-body sind die beiden Ausprägungen von --mate-text-body, --mate-desktop-spacing-md und --mate-mobile-spacing-md die beiden Ausprägungen von --mate-spacing-md. In eigenem CSS ist der Token ohne Achsensegment zu verwenden, weil nur er beim Theme-Wechsel umgeschaltet wird – siehe Themes.

Unregelmäßigkeiten in den Namen

Ein Teil der ausgelieferten Tokennamen folgt der Systematik nicht vollständig. Die Abweichungen sind bekannt; die Namen werden so ausgeliefert und müssen deshalb genau so geschrieben werden.

Info für Dev

Einige Tokennamen wiederholen den Namen ihrer Gruppe. Das ist kein Tippfehler, die Tokens heißen tatsächlich so.

Genau doppelt steht der Gruppenname in --mate-components-button-button-height, --mate-components-checkbox-checkbox-size, --mate-components-global-header-global-header-height, --mate-components-input-input-height, --mate-components-stepper-stepper-height und --mate-touch-target-touch-target-height.

In der Einzahl wiederholt wird er bei den acht Tokens der Gruppe illustrations, deren Namen alle mit illustration beginnen, etwa --mate-illustrations-illustration-background. Ebenso wiederholen --mate-white-and-black-white und --mate-white-and-black-black den Farbnamen aus ihrer Gruppe.

Die beiden Schatten-Tokens --mate-style-shadow-elevated und --mate-style-shadow-blocking tragen mit style ein zusätzliches Segment, das bei keiner anderen Kategorie vorkommt.

Eine zweite Unregelmäßigkeit betrifft die Skalen für Ecken und Rahmen. Bei den Eckenradien heißt die Rohskala --mate-border-radius-*, die semantische Ebene darüber aber --mate-corner-radius-*. Bei den Rahmenstärken heißen dagegen beide Ebenen --mate-border-width-*; nur die Endung unterscheidet sie: --mate-border-width-012 gehört zur Rohskala, --mate-border-width-md zur semantischen Ebene. Beide Skalen sind unter Sizing vollständig aufgeführt.

Token-Verzeichnis

Das Design System liefert 473 öffentliche CSS Custom Properties aus. Sie verteilen sich auf drei Themenbereiche – Farbe, Maße und Typografie – sowie auf drei Kategorien, die keine CSS-Tokens sind. Die folgenden Tabellen führen jede Kategorie mit ihrem Präfixmuster, ihrer Anzahl, ihrer Theme-Abhängigkeit und der Seite auf, die die Werte katalogisiert. Ein – in der Spalte „Theme-Achse" bedeutet, dass der Wert in keinem Theme wechselt.

Farbe

Die Farbtokens machen mit 260 Tokens den größten Teil der Schnittstelle aus. Die Rohskala trägt feste Werte, alle übrigen Kategorien werden je Farb-Theme neu zugewiesen.

Kategorie	Tokens	Anzahl	Theme-Achse	Katalog
Core-Farben (Rohskala)	--mate-red-*, --mate-magenta-*, --mate-purple-*, --mate-blue-*, --mate-cyan-*, --mate-teal-*, --mate-green-*, --mate-orange-*, --mate-yellow-*, --mate-gray-*	100	–	Colors
Schwarz und Weiß	--mate-white-and-black-*	2	–	Colors
Shades	--mate-shades-*	18	Light / Dark	Colors
Signal	--mate-signal-*	12	Light / Dark	Colors
Interactive	--mate-interactive-*	12	Light / Dark	Colors
Background	--mate-background-*	9	Light / Dark	Colors
Border	--mate-border-base, --mate-border-light	2	Light / Dark	Colors
Data	--mate-data-*	10	Light / Dark	Colors
Text	--mate-text-*	18	Light / Dark	Colors
Icon	--mate-icon-* ohne --mate-icon-sizing-*	12	Light / Dark	Colors
Component-Farbtokens	--mate-components-* mit Farbwert	57	Light / Dark	Colors
Illustrationsfarben	--mate-illustrations-illustration-*	8	Light / Dark	Illustrations

Die Component-Farbtokens umfassen die Bauteile Field, Split Layout, Calendar Event, Date Picker, Grid, AKDB Logo, X-Range Chart und eine Sammelgruppe --mate-components-other-*; allein auf Calendar Event entfallen 20 Tokens.

Größe, Abstand und Radius

Diese Kategorien beschreiben Maße, Abstände, Radien, Linienbreiten und Schatten. Sie stehen überwiegend auf zwei Ebenen bereit: eine Rohskala mit numerischer Endung und eine semantische Ebene mit T-Shirt-Endung.

Kategorie	Tokens	Anzahl	Theme-Achse	Katalog
Größen (Rohskala)	--mate-sizing-012 bis --mate-sizing-400	11	–	Sizing
Größen (semantisch)	--mate-sizing-xxxxs bis --mate-sizing-xxxl	11	je Gerät zugewiesen, Wert identisch	Sizing
Touch Target	--mate-touch-target-touch-target-height	1	Desktop / Mobile	Sizing
Abstände (Rohskala)	--mate-spacing-000 bis --mate-spacing-350	12	–	Grid & Spacing
Abstände (semantisch)	--mate-spacing-zero bis --mate-spacing-xxxl, --mate-spacing-margin, --mate-spacing-padding	12	Desktop / Mobile	Grid & Spacing
Eckenradien (Rohskala)	--mate-border-radius-012, -025, -050	3	–	Sizing
Eckenradien (semantisch)	--mate-corner-radius-sm, -md, -lg	3	je Gerät zugewiesen, Wert identisch	Sizing
Rahmenstärken (Rohskala)	--mate-border-width-006, -012, -025	3	–	Sizing
Rahmenstärken (semantisch)	--mate-border-width-sm, -md, -lg	3	je Gerät zugewiesen, Wert identisch	Sizing
Icon-Größen	--mate-icon-sizing-*	4	Desktop / Mobile	Icons
Component-Größentokens	--mate-components-* mit Maßwert	14	Desktop / Mobile	Sizing
Schatten	--mate-style-shadow-elevated, --mate-style-shadow-blocking	2	–	Shadows

Die semantischen Größen, Eckenradien und Rahmenstärken stehen zwar in derselben Datei wie die geräteabhängigen Tokens und werden für Desktop und Mobile getrennt zugewiesen, tragen dort aber denselben Wert. Sie wachsen auf mobilen Geräten also nicht mit. Von den zwölf semantischen Abständen ist allein --mate-spacing-zero wertgleich, die übrigen elf rücken im Mobile Theme eine Stufe nach oben.

Typografie

Die Typografie umfasst 134 Tokens. Die Rohskala legt Schriftgrößen, Schriftarten und Schriftschnitte fest, die Textrollen setzen daraus vollständige Schriftstile für Überschriften, Fließtext und Beschriftungen zusammen.

Kategorie	Tokens	Anzahl	Theme-Achse	Katalog
Schriftgrößen (Rohskala)	--mate-typography-font-sizing-*	9	–	Typography
Schriftarten	--mate-typography-font-family, --mate-typography-font-family-icon	2	–	Typography
Schriftschnitte	--mate-typography-font-weight-*	3	–	Typography
Überschriften	--mate-typography-heading-*	24	Desktop / Mobile	Typography
Fließtext	--mate-typography-body-*	48	Desktop / Mobile	Typography
Beschriftungen	--mate-typography-label-*	48	Desktop / Mobile	Typography

Jede Textrolle besteht aus vier Tokens: font-family, font-size, line-height und font-weight. Beim Wechsel der Geräte-Achse ändern sich davon nur Schriftgröße und Zeilenhöhe. Schriftart und Schriftschnitt bleiben in jedem Theme gleich.

Nicht-CSS-Tokens

Drei Kategorien sind ebenfalls Bestandteil des Design Systems, werden aber nicht als CSS Custom Property ausgeliefert, sondern als Konstanten oder als Dateien. Sie zählen deshalb nicht in die Summe der CSS-Tokens.

Kategorie	Tokens	Anzahl	Theme-Achse	Katalog
Standardtexte	statische Konstanten der Klasse DefaultText im Paket @mate/default-text	73	–	Default Texts
Icons	Stringkonstanten Symbol* im Paket @mate/icon	3497	–	Icons
Illustrationen	SVG-Dateien im Paket @mate/illustration	99	–	Illustrations

Die 99 SVG-Dateien sind 33 Motive in je drei Größen. Die Dateien selbst wechseln mit keinem Theme, ihre Farben stammen jedoch aus den Tokens --mate-illustrations-illustration-* und folgen damit der Farb-Achse. Die 3497 Icons und die 73 Standardtexte sind in jedem Theme dieselben.

Insgesamt stellt das Design System 473 öffentliche CSS-Tokens bereit: 260 für Farbe, 79 für Größen, Abstände, Radien und Schatten sowie 134 für Typografie. Dazu kommen 652 interne Varianten, deren Name ein zusätzliches Segment light, dark, desktop oder mobile trägt. Sie halten die konkreten Werte je Theme und werden von den öffentlichen Tokens referenziert; sie sind nicht Teil der öffentlichen Schnittstelle.

Guidelines

Welche Ebene verwendet wird

In eigenem CSS wird die semantische Ebene verwendet, also Tokens wie --mate-text-heading, --mate-spacing-md oder --mate-corner-radius-md, dazu die Component-Ebene mit dem Präfix --mate-components-. Nur diese Namen sind an die Theme-Umschaltung angeschlossen: Wechselt das Theme, greift ein anderer Selektor und der Token trägt einen anderen Wert – am eigenen CSS ändert sich nichts.

Core-Tokens wie --mate-blue-60 oder --mate-spacing-100 sind Rohwerte und in jedem Theme gleich. Sie kommen nur dort zum Einsatz, wo kein semantischer Token die benötigte Rolle trägt.

Die internen Theme-Varianten mit einem Segment light, dark, desktop oder mobile werden nie direkt verwendet. Sie sind in einem einzigen, bedingungslosen Block am Wurzelelement deklariert und wechseln deshalb beim Theme-Wechsel nicht mit. Wer sie direkt setzt, friert die Darstellung auf ein Theme ein: --mate-mobile-spacing-md bleibt auch auf dem Desktop bei 1.25rem, während --mate-spacing-md dort 1rem liefert.

Info für Dev

Verwende in eigenem CSS die semantische Ebene und die Component-Ebene, also --mate-text-heading, --mate-spacing-md oder --mate-components-field-background.

Core-Tokens wie --mate-blue-60 nur dort, wo kein semantischer Token die Rolle trägt.

Tokens mit dem Segment light, dark, desktop oder mobile nie – sie sind fest am Wurzelelement gesetzt und schalten deshalb nicht um.

Was Themes an Tokens verändern

Ein Theme tauscht ausschließlich Tokenwerte aus. Welche Kategorien betroffen sind, hängt von der Achse ab:

Achse	Werte im theme-Attribut	Veränderte Tokenkategorien
Farbe	light, dark	--mate-shades-*, --mate-signal-*, --mate-background-*, --mate-text-*, --mate-icon-*, --mate-border-*, --mate-interactive-*, --mate-data-*, --mate-illustrations-* und die farbbezogenen --mate-components-*
Gerät	desktop, mobile	--mate-spacing-*, --mate-sizing-*, --mate-icon-sizing-*, --mate-typography-*, --mate-touch-target-*, --mate-corner-radius-*, --mate-border-width-* und die größenbezogenen --mate-components-*
High Contrast	mate-high-contrast	keine

Die Geräte-Achse bildet --mate-corner-radius-*, --mate-border-width-* und --mate-sizing-* zwar mit ab, hinterlegt für Desktop und Mobile aber dieselben Werte – Eckenradien, Rahmenstärken und Größen bleiben damit in jedem Theme gleich.

Der High Contrast Mode ist die Ausnahme: Er tauscht keine Tokenwerte, sondern setzt CSS-Systemfarben unmittelbar auf die Eigenschaften einzelner Komponenten. Eigenes Token-CSS bleibt in diesem Modus wirkungslos, solange es nicht selbst Systemfarben verwendet.

Details zu den einzelnen Themes stehen unter Themes, Light & Dark Theme, Mobile Theme und High Contrast Theme.

Develop

Generierungskette

Die Tokens werden nicht von Hand geschrieben, sondern generiert. Grundlage sind JSON-Dateien im Token-Projekt, die nach den Tokenkategorien benannt sind. Aus ihnen erzeugt Style Dictionary die Zieldateien; das Ergebnis liegt im Paket @akdb/design-tokens, das dieses Repository in Version 2.3.1 als Entwicklungsabhängigkeit führt. Das Skript npm run tokens ruft dessen Kommandozeilenwerkzeug je Plattform einmal auf und kopiert die erzeugten Dateien in die Paketverzeichnisse.

Quelldatei	Erzeugnis	Inhalt
base-colours.json	packages/theme/gen/base-colours.css	Core-Farbpaletten sowie Schwarz und Weiß
base-sizes.json	packages/theme/gen/base-sizes.css	Core-Skalen für Abstände, Größen, Schriftgrößen, Eckenradien und Rahmenstärken
theme.json	gen/theme.css gen/theme-switch.css	die Farbwerte je Theme als --mate-light-* und --mate-dark-* deren Zuweisung auf die semantischen Namen
device.json	gen/device.css gen/device-switch.css	die Größenwerte je Gerätetheme als --mate-desktop-* und --mate-mobile-* deren Zuweisung auf die semantischen Namen
style.json	gen/style.css	die beiden Schattentokens
alle fünf CSS-Quellen	packages/token/gen/token.js	alle CSS-Variablen als JavaScript-Konstanten, etwa MateRed10
icons.json	packages/icon/gen/material-symbol.js	die Namen aller Material Symbols als JavaScript-Konstanten
default-texts.json	packages/default-text/src/default-text.ts	die Standardtexte für Dialoge, Toasts und Meldungen
illustrations.json	packages/illustration/{small,medium,large}	die Illustrationen als SVG in drei Größen

Tokens werden nicht in diesem Repository bearbeitet, sondern im GitLab-Projekt der Design Tokens. Alle Zielverzeichnisse sind von der Versionskontrolle ausgenommen: Eine Änderung an einer generierten Datei ist weder versioniert noch dauerhaft und geht beim nächsten Lauf verloren.

Info für Dev

Die Tokens werden im GitLab-Projekt https://git.akdb.de/akdb/ds/design-tokens gepflegt.

Änderungen an den generierten Verzeichnissen packages/theme/gen, packages/token/gen, packages/icon/gen, packages/illustration oder an packages/default-text/src gehen beim nächsten Generierungslauf verloren.

Pakete

Die generierten Dateien werden über fünf Pakete ausgeliefert:

Paket	Inhalt	Für wen
@mate/theme	das gesamte CSS des Design Systems: die generierten Tokendateien samt Theme- und Geräteumschaltung, die Komponentenstile und die Regeln für den High Contrast Mode	jede Anwendung, die Mate-Komponenten verwendet
@mate/token	die Design Tokens als JavaScript-Konstanten, deren Wert jeweils ein Verweis auf die CSS-Variable ist	Anwendungen, die Tokens in JavaScript oder TypeScript statt in CSS referenzieren
@mate/icon	die Icon-Komponente und die generierte Liste der Material-Symbol-Namen	Anwendungen, die Icons einbinden
@mate/default-text	die vorformulierten Standardtexte als Konstanten	Anwendungen, die Meldungen, Dialoge und Toasts einheitlich beschriften
@mate/illustration	die Illustrationen als SVG in den Größen small, medium und large	Anwendungen, die Empty States und Fehlerseiten bebildern

Wie die Pakete installiert und eingebunden werden, steht unter Installation und Theme.

Storybook

Die Tokens können mit ihren Werten je Theme in Storybook betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/grundlagen-design-tokens--docs