From 22fb2f3dc71833b62173005bc81b52e88e24c3b1 Mon Sep 17 00:00:00 2001
From: Charles-Antoine Alba <poro@variables.fr>
Date: Thu, 2 Oct 2025 12:44:03 +0200
Subject: [PATCH 1/4] feat(theme-generator): implement the component inside
 Storybook with corresponding stories

---
 package.json                                  |   3 +-
 packages/storybook/.storybook/main.ts         |   6 +-
 .../src/components/storyGrid/StoryGrid.tsx    | 110 +++++++++
 .../components/storyGrid/storyGrid.module.css |   5 +
 .../themeGenerator/ThemeGenerator.tsx         | 183 +++++++++++++++
 .../ThemeGeneratorTreeView.tsx                |  96 ++++++++
 .../themeGeneratorTreeView.module.css         |  27 +++
 .../themeGenerator/themeGenerator.module.css  |  58 +++++
 .../themeGeneratorJSON/ThemeGeneratorJSON.tsx |  86 +++++++
 .../themeGeneratorJSON.module.css             |  29 +++
 .../ThemeGeneratorModal.tsx                   |  65 ++++++
 .../themeGeneratorModal.module.css            |   8 +
 .../ThemeGeneratorPreview.tsx                 |  59 +++++
 .../ThemeGeneratorTreeView.tsx                |  96 ++++++++
 .../themeGeneratorTreeView.module.css         |  27 +++
 .../themeGenerator/useThemeGenerator.ts       |  74 ++++++
 .../accordion/accordion.stories.tsx           |  27 +++
 .../components/badge/badge.stories.tsx        |  20 ++
 .../breadcrumb/breadcrumb.stories.tsx         |  53 +++++
 .../components/button/button.stories.tsx      |  39 ++++
 .../stories/components/card/card.stories.tsx  |  20 ++
 .../components/checkbox/checkbox.stories.tsx  |  44 ++++
 .../clipboard/clipboard.stories.tsx           |  31 +++
 .../stories/components/code/code.stories.tsx  |  23 ++
 .../components/combobox/combobox.stories.tsx  |  36 +++
 .../datepicker/datepicker.stories.tsx         |  41 ++++
 .../components/divider/divider.stories.tsx    |  15 ++
 .../components/drawer/drawer.stories.tsx      |  47 ++++
 .../file-upload/file-upload.stories.tsx       |  23 ++
 .../form-field/form-field.stories.tsx         |  26 +++
 .../stories/components/icon/icon.stories.tsx  |  17 ++
 .../components/input/input.stories.tsx        |  18 ++
 .../stories/components/link/link.stories.tsx  |  16 ++
 .../components/medium/medium.stories.tsx      |  15 ++
 .../components/message/message.stories.tsx    |  36 +++
 .../components/meter/meter.stories.tsx        |  17 ++
 .../components/modal/modal.stories.tsx        |  38 ++++
 .../pagination/pagination.stories.tsx         |  16 ++
 .../components/password/password.stories.tsx  |  18 ++
 .../phone-number/phone-number.stories.tsx     |  29 +++
 .../components/popover/popover.stories.tsx    |  25 ++
 .../progress-bar/progress-bar.stories.tsx     |  17 ++
 .../components/quantity/quantity.stories.tsx  |  35 +++
 .../radio-group/radio-group.stories.tsx       |  29 +++
 .../components/range/range.stories.tsx        |  18 ++
 .../components/select/select.stories.tsx      |  36 +++
 .../components/skeleton/skeleton.stories.tsx  |  15 ++
 .../components/spinner/spinner.stories.tsx    |  17 ++
 .../components/switch/switch.stories.tsx      |  28 +++
 .../components/table/table.stories.tsx        |  33 +++
 .../stories/components/tabs/tabs.stories.tsx  |  20 ++
 .../stories/components/tag/tag.stories.tsx    |  21 ++
 .../stories/components/text/text.stories.tsx  |  16 ++
 .../components/textarea/textarea.stories.tsx  |  16 ++
 .../timepicker/timepicker.stories.tsx         |  28 +++
 .../components/toggle/toggle.stories.tsx      |  32 +++
 .../components/tooltip/tooltip.stories.tsx    |  25 ++
 .../tree-view/tree-view.stories.tsx           |  33 +++
 .../tools/theme-generator.mdx                 |  18 ++
 packages/themes/src/developer/_variables.scss | 213 ++++++++++++++++++
 packages/themes/src/developer/default.scss    |  17 ++
 packages/themes/src/developer/fonts.scss      |   9 +
 packages/themes/src/developer/index.scss      | 123 ++++++++++
 63 files changed, 2419 insertions(+), 2 deletions(-)
 create mode 100644 packages/storybook/src/components/storyGrid/StoryGrid.tsx
 create mode 100644 packages/storybook/src/components/storyGrid/storyGrid.module.css
 create mode 100644 packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx
 create mode 100644 packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/ThemeGeneratorTreeView.tsx
 create mode 100644 packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/themeGeneratorTreeView.module.css
 create mode 100644 packages/storybook/src/components/themeGenerator/themeGenerator.module.css
 create mode 100644 packages/storybook/src/components/themeGenerator/themeGeneratorJSON/ThemeGeneratorJSON.tsx
 create mode 100644 packages/storybook/src/components/themeGenerator/themeGeneratorJSON/themeGeneratorJSON.module.css
 create mode 100644 packages/storybook/src/components/themeGenerator/themeGeneratorModal/ThemeGeneratorModal.tsx
 create mode 100644 packages/storybook/src/components/themeGenerator/themeGeneratorModal/themeGeneratorModal.module.css
 create mode 100644 packages/storybook/src/components/themeGenerator/themeGeneratorPreview/ThemeGeneratorPreview.tsx
 create mode 100644 packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/ThemeGeneratorTreeView.tsx
 create mode 100644 packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/themeGeneratorTreeView.module.css
 create mode 100644 packages/storybook/src/components/themeGenerator/useThemeGenerator.ts
 create mode 100644 packages/storybook/stories/ovhcloud-design-system/tools/theme-generator.mdx
 create mode 100644 packages/themes/src/developer/_variables.scss
 create mode 100644 packages/themes/src/developer/default.scss
 create mode 100644 packages/themes/src/developer/fonts.scss
 create mode 100644 packages/themes/src/developer/index.scss

diff --git a/package.json b/package.json
index c58ea1258..37d706650 100644
--- a/package.json
+++ b/package.json
@@ -78,5 +78,6 @@
   },
   "resolutions": {
     "@types/scheduler": "< 0.23.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts
index ec5f48656..8b68721ac 100644
--- a/packages/storybook/.storybook/main.ts
+++ b/packages/storybook/.storybook/main.ts
@@ -32,7 +32,11 @@ const config: StorybookConfig = {
     ${head}
     <link rel="stylesheet" type="text/css" href="css/preview.css" />
   `,
-  staticDirs: ['../assets', ...getCodeEditorStaticDirs(__filename)],
+  staticDirs: [
+    '../assets',
+    { from: '../../themes/dist', to: '/themes' },
+    ...getCodeEditorStaticDirs(__filename)
+  ],
   stories: [
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
diff --git a/packages/storybook/src/components/storyGrid/StoryGrid.tsx b/packages/storybook/src/components/storyGrid/StoryGrid.tsx
new file mode 100644
index 000000000..b72ee505c
--- /dev/null
+++ b/packages/storybook/src/components/storyGrid/StoryGrid.tsx
@@ -0,0 +1,110 @@
+import React, { type JSX, useEffect, useRef } from 'react';
+import styles from './storyGrid.module.css';
+
+type StoryRef = {
+  id: string,
+  label?: string,
+};
+
+type ComponentStories = {
+  kind: string,
+  name: string,
+  stories: StoryRef[],
+};
+
+type Props = {
+  components: ComponentStories[],
+  themeClass?: string,
+  themeVariables?: Record<string, string>,
+};
+
+function toTitleCase(text: string): string {
+  return text
+    .replace(/[-_]+/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function getStoryLabel(story: StoryRef): string {
+  if (story.label) {
+    return story.label;
+  }
+
+  const parts = story.id.split('--');
+  const suffix = parts.length > 1 ? parts[1] : story.id;
+  return toTitleCase(suffix);
+}
+
+function StoryGrid({ components, themeClass, themeVariables }: Props): JSX.Element {
+  const iframeRefs = useRef<(HTMLIFrameElement | null)[]>([]);
+
+  const injectThemeIntoIframe = (iframe: HTMLIFrameElement) => {
+    if (!iframe?.contentDocument || !themeVariables || !themeClass) return;
+
+    const styleId = 'theme-generator-variables';
+    let styleElement = iframe.contentDocument.getElementById(styleId) as HTMLStyleElement;
+    
+    if (!styleElement) {
+      styleElement = iframe.contentDocument.createElement('style');
+      styleElement.id = styleId;
+      iframe.contentDocument.head.appendChild(styleElement);
+    }
+
+    const cssText = `.${themeClass} {\n${Object.entries(themeVariables)
+      .map(([key, value]) => `  ${key}: ${value};`)
+      .join('\n')}\n}`;
+    
+    styleElement.textContent = cssText;
+    iframe.contentDocument.body.classList.add(themeClass);
+  };
+
+  useEffect(() => {
+    iframeRefs.current.forEach((iframe) => {
+      if (iframe) injectThemeIntoIframe(iframe);
+    });
+  }, [themeVariables, themeClass]);
+  return (
+    <div>
+      {
+        components.map((component) => (
+          <section key={ component.name }>
+            <h3>
+              { component.name }
+            </h3>
+
+            <div className={ styles.grid__section__items }>
+              {
+                component.stories.map((story, storyIndex) => (
+                  <div className={themeClass || "ods-custom-theme"} key={ story.id }>
+                    <div>
+                      <iframe
+                        ref={(el) => {
+                          const globalIndex = components.findIndex(c => c.name === component.name) * component.stories.length + storyIndex;
+                          iframeRefs.current[globalIndex] = el;
+                        }}
+                        allowFullScreen
+                        loading="lazy"
+                        src={ `iframe.html?id=${story.id}&viewMode=story${themeClass ? `&globals=themeClass:${themeClass}` : ''}` }
+                        style={ { border: 0, width: '100%' } }
+                        title={ `${component.name} - ${getStoryLabel(story)}` }
+                        onLoad={() => {
+                          const globalIndex = components.findIndex(c => c.name === component.name) * component.stories.length + storyIndex;
+                          const iframe = iframeRefs.current[globalIndex];
+                          if (iframe) injectThemeIntoIframe(iframe);
+                        }} />
+                    </div>
+                  </div>
+                ))
+              }
+            </div>
+          </section>
+        ))
+      }
+    </div>
+  );
+}
+
+export {
+  StoryGrid,
+};
+
+
diff --git a/packages/storybook/src/components/storyGrid/storyGrid.module.css b/packages/storybook/src/components/storyGrid/storyGrid.module.css
new file mode 100644
index 000000000..b67c8e969
--- /dev/null
+++ b/packages/storybook/src/components/storyGrid/storyGrid.module.css
@@ -0,0 +1,5 @@
+.grid__section__items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1rem;
+}
diff --git a/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx b/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx
new file mode 100644
index 000000000..162a1d6e1
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx
@@ -0,0 +1,183 @@
+import { Splitter } from '@ark-ui/react/splitter';
+import React, { type JSX, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import * as ODSReact from '@ovhcloud/ods-react';
+import { ORIENTATION, OrientationSwitch } from '../sandbox/actions/OrientationSwitch';
+import styles from './themeGenerator.module.css';
+import { ThemeGeneratorTreeView } from './themeGeneratorTreeView/ThemeGeneratorTreeView';
+import { ThemeGeneratorPreview } from './themeGeneratorPreview/ThemeGeneratorPreview';
+import { parseCssVariables } from './useThemeGenerator';
+import { ThemeGeneratorModal } from './themeGeneratorModal/ThemeGeneratorModal';
+import { ThemeGeneratorJSON } from './themeGeneratorJSON/ThemeGeneratorJSON';
+
+const ThemeGenerator = (): JSX.Element => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [orientation, setOrientation] = useState(ORIENTATION.horizontal);
+  const [selectedTheme, setSelectedTheme] = useState('default');
+  const [editedVariables, setEditedVariables] = useState<Record<string, string>>({});
+  const [isCustomTheme, setIsCustomTheme] = useState(false);
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+  const [pendingTheme, setPendingTheme] = useState<string | null>(null);
+  const [isJsonOpen, setIsJsonOpen] = useState(false);
+
+  useEffect(() => {
+    const loadTheme = async () => {
+      if (selectedTheme === 'custom') {
+        setIsCustomTheme(true);
+        return;
+      }
+      
+      try {
+        console.log('Selected theme:', selectedTheme);
+        
+        // Fetch the CSS file from the static directory
+        // Path: /themes/{themeName}/index.css (exposed via staticDirs in main.ts)
+        const response = await fetch(`/themes/${selectedTheme}/index.css`);
+        
+        if (!response.ok) {
+          throw new Error(`Failed to fetch theme: ${response.statusText}`);
+        }
+        
+        const cssContent = await response.text();
+
+        // Parse CSS variables
+        const variables = parseCssVariables(cssContent);
+        console.log('Parsed variables:', Object.keys(variables).length, 'variables found');
+        setEditedVariables(variables);
+        setIsCustomTheme(false);
+      } catch (error) {
+        console.error('Failed to load theme:', error);
+      }
+    };
+
+    loadTheme();
+  }, [selectedTheme]);
+
+
+  function onToggleFullscreen() {
+    setIsFullscreen((v) => !v);
+  }
+
+  function onVariableChange(name: string, value: string) {
+    setEditedVariables((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    
+    // Automatically switch to custom theme when user edits a variable
+    if (!isCustomTheme) {
+      setSelectedTheme('custom');
+      setIsCustomTheme(true);
+    }
+  }
+
+  return <div className={ classNames(
+      styles['theme-generator'],
+      { [ styles['theme-generator--fullscreen']]: isFullscreen },
+    )}>
+      <div className={ styles['theme-generator__menu'] }>
+        <div className={styles['theme-generator__menu__left']}>
+          <ODSReact.Button
+            variant={ ODSReact.BUTTON_VARIANT.ghost }
+            onClick={ () => setIsJsonOpen(true) }>
+            <ODSReact.Icon name={ODSReact.ICON_NAME.chevronLeftUnderscore} />
+            JSON
+          </ODSReact.Button>
+          <ODSReact.Switch 
+            value={selectedTheme}
+            onValueChange={(details: { value: string }) => {
+              const next = details.value;
+              const isLeavingCustom = isCustomTheme && next !== 'custom';
+
+              if (isLeavingCustom) {
+                setPendingTheme(next);
+                setIsConfirmOpen(true);
+                return;
+              }
+
+              setSelectedTheme(next);
+            }}
+            >
+            <ODSReact.SwitchItem value="default">
+              Default
+            </ODSReact.SwitchItem>
+            <ODSReact.SwitchItem value="developer">
+              Developer
+            </ODSReact.SwitchItem>
+            <ODSReact.SwitchItem value="custom">
+              Custom
+            </ODSReact.SwitchItem>
+          </ODSReact.Switch>
+        </div>
+        <div className={styles['theme-generator__menu__right']}>
+          <OrientationSwitch
+            onChange={ (value) => setOrientation(value) }
+            orientation={ orientation } />
+
+          <ODSReact.Button
+            onClick={ onToggleFullscreen }
+            variant={ ODSReact.BUTTON_VARIANT.ghost }>
+            <ODSReact.Icon name={ isFullscreen ? ODSReact.ICON_NAME.shrink : ODSReact.ICON_NAME.resize } />
+          </ODSReact.Button>
+        </div>
+      </div>
+    <Splitter.Root
+      className={ styles['theme-generator__container'] }
+      orientation={ orientation }
+      panels={ [{ id: 'tree-view', minSize: 10 }, { id: 'preview', minSize: 10 }] }>
+      <Splitter.Panel id="tree-view">
+        <ThemeGeneratorTreeView 
+          variables={editedVariables}
+          onVariableChange={onVariableChange} />
+      </Splitter.Panel>
+
+      <Splitter.ResizeTrigger
+        asChild
+        aria-label="Resize"
+        id="tree-view:preview">
+        <ODSReact.Button
+          className={ classNames(
+            styles['theme-generator__container__resize'],
+            { [styles['theme-generator__container__resize--horizontal']]: orientation === ORIENTATION.horizontal },
+            { [styles['theme-generator__container__resize--vertical']]: orientation === ORIENTATION.vertical },
+          )}
+          color={ ODSReact.BUTTON_COLOR.neutral } />
+      </Splitter.ResizeTrigger>
+
+      <Splitter.Panel id="preview">
+        <div className={ styles['theme-generator__container__preview'] }>
+          <ThemeGeneratorPreview themeVariables={editedVariables} />
+        </div>
+      </Splitter.Panel>
+    </Splitter.Root>
+
+    <ThemeGeneratorModal
+      open={ isConfirmOpen }
+      targetTheme={ pendingTheme }
+      onConfirm={() => {
+        if (pendingTheme) {
+          setSelectedTheme(pendingTheme);
+        }
+        setPendingTheme(null);
+        setIsConfirmOpen(false);
+      }}
+      onCancel={() => {
+        setPendingTheme(null);
+        setIsConfirmOpen(false);
+      }}
+    />
+
+    <ThemeGeneratorJSON
+      open={ isJsonOpen }
+      variables={ editedVariables }
+      onClose={ () => setIsJsonOpen(false) }
+      onReplace={(next) => {
+        setEditedVariables(next);
+        setSelectedTheme('custom');
+        setIsCustomTheme(true);
+      }}
+    />
+    </div>
+}
+
+export { ThemeGenerator };
diff --git a/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/ThemeGeneratorTreeView.tsx b/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/ThemeGeneratorTreeView.tsx
new file mode 100644
index 000000000..703391662
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/ThemeGeneratorTreeView.tsx
@@ -0,0 +1,96 @@
+import { Spinner, Text, TreeView, TreeViewNode, TreeViewNodes  } from '@ovhcloud/ods-react';
+import React, { useMemo } from 'react';
+import { categorizeCssVariables } from '../useThemeGenerator';
+import styles from './themeGeneratorTreeView.module.css';
+import { SPINNER_SIZE } from '../../../../../ods-react/src/components/spinner/src/constants/spinner-size';
+import { TEXT_PRESET } from '../../../../../ods-react/src/components/text/src/constants/text-preset';
+
+interface TreeItem {
+  id: string;
+  name: string;
+  value?: string;
+  children?: TreeItem[];
+}
+
+interface ThemeGeneratorTreeViewProps {
+  variables: Record<string, string>;
+  onVariableChange: (name: string, value: string) => void;
+}
+
+const groupColorsByPrefix = (colors: Array<{ name: string; value: string }>): TreeItem[] => {
+  const groups: Record<string, TreeItem> = {};
+
+  colors.forEach((color) => {
+    const match = color.name.match(/--ods-color-([^-]+)/);
+    const groupName = match ? match[1] : 'other';
+
+    if (!groups[groupName]) {
+      groups[groupName] = {
+        id: `group-${groupName}`,
+        name: groupName.charAt(0).toUpperCase() + groupName.slice(1),
+        children: [],
+      };
+    }
+
+    groups[groupName].children!.push({
+      id: color.name,
+      name: color.name,
+      value: color.value,
+    });
+  });
+
+  return Object.values(groups);
+};
+
+const ThemeGeneratorTreeView = ({ variables, onVariableChange }: ThemeGeneratorTreeViewProps) => {
+  const items: TreeItem[] = useMemo(() => {
+    const categorized = categorizeCssVariables(variables);
+    
+    return groupColorsByPrefix(categorized.colors);
+  }, [variables]);
+
+  if (Object.keys(variables).length === 0) {
+    return <div className={styles['theme-generator-tree-view']}>
+      <Spinner size={SPINNER_SIZE.xs} />
+      <Text preset={TEXT_PRESET.caption}>
+        Loading theme...
+        </Text>
+      </div>;
+  }
+
+  return (
+    <TreeView
+      className={styles['theme-generator-tree-view']}
+      items={items}
+      onValueChange={() => {}}>
+      <TreeViewNodes>
+        {items.map((item) => (
+          <TreeViewNode key={item.id} item={item}>
+            {({ item, isBranch }: { item: TreeItem; isBranch: boolean }) => (
+              <div className={styles['theme-generator-tree-view__item']}>
+                <Text className={styles['theme-generator-tree-view__name']}>
+                  {item.name}
+                </Text>
+                {!isBranch && item.value && (
+                  <input
+                    className={styles['theme-generator-tree-view__color-input']}
+                    type="color"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                    onChange={(e) => {
+                      onVariableChange(item.name, e.target.value);
+                    }}
+                    value={item.value}
+                  />
+                )}
+              </div>
+            )}
+          </TreeViewNode>
+        ))}
+      </TreeViewNodes>
+    </TreeView>
+  );
+};
+
+export { ThemeGeneratorTreeView };
diff --git a/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/themeGeneratorTreeView.module.css b/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/themeGeneratorTreeView.module.css
new file mode 100644
index 000000000..f3b487738
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/themeGeneratorTreeView.module.css
@@ -0,0 +1,27 @@
+.theme-generator-tree-view {
+  height: 100%;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.theme-generator-tree-view__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.theme-generator-tree-view__name {
+  color: var(--ods-color-text);
+  flex: 1;
+}
+
+.theme-generator-tree-view__color-input {
+  cursor: pointer;
+  height: 26px;
+  width: 24px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
\ No newline at end of file
diff --git a/packages/storybook/src/components/themeGenerator/themeGenerator.module.css b/packages/storybook/src/components/themeGenerator/themeGenerator.module.css
new file mode 100644
index 000000000..de94311a1
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/themeGenerator.module.css
@@ -0,0 +1,58 @@
+.theme-generator {
+  box-sizing: border-box;
+  border: solid var(--ods-border-width-sm) var(--ods-color-primary-500);
+  border-radius: var(--ods-border-radius-md);
+  background-color: #fff;
+  overflow: hidden;
+}
+
+.theme-generator--fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  border: 0;
+}
+
+.theme-generator__menu {
+  display: flex;
+  flex-flow: row;
+  column-gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: solid var(--ods-border-width-sm) var(--ods-color-primary-500);
+  padding: 0 8px;
+}
+
+.theme-generator__menu__left, .theme-generator__menu__right {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.theme-generator__container {
+  min-height: 50vh;
+  overflow: hidden;
+  resize: vertical;
+}
+
+.theme-generator__container__preview {
+  padding: 16px;
+  max-height: 90vh;
+  overflow: auto;
+}
+
+.theme-generator__container__resize {
+  padding: 0;
+}
+
+.theme-generator__container__resize--horizontal {
+  margin: 16px 2px;
+  width: 4px;
+  min-width: auto;
+}
+
+.theme-generator__container__resize--vertical {
+  margin: 2px 16px ;
+  height: 4px;
+  min-height: auto;
+}
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorJSON/ThemeGeneratorJSON.tsx b/packages/storybook/src/components/themeGenerator/themeGeneratorJSON/ThemeGeneratorJSON.tsx
new file mode 100644
index 000000000..daf9aa697
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorJSON/ThemeGeneratorJSON.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect, useMemo, useState, type JSX } from 'react';
+import { Button, BUTTON_VARIANT, Modal, ModalBody, ModalContent, Text, TEXT_PRESET } from '@ovhcloud/ods-react';
+import styles from './themeGeneratorJSON.module.css';
+
+interface ThemeGeneratorJSONProps {
+  open: boolean;
+  variables: Record<string, string>;
+  onClose: () => void;
+  onReplace: (nextVariables: Record<string, string>) => void;
+}
+
+const ThemeGeneratorJSON = ({ open, variables, onClose, onReplace }: ThemeGeneratorJSONProps): JSX.Element => {
+  const initialText = useMemo(() => JSON.stringify(variables, null, 2), [variables]);
+  const [textValue, setTextValue] = useState(initialText);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setTextValue(initialText);
+      setError(null);
+    }
+  }, [open, initialText]);
+
+  function handleReplace() {
+    try {
+      const parsed = JSON.parse(textValue);
+      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+        throw new Error('Expected a JSON object of { name: value }');
+      }
+
+      const next: Record<string, string> = {};
+      Object.entries(parsed as Record<string, unknown>).forEach(([key, value]) => {
+        next[key] = String(value ?? '');
+      });
+      onReplace(next);
+      setError(null);
+      onClose();
+    } catch (e) {
+      setError('Invalid JSON. Please provide a valid JSON object.');
+    }
+  }
+
+  function onOpenChange({ open }: { open: boolean }) {
+    if (!open) {
+      onClose();
+    }
+  }
+
+  return (
+    <Modal open={ open } onOpenChange={ onOpenChange }>
+      <ModalContent className={styles['theme-generator-json-modal']}>
+        <ModalBody>
+          <Text preset={ TEXT_PRESET.heading4 }>
+            Theme variables (JSON)
+          </Text>
+
+          <textarea
+            className={ styles['theme-generator-json-modal__textarea'] }
+            onChange={(e) => setTextValue(e.target.value)}
+            spellCheck={false}
+            value={ textValue } />
+
+          { error && (
+            <Text className={ styles['theme-generator-json-modal__error'] }>
+              { error }
+            </Text>
+          )}
+
+          <div className={ styles['theme-generator-json-modal__actions'] }>
+            <Button onClick={ handleReplace }>
+              Apply
+            </Button>
+
+            <Button onClick={ onClose } variant={ BUTTON_VARIANT.ghost }>
+              Close
+            </Button>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export { ThemeGeneratorJSON };
+
+
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorJSON/themeGeneratorJSON.module.css b/packages/storybook/src/components/themeGenerator/themeGeneratorJSON/themeGeneratorJSON.module.css
new file mode 100644
index 000000000..ccdc2f8ba
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorJSON/themeGeneratorJSON.module.css
@@ -0,0 +1,29 @@
+.theme-generator-json-modal {
+  max-width: 60vw;
+  max-height: 80vh;
+}
+
+.theme-generator-json-modal__textarea {
+  margin: 12px 0;
+  border: 1px solid var(--ods-color-neutral-300);
+  border-radius: var(--ods-border-radius-sm);
+  background-color: #000000;
+  padding: 8px;
+  width: 100%;
+  min-height: 220px;
+  color: #FFFFFF;
+  font-family: var(--ods-font-family-code);
+  font-size: 12px;
+}
+
+.theme-generator-json-modal__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: end;
+}
+
+.theme-generator-json-modal__error {
+  color: var(--ods-color-critical-600);
+}
+
+
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorModal/ThemeGeneratorModal.tsx b/packages/storybook/src/components/themeGenerator/themeGeneratorModal/ThemeGeneratorModal.tsx
new file mode 100644
index 000000000..9fbdb4f4d
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorModal/ThemeGeneratorModal.tsx
@@ -0,0 +1,65 @@
+import React, { type JSX } from 'react';
+import {
+  Button,
+  BUTTON_COLOR,
+  BUTTON_VARIANT,
+  Modal,
+  ModalBody,
+  ModalContent,
+} from '@ovhcloud/ods-react';
+import { Text, TEXT_PRESET } from '@ovhcloud/ods-react';
+import styles from './themeGeneratorModal.module.css';
+
+interface ThemeGeneratorModalProps {
+  open: boolean;
+  targetTheme?: string | null;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const ThemeGeneratorModal = ({
+  open,
+  targetTheme,
+  onConfirm,
+  onCancel,
+}: ThemeGeneratorModalProps): JSX.Element => {
+  function onOpenChange({ open }: { open: boolean }) {
+    if (!open) {
+      onCancel();
+    }
+  }
+
+  const targetLabel = targetTheme
+    ? targetTheme.charAt(0).toUpperCase() + targetTheme.slice(1)
+    : '';
+
+  return (
+    <Modal open={ open } onOpenChange={ onOpenChange }>
+      <ModalContent>
+        <ModalBody>
+          <Text preset={ TEXT_PRESET.heading4 }>
+            Leave custom theme?
+          </Text>
+
+          <Text>
+            You have unsaved customizations. Switching to { targetLabel || 'another theme' } will discard them.
+          </Text>
+
+          <div className={ styles.actions }>
+            <Button onClick={ onConfirm } color={ BUTTON_COLOR.critical }>
+              Switch to { targetLabel || 'theme' }
+            </Button>
+
+            <Button onClick={ onCancel } variant={ BUTTON_VARIANT.outline }>
+              Stay on Custom
+            </Button>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export { ThemeGeneratorModal };
+
+
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorModal/themeGeneratorModal.module.css b/packages/storybook/src/components/themeGenerator/themeGeneratorModal/themeGeneratorModal.module.css
new file mode 100644
index 000000000..4b018e992
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorModal/themeGeneratorModal.module.css
@@ -0,0 +1,8 @@
+.actions {
+  display: flex;
+  margin-top: 16px;
+  gap: 8px;
+  justify-content: end;
+}
+
+
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorPreview/ThemeGeneratorPreview.tsx b/packages/storybook/src/components/themeGenerator/themeGeneratorPreview/ThemeGeneratorPreview.tsx
new file mode 100644
index 000000000..67dc35aab
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorPreview/ThemeGeneratorPreview.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { StoryGrid } from '../../storyGrid/StoryGrid';
+import { REACT_COMPONENTS_TITLE } from '../../../constants/meta';
+
+interface ThemeGeneratorPreviewProps {
+  themeVariables?: Record<string, string>;
+}
+
+const ThemeGeneratorPreview = ({ themeVariables }: ThemeGeneratorPreviewProps): JSX.Element => {
+  return <StoryGrid
+    themeClass="theme-generator-preview"
+    themeVariables={themeVariables}
+    components={ [
+      { kind: REACT_COMPONENTS_TITLE.accordion, name: 'Accordion', stories: [ { id: 'react-components-accordion--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.badge, name: 'Badge', stories: [ { id: 'react-components-badge--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.breadcrumb, name: 'Breadcrumb', stories: [ { id: 'react-components-breadcrumb--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.button, name: 'Button', stories: [ { id: 'react-components-button--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.card, name: 'Card', stories: [ { id: 'react-components-card--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.checkbox, name: 'Checkbox', stories: [ { id: 'react-components-checkbox--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.clipboard, name: 'Clipboard', stories: [ { id: 'react-components-clipboard--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.code, name: 'Code', stories: [ { id: 'react-components-code--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.combobox, name: 'Combobox', stories: [ { id: 'react-components-combobox--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.datepicker, name: 'Datepicker', stories: [ { id: 'react-components-datepicker--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.divider, name: 'Divider', stories: [ { id: 'react-components-divider--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.drawer, name: 'Drawer', stories: [ { id: 'react-components-drawer--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.fileUpload, name: 'File Upload', stories: [ { id: 'react-components-file-upload--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.formField, name: 'Form Field', stories: [ { id: 'react-components-form-field--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.icon, name: 'Icon', stories: [ { id: 'react-components-icon--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.input, name: 'Input', stories: [ { id: 'react-components-input--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.link, name: 'Link', stories: [ { id: 'react-components-link--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.medium, name: 'Medium', stories: [ { id: 'react-components-medium--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.message, name: 'Message', stories: [ { id: 'react-components-message--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.meter, name: 'Meter', stories: [ { id: 'react-components-meter--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.modal, name: 'Modal', stories: [ { id: 'react-components-modal--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.pagination, name: 'Pagination', stories: [ { id: 'react-components-pagination--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.password, name: 'Password', stories: [ { id: 'react-components-password--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.phoneNumber, name: 'Phone Number', stories: [ { id: 'react-components-phone-number--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.popover, name: 'Popover', stories: [ { id: 'react-components-popover--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.progressBar, name: 'Progress Bar', stories: [ { id: 'react-components-progress-bar--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.quantity, name: 'Quantity', stories: [ { id: 'react-components-quantity--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.radioGroup, name: 'RadioGroup', stories: [ { id: 'react-components-radio-group--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.range, name: 'Range', stories: [ { id: 'react-components-range--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.select, name: 'Select', stories: [ { id: 'react-components-select--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.skeleton, name: 'Skeleton', stories: [ { id: 'react-components-skeleton--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.spinner, name: 'Spinner', stories: [ { id: 'react-components-spinner--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.switch, name: 'Switch', stories: [ { id: 'react-components-switch--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.table, name: 'Table', stories: [ { id: 'react-components-table--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.tabs, name: 'Tabs', stories: [ { id: 'react-components-tabs--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.tag, name: 'Tag', stories: [ { id: 'react-components-tag--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.text, name: 'Text', stories: [ { id: 'react-components-text--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.textarea, name: 'Textarea', stories: [ { id: 'react-components-textarea--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.timepicker, name: 'Timepicker', stories: [ { id: 'react-components-timepicker--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.toggle, name: 'Toggle', stories: [ { id: 'react-components-toggle--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.tooltip, name: 'Tooltip', stories: [ { id: 'react-components-tooltip--theme-generator', label: 'ThemeGenerator' } ] },
+      { kind: REACT_COMPONENTS_TITLE.treeView, name: 'Tree View', stories: [ { id: 'react-components-tree-view--theme-generator', label: 'ThemeGenerator' } ] },
+  ] } />;
+};
+
+export { ThemeGeneratorPreview };
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/ThemeGeneratorTreeView.tsx b/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/ThemeGeneratorTreeView.tsx
new file mode 100644
index 000000000..703391662
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/ThemeGeneratorTreeView.tsx
@@ -0,0 +1,96 @@
+import { Spinner, Text, TreeView, TreeViewNode, TreeViewNodes  } from '@ovhcloud/ods-react';
+import React, { useMemo } from 'react';
+import { categorizeCssVariables } from '../useThemeGenerator';
+import styles from './themeGeneratorTreeView.module.css';
+import { SPINNER_SIZE } from '../../../../../ods-react/src/components/spinner/src/constants/spinner-size';
+import { TEXT_PRESET } from '../../../../../ods-react/src/components/text/src/constants/text-preset';
+
+interface TreeItem {
+  id: string;
+  name: string;
+  value?: string;
+  children?: TreeItem[];
+}
+
+interface ThemeGeneratorTreeViewProps {
+  variables: Record<string, string>;
+  onVariableChange: (name: string, value: string) => void;
+}
+
+const groupColorsByPrefix = (colors: Array<{ name: string; value: string }>): TreeItem[] => {
+  const groups: Record<string, TreeItem> = {};
+
+  colors.forEach((color) => {
+    const match = color.name.match(/--ods-color-([^-]+)/);
+    const groupName = match ? match[1] : 'other';
+
+    if (!groups[groupName]) {
+      groups[groupName] = {
+        id: `group-${groupName}`,
+        name: groupName.charAt(0).toUpperCase() + groupName.slice(1),
+        children: [],
+      };
+    }
+
+    groups[groupName].children!.push({
+      id: color.name,
+      name: color.name,
+      value: color.value,
+    });
+  });
+
+  return Object.values(groups);
+};
+
+const ThemeGeneratorTreeView = ({ variables, onVariableChange }: ThemeGeneratorTreeViewProps) => {
+  const items: TreeItem[] = useMemo(() => {
+    const categorized = categorizeCssVariables(variables);
+    
+    return groupColorsByPrefix(categorized.colors);
+  }, [variables]);
+
+  if (Object.keys(variables).length === 0) {
+    return <div className={styles['theme-generator-tree-view']}>
+      <Spinner size={SPINNER_SIZE.xs} />
+      <Text preset={TEXT_PRESET.caption}>
+        Loading theme...
+        </Text>
+      </div>;
+  }
+
+  return (
+    <TreeView
+      className={styles['theme-generator-tree-view']}
+      items={items}
+      onValueChange={() => {}}>
+      <TreeViewNodes>
+        {items.map((item) => (
+          <TreeViewNode key={item.id} item={item}>
+            {({ item, isBranch }: { item: TreeItem; isBranch: boolean }) => (
+              <div className={styles['theme-generator-tree-view__item']}>
+                <Text className={styles['theme-generator-tree-view__name']}>
+                  {item.name}
+                </Text>
+                {!isBranch && item.value && (
+                  <input
+                    className={styles['theme-generator-tree-view__color-input']}
+                    type="color"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                    onChange={(e) => {
+                      onVariableChange(item.name, e.target.value);
+                    }}
+                    value={item.value}
+                  />
+                )}
+              </div>
+            )}
+          </TreeViewNode>
+        ))}
+      </TreeViewNodes>
+    </TreeView>
+  );
+};
+
+export { ThemeGeneratorTreeView };
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/themeGeneratorTreeView.module.css b/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/themeGeneratorTreeView.module.css
new file mode 100644
index 000000000..f3b487738
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/themeGeneratorTreeView.module.css
@@ -0,0 +1,27 @@
+.theme-generator-tree-view {
+  height: 100%;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.theme-generator-tree-view__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.theme-generator-tree-view__name {
+  color: var(--ods-color-text);
+  flex: 1;
+}
+
+.theme-generator-tree-view__color-input {
+  cursor: pointer;
+  height: 26px;
+  width: 24px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
\ No newline at end of file
diff --git a/packages/storybook/src/components/themeGenerator/useThemeGenerator.ts b/packages/storybook/src/components/themeGenerator/useThemeGenerator.ts
new file mode 100644
index 000000000..4b6bbc777
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/useThemeGenerator.ts
@@ -0,0 +1,74 @@
+/**
+ * Parse CSS content and extract CSS custom properties from :root selector
+ */
+export const parseCssVariables = (cssContent: string): Record<string, string> => {
+  const variables: Record<string, string> = {};
+  
+  // Match :root { ... } blocks
+  const rootRegex = /:root\s*\{([^}]+)\}/g;
+  let match;
+  
+  while ((match = rootRegex.exec(cssContent)) !== null) {
+    const rootContent = match[1];
+    
+    // Extract CSS custom properties (--property-name: value;)
+    const varRegex = /(--[^:]+):\s*([^;]+);/g;
+    let varMatch;
+    
+    while ((varMatch = varRegex.exec(rootContent)) !== null) {
+      const propertyName = varMatch[1].trim();
+      const propertyValue = varMatch[2].trim();
+      
+      // Only include --ods-* variables
+      if (propertyName.startsWith('--ods-')) {
+        variables[propertyName] = propertyValue;
+      }
+    }
+  }
+  
+  return variables;
+};
+
+/**
+ * Categorize CSS variables by type
+ */
+export interface CategorizedVariables {
+  colors: Array<{ name: string; value: string }>;
+  border: Array<{ name: string; value: string }>;
+  font: Array<{ name: string; value: string }>;
+  form: Array<{ name: string; value: string }>;
+  outline: Array<{ name: string; value: string }>;
+  other: Array<{ name: string; value: string }>;
+}
+
+export const categorizeCssVariables = (variables: Record<string, string>): CategorizedVariables => {
+  const categories: CategorizedVariables = {
+    colors: [],
+    border: [],
+    font: [],
+    form: [],
+    outline: [],
+    other: [],
+  };
+
+  Object.entries(variables).forEach(([name, value]) => {
+    const variable = { name, value };
+    
+    if (name.includes('color')) {
+      categories.colors.push(variable);
+    } else if (name.includes('border')) {
+      categories.border.push(variable);
+    } else if (name.includes('font')) {
+      categories.font.push(variable);
+    } else if (name.includes('form')) {
+      categories.form.push(variable);
+    } else if (name.includes('outline')) {
+      categories.outline.push(variable);
+    } else {
+      categories.other.push(variable);
+    }
+  });
+
+  return categories;
+};
+
diff --git a/packages/storybook/stories/components/accordion/accordion.stories.tsx b/packages/storybook/stories/components/accordion/accordion.stories.tsx
index fd1cc9e03..04b6aa3f9 100644
--- a/packages/storybook/stories/components/accordion/accordion.stories.tsx
+++ b/packages/storybook/stories/components/accordion/accordion.stories.tsx
@@ -245,3 +245,30 @@ import { useState } from 'react';`,
     );
   },
 };
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: ({}) => (
+    <Accordion>
+      <AccordionItem value="0">
+        <AccordionTrigger>
+          <Text preset="paragraph">Hello World!</Text>
+        </AccordionTrigger>
+        <AccordionContent>
+          <Text preset="paragraph">Lorem ipsum dolor sit amet.</Text>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="1" disabled>
+        <AccordionTrigger>
+          <Text preset="paragraph">Disabled item</Text>
+        </AccordionTrigger>
+        <AccordionContent>
+          <Text preset="paragraph">This item is disabled.</Text>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+  tags: ['!dev'],
+};
diff --git a/packages/storybook/stories/components/badge/badge.stories.tsx b/packages/storybook/stories/components/badge/badge.stories.tsx
index 16cd3b7cf..3f477f889 100644
--- a/packages/storybook/stories/components/badge/badge.stories.tsx
+++ b/packages/storybook/stories/components/badge/badge.stories.tsx
@@ -183,3 +183,23 @@ export const AccessibilityAlternativeGrouping: Story = {
     </div>
   ),
 };
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      { BADGE_SIZES.map((size) => (
+        <div key={ size } style={{ display: 'flex', flexFlow: 'row', gap: '8px', alignItems: 'center' }}>
+          { BADGE_COLORS.map((color) => (
+            <Badge key={`${String(size)}-${String(color)}`} size={ size } color={ color }>
+              { String(color) }
+            </Badge>
+          )) }
+        </div>
+      )) }
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.tsx b/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.tsx
index e73dd3e83..e5cc4216a 100644
--- a/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.tsx
@@ -375,3 +375,56 @@ export const AccessibilityWithAriaLabel: Story = {
     </Breadcrumb>
   ),
 }
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <Breadcrumb>
+      <BreadcrumbItem>
+        <BreadcrumbLink aria-label="Homepage" href="#">
+          Home
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">
+          Products
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">
+          Hosting
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">
+          Servers
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">
+          Dedicated
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">
+          Rise
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">
+          RISE-2
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+    </Breadcrumb>
+  ),
+};
diff --git a/packages/storybook/stories/components/button/button.stories.tsx b/packages/storybook/stories/components/button/button.stories.tsx
index 65d3297f1..0f6f34872 100644
--- a/packages/storybook/stories/components/button/button.stories.tsx
+++ b/packages/storybook/stories/components/button/button.stories.tsx
@@ -351,3 +351,42 @@ import { useState } from 'react';`,
     );
   },
 };
+
+
+export const ThemeGenerator: StoryObj = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      { BUTTON_SIZES.map((size) => (
+        <div key={ size } style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          { BUTTON_VARIANTS.map((variant) => (
+            <div key={`${String(size)}-${String(variant)}`} style={{ display: 'flex', flexFlow: 'row wrap', gap: '8px', alignItems: 'center' }}>
+              { BUTTON_COLORS.map((color) => (
+                <Button key={`${String(size)}-${String(variant)}-${String(color)}`} size={ size } variant={ variant } color={ color }>
+                  { `${String(variant)} ${String(color)}` }
+                </Button>
+              )) }
+            </div>
+          )) }
+          <div style={{ display: 'flex', flexFlow: 'row wrap', gap: '8px', alignItems: 'center' }}>
+            { BUTTON_VARIANTS.map((variant) => (
+              <Button key={`disabled-${String(size)}-${String(variant)}`} size={ size } variant={ variant } disabled>
+                Disabled
+              </Button>
+            )) }
+          </div>
+          <div style={{ display: 'flex', flexFlow: 'row wrap', gap: '8px', alignItems: 'center' }}>
+            { BUTTON_VARIANTS.map((variant) => (
+              <Button key={`loading-${String(size)}-${String(variant)}`} size={ size } variant={ variant } loading>
+                Loading
+              </Button>
+            )) }
+          </div>
+        </div>
+      )) }
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/card/card.stories.tsx b/packages/storybook/stories/components/card/card.stories.tsx
index f0cdc268f..318c2b755 100644
--- a/packages/storybook/stories/components/card/card.stories.tsx
+++ b/packages/storybook/stories/components/card/card.stories.tsx
@@ -142,3 +142,23 @@ export const AccessibilityAlternativeGrouping: Story = {
     </div>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  name: 'ThemeGenerator',
+  parameters: {
+    docs: { disable: true },
+    layout: 'fullscreen',
+    options: { showPanel: false },
+  },
+  tags: ['!dev', 'hidden'],
+  render: ({}) => (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      { CARD_COLORS.map((color) => (
+        <Card key={ String(color) } color={ color } style={{ padding: '8px' }}>
+          <p style={{ margin: 0 }}>{ String(color) }</p>
+        </Card>
+      )) }
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/checkbox/checkbox.stories.tsx b/packages/storybook/stories/components/checkbox/checkbox.stories.tsx
index a3dc5a328..c210c671a 100644
--- a/packages/storybook/stories/components/checkbox/checkbox.stories.tsx
+++ b/packages/storybook/stories/components/checkbox/checkbox.stories.tsx
@@ -214,3 +214,47 @@ export const States: Story = {
     </>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexFlow: 'column', gap: '12px' }}>
+      <div style={{ display: 'flex', flexFlow: 'row', gap: '16px', alignItems: 'center' }}>
+        <Checkbox>
+          <CheckboxControl />
+          <CheckboxLabel>Unchecked</CheckboxLabel>
+        </Checkbox>
+        <Checkbox disabled>
+          <CheckboxControl />
+          <CheckboxLabel>Unchecked disabled</CheckboxLabel>
+        </Checkbox>
+      </div>
+
+      <div style={{ display: 'flex', flexFlow: 'row', gap: '16px', alignItems: 'center' }}>
+        <Checkbox checked>
+          <CheckboxControl />
+          <CheckboxLabel>Checked</CheckboxLabel>
+        </Checkbox>
+        <Checkbox checked disabled>
+          <CheckboxControl />
+          <CheckboxLabel>Checked disabled</CheckboxLabel>
+        </Checkbox>
+      </div>
+
+      <div style={{ display: 'flex', flexFlow: 'row', gap: '16px', alignItems: 'center' }}>
+        <Checkbox checked="indeterminate">
+          <CheckboxControl />
+          <CheckboxLabel>Indeterminate</CheckboxLabel>
+        </Checkbox>
+        <Checkbox checked="indeterminate" disabled>
+          <CheckboxControl />
+          <CheckboxLabel>Indeterminate disabled</CheckboxLabel>
+        </Checkbox>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/clipboard/clipboard.stories.tsx b/packages/storybook/stories/components/clipboard/clipboard.stories.tsx
index c5ceb9856..dc2c8f9d4 100644
--- a/packages/storybook/stories/components/clipboard/clipboard.stories.tsx
+++ b/packages/storybook/stories/components/clipboard/clipboard.stories.tsx
@@ -185,3 +185,34 @@ export const AccessibilityFormField: Story = {
     </FormField>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexFlow: 'column', gap: '12px', alignItems: 'flex-start' }}>
+      <Clipboard value="Clipboard">
+        <ClipboardControl />
+        <ClipboardTrigger />
+      </Clipboard>
+
+      <Clipboard value="Masked">
+        <ClipboardControl maskOption={{ enable: true }} />
+        <ClipboardTrigger />
+      </Clipboard>
+
+      <Clipboard value="Loading">
+        <ClipboardControl loading />
+        <ClipboardTrigger />
+      </Clipboard>
+
+      <Clipboard value="Disabled" disabled>
+        <ClipboardControl />
+        <ClipboardTrigger />
+      </Clipboard>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/code/code.stories.tsx b/packages/storybook/stories/components/code/code.stories.tsx
index 79cc8d3a2..b82c36281 100644
--- a/packages/storybook/stories/components/code/code.stories.tsx
+++ b/packages/storybook/stories/components/code/code.stories.tsx
@@ -116,3 +116,26 @@ export const Multiline: Story = {
     </Code>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 600 }}>
+      <Code>
+        console.log('Hello world');
+      </Code>
+
+      <Code canCopy>
+        { `import { Text } from '@ovhcloud/ods-react';` }
+      </Code>
+
+      <Code canCopy labelCopy="Copy" labelCopySuccess="Copied!">
+        { `const sum = (a, b) => a + b;` }
+      </Code>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/combobox/combobox.stories.tsx b/packages/storybook/stories/components/combobox/combobox.stories.tsx
index f2d8c2207..6e7211c99 100644
--- a/packages/storybook/stories/components/combobox/combobox.stories.tsx
+++ b/packages/storybook/stories/components/combobox/combobox.stories.tsx
@@ -549,3 +549,39 @@ export const AccessibilityI18n: Story = {
     </FormField>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Combobox items={[{ label: 'Dog', value: 'dog' }, { label: 'Cat', value: 'cat' }]}>
+        <ComboboxControl placeholder="Default" />
+        <ComboboxContent />
+      </Combobox>
+
+      <Combobox items={[{ label: 'Dog', value: 'dog' }, { label: 'Cat', value: 'cat' }]}>
+        <ComboboxControl clearable placeholder="Clearable" />
+        <ComboboxContent />
+      </Combobox>
+
+      <Combobox items={[{ label: 'Dog', value: 'dog' }, { label: 'Cat', value: 'cat' }]}>
+        <ComboboxControl loading placeholder="Loading" />
+        <ComboboxContent />
+      </Combobox>
+
+      <Combobox disabled items={[{ label: 'Dog', value: 'dog' }, { label: 'Cat', value: 'cat' }]}>
+        <ComboboxControl placeholder="Disabled" />
+        <ComboboxContent />
+      </Combobox>
+
+      <Combobox readOnly items={[{ label: 'Dog', value: 'dog' }, { label: 'Cat', value: 'cat' }]}>
+        <ComboboxControl placeholder="Read only" />
+        <ComboboxContent />
+      </Combobox>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/datepicker/datepicker.stories.tsx b/packages/storybook/stories/components/datepicker/datepicker.stories.tsx
index 069b216e9..b6b716e98 100644
--- a/packages/storybook/stories/components/datepicker/datepicker.stories.tsx
+++ b/packages/storybook/stories/components/datepicker/datepicker.stories.tsx
@@ -319,3 +319,44 @@ export const AccessibilityI18n: Story = {
     </FormField>
   )
 }
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Datepicker>
+        <DatepickerControl placeholder="Default" />
+        <DatepickerContent />
+      </Datepicker>
+
+      <Datepicker>
+        <DatepickerControl loading placeholder="Loading" />
+        <DatepickerContent />
+      </Datepicker>
+
+      <Datepicker>
+        <DatepickerControl clearable placeholder="Clearable" />
+        <DatepickerContent />
+      </Datepicker>
+
+      <Datepicker invalid>
+        <DatepickerControl placeholder="Invalid" />
+        <DatepickerContent />
+      </Datepicker>
+
+      <Datepicker disabled>
+        <DatepickerControl placeholder="Disabled" />
+        <DatepickerContent />
+      </Datepicker>
+
+      <Datepicker readOnly>
+        <DatepickerControl placeholder="Read only" />
+        <DatepickerContent />
+      </Datepicker>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/divider/divider.stories.tsx b/packages/storybook/stories/components/divider/divider.stories.tsx
index 0b786313c..5392a1b3c 100644
--- a/packages/storybook/stories/components/divider/divider.stories.tsx
+++ b/packages/storybook/stories/components/divider/divider.stories.tsx
@@ -93,3 +93,18 @@ export const Spacing: Story = {
     </>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div>
+      <Divider color={ DIVIDER_COLOR.neutral } />
+      <br />
+      <Divider color={ DIVIDER_COLOR.primary } />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/drawer/drawer.stories.tsx b/packages/storybook/stories/components/drawer/drawer.stories.tsx
index 46db035a1..7a1078020 100644
--- a/packages/storybook/stories/components/drawer/drawer.stories.tsx
+++ b/packages/storybook/stories/components/drawer/drawer.stories.tsx
@@ -287,3 +287,50 @@ export const AccessibilityAriaLabel: Story = {
     </Drawer>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexFlow: 'row wrap', gap: '12px' }}>
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button>Left</Button>
+        </DrawerTrigger>
+        <DrawerContent position={ DRAWER_POSITION.left }>
+          <DrawerBody>Left drawer</DrawerBody>
+        </DrawerContent>
+      </Drawer>
+
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button>Right</Button>
+        </DrawerTrigger>
+        <DrawerContent position={ DRAWER_POSITION.right }>
+          <DrawerBody>Right drawer</DrawerBody>
+        </DrawerContent>
+      </Drawer>
+
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button>Top</Button>
+        </DrawerTrigger>
+        <DrawerContent position={ DRAWER_POSITION.top }>
+          <DrawerBody>Top drawer</DrawerBody>
+        </DrawerContent>
+      </Drawer>
+
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button>Bottom</Button>
+        </DrawerTrigger>
+        <DrawerContent position={ DRAWER_POSITION.bottom }>
+          <DrawerBody>Bottom drawer</DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/file-upload/file-upload.stories.tsx b/packages/storybook/stories/components/file-upload/file-upload.stories.tsx
index 0cbfa6262..f7085a76e 100644
--- a/packages/storybook/stories/components/file-upload/file-upload.stories.tsx
+++ b/packages/storybook/stories/components/file-upload/file-upload.stories.tsx
@@ -520,3 +520,26 @@ import { useState } from 'react';`,
     );
   },
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <FileUpload>
+        <FileUploadList />
+      </FileUpload>
+
+      <FileUpload disabled>
+        <FileUploadList />
+      </FileUpload>
+
+      <FileUpload invalid>
+        <FileUploadList />
+      </FileUpload>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/form-field/form-field.stories.tsx b/packages/storybook/stories/components/form-field/form-field.stories.tsx
index ad9d92f93..64f386b40 100644
--- a/packages/storybook/stories/components/form-field/form-field.stories.tsx
+++ b/packages/storybook/stories/components/form-field/form-field.stories.tsx
@@ -194,3 +194,29 @@ export const AccessibilityLabel: Story = {
     </FormField>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <FormField>
+        <FormFieldLabel>Label</FormFieldLabel>
+        <Input name="input" />
+      </FormField>
+
+      <FormField>
+        <Input name="input" />
+        <FormFieldHelper>Helper text</FormFieldHelper>
+      </FormField>
+
+      <FormField invalid>
+        <Input name="input" />
+        <FormFieldError>Error message</FormFieldError>
+      </FormField>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/icon/icon.stories.tsx b/packages/storybook/stories/components/icon/icon.stories.tsx
index 9bb94200c..7463a3a07 100644
--- a/packages/storybook/stories/components/icon/icon.stories.tsx
+++ b/packages/storybook/stories/components/icon/icon.stories.tsx
@@ -389,3 +389,20 @@ export const AccessibilityRating: Story = {
     </>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexFlow: 'row wrap', gap: '16px', alignItems: 'center' }}>
+      <Icon name={ ICON_NAME.home } />
+      <Icon name={ ICON_NAME.circleInfo } />
+      <Icon name={ ICON_NAME.tag } />
+      <Icon name={ ICON_NAME.check } />
+      <Icon name={ ICON_NAME.triangleExclamation } />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/input/input.stories.tsx b/packages/storybook/stories/components/input/input.stories.tsx
index 3a00409d1..e61ed1979 100644
--- a/packages/storybook/stories/components/input/input.stories.tsx
+++ b/packages/storybook/stories/components/input/input.stories.tsx
@@ -272,3 +272,21 @@ export const AccessibilityI18n: Story = {
     </FormField>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'flex-start' }}>
+      <Input placeholder="Default" />
+      <Input clearable defaultValue="Clearable" />
+      <Input loading placeholder="Loading" />
+      <Input disabled placeholder="Disabled" />
+      <Input invalid placeholder="Invalid" />
+      <Input readOnly defaultValue="Read only" />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/link/link.stories.tsx b/packages/storybook/stories/components/link/link.stories.tsx
index b5a7b1798..1e847762e 100644
--- a/packages/storybook/stories/components/link/link.stories.tsx
+++ b/packages/storybook/stories/components/link/link.stories.tsx
@@ -148,3 +148,19 @@ export const AccessibilityFileDownload: Story = {
     </>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+      <Link href="https://www.ovhcloud.com">Default Link</Link>
+      <Link disabled href="https://www.ovhcloud.com">Disabled</Link>
+      <Link href="https://www.ovhcloud.com"><Icon name={ ICON_NAME.arrowLeft } />Icon Left</Link>
+      <Link href="https://www.ovhcloud.com" style={{ justifySelf: 'right' }}>Icon Right<Icon name={ ICON_NAME.arrowRight } /></Link>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/medium/medium.stories.tsx b/packages/storybook/stories/components/medium/medium.stories.tsx
index ffca46271..af80e4039 100644
--- a/packages/storybook/stories/components/medium/medium.stories.tsx
+++ b/packages/storybook/stories/components/medium/medium.stories.tsx
@@ -112,3 +112,18 @@ export const Width: Story = {
       width={ 300 } />
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Medium alt="OVHcloud logo" src="https://images.crunchbase.com/image/upload/c_pad,w_256,f_auto,q_auto:eco,dpr_1/ayzwkdawmlyzvuummuf4" />
+      <Medium alt="OVHcloud logo" height={ 20 } src="https://images.crunchbase.com/image/upload/c_pad,w_256,f_auto,q_auto:eco,dpr_1/ayzwkdawmlyzvuummuf4" />
+      <Medium alt="OVHcloud logo" width={ 300 } src="https://images.crunchbase.com/image/upload/c_pad,w_256,f_auto,q_auto:eco,dpr_1/ayzwkdawmlyzvuummuf4" />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/message/message.stories.tsx b/packages/storybook/stories/components/message/message.stories.tsx
index 19c52187b..6c7ed5d8e 100644
--- a/packages/storybook/stories/components/message/message.stories.tsx
+++ b/packages/storybook/stories/components/message/message.stories.tsx
@@ -336,3 +336,39 @@ export const Variant: Story = {
     </>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'inline-flex', flexFlow: 'column', gap: '8px' }}>
+      <Message>
+        <MessageIcon name={ ICON_NAME.circleInfo } />
+        <MessageBody>Default message</MessageBody>
+      </Message>
+      <Message color={ MESSAGE_COLOR.information }>
+        <MessageIcon name={ ICON_NAME.circleInfo } />
+        <MessageBody>Information</MessageBody>
+      </Message>
+      <Message color={ MESSAGE_COLOR.success }>
+        <MessageIcon name={ ICON_NAME.circleCheck } />
+        <MessageBody>Success</MessageBody>
+      </Message>
+      <Message color={ MESSAGE_COLOR.warning }>
+        <MessageIcon name={ ICON_NAME.triangleExclamation } />
+        <MessageBody>Warning</MessageBody>
+      </Message>
+      <Message color={ MESSAGE_COLOR.critical }>
+        <MessageIcon name={ ICON_NAME.hexagonExclamation } />
+        <MessageBody>Critical</MessageBody>
+      </Message>
+      <Message variant={ MESSAGE_VARIANT.light }>
+        <MessageIcon name={ ICON_NAME.circleInfo } />
+        <MessageBody>Light variant</MessageBody>
+      </Message>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/meter/meter.stories.tsx b/packages/storybook/stories/components/meter/meter.stories.tsx
index ffc45354f..caef3459f 100644
--- a/packages/storybook/stories/components/meter/meter.stories.tsx
+++ b/packages/storybook/stories/components/meter/meter.stories.tsx
@@ -172,3 +172,20 @@ export const Thresholds: Story = {
     </>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Meter />
+      <Meter low={ 40 } value={ 35 } />
+      <Meter high={ 80 } low={ 40 } value={ 60 } />
+      <Meter high={ 80 } value={ 90 } />
+      <Meter optimum={ 30 } value={ 20 } />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/modal/modal.stories.tsx b/packages/storybook/stories/components/modal/modal.stories.tsx
index 45ba28438..1d6ac2005 100644
--- a/packages/storybook/stories/components/modal/modal.stories.tsx
+++ b/packages/storybook/stories/components/modal/modal.stories.tsx
@@ -529,3 +529,41 @@ export const Overview: Story = {
     </Modal>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexFlow: 'row', gap: '12px' }}>
+      <Modal>
+        <ModalTrigger asChild>
+          <Button>Default</Button>
+        </ModalTrigger>
+        <ModalContent>
+          <ModalBody>Default</ModalBody>
+        </ModalContent>
+      </Modal>
+
+      <Modal>
+        <ModalTrigger asChild>
+          <Button>Non dismissible</Button>
+        </ModalTrigger>
+        <ModalContent dismissible={ false }>
+          <ModalBody>Non dismissible</ModalBody>
+        </ModalContent>
+      </Modal>
+
+      <Modal>
+        <ModalTrigger asChild>
+          <Button color={ BUTTON_COLOR.critical }>Critical</Button>
+        </ModalTrigger>
+        <ModalContent color={ MODAL_COLOR.critical }>
+          <ModalBody>Critical</ModalBody>
+        </ModalContent>
+      </Modal>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/pagination/pagination.stories.tsx b/packages/storybook/stories/components/pagination/pagination.stories.tsx
index 8f867afdd..7e1bb306b 100644
--- a/packages/storybook/stories/components/pagination/pagination.stories.tsx
+++ b/packages/storybook/stories/components/pagination/pagination.stories.tsx
@@ -189,3 +189,19 @@ export const TotalItems: Story = {
       withPageSizeSelector />
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'flex-start' }}>
+      <Pagination totalItems={ 100 } />
+      <Pagination totalItems={ 500 } pageSize={ 25 } />
+      <Pagination totalItems={ 500 } disabled />
+      <Pagination totalItems={ 100 } withPageSizeSelector />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/password/password.stories.tsx b/packages/storybook/stories/components/password/password.stories.tsx
index fd4d4e354..6bac27975 100644
--- a/packages/storybook/stories/components/password/password.stories.tsx
+++ b/packages/storybook/stories/components/password/password.stories.tsx
@@ -196,3 +196,21 @@ export const AccessibilityI18n: Story = {
     </FormField>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'flex-start' }}>
+      <Password placeholder="Default" />
+      <Password clearable defaultValue="Clearable" />
+      <Password loading placeholder="Loading" />
+      <Password disabled placeholder="Disabled" />
+      <Password invalid placeholder="Invalid" />
+      <Password readOnly defaultValue="Read only" />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/phone-number/phone-number.stories.tsx b/packages/storybook/stories/components/phone-number/phone-number.stories.tsx
index 34f57f159..899b94e6a 100644
--- a/packages/storybook/stories/components/phone-number/phone-number.stories.tsx
+++ b/packages/storybook/stories/components/phone-number/phone-number.stories.tsx
@@ -338,3 +338,32 @@ export const AccessibilityI18n: Story = {
   ),
 };
 
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'flex-start' }}>
+      <PhoneNumber>
+        <PhoneNumberControl />
+      </PhoneNumber>
+
+      <PhoneNumber>
+        <PhoneNumberCountryList />
+        <PhoneNumberControl />
+      </PhoneNumber>
+
+      <PhoneNumber>
+        <PhoneNumberControl loading />
+      </PhoneNumber>
+
+      <PhoneNumber disabled>
+        <PhoneNumberCountryList />
+        <PhoneNumberControl />
+      </PhoneNumber>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/popover/popover.stories.tsx b/packages/storybook/stories/components/popover/popover.stories.tsx
index 74327f677..df7c1896c 100644
--- a/packages/storybook/stories/components/popover/popover.stories.tsx
+++ b/packages/storybook/stories/components/popover/popover.stories.tsx
@@ -338,3 +338,28 @@ export const SameWidth: Story = {
     </Popover>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexFlow: 'row wrap', gap: '12px' }}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button>Default</Button>
+        </PopoverTrigger>
+        <PopoverContent>This is the popover content</PopoverContent>
+      </Popover>
+
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button>With Arrow</Button>
+        </PopoverTrigger>
+        <PopoverContent withArrow>This is the popover content</PopoverContent>
+      </Popover>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/progress-bar/progress-bar.stories.tsx b/packages/storybook/stories/components/progress-bar/progress-bar.stories.tsx
index 34efbbccb..45c2d3cfe 100644
--- a/packages/storybook/stories/components/progress-bar/progress-bar.stories.tsx
+++ b/packages/storybook/stories/components/progress-bar/progress-bar.stories.tsx
@@ -80,3 +80,20 @@ export const AccessibilityLabel: Story = {
     <ProgressBar aria-label="Converting" />
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', width: '300px' }}>
+      <ProgressBar />
+      <ProgressBar value="25" />
+      <ProgressBar value="50" />
+      <ProgressBar value="75" />
+      <ProgressBar max="500" value="50" />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/quantity/quantity.stories.tsx b/packages/storybook/stories/components/quantity/quantity.stories.tsx
index 311325645..f24eb5f85 100644
--- a/packages/storybook/stories/components/quantity/quantity.stories.tsx
+++ b/packages/storybook/stories/components/quantity/quantity.stories.tsx
@@ -219,3 +219,38 @@ export const Step: Story = {
     </Quantity>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'flex-start' }}>
+      <Quantity>
+        <QuantityControl>
+          <QuantityInput placeholder="Default" />
+        </QuantityControl>
+      </Quantity>
+
+      <Quantity disabled>
+        <QuantityControl>
+          <QuantityInput placeholder="Disabled" />
+        </QuantityControl>
+      </Quantity>
+
+      <Quantity readOnly>
+        <QuantityControl>
+          <QuantityInput defaultValue="3" />
+        </QuantityControl>
+      </Quantity>
+
+      <Quantity invalid>
+        <QuantityControl>
+          <QuantityInput placeholder="Invalid" />
+        </QuantityControl>
+      </Quantity>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/radio-group/radio-group.stories.tsx b/packages/storybook/stories/components/radio-group/radio-group.stories.tsx
index 5497ed7e8..962d21b2e 100644
--- a/packages/storybook/stories/components/radio-group/radio-group.stories.tsx
+++ b/packages/storybook/stories/components/radio-group/radio-group.stories.tsx
@@ -279,3 +279,32 @@ export const Overview: Story = {
     </RadioGroup>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', gap: '24px' }}>
+      <RadioGroup>
+        <Radio value="html"><RadioControl /><RadioLabel>HTML</RadioLabel></Radio>
+        <Radio value="css"><RadioControl /><RadioLabel>CSS</RadioLabel></Radio>
+        <Radio value="js"><RadioControl /><RadioLabel>JavaScript</RadioLabel></Radio>
+      </RadioGroup>
+
+      <RadioGroup disabled>
+        <Radio value="html"><RadioControl /><RadioLabel>HTML</RadioLabel></Radio>
+        <Radio value="css"><RadioControl /><RadioLabel>CSS</RadioLabel></Radio>
+        <Radio value="js"><RadioControl /><RadioLabel>JavaScript</RadioLabel></Radio>
+      </RadioGroup>
+
+      <RadioGroup>
+        <Radio disabled value="html"><RadioControl /><RadioLabel>HTML</RadioLabel></Radio>
+        <Radio value="css"><RadioControl /><RadioLabel>CSS</RadioLabel></Radio>
+        <Radio value="js"><RadioControl /><RadioLabel>JavaScript</RadioLabel></Radio>
+      </RadioGroup>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/range/range.stories.tsx b/packages/storybook/stories/components/range/range.stories.tsx
index 710a524c3..979ffa612 100644
--- a/packages/storybook/stories/components/range/range.stories.tsx
+++ b/packages/storybook/stories/components/range/range.stories.tsx
@@ -347,3 +347,21 @@ import { useState } from 'react';`,
     );
   },
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', width: '240px' }}>
+      <Range />
+      <Range defaultValue={ [50, 75] } />
+      <Range disabled defaultValue={ [20] } />
+      <Range disabled defaultValue={ [50, 75] } />
+      <Range step={ 5 } defaultValue={ [20] } />
+      <Range ticks={ [10,20,30,40,50,60,70,80,90] } defaultValue={ [20] } />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/select/select.stories.tsx b/packages/storybook/stories/components/select/select.stories.tsx
index bcd14f9e2..fa1d23576 100644
--- a/packages/storybook/stories/components/select/select.stories.tsx
+++ b/packages/storybook/stories/components/select/select.stories.tsx
@@ -513,3 +513,39 @@ export const Readonly: Story = {
     </Select>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'flex-start' }}>
+      <Select items={[{ label: 'Dog', value:'dog' },{ label: 'Cat', value:'cat' }]}>
+        <SelectControl placeholder="Default" />
+        <SelectContent />
+      </Select>
+
+      <Select multiple items={[{ label: 'Dog', value:'dog' },{ label: 'Cat', value:'cat' }]}>
+        <SelectControl placeholder="Multiple" />
+        <SelectContent />
+      </Select>
+
+      <Select disabled items={[{ label: 'Dog', value:'dog' },{ label: 'Cat', value:'cat' }]}>
+        <SelectControl placeholder="Disabled" />
+        <SelectContent />
+      </Select>
+
+      <Select readOnly items={[{ label: 'Dog', value:'dog' },{ label: 'Cat', value:'cat' }]}>
+        <SelectControl placeholder="Read only" />
+        <SelectContent />
+      </Select>
+
+      <Select invalid items={[{ label: 'Dog', value:'dog' },{ label: 'Cat', value:'cat' }]}>
+        <SelectControl placeholder="Invalid" />
+        <SelectContent />
+      </Select>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/skeleton/skeleton.stories.tsx b/packages/storybook/stories/components/skeleton/skeleton.stories.tsx
index 558f67c82..90d12c14f 100644
--- a/packages/storybook/stories/components/skeleton/skeleton.stories.tsx
+++ b/packages/storybook/stories/components/skeleton/skeleton.stories.tsx
@@ -53,3 +53,18 @@ export const AccessibilityBadPracticeLoading: Story = {
     </div>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', gap: '12px' }}>
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/spinner/spinner.stories.tsx b/packages/storybook/stories/components/spinner/spinner.stories.tsx
index dba13a013..e0b350e0b 100644
--- a/packages/storybook/stories/components/spinner/spinner.stories.tsx
+++ b/packages/storybook/stories/components/spinner/spinner.stories.tsx
@@ -121,3 +121,20 @@ export const AccessibilityAriaLabelledBy: Story = {
     </div>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'inline-flex', flexFlow: 'row', gap: '12px', alignItems: 'center' }}>
+      <Spinner />
+      <Spinner size={ SPINNER_SIZE.sm } />
+      <Spinner size={ SPINNER_SIZE.lg } />
+      <Spinner color={ SPINNER_COLOR.neutral } />
+      <Spinner color={ SPINNER_COLOR.primary } />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/switch/switch.stories.tsx b/packages/storybook/stories/components/switch/switch.stories.tsx
index 2a0269de2..f4cab5eb8 100644
--- a/packages/storybook/stories/components/switch/switch.stories.tsx
+++ b/packages/storybook/stories/components/switch/switch.stories.tsx
@@ -157,3 +157,31 @@ export const Sizes: Story = {
     </>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', gap: '24px' }}>
+      <Switch>
+        <SwitchItem value="item-1">Item 1</SwitchItem>
+        <SwitchItem value="item-2">Item 2</SwitchItem>
+        <SwitchItem value="item-3">Item 3</SwitchItem>
+      </Switch>
+
+      <Switch disabled>
+        <SwitchItem value="item-1">Item 1</SwitchItem>
+        <SwitchItem value="item-2">Item 2</SwitchItem>
+        <SwitchItem value="item-3">Item 3</SwitchItem>
+      </Switch>
+
+      <Switch size={ SWITCH_SIZE.sm }>
+        <SwitchItem value="item-1">Sm 1</SwitchItem>
+        <SwitchItem value="item-2">Sm 2</SwitchItem>
+      </Switch>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/table/table.stories.tsx b/packages/storybook/stories/components/table/table.stories.tsx
index 1e298269e..e7455fc50 100644
--- a/packages/storybook/stories/components/table/table.stories.tsx
+++ b/packages/storybook/stories/components/table/table.stories.tsx
@@ -414,3 +414,36 @@ export const Variant: Story = {
     </>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', rowGap: '16px' }}>
+      <Table>
+        <caption>Default</caption>
+        <thead>
+          <tr><th scope="col">Person</th><th scope="col">Most interest in</th><th scope="col">Age</th></tr>
+        </thead>
+        <tbody>
+          <tr><th scope="row">Chris</th><td>HTML tables</td><td>22</td></tr>
+          <tr><th scope="row">Dennis</th><td>Web accessibility</td><td>45</td></tr>
+        </tbody>
+      </Table>
+
+      <Table variant={ TABLE_VARIANT.striped }>
+        <caption>Striped</caption>
+        <thead>
+          <tr><th scope="col">Person</th><th scope="col">Most interest in</th><th scope="col">Age</th></tr>
+        </thead>
+        <tbody>
+          <tr><th scope="row">Sarah</th><td>JavaScript frameworks</td><td>29</td></tr>
+          <tr><th scope="row">Karen</th><td>Web performance</td><td>36</td></tr>
+        </tbody>
+      </Table>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/tabs/tabs.stories.tsx b/packages/storybook/stories/components/tabs/tabs.stories.tsx
index c39ae819c..ef83af639 100644
--- a/packages/storybook/stories/components/tabs/tabs.stories.tsx
+++ b/packages/storybook/stories/components/tabs/tabs.stories.tsx
@@ -221,3 +221,23 @@ export const WithContent: Story = {
     </Tabs>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <Tabs defaultValue="tab1">
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2" disabled>Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+      </TabList>
+      <TabContent value="tab1"><p>Content 1</p></TabContent>
+      <TabContent value="tab2"><p>Content 2</p></TabContent>
+      <TabContent value="tab3"><p>Content 3</p></TabContent>
+    </Tabs>
+  ),
+};
diff --git a/packages/storybook/stories/components/tag/tag.stories.tsx b/packages/storybook/stories/components/tag/tag.stories.tsx
index 79990da93..e3f25e46b 100644
--- a/packages/storybook/stories/components/tag/tag.stories.tsx
+++ b/packages/storybook/stories/components/tag/tag.stories.tsx
@@ -186,3 +186,24 @@ export const AccessibilityAriaLabel: Story = {
     </Tag>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexFlow: 'row wrap', gap: '8px', alignItems: 'center' }}>
+      <Tag>Default</Tag>
+      <Tag disabled>Disabled</Tag>
+      <Tag size={ TAG_SIZE.lg }>Large</Tag>
+      <Tag color={ TAG_COLOR.primary }>Primary</Tag>
+      <Tag color={ TAG_COLOR.success }>Success</Tag>
+      <Tag color={ TAG_COLOR.warning }>Warning</Tag>
+      <Tag color={ TAG_COLOR.critical }>Critical</Tag>
+      <Tag color={ TAG_COLOR.information }>Info</Tag>
+      <Tag color={ TAG_COLOR.neutral }>Neutral</Tag>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/text/text.stories.tsx b/packages/storybook/stories/components/text/text.stories.tsx
index 713b90c00..fdaf95b49 100644
--- a/packages/storybook/stories/components/text/text.stories.tsx
+++ b/packages/storybook/stories/components/text/text.stories.tsx
@@ -130,3 +130,19 @@ export const TableCaption: Story = {
     </table>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div>
+      <Text preset={ TEXT_PRESET.heading4 }>Heading</Text>
+      <Text preset={ TEXT_PRESET.paragraph }>Paragraph text</Text>
+      <Text preset={ TEXT_PRESET.caption }>Caption</Text>
+      <Text preset={ TEXT_PRESET.label }>Label</Text>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/textarea/textarea.stories.tsx b/packages/storybook/stories/components/textarea/textarea.stories.tsx
index aed5f5dfd..589df3d92 100644
--- a/packages/storybook/stories/components/textarea/textarea.stories.tsx
+++ b/packages/storybook/stories/components/textarea/textarea.stories.tsx
@@ -196,3 +196,19 @@ export const Resizable: Story = {
     <Textarea style={{ resize: 'both' }} />
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'flex-start' }}>
+      <Textarea placeholder="Default" />
+      <Textarea disabled placeholder="Disabled" />
+      <Textarea invalid placeholder="Invalid" />
+      <Textarea readOnly defaultValue="Read only" />
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/timepicker/timepicker.stories.tsx b/packages/storybook/stories/components/timepicker/timepicker.stories.tsx
index 9a7287ea7..f4f1597f6 100644
--- a/packages/storybook/stories/components/timepicker/timepicker.stories.tsx
+++ b/packages/storybook/stories/components/timepicker/timepicker.stories.tsx
@@ -223,3 +223,31 @@ export const WithSeconds: Story = {
     </>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'flex-start' }}>
+      <Timepicker>
+        <TimepickerControl />
+      </Timepicker>
+
+      <Timepicker>
+        <TimepickerControl />
+        <TimepickerTimezoneList />
+      </Timepicker>
+
+      <Timepicker disabled>
+        <TimepickerControl />
+      </Timepicker>
+
+      <Timepicker readOnly>
+        <TimepickerControl />
+      </Timepicker>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/toggle/toggle.stories.tsx b/packages/storybook/stories/components/toggle/toggle.stories.tsx
index cd0a4c2a9..13c7dd492 100644
--- a/packages/storybook/stories/components/toggle/toggle.stories.tsx
+++ b/packages/storybook/stories/components/toggle/toggle.stories.tsx
@@ -182,3 +182,35 @@ export const AccessibilityAriaLabel: Story = {
     </Toggle>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+      <Toggle>
+        <ToggleControl />
+      </Toggle>
+
+      <Toggle disabled>
+        <ToggleControl />
+      </Toggle>
+
+      <Toggle invalid>
+        <ToggleControl />
+      </Toggle>
+
+      <Toggle withLabels>
+        <ToggleControl />
+      </Toggle>
+
+      <Toggle>
+        <ToggleControl />
+        <ToggleLabel>With label</ToggleLabel>
+      </Toggle>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/tooltip/tooltip.stories.tsx b/packages/storybook/stories/components/tooltip/tooltip.stories.tsx
index 9ac78bc0d..f07e2b7d0 100644
--- a/packages/storybook/stories/components/tooltip/tooltip.stories.tsx
+++ b/packages/storybook/stories/components/tooltip/tooltip.stories.tsx
@@ -297,3 +297,28 @@ export const AccessibilityTooltip: Story = {
     </Tooltip>
   ),
 };
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Icon name={ ICON_NAME.circleQuestion } style={{ fontSize: '24px' }} />
+        </TooltipTrigger>
+        <TooltipContent>This is the tooltip content</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Icon name={ ICON_NAME.circleInfo } style={{ fontSize: '24px' }} />
+        </TooltipTrigger>
+        <TooltipContent withArrow>This is the tooltip content</TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
diff --git a/packages/storybook/stories/components/tree-view/tree-view.stories.tsx b/packages/storybook/stories/components/tree-view/tree-view.stories.tsx
index 9613f18b0..8bcc186f1 100644
--- a/packages/storybook/stories/components/tree-view/tree-view.stories.tsx
+++ b/packages/storybook/stories/components/tree-view/tree-view.stories.tsx
@@ -652,3 +652,36 @@ import { useRef, useState } from 'react';`,
     );
   }
 }
+
+
+export const ThemeGenerator: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!dev'],
+  render: ({}) => {
+    const items = [
+      { id: 'src', name: 'src', children: [ { id: 'components', name: 'components', children: [ { id: 'Button.tsx', name: 'Button.tsx' } ] } ] },
+      { id: 'package.json', name: 'package.json' },
+    ];
+    return (
+      <div style={{ display: 'flex', gap: '24px' }}>
+        <TreeView items={ items }>
+          <TreeViewNodes>
+            { items.map((item) => (
+              <TreeViewNode key={ item.id } item={ item } />
+            )) }
+          </TreeViewNodes>
+        </TreeView>
+
+        <TreeView disabled items={ items }>
+          <TreeViewNodes>
+            { items.map((item) => (
+              <TreeViewNode key={ item.id } item={ item } />
+            )) }
+          </TreeViewNodes>
+        </TreeView>
+      </div>
+    );
+  }
+};
diff --git a/packages/storybook/stories/ovhcloud-design-system/tools/theme-generator.mdx b/packages/storybook/stories/ovhcloud-design-system/tools/theme-generator.mdx
new file mode 100644
index 000000000..81ca1071b
--- /dev/null
+++ b/packages/storybook/stories/ovhcloud-design-system/tools/theme-generator.mdx
@@ -0,0 +1,18 @@
+import { Meta, Source } from '@storybook/blocks';
+import { Heading } from '../../../src/components/heading/Heading';
+import { NoToC } from '../../../src/components/noToC/NoToC';
+import { ThemeGenerator } from '../../../src/components/themeGenerator/ThemeGenerator';
+
+<Meta
+  tags={ ['beta'] }
+  title="OVHcloud Design System/Tools/Theme Generator" />
+
+<NoToC />
+
+<Heading label="Theme Generator" level={ 1 } />
+
+This is a live theme generator where you can create and customize themes for the ODS React library.
+
+It allows you to experiment with different color schemes, typography, and styling options to create custom themes that match your brand or application requirements.
+
+<ThemeGenerator />
diff --git a/packages/themes/src/developer/_variables.scss b/packages/themes/src/developer/_variables.scss
new file mode 100644
index 000000000..725e4350b
--- /dev/null
+++ b/packages/themes/src/developer/_variables.scss
@@ -0,0 +1,213 @@
+/* stylelint-disable color-hex-length */
+// Developer theme color palette
+$ods-palette-purple-000: #ffffff;
+$ods-palette-purple-025: #fbf6ff;
+$ods-palette-purple-050: #f7ecff;
+$ods-palette-purple-075: #f1e0ff;
+$ods-palette-purple-100: #ebcfff;
+$ods-palette-purple-200: #dfb0ff;
+$ods-palette-purple-300: #d498fd;
+$ods-palette-purple-400: #bc77ec;
+$ods-palette-purple-500: #9d5be8;
+$ods-palette-purple-600: #7d3ee4;
+$ods-palette-purple-700: #612bd9;
+$ods-palette-purple-800: #4f1fbb;
+$ods-palette-purple-900: #31128a;
+$ods-palette-pink-000: #ffffff;
+$ods-palette-pink-025: #fffcff;
+$ods-palette-pink-050: #fff6ff;
+$ods-palette-pink-075: #ffeafc;
+$ods-palette-pink-100: #ffe2f6;
+$ods-palette-pink-200: #ebcee1;
+$ods-palette-pink-300: #d7bacd;
+$ods-palette-pink-400: #c2a6b9;
+$ods-palette-pink-500: #af93a6;
+$ods-palette-pink-600: #9b8093;
+$ods-palette-pink-700: #886e80;
+$ods-palette-pink-800: #765c6e;
+$ods-palette-pink-900: #644b5c;
+$ods-palette-green-000: #ffffff;
+$ods-palette-green-025: #e3fff3;
+$ods-palette-green-050: #c7ffe8;
+$ods-palette-green-075: #b6ffdb;
+$ods-palette-green-100: #a5ffd0;
+$ods-palette-green-200: #83eab5;
+$ods-palette-green-300: #6fd6a1;
+$ods-palette-green-400: #5ac18e;
+$ods-palette-green-500: #45ad7c;
+$ods-palette-green-600: #2e9a69;
+$ods-palette-green-700: #108758;
+$ods-palette-green-800: #007447;
+$ods-palette-green-900: #006136;
+$ods-palette-orange-000: #ffffff;
+$ods-palette-orange-025: #fff0e8;
+$ods-palette-orange-050: #ffdfc7;
+$ods-palette-orange-075: #ffd7c0;
+$ods-palette-orange-100: #ffcbb3;
+$ods-palette-orange-200: #ffb6a0;
+$ods-palette-orange-300: #ffa28d;
+$ods-palette-orange-400: #fc8f7a;
+$ods-palette-orange-500: #e67b68;
+$ods-palette-orange-600: #d06856;
+$ods-palette-orange-700: #bb5545;
+$ods-palette-orange-800: #a54335;
+$ods-palette-orange-900: #903025;
+$ods-palette-yellow-000: #ffffff;
+$ods-palette-yellow-025: #fefee3;
+$ods-palette-yellow-050: #fbfbc9;
+$ods-palette-yellow-075: #f9fbb3;
+$ods-palette-yellow-100: #f7fa9d;
+$ods-palette-yellow-200: #f6f647;
+$ods-palette-yellow-300: #e3e902;
+$ods-palette-yellow-400: #ccd904;
+$ods-palette-yellow-500: #b5c806;
+$ods-palette-yellow-600: #9eb708;
+$ods-palette-yellow-700: #87a70a;
+$ods-palette-yellow-800: #70960c;
+$ods-palette-yellow-900: #405801;
+$ods-palette-blue-000: #ffffff;
+$ods-palette-blue-025: #f3fdff;
+$ods-palette-blue-050: #e6faff;
+$ods-palette-blue-075: #cef5ff;
+$ods-palette-blue-100: #bef1ff;
+$ods-palette-blue-200: #85d9fd;
+$ods-palette-blue-300: #4bb2f6;
+$ods-palette-blue-400: #157eea;
+$ods-palette-blue-500: #0050d7;
+$ods-palette-blue-600: #002dbe;
+$ods-palette-blue-700: #000e9c;
+$ods-palette-blue-800: #00185e;
+$ods-palette-blue-900: #000d1f;
+$ods-palette-white: #ffffff;
+$ods-palette-deep-purple: #4f1fbb;
+$ods-palette-light-blue: #a2d2ff;
+$ods-palette-navy-blue: #001087;
+// Color system variables
+$ods-color-neutral-000: $ods-palette-pink-000;
+$ods-color-neutral-025: $ods-palette-pink-025;
+$ods-color-neutral-050: $ods-palette-pink-050;
+$ods-color-neutral-075: $ods-palette-pink-075;
+$ods-color-neutral-100: $ods-palette-pink-100;
+$ods-color-neutral-200: $ods-palette-pink-200;
+$ods-color-neutral-300: $ods-palette-pink-300;
+$ods-color-neutral-400: $ods-palette-pink-400;
+$ods-color-neutral-500: $ods-palette-pink-500;
+$ods-color-neutral-600: $ods-palette-pink-600;
+$ods-color-neutral-700: $ods-palette-pink-700;
+$ods-color-neutral-800: $ods-palette-pink-800;
+$ods-color-neutral-900: $ods-palette-pink-900;
+$ods-color-primary-000: $ods-palette-purple-000;
+$ods-color-primary-025: $ods-palette-purple-025;
+$ods-color-primary-050: $ods-palette-purple-050;
+$ods-color-primary-075: $ods-palette-purple-075;
+$ods-color-primary-100: $ods-palette-purple-100;
+$ods-color-primary-200: $ods-palette-purple-200;
+$ods-color-primary-300: $ods-palette-purple-300;
+$ods-color-primary-400: $ods-palette-purple-400;
+$ods-color-primary-500: $ods-palette-purple-500;
+$ods-color-primary-600: $ods-palette-purple-600;
+$ods-color-primary-700: $ods-palette-purple-700;
+$ods-color-primary-800: $ods-palette-purple-800;
+$ods-color-primary-900: $ods-palette-purple-900;
+$ods-color-information-000: $ods-palette-purple-000;
+$ods-color-information-025: $ods-palette-purple-025;
+$ods-color-information-050: $ods-palette-purple-050;
+$ods-color-information-075: $ods-palette-purple-075;
+$ods-color-information-100: $ods-palette-purple-100;
+$ods-color-information-200: $ods-palette-purple-200;
+$ods-color-information-300: $ods-palette-purple-300;
+$ods-color-information-400: $ods-palette-purple-400;
+$ods-color-information-500: $ods-palette-purple-500;
+$ods-color-information-600: $ods-palette-purple-600;
+$ods-color-information-700: $ods-palette-purple-700;
+$ods-color-information-800: $ods-palette-purple-800;
+$ods-color-information-900: $ods-palette-purple-900;
+$ods-color-success-000: $ods-palette-green-000;
+$ods-color-success-025: $ods-palette-green-025;
+$ods-color-success-050: $ods-palette-green-050;
+$ods-color-success-075: $ods-palette-green-075;
+$ods-color-success-100: $ods-palette-green-100;
+$ods-color-success-200: $ods-palette-green-200;
+$ods-color-success-300: $ods-palette-green-300;
+$ods-color-success-400: $ods-palette-green-400;
+$ods-color-success-500: $ods-palette-green-500;
+$ods-color-success-600: $ods-palette-green-600;
+$ods-color-success-700: $ods-palette-green-700;
+$ods-color-success-800: $ods-palette-green-800;
+$ods-color-success-900: $ods-palette-green-900;
+$ods-color-warning-000: $ods-palette-yellow-000;
+$ods-color-warning-025: $ods-palette-yellow-025;
+$ods-color-warning-050: $ods-palette-yellow-050;
+$ods-color-warning-075: $ods-palette-yellow-075;
+$ods-color-warning-100: $ods-palette-yellow-100;
+$ods-color-warning-200: $ods-palette-yellow-200;
+$ods-color-warning-300: $ods-palette-yellow-300;
+$ods-color-warning-400: $ods-palette-yellow-400;
+$ods-color-warning-500: $ods-palette-yellow-500;
+$ods-color-warning-600: $ods-palette-yellow-600;
+$ods-color-warning-700: $ods-palette-yellow-700;
+$ods-color-warning-800: $ods-palette-yellow-800;
+$ods-color-warning-900: $ods-palette-yellow-900;
+$ods-color-critical-000: $ods-palette-orange-000;
+$ods-color-critical-025: $ods-palette-orange-025;
+$ods-color-critical-050: $ods-palette-orange-050;
+$ods-color-critical-075: $ods-palette-orange-075;
+$ods-color-critical-100: $ods-palette-orange-100;
+$ods-color-critical-200: $ods-palette-orange-200;
+$ods-color-critical-300: $ods-palette-orange-300;
+$ods-color-critical-400: $ods-palette-orange-400;
+$ods-color-critical-500: $ods-palette-orange-500;
+$ods-color-critical-600: $ods-palette-orange-600;
+$ods-color-critical-700: $ods-palette-orange-700;
+$ods-color-critical-800: $ods-palette-orange-800;
+$ods-color-critical-900: $ods-palette-orange-900;
+
+// Brand colors
+$ods-color-alpha: $ods-palette-green-300;
+$ods-color-beta: $ods-palette-pink-300;
+$ods-color-heading: $ods-palette-deep-purple;
+$ods-color-new: $ods-palette-light-blue;
+$ods-color-promotion: $ods-palette-navy-blue;
+$ods-color-text: $ods-palette-pink-900;
+
+// Form element colors
+$ods-color-background-disabled-default: $ods-color-neutral-100;
+$ods-color-background-readonly-default: $ods-color-neutral-050;
+$ods-color-border-disabled-default: $ods-color-neutral-200;
+$ods-color-border-readonly-default: $ods-color-neutral-050;
+$ods-color-text-disabled-default: $ods-color-neutral-500;
+$ods-color-element-background-selected: $ods-color-primary-800;
+$ods-color-element-text-selected: $ods-color-primary-000;
+$ods-color-form-element-background-default: $ods-color-neutral-000;
+$ods-color-form-element-background-hover-default: $ods-color-neutral-000;
+$ods-color-form-element-background-focus-default: $ods-color-neutral-000;
+$ods-color-form-element-background-critical: $ods-color-critical-000;
+$ods-color-form-element-background-selected-critical: $ods-color-critical-500;
+$ods-color-form-element-border-default: $ods-color-neutral-300;
+$ods-color-form-element-border-hover-default: $ods-color-neutral-500;
+$ods-color-form-element-border-focus-default: $ods-color-neutral-500;
+$ods-color-form-element-border-critical: $ods-color-critical-500;
+$ods-color-form-element-text-default: $ods-color-text;
+$ods-color-form-element-text-placeholder-default: $ods-color-neutral-600;
+
+// Border and spacing
+$ods-border-radius-xs: 4px;
+$ods-border-radius-sm: 8px;
+$ods-border-radius-md: 16px;
+$ods-border-radius-lg: 32px;
+$ods-border-width-sm: 2px;
+$ods-border-width-md: 4px;
+
+// Typography
+$ods-font-family-code: "Source Code Pro", arial;
+$ods-font-family-default: "Source Sans Pro", "Trebuchet MS", arial, "Segoe UI", sans-serif;
+
+// Form elements
+$ods-form-element-input-height: 48px;
+
+// Focus outline
+$ods-outline-color-default: $ods-color-primary-700;
+$ods-outline-offset: 4px;
+$ods-outline-style-default: dashed;
+$ods-outline-width: 4px;
+/* stylelint-enable color-hex-length */
diff --git a/packages/themes/src/developer/default.scss b/packages/themes/src/developer/default.scss
new file mode 100644
index 000000000..49d0dfdff
--- /dev/null
+++ b/packages/themes/src/developer/default.scss
@@ -0,0 +1,17 @@
+/*
+ * The theme plus the fonts packaged as base64.
+ * Use this only if you encounter some issues with the font files import.
+ * Otherwise prefer using distinct /css and /fonts imports.
+ */
+@use '../../assets/fonts/ods-icon/icomoon/icomoon';
+@use '../../assets/fonts/source-code-pro/base64/source-code-pro-variable';
+@use '../../assets/fonts/source-code-pro/base64/source-code-pro-variable-italic';
+@use '../../assets/fonts/source-sans-pro/base64/source-sans3-variable-custom';
+@use '../../assets/fonts/source-sans-pro/base64/source-sans3-variable-custom-italic';
+@use '../helpers/fonts';
+@use './index';
+@include fonts.ods-icon-font-face(icomoon.$base64);
+@include fonts.source-code-pro-font-face(source-code-pro-variable.$base64);
+@include fonts.source-code-pro-italic-font-face(source-code-pro-variable-italic.$base64);
+@include fonts.source-sans-pro-font-face(source-sans3-variable-custom.$base64);
+@include fonts.source-sans-pro-italic-font-face(source-sans3-variable-custom-italic.$base64);
diff --git a/packages/themes/src/developer/fonts.scss b/packages/themes/src/developer/fonts.scss
new file mode 100644
index 000000000..46b15544a
--- /dev/null
+++ b/packages/themes/src/developer/fonts.scss
@@ -0,0 +1,9 @@
+/*
+ * Expose the font-faces.
+ */
+@use '../helpers/fonts';
+@include fonts.ods-icon-font-face(url('../../assets/fonts/ods-icon/icomoon/icomoon.woff'));
+@include fonts.source-code-pro-font-face(url('../../assets/fonts/source-code-pro/woff2/source-code-pro.woff2'));
+@include fonts.source-code-pro-italic-font-face(url('../../assets/fonts/source-code-pro/woff2/source-code-pro-italic.woff2'));
+@include fonts.source-sans-pro-font-face(url('../../assets/fonts/source-sans-pro/woff2/source-sans3-variable-custom.woff2'));
+@include fonts.source-sans-pro-italic-font-face(url('../../assets/fonts/source-sans-pro/woff2/source-sans3-variable-custom-italic.woff2'));
diff --git a/packages/themes/src/developer/index.scss b/packages/themes/src/developer/index.scss
new file mode 100644
index 000000000..b0d286782
--- /dev/null
+++ b/packages/themes/src/developer/index.scss
@@ -0,0 +1,123 @@
+/*
+ * Expose the theme design tokens and layers order.
+ */
+@use './variables' as var;
+@layer ods-quarks, ods-atoms, ods-molecules, ods-organisms;
+
+:root {
+  --ods-border-radius-xs: #{var.$ods-border-radius-xs};
+  --ods-border-radius-sm: #{var.$ods-border-radius-sm};
+  --ods-border-radius-md: #{var.$ods-border-radius-md};
+  --ods-border-radius-lg: #{var.$ods-border-radius-lg};
+  --ods-border-width-sm: #{var.$ods-border-width-sm};
+  --ods-border-width-md: #{var.$ods-border-width-md};
+  --ods-color-alpha: #{var.$ods-color-alpha};
+  --ods-color-background-disabled-default: #{var.$ods-color-background-disabled-default};
+  --ods-color-background-readonly-default: #{var.$ods-color-background-readonly-default};
+  --ods-color-border-disabled-default: #{var.$ods-color-border-disabled-default};
+  --ods-color-border-readonly-default: #{var.$ods-color-border-readonly-default};
+  --ods-color-beta: #{var.$ods-color-beta};
+  --ods-color-critical-000: #{var.$ods-color-critical-000};
+  --ods-color-critical-025: #{var.$ods-color-critical-025};
+  --ods-color-critical-050: #{var.$ods-color-critical-050};
+  --ods-color-critical-075: #{var.$ods-color-critical-075};
+  --ods-color-critical-100: #{var.$ods-color-critical-100};
+  --ods-color-critical-200: #{var.$ods-color-critical-200};
+  --ods-color-critical-300: #{var.$ods-color-critical-300};
+  --ods-color-critical-400: #{var.$ods-color-critical-400};
+  --ods-color-critical-500: #{var.$ods-color-critical-500};
+  --ods-color-critical-600: #{var.$ods-color-critical-600};
+  --ods-color-critical-700: #{var.$ods-color-critical-700};
+  --ods-color-critical-800: #{var.$ods-color-critical-800};
+  --ods-color-critical-900: #{var.$ods-color-critical-900};
+  --ods-color-element-background-selected: #{var.$ods-color-element-background-selected};
+  --ods-color-element-text-selected: #{var.$ods-color-element-text-selected};
+  --ods-color-form-element-background-critical: #{var.$ods-color-form-element-background-critical};
+  --ods-color-form-element-background-default: #{var.$ods-color-form-element-background-default};
+  --ods-color-form-element-background-focus-default: #{var.$ods-color-form-element-background-focus-default};
+  --ods-color-form-element-background-hover-default: #{var.$ods-color-form-element-background-hover-default};
+  --ods-color-form-element-background-selected-critical: #{var.$ods-color-form-element-background-selected-critical};
+  --ods-color-form-element-border-critical: #{var.$ods-color-form-element-border-critical};
+  --ods-color-form-element-border-default: #{var.$ods-color-form-element-border-default};
+  --ods-color-form-element-border-focus-default: #{var.$ods-color-form-element-border-focus-default};
+  --ods-color-form-element-border-hover-default: #{var.$ods-color-form-element-border-hover-default};
+  --ods-color-form-element-text-default: #{var.$ods-color-form-element-text-default};
+  --ods-color-form-element-text-placeholder-default: #{var.$ods-color-form-element-text-placeholder-default};
+  --ods-color-heading: #{var.$ods-color-heading};
+  --ods-color-information-000: #{var.$ods-color-information-000};
+  --ods-color-information-025: #{var.$ods-color-information-025};
+  --ods-color-information-050: #{var.$ods-color-information-050};
+  --ods-color-information-075: #{var.$ods-color-information-075};
+  --ods-color-information-100: #{var.$ods-color-information-100};
+  --ods-color-information-200: #{var.$ods-color-information-200};
+  --ods-color-information-300: #{var.$ods-color-information-300};
+  --ods-color-information-400: #{var.$ods-color-information-400};
+  --ods-color-information-500: #{var.$ods-color-information-500};
+  --ods-color-information-600: #{var.$ods-color-information-600};
+  --ods-color-information-700: #{var.$ods-color-information-700};
+  --ods-color-information-800: #{var.$ods-color-information-800};
+  --ods-color-information-900: #{var.$ods-color-information-900};
+  --ods-color-neutral-000: #{var.$ods-color-neutral-000};
+  --ods-color-neutral-025: #{var.$ods-color-neutral-025};
+  --ods-color-neutral-050: #{var.$ods-color-neutral-050};
+  --ods-color-neutral-075: #{var.$ods-color-neutral-075};
+  --ods-color-neutral-100: #{var.$ods-color-neutral-100};
+  --ods-color-neutral-200: #{var.$ods-color-neutral-200};
+  --ods-color-neutral-300: #{var.$ods-color-neutral-300};
+  --ods-color-neutral-400: #{var.$ods-color-neutral-400};
+  --ods-color-neutral-500: #{var.$ods-color-neutral-500};
+  --ods-color-neutral-600: #{var.$ods-color-neutral-600};
+  --ods-color-neutral-700: #{var.$ods-color-neutral-700};
+  --ods-color-neutral-800: #{var.$ods-color-neutral-800};
+  --ods-color-neutral-900: #{var.$ods-color-neutral-900};
+  --ods-color-new: #{var.$ods-color-new};
+  --ods-color-primary-000: #{var.$ods-color-primary-000};
+  --ods-color-primary-025: #{var.$ods-color-primary-025};
+  --ods-color-primary-050: #{var.$ods-color-primary-050};
+  --ods-color-primary-075: #{var.$ods-color-primary-075};
+  --ods-color-primary-100: #{var.$ods-color-primary-100};
+  --ods-color-primary-200: #{var.$ods-color-primary-200};
+  --ods-color-primary-300: #{var.$ods-color-primary-300};
+  --ods-color-primary-400: #{var.$ods-color-primary-400};
+  --ods-color-primary-500: #{var.$ods-color-primary-500};
+  --ods-color-primary-600: #{var.$ods-color-primary-600};
+  --ods-color-primary-700: #{var.$ods-color-primary-700};
+  --ods-color-primary-800: #{var.$ods-color-primary-800};
+  --ods-color-primary-900: #{var.$ods-color-primary-900};
+  --ods-color-promotion: #{var.$ods-color-promotion};
+  --ods-color-success-000: #{var.$ods-color-success-000};
+  --ods-color-success-025: #{var.$ods-color-success-025};
+  --ods-color-success-050: #{var.$ods-color-success-050};
+  --ods-color-success-075: #{var.$ods-color-success-075};
+  --ods-color-success-100: #{var.$ods-color-success-100};
+  --ods-color-success-200: #{var.$ods-color-success-200};
+  --ods-color-success-300: #{var.$ods-color-success-300};
+  --ods-color-success-400: #{var.$ods-color-success-400};
+  --ods-color-success-500: #{var.$ods-color-success-500};
+  --ods-color-success-600: #{var.$ods-color-success-600};
+  --ods-color-success-700: #{var.$ods-color-success-700};
+  --ods-color-success-800: #{var.$ods-color-success-800};
+  --ods-color-success-900: #{var.$ods-color-success-900};
+  --ods-color-text: #{var.$ods-color-text};
+  --ods-color-text-disabled-default: #{var.$ods-color-text-disabled-default};
+  --ods-color-warning-000: #{var.$ods-color-warning-000};
+  --ods-color-warning-025: #{var.$ods-color-warning-025};
+  --ods-color-warning-050: #{var.$ods-color-warning-050};
+  --ods-color-warning-075: #{var.$ods-color-warning-075};
+  --ods-color-warning-100: #{var.$ods-color-warning-100};
+  --ods-color-warning-200: #{var.$ods-color-warning-200};
+  --ods-color-warning-300: #{var.$ods-color-warning-300};
+  --ods-color-warning-400: #{var.$ods-color-warning-400};
+  --ods-color-warning-500: #{var.$ods-color-warning-500};
+  --ods-color-warning-600: #{var.$ods-color-warning-600};
+  --ods-color-warning-700: #{var.$ods-color-warning-700};
+  --ods-color-warning-800: #{var.$ods-color-warning-800};
+  --ods-color-warning-900: #{var.$ods-color-warning-900};
+  --ods-font-family-code: 'Source Code Pro', arial;
+  --ods-font-family-default: 'Source Sans Pro', 'Trebuchet MS', arial, 'Segoe UI', sans-serif;
+  --ods-form-element-input-height: #{var.$ods-form-element-input-height};
+  --ods-outline-color-default: #{var.$ods-outline-color-default};
+  --ods-outline-offset: #{var.$ods-outline-offset};
+  --ods-outline-style-default: #{var.$ods-outline-style-default};
+  --ods-outline-width: #{var.$ods-outline-width};
+}

From e23cb3a4d3da387fd912730fc908d8aad84e2a89 Mon Sep 17 00:00:00 2001
From: Charles-Antoine Alba <poro@variables.fr>
Date: Thu, 2 Oct 2025 16:27:20 +0200
Subject: [PATCH 2/4] feat(theme-generator): restructure components, and
 optimize utils for improved maintainability

---
 .../themeGenerator/ThemeGenerator.tsx         | 64 +++++++--------
 .../ThemeGeneratorTreeView.tsx                | 13 ++-
 .../themeGeneratorTreeView.module.css         | 20 ++---
 .../ThemeGeneratorJSONModal.tsx}              |  6 +-
 .../themeGeneratorJSONModal.module.css}       |  0
 .../ThemeGeneratorSwitchThemeModal.tsx}       | 12 +--
 ...themeGeneratorSwitchThemeModal.module.css} |  4 +-
 .../ThemeGeneratorTreeView.tsx                | 13 ++-
 .../themeGeneratorTreeView.module.css         | 20 ++---
 .../themeGenerator/themeVariableUtils.ts      | 80 +++++++++++++++++++
 .../themeGenerator/useThemeGenerator.ts       | 74 -----------------
 11 files changed, 152 insertions(+), 154 deletions(-)
 rename packages/storybook/src/components/themeGenerator/{themeGeneratorJSON/ThemeGeneratorJSON.tsx => themeGeneratorJSONModal/ThemeGeneratorJSONModal.tsx} (91%)
 rename packages/storybook/src/components/themeGenerator/{themeGeneratorJSON/themeGeneratorJSON.module.css => themeGeneratorJSONModal/themeGeneratorJSONModal.module.css} (100%)
 rename packages/storybook/src/components/themeGenerator/{themeGeneratorModal/ThemeGeneratorModal.tsx => themeGeneratorSwitchThemeModal/ThemeGeneratorSwitchThemeModal.tsx} (79%)
 rename packages/storybook/src/components/themeGenerator/{themeGeneratorModal/themeGeneratorModal.module.css => themeGeneratorSwitchThemeModal/themeGeneratorSwitchThemeModal.module.css} (62%)
 create mode 100644 packages/storybook/src/components/themeGenerator/themeVariableUtils.ts
 delete mode 100644 packages/storybook/src/components/themeGenerator/useThemeGenerator.ts

diff --git a/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx b/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx
index 162a1d6e1..fb67ddd7a 100644
--- a/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx
+++ b/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx
@@ -1,14 +1,14 @@
 import { Splitter } from '@ark-ui/react/splitter';
 import React, { type JSX, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import * as ODSReact from '@ovhcloud/ods-react';
+import { Button, BUTTON_COLOR, BUTTON_VARIANT, Icon, ICON_NAME, Switch, type SwitchValueChangeDetail, SwitchItem } from '@ovhcloud/ods-react';
 import { ORIENTATION, OrientationSwitch } from '../sandbox/actions/OrientationSwitch';
 import styles from './themeGenerator.module.css';
 import { ThemeGeneratorTreeView } from './themeGeneratorTreeView/ThemeGeneratorTreeView';
 import { ThemeGeneratorPreview } from './themeGeneratorPreview/ThemeGeneratorPreview';
-import { parseCssVariables } from './useThemeGenerator';
-import { ThemeGeneratorModal } from './themeGeneratorModal/ThemeGeneratorModal';
-import { ThemeGeneratorJSON } from './themeGeneratorJSON/ThemeGeneratorJSON';
+import { parseCssVariables } from './themeVariableUtils';
+import { ThemeGeneratorSwitchThemeModal } from './themeGeneratorSwitchThemeModal/ThemeGeneratorSwitchThemeModal';
+import { ThemeGeneratorJSONModal } from './themeGeneratorJSONModal/ThemeGeneratorJSONModal';
 
 const ThemeGenerator = (): JSX.Element => {
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -26,23 +26,21 @@ const ThemeGenerator = (): JSX.Element => {
         setIsCustomTheme(true);
         return;
       }
-      
+
       try {
-        console.log('Selected theme:', selectedTheme);
-        
+
         // Fetch the CSS file from the static directory
         // Path: /themes/{themeName}/index.css (exposed via staticDirs in main.ts)
         const response = await fetch(`/themes/${selectedTheme}/index.css`);
-        
+
         if (!response.ok) {
           throw new Error(`Failed to fetch theme: ${response.statusText}`);
         }
-        
+
         const cssContent = await response.text();
 
         // Parse CSS variables
         const variables = parseCssVariables(cssContent);
-        console.log('Parsed variables:', Object.keys(variables).length, 'variables found');
         setEditedVariables(variables);
         setIsCustomTheme(false);
       } catch (error) {
@@ -63,7 +61,7 @@ const ThemeGenerator = (): JSX.Element => {
       ...prev,
       [name]: value,
     }));
-    
+
     // Automatically switch to custom theme when user edits a variable
     if (!isCustomTheme) {
       setSelectedTheme('custom');
@@ -77,15 +75,15 @@ const ThemeGenerator = (): JSX.Element => {
     )}>
       <div className={ styles['theme-generator__menu'] }>
         <div className={styles['theme-generator__menu__left']}>
-          <ODSReact.Button
-            variant={ ODSReact.BUTTON_VARIANT.ghost }
+          <Button
+            variant={ BUTTON_VARIANT.ghost }
             onClick={ () => setIsJsonOpen(true) }>
-            <ODSReact.Icon name={ODSReact.ICON_NAME.chevronLeftUnderscore} />
+            <Icon name={ ICON_NAME.chevronLeftUnderscore } />
             JSON
-          </ODSReact.Button>
-          <ODSReact.Switch 
+          </Button>
+          <Switch
             value={selectedTheme}
-            onValueChange={(details: { value: string }) => {
+            onValueChange={(details: SwitchValueChangeDetail) => {
               const next = details.value;
               const isLeavingCustom = isCustomTheme && next !== 'custom';
 
@@ -98,27 +96,27 @@ const ThemeGenerator = (): JSX.Element => {
               setSelectedTheme(next);
             }}
             >
-            <ODSReact.SwitchItem value="default">
+            <SwitchItem value="default">
               Default
-            </ODSReact.SwitchItem>
-            <ODSReact.SwitchItem value="developer">
+            </SwitchItem>
+            <SwitchItem value="developer">
               Developer
-            </ODSReact.SwitchItem>
-            <ODSReact.SwitchItem value="custom">
+            </SwitchItem>
+            <SwitchItem value="custom">
               Custom
-            </ODSReact.SwitchItem>
-          </ODSReact.Switch>
+            </SwitchItem>
+          </Switch>
         </div>
         <div className={styles['theme-generator__menu__right']}>
           <OrientationSwitch
             onChange={ (value) => setOrientation(value) }
             orientation={ orientation } />
 
-          <ODSReact.Button
+          <Button
             onClick={ onToggleFullscreen }
-            variant={ ODSReact.BUTTON_VARIANT.ghost }>
-            <ODSReact.Icon name={ isFullscreen ? ODSReact.ICON_NAME.shrink : ODSReact.ICON_NAME.resize } />
-          </ODSReact.Button>
+            variant={ BUTTON_VARIANT.ghost }>
+            <Icon name={ isFullscreen ? ICON_NAME.shrink : ICON_NAME.resize } />
+          </Button>
         </div>
       </div>
     <Splitter.Root
@@ -126,7 +124,7 @@ const ThemeGenerator = (): JSX.Element => {
       orientation={ orientation }
       panels={ [{ id: 'tree-view', minSize: 10 }, { id: 'preview', minSize: 10 }] }>
       <Splitter.Panel id="tree-view">
-        <ThemeGeneratorTreeView 
+        <ThemeGeneratorTreeView
           variables={editedVariables}
           onVariableChange={onVariableChange} />
       </Splitter.Panel>
@@ -135,13 +133,13 @@ const ThemeGenerator = (): JSX.Element => {
         asChild
         aria-label="Resize"
         id="tree-view:preview">
-        <ODSReact.Button
+        <Button
           className={ classNames(
             styles['theme-generator__container__resize'],
             { [styles['theme-generator__container__resize--horizontal']]: orientation === ORIENTATION.horizontal },
             { [styles['theme-generator__container__resize--vertical']]: orientation === ORIENTATION.vertical },
           )}
-          color={ ODSReact.BUTTON_COLOR.neutral } />
+          color={ BUTTON_COLOR.neutral } />
       </Splitter.ResizeTrigger>
 
       <Splitter.Panel id="preview">
@@ -151,7 +149,7 @@ const ThemeGenerator = (): JSX.Element => {
       </Splitter.Panel>
     </Splitter.Root>
 
-    <ThemeGeneratorModal
+    <ThemeGeneratorSwitchThemeModal
       open={ isConfirmOpen }
       targetTheme={ pendingTheme }
       onConfirm={() => {
@@ -167,7 +165,7 @@ const ThemeGenerator = (): JSX.Element => {
       }}
     />
 
-    <ThemeGeneratorJSON
+    <ThemeGeneratorJSONModal
       open={ isJsonOpen }
       variables={ editedVariables }
       onClose={ () => setIsJsonOpen(false) }
diff --git a/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/ThemeGeneratorTreeView.tsx b/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/ThemeGeneratorTreeView.tsx
index 703391662..db00fa5f2 100644
--- a/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/ThemeGeneratorTreeView.tsx
+++ b/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/ThemeGeneratorTreeView.tsx
@@ -1,10 +1,7 @@
-import { Spinner, Text, TreeView, TreeViewNode, TreeViewNodes  } from '@ovhcloud/ods-react';
+import { Spinner, Text, TreeView, TreeViewNode, TreeViewNodes, SPINNER_SIZE, TEXT_PRESET } from '@ovhcloud/ods-react';
 import React, { useMemo } from 'react';
-import { categorizeCssVariables } from '../useThemeGenerator';
+import { categorizeCssVariables } from '../themeVariableUtils';
 import styles from './themeGeneratorTreeView.module.css';
-import { SPINNER_SIZE } from '../../../../../ods-react/src/components/spinner/src/constants/spinner-size';
-import { TEXT_PRESET } from '../../../../../ods-react/src/components/text/src/constants/text-preset';
-
 interface TreeItem {
   id: string;
   name: string;
@@ -62,18 +59,18 @@ const ThemeGeneratorTreeView = ({ variables, onVariableChange }: ThemeGeneratorT
     <TreeView
       className={styles['theme-generator-tree-view']}
       items={items}
-      onValueChange={() => {}}>
+      >
       <TreeViewNodes>
         {items.map((item) => (
           <TreeViewNode key={item.id} item={item}>
             {({ item, isBranch }: { item: TreeItem; isBranch: boolean }) => (
               <div className={styles['theme-generator-tree-view__item']}>
-                <Text className={styles['theme-generator-tree-view__name']}>
+                <Text className={styles['theme-generator-tree-view__item__name']}>
                   {item.name}
                 </Text>
                 {!isBranch && item.value && (
                   <input
-                    className={styles['theme-generator-tree-view__color-input']}
+                    className={styles['theme-generator-tree-view__item__color-input']}
                     type="color"
                     onClick={(e) => {
                       e.stopPropagation();
diff --git a/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/themeGeneratorTreeView.module.css b/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/themeGeneratorTreeView.module.css
index f3b487738..1b01aaa34 100644
--- a/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/themeGeneratorTreeView.module.css
+++ b/packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/themeGeneratorTreeView.module.css
@@ -1,27 +1,27 @@
 .theme-generator-tree-view {
+  padding: 1rem;
   height: 100%;
   overflow: auto;
-  padding: 1rem;
 }
 
 .theme-generator-tree-view__item {
   display: flex;
+  gap: 0.5rem;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
   width: 100%;
 }
 
-.theme-generator-tree-view__name {
-  color: var(--ods-color-text);
+.theme-generator-tree-view__item__name {
   flex: 1;
+  color: var(--ods-color-text);
 }
 
-.theme-generator-tree-view__color-input {
-  cursor: pointer;
-  height: 26px;
-  width: 24px;
-  padding: 0;
+.theme-generator-tree-view__item__color-input {
   border: none;
   background-color: transparent;
-}
\ No newline at end of file
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 26px;
+}
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorJSON/ThemeGeneratorJSON.tsx b/packages/storybook/src/components/themeGenerator/themeGeneratorJSONModal/ThemeGeneratorJSONModal.tsx
similarity index 91%
rename from packages/storybook/src/components/themeGenerator/themeGeneratorJSON/ThemeGeneratorJSON.tsx
rename to packages/storybook/src/components/themeGenerator/themeGeneratorJSONModal/ThemeGeneratorJSONModal.tsx
index daf9aa697..08e1066bf 100644
--- a/packages/storybook/src/components/themeGenerator/themeGeneratorJSON/ThemeGeneratorJSON.tsx
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorJSONModal/ThemeGeneratorJSONModal.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState, type JSX } from 'react';
 import { Button, BUTTON_VARIANT, Modal, ModalBody, ModalContent, Text, TEXT_PRESET } from '@ovhcloud/ods-react';
-import styles from './themeGeneratorJSON.module.css';
+import styles from './themeGeneratorJSONModal.module.css';
 
 interface ThemeGeneratorJSONProps {
   open: boolean;
@@ -9,7 +9,7 @@ interface ThemeGeneratorJSONProps {
   onReplace: (nextVariables: Record<string, string>) => void;
 }
 
-const ThemeGeneratorJSON = ({ open, variables, onClose, onReplace }: ThemeGeneratorJSONProps): JSX.Element => {
+const ThemeGeneratorJSONModal = ({ open, variables, onClose, onReplace }: ThemeGeneratorJSONProps): JSX.Element => {
   const initialText = useMemo(() => JSON.stringify(variables, null, 2), [variables]);
   const [textValue, setTextValue] = useState(initialText);
   const [error, setError] = useState<string | null>(null);
@@ -81,6 +81,6 @@ const ThemeGeneratorJSON = ({ open, variables, onClose, onReplace }: ThemeGenera
   );
 };
 
-export { ThemeGeneratorJSON };
+export { ThemeGeneratorJSONModal };
 
 
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorJSON/themeGeneratorJSON.module.css b/packages/storybook/src/components/themeGenerator/themeGeneratorJSONModal/themeGeneratorJSONModal.module.css
similarity index 100%
rename from packages/storybook/src/components/themeGenerator/themeGeneratorJSON/themeGeneratorJSON.module.css
rename to packages/storybook/src/components/themeGenerator/themeGeneratorJSONModal/themeGeneratorJSONModal.module.css
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorModal/ThemeGeneratorModal.tsx b/packages/storybook/src/components/themeGenerator/themeGeneratorSwitchThemeModal/ThemeGeneratorSwitchThemeModal.tsx
similarity index 79%
rename from packages/storybook/src/components/themeGenerator/themeGeneratorModal/ThemeGeneratorModal.tsx
rename to packages/storybook/src/components/themeGenerator/themeGeneratorSwitchThemeModal/ThemeGeneratorSwitchThemeModal.tsx
index 9fbdb4f4d..930586305 100644
--- a/packages/storybook/src/components/themeGenerator/themeGeneratorModal/ThemeGeneratorModal.tsx
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorSwitchThemeModal/ThemeGeneratorSwitchThemeModal.tsx
@@ -8,21 +8,21 @@ import {
   ModalContent,
 } from '@ovhcloud/ods-react';
 import { Text, TEXT_PRESET } from '@ovhcloud/ods-react';
-import styles from './themeGeneratorModal.module.css';
+import styles from './themeGeneratorSwitchThemeModal.module.css';
 
-interface ThemeGeneratorModalProps {
+interface ThemeGeneratorSwitchThemeModalProps {
   open: boolean;
   targetTheme?: string | null;
   onConfirm: () => void;
   onCancel: () => void;
 }
 
-const ThemeGeneratorModal = ({
+const ThemeGeneratorSwitchThemeModal = ({
   open,
   targetTheme,
   onConfirm,
   onCancel,
-}: ThemeGeneratorModalProps): JSX.Element => {
+}: ThemeGeneratorSwitchThemeModalProps): JSX.Element => {
   function onOpenChange({ open }: { open: boolean }) {
     if (!open) {
       onCancel();
@@ -45,7 +45,7 @@ const ThemeGeneratorModal = ({
             You have unsaved customizations. Switching to { targetLabel || 'another theme' } will discard them.
           </Text>
 
-          <div className={ styles.actions }>
+          <div className={ styles['theme-generator-switch-theme-modal__actions'] }>
             <Button onClick={ onConfirm } color={ BUTTON_COLOR.critical }>
               Switch to { targetLabel || 'theme' }
             </Button>
@@ -60,6 +60,6 @@ const ThemeGeneratorModal = ({
   );
 };
 
-export { ThemeGeneratorModal };
+export { ThemeGeneratorSwitchThemeModal };
 
 
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorModal/themeGeneratorModal.module.css b/packages/storybook/src/components/themeGenerator/themeGeneratorSwitchThemeModal/themeGeneratorSwitchThemeModal.module.css
similarity index 62%
rename from packages/storybook/src/components/themeGenerator/themeGeneratorModal/themeGeneratorModal.module.css
rename to packages/storybook/src/components/themeGenerator/themeGeneratorSwitchThemeModal/themeGeneratorSwitchThemeModal.module.css
index 4b018e992..dd9703b47 100644
--- a/packages/storybook/src/components/themeGenerator/themeGeneratorModal/themeGeneratorModal.module.css
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorSwitchThemeModal/themeGeneratorSwitchThemeModal.module.css
@@ -1,8 +1,8 @@
-.actions {
+.theme-generator-switch-theme-modal__actions {
   display: flex;
-  margin-top: 16px;
   gap: 8px;
   justify-content: end;
+  margin-top: 16px;
 }
 
 
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/ThemeGeneratorTreeView.tsx b/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/ThemeGeneratorTreeView.tsx
index 703391662..db00fa5f2 100644
--- a/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/ThemeGeneratorTreeView.tsx
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/ThemeGeneratorTreeView.tsx
@@ -1,10 +1,7 @@
-import { Spinner, Text, TreeView, TreeViewNode, TreeViewNodes  } from '@ovhcloud/ods-react';
+import { Spinner, Text, TreeView, TreeViewNode, TreeViewNodes, SPINNER_SIZE, TEXT_PRESET } from '@ovhcloud/ods-react';
 import React, { useMemo } from 'react';
-import { categorizeCssVariables } from '../useThemeGenerator';
+import { categorizeCssVariables } from '../themeVariableUtils';
 import styles from './themeGeneratorTreeView.module.css';
-import { SPINNER_SIZE } from '../../../../../ods-react/src/components/spinner/src/constants/spinner-size';
-import { TEXT_PRESET } from '../../../../../ods-react/src/components/text/src/constants/text-preset';
-
 interface TreeItem {
   id: string;
   name: string;
@@ -62,18 +59,18 @@ const ThemeGeneratorTreeView = ({ variables, onVariableChange }: ThemeGeneratorT
     <TreeView
       className={styles['theme-generator-tree-view']}
       items={items}
-      onValueChange={() => {}}>
+      >
       <TreeViewNodes>
         {items.map((item) => (
           <TreeViewNode key={item.id} item={item}>
             {({ item, isBranch }: { item: TreeItem; isBranch: boolean }) => (
               <div className={styles['theme-generator-tree-view__item']}>
-                <Text className={styles['theme-generator-tree-view__name']}>
+                <Text className={styles['theme-generator-tree-view__item__name']}>
                   {item.name}
                 </Text>
                 {!isBranch && item.value && (
                   <input
-                    className={styles['theme-generator-tree-view__color-input']}
+                    className={styles['theme-generator-tree-view__item__color-input']}
                     type="color"
                     onClick={(e) => {
                       e.stopPropagation();
diff --git a/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/themeGeneratorTreeView.module.css b/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/themeGeneratorTreeView.module.css
index f3b487738..1b01aaa34 100644
--- a/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/themeGeneratorTreeView.module.css
+++ b/packages/storybook/src/components/themeGenerator/themeGeneratorTreeView/themeGeneratorTreeView.module.css
@@ -1,27 +1,27 @@
 .theme-generator-tree-view {
+  padding: 1rem;
   height: 100%;
   overflow: auto;
-  padding: 1rem;
 }
 
 .theme-generator-tree-view__item {
   display: flex;
+  gap: 0.5rem;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
   width: 100%;
 }
 
-.theme-generator-tree-view__name {
-  color: var(--ods-color-text);
+.theme-generator-tree-view__item__name {
   flex: 1;
+  color: var(--ods-color-text);
 }
 
-.theme-generator-tree-view__color-input {
-  cursor: pointer;
-  height: 26px;
-  width: 24px;
-  padding: 0;
+.theme-generator-tree-view__item__color-input {
   border: none;
   background-color: transparent;
-}
\ No newline at end of file
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 26px;
+}
diff --git a/packages/storybook/src/components/themeGenerator/themeVariableUtils.ts b/packages/storybook/src/components/themeGenerator/themeVariableUtils.ts
new file mode 100644
index 000000000..276a0621e
--- /dev/null
+++ b/packages/storybook/src/components/themeGenerator/themeVariableUtils.ts
@@ -0,0 +1,80 @@
+const parseCssVariables = (cssContent: string): Record<string, string> => {
+  const variables: Record<string, string> = {};
+  
+  const extractVariablesFromRoot = (content: string, startIndex: number = 0): void => {
+    const rootMatch = /:root\s*\{([^}]+)\}/g;
+    rootMatch.lastIndex = startIndex;
+    const match = rootMatch.exec(content);
+    
+    if (!match) return;
+    
+    const rootContent = match[1];
+    extractVariablesFromContent(rootContent);
+    
+    extractVariablesFromRoot(content, rootMatch.lastIndex);
+  };
+  
+  const extractVariablesFromContent = (content: string, startIndex: number = 0): void => {
+    const varRegex = /(--[^:]+):\s*([^;]+);/g;
+    varRegex.lastIndex = startIndex;
+    const match = varRegex.exec(content);
+    
+    if (!match) return;
+    
+    const propertyName = match[1].trim();
+    const propertyValue = match[2].trim();
+    
+    // Only include --ods-* variables
+    if (propertyName.startsWith('--ods-')) {
+      variables[propertyName] = propertyValue;
+    }
+    
+    // Recursively find next variable
+    extractVariablesFromContent(content, varRegex.lastIndex);
+  };
+  
+  extractVariablesFromRoot(cssContent);
+  return variables;
+};
+
+interface CategorizedVariables {
+  colors: Array<{ name: string; value: string }>;
+  border: Array<{ name: string; value: string }>;
+  font: Array<{ name: string; value: string }>;
+  form: Array<{ name: string; value: string }>;
+  outline: Array<{ name: string; value: string }>;
+  other: Array<{ name: string; value: string }>;
+}
+
+const categorizeCssVariables = (variables: Record<string, string>): CategorizedVariables => {
+  const categories: CategorizedVariables = {
+    colors: [],
+    border: [],
+    font: [],
+    form: [],
+    outline: [],
+    other: [],
+  };
+
+  Object.entries(variables).forEach(([name, value]) => {
+    const variable = { name, value };
+    
+    if (name.includes('color')) {
+      categories.colors.push(variable);
+    } else if (name.includes('border')) {
+      categories.border.push(variable);
+    } else if (name.includes('font')) {
+      categories.font.push(variable);
+    } else if (name.includes('form')) {
+      categories.form.push(variable);
+    } else if (name.includes('outline')) {
+      categories.outline.push(variable);
+    } else {
+      categories.other.push(variable);
+    }
+  });
+
+  return categories;
+};
+
+export { categorizeCssVariables, type CategorizedVariables, parseCssVariables };
diff --git a/packages/storybook/src/components/themeGenerator/useThemeGenerator.ts b/packages/storybook/src/components/themeGenerator/useThemeGenerator.ts
deleted file mode 100644
index 4b6bbc777..000000000
--- a/packages/storybook/src/components/themeGenerator/useThemeGenerator.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Parse CSS content and extract CSS custom properties from :root selector
- */
-export const parseCssVariables = (cssContent: string): Record<string, string> => {
-  const variables: Record<string, string> = {};
-  
-  // Match :root { ... } blocks
-  const rootRegex = /:root\s*\{([^}]+)\}/g;
-  let match;
-  
-  while ((match = rootRegex.exec(cssContent)) !== null) {
-    const rootContent = match[1];
-    
-    // Extract CSS custom properties (--property-name: value;)
-    const varRegex = /(--[^:]+):\s*([^;]+);/g;
-    let varMatch;
-    
-    while ((varMatch = varRegex.exec(rootContent)) !== null) {
-      const propertyName = varMatch[1].trim();
-      const propertyValue = varMatch[2].trim();
-      
-      // Only include --ods-* variables
-      if (propertyName.startsWith('--ods-')) {
-        variables[propertyName] = propertyValue;
-      }
-    }
-  }
-  
-  return variables;
-};
-
-/**
- * Categorize CSS variables by type
- */
-export interface CategorizedVariables {
-  colors: Array<{ name: string; value: string }>;
-  border: Array<{ name: string; value: string }>;
-  font: Array<{ name: string; value: string }>;
-  form: Array<{ name: string; value: string }>;
-  outline: Array<{ name: string; value: string }>;
-  other: Array<{ name: string; value: string }>;
-}
-
-export const categorizeCssVariables = (variables: Record<string, string>): CategorizedVariables => {
-  const categories: CategorizedVariables = {
-    colors: [],
-    border: [],
-    font: [],
-    form: [],
-    outline: [],
-    other: [],
-  };
-
-  Object.entries(variables).forEach(([name, value]) => {
-    const variable = { name, value };
-    
-    if (name.includes('color')) {
-      categories.colors.push(variable);
-    } else if (name.includes('border')) {
-      categories.border.push(variable);
-    } else if (name.includes('font')) {
-      categories.font.push(variable);
-    } else if (name.includes('form')) {
-      categories.form.push(variable);
-    } else if (name.includes('outline')) {
-      categories.outline.push(variable);
-    } else {
-      categories.other.push(variable);
-    }
-  });
-
-  return categories;
-};
-

From 69adb495070bb8a4da97609ed72d628c1f47e691 Mon Sep 17 00:00:00 2001
From: Charles-Antoine Alba <poro@variables.fr>
Date: Fri, 3 Oct 2025 14:21:46 +0200
Subject: [PATCH 3/4] feat(theme-generator): replace CSS variable parsing with
 direct token imports for themes

---
 package.json                                  |  3 +-
 .../themeGenerator/ThemeGenerator.tsx         | 40 +++++-------------
 .../themeGenerator/themeVariableUtils.ts      | 41 +------------------
 packages/themes/package.json                  |  3 ++
 packages/themes/src/index.ts                  |  1 +
 5 files changed, 16 insertions(+), 72 deletions(-)

diff --git a/package.json b/package.json
index 37d706650..c58ea1258 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,5 @@
   },
   "resolutions": {
     "@types/scheduler": "< 0.23.0"
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  }
 }
diff --git a/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx b/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx
index fb67ddd7a..4cdd89128 100644
--- a/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx
+++ b/packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx
@@ -4,11 +4,12 @@ import classNames from 'classnames';
 import { Button, BUTTON_COLOR, BUTTON_VARIANT, Icon, ICON_NAME, Switch, type SwitchValueChangeDetail, SwitchItem } from '@ovhcloud/ods-react';
 import { ORIENTATION, OrientationSwitch } from '../sandbox/actions/OrientationSwitch';
 import styles from './themeGenerator.module.css';
-import { ThemeGeneratorTreeView } from './themeGeneratorTreeView/ThemeGeneratorTreeView';
+import { ThemeGeneratorTreeView } from './ThemeGeneratorTreeView/ThemeGeneratorTreeView';
 import { ThemeGeneratorPreview } from './themeGeneratorPreview/ThemeGeneratorPreview';
-import { parseCssVariables } from './themeVariableUtils';
 import { ThemeGeneratorSwitchThemeModal } from './themeGeneratorSwitchThemeModal/ThemeGeneratorSwitchThemeModal';
 import { ThemeGeneratorJSONModal } from './themeGeneratorJSONModal/ThemeGeneratorJSONModal';
+import defaultTokens from '@ovhcloud/ods-themes/default/tokens';
+import developerTokens from '@ovhcloud/ods-themes/developer/tokens';
 
 const ThemeGenerator = (): JSX.Element => {
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -21,34 +22,14 @@ const ThemeGenerator = (): JSX.Element => {
   const [isJsonOpen, setIsJsonOpen] = useState(false);
 
   useEffect(() => {
-    const loadTheme = async () => {
-      if (selectedTheme === 'custom') {
-        setIsCustomTheme(true);
-        return;
-      }
-
-      try {
-
-        // Fetch the CSS file from the static directory
-        // Path: /themes/{themeName}/index.css (exposed via staticDirs in main.ts)
-        const response = await fetch(`/themes/${selectedTheme}/index.css`);
-
-        if (!response.ok) {
-          throw new Error(`Failed to fetch theme: ${response.statusText}`);
-        }
-
-        const cssContent = await response.text();
-
-        // Parse CSS variables
-        const variables = parseCssVariables(cssContent);
-        setEditedVariables(variables);
-        setIsCustomTheme(false);
-      } catch (error) {
-        console.error('Failed to load theme:', error);
-      }
-    };
+    if (selectedTheme === 'custom') {
+      setIsCustomTheme(true);
+      return;
+    }
 
-    loadTheme();
+    const themeTokens = selectedTheme === 'developer' ? developerTokens : defaultTokens;
+    setEditedVariables(themeTokens.root);
+    setIsCustomTheme(false);
   }, [selectedTheme]);
 
 
@@ -62,7 +43,6 @@ const ThemeGenerator = (): JSX.Element => {
       [name]: value,
     }));
 
-    // Automatically switch to custom theme when user edits a variable
     if (!isCustomTheme) {
       setSelectedTheme('custom');
       setIsCustomTheme(true);
diff --git a/packages/storybook/src/components/themeGenerator/themeVariableUtils.ts b/packages/storybook/src/components/themeGenerator/themeVariableUtils.ts
index 276a0621e..0905b7022 100644
--- a/packages/storybook/src/components/themeGenerator/themeVariableUtils.ts
+++ b/packages/storybook/src/components/themeGenerator/themeVariableUtils.ts
@@ -1,42 +1,3 @@
-const parseCssVariables = (cssContent: string): Record<string, string> => {
-  const variables: Record<string, string> = {};
-  
-  const extractVariablesFromRoot = (content: string, startIndex: number = 0): void => {
-    const rootMatch = /:root\s*\{([^}]+)\}/g;
-    rootMatch.lastIndex = startIndex;
-    const match = rootMatch.exec(content);
-    
-    if (!match) return;
-    
-    const rootContent = match[1];
-    extractVariablesFromContent(rootContent);
-    
-    extractVariablesFromRoot(content, rootMatch.lastIndex);
-  };
-  
-  const extractVariablesFromContent = (content: string, startIndex: number = 0): void => {
-    const varRegex = /(--[^:]+):\s*([^;]+);/g;
-    varRegex.lastIndex = startIndex;
-    const match = varRegex.exec(content);
-    
-    if (!match) return;
-    
-    const propertyName = match[1].trim();
-    const propertyValue = match[2].trim();
-    
-    // Only include --ods-* variables
-    if (propertyName.startsWith('--ods-')) {
-      variables[propertyName] = propertyValue;
-    }
-    
-    // Recursively find next variable
-    extractVariablesFromContent(content, varRegex.lastIndex);
-  };
-  
-  extractVariablesFromRoot(cssContent);
-  return variables;
-};
-
 interface CategorizedVariables {
   colors: Array<{ name: string; value: string }>;
   border: Array<{ name: string; value: string }>;
@@ -77,4 +38,4 @@ const categorizeCssVariables = (variables: Record<string, string>): CategorizedV
   return categories;
 };
 
-export { categorizeCssVariables, type CategorizedVariables, parseCssVariables };
+export { categorizeCssVariables, type CategorizedVariables };
diff --git a/packages/themes/package.json b/packages/themes/package.json
index 00c2e8f8a..68bba5af3 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -22,6 +22,9 @@
     },
     "./default/tokens": {
       "default": "./dist/default/tokens.json"
+    },
+    "./developer/tokens": {
+      "default": "./dist/developer/tokens.json"
     }
   },
   "types": "dist/index.d.ts",
diff --git a/packages/themes/src/index.ts b/packages/themes/src/index.ts
index deb3f61fc..87be46e71 100644
--- a/packages/themes/src/index.ts
+++ b/packages/themes/src/index.ts
@@ -1,5 +1,6 @@
 enum ODS_THEME {
   default = 'default',
+  developer = 'developer',
 }
 
 const ODS_THEMES = Object.freeze(Object.values(ODS_THEME));

From dab562b298e77f72a2be1bab33f9a64d86c4a137 Mon Sep 17 00:00:00 2001
From: Charles-Antoine Alba <poro@variables.fr>
Date: Wed, 15 Oct 2025 09:54:24 +0200
Subject: [PATCH 4/4] feat(theme-generator): replace CSS variable parsing with
 direct token imports for themes

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c58ea1258..37d706650 100644
--- a/package.json
+++ b/package.json
@@ -78,5 +78,6 @@
   },
   "resolutions": {
     "@types/scheduler": "< 0.23.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }