diff --git a/src/material-3-scheme.ts b/src/material-3-scheme.ts index df16e1d..301dc21 100644 --- a/src/material-3-scheme.ts +++ b/src/material-3-scheme.ts @@ -64,7 +64,7 @@ export type MaterialDesign3DynamicSchemeSource = { error: string | null; custom_colors?: Record; variant: number | null; - constrastLevel: number | null; + contrastLevel: number | null; harmonizeCustoms: boolean | null; }; diff --git a/src/page-components/scheme/m3-dynamic-scheme/Builder.tsx b/src/page-components/scheme/m3-dynamic-scheme/Builder.tsx index 920e90f..f539fc4 100644 --- a/src/page-components/scheme/m3-dynamic-scheme/Builder.tsx +++ b/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( - scheme.schemeStorage.source?.constrastLevel ?? 0, + () => scheme.schemeStorage.source?.contrastLevel ?? 1, ); const [errMsg, handleSubmitAction] = useActionState, 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 = {}; @@ -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