fix(ThemingParameters): update css vars (#6823)

Author: Lukas742

docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx

@@ -1,9 +1,9 @@
 import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
+import { FlexBox, FlexBoxDirection, Label, Option, Panel, Select, Text, ThemeProvider } from '@ui5/webcomponents-react';
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { useEffect, useReducer, useState } from 'react';
 import type { CSSProperties } from 'react';
 import { MAPPED_THEMES } from '../../.storybook/utils';
-import { FlexBox, FlexBoxDirection, Label, Option, Panel, Select, Text, ThemeProvider } from '@ui5/webcomponents-react';
-import { ThemingParameters } from '@ui5/webcomponents-react-base';
 
 const containerStyles = {
   display: 'grid',
@@ -14,6 +14,7 @@ const containerStyles = {
 
 const FONTS = [];
 const COLORS = [];
+const SPACING = [];
 const OTHERS = Object.entries(ThemingParameters).filter(([key, value]) => {
   if (key.includes('Font')) {
     if (key.includes('FontUrl')) {
@@ -27,6 +28,16 @@ const OTHERS = Object.entries(ThemingParameters).filter(([key, value]) => {
     COLORS.push([key, value]);
     return false;
   }
+  if (
+    key.includes('Space') ||
+    key.includes('Margin') ||
+    key.includes('Padding') ||
+    key.includes('Gap') ||
+    key.includes('Breakpoint')
+  ) {
+    SPACING.push([key, value]);
+    return false;
+  }
   return true;
 });
 
@@ -37,7 +48,7 @@ const getStyleFonts = (val) => {
   } else if (val.includes('Size')) {
     style.fontSize = val;
   } else if (val.includes('Weight')) {
-    style.fontWeight;
+    style.fontWeight = val;
   }
   return style;
 };
@@ -161,6 +172,13 @@ export const ThemeableCSSVars = () => {
             })}
           </div>
         </Panel>
+        <Panel headerText="Spacing" collapsed>
+          <div style={containerStyles}>
+            {SPACING.map(([key, value]) => {
+              return <Variables key={key} varKey={key} value={value} theme={currentTheme} />;
+            })}
+          </div>
+        </Panel>
         <Panel headerText="Others" collapsed>
           <div style={containerStyles}>
             {OTHERS.map(([key, value]) => {

package.json

@@ -29,7 +29,8 @@
     "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook",
     "postinstall": "husky && yarn setup",
     "create-cypress-commands-docs": "documentation build ./packages/cypress-commands/src/commands.ts -f json -o ./packages/cypress-commands/api-commands.json && documentation build ./packages/cypress-commands/src/queries.ts -f json -o ./packages/cypress-commands/api-queries.json",
-    "sb:prepare-cem": "node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents --out ./.storybook/custom-element-manifests/main.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-fiori --out ./.storybook/custom-element-manifests/fiori.json"
+    "sb:prepare-cem": "node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents --out ./.storybook/custom-element-manifests/main.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-fiori --out ./.storybook/custom-element-manifests/fiori.json",
+    "create-theming-parameters": "node scripts/generate-theming-parameters.js"
   },
   "dependencies": {
     "@storybook/addon-a11y": "8.4.5",