| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| layout-public-page-pattern-content-width | dimension-public-content-width | Gemeinsame Breite für Inhalte im Public-Page-Pattern-Kontext. |
| layout-public-page-pattern-text-picture-columns | repeat(2, minmax(0, 1fr)) | Spaltenraster des Patterns Pattern: text and picture right mit zwei gleich breiten Spalten. |
| layout-public-page-pattern-text-picture-gap | spacing-large | Spaltenabstand zwischen Text und Bild im Pattern Pattern: text and picture right. |
| text-public-page-pattern-text-picture | color-font-light | Textfarbe des Patterns Pattern: text and picture right. |
| layout-public-page-pattern-call-to-action-box-width | calc(var(--dimension-public-content-width) * 0.5) | Breite der dunklen Public Call to Action Box im Public-Page-Pattern-Kontext. |
| surface-public-page-pattern-call-to-action-box-light | color-light-grey | Hintergrundfläche der Variante Pattern: Public Call to Action Box light. |
| surface-public-page-pattern-call-to-action-full-width-title | surface-portal-header | Hintergrundfläche des blauen Titelsegments im Pattern call to action full witdh. |
| text-public-page-pattern-call-to-action-full-width-title | text-portal-header-brand | Weiße Textfarbe der Titel- und Meldungssegmente im Pattern call to action full witdh. |
| 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-scrollable-card-width | dimension-scrollable-card-width | Fixe Breite der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden. |
| layout-scrollable-card-height | dimension-scrollable-card-height | Fixe Höhe der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden. |
| 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. |
| layout-object-group-card-height | dimension-object-group-card-height | Fixe Desktop-Höhe 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. |
| layout-user-notification-card-width | dimension-user-notification-card-width | Breite des Patterns Pattern: User Notification; auf Desktop 70 % der verfügbaren Breite und auf Mobile 100 %. |
| layout-user-notification-staple-offset | spacing-small | Horizontale und vertikale Versetzung der hinteren Karten im Pattern Pattern: User Notification Staple. |
| 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-panel-width | layout-multiselect-pulldown-panel-desktop-width | Feste Breite des Multiselektions-Pulldown-Panels auf allen Viewports innerhalb der vorhandenen Viewport-Kappe. |
| layout-multiselect-panel-available-width | Viewportbreite minus 2 × spacing-large | Viewport-Kappe für das Multiselektions-Pulldown-Panel mit gleichmäßigem Außenabstand. |
| layout-multiselect-chapter-gap | spacing-large | Einheitlicher vertikaler Abstand zwischen allen direkten Elementen eines Multiselect-Blocks. |
| layout-multiselect-column-gap | spacing-large | Horizontaler Abstand zwischen Aktivierungsschalter und Label in den Pattern-Zeilen. |
| layout-multiselect-control-gap | spacing-small | Standardabstand innerhalb der Slider-Zeilen. |
| layout-multiselect-visual-control-gap | 2 × spacing-small | Visueller Abstand zwischen Kopfzeile und Interaktionselement bei Radio- und Pulldown-Zeilen. |
| layout-multiselect-control-row-height | interaction-height | Höhe der Kopfzeile in den filterbaren Pulldown-Zeilen. |
| layout-multiselect-value-min-width | 1.25 × interaction-height | Mindestbreite der Slider-Wertanzeige. |
| typography-multiselect-label-line-height | line-height-base | Zeilenhöhe der Labels in den filterbaren Pulldown-Zeilen. |
| opacity-multiselect-disabled | disabled-opacity | Deckkraft deaktivierter Multiselect-Inhalte. |
| 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 | dimension-delete-confirmation-target-max-width | Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. |
| layout-delete-confirmation-overlay-width-factor | dimension-delete-confirmation-overlay-width-factor | Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts. |
| layout-delete-confirmation-overlay-offset-block-start | dimension-delete-confirmation-overlay-offset-block-start | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Parent-Höhe. |
| layout-delete-confirmation-overlay-max-height | 100% minus 2 × offset-block-start | Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. |
| 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 | opacity-delete-confirmation-target-dim | Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt. |
| layer-delete-confirmation-overlay | dimension-layer-delete-confirmation-overlay | Z-Index-Layer des schwebenden Bestätigungsfensters. |
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
|---|---|---|
| surface-file-upload-dropzone | surface-form-preview | Hintergrundfläche des auswählbaren Upload-Bereichs. |
| surface-file-upload-file-item | surface-control-default | Hintergrundfläche eines Eintrags in der Dateiliste. |
| text-file-upload-meta | text-control-disabled | Textfarbe für Dateigröße und ergänzende Dateimetadaten. |
| text-file-upload-error | color-signal-red | Textfarbe für Validierungs- und Upload-Fehlermeldungen. |