From 27fca7a0490d85a884b516f97b64c7696fd8e20e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 19 May 2026 09:10:02 +0200 Subject: [PATCH] Reassign component layout tokens from layout docs --- semantic-tokens-components.html | 26 +++++++++++++++++++++ semantic-tokens-layouts.html | 40 +-------------------------------- 2 files changed, 27 insertions(+), 39 deletions(-) diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index 15bd66b..c318213 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. @@ -69,6 +80,7 @@ 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

@@ -80,12 +92,21 @@ text-control-defaultcolor-font-darkStandard-Textfarbe in Controls. text-control-disabledcolor-dark-greyTextfarbe deaktivierter Controls. surface-input-clearcolor-medium-greyFläche des Clear-Buttons in Inputs. + layout-input-label-widthdimension-input-label-widthDesktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder. + layout-input-field-desktop-widthdimension-input-field-desktop-widthFixe Desktop-Breite für ein- und mehrzeilige Eingabefelder. + layout-input-field-max-widthdimension-input-field-max-widthMaximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld). + layout-search-field-widthdimension-search-field-widthFixe Breite des Suchfeld-Inputs.

Pulldown and Menu

+ + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-pulldown-panelcolor-light-greyFläche geöffneter Pulldown-Panels.
icon-pulldown-chevroncurrentColor-basierte VerlaufsgrafikChevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.
layout-pulldown-panel-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand des geöffneten Pulldown-Panels.
layout-pulldown-option-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand der einzelnen Pulldown-Optionen.
layout-pulldown-padding-inlinecompact-interaction-padding-horizontalInnenabstand links für Pulldown-Trigger und Select-Felder.
layout-pulldown-chevron-offsetcompact-interaction-padding-horizontalRechter Innenabstand des Chevron-Icons im Pulldown.
layout-pulldown-chevron-reserved-spacespacing-largeReservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.
surface-menu-panel-portalcolor-light-greyFläche des Sandwich-Menü-Panels für große und kleine Variante.
text-menu-link-portalcolor-font-darkLinktextfarbe im Sandwich-Menü für große und kleine Variante.
@@ -94,6 +115,9 @@ + + + @@ -102,6 +126,7 @@ +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-toggle-trackcolor-medium-greyToggle-Track-Fläche.
surface-toggle-handlecolor-darkblueToggle-Handle-Fläche.
layout-mode-toggle-local-heightcompact-interaction-heightHöhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß.
layout-mode-toggle-local-width-factor3Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe.
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.
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 Sandwich-Icons für große und kleine Variante.
@@ -164,6 +189,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.
diff --git a/semantic-tokens-layouts.html b/semantic-tokens-layouts.html index 46f3829..7d31c6c 100644 --- a/semantic-tokens-layouts.html +++ b/semantic-tokens-layouts.html @@ -13,45 +13,7 @@

Layouts

-

Cards

- - - - - - - - - - - - -
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
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.
- -

Interactive Elements

- - - - - - - - - - - - - - - -
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
layout-tab-navigation-large-padding-inlineinteraction-padding-horizontalHorizontaler Innenabstand für große Tab-Navigationen.
layout-input-label-widthdimension-input-label-widthDesktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.
layout-input-field-desktop-widthdimension-input-field-desktop-widthFixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.
layout-input-field-max-widthdimension-input-field-max-widthMaximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).
layout-search-field-widthdimension-search-field-widthFixe Breite des Suchfeld-Inputs.
layout-pulldown-panel-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand des geöffneten Pulldown-Panels.
layout-pulldown-option-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand der einzelnen Pulldown-Optionen.
layout-pulldown-padding-inlinecompact-interaction-padding-horizontalInnenabstand links für Pulldown-Trigger und Select-Felder.
layout-pulldown-chevron-offsetcompact-interaction-padding-horizontalRechter Innenabstand des Chevron-Icons im Pulldown.
layout-pulldown-chevron-reserved-spacespacing-largeReservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.
layout-mode-toggle-local-heightcompact-interaction-heightHöhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß.
layout-mode-toggle-local-width-factor3Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe.
layout-mode-toggle-widthcalc(interaction-height * 3.5)Standardbreite des Mode-Toggles in regulären Varianten.
layout-help-panel-widthcalc(interaction-height * 8)Standardbreite des Help-Panels.
- -

Typography

- - -
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
layout-preview-align-itemsflex-startVertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.
- -

Pattern Layout Tokens

+

Pattern und Seiten-Layouts

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
layout-options-row-margin-topspacing-smallAbstand oberhalb der Options Row.
layout-options-row-main-gapspacing-largeHorizontaler Abstand zwischen linker und rechter Aktionsgruppe.