color-module/src/schemes/material_design_2/baseline.rs

@@ -75,7 +75,7 @@ impl M2BaselineColors {
         variable_lines.push(format!("--color-{}-shadow: #{};", prefix, self.shadow));
 
         for (name, color_set) in &self.custom_colors {
-            variable_lines.extend(color_set.to_css_variable(&prefix, &name.to_lowercase()));
+            variable_lines.extend(color_set.to_css_variable(&prefix, name));
         }
 
         variable_lines
@@ -93,7 +93,7 @@ impl M2BaselineColors {
         variable_lines.push(format!("$color-{}-shadow: #{};", prefix, self.shadow));
 
         for (name, color_set) in &self.custom_colors {
-            variable_lines.extend(color_set.to_scss_variable(&prefix, &name.to_lowercase()));
+            variable_lines.extend(color_set.to_scss_variable(&prefix, name));
         }
 
         variable_lines
@@ -111,7 +111,7 @@ impl M2BaselineColors {
         variable_lines.push(format!("{}Shadow: '#{}',", prefix, self.shadow));
 
         for (name, color_set) in &self.custom_colors {
-            variable_lines.extend(color_set.to_javascript_object(&prefix, &name.to_lowercase()));
+            variable_lines.extend(color_set.to_javascript_object(&prefix, name));
         }
 
         variable_lines

color-module/src/schemes/material_design_3/baseline.rs

@@ -125,7 +125,7 @@ impl M3BaselineColors {
         css_variables.push(format!("--color-{}-scrim: #{};", prefix, self.scrim));
         css_variables.push(format!("--color-{}-shadow: #{};", prefix, self.shadow));
         for (name, color_set) in &self.customs {
-            css_variables.extend(color_set.to_css_variables(prefix, &name.to_lowercase()));
+            css_variables.extend(color_set.to_css_variables(prefix, name));
         }
 
         css_variables
@@ -148,7 +148,7 @@ impl M3BaselineColors {
         scss_variables.push(format!("$color-{}-scrim: #{};", prefix, self.scrim));
         scss_variables.push(format!("$color-{}-shadow: #{};", prefix, self.shadow));
         for (name, color_set) in &self.customs {
-            scss_variables.extend(color_set.to_scss_variables(prefix, &name.to_lowercase()));
+            scss_variables.extend(color_set.to_scss_variables(prefix, name));
         }
 
         scss_variables
@@ -177,8 +177,7 @@ impl M3BaselineColors {
         js_object_fields.push(format!("{}Scrim: '#{}',", prefix, self.scrim));
         js_object_fields.push(format!("{}Shadow: '#{}',", prefix, self.shadow));
         for (name, color_set) in &self.customs {
-            js_object_fields
+            js_object_fields.extend(color_set.to_javascript_object_fields(prefix, name));
-                .extend(color_set.to_javascript_object_fields(prefix, &name.to_lowercase()));
         }
 
         js_object_fields

color-module/src/schemes/swatch_style/mod.rs

@@ -84,10 +84,10 @@ impl SchemeExport for SwatchScheme {
         let mut variables = Vec::new();
 
         for (name, swatch) in &self.light {
-            variables.extend(swatch.to_css_variables("light", &name.to_lowercase()));
+            variables.extend(swatch.to_css_variables("light", name));
         }
         for (name, swatch) in &self.dark {
-            variables.extend(swatch.to_css_variables("dark", &name.to_lowercase()));
+            variables.extend(swatch.to_css_variables("dark", name));
         }
 
         variables.join("\n")
@@ -97,10 +97,10 @@ impl SchemeExport for SwatchScheme {
         let mut variables = Vec::new();
 
         for (name, swatch) in &self.light {
-            variables.extend(swatch.to_scss_variables("light", &name.to_lowercase()));
+            variables.extend(swatch.to_scss_variables("light", name));
         }
         for (name, swatch) in &self.dark {
-            variables.extend(swatch.to_scss_variables("dark", &name.to_lowercase()));
+            variables.extend(swatch.to_scss_variables("dark", name));
         }
 
         variables.join("\n")
@@ -114,7 +114,7 @@ impl SchemeExport for SwatchScheme {
         for (name, swatch) in &self.light {
             object.extend(
                 swatch
-                    .to_javascript_fields("light", &name.to_lowercase())
+                    .to_javascript_fields("light", name)
                     .iter()
                     .map(|s| format!("    {}", s)),
             );
@@ -125,7 +125,7 @@ impl SchemeExport for SwatchScheme {
         for (name, swatch) in &self.dark {
             object.extend(
                 swatch
-                    .to_javascript_fields("dark", &name.to_lowercase())
+                    .to_javascript_fields("dark", name)
                     .iter()
                     .map(|s| format!("    {}", s)),
             );

src/components/Tab.module.css

@@ -18,9 +18,5 @@
     &:hover {
       color: var(--color-primary-hover);
     }
-    &.disabled {
-      color: var(--color-primary-disabled);
-      cursor: not-allowed;
-    }
   }
 }

src/components/Tab.tsx

@@ -3,30 +3,20 @@ import { isEqual, isNil } from 'lodash-es';
 import { useCallback, useEffect, useState } from 'react';
 import styles from './Tab.module.css';
 
-type TabOption = {
-  title: string;
-  id: unknown;
-};
-
 type TabProps = {
-  tabs: TabOption[];
+  tabs: { title: string; id: unknown }[];
   activeTab?: unknown;
-  onActive?: (id: TabOption['id']) => void;
+  onActive?: (id: unknown) => void;
-  disabled?: { [d: keyof TabOption['id']]: boolean };
 };
 
-export function Tab({ tabs = [], activeTab, onActive, disabled }: TabProps) {
+export function Tab({ tabs = [], activeTab, onActive }: TabProps) {
   const [active, setActive] = useState(() =>
     isNil(activeTab) ? 0 : tabs.findIndex((tab) => isEqual(tab.id, activeTab)),
   );
-  const handleActivate = useCallback(
+  const handleActivate = useCallback((index: number) => {
-    (index: number) => {
+    setActive(index);
-      if (disabled?.[tabs[index].id] ?? false) return;
+    onActive?.(tabs[index].id);
-      setActive(index);
+  }, []);
-      onActive?.(tabs[index].id);
-    },
-    [tabs, onActive, disabled],
-  );
 
   useEffect(() => {
     const activeIndex = tabs.findIndex((tab) => isEqual(tab.id, activeTab));
@@ -40,11 +30,7 @@ export function Tab({ tabs = [], activeTab, onActive, disabled }: TabProps) {
       {tabs.map((tab, index) => (
         <div
           key={`tab_${index}_${tab.id}`}
-          className={cx(
+          className={cx(styles.tab, isEqual(index, active) && styles.actived)}
-            styles.tab,
-            isEqual(index, active) && styles.actived,
-            (disabled?.[tab.id] ?? false) && styles.disabled,
-          )}
           onClick={() => handleActivate(index)}>
           {tab.title}
         </div>

src/material-3-scheme.ts

@@ -64,7 +64,7 @@ export type MaterialDesign3DynamicSchemeSource = {
   error: string | null;
   custom_colors?: Record<string, string>;
   variant: number | null;
-  contrastLevel: number | null;
+  constrastLevel: number | null;
   harmonizeCustoms: boolean | null;
 };
 

src/page-components/scheme/M2Scheme.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { MaterialDesign2SchemeStorage } from '../../material-2-scheme';
 import { SchemeContent } from '../../models';
-import { isNilOrEmpty } from '../../utls';
 import { SchemeExport } from './Export';
 import { M2SchemeBuilder } from './m2-scheme/Builder';
 import { M2SchemePreview } from './m2-scheme/Preview';
@@ -25,15 +24,7 @@ export function M2Scheme({ scheme }: M2SchemeProps) {
 
   return (
     <>
-      <Tab
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
-        tabs={tabOptions}
-        activeTab={activeTab}
-        onActive={(v) => setActiveTab(v as string)}
-        disabled={{
-          overview: isNilOrEmpty(scheme.schemeStorage?.scheme),
-          export: isNilOrEmpty(scheme.schemeStorage?.cssVariables),
-        }}
-      />
       {isEqual(activeTab, 'overview') && <M2SchemePreview scheme={scheme} />}
       {isEqual(activeTab, 'builder') && (
         <M2SchemeBuilder scheme={scheme} onBuildComplete={() => setActiveTab('overview')} />

src/page-components/scheme/M3DynamicScheme.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { MaterialDesign3DynamicSchemeStorage } from '../../material-3-scheme';
 import { SchemeContent } from '../../models';
-import { isNilOrEmpty } from '../../utls';
 import { SchemeExport } from './Export';
 import { M3DynamicSchemeBuilder } from './m3-dynamic-scheme/Builder';
 import { M3SchemePreview } from './m3-scheme/Preview';
@@ -25,15 +24,7 @@ export function M3DynamicScheme({ scheme }: M3SchemeProps) {
 
   return (
     <>
-      <Tab
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
-        tabs={tabOptions}
-        activeTab={activeTab}
-        onActive={(v) => setActiveTab(v as string)}
-        disabled={{
-          overview: isNilOrEmpty(scheme.schemeStorage?.scheme),
-          export: isNilOrEmpty(scheme.schemeStorage?.cssVariables),
-        }}
-      />
       {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme.schemeStorage.scheme} />}
       {isEqual(activeTab, 'builder') && (
         <M3DynamicSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

src/page-components/scheme/M3Scheme.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { MaterialDesign3SchemeStorage } from '../../material-3-scheme';
 import { SchemeContent } from '../../models';
-import { isNilOrEmpty } from '../../utls';
 import { SchemeExport } from './Export';
 import { M3SchemeBuilder } from './m3-scheme/Builder';
 import { M3SchemePreview } from './m3-scheme/Preview';
@@ -25,15 +24,7 @@ export function M3Scheme({ scheme }: M3SchemeProps) {
 
   return (
     <>
-      <Tab
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
-        tabs={tabOptions}
-        activeTab={activeTab}
-        onActive={(v) => setActiveTab(v as string)}
-        disabled={{
-          overview: isNilOrEmpty(scheme.schemeStorage?.scheme),
-          export: isNilOrEmpty(scheme.schemeStorage?.cssVariables),
-        }}
-      />
       {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme.schemeStorage.scheme} />}
       {isEqual(activeTab, 'builder') && (
         <M3SchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

src/page-components/scheme/QScheme.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { SchemeContent } from '../../models';
 import { QSchemeStorage } from '../../q-scheme';
-import { isNilOrEmpty } from '../../utls';
 import { SchemeExport } from './Export';
 import { QSchemeBuilder } from './q-scheme/Builder';
 import { QSchemePreview } from './q-scheme/Preview';
@@ -25,15 +24,7 @@ export function QScheme({ scheme }: QSchemeProps) {
 
   return (
     <>
-      <Tab
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
-        tabs={tabOptions}
-        activeTab={activeTab}
-        onActive={(v) => setActiveTab(v as string)}
-        disabled={{
-          overview: isNilOrEmpty(scheme.schemeStorage?.scheme),
-          export: isNilOrEmpty(scheme.schemeStorage?.cssVariables),
-        }}
-      />
       {isEqual(activeTab, 'overview') && <QSchemePreview scheme={scheme} />}
       {isEqual(activeTab, 'builder') && (
         <QSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

src/page-components/scheme/SwatchScheme.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { SchemeContent } from '../../models';
 import { SwatchSchemeStorage } from '../../swatch_scheme';
-import { isNilOrEmpty } from '../../utls';
 import { SchemeExport } from './Export';
 import { SwatchSchemeBuilder } from './swatch-scheme/Builder';
 import { SwatchSchemePreview } from './swatch-scheme/Preview';
@@ -25,15 +24,7 @@ export function SwatchScheme({ scheme }: SwatchSchemeProps) {
 
   return (
     <>
-      <Tab
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
-        tabs={tabOptions}
-        activeTab={activeTab}
-        onActive={(v) => setActiveTab(v as string)}
-        disabled={{
-          overview: isNilOrEmpty(scheme.schemeStorage?.scheme),
-          export: isNilOrEmpty(scheme.schemeStorage?.cssVariables),
-        }}
-      />
       {isEqual(activeTab, 'overview') && <SwatchSchemePreview scheme={scheme} />}
       {isEqual(activeTab, 'builder') && (
         <SwatchSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

src/page-components/scheme/m3-dynamic-scheme/Builder.tsx

@@ -8,7 +8,6 @@ import { VSegmentedControl } from '../../../components/VSegmentedControl';
 import { MaterialDesign3DynamicSchemeStorage } from '../../../material-3-scheme';
 import { Option, SchemeContent } from '../../../models';
 import { useUpdateScheme } from '../../../stores/schemes';
-import { mapToObject } from '../../../utls';
 import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
 import styles from './Builder.module.css';
 
@@ -47,7 +46,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
     return [];
   }, []);
   const [contrastLevel, setContrastLevel] = useState<number>(
-    () => scheme.schemeStorage.source?.contrastLevel ?? 1,
+    scheme.schemeStorage.source?.constrastLevel ?? 0,
   );
 
   const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
@@ -62,7 +61,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
 
       try {
         const dynamicVariant = Number(formData.get('variant'));
-        const contrast = Number(formData.get('contrast_level'));
+        const contrastLevel = Number(formData.get('contrast_level'));
         const harmonizeCustoms = isEqual(formData.get('harmonize_customs'), 'true');
         const errorColor = formData.get('error') as string;
         const customColors: Record<string, string> = {};
@@ -81,34 +80,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
           harmonizeCustoms,
           customColors,
         );
-        updateScheme((prev) => {
+        console.debug('[generate m3d]', generate_scheme);
-          prev.schemeStorage.source = {
-            source: sourceColor,
-            error: errorColor,
-            custom_colors: customColors,
-            variant: dynamicVariant,
-            contrastLevel: contrast,
-            harmonizeCustoms: harmonizeCustoms,
-          };
-          prev.schemeStorage.scheme = {
-            white: generate_scheme[0].white,
-            black: generate_scheme[0].black,
-            light_baseline: {
-              ...generate_scheme[0].light_baseline,
-              customs: mapToObject(generate_scheme[0].light_baseline.customs),
-            },
-            dark_baseline: {
-              ...generate_scheme[0].dark_baseline,
-              customs: mapToObject(generate_scheme[0].dark_baseline.customs),
-            },
-          };
-          prev.schemeStorage.cssVariables = generate_scheme[1];
-          prev.schemeStorage.scssVariables = generate_scheme[2];
-          prev.schemeStorage.jsVariables = generate_scheme[3];
-          return prev;
-        });
-
-        onBuildCompleted?.();
       } catch (e) {
         console.error('[generate m3d]', e);
       }
@@ -153,7 +125,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
           <VSegmentedControl
             name="variant"
             options={variantOptions}
-            defaultValue={scheme.schemeStorage.source?.variant ?? 6}
+            defaultValue={scheme.schemeStorage.source?.variant}
           />
         </div>
         <label className={styles.label}>Contrast Level</label>

src/utls.ts

@@ -15,10 +15,6 @@ export function defaultEmptyValue<T, D>(value: T, defaultValue: D): T | D {
   return value;
 }
 
-export function isNilOrEmpty(value?: unknown): boolean {
-  return isNil(value) || isEmpty(value);
-}
-
 export function mapToObject<K extends string | number | symbol, V>(map: Map<K, V>): Record<K, V> {
   const obj = {} as Record<K, V>;
   map.forEach((value, key) => {