| 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-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. |
| 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 |
|---|---|---|
| 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-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. |
| 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. |
| 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. |
| 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. |
| 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. |
| layout-mode-toggle-local-height | compact-interaction-height | Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß (wie Tasten-Navigation-schmal). |
| layout-mode-toggle-local-width-factor | 3 | Breitenfaktor des Modus Schieber lokal relativ zur lokalen Höhe für eine proportionale Kompaktvariante. |
| layout-mode-toggle-width | calc(interaction-height * 3.5) | Standardbreite des Mode-Toggles in regulären Varianten. |
| surface-checkbox-default | color-light-grey | 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-light-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. |
| 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 |
|---|---|---|
| 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. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-portal-header | color-darkblue | Header-Grundfläche. |
| surface-portal-header-tab | color-midblue | Fläche nicht aktiver Header-Tabs. |
| surface-portal-header-tab-active | color-light-grey | Fläche aktiver Header-Tabs. |
| text-portal-header-brand | color-font-light | Textfarbe der Brand. |
| font-size-portal-header-brand | calc(var(--font-size-brand) * 1.1) | Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand). |
| text-portal-header-tab | color-font-light | Textfarbe nicht aktiver Header-Tabs. |
| text-portal-header-tab-active | color-font-dark | Textfarbe aktiver Header-Tabs. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-options-row | color-light-grey | Grundfläche der Options Row. |
| surface-options-row-control | surface-control-default | Alias auf Standard-Control-Fläche innerhalb der Options Row. |
| surface-options-row-control-selected | surface-control-active | Alias auf aktive Control-Fläche innerhalb der Options Row. |
| surface-options-row-input-clear | surface-input-clear | Alias auf Clear-Button-Fläche im Input der Options Row. |
| surface-options-row-toggle-track | surface-toggle-track | Alias auf Toggle-Track-Fläche innerhalb der Options Row. |
| surface-options-row-toggle-handle | surface-toggle-handle | Alias auf Toggle-Handle-Fläche innerhalb der Options Row. |
| surface-options-row-help-icon | surface-help-icon | Alias auf Help-Icon-Fläche innerhalb der Options Row. |
| surface-options-row-help-panel | surface-help-panel | Alias auf Help-Panel-Fläche innerhalb der Options Row. |
| divider-options-row-mobile | color-white | Trennerfarbe zwischen Segmenten im mobilen Layout der Options Row. |
| text-options-row-default | text-control-default | Alias auf Standard-Textfarbe für Controls in der Options Row. |
| text-options-row-placeholder | text-control-disabled | Alias auf Placeholder-/Disabled-Textfarbe in der Options Row. |
| text-options-row-help-icon | color-font-light | Textfarbe im Help-Icon der Options Row. |
| text-options-row-help-panel | text-help-panel | Alias auf Help-Panel-Textfarbe der Options Row. |
| text-options-row-description | color-font-light | Textfarbe der beschreibenden Hinweistexte oberhalb der Options Row. |
| layout-options-row-margin-top | spacing-small | Abstand oberhalb der Options Row. |
| layout-options-row-main-gap | spacing-large | Horizontaler Abstand zwischen linker und rechter Aktionsgruppe. |
| layout-options-row-group-gap | spacing-small | Abstand zwischen Controls innerhalb der linken und rechten Gruppe. |
| layout-options-row-mode-toggle-width | 7rem | Breite des Mode-Toggles innerhalb der Options Row. |
| layout-options-row-help-panel-width | 16rem | Breite des Help-Panels innerhalb der Options Row. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| layout-object-card-min-width | dimension-object-card-min-width | Mindestbreite der Object Card im horizontalen Desktop-Layout. |
| layout-object-card-max-width | dimension-object-card-max-width | Maximalbreite der Object Card im horizontalen Desktop-Layout. |
| layout-object-card-height | dimension-object-card-height | Fixe Höhe der Object Card im Desktop-Layout. |
| layout-object-card-mobile-width | dimension-object-card-mobile-width | Volle verfügbare Breite der Object Card auf Mobile. |
| layout-object-card-mobile-height | dimension-object-card-mobile-height | Inhaltsabhängige Höhe der Object Card auf Mobile. |
| layout-object-card-desktop-breakpoint | dimension-object-card-desktop-breakpoint | Breakpoint, ab dem die Desktop-Maße der Object Card aktiv sind. |
| layout-object-card-content-grow | dimension-object-card-content-grow | Flex-Grow-Wert für das vorletzte Segment, damit das Action-Segment unten in der Card bleibt. |
| layout-object-card-shared-width | auto | Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen. |
| surface-object-card-lower-segment | color-white | Hintergrundfläche der unteren zwei Segmente der Object Card. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-navigation-card | color-white | Grundfläche der Navigation Card. |
| surface-navigation-card-body | color-white | Fläche im Body-Segment der Navigation Card. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
|---|---|---|
| surface-content-block-card-title | color-light-grey | Hintergrundfläche des oberen Titel-Segments der Inhaltsblock-Karte. |
| surface-content-block-card-content | color-white | Hintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte. |
| text-content-block-card-title | color-font-dark | Textfarbe im Titel-Segment der Inhaltsblock-Karte. |
| text-content-block-card-content | color-font-dark | Textfarbe im Inhalts-Segment der Inhaltsblock-Karte. |
| layout-content-cards-group-gap | spacing-small | Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe. |
| surface-card-list-drawer | color-background-purple | Fläche des ausziehbaren Card-Listenbereichs. |
| text-card-list-drawer | color-font-dark | Textfarbe im ausziehbaren Card-Listenbereich. |
| layout-card-list-drawer-width | 40% | Breite des ausziehbaren Card-Listenbereichs relativ zum Container. |