Änderungsprotokoll für Design-Token
Änderungsprotokoll
Design-Token wurden mit dem Release 10.0 in Jutro Design System eingeführt. Dieses Änderungsprotokoll dokumentiert alle Ergänzungen, Aktualisierungen und Entfernungen, die in jedem Release an Jutro Design-Token vorgenommen wurden. Es dient als umfassende Aufstellung aller Änderungen auf allen Token-Ebenen, um Sie über die neuesten Veränderungen auf dem Laufenden zu halten.
10.12 Olos
Diese Version enthält eine Erweiterung der Token auf Komponentenebene für Tabellen-, Paginierungs- und Kartenbereichkomponenten sowie Aktualisierungen der Hover-Zustände von Schaltflächen und Beschriftungsbreitenbeschränkungen für Auswahlsteuerelemente.
| Veröffentlichtes Release | Token-Name | Details | Aktion |
|---|---|---|---|
| 10.12 Olos | jds.button.tertiary.color-background-hover | Farbe geändert von jds.color.background.neutral-subtle in jds.color.background.neutral-subtle-hover. | Aktualisiert |
| 10.12 Olos | jds.icon-button.neutral.color-background-hover | Farbe geändert von jds.color.background.neutral-subtle in jds.color.background.neutral-subtle-hover. | Aktualisiert |
| 10.12 Olos | jds.icon-button.tertiary.color-background-hover | Farbe geändert von jds.color.background.neutral-subtle in jds.color.background.neutral-subtle-hover. | Aktualisiert |
| 10.12 Olos | jds.color.background.zebra | Hintergrundfarbe für alternative Basisebene. | Hinzugefügt |
| 10.12 Olos | jds.card-panel.padding.bottom | Steuert den unteren Innenabstand für die Kartenbereichkomponente. | Hinzugefügt |
| 10.12 Olos | jds.card-panel.padding.top | Steuert den oberen Innenabstand für die Kartenbereichkomponente. | Hinzugefügt |
| 10.12 Olos | jds.pagination.controls.gap | Steuert den Abstand zwischen den Steuerelementen für die Paginierung. | Hinzugefügt |
| 10.12 Olos | jds.pagination.gap | Legt den allgemeinen Abstand innerhalb der Paginierungskomponente fest. | Hinzugefügt |
| 10.12 Olos | jds.checkbox.input-label.max-width | Steuert die maximale Breite von Beschriftungen in horizontalen Kontrollkästchengruppen. | Hinzugefügt |
| 10.12 Olos | jds.radio.input-label.max-width | Steuert die maximale Breite von Beschriftungen in horizontalen Optionsfeldgruppen. | Hinzugefügt |
| 10.12 Olos | jds.table.color.background | Allgemeine Hintergrundfarbe für die Tabellenkomponente. | Hinzugefügt |
| 10.12 Olos | jds.table.background.color.header-item | Legt die Hintergrundfarbe für Tabellenkopfzeilenzellen fest. | Hinzugefügt |
| 10.12 Olos | jds.table.background.color.row.even | Hintergrundfarbe für gerade Zeilen (Zebra-Striping). | Hinzugefügt |
| 10.12 Olos | jds.table.background.color.row.odd | Hintergrundfarbe für ungerade Zeilen (Zebra-Striping). | Hinzugefügt |
| 10.12 Olos | jds.table.background.color.row.selected | Hintergrundfarbe für eine ausgewählte Tabellenzeile. | Hinzugefügt |
| 10.12 Olos | jds.table.cell-item.height | Steuert die Höhe einzelner Tabellenzellen. | Hinzugefügt |
| 10.12 Olos | jds.table.cell-item.padding | Innenabstand von Tabellenzellen. | Hinzugefügt |
| 10.12 Olos | jds.table.header-item.height | Höhe der Tabellenkopfzeile. | Hinzugefügt |
| 10.12 Olos | jds.table.header-item.padding | Innenabstand von Tabellenkopfzeilenzellen. | Hinzugefügt |
| 10.12 Olos | jds.table.header-item.gap | Abstand zwischen Elementen in der Tabellenkopfzeilenzelle. | Hinzugefügt |
| 10.12 Olos | jds.table.content.loading | Stile für den Tabellencontainer während des Ladezustands. | Hinzugefügt |
| 10.12 Olos | jds.table.content.empty | Stile für den Container, wenn die Tabelle keine Daten enthält. | Hinzugefügt |
| 10.12 Olos | jds.table.content.empty-state.icon-size | Größe des Symbols, das im Leerzustand der Tabelle angezeigt wird. | Hinzugefügt |
| 10.12 Olos | jds.table.content.empty-state.button-row.max-width | Maximale Breite der Schaltflächen im Leerzustand der Tabelle. | Hinzugefügt |
10.11 Niseko
Dieses Release umfasst eine Erweiterung und Neugliederung der Typografie-Token, neue Token für Blockquote- und Code-Elemente sowie Komponenten-Token für die Löschen-Schaltfläche in Eingabefeldern.
| Veröffentlichtes Release | Token-Name | Details | Aktion |
|---|---|---|---|
| 10.11 Niseko | jds.font.heading.eyebrow | Empfehlung: Eyebrow 1 verwenden. Schrifteigenschaften für Eyebrow-Text, der normalerweise in Verbindung mit einer Überschrift verwendet wird. | Aktualisiert |
| 10.11 Niseko | jds.font.heading.slug | Empfehlung: Eyebrow 2 verwenden. Schrifteigenschaften für Slug-Text, der normalerweise als Abschnittstitel in einer vertikalen Navigation verwendet wird. | Aktualisiert |
| 10.11 Niseko | jds.font.body.medium | Schrifteigenschaften für mittelgroßen Haupttext. | Aktualisiert |
| 10.11 Niseko | jds.font.body.small | Schrifteigenschaften für kleinen Haupttext. | Aktualisiert |
| 10.11 Niseko | jds.font.body.x-small | Schrifteigenschaften für sehr kleinen Haupttext. | Aktualisiert |
| 10.11 Niseko | jds.font.heading.7 | Als Teil einer Korrektur hinsichtlich der Barrierefreiheit entfernt. Das Token wurde nicht verwendet. Dies ist kein Breaking Change. | Entfernt |
| 10.11 Niseko | jds.font-family.blockquote | Schriftfamilie für Blockquote. | Hinzugefügt |
| 10.11 Niseko | jds.font-family.figure-caption | Schriftfamilie für Bildunterschrift. | Hinzugefügt |
| 10.11 Niseko | jds.line-height.blockquote | Zeilenhöhe für Blockquote-Text. | Hinzugefügt |
| 10.11 Niseko | jds.line-height.figure-caption | Zeilenhöhe für Bildunterschriftentext. | Hinzugefügt |
| 10.11 Niseko | jds.font.hero.1 | Schrifteigenschaften für Hero 1-Text. | Hinzugefügt |
| 10.11 Niseko | jds.font.hero.2 | Schrifteigenschaften für Hero 2-Text. | Hinzugefügt |
| 10.11 Niseko | jds.font.hero.3 | Schrifteigenschaften für Hero 3-Text. | Hinzugefügt |
| 10.11 Niseko | jds.font.eyebrow.1 | Schrifteigenschaften für Eyebrow 1-Text, der normalerweise in Verbindung mit einer Überschrift verwendet wird. | Hinzugefügt |
| 10.11 Niseko | jds.font.eyebrow.2 | Schrifteigenschaften für Eyebrow 2-Text, der normalerweise in Verbindung mit einer Überschrift verwendet wird. | Hinzugefügt |
| 10.11 Niseko | jds.font.eyebrow.3 | Schrifteigenschaften für Eyebrow 3-Text, der normalerweise in Verbindung mit einer Überschrift verwendet wird. | Hinzugefügt |
| 10.11 Niseko | jds.font.label.x-small-strong | Schrifteigenschaften für sehr kleinen hervorgehobenen Beschriftungstext. | Hinzugefügt |
| 10.11 Niseko | jds.font.blockquote.large | Schrifteigenschaften für großen Blockquote-Text. | Hinzugefügt |
| 10.11 Niseko | jds.font.blockquote.medium | Schrifteigenschaften für mittelgroßen Blockquote-Text. | Hinzugefügt |
| 10.11 Niseko | jds.font.blockquote.small | Schrifteigenschaften für kleinen Blockquote-Text. | Hinzugefügt |
| 10.11 Niseko | jds.font.blockquote.x-small | Schrifteigenschaften für sehr kleinen Blockquote-Text. | Hinzugefügt |
| 10.11 Niseko | jds.font.figure-caption.large | Schrifteigenschaften für großen Bildunterschriftentext. | Hinzugefügt |
| 10.11 Niseko | jds.font.figure-caption.medium | Schrifteigenschaften für mittelgroßen Bildunterschriftentext. | Hinzugefügt |
| 10.11 Niseko | jds.font.figure-caption.small | Schrifteigenschaften für kleinen Bildunterschriftentext. | Hinzugefügt |
| 10.11 Niseko | jds.font.figure-caption.x-small | Schrifteigenschaften für sehr kleinen Bildunterschriftentext. | Hinzugefügt |
| 10.11 Niseko | jds.font.code.large | Schrifteigenschaften für großen Code-Text. | Hinzugefügt |
| 10.11 Niseko | jds.font.code.small | Schrifteigenschaften für kleinen Code-Text. | Hinzugefügt |
| 10.11 Niseko | jds.font.code.x-small | Schrifteigenschaften für sehr kleinen Code-Text. | Hinzugefügt |
| 10.11 Niseko | jds.color.background.blockquote | Hintergrundfarbe für Blockquote. | Hinzugefügt |
| 10.11 Niseko | jds.color.border.blockquote | Rahmenfarbe für Blockquote. | Hinzugefügt |
| 10.11 Niseko | jds.padding.blockquote | Innenabstand für Blockquote. | Hinzugefügt |
| 10.11 Niseko | jds.border-radius.blockquote | Rahmenradius für Blockquote. | Hinzugefügt |
| 10.11 Niseko | jds.border.blockquote.top | Oberer Rahmen für Blockquote. | Hinzugefügt |
| 10.11 Niseko | jds.border.blockquote.right | Rechter Rahmen für Blockquote. | Hinzugefügt |
| 10.11 Niseko | jds.border.blockquote.bottom | Unterer Rahmen für Blockquote. | Hinzugefügt |
| 10.11 Niseko | jds.border.blockquote.left | Linker Rahmen für Blockquote. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-radius | Rahmenradius für Löschen-Symbolschaltfläche des Eingabefelds. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.shadow | Schatten für Löschen-Symbolschaltfläche des Eingabefelds. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.background | Hintergrundfarbe für Löschen-Symbolschaltfläche des Eingabefelds. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.background-hover | Hintergrundfarbe für Löschen-Symbolschaltfläche des Eingabefelds, schwebender Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.background-active | Textfarbe für Löschen-Symbolschaltfläche des Eingabefelds, aktiver Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.background-focus | Hintergrundfarbe für Löschen-Symbolschaltfläche des Eingabefelds, fokussierter Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.border | Rahmenfarbe für Löschen-Symbolschaltfläche des Eingabefelds. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.border-hover | Rahmenfarbe für Löschen-Symbolschaltfläche des Eingabefelds, schwebender Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.border-active | Rahmenfarbe für Löschen-Symbolschaltfläche des Eingabefelds, aktiver Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.border-focus | Rahmenfarbe für Löschen-Symbolschaltfläche des Eingabefelds, fokussierter Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.icon | Symbolfarbe für Löschen-Symbolschaltfläche des Eingabefelds. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.icon-hover | Symbolfarbe für Löschen-Symbolschaltfläche des Eingabefelds, schwebender Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.icon-active | Symbolfarbe für Löschen-Symbolschaltfläche des Eingabefelds, aktiver Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.icon-focus | Symbolfarbe für Löschen-Symbolschaltfläche des Eingabefelds, fokussierter Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.shadow-focus | Fokusschatten für Löschen-Symbolschaltfläche des Eingabefelds. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-width | Zusammengesetztes Token mit individuellen Rahmenbreitenwerten für Löschen-Symbolschaltfläche des Eingabefelds. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-width-hover | Zusammengesetztes Token mit individuellen Rahmenbreitenwerten für Löschen-Symbolschaltfläche des Eingabefelds, schwebender Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-width-active | Zusammengesetztes Token mit individuellen Rahmenbreitenwerten für Löschen-Symbolschaltfläche des Eingabefelds, aktiver Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-width-focus | Zusammengesetztes Token mit individuellen Rahmenbreitenwerten für Löschen-Symbolschaltfläche des Eingabefelds, fokussierter Zustand. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.size | Größe für Löschen-Symbolschaltfläche eines kleinen Eingabefelds. | Hinzugefügt |
| 10.11 Niseko | jds.input-field.clear-icon-button.icon-size | Symbolgröße für Löschen-Symbolschaltfläche des Eingabefelds. | Hinzugefügt |
10.10 Mammoth
Zur Einhaltung der WCAG 2.1-Standards für Barrierefreiheit enthält dieses Release Änderungen an den Farben.
Die folgende Liste der Änderungen enthält Verbesserungen hinsichtlich Fokussichtbarkeit und Kontrast:
| Veröffentlichtes Release | Token-Name | Details | Aktion |
|---|---|---|---|
| 10.10 Mammoth | jds.focus.shadow.regular | Opazität für Design-Token für Fokusschatten auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | jds.focus.shadow.inverse | Opazität für Design-Token für Fokusschatten auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | jds.focus.shadow.error | Opazität für Design-Token für Fokusschatten auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | jds.focus.shadow.error-inverse | Opazität für Design-Token für Fokusschatten auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | jds.utility.color.shadow.focus.regular | Opazität für Design-Token für Fokusschatten auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | jds.utility.color.shadow.focus.inverse | Opazität für Design-Token für Fokusschatten auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | jds.utility.color.shadow.focus.error | Opazität für Design-Token für Fokusschatten auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | jds.utility.color.shadow.focus.error-inverse | Opazität für Design-Token für Fokusschatten auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | --GW-FOCUS-COLOR-LIGHT | Opazität für Variable für Fokusfarbe auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | --GW-FOCUS-COLOR-DARK | Opazität für Variable für Fokusfarbe auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | --GW-FOCUS-ERROR-COLOR-DARK | Opazität für Variable für Fokusfehlerfarbe auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | --GW-FOCUS-ERROR-COLOR-LIGHT | Opazität für Variable für Fokusfehlerfarbe auf 1 festgelegt | Aktualisiert |
| 10.10 Mammoth | --GW-SLIDER-FIELD-HANDLE-BOX-SHADOW-FOCUS | Wert geändert von 0 0 0 1px #fff, 0 0 0 3px rgba(30, 154, 207, 0.4) in 0 0 0 1px #fff, 0 0 0 3px var(--GW-FOCUS-COLOR-LIGHT) | Aktualisiert |
| 10.10 Mammoth | jds.icon-button.primary.shadow-focus | Auf jds.focus.shadow.regular festgelegt | Hinzugefügt |
| 10.10 Mammoth | jds.icon-button.secondary.shadow-focus | Auf jds.focus.shadow.regular festgelegt | Hinzugefügt |
| 10.10 Mammoth | jds.icon-button.tertiary.shadow-focus | Auf jds.focus.shadow.regular festgelegt | Hinzugefügt |
| 10.10 Mammoth | jds.icon-button.neutral.shadow-focus | Auf jds.focus.shadow.regular festgelegt | Hinzugefügt |
| 10.10 Mammoth | jds.icon-button.inverse.shadow-focus | Auf jds.utility.color.shadow.focus.inverse festgelegt | Hinzugefügt |
| 10.10 Mammoth | --GW-FIELD-COMPONENT-SHADOW-COLOR-FOCUS-ERROR | Neue Variable, standardmäßig nicht definiert. Kann verwendet werden, um die richtige Fokusschattenfarbe für abgekündigte Eingaben mit Fehlerzustand festzulegen. | Hinzugefügt |
Die folgenden Änderungen wurden an den Stilen der Komponenten in der Basiskonfiguration vorgenommen. Um die vorherigen Stile wiederherzustellen, müssen Sie diese Token überschreiben. Davon betroffen sind die Komponenten Badge, InfoLabel, InlineNotification und ToastNotification.
| Veröffentlichtes Release | Token-Name | Details | Aktion |
|---|---|---|---|
| 10.10 Mammoth | jds.color.yellow.100 | Wert geändert von #c76a00 in #7a3e00 | Aktualisiert |
| 10.10 Mammoth | jds.color.yellow.10 | Wert geändert von #fff5eb in #fff0e0 | Aktualisiert |
| 10.10 Mammoth | jds.color.yellow.20 | Wert geändert von #ffead1 in #ffe1c2 | Aktualisiert |
| 10.10 Mammoth | jds.color.yellow.30 | Wert geändert von #ffe2c2 in #ffcd99 | Aktualisiert |
| 10.10 Mammoth | jds.color.yellow.40 | Wert geändert von #ffc17a in #ffa952 | Aktualisiert |
| 10.10 Mammoth | jds.color.yellow.50 | Wert geändert von #ffb561 in #f57c00 | Aktualisiert |
| 10.10 Mammoth | jds.color.yellow.60 | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.color.yellow.70 | Wert geändert von #ff8f0f in #c26200 | Aktualisiert |
| 10.10 Mammoth | jds.color.yellow.80 | Wert geändert von #e57a00 in #ad5800 | Aktualisiert |
| 10.10 Mammoth | jds.color.yellow.90 | Wert geändert von #db740 in #8f4800 | Aktualisiert |
| 10.10 Mammoth | jds.badge.warning.color.background | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.color.background.warning-subtle | Wert geändert von #fff5eb in #fff0e0 | Aktualisiert |
| 10.10 Mammoth | jds.color.background.warning | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.color.border.warning | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.color.icon.warning | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.color.text.warning | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.info-label.warning.color.background | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.info-label.warning.color.border | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.inline-notification.warning.color.background | Wert geändert von #fff5eb in #fff0e0 | Aktualisiert |
| 10.10 Mammoth | jds.inline-notification.warning.color.border | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.inline-notification.warning.color.icon | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.toast-notification.warning.color.border | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
| 10.10 Mammoth | jds.toast-notification.warning.icon.container.color.background | Wert geändert von #ff9d2e in #d66d00 | Aktualisiert |
Um sicherzustellen, dass Eingabe- und Steuerelemente das erforderliche Kontrastverhältnis von mindestens 3:1 aufweisen, wurden die folgenden Änderungen vorgenommen. Diese Änderungen wurden an den Stilen der Komponenten in der Basiskonfiguration vorgenommen. Um die vorherigen Stile wiederherzustellen, müssen Sie diese Token überschreiben:
| Veröffentlichtes Release | Token-Name | Details | Aktion |
|---|---|---|---|
| 10.10 Mammoth | jds.color.gray.70 | Wert geändert von #7d94ac in #7990a8 | Aktualisiert |
| 10.10 Mammoth | --GW-BORDER-COLOR | Standardwert geändert von #7d91ac in #7990a8 | Aktualisiert |
10.3 Jasper
Mit diesem Release werden Farb-Token für Fortschritt und besuchte Links eingeführt.
| Veröffentlichtes Release | Token-Name | Details | Aktion |
|---|---|---|---|
| 10.3 Jasper | jds.color.background.progress | Hintergrundfarbe für Fortschrittsstatus | Zur semantischen Ebene hinzufügen |
| 10.3 Jasper | jds.color.text.link.visited | Farbe für Linktext, Zustand besucht | Zur semantischen Ebene hinzufügen |
| 10.3 Jasper | jds.color.text.link.visited-hover | Farbe für Linktext, Zustand besucht und schwebend | Zur semantischen Ebene hinzufügen |
| 10.3 Jasper | jds.color.text.link.visited-active | Farbe für Linktext, Zustand besucht und aktiv | Zur semantischen Ebene hinzufügen |