From 12efc31cac8111c4a6a65369557f4ff6fbdb24c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 9 Jun 2026 08:55:23 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- docs/styleguide/.claude/settings.json | 9 +++++++++ docs/styleguide/semantic-tokens-components.html | 1 - docs/styleguide/styles/01-foundations.css | 2 -- docs/styleguide/styles/25-patterns-form-sections.css | 6 ++---- public/assets/styleguide.upstream.css | 8 ++------ public/assets/styleguide.upstream.meta.json | 2 +- public/assets/styles.css | 8 ++------ 7 files changed, 16 insertions(+), 20 deletions(-) create mode 100644 docs/styleguide/.claude/settings.json diff --git a/docs/styleguide/.claude/settings.json b/docs/styleguide/.claude/settings.json new file mode 100644 index 0000000..02613c3 --- /dev/null +++ b/docs/styleguide/.claude/settings.json @@ -0,0 +1,9 @@ +{ + "permissions": { + "allow": [ + "Write", + "Edit", + "Bash" + ] + } +} diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html index 7eba895..303e833 100644 --- a/docs/styleguide/semantic-tokens-components.html +++ b/docs/styleguide/semantic-tokens-components.html @@ -136,7 +136,6 @@ layout-pulldown-panel-form-mobile-width90%Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt. layer-pulldown-paneldimension-layer-pulldown-panelLayer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten. layout-multiselect-pulldown-panel-desktop-widthdimension-multiselect-pulldown-panel-desktop-widthSemantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt. - layout-multiselect-pulldown-panel-mobile-widthdimension-multiselect-pulldown-panel-mobile-widthReservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert. 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. text-activatable-removetext-control-defaultZeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche. diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index aff2570..9a8329e 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -77,7 +77,6 @@ --layout-pulldown-panel-form-mobile-width: 90%; --layer-pulldown-panel: var(--dimension-layer-pulldown-panel); --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width); - --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width); --layout-multiselect-pulldown-label-column-width-fallback: max-content; --layout-input-label-width: var(--dimension-input-label-width); --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); @@ -277,7 +276,6 @@ --dimension-search-field-width: 15.3rem; --dimension-layer-pulldown-panel: 40; --dimension-multiselect-pulldown-panel-desktop-width: 500px; - --dimension-multiselect-pulldown-panel-mobile-width: 80vw; --dimension-options-row-mode-toggle-width: 7rem; --dimension-options-row-help-panel-width: 16rem; --dimension-card-list-drawer-width: 40%; diff --git a/docs/styleguide/styles/25-patterns-form-sections.css b/docs/styleguide/styles/25-patterns-form-sections.css index 5bba2fe..ff19e5c 100644 --- a/docs/styleguide/styles/25-patterns-form-sections.css +++ b/docs/styleguide/styles/25-patterns-form-sections.css @@ -205,7 +205,7 @@ opacity: var(--disabled-opacity); } -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { min-width: 100%; width: max-content; max-width: calc(100vw - (2 * var(--spacing-large))); @@ -213,9 +213,7 @@ @media (max-width: 48rem) { .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { - min-width: 100%; - width: max-content; - max-width: calc(100vw - (2 * var(--spacing-large))); + min-width: auto; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index f39af61..1406d9d 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -77,7 +77,6 @@ --layout-pulldown-panel-form-mobile-width: 90%; --layer-pulldown-panel: var(--dimension-layer-pulldown-panel); --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width); - --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width); --layout-multiselect-pulldown-label-column-width-fallback: max-content; --layout-input-label-width: var(--dimension-input-label-width); --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); @@ -277,7 +276,6 @@ --dimension-search-field-width: 15.3rem; --dimension-layer-pulldown-panel: 40; --dimension-multiselect-pulldown-panel-desktop-width: 500px; - --dimension-multiselect-pulldown-panel-mobile-width: 80vw; --dimension-options-row-mode-toggle-width: 7rem; --dimension-options-row-help-panel-width: 16rem; --dimension-card-list-drawer-width: 40%; @@ -2511,7 +2509,7 @@ section + section { opacity: var(--disabled-opacity); } -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { min-width: 100%; width: max-content; max-width: calc(100vw - (2 * var(--spacing-large))); @@ -2519,9 +2517,7 @@ section + section { @media (max-width: 48rem) { .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { - min-width: 100%; - width: max-content; - max-width: calc(100vw - (2 * var(--spacing-large))); + min-width: auto; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 74f9fb3..9e28d6e 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", "styleguideCommit": "a5e286f", - "syncedAtUtc": "2026-06-05T06:08:46Z", + "syncedAtUtc": "2026-06-09T06:55:23Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index f39af61..1406d9d 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -77,7 +77,6 @@ --layout-pulldown-panel-form-mobile-width: 90%; --layer-pulldown-panel: var(--dimension-layer-pulldown-panel); --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width); - --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width); --layout-multiselect-pulldown-label-column-width-fallback: max-content; --layout-input-label-width: var(--dimension-input-label-width); --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); @@ -277,7 +276,6 @@ --dimension-search-field-width: 15.3rem; --dimension-layer-pulldown-panel: 40; --dimension-multiselect-pulldown-panel-desktop-width: 500px; - --dimension-multiselect-pulldown-panel-mobile-width: 80vw; --dimension-options-row-mode-toggle-width: 7rem; --dimension-options-row-help-panel-width: 16rem; --dimension-card-list-drawer-width: 40%; @@ -2511,7 +2509,7 @@ section + section { opacity: var(--disabled-opacity); } -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { min-width: 100%; width: max-content; max-width: calc(100vw - (2 * var(--spacing-large))); @@ -2519,9 +2517,7 @@ section + section { @media (max-width: 48rem) { .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { - min-width: 100%; - width: max-content; - max-width: calc(100vw - (2 * var(--spacing-large))); + min-width: auto; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {