Liste der Design-Token
Token
Design-Token sind die Single Source of Truth (einheitliche Datenquelle), die zum Benennen und Speichern von Designentscheidungen wie Farbe, Typografie, Abstände, Zeilenhöhe und Opazität verwendet wird. Das Jutro Design System enthält mehr als 1000 Entscheidungen zu UI-Elementen und Layout. Mit Design-Token behalten wir den Überblick über diese Entscheidungen.
Ebenen von Design-Token
Es sind drei Ebenen von Design-Token verfügbar:
- Globale Token: Stellen die Optionen dar, auf die Token in anderen Ebenen verweisen. Ein Beispiel sind Markenfarben.
- Semantische Token: Haben eine semantische Bedeutung. Sie definieren beispielsweise die Farbe von Fehlermeldungen.
- Komponenten-Token: Sind spezifisch für die Komponenten im Jutro Design System. Ein Beispiel ist ein Token, das die Rahmenfarbe für den aktiven Zustand von sekundären Schaltflächen bestimmt.
Die folgenden Tabellen enthalten eine kuratierte Liste der strategischen Design-Token. Diese Liste konzentriert sich hauptsächlich auf die semantische Ebene, damit Sie Themes auf einfachste Weise verstehen und implementieren können. Für alle Token in dieser Untergruppe sind Name und Verwendungsbeschreibung angegeben, damit Sie das für den jeweiligen Fall geeignete Token finden können.
Farbe
Text
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.color.text.regular | Textfarbe | 10.0 |
| jds.color.text.subtle | Dezente Textfarbe | 10.0 |
| jds.color.text.inverse | Umgekehrte Textfarbe | 10.0 |
| jds.color.text.brand | Markenfarbe für Text | 10.0 |
| jds.color.text.brand-hover | Markenfarbe für Text, schwebender Zustand | 10.0 |
| jds.color.text.brand-active | Markenfarbe für Text, aktiver Zustand | 10.0 |
| jds.color.text.brand-accent-1 | Markenfarbe, Akzent 1 für Text | 10.0 |
| jds.color.text.brand-accent-2 | Markenfarbe, Akzent 2 für Text | 10.0 |
| jds.color.text.error | Textfarbe für Fehler | 10.0 |
| jds.color.text.information | Textfarbe für Information | 10.0 |
| jds.color.text.success | Textfarbe für Erfolg | 10.0 |
| jds.color.text.warning | Textfarbe für Warnung | 10.0 |
| jds.color.text.required | Farbe zur Angabe einer erforderlichen Aktion, standardmäßig ein Sternchen | 10.0 |
| jds.color.text.link.default | Farbe für Linktext | 10.0 |
| jds.color.text.link.hover | Farbe für Linktext, schwebender Zustand | 10.0 |
| jds.color.text.link.active | Farbe für Linktext, aktiver Zustand | 10.0 |
| jds.color.text.link.visited | Farbe für Linktext, Zustand besucht | 10.3 |
| jds.color.text.link.visited-hover | Farbe für Linktext, Zustand besucht und schwebend | 10.3 |
| jds.color.text.link.visited-active | Farbe für Linktext, Zustand besucht und aktiv | 10.3 |
| jds.color.text.link-default-inverse | Farbe für umgekehrten Linktext | 10.11 |
| jds.color.text.link-inverse-hover | Farbe für umgekehrten Linktext, schwebender Zustand | 10.11 |
| jds.color.text.link-inverse-active | Farbe für umgekehrten Linktext, aktiver Zustand | 10.11 |
Symbol
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.color.icon.regular | Reguläre Symbolfarbe in Übereinstimmung mit regulärer Textfarbe | 10.0 |
| jds.color.icon.subtle | Dezente Farbe für Symbole | 10.0 |
| jds.color.icon.inverse | Umgekehrte Symbolfarbe | 10.0 |
| jds.color.icon.error | Symbolfarbe für Fehler | 10.0 |
| jds.color.icon.information | Symbolfarbe für Information | 10.0 |
| jds.color.icon.success | Symbolfarbe für Erfolg | 10.0 |
| jds.color.icon.warning | Symbolfarbe für Warnung | 10.0 |
| jds.color.icon.brand | Markenfarbe für Symbol | 10.0 |
| jds.color.icon.brand-hover | Markenfarbe für Symbol, schwebender Zustand | 10.0 |
| jds.color.icon.brand-active | Markenfarbe für Symbol, aktiver Zustand | 10.0 |
| jds.color.icon.brand-accent-1 | Markenfarbe, Akzent 1 für Symbol | 10.0 |
| jds.color.icon.brand-accent-2 | Markenfarbe, Akzent 2 für Symbol | 10.0 |
| jds.color.icon.link-default | Farbe für Linksymbole | 10.11 |
| jds.color.icon.link-hover | Farbe für Linksymbole, schwebender Zustand | 10.11 |
| jds.color.icon.link-active | Farbe für Linksymbole, aktiver Zustand | 10.11 |
| jds.color.icon.link-default-inverse | Farbe für umgekehrte Linksymbole | 10.11 |
| jds.color.icon.link-default-inverse-hover | Farbe für umgekehrte Linksymbole, schwebender Zustand | 10.11 |
| jds.color.icon.link-default-inverse-active | Farbe für umgekehrte Linksymbole, aktiver Zustand | 10.11 |
Typografie
Schriftart
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.font.hero.1 | Schrifteigenschaften für Hero 1-Text | 10.11 |
| jds.font.hero.2 | Schrifteigenschaften für Hero 2-Text | 10.11 |
| jds.font.hero.3 | Schrifteigenschaften für Hero 3-Text | 10.11 |
| jds.font.display | Schrifteigenschaften für Anzeigetext | 10.11 |
| jds.font.heading.1 | Schrifteigenschaften für Überschriftenebene 1 | 10.11 |
| jds.font.heading.2 | Schrifteigenschaften für Überschriftenebene 2 | 10.11 |
| jds.font.heading.3 | Schrifteigenschaften für Überschriftenebene 3 | 10.11 |
| jds.font.heading.4 | Schrifteigenschaften für Überschriftenebene 4 | 10.11 |
| jds.font.heading.5 | Schrifteigenschaften für Überschriftenebene 5 | 10.11 |
| jds.font.heading.6 | Schrifteigenschaften für Überschriftenebene 6 | 10.11 |
| jds.font.body.large | Schrifteigenschaften für großen Haupttext | 10.11 |
| jds.font.body.medium | Schrifteigenschaften für mittelgroßen Haupttext | 10.11 |
| jds.font.body.small | Schrifteigenschaften für kleinen Haupttext | 10.11 |
| jds.font.body.x-small | Schrifteigenschaften für sehr kleinen Haupttext | 10.11 |
| jds.font.link.default | Schrifteigenschaften für Standard-Linktext | 10.11 |
| jds.font.link.hover | Schrifteigenschaften für Linktext, schwebender Zustand | 10.11 |
| jds.font.link.active | Schrifteigenschaften für Linktext, aktiver Zustand | 10.11 |
| jds.font.link.visited | Schrifteigenschaften für Linktext, Zustand besucht | 10.11 |
| jds.font.eyebrow.1 | Schrifteigenschaften für Eyebrow 1-Text | 10.11 |
| jds.font.eyebrow.2 | Schrifteigenschaften für Eyebrow 2-Text | 10.11 |
| jds.font.eyebrow.3 | Schrifteigenschaften für Eyebrow 3-Text | 10.11 |
| jds.font.label.large | Schrifteigenschaften für großen Beschriftungstext | 10.11 |
| jds.font.label.large-strong | Schrifteigenschaften für großen hervorgehobenen Beschriftungstext | 10.11 |
| jds.font.label.large-stronger | Schrifteigenschaften für großen stärker hervorgehobenen Beschriftungstext | 10.11 |
| jds.font.label.medium | Schrifteigenschaften für mittelgroßen Beschriftungstext | 10.11 |
| jds.font.label.medium-strong | Schrifteigenschaften für mittelgroßen hervorgehobenen Beschriftungstext | 10.11 |
| jds.font.label.medium-stronger | Schrifteigenschaften für mittelgroßen stärker hervorgehobenen Beschriftungstext | 10.11 |
| jds.font.label.small | Schrifteigenschaften für kleinen Beschriftungstext | 10.11 |
| jds.font.label.small-strong | Schrifteigenschaften für kleinen hervorgehobenen Beschriftungstext | 10.11 |
| jds.font.label.small-stronger | Schrifteigenschaften für kleinen stärker hervorgehobenen Beschriftungstext | 10.11 |
| jds.font.label.x-small | Schrifteigenschaften für sehr kleinen Beschriftungstext | 10.11 |
| jds.font.label.x-small-stronger | Schrifteigenschaften für sehr kleinen stärker hervorgehobenen Beschriftungstext | 10.11 |
| jds.font.label.x-small-strong | Schrifteigenschaften für sehr kleinen hervorgehobenen Beschriftungstext | 10.11 |
| jds.font.blockquote.large | Schrifteigenschaften für großen Blockquote-Text | 10.11 |
| jds.font.blockquote.medium | Schrifteigenschaften für mittelgroßen Blockquote-Text | 10.11 |
| jds.font.blockquote.small | Schrifteigenschaften für kleinen Blockquote-Text | 10.11 |
| jds.font.blockquote.x-small | Schrifteigenschaften für sehr kleinen Blockquote-Text | 10.11 |
| jds.font.figure-caption.large | Schrifteigenschaften für großen Bildunterschriftentext | 10.11 |
| jds.font.figure-caption.medium | Schrifteigenschaften für mittelgroßen Bildunterschriftentext | 10.11 |
| jds.font.figure-caption.small | Schrifteigenschaften für kleinen Bildunterschriftentext | 10.11 |
| jds.font.figure-caption.x-small | Schrifteigenschaften für sehr kleinen Bildunterschriftentext | 10.11 |
| jds.font.code.large | Schrifteigenschaften für großen Code-Text | 10.11 |
| jds.font.code.medium | Schrifteigenschaften für mittelgroßen Code-Text | 10.11 |
| jds.font.code.small | Schrifteigenschaften für kleinen Code-Text | 10.11 |
| jds.font.code.x-small | Schrifteigenschaften für sehr kleinen Code-Text | 10.11 |
Schriftfamilie
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.font-family.heading | Schriftfamilie für Überschriftentext | 10.11 |
| jds.font-family.label | Schriftfamilie für Beschriftungstext | 10.11 |
| jds.font-family.body | Schriftfamilie für Haupttext | 10.11 |
| jds.font-family.monospace | Schriftfamilie für Monospace- und Code-Text | 10.11 |
| jds.font-family.blockquote | Schriftfamilie für Blockquote | 10.11 |
| jds.font-family.figure-caption | Schriftfamilie für Bildunterschrift | 10.11 |
Zeilenhöhe
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.line-height.heading | Zeilenhöhe für Überschriftentext | 10.11 |
| jds.line-height.label | Zeilenhöhe für Beschriftungstext | 10.11 |
| jds.line-height.body | Zeilenhöhe für Haupttext | 10.11 |
| jds.line-height.monospace | Zeilenhöhe für Monospace- und Code-Text | 10.11 |
| jds.line-height.blockquote | Zeilenhöhe für Blockquote-Text | 10.11 |
| jds.line-height.figure-caption | Zeilenhöhe für Bildunterschriftentext | 10.11 |
Hintergrund
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.color.background.blockquote | Hintergrundfarbe für Blockquote | 10.11 |
| jds.color.background.neutral | Neutrale Hintergrundfarbe | 10.0 |
| jds.color.background.neutral-hover | Neutrale Hintergrundfarbe, schwebender Zustand | 10.0 |
| jds.color.background.neutral-active | Neutrale Hintergrundfarbe, aktiver Zustand | 10.0 |
| jds.color.background.neutral-subtle | Helle neutrale Hintergrundfarbe | 10.0 |
| jds.color.background.neutral-subtle-hover | Helle neutrale Hintergrundfarbe, schwebender Zustand | 10.0 |
| jds.color.background.neutral-subtle-active | Helle neutrale Hintergrundfarbe, aktiver Zustand | 10.0 |
| jds.color.background.neutral-inverse | Invertierte neutrale Hintergrundfarbe | 10.0 |
| jds.color.background.page | Hintergrundfarbe für Seite | 10.0 |
| jds.color.background.progress | Hintergrundfarbe für Fortschrittsstatus | 10.3 |
| jds.color.background.track | Hintergrundfarbe für track-Element | 10.0 |
| jds.color.background.brand | Markenfarbe für Hintergrund | 10.0 |
| jds.color.background.brand-hover | Markenfarbe für Hintergrund, schwebender Zustand | 10.0 |
| jds.color.background.brand-active | Markenfarbe für Hintergrund, aktiver Zustand | 10.0 |
| jds.color.background.brand-subtle | Helle Markenfarbe für Hintergrund | 10.0 |
| jds.color.background.brand-subtle-hover | Helle Markenfarbe für Hintergrund, schwebender Zustand | 10.0 |
| jds.color.background.brand-subtle-active | Helle Markenfarbe für Hintergrund, aktiver Zustand | 10.0 |
| jds.color.background.brand-accent-1 | Markenfarbe, Akzent 1 für Hintergrund | 10.0 |
| jds.color.background.brand-accent-1-hover | Markenfarbe, Akzent 1 für Hintergrund, schwebender Zustand | 10.0 |
| jds.color.background.brand-accent-1-active | Markenfarbe, Akzent 1 für Hintergrund, aktiver Zustand | 10.0 |
| jds.color.background.brand-accent-1-subtle | Helle Markenfarbe, Akzent 1 | 10.0 |
| jds.color.background.brand-accent-1-subtle-hover | Helle Markenfarbe, Akzent 1, schwebender Zustand | 10.0 |
| jds.color.background.brand-accent-1-subtle-active | Helle Markenfarbe, Akzent 1, aktiver Zustand | 10.0 |
| jds.color.background.brand-accent-2 | Markenfarbe, Akzent 2 für Hintergrund | 10.0 |
| jds.color.background.brand-accent-2-hover | Markenfarbe, Akzent 2 für Hintergrund, schwebender Zustand | 10.0 |
| jds.color.background.brand-accent-2-active | Markenfarbe, Akzent 2 für Hintergrund, aktiver Zustand | 10.0 |
| jds.color.background.brand-accent-2-subtle | Helle Markenfarbe, Akzent 2 für Hintergrund | 10.0 |
| jds.color.background.brand-accent-2-subtle-hover | Helle Markenfarbe, Akzent 2 für Hintergrund, schwebender Zustand | 10.0 |
| jds.color.background.brand-accent-2-subtle-active | Helle Markenfarbe, Akzent 2 für Hintergrund, aktiver Zustand | 10.0 |
| jds.color.background.error | Hintergrundfarbe für Fehler | 10.0 |
| jds.color.background.information | Hintergrundfarbe für Information | 10.0 |
| jds.color.background.success | Hintergrundfarbe für Erfolg | 10.0 |
| jds.color.background.warning | Hintergrundfarbe für Warnung | 10.0 |
| jds.color.background.error-subtle | Helle Hintergrundfarbe für Fehler | 10.0 |
| jds.color.background.information-subtle | Helle Hintergrundfarbe für Information | 10.0 |
| jds.color.background.success-subtle | Helle Hintergrundfarbe für Erfolg | 10.0 |
| jds.color.background.warning-subtle | Helle Hintergrundfarbe für Warnung | 10.0 |
| jds.color.background.selected | Hintergrundfarbe, die einen ausgewählten Zustand angibt | 10.0 |
| jds.color.background.selected-hover | Hintergrundfarbe, die einen ausgewählten schwebenden Zustand angibt | 10.0 |
| jds.color.background.selected-active | Hintergrundfarbe, die einen ausgewählten aktiven Zustand angibt | 10.0 |
| jds.color.background.selected-subtle | Helle Farbe, die einen ausgewählten Zustand angibt | 10.0 |
| jds.color.background.selected-subtle-hover | Helle Farbe, die einen ausgewählten schwebenden Zustand angibt | 10.0 |
| jds.color.background.selected-subtle-active | Helle Farbe, die einen ausgewählten aktiven Zustand angibt | 10.0 |
| jds.color.background.input | Hintergrundfarbe für Eingaben | 10.0 |
| jds.color.background.input-hover | Hintergrundfarbe für Eingaben, schwebender Zustand | 10.0 |
| jds.color.background.input-active | Hintergrundfarbe für Eingaben, aktiver Zustand | 10.0 |
| jds.color.background.input-read-only | Hintergrundfarbe für Eingaben, schreibgeschützter Zustand | 10.0 |
Rahmen
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.color.border.blockquote | Rahmenfarbe für Blockquote | 10.11 |
| jds.color.border.regular | Standard-Rahmenfarbe für Benutzeroberflächenelemente (früher: Border) | 10.0 |
| jds.color.border.inverse | Umgekehrte Rahmenfarbe für UI-Elemente | 10.0 |
| jds.color.border.separator | Rahmenfarbe für Trennlinie | 10.0 |
| jds.color.border.selected | Rahmenfarbe, die einen ausgewählten Zustand angibt | 10.0 |
| jds.color.border.selected-hover | Rahmenfarbe, die einen ausgewählten schwebenden Zustand angibt | 10.0 |
| jds.color.border.selected-active | Rahmenfarbe, die einen ausgewählten aktiven Zustand angibt | 10.0 |
| jds.color.border.input | Rahmenfarbe für Eingaben | 10.11 |
| jds.color.border.brand | Markenfarbe für Rahmen | 10.0 |
| jds.color.border.brand-hover | Markenfarbe für Rahmen, schwebender Zustand | 10.0 |
| jds.color.border.brand-active | Markenfarbe für Rahmen, aktiver Zustand | 10.0 |
| jds.color.border.brand-accent-1 | Markenfarbe, Akzent 1 für Rahmen | 10.0 |
| jds.color.border.brand-accent-1-hover | Markenfarbe, Akzent 1 für Rahmen, schwebender Zustand | 10.0 |
| jds.color.border.brand-accent-1-active | Markenfarbe, Akzent 1 für Rahmen, aktiver Zustand | 10.0 |
| jds.color.border.brand-accent-2 | Markenfarbe, Akzent 2 für Rahmen | 10.0 |
| jds.color.border.brand-accent-2-hover | Markenfarbe, Akzent 2 für Rahmen, schwebender Zustand | 10.0 |
| jds.color.border.brand-accent-2-active | Markenfarbe, Akzent 2 für Rahmen, aktiver Zustand | 10.0 |
| jds.color.border.focus | Rahmenfarbe zur Angabe des fokussierten Zustands | 10.0 |
| jds.color.border.focus-inverse | Umgekehrte Rahmenfarbe zur Angabe des fokussierten Zustands vor einem dunklen Hintergrund | 10.0 |
| jds.color.border.error | Rahmenfarbe für Fehler | 10.0 |
| jds.color.border.success | Rahmenfarbe für Erfolg | 10.0 |
| jds.color.border.information | Rahmenfarbe für Information | 10.0 |
| jds.color.border.warning | Rahmenfarbe für Warnung | 10.0 |
Interaktion
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.color.interaction-overlay.hover | Überlagerung zur Angabe des schwebenden Zustands, wenn sich die Hintergrundfarbe nicht ändern kann, z. B. bei Bildern | 10.0 |
| jds.color.interaction-overlay.active | Überlagerung zur Angabe des aktiven Zustands, wenn sich die Hintergrundfarbe nicht ändern kann, z. B. bei Bildern | 10.0 |
Erhöhung
Oberfläche
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.elevation.surface | Primärer Hintergrund für Benutzeroberfläche | 10.0 |
| jds.elevation.surface-hover | Primärer Hintergrund, schwebender Zustand, für Benutzeroberfläche | 10.0 |
| jds.elevation.surface-active | Primärer Hintergrund, aktiver Zustand, für Benutzeroberfläche | 10.0 |
| jds.elevation.surface-recessed | Sekundärer Hintergrund für Benutzeroberfläche, häufig für Gruppierung von Elementen verwendet | 10.0 |
| jds.elevation.surface-raised | Primärer Hintergrund für Karten, die verschoben werden können | 10.0 |
| jds.elevation.surface-raised-hover | Primärer Hintergrund (schwebender Zustand) für Karten, die verschoben werden können | 10.0 |
| jds.elevation.surface-raised-active | Primärer Hintergrund (aktiver Zustand) für Karten, die verschoben werden können | 10.0 |
| jds.elevation.surface-overlay | Hintergrund für Elemente, die über der Benutzeroberfläche positioniert sind, z. B. modale Fenster, Dropdown-Menüs und Dialogfelder, sowie Hintergrund für Karten in gezogenem Zustand | 10.0 |
| jds.elevation.surface-overlay-hover | Hintergrund (schwebender Zustand) für Elemente, die über der Benutzeroberfläche positioniert sind, z. B. modale Fenster, Dropdown-Menüs und Dialogfelder, sowie Hintergrund für Karten in gezogenem Zustand | 10.0 |
| jds.elevation.surface-overlay-active | Hintergrund (aktiver Zustand) für Elemente, die über der Benutzeroberfläche positioniert sind, z. B. modale Fenster, Dropdown-Menüs und Dialogfelder, sowie Hintergrund für Karten in gezogenem Zustand | 10.0 |
Schatten
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.elevation.shadow.low | Schatten für unterste Ebene | 10.0 |
| jds.elevation.shadow.raised | Standardschatten für die meisten Komponenten | 10.0 |
| jds.elevation.shadow.overlay | Schatten für höchste Ebene | 10.0 |
| jds.elevation.shadow.overflow | Schatten, der verwendet wird, wenn Inhalte unter eine Oberfläche geschoben werden | 10.0 |
| jds.elevation.shadow.inset | Innerer Schatten | 10.0 |
| jds.elevation.shadow.none | Wird zum Entfernen eines vorhandenen Schattens verwendet. | 10.11 |
| jds.focus.shadow.regular | Schatten für fokussierten Zustand bei Standardelementen | 10.10 |
| jds.focus.shadow.inverse | Schatten für fokussierten Zustand bei invertierten Elementen | 10.10 |
| jds.focus.shadow.error | Schatten für fokussierten Zustand bei Elementen mit einem Fehler | 10.10 |
| jds.focus.shadow.error-inverse | Schatten für fokussierten Zustand bei invertierten Elementen mit einem Fehler | 10.10 |
| jds.utility.color.shadow.focus.regular | Utility-Farbe für regulären Fokusschatten | 10.10 |
| jds.utility.color.shadow.focus.inverse | Utility-Farbe für invertierten Fokusschatten | 10.10 |
| jds.utility.color.shadow.focus.error | Utility-Farbe für Fehlerfokusschatten | 10.10 |
| jds.utility.color.shadow.focus.error-inverse | Utility-Farbe für invertierten Fehlerfokusschatten | 10.10 |
Opazität
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.opacity.disabled | Opazität für deaktivierten Zustand | 10.0 |
Fläche
Design-Token für Abstände werden nach dem Prozentsatz der Basisrastereinheit benannt, der standardmäßig 8 Pixel beträgt. Das Design-Token „jds.space.x150“ enthält beispielsweise den Wert 12 Pixel (1,50 multipliziert mit der Basisrastereinheit von 8 Pixeln).
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.padding.blockquote | Innenabstand für Blockquote | 10.11 |
| jds.space.x0 | Platz zum Zurücksetzen der Standardabstandsstile | 10.11 |
| jds.space.x025 | Abstände für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.space.x050 | Abstände für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.space.x075 | Abstände für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.space.x100 | Abstände für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.space.x125 | Abstände für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.space.x150 | Abstände für größere und weniger kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.space.x200 | Abstände für größere und weniger kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.space.x250 | Abstände für größere und weniger kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.space.x300 | Abstände für größere und weniger kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.space.x400 | Abstände für die größten Elemente der Benutzeroberfläche und für Layoutelemente | 10.11 |
| jds.space.x450 | Abstände für die größten Elemente der Benutzeroberfläche und für Layoutelemente | 10.11 |
| jds.space.x500 | Abstände für die größten Elemente der Benutzeroberfläche und für Layoutelemente | 10.11 |
| jds.space.x600 | Abstände für die größten Elemente der Benutzeroberfläche und für Layoutelemente | 10.11 |
| jds.space.x800 | Abstände für die größten Elemente der Benutzeroberfläche und für Layoutelemente | 10.11 |
| jds.space.x1000 | Abstände für die größten Elemente der Benutzeroberfläche und für Layoutelemente | 10.11 |
| jds.space.x1200 | Abstände für die größten Elemente der Benutzeroberfläche und für Layoutelemente | 10.11 |
| jds.space.negative.x0125 | Zu Verwenden, um übergeordneten Leerraum zu ignorieren oder kleine Bereiche der Benutzeroberfläche zu überlappen | 10.11 |
Größe
Design-Token für die Größe werden nach dem Prozentsatz der Basisrastereinheit benannt, der standardmäßig 8 Pixel beträgt. Das Design-Token „jds.size.x025“ enthält beispielsweise den Wert 2 Pixel (0,25 multipliziert mit der Basisrastereinheit von 8 Pixeln).
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.size.input-height | Standardhöhe für Eingabekomponenten | 10.11 |
| jds.size.x0 | Platz zum Zurücksetzen der Standardgrößensstile | 10.11 |
| jds.size.x0125 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x025 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x050 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x100 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x150 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x175 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x200 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x250 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x300 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x350 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x400 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x450 | Größe für kleine und kompakte Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x500 | Größe für größere Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x600 | Größe für größere Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x700 | Größe für größere Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x800 | Größe für größere Elemente der Benutzeroberfläche | 10.11 |
| jds.size.x1000 | Größe für größere Elemente der Benutzeroberfläche | 10.11 |
Rahmenradius
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.border-radius.blockquote | Rahmenradius für Blockquote | 10.11 |
| jds.border-radius.regular | Rahmenradius, standardmäßig in der gesamten Benutzeroberfläche verwendet | 10.0 |
| jds.border-radius.round | Rahmenradius für vollständig abgerundete Ecken | 10.0 |
Rahmenbreite
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.border-width.regular | Reguläre Rahmenbreite | 10.0 |
| jds.border-width.thick | Dicke Rahmenbreite | 10.0 |
Andere Blockquote-Eigenschaften
| Token | Beschreibung | Eingeführt |
|---|---|---|
| jds.border.blockquote.top | Oberer Rahmen für Blockquote | 10.11 |
| jds.border.blockquote.right | Rechter Rahmen für Blockquote | 10.11 |
| jds.border.blockquote.bottom | Unterer Rahmen für Blockquote | 10.11 |
| jds.border.blockquote.left | Linker Rahmen für Blockquote | 10.11 |