| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-card | color-light-grey | Grundfläche der Card. |
| surface-card-body | color-light-grey | Fläche im Body-Segment der Card. |
| surface-card-segment-neutral | color-light-grey | Neutrale Segmentfläche für gezielte hellgraue Card-Segmente (z. B. sg-card-segment--gray). |
| surface-card-header-primary | color-darkblue | Primärer Header-Hintergrund. |
| surface-card-header-alternative | color-darkgreen | Alternativer Header-Hintergrund. |
| surface-card-header-muted | color-darkbrown | Zweite alternative Header-Fläche. |
| divider-card-segment | color-white | Trenner zwischen Segmenten. |
| text-card-header | color-font-light | Header-Textfarbe. |
| text-card-body | color-font-dark | Standard-Textfarbe im Body. |
| layout-card-body-content-justify | flex-start | Ausrichtung des Inhalts im Body-Segment der Card. |
| layout-card-segment-content-gap | spacing-small | Vertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments. |
| layout-card-segment-padding-top | card-segment-padding-vertical | Oberer Innenabstand von Card-Segmenten. |
| layout-card-segment-padding-right | card-segment-padding-horizontal | Rechter Innenabstand von Card-Segmenten. |
| layout-card-segment-padding-bottom | card-segment-padding-vertical | Unterer Innenabstand von Card-Segmenten. |
| layout-card-segment-padding-left | card-segment-padding-horizontal | Linker Innenabstand von Card-Segmenten. |
| layout-card-body-padding-top | layout-card-segment-padding-top | Oberer Innenabstand des Card-Body-Segments. |
| layout-card-body-padding-right | layout-card-segment-padding-right | Rechter Innenabstand des Card-Body-Segments. |
| layout-card-body-padding-bottom | layout-card-segment-padding-bottom | Unterer Innenabstand des Card-Body-Segments. |
| layout-card-body-padding-left | layout-card-segment-padding-left | Linker Innenabstand des Card-Body-Segments. |
| layout-card-body-text-margin | 0 | Textabstand im Card-Body; verhindert zusätzliche Default-Margins. |
Verhaltensregel: Für Cards mit ausklappenden Overlays (z. B. Help-Panel, Sandwich-Menü, Pulldown) ist die Komponenten-Variante sg-card--overlay-host zu verwenden, damit Overlays nicht abgeschnitten werden.
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-card-group | color-background-purple-light | Fläche der eigentlichen Group Card (heller Container, der mehrere Cards gruppiert). |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| layout-object-group-card-min-width | dimension-object-group-card-min-width | Mindestbreite der Karteninstanzen im Pattern Object Group Card. |
| layout-object-group-card-max-width | dimension-object-group-card-max-width | Maximalbreite der Karteninstanzen im Pattern Object Group Card. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-card-transparent | color-transparent | Transparente Fläche der Text-Group-Box ohne Card-Segmente. |
| text-card-transparent | color-font-light | Textfarbe der Text-Group-Box. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-vsf-drawer-object-card-header | color-darkblue | Header-Fläche der VSF-spezifischen Object Card im Drawer. |
| surface-vsf-drawer-object-card-body | color-darkblue | Body-Fläche der VSF-spezifischen Object Card im Drawer. |
| text-vsf-drawer-object-card-heading | color-font-light | Textfarbe der H2-Überschrift im Header der VSF Drawer Object Card. |
| text-vsf-drawer-object-card-body | color-font-light | Textfarbe der Detailinhalte im Body der VSF Drawer Object Card. |
| layout-vsf-drawer-object-card-column-gap | spacing-large | Spaltenabstand des zweispaltigen Textlayouts in der VSF Drawer Object Card. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-button-active | color-medium-grey | Fläche aktiver Standard-Buttons. |
| surface-button-inactive | color-light-grey | Fläche inaktiver Standard-Buttons. |
| surface-button-process | color-font-hyperlink | Fläche von Prozess-/CTA-Buttons. |
| surface-button-process-inactive | color-process-inactive | Fläche inaktiver Prozess-/CTA-Buttons. |
| text-button-process | color-font-light | Textfarbe auf Prozess-/CTA-Buttons. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-tab-selected | color-dark-grey | Fläche des ausgewählten Tabs. |
| surface-tab-unselected | color-white | Fläche nicht ausgewählter Tabs. |
| surface-tab-compact-background | surface-form-preview | Hintergrundfläche kompakter Tab-Navigationen. |
| surface-tab-compact-unselected | color-medium-grey | Fläche nicht aktiver Tabs in der kompakten Variante. |
| text-tab-selected | color-font-light | Textfarbe des ausgewählten Tabs. |
| text-tab-unselected | color-dark-grey | Textfarbe nicht ausgewählter Tabs. |
| layout-tab-navigation-large-padding-inline | interaction-padding-horizontal | Horizontaler Innenabstand für große Tab-Navigationen (auf kleinen Viewports reduziert). |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-control-default | color-white | Standardfläche für Input-/Auswahl-Controls. |
| surface-control-active | color-white | Fläche aktiver Controls. |
| surface-control-inactive | color-white | Fläche inaktiver, aber wählbarer Controls. |
| surface-control-disabled | color-white | Fläche deaktivierter Controls. |
| text-control-default | color-font-dark | Standard-Textfarbe in Controls. |
| text-control-disabled | color-dark-grey | Textfarbe deaktivierter Controls. |
| surface-input-clear | color-medium-grey | Fläche des Clear-Buttons in Inputs. |
| layout-input-label-width | dimension-input-label-width | Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder. |
| layout-input-field-desktop-width | dimension-input-field-desktop-width | Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder. |
| layout-input-field-max-width | dimension-input-field-max-width | Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld). |
| layout-search-field-width | dimension-search-field-width | Fixe Breite des Suchfeld-Inputs. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-pulldown-panel | color-light-grey | Fläche geöffneter Pulldown-Panels. |
| surface-activatable-remove | surface-control-default | Fläche des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche. |
| icon-pulldown-chevron | currentColor-basierte Verlaufsgrafik | Chevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe. |
| layout-pulldown-panel-padding-inline | compact-interaction-padding-horizontal | Horizontaler Innenabstand des geöffneten Pulldown-Panels. |
| layout-pulldown-option-padding-inline | compact-interaction-padding-horizontal | Horizontaler Innenabstand der einzelnen Pulldown-Optionen. |
| layout-pulldown-padding-inline | compact-interaction-padding-horizontal | Innenabstand links für Pulldown-Trigger und Select-Felder. |
| layout-pulldown-chevron-offset | compact-interaction-padding-horizontal | Rechter Innenabstand des Chevron-Icons im Pulldown. |
| layout-pulldown-chevron-reserved-space | spacing-large | Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich. |
| layout-pulldown-panel-form-mobile-width | 90% | Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt. |
| layer-pulldown-panel | dimension-layer-pulldown-panel | Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten. |
| layout-multiselect-pulldown-panel-desktop-width | dimension-multiselect-pulldown-panel-desktop-width | Reservierter semantischer Alias für feste Desktop-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert. |
| layout-multiselect-pulldown-panel-mobile-width | dimension-multiselect-pulldown-panel-mobile-width | Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert. |
| surface-menu-panel-portal | color-light-grey | Fläche des Sandwich-Menü-Panels für große und kleine Variante. |
| text-menu-link-portal | color-font-dark | Linktextfarbe im Sandwich-Menü für große und kleine Variante. |
| text-activatable-remove | text-control-default | Zeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-toggle-track | color-medium-grey | Toggle-Track-Fläche. |
| surface-toggle-handle | color-darkblue | Toggle-Handle-Fläche. |
| text-toggle-label-active | color-font-light | Textfarbe des aktiven Toggle-Labels auf der hervorgehobenen Handle-Seite. |
| layout-mode-toggle-local-height | compact-interaction-height | Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß. |
| layout-mode-toggle-local-width-factor | 3 | Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe. |
| layout-mode-toggle-width | calc(interaction-height * 3.5) | Standardbreite des Mode-Toggles in regulären Varianten. |
| surface-checkbox-default | color-white | Standardfläche der Checkbox. |
| surface-checkbox-on-context | color-white | Checkbox-Fläche auf Kontextflächen. |
| surface-radio-default | color-white | Standardfläche des Radio-Buttons. |
| icon-radio-mark | color-font-dark | Markierungsfarbe im Radio-Button. |
| surface-help-icon | color-medium-grey | Fläche des Help-Icons. |
| surface-help-panel | color-light-grey | Fläche des Help-Panels. |
| text-help-icon | color-font-dark | Textfarbe im Help-Icon. |
| text-help-panel | color-font-dark | Textfarbe im Help-Panel. |
| layout-help-panel-width | calc(interaction-height * 8) | Standardbreite des Help-Panels. |
| icon-sandwich-line-portal | color-font-dark | Linienfarbe des Sandwich-Icons für große und kleine Variante. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-slider-track | color-medium-grey | Grundfläche des Slider-Strichs. |
| surface-slider-progress | color-dark-grey | Ausgewählter Bereich links vom Slider-Knopf. |
| surface-slider-thumb | color-dark-grey | Gefüllte Fläche des Slider-Knopfs (ohne Linie). |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-form-preview | color-light-grey | Fläche von Formular-/Control-Preview-Bereichen. |
| text-hyperlink | color-font-hyperlink | Linkfarbe in interaktiven Texten. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-score-bar-track | color-medium-grey | Hintergrund der Score-Bar. |
| chart-value-positive | color-signal-green | Füllfarbe positiver Werte. |
| chart-value-neutral | color-signal-yellow | Füllfarbe neutraler Werte. |
| chart-value-negative | color-signal-red | Füllfarbe negativer Werte. |
| chart-median-line | color-font-dark | Farbe der Median-Markierung. |
| text-score-state-positive | chart-value-positive | Textfarbe positiver Zustandslabels am Gesamtscore-Balken. |
| layout-score-bar-item-columns | max-content und 1fr | Standardspalten der Score-Bar-Zeile: dynamische Labelspalte (längstes Label) plus Balkenspur. |
| layout-score-bar-item-gap | spacing-large | Abstand zwischen Labelspalte und Balkenspur in der Score-Bar-Zeile. |
| layout-score-bar-item-single-score-columns | max-content, 1fr und max-content | Spalten der Score-Bar-Zeile in der Single-Score-Variante: Label, Balken, Zustandslabel. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-chart-area | color-light-grey | Grundfläche des Charts. |
| chart-value-primary | color-darkblue | Primäre Datenreihe. |
| chart-value-reference | color-medium-grey | Referenz-/Vergleichsreihe. |
| chart-grid-line | color-medium-grey | Gridline-Farbe. |
| chart-axis-line | color-font-dark | Achsenfarbe. |
| chart-marker-line | color-font-dark | Marker-/Hilfslinienfarbe. |
| text-chart-default | color-font-dark | Textfarbe in Achsen/Labels. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-data-table | color-light-grey | Gesamtfläche der Tabelle. |
| surface-data-table-header | color-light-grey | Fläche der Tabellenkopfzeile. |
| surface-data-table-cell | color-light-grey | Fläche von Tabellenzellen. |
| surface-data-table-help-icon | color-medium-grey | Fläche des Help-Icons im Tabellenkontext. |
| text-data-table-default | color-font-dark | Standard-Textfarbe in Tabellenzellen. |
| text-data-table-warning | color-signal-yellow | Warnwertfarbe in Tabellenzellen. |
| text-data-table-help-icon | color-font-dark | Textfarbe im Tabellen-Help-Icon. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-data-table | color-light-grey | Gesamtfläche der Spaltenliste. |
| surface-data-table-cell | color-light-grey | Fläche von Spaltenzellen. |
| text-data-table-default | color-font-dark | Standard-Textfarbe in Spaltenzellen. |
| text-data-table-warning | color-signal-yellow | Warnwertfarbe in Spaltenzellen. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| text-typography-preview | color-font-light | Textfarbe in der Typografie-Preview. |
| layout-preview-align-items | flex-start | Vertikale Ausrichtung der Elemente innerhalb der Typografie-Preview. |