# Design Tokens Design Tokens übersetzen grundlegende Designentscheidungen wie Farben, Abstände und mehr in eine einheitliche Sprache. Entwickler und Designer nutzen diese Sprache, um ein konsistentes, skalierbares und wiederverwendbares Design in der gesamten Benutzeroberfläche sicherzustellen. --- # Was sind Design Tokens? Ein Design Token (kurz: Token) besteht aus 2 Teilen: Name und Wert. Der Name eines Tokens folgt einem klaren und verständlichen Benennungsschema. Der Wert kann alles beinhalten, was zum Erstellen eines Designs notwendig ist: Eine Farbe in RGB, eine Schriftart, eine Animations-Geschwindigkeit oder einen anderen Token. --- # Vorteile - **Verringerter Wartungsaufwand:** Tokens können aufeinander basieren und die Eigenschaften eines anderen Tokens erben. Dadurch wirken sich Änderungen an einem Token-Wert automatisch auf alle Stellen aus, an denen er verwendet oder referenziert wird. Das spart Zeit und reduziert Fehler. - **Verbesserte Zusammenarbeit:** Design und Development nutzen mit Tokens eine gemeinsame Sprache. Dadurch lassen sich Designentscheidungen leicht verständlich ausdrücken und ebenso einfach im Code implementieren. - **Einheitliches Design:** Farben, Schriften, Größen und mehr werden überall einheitlich verwendet. - **Wiederverwendbarkeit:** Tokens lassen sich problemlos in mehreren Projekten und Frontends gleichzeitig verwenden. --- # Benennung von Tokens Unsere Tokens sind leicht verständlich und nachvollziehbar benannt, um komplexe Informationen konsistent und selbsterklärend zu vermitteln. ## Schema Jeder Token-Name folgt einem dreistufigen Benennungsschema: Context, Common Unit und Clarification. Dieses Schema beginnt mit einer allgemeinen Einordnung und wird von Stufe zu Stufe immer detaillierter. **ℹ️ Info** ```tsx import { Badge, ColumnLayout, Text, } from "@mittwald/flow-react-components"; Context Einordnung
z. B. Farbe, Component Common Unit Kategorie
z. B. Variante, Sizing, Styling Clarification Spezifizierung
z. B. Farbwert, State ``` ### Context Der Context stellt den allgemeinsten Zusammenhang dar, auf den ein Token sich beziehen kann. ### Common Unit Die Common Unit ordnet den Token in eine spezifische Kategorie innerhalb des Context ein. ### Clarification Die Clarification ist die präziseste Ebene, die den Token klar definiert und abgrenzt. ## Beispiele **hosting-blue-800** Der Token `hosting-blue-800` definiert eine spezifische [Color](/02-foundations/01-design/02-colors). Der Name der Farbe `hosting-blue` gibt den **Context** an. Die Zahl `800` ist die **Clarification**, die die Abstufung der Farbe definiert und auf den genauen Farbwert `#0054F5` im Designsystem verweist. **primary-solid-background-color-default** Dieser Token definiert die primäre Hintergrundfarbe einer „Solid“-Variante. `primary` gibt als Context an, dass es sich um eine primäre Farbe handelt. Die Common Unit `solid-background-color` verdeutlicht, dass die Farbe als Hintergrundfarbe in der „Solid“-Variante verwendet wird. Die **Clarification** `default` gibt an, dass der Token für den Default-State verwendet wird. **alert-info-outline-border-color-default** Dieser Token definiert eine Designentscheidung für eine spezifische Component, in diesem Fall einen [Alert](/04-components/status/alert/overview). `alert` liefert den **Context** und stellt klar, dass der Token nur für diese Komponente verwendet wird. `info-outline-border-color` als **Common Unit** kategorisiert den Token weiter ein: Er wird für die Border-Color eines Alerts in der „Info“- und „Outline“-Variante verwendet. `default` gibt als **Clarification** an, dass der Token für den Default-State genutzt wird. --- # Token-Arten und Struktur Im Benennungsschema haben wir bereits Tokens mit unterschiedlicher Komplexität betrachtet. In diesem Abschnitt erklären wir die Konzepte, die den verschiedenen Token-Arten und deren Struktur zugrunde liegen. ## Global Token Diese Tokens bilden die Grundlage des gesamten Designsystems. Sie definieren grundlegende Eigenschaften wie Farben, Schriftarten und Abstände, die überall im System verwendet werden können. Global Tokens sollten nur eingesetzt werden, wenn der Verwendung kein tieferes Konzept zugrunde liegt. Ein gutes Beispiel dafür sind Farben, die einen rein dekorativen Zweck erfüllen. Diese müssen nicht weiter definiert oder in eine Kategorie eingeordnet werden, da sie einen rein optischen Nutzen erfüllen und keiner tieferen Idee folgen. | Token-Name | Wert | | ----------------- | ------- | | hosting-blue--800 | #0054F5 | | size--s | 8px | ## Alias Token Alias Tokens referenzieren andere Tokens und weisen ihnen eine spezifischere Bedeutung zu. Sie helfen dabei, allgemeine Werte in spezifischen Kontexten einzusetzen. Ein Alias Token konkretisiert z. B. bei einer Color, in welchem Zusammenhang (Primary, Accent, Danger, ...) sie genutzt werden soll. Sie beziehen sich immer auf einen Global Token und dürfen keine hard coded Werte besitzen. Wir nutzen diese Ebene vor allem für die Definition von Tokens, die sich keiner bestimmten Variante (Solid, Soft, Outlined, Plain) zuordnen lassen, aber in eine gemeinsame Kategorie zusammengefasst werden können. | Token-Name | Wert | | ----------------------- | ----------------- | | primary--color--default | hosting-blue--800 | | border-width--400 | size--s | ## Alias Token 2 Tokens dieser Ebene besitzen einen noch höheren Detailgrad. Sie werden oft einer spezifischen Variante zugeordnet und fügen weitere Details hinzu, die über den ersten Alias Token hinausgehen. Dabei achten wir auch darauf, die Token so zu definieren, dass sie innerhalb der Variante gut harmonieren. So legen wir z. B. bei einer bestimmten Variante die Farben so fest, dass die Content-Farbe optisch zur Hintergrundfarbe passt und barrierefrei lesbar ist. Ein Alias Token 2 darf keine hard coded Werte besitzen, sich aber sowohl auf Alias als auch Global Token beziehen. | Token-Name | Wert | | --------------------------------------- | ----------------------- | | primary-solid-background-color--default | primary--color--default | | info-outline-border-color--default | info-color--default | ## Component Specific Token Diese Tokens sind speziell auf einzelne Komponenten zugeschnitten. Sie vermitteln einzigartige Designentscheidungen, die ausschließlich für eine bestimmte Component relevant sind. Sie enthalten den höchsten Detailgrad der Token-Struktur und sind somit das Gegenteil eines Global Tokens. | Token-Name | Wert | | ----------------------------------------------- | --------------------------------------- | | button--primary-solid-background-color--default | primary-solid-background-color--default | | alert--info-outline-border-color--default | info-outline-border-color--default |