Theme

Das Theme wird benötigt, um alle Styles für die Mate-Komponenten bereitzustellen. Ohne das Theme werden Komponenten zwar korrekt gerendert, aber vollständig ohne das AKDB-Erscheinungsbild – also unstyled. Das Einbinden des Themes ist daher ein Pflichtschritt beim Setup jeder Anwendung, die Mate-Komponenten verwendet.

Wie funktioniert das Theme?

Das Mate Theme bündelt die gesamten CSS-Stile des Design Systems. Es basiert auf Design Tokens – CSS Custom Properties im Namespace --mate-* (z. B. --mate-color-base-blue-60, --mate-space-m) –, die Farben, Abstände, Typografie, Radien und weitere visuelle Eigenschaften definieren. Diese Tokens werden vom Theme auf alle Vaadin- und Mate-Komponenten angewendet.

Wichtig: Verwende in Mate-Projekten ausschließlich --mate-*-Tokens für eigene Styles. Die Variablen --lumo-* und --aura-* des Vaadin-Basis-Themes sind im Mate-Kontext nicht definiert und führen zu fehlenden oder fehlerhaften Darstellungen.

Das Theme unterstützt Light Mode und Dark Mode und passt sich automatisch an die Systemeinstellung des Nutzers an.

Design Tokens

Alle visuellen Eigenschaften im Mate Design System sind als Design Tokens in CSS Custom Properties abgebildet. Sie ermöglichen konsistente, wartbare und skalierbare Benutzeroberflächen.

Beispiele:

Token	Verwendung
--mate-color-base-blue-60	Primärfarbe (Interaktionselemente)
--mate-space-m	Mittlerer Abstand (Standard-Spacing)
--mate-font-size-body	Schriftgröße für Fließtext
--mate-border-radius-m	Mittlerer Eckenradius für Komponenten

Tokens werden auf zwei Ebenen strukturiert:

• Core-Level-Tokens – skalare Werte (z. B. eine konkrete Farbe oder ein Pixelwert).
• Component-Level-Tokens – semantische Zuweisungen (z. B. „Hintergrundfarbe eines Buttons im Hover-Zustand").

Eine vollständige Übersicht der verfügbaren Tokens findest du in der Design Tokens Dokumentation.