| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| 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. |
| layout-page-content-inset-inline | card-segment-padding-horizontal | Gemeinsamer horizontaler Content-Inset für Portal Header, Options Row und Card-Listen-Drawer-Content (Single Source of Spacing Truth auf Pattern-Ebene). |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| 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. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| surface-object-card-lower-segment | color-white | Hintergrundfläche der unteren zwei Segmente der Object Card. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| layout-object-group-card-min-width | dimension-object-group-card-min-width | Mindestbreite der einzelnen Karten im Pattern Object Group Card. |
| layout-object-group-card-max-width | dimension-object-group-card-max-width | Maximalbreite der einzelnen Karten im Pattern Object Group Card. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| layout-notifications-card-flex-basis | dimension-notifications-card-min-width | Flex-Basis der Notification Card im Notifications-Pattern; entspricht der gemeinsamen Foundation-Mindestbreite und gilt auch in der dokumentierten Variante innerhalb von .sg-group-card. |
| layout-notifications-card-min-width | dimension-notifications-card-min-width | Mindestbreite der Notification Card im Notifications-Pattern; 50px größer als die Object Card und verhindert zu frühes Schrumpfen bei Viewport-Änderungen. |
| layout-notifications-card-max-width | layout-object-card-max-width | Maximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite. |
| layout-notifications-text-segment-fixed-height | dimension-notifications-text-segment-fixed-height | Fixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt. |
| layout-notifications-text-segment-fixed-height-small | dimension-notifications-text-segment-fixed-height-small | Fixe Desktop-Höhe des ersten Text-Segments in der Variante Pattern: Notifications small; auf Mobile wird die Höhe auf auto gesetzt. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| text-company-card-data-negative | chart-value-negative | Textfarbe für negative Kennzahlenwerte im Data-Columns-Segment der Company Card. |
| text-company-card-moat-neutral | chart-value-neutral | Textfarbe für die neutrale Moat-Ausprägung im Analyse-Segment der Company Card. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| 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 im Pattern |
|---|---|---|
| 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. |
| 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. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| surface-text-layout-preview | color-light-grey | Hintergrundfläche der Vorschau-Segmente im Pattern Text Layouts. |
| layout-text-layout-column-gap | spacing-large | Horizontaler Abstand zwischen Textspalten in zwei- und dreispaltigen Varianten. |
| layout-text-layout-two-column-columns | repeat(2, minmax(0, 1fr)) | Spaltenraster für die zweispaltige Text-Variante. |
| layout-text-layout-three-column-columns | repeat(3, minmax(0, 1fr)) | Spaltenraster für das Pattern Dreispaltig verteilt. |
| text-align-text-layout-column-left | left | Textausrichtung der linken Spalte im Pattern Dreispaltig verteilt. |
| text-align-text-layout-column-center | center | Textausrichtung der mittleren Spalte im Pattern Dreispaltig verteilt. |
| text-align-text-layout-column-right | right | Textausrichtung der rechten Spalte im Pattern Dreispaltig verteilt. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| text-vsf-list-card-limit-note | color-signal-red | Hinweistextfarbe für die Meldung bei erreichter maximaler Listenanzahl. |
| layout-vsf-list-card-summary-offset-block-start | layout-company-card-analysis-gap-after-moat | Vertikaler Abstand vor dem Summary-Block in der VSF List Card. |
| layout-vsf-list-card-delete-confirmation-target-max-width | layout-object-group-card-max-width | Maximalbreite der Delete-Confirmation-Zielkarte innerhalb der VSF-List-Card-Demo. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| layout-multiselect-pulldown-label-column-width-fallback | max-content | Fallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| surface-delete-confirmation-overlay | color-light-grey | Hintergrundfläche des schwebenden Bestätigungsfensters. |
| surface-delete-confirmation-target-dim-overlay | color-black | Overlay-Farbe zur Ausgrauung des Zielobjekts hinter dem Bestätigungsfenster. |
| text-delete-confirmation-overlay | color-font-dark | Textfarbe im Bestätigungsfenster. |
| layout-delete-confirmation-target-max-width | 35rem | Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. |
| layout-delete-confirmation-overlay-width-factor | 0.8 | Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%). |
| layout-delete-confirmation-overlay-offset-block-start | spacing-large | Abstand des Overlays von der oberen Kante des Zielobjekts. |
| layout-delete-confirmation-content-gap | spacing-small | Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay. |
| layout-delete-confirmation-actions-gap | spacing-small | Horizontaler Abstand zwischen Abbrechen- und Löschen-Button. |
| layout-delete-confirmation-actions-offset-block-start | spacing-large | Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile. |
| layout-delete-confirmation-label-width | dimension-input-label-width | Label-Spaltenbreite der einzeiligen Bestätigungseingabe. |
| layout-delete-confirmation-target-dim-opacity | 0.5 | Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt (50% ausgegraut). |
| layer-delete-confirmation-overlay | 50 | Z-Index-Layer des schwebenden Bestätigungsfensters. |