feat(vueuikit): color builder enhance

innoai-tech · Jul 31, 2024 · 2fc292c · 2fc292c
1 parent 9e0bf90
commit 2fc292c
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 146 deletions.
diff --git a/nodepkg/vueuikit/example/color-palette.tsx b/nodepkg/vueuikit/example/color-palette.tsx
@@ -24,7 +24,7 @@ export default component(() => {
                     flex: 1,
                     display: "flex",
                     alignItems: "center",
-                    gap: 16,
+                    gap: 16
                   }}
                 >
                   <Box sx={{ flex: 1 }}>{name}</Box>
@@ -43,7 +43,7 @@ export default component(() => {
             })}
           </Box>
           <Box sx={{ display: "flex", flexWrap: "wrap", gap: 16 }}>
-            {map(p.value.rules, ([base, onDark, onLight], role) => {
+            {map(p.value.rules, ([base, tone], role) => {
               return (
                 <Box
                   sx={{ display: "flex", alignItems: "center", width: "30%" }}
@@ -57,57 +57,33 @@ export default component(() => {
                       "& input": {
                         width: "40%",
                         border: "1px solid",
-                        borderColor: "sys.outline",
-                      },
+                        borderColor: "sys.outline"
+                      }
                     }}
                   >
                     <input
                       type="number"
-                      value={onDark}
+                      value={tone}
                       max={100}
                       min={0}
                       style={{
                         backgroundColor: Palette.toHEX(
-                          pp.seeds[base].tone(onDark),
+                          pp.seeds[base].tone(tone)
                         ),
-                        color: onDark > 50 ? "black" : "white",
+                        color: tone > 50 ? "black" : "white"
                       }}
-                      data-color={Palette.toHEX(pp.seeds[base].tone(onDark))}
+                      data-color={Palette.toHEX(pp.seeds[base].tone(tone))}
                       data-theme={"dark"}
                       onChange={(evt) => {
                         try {
                           const v = parseInt(
-                            (evt.target as HTMLInputElement).value,
+                            (evt.target as HTMLInputElement).value
                           );
                           p.next((x) => {
-                            (x.rules as any)[role] = [base, v, onLight];
+                            (x.rules as any)[role] = [base, v, tone];
                           });
-                        } catch (_) {}
-                      }}
-                    />
-                    <input
-                      type="number"
-                      max={100}
-                      min={0}
-                      value={onLight}
-                      style={{
-                        backgroundColor: Palette.toHEX(
-                          pp.seeds[base].tone(onLight),
-                        ),
-                        color: onLight > 50 ? "black" : "white",
-                      }}
-                      data-color={Palette.toHEX(pp.seeds[base].tone(onLight))}
-                      data-theme={"light"}
-                      onChange={(evt) => {
-                        try {
-                          const v = parseInt(
-                            (evt.target as HTMLInputElement).value,
-                          );
-
-                          p.next((x) => {
-                            (x.rules as any)[role] = [base, onDark, v];
-                          });
-                        } catch (_) {}
+                        } catch (_) {
+                        }
                       }}
                     />
                   </Box>

diff --git a/nodepkg/vueuikit/package.json b/nodepkg/vueuikit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@innoai-tech/vueuikit",
-  "version": "0.12.3",
+  "version": "0.13.1",
   "monobundle": {
     "exports": {
       ".": "./src/index.ts"

diff --git a/nodepkg/vueuikit/src/theming/m3/index.ts b/nodepkg/vueuikit/src/theming/m3/index.ts
@@ -11,17 +11,15 @@ const seedColors = Palette.fromColors({
   neutral: "#5e5e5e",
   error: "#d93f23",
   warning: "#e69c00",
-  success: "#5ac220",
+  success: "#5ac220"
 });
 
 export const defaultTheme = {
   ...typography,
   ...motion,
   ...elevation,
   rounded: rounded,
-  ...seedColors.toDesignTokens({
-    primary: ["primary", 80, 50],
-  }),
+  ...seedColors.toDesignTokens({})
 } as const;
 
 export * from "./palette";