Semantic Tokens Patterns

Patterns

Portal Header

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-portal-headercolor-darkblueHeader-Grundfläche.
surface-portal-header-tabcolor-midblueFläche nicht aktiver Header-Tabs.
surface-portal-header-tab-activecolor-light-greyFläche aktiver Header-Tabs.
text-portal-header-brandcolor-font-lightTextfarbe der Brand.
font-size-portal-header-brandcalc(var(--font-size-brand) * 1.1)Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).
text-portal-header-tabcolor-font-lightTextfarbe nicht aktiver Header-Tabs.
text-portal-header-tab-activecolor-font-darkTextfarbe aktiver Header-Tabs.

Options Row

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-options-rowcolor-light-greyGrundfläche der Options Row.
surface-options-row-controlsurface-control-defaultAlias auf Standard-Control-Fläche innerhalb der Options Row.
surface-options-row-control-selectedsurface-control-activeAlias auf aktive Control-Fläche innerhalb der Options Row.
surface-options-row-input-clearsurface-input-clearAlias auf Clear-Button-Fläche im Input der Options Row.
surface-options-row-toggle-tracksurface-toggle-trackAlias auf Toggle-Track-Fläche innerhalb der Options Row.
surface-options-row-toggle-handlesurface-toggle-handleAlias auf Toggle-Handle-Fläche innerhalb der Options Row.
surface-options-row-help-iconsurface-help-iconAlias auf Help-Icon-Fläche innerhalb der Options Row.
surface-options-row-help-panelsurface-help-panelAlias auf Help-Panel-Fläche innerhalb der Options Row.
divider-options-row-mobilecolor-whiteTrennerfarbe zwischen Segmenten im mobilen Layout der Options Row.
text-options-row-defaulttext-control-defaultAlias auf Standard-Textfarbe für Controls in der Options Row.
text-options-row-placeholdertext-control-disabledAlias auf Placeholder-/Disabled-Textfarbe in der Options Row.
text-options-row-help-iconcolor-font-lightTextfarbe im Help-Icon der Options Row.
text-options-row-help-paneltext-help-panelAlias auf Help-Panel-Textfarbe der Options Row.
text-options-row-descriptioncolor-font-lightTextfarbe der beschreibenden Hinweistexte oberhalb der Options Row.

Object Card

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-object-card-lower-segmentcolor-whiteHintergrundfläche der unteren zwei Segmente der Object Card.

Navigation Card

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-navigation-cardcolor-whiteGrundfläche der Navigation Card.
surface-navigation-card-bodycolor-whiteFläche im Body-Segment der Navigation Card.

Card Gruppe mit Tastennavigation

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-content-block-card-titlecolor-light-greyHintergrundfläche des oberen Titel-Segments der Inhaltsblock-Karte.
surface-content-block-card-contentcolor-whiteHintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte.
text-content-block-card-titlecolor-font-darkTextfarbe im Titel-Segment der Inhaltsblock-Karte.
text-content-block-card-contentcolor-font-darkTextfarbe im Inhalts-Segment der Inhaltsblock-Karte.
surface-card-list-drawercolor-background-purpleFläche des ausziehbaren Card-Listenbereichs.
text-card-list-drawercolor-font-darkTextfarbe im ausziehbaren Card-Listenbereich.