From 1ff7b59e3cd232fca462e36614e6ef99177e8f5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Mon, 25 May 2026 06:49:30 +0200 Subject: [PATCH] Clean interactive elements token cascade and sync docs --- foundations.html | 5 ++++- semantic-tokens-components.html | 4 ++++ styleguide.css | 15 +++++++++++---- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/foundations.html b/foundations.html index 89f1c17..6d861b4 100644 --- a/foundations.html +++ b/foundations.html @@ -121,7 +121,7 @@ compact-interaction-height1.5remEinheitliche Höhe für schmale Interaktionselemente wie Tasten-Navigation-schmal. compact-interaction-padding0.15rem vertikal / 0.75rem horizontalInnenabstand schmaler Interaktionselemente. small-interaction-element-size1.25remEigene Höhe und Breite kleiner Interaktionselemente wie Fragezeichen-Icon, Checkboxen und Radio Buttons. - disabled-opacity0.45Deckkraft für fachlich nicht verfügbare oder technisch deaktivierte Interaktionselemente. + disabled-opacity0.7Deckkraft für fachlich nicht verfügbare oder technisch deaktivierte Interaktionselemente. sandwich-line-width1.25remLänge der Striche im Sandwich-Menü-Button. sandwich-line-height4pxDicke der Striche im Sandwich-Menü-Button. sandwich-line-gap3pxAbstand zwischen den Strichen im Sandwich-Menü-Button. @@ -137,10 +137,13 @@ 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). + slider-min-inline-size14remMinimale Flex-Basisbreite des Slider-Felds in Zeilenlayouts, bevor es auf verfügbare Breite umbricht. object-card-height600pxFixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). object-group-card-min-width550pxMindestbreite der Group Card im Pattern Object Group Card. object-group-card-max-width800pxMaximale Breite der Group Card im Pattern Object Group Card. search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. + sandwich-line-width-smallsandwich-line-width - 3pxLinienlänge des Sandwich-Icons in der kleinen Objekt-Variante. + sandwich-line-height-smallsandwich-line-height - 1pxLinienstärke des Sandwich-Icons in der kleinen Objekt-Variante. layer-pulldown-panel40Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. multiselect-pulldown-panel-desktop-width500pxReservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert. multiselect-pulldown-panel-mobile-width80vwReservierte mobile Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert. diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index 4f23f6d..60665cf 100644 --- a/semantic-tokens-components.html +++ b/semantic-tokens-components.html @@ -114,10 +114,12 @@ surface-control-disabledcolor-whiteFläche deaktivierter Controls. text-control-defaultcolor-font-darkStandard-Textfarbe in Controls. text-control-disabledcolor-dark-greyTextfarbe deaktivierter Controls. + text-search-result-counttext-control-disabledSekundäre Textfarbe der Trefferanzahl neben dem Suchfeld. 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-slider-min-inline-sizedimension-slider-min-inline-sizeMinimale Flex-Basisbreite des Slider-Controls im Zeilenlayout. layout-search-field-widthdimension-search-field-widthFixe Breite des Suchfeld-Inputs. @@ -158,6 +160,8 @@ 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. + layout-sandwich-line-width-smalldimension-sandwich-line-width-smallLinienlänge des Sandwich-Icons in der kleinen Objekt-Variante. + layout-sandwich-line-height-smalldimension-sandwich-line-height-smallLinienstärke des Sandwich-Icons in der kleinen Objekt-Variante.

Slider

diff --git a/styleguide.css b/styleguide.css index ee20155..83c7771 100644 --- a/styleguide.css +++ b/styleguide.css @@ -80,13 +80,17 @@ --layout-input-label-width: var(--dimension-input-label-width); --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); --layout-input-field-max-width: var(--dimension-input-field-max-width); + --layout-slider-min-inline-size: var(--dimension-slider-min-inline-size); --layout-search-field-width: var(--dimension-search-field-width); --layout-mode-toggle-local-height: var(--compact-interaction-height); --layout-mode-toggle-local-width-factor: 3; --layout-mode-toggle-width: calc(var(--interaction-height) * 3.5); --layout-help-panel-width: calc(var(--interaction-height) * 8); + --layout-sandwich-line-width-small: var(--dimension-sandwich-line-width-small); + --layout-sandwich-line-height-small: var(--dimension-sandwich-line-height-small); --text-control-default: var(--color-font-dark); --text-control-disabled: var(--color-dark-grey); + --text-search-result-count: var(--text-control-disabled); --text-button-process: var(--color-font-light); --text-tab-selected: var(--color-font-light); --text-tab-unselected: var(--color-dark-grey); @@ -248,7 +252,10 @@ --dimension-input-label-width: 9rem; --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; + --dimension-slider-min-inline-size: 14rem; --dimension-search-field-width: 15.3rem; + --dimension-sandwich-line-width-small: calc(var(--sandwich-line-width) - 3px); + --dimension-sandwich-line-height-small: calc(var(--sandwich-line-height) - 1px); --dimension-layer-pulldown-panel: 40; --dimension-multiselect-pulldown-panel-desktop-width: 500px; --dimension-multiselect-pulldown-panel-mobile-width: 80vw; @@ -740,7 +747,7 @@ section + section { } .sg-search-result-count { - color: var(--color-dark-grey); + color: var(--text-search-result-count); font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); @@ -951,7 +958,7 @@ section + section { } .sg-slider { - flex: 1 1 14rem; + flex: 1 1 var(--layout-slider-min-inline-size); width: 100%; min-width: 0; max-width: var(--layout-input-field-max-width); @@ -1235,12 +1242,12 @@ section + section { } .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line { - height: calc(var(--sandwich-line-height) - 1px); + height: var(--layout-sandwich-line-height-small); background: var(--icon-sandwich-line-portal); } .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon { - width: calc(var(--sandwich-line-width) - 3px); + width: var(--layout-sandwich-line-width-small); } .sg-sandwich-menu-wrap {