Semantic Tokens Components

Cards

Cards

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-cardcolor-light-greyGrundfläche der Card.
surface-card-bodycolor-light-greyFläche im Body-Segment der Card.
surface-card-header-primarycolor-darkbluePrimärer Header-Hintergrund.
surface-card-header-alternativecolor-darkgreenAlternativer Header-Hintergrund.
surface-card-header-mutedcolor-darkbrownZweite alternative Header-Fläche.
divider-card-segmentcolor-whiteTrenner zwischen Segmenten.
text-card-headercolor-font-lightHeader-Textfarbe.
text-card-bodycolor-font-darkStandard-Textfarbe im Body.

Group Card

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-card-groupcolor-background-purple-lightFläche der eigentlichen Group Card (heller Container, der mehrere Cards gruppiert).

Text Group Box

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-card-transparentcolor-transparentTransparente Fläche der Text-Group-Box ohne Card-Segmente.
text-card-transparentcolor-font-lightTextfarbe der Text-Group-Box.

Interactive Elements

Button

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-button-activecolor-medium-greyFläche aktiver Standard-Buttons.
surface-button-inactivecolor-light-greyFläche inaktiver Standard-Buttons.
surface-button-processcolor-font-hyperlinkFläche von Prozess-/CTA-Buttons.
surface-button-process-inactivecolor-process-inactiveFläche inaktiver Prozess-/CTA-Buttons.
text-button-processcolor-font-lightTextfarbe auf Prozess-/CTA-Buttons.

Tabs

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-tab-selectedcolor-dark-greyFläche des ausgewählten Tabs.
surface-tab-unselectedcolor-whiteFläche nicht ausgewählter Tabs.
surface-tab-compact-backgroundsurface-form-previewHintergrundfläche kompakter Tab-Navigationen.
surface-tab-compact-unselectedcolor-medium-greyFläche nicht aktiver Tabs in der kompakten Variante.
text-tab-selectedcolor-font-lightTextfarbe des ausgewählten Tabs.
text-tab-unselectedcolor-dark-greyTextfarbe nicht ausgewählter Tabs.

Form Controls

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-control-defaultcolor-whiteStandardfläche für Input-/Auswahl-Controls.
surface-control-activecolor-whiteFläche aktiver Controls.
surface-control-inactivecolor-whiteFläche inaktiver, aber wählbarer Controls.
surface-control-disabledcolor-whiteFläche deaktivierter Controls.
text-control-defaultcolor-font-darkStandard-Textfarbe in Controls.
text-control-disabledcolor-dark-greyTextfarbe deaktivierter Controls.
surface-input-clearcolor-medium-greyFläche des Clear-Buttons in Inputs.

Pulldown and Menu

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-pulldown-panelcolor-light-greyFläche geöffneter Pulldown-Panels.
icon-pulldown-chevroncurrentColor-basierte VerlaufsgrafikChevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.
surface-menu-panel-portalcolor-light-greyFläche des Sandwich-Menü-Panels für große und kleine Variante.
text-menu-link-portalcolor-font-darkLinktextfarbe im Sandwich-Menü für große und kleine Variante.

Toggle / Checkbox / Radio / Help

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-toggle-trackcolor-medium-greyToggle-Track-Fläche.
surface-toggle-handlecolor-darkblueToggle-Handle-Fläche.
surface-checkbox-defaultcolor-light-greyStandardfläche der Checkbox.
surface-checkbox-on-contextcolor-whiteCheckbox-Fläche auf Kontextflächen.
surface-radio-defaultcolor-whiteStandardfläche des Radio-Buttons.
icon-radio-markcolor-font-darkMarkierungsfarbe im Radio-Button.
surface-help-iconcolor-medium-greyFläche des Help-Icons.
surface-help-panelcolor-light-greyFläche des Help-Panels.
text-help-iconcolor-font-darkTextfarbe im Help-Icon.
text-help-panelcolor-font-darkTextfarbe im Help-Panel.
icon-sandwich-line-portalcolor-font-darkLinienfarbe des Sandwich-Icons für große und kleine Variante.

Slider

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-slider-trackcolor-medium-greyGrundfläche des Slider-Strichs.
surface-slider-progresscolor-dark-greyAusgewählter Bereich links vom Slider-Knopf.
surface-slider-thumbcolor-dark-greyGefüllte Fläche des Slider-Knopfs (ohne Linie).

Preview Area

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-form-previewcolor-light-greyFläche von Formular-/Control-Preview-Bereichen.
text-hyperlinkcolor-font-hyperlinkLinkfarbe in interaktiven Texten.

Charts

Score Bar

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-score-bar-trackcolor-light-greyHintergrund der Score-Bar.
chart-value-positivecolor-signal-greenFüllfarbe positiver Werte.
chart-value-neutralcolor-signal-yellowFüllfarbe neutraler Werte.
chart-value-negativecolor-signal-redFüllfarbe negativer Werte.
chart-median-linecolor-font-darkFarbe der Median-Markierung.

Bar / Line Chart

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-chart-areacolor-light-greyGrundfläche des Charts.
chart-value-primarycolor-darkbluePrimäre Datenreihe.
chart-value-referencecolor-medium-greyReferenz-/Vergleichsreihe.
chart-grid-linecolor-medium-greyGridline-Farbe.
chart-axis-linecolor-font-darkAchsenfarbe.
chart-marker-linecolor-font-darkMarker-/Hilfslinienfarbe.
text-chart-defaultcolor-font-darkTextfarbe in Achsen/Labels.

Data Display

Data Table Small

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-data-tablecolor-light-greyGesamtfläche der Tabelle.
surface-data-table-headercolor-light-greyFläche der Tabellenkopfzeile.
surface-data-table-cellcolor-light-greyFläche von Tabellenzellen.
surface-data-table-help-iconcolor-medium-greyFläche des Help-Icons im Tabellenkontext.
text-data-table-defaultcolor-font-darkStandard-Textfarbe in Tabellenzellen.
text-data-table-warningcolor-signal-yellowWarnwertfarbe in Tabellenzellen.
text-data-table-help-iconcolor-font-darkTextfarbe im Tabellen-Help-Icon.

Typography

Typography Preview

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
text-typography-previewcolor-font-lightTextfarbe in der Typografie-Preview.