调整输出自定义颜色变量名称的大小写。

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));
+            variable_lines.extend(color_set.to_css_variable(&prefix, &name.to_lowercase()));
         }
 
         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));
+            variable_lines.extend(color_set.to_scss_variable(&prefix, &name.to_lowercase()));
         }
 
         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));
+            variable_lines.extend(color_set.to_javascript_object(&prefix, &name.to_lowercase()));
         }
 
         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));
+            css_variables.extend(color_set.to_css_variables(prefix, &name.to_lowercase()));
         }
 
         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));
+            scss_variables.extend(color_set.to_scss_variables(prefix, &name.to_lowercase()));
         }
 
         scss_variables
@@ -177,7 +177,8 @@ 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.extend(color_set.to_javascript_object_fields(prefix, name));
+            js_object_fields
+                .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));
+            variables.extend(swatch.to_css_variables("light", &name.to_lowercase()));
         }
         for (name, swatch) in &self.dark {
-            variables.extend(swatch.to_css_variables("dark", name));
+            variables.extend(swatch.to_css_variables("dark", &name.to_lowercase()));
         }
 
         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));
+            variables.extend(swatch.to_scss_variables("light", &name.to_lowercase()));
         }
         for (name, swatch) in &self.dark {
-            variables.extend(swatch.to_scss_variables("dark", name));
+            variables.extend(swatch.to_scss_variables("dark", &name.to_lowercase()));
         }
 
         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_javascript_fields("light", &name.to_lowercase())
                     .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_javascript_fields("dark", &name.to_lowercase())
                     .iter()
                     .map(|s| format!("    {}", s)),
             );

src/components/Tab.module.css

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

src/components/Tab.tsx

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

src/page-components/scheme/M2Scheme.tsx

@@ -3,6 +3,7 @@ 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';
@@ -24,7 +25,15 @@ export function M2Scheme({ scheme }: M2SchemeProps) {
 
   return (
     <>
-      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      <Tab
+        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,6 +3,7 @@ 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';
@@ -24,7 +25,15 @@ export function M3DynamicScheme({ scheme }: M3SchemeProps) {
 
   return (
     <>
-      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      <Tab
+        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,6 +3,7 @@ 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';
@@ -24,7 +25,15 @@ export function M3Scheme({ scheme }: M3SchemeProps) {
 
   return (
     <>
-      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      <Tab
+        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,6 +3,7 @@ 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';
@@ -24,7 +25,15 @@ export function QScheme({ scheme }: QSchemeProps) {
 
   return (
     <>
-      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      <Tab
+        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,6 +3,7 @@ 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';
@@ -24,7 +25,15 @@ export function SwatchScheme({ scheme }: SwatchSchemeProps) {
 
   return (
     <>
-      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      <Tab
+        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,6 +8,7 @@ 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';
 
@@ -46,7 +47,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
     return [];
   }, []);
   const [contrastLevel, setContrastLevel] = useState<number>(
-    scheme.schemeStorage.source?.constrastLevel ?? 0,
+    () => scheme.schemeStorage.source?.contrastLevel ?? 1,
   );
 
   const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
@@ -61,7 +62,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
 
       try {
         const dynamicVariant = Number(formData.get('variant'));
-        const contrastLevel = Number(formData.get('contrast_level'));
+        const contrast = 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> = {};
@@ -80,7 +81,34 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
           harmonizeCustoms,
           customColors,
         );
-        console.debug('[generate m3d]', generate_scheme);
+        updateScheme((prev) => {
+          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);
       }
@@ -125,7 +153,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
           <VSegmentedControl
             name="variant"
             options={variantOptions}
-            defaultValue={scheme.schemeStorage.source?.variant}
+            defaultValue={scheme.schemeStorage.source?.variant ?? 6}
           />
         </div>
         <label className={styles.label}>Contrast Level</label>

src/utls.ts

@@ -15,6 +15,10 @@ 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) => {