refactor(theme-generator): replace culori with @ant-design/colors

Author: var-poro

packages/storybook/.storybook/main.ts

@@ -34,7 +34,6 @@ const config: StorybookConfig = {
   `,
   staticDirs: [
     '../assets',
-    { from: '../../themes/dist', to: '/themes' },
     ...getCodeEditorStaticDirs(__filename)
   ],
   stories: [

packages/storybook/package.json

@@ -11,11 +11,11 @@
     "start": "yarn generate:versions && storybook dev -p 6006 --no-open"
   },
   "dependencies": {
+    "@ant-design/colors": "7.1.0",
     "@ark-ui/react": "5.25.1",
     "@ovhcloud/ods-react": "19.2.1",
     "@ovhcloud/ods-themes": "19.2.1",
     "classnames": "2.5.1",
-    "culori": "4.0.2",
     "lz-string": "1.5.0",
     "prettier": "3.6.2",
     "react": "18.2.0",
@@ -30,7 +30,6 @@
     "@storybook/react": "8.6.12",
     "@storybook/react-vite": "8.6.12",
     "@storybook/types": "8.6.12",
-    "@types/culori": "4.0.1",
     "custom-elements-manifest": "1.0.0",
     "node-fetch": "2.7.0",
     "prop-types": "15.8.1",

packages/storybook/src/components/themeGenerator/ThemeGeneratorColorPicker/ThemeGeneratorColorPicker.tsx

@@ -28,10 +28,14 @@ const formatColorValue = (colorValue: any): string => {
 };
 
 const parseColorWithRoundedAlpha = (colorString: string) => {
-  const color = parseColor(colorString);
-  const alpha = color.getChannelValue('alpha');
-  const roundedAlpha = Math.round(alpha * 100) / 100;
-  return color.withChannelValue('alpha', roundedAlpha);
+  try {
+    const color = parseColor(colorString.startsWith('var(') ? '#000000' : colorString);
+    const alpha = color.getChannelValue('alpha');
+    const roundedAlpha = Math.round(alpha * 100) / 100;
+    return color.withChannelValue('alpha', roundedAlpha);
+  } catch {
+    return parseColor('#000000');
+  }
 };
 
 const ThemeGeneratorColorPicker = ({
@@ -85,8 +89,14 @@ const ThemeGeneratorColorPicker = ({
           {label}
         </ColorPicker.Label>
       )}
-
       <ColorPicker.Control className={styles['theme-generator-color-picker__control']}>
+        <ColorPicker.ChannelInput
+          asChild
+          channel="hex"
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          <Input type="text" />
+        </ColorPicker.ChannelInput>
         <ColorPicker.Trigger className={styles['theme-generator-color-picker__control__trigger']}>
           <ColorPicker.ValueSwatch className={styles['theme-generator-color-picker__control__trigger__swatch']} />
         </ColorPicker.Trigger>

packages/storybook/src/components/themeGenerator/ThemeGeneratorColorPicker/index.ts

@@ -1,6 +1,6 @@
 .theme-generator-color-picker {
   display: flex;
-  gap: 0.5rem;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
   width: 100%;
@@ -28,7 +28,7 @@
 }
 
 .theme-generator-color-picker__control__trigger:disabled {
-  opacity: 0.5;
+  opacity: 1;
   cursor: not-allowed;
 }
 
@@ -128,4 +128,3 @@
   gap: 8px;
   min-width: 200px;
 }
-

packages/storybook/src/components/themeGenerator/ThemeGeneratorColorPicker/themeGeneratorColorPicker.module.css

@@ -1,7 +1,7 @@
 import { Spinner, Text, TreeView, TreeViewNode, TreeViewNodes, SPINNER_SIZE, TEXT_PRESET } from '@ovhcloud/ods-react';
 import React, { useMemo } from 'react';
 import { categorizeCssVariables } from '../themeVariableUtils';
-import { ThemeGeneratorColorPicker } from '../ThemeGeneratorColorPicker';
+import { ThemeGeneratorColorPicker } from '../ThemeGeneratorColorPicker/ThemeGeneratorColorPicker';
 import styles from './themeGeneratorTreeView.module.css';
 
 interface TreeItem {

packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/ThemeGeneratorTreeView.tsx

@@ -6,14 +6,14 @@
 
 .theme-generator-tree-view__loading {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   margin: 16px;
 }
 
 .theme-generator-tree-view__item {
   display: flex;
-  gap: 0.5rem;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
   width: 100%;

packages/storybook/src/components/themeGenerator/ThemeGeneratorTreeView/themeGeneratorTreeView.module.css

@@ -52,7 +52,7 @@
 }
 
 .theme-generator__container__resize--vertical {
-  margin: 2px 16px ;
+  margin: 2px 16px;
   height: 4px;
   min-height: auto;
 }

packages/storybook/src/components/themeGenerator/themeGenerator.module.css

@@ -82,5 +82,3 @@ const ThemeGeneratorJSONModal = ({ open, variables, onClose, onReplace }: ThemeG
 };
 
 export { ThemeGeneratorJSONModal };
-
-

packages/storybook/src/components/themeGenerator/themeGeneratorJSONModal/ThemeGeneratorJSONModal.tsx

@@ -25,5 +25,3 @@
 .theme-generator-json-modal__error {
   color: var(--ods-color-critical-600);
 }
-
-