diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index 7b5de9d..c2f1a1f 100644 --- a/semantic-tokens-components.html +++ b/semantic-tokens-components.html @@ -25,6 +25,17 @@ divider-card-segmentcolor-whiteTrenner zwischen Segmenten. text-card-headercolor-font-lightHeader-Textfarbe. text-card-bodycolor-font-darkStandard-Textfarbe im Body. + layout-card-body-content-justifyflex-startAusrichtung des Inhalts im Body-Segment der Card. + layout-card-segment-content-gapspacing-smallVertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments. + layout-card-segment-padding-topcard-segment-padding-verticalOberer Innenabstand von Card-Segmenten. + layout-card-segment-padding-rightcard-segment-padding-horizontalRechter Innenabstand von Card-Segmenten. + layout-card-segment-padding-bottomcard-segment-padding-verticalUnterer Innenabstand von Card-Segmenten. + layout-card-segment-padding-leftcard-segment-padding-horizontalLinker Innenabstand von Card-Segmenten. + layout-card-body-padding-toplayout-card-segment-padding-topOberer Innenabstand des Card-Body-Segments. + layout-card-body-padding-rightlayout-card-segment-padding-rightRechter Innenabstand des Card-Body-Segments. + layout-card-body-padding-bottomlayout-card-segment-padding-bottomUnterer Innenabstand des Card-Body-Segments. + layout-card-body-padding-leftlayout-card-segment-padding-leftLinker Innenabstand des Card-Body-Segments. + layout-card-body-text-margin0Textabstand im Card-Body; verhindert zusätzliche Default-Margins. @@ -65,8 +76,11 @@ + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-tab-selectedcolor-dark-greyFläche des ausgewählten Tabs.
surface-tab-unselectedcolor-whiteFläche nicht ausgewählter Tabs.
surface-tab-compact-backgroundsurface-form-previewHintergrundfläche kompakter Tab-Navigationen.
surface-tab-compact-unselectedcolor-medium-greyFläche nicht aktiver Tabs in der kompakten Variante.
text-tab-selectedcolor-font-lightTextfarbe des ausgewählten Tabs.
text-tab-unselectedcolor-dark-greyTextfarbe nicht ausgewählter Tabs.
layout-tab-navigation-large-padding-inlineinteraction-padding-horizontalHorizontaler Innenabstand für große Tab-Navigationen.

Form Controls

@@ -105,6 +119,7 @@ surface-toggle-handlecolor-darkblueToggle-Handle-Fläche. layout-mode-toggle-local-heightcompact-interaction-heightHöhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß (wie Tasten-Navigation-schmal). layout-mode-toggle-local-width-factor3Breitenfaktor des Modus Schieber lokal relativ zur lokalen Höhe für eine proportionale Kompaktvariante. + layout-mode-toggle-widthcalc(interaction-height * 3.5)Standardbreite des Mode-Toggles in regulären Varianten. surface-checkbox-defaultcolor-light-greyStandardfläche der Checkbox. surface-checkbox-on-contextcolor-whiteCheckbox-Fläche auf Kontextflächen. surface-radio-defaultcolor-whiteStandardfläche des Radio-Buttons. @@ -113,6 +128,7 @@ surface-help-panelcolor-light-greyFläche des Help-Panels. text-help-iconcolor-font-darkTextfarbe im Help-Icon. text-help-panelcolor-font-darkTextfarbe im Help-Panel. + layout-help-panel-widthcalc(interaction-height * 8)Standardbreite des Help-Panels. icon-sandwich-line-portalcolor-font-darkLinienfarbe des Portal-Sandwich-Icons (groß). icon-sandwich-line-objectcolor-font-darkLinienfarbe des Objekt-Sandwich-Icons (klein). @@ -176,6 +192,7 @@

Typography Preview

+
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
text-typography-previewcolor-font-lightTextfarbe in der Typografie-Preview.
layout-preview-align-itemsflex-startVertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.
@@ -219,6 +236,8 @@ layout-options-row-margin-topspacing-smallAbstand oberhalb der Options Row. layout-options-row-main-gapspacing-largeHorizontaler Abstand zwischen linker und rechter Aktionsgruppe. layout-options-row-group-gapspacing-smallAbstand zwischen Controls innerhalb der linken und rechten Gruppe. + layout-options-row-mode-toggle-width7remBreite des Mode-Toggles innerhalb der Options Row. + layout-options-row-help-panel-width16remBreite des Help-Panels innerhalb der Options Row.

Object Card

@@ -230,6 +249,8 @@ layout-object-card-mobile-heightdimension-object-card-mobile-heightInhaltsabhängige Höhe der Object Card auf Mobile. layout-object-card-desktop-breakpointdimension-object-card-desktop-breakpointBreakpoint, ab dem die Desktop-Maße der Object Card aktiv sind. layout-object-card-content-growdimension-object-card-content-growFlex-Grow-Wert für das vorletzte Segment, damit das Action-Segment unten in der Card bleibt. + layout-object-card-actions-margin-topspacing-smallAbstand oberhalb des Action-Segments innerhalb der Object Card. + layout-object-card-shared-widthautoGeteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen. surface-object-card-lower-segmentcolor-whiteHintergrundfläche der unteren zwei Segmente der Object Card. @@ -245,6 +266,10 @@ 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. + layout-content-cards-group-gapspacing-smallAbstand zwischen Inhaltsblock-Karten innerhalb der Gruppe. + surface-card-list-drawercolor-background-purpleFläche des ausziehbaren Card-Listenbereichs. + text-card-list-drawercolor-font-darkTextfarbe im ausziehbaren Card-Listenbereich. + layout-card-list-drawer-width40%Breite des ausziehbaren Card-Listenbereichs relativ zum Container.