From 9baa81e6b3c53516e4a318e84db82ca431048f0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 19 May 2026 08:52:05 +0200 Subject: [PATCH] Promote layout fixed widths to foundation dimension tokens --- foundations.html | 4 +++- semantic-tokens-components.html | 6 +++--- styleguide.css | 9 ++++++--- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/foundations.html b/foundations.html index c265123..7adc265 100644 --- a/foundations.html +++ b/foundations.html @@ -132,13 +132,15 @@ chart-height-line18remBasis-Höhe für Line Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite. chart-axis-label-column-width4remBreite der Y-Achsenbeschriftungsspalte bei Charts. chart-axis-label-gap5pxHorizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse. - chart-bar-width2remBasisbreite von Balken in Bar Charts. chart-grid-line-width1pxLinienstärke von Gridlines und Achsen in Charts. chart-line-width2pxLinienstärke der Datenlinie im Line Chart. input-label-width9remDesktop-Breite der Label-Spalte bei ein- und mehrzeiligen Eingabefeldern. input-field-desktop-width400pxFixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. input-field-max-width600pxMaximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. + options-row-mode-toggle-width7remBreite des Modus-Schiebers in der Options Row. + options-row-help-panel-width16remBreite des Help-Panels in der Options Row. + card-list-drawer-width40%Relative Breite des ausziehbaren Card-Listenbereichs. diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index 770e61b..8abb8a5 100644 --- a/semantic-tokens-components.html +++ b/semantic-tokens-components.html @@ -226,8 +226,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. + layout-options-row-mode-toggle-widthdimension-options-row-mode-toggle-widthBreite des Mode-Toggles innerhalb der Options Row. + layout-options-row-help-panel-widthdimension-options-row-help-panel-widthBreite des Help-Panels innerhalb der Options Row.

Object Card

@@ -258,7 +258,7 @@ 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. + layout-card-list-drawer-widthdimension-card-list-drawer-widthBreite des ausziehbaren Card-Listenbereichs relativ zum Container. diff --git a/styleguide.css b/styleguide.css index b3cb936..c10895c 100644 --- a/styleguide.css +++ b/styleguide.css @@ -145,8 +145,8 @@ --layout-options-row-margin-top: var(--spacing-small); --layout-options-row-main-gap: var(--spacing-large); --layout-options-row-group-gap: var(--spacing-small); - --layout-options-row-mode-toggle-width: 7rem; - --layout-options-row-help-panel-width: 16rem; + --layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width); + --layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width); --layout-object-card-min-width: var(--dimension-object-card-min-width); --layout-object-card-max-width: var(--dimension-object-card-max-width); --layout-object-card-height: var(--dimension-object-card-height); @@ -164,7 +164,7 @@ --text-content-block-card-title: var(--color-font-dark); --text-content-block-card-content: var(--color-font-dark); --text-card-list-drawer: var(--color-font-dark); - --layout-card-list-drawer-width: 40%; + --layout-card-list-drawer-width: var(--dimension-card-list-drawer-width); /* Typography */ --font-family-base: "Open Sans", sans-serif; @@ -217,6 +217,9 @@ --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; --dimension-search-field-width: 15.3rem; + --dimension-options-row-mode-toggle-width: 7rem; + --dimension-options-row-help-panel-width: 16rem; + --dimension-card-list-drawer-width: 40%; --dimension-slider-track-height: 6px; --dimension-slider-thumb-size: 22px; --dimension-slider-thumb-offset-top: -8px;