Promote layout fixed widths to foundation dimension tokens

foundations.html

@@ -132,13 +132,15 @@
         <tr><td>chart-height-line</td><td>18rem</td><td>Basis-Höhe für Line Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite.</td></tr>
         <tr><td>chart-axis-label-column-width</td><td>4rem</td><td>Breite der Y-Achsenbeschriftungsspalte bei Charts.</td></tr>
         <tr><td>chart-axis-label-gap</td><td>5px</td><td>Horizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse.</td></tr>
-        <tr><td>chart-bar-width</td><td>2rem</td><td>Basisbreite von Balken in Bar Charts.</td></tr>
         <tr><td>chart-grid-line-width</td><td>1px</td><td>Linienstärke von Gridlines und Achsen in Charts.</td></tr>
         <tr><td>chart-line-width</td><td>2px</td><td>Linienstärke der Datenlinie im Line Chart.</td></tr>
         <tr><td>input-label-width</td><td>9rem</td><td>Desktop-Breite der Label-Spalte bei ein- und mehrzeiligen Eingabefeldern.</td></tr>
         <tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
         <tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
+        <tr><td>options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Modus-Schiebers in der Options Row.</td></tr>
+        <tr><td>options-row-help-panel-width</td><td>16rem</td><td>Breite des Help-Panels in der Options Row.</td></tr>
+        <tr><td>card-list-drawer-width</td><td>40%</td><td>Relative Breite des ausziehbaren Card-Listenbereichs.</td></tr>
       </tbody>
     </table>
   </section>

semantic-tokens-components.html

@@ -226,8 +226,8 @@
       <tr><td>layout-options-row-margin-top</td><td>spacing-small</td><td>Abstand oberhalb der Options Row.</td></tr>
       <tr><td>layout-options-row-main-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen linker und rechter Aktionsgruppe.</td></tr>
       <tr><td>layout-options-row-group-gap</td><td>spacing-small</td><td>Abstand zwischen Controls innerhalb der linken und rechten Gruppe.</td></tr>
-      <tr><td>layout-options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Mode-Toggles innerhalb der Options Row.</td></tr>
+      <tr><td>layout-options-row-mode-toggle-width</td><td>dimension-options-row-mode-toggle-width</td><td>Breite des Mode-Toggles innerhalb der Options Row.</td></tr>
-      <tr><td>layout-options-row-help-panel-width</td><td>16rem</td><td>Breite des Help-Panels innerhalb der Options Row.</td></tr>
+      <tr><td>layout-options-row-help-panel-width</td><td>dimension-options-row-help-panel-width</td><td>Breite des Help-Panels innerhalb der Options Row.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Object Card</h3>
@@ -258,7 +258,7 @@
       <tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
       <tr><td>surface-card-list-drawer</td><td>color-background-purple</td><td>Fläche des ausziehbaren Card-Listenbereichs.</td></tr>
       <tr><td>text-card-list-drawer</td><td>color-font-dark</td><td>Textfarbe im ausziehbaren Card-Listenbereich.</td></tr>
-      <tr><td>layout-card-list-drawer-width</td><td>40%</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
+      <tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
     </tbody></table>
   </section>
 

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-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
-  --layout-options-row-help-panel-width: 16rem;
+  --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;