CustomColorGroupの使用 [update snapshots]

romot-co · Jul 18, 2024 · 385abb6 · 385abb6
1 parent 2189d3a
commit 385abb6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/src/helpers/colors.ts b/src/helpers/colors.ts
@@ -13,6 +13,9 @@ import {
   SchemeFruitSalad,
   TonalPalette,
   MaterialDynamicColors,
+  CustomColor,
+  CustomColorGroup,
+  customColor,
 } from "@material/material-color-utilities";
 
 import {
@@ -21,6 +24,7 @@ import {
   ColorSchemeCorePalettes,
   ColorSchemeAdjustment,
   CustomPaletteColor,
+  CustomDefinedColor,
 } from "@/type/preload";
 
 const SCHEME_CONSTRUCTORS = {
@@ -79,7 +83,7 @@ const createAdjustedPalette = (
 };
 
 // M3のダイナミックスキーム生成
-const createDynamicScheme = (config: ColorSchemeConfig): DynamicScheme => {
+const generateDynamicScheme = (config: ColorSchemeConfig): DynamicScheme => {
   const {
     sourceColor,
     variant = "tonalSpot",
@@ -198,22 +202,39 @@ const adjustCustomPaletteColors = (
   );
 };
 
+export const generateCustomDefinedColors = (
+  sourceColorHex: string,
+  customDefinedColors: CustomDefinedColor[],
+): CustomColorGroup[] => {
+  const customColorGroups: CustomColorGroup[] = customDefinedColors.map(
+    (customDefinedColor: CustomDefinedColor) => {
+      const customColorValue = {
+        ...customDefinedColor,
+        value: argbFromHex(customDefinedColor.value),
+      };
+      return customColor(
+        argbFromHex(sourceColorHex),
+        customColorValue as CustomColor,
+      );
+    },
+  );
+
+  return customColorGroups;
+};
+
 // カラースキームの生成
 export const generateColorScheme = (config: ColorSchemeConfig): ColorScheme => {
-  const scheme = createDynamicScheme(config);
+  const scheme = generateDynamicScheme(config);
   const systemColors = generateSystemColors(scheme);
   const paletteTones = generatePaletteTones(scheme);
   const customPaletteColors = adjustCustomPaletteColors(
     config.customPaletteColors,
     scheme,
     config.isDark,
   );
-  const customDefinedColors = config.customDefinedColors.reduce(
-    (acc, { name, value }) => {
-      acc[name] = value;
-      return acc;
-    },
-    {} as Record<string, string>,
+  const customDefinedColors = generateCustomDefinedColors(
+    config.sourceColor,
+    config.customDefinedColors,
   );
 
   return {
@@ -263,7 +284,7 @@ export const colorSchemeToCssVariables = (
 
   Object.entries(colorScheme.customDefinedColors).forEach(([name, color]) => {
     const cssName = toKebabCase(name);
-    setColorVar("--md-custom-color-", cssName, color);
+    setColorVar("--md-custom-color-", cssName, rgbaFromArgb(color.value));
   });
 
   return cssVars;

diff --git a/src/type/preload.ts b/src/type/preload.ts
@@ -1,5 +1,8 @@
 import { z } from "zod";
-import { DynamicScheme } from "@material/material-color-utilities";
+import {
+  DynamicScheme,
+  CustomColorGroup,
+} from "@material/material-color-utilities";
 import { IpcSOData } from "./ipc";
 import { AltPortInfos } from "@/store/type";
 import { Result } from "@/type/result";
@@ -627,7 +630,7 @@ export interface ColorScheme {
   systemColors: Record<string, string>;
   paletteTones: Record<string, Record<number, string>>;
   customPaletteColors: Record<string, string>;
-  customDefinedColors: Record<string, string>;
+  customDefinedColors: CustomColorGroup[];
   config: ColorSchemeConfig;
 }