diff --git a/foundations.html b/foundations.html
index c265123..7adc265 100644
--- a/foundations.html
+++ b/foundations.html
@@ -132,13 +132,15 @@
| chart-height-line | 18rem | Basis-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-width | 4rem | Breite der Y-Achsenbeschriftungsspalte bei Charts. |
| chart-axis-label-gap | 5px | Horizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse. |
- | chart-bar-width | 2rem | Basisbreite von Balken in Bar Charts. |
| chart-grid-line-width | 1px | Linienstärke von Gridlines und Achsen in Charts. |
| chart-line-width | 2px | Linienstärke der Datenlinie im Line Chart. |
| input-label-width | 9rem | Desktop-Breite der Label-Spalte bei ein- und mehrzeiligen Eingabefeldern. |
| input-field-desktop-width | 400px | Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. |
| input-field-max-width | 600px | Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). |
| search-field-width | 15.3rem | Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. |
+ | options-row-mode-toggle-width | 7rem | Breite des Modus-Schiebers in der Options Row. |
+ | options-row-help-panel-width | 16rem | Breite des Help-Panels in der Options Row. |
+ | card-list-drawer-width | 40% | 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-top | spacing-small | Abstand oberhalb der Options Row. |
| layout-options-row-main-gap | spacing-large | Horizontaler Abstand zwischen linker und rechter Aktionsgruppe. |
| layout-options-row-group-gap | spacing-small | Abstand zwischen Controls innerhalb der linken und rechten Gruppe. |
- | layout-options-row-mode-toggle-width | 7rem | Breite des Mode-Toggles innerhalb der Options Row. |
- | layout-options-row-help-panel-width | 16rem | Breite des Help-Panels innerhalb der Options Row. |
+ | layout-options-row-mode-toggle-width | dimension-options-row-mode-toggle-width | Breite des Mode-Toggles innerhalb der Options Row. |
+ | layout-options-row-help-panel-width | dimension-options-row-help-panel-width | Breite des Help-Panels innerhalb der Options Row. |
Object Card
@@ -258,7 +258,7 @@
| layout-content-cards-group-gap | spacing-small | Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe. |
| surface-card-list-drawer | color-background-purple | Fläche des ausziehbaren Card-Listenbereichs. |
| text-card-list-drawer | color-font-dark | Textfarbe im ausziehbaren Card-Listenbereich. |
- | layout-card-list-drawer-width | 40% | Breite des ausziehbaren Card-Listenbereichs relativ zum Container. |
+ | layout-card-list-drawer-width | dimension-card-list-drawer-width | Breite 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;