fix(core): corrected color schema generation logic

hirotomoyamada · hirotomoyamada · commit bb96e058136c · 2024-08-14T18:25:40.000+09:00
diff --git a/.changeset/giant-taxis-sing.md b/.changeset/giant-taxis-sing.md
@@ -0,0 +1,5 @@
+---
+"@yamada-ui/core": patch
+---
+
+Fixed a bug where the semantic color schema was not generated correctly.
diff --git a/.changeset/gorgeous-fireants-grin.md b/.changeset/gorgeous-fireants-grin.md
@@ -0,0 +1,5 @@
+---
+"@yamada-ui/cli": patch
+---
+
+Fixed a bug where the semantic color schema type definition could not be generated correctly.
diff --git a/packages/cli/src/command/tokens/create-theme-typings.ts b/packages/cli/src/command/tokens/create-theme-typings.ts
@@ -1,4 +1,4 @@
-import { isArray, isObject, omitObject, prettier } from "../../utils"
+import { isArray, isObject, isString, omitObject, prettier } from "../../utils"
 import { config } from "./config"
 
 type Component = {
@@ -100,22 +100,26 @@ export const extractColorSchemes = (theme: any) => {
     if (!isTone(value)) return
 
     results.colorSchemes.push(key)
+  })
 
-    const semanticKeys =
-      Object.entries(semantics?.colorSchemes ?? {})
-        .filter(([, relatedKey]) => key === relatedKey)
-        .map(([key]) => key) ?? []
+  if (!isObject(semantics?.colorSchemes)) return results
 
-    if (!semanticKeys.length) return
+  Object.entries(semantics.colorSchemes).forEach(([key, value]) => {
+    if (isTone(value)) {
+      results.colorSchemes.push(key)
+      results.colorSchemeColors.push(...tones.map((tone) => `${key}.${tone}`))
+    } else {
+      const hasColorScheme = isArray(value)
+        ? value.every(
+            (key) => isString(key) && Object.keys(colors).includes(key),
+          )
+        : Object.keys(colors).some((key) => key === value)
 
-    results.colorSchemes.push(...semanticKeys)
-    results.colorSchemeColors.push(
-      ...semanticKeys
-        .map((semanticKey) =>
-          Object.keys(value).map((hue) => `${semanticKey}.${hue}`),
-        )
-        .flat(),
-    )
+      if (!hasColorScheme) return
+
+      results.colorSchemes.push(key)
+      results.colorSchemeColors.push(...tones.map((tone) => `${key}.${tone}`))
+    }
   })
 
   return results
diff --git a/packages/core/src/generated-theme.types.ts b/packages/core/src/generated-theme.types.ts
@@ -261,39 +261,6 @@ export interface GeneratedTheme extends UITheme {
     | "warning"
     | "danger"
     | "link"
-    | "danger.50"
-    | "danger.100"
-    | "danger.200"
-    | "danger.300"
-    | "danger.400"
-    | "danger.500"
-    | "danger.600"
-    | "danger.700"
-    | "danger.800"
-    | "danger.900"
-    | "danger.950"
-    | "warning.50"
-    | "warning.100"
-    | "warning.200"
-    | "warning.300"
-    | "warning.400"
-    | "warning.500"
-    | "warning.600"
-    | "warning.700"
-    | "warning.800"
-    | "warning.900"
-    | "warning.950"
-    | "success.50"
-    | "success.100"
-    | "success.200"
-    | "success.300"
-    | "success.400"
-    | "success.500"
-    | "success.600"
-    | "success.700"
-    | "success.800"
-    | "success.900"
-    | "success.950"
     | "primary.50"
     | "primary.100"
     | "primary.200"
@@ -305,6 +272,17 @@ export interface GeneratedTheme extends UITheme {
     | "primary.800"
     | "primary.900"
     | "primary.950"
+    | "secondary.50"
+    | "secondary.100"
+    | "secondary.200"
+    | "secondary.300"
+    | "secondary.400"
+    | "secondary.500"
+    | "secondary.600"
+    | "secondary.700"
+    | "secondary.800"
+    | "secondary.900"
+    | "secondary.950"
     | "info.50"
     | "info.100"
     | "info.200"
@@ -316,6 +294,39 @@ export interface GeneratedTheme extends UITheme {
     | "info.800"
     | "info.900"
     | "info.950"
+    | "success.50"
+    | "success.100"
+    | "success.200"
+    | "success.300"
+    | "success.400"
+    | "success.500"
+    | "success.600"
+    | "success.700"
+    | "success.800"
+    | "success.900"
+    | "success.950"
+    | "warning.50"
+    | "warning.100"
+    | "warning.200"
+    | "warning.300"
+    | "warning.400"
+    | "warning.500"
+    | "warning.600"
+    | "warning.700"
+    | "warning.800"
+    | "warning.900"
+    | "warning.950"
+    | "danger.50"
+    | "danger.100"
+    | "danger.200"
+    | "danger.300"
+    | "danger.400"
+    | "danger.500"
+    | "danger.600"
+    | "danger.700"
+    | "danger.800"
+    | "danger.900"
+    | "danger.950"
     | "link.50"
     | "link.100"
     | "link.200"
@@ -327,48 +338,37 @@ export interface GeneratedTheme extends UITheme {
     | "link.800"
     | "link.900"
     | "link.950"
-    | "secondary.50"
-    | "secondary.100"
-    | "secondary.200"
-    | "secondary.300"
-    | "secondary.400"
-    | "secondary.500"
-    | "secondary.600"
-    | "secondary.700"
-    | "secondary.800"
-    | "secondary.900"
-    | "secondary.950"
     | (string & {})
   colorSchemes:
     | "whiteAlpha"
     | "blackAlpha"
     | "gray"
     | "neutral"
     | "red"
-    | "danger"
     | "rose"
     | "pink"
     | "flashy"
     | "orange"
-    | "warning"
     | "amber"
     | "yellow"
     | "lime"
     | "green"
-    | "success"
     | "emerald"
     | "teal"
     | "cyan"
     | "sky"
     | "blue"
-    | "primary"
-    | "info"
-    | "link"
     | "indigo"
     | "violet"
-    | "secondary"
     | "purple"
     | "fuchsia"
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "danger"
+    | "link"
     | (string & {})
   fonts: "heading" | "body" | "mono" | (string & {})
   fontSizes:
diff --git a/packages/core/src/theme.ts b/packages/core/src/theme.ts
@@ -4,11 +4,12 @@ import {
   objectFromEntries,
   pickObject,
   omitObject,
-  tones,
   isObject,
   runIfFunc,
   isFunction,
   merge,
+  isArray,
+  tones,
 } from "@yamada-ui/utils"
 import type { CSSUIObject, ThemeProps, UIStyle, UIStyleProps } from "./css"
 import { analyzeBreakpoints, createVars } from "./css"
@@ -142,7 +143,7 @@ const createTokens = (
   const defaultTokenEntries: [string, VarToken][] = Object.entries(
     flattenObject(defaultTokenMap, Infinity, omitKeys),
   ).map(([token, value]) => {
-    const enhancedToken = { isSemantic: false, value }
+    const enhancedToken: VarToken = { isSemantic: false, value }
 
     return [token, enhancedToken]
   })
@@ -151,15 +152,26 @@ const createTokens = (
   ).reduce(
     (prev, [token, value]) => {
       if (token.startsWith("colorSchemes.")) {
-        const [, semanticToken] = token.split(".")
+        const [, semanticToken, tone] = token.split(".")
 
-        tones.forEach((tone) => {
-          const enhancedToken = { isSemantic: true, value: `${value}.${tone}` }
+        if (tone) {
+          const enhancedToken = { isSemantic: false, value }
 
           prev.push([`colors.${semanticToken}.${tone}`, enhancedToken])
-        })
+        } else {
+          tones.forEach((tone) => {
+            const enhancedToken: VarToken = {
+              isSemantic: true,
+              value: isArray(value)
+                ? [`${value[0]}.${tone}`, `${value[1]}.${tone}`]
+                : `${value}.${tone}`,
+            }
+
+            prev.push([`colors.${semanticToken}.${tone}`, enhancedToken])
+          })
+        }
       } else {
-        const enhancedToken = { isSemantic: true, value }
+        const enhancedToken: VarToken = { isSemantic: true, value }
 
         prev.push([token, enhancedToken])
       }
diff --git a/packages/core/src/theme.types.ts b/packages/core/src/theme.types.ts
@@ -534,7 +534,14 @@ export type ThemeSemantics = Omit<
   | "breakpoints"
   | "animations"
 > & {
-  colorSchemes?: Partial<Record<string, Theme["colorSchemes"]>>
+  colorSchemes?: Partial<
+    Record<
+      string,
+      | Theme["colorSchemes"]
+      | [Theme["colorSchemes"], Theme["colorSchemes"]]
+      | ThemeTokens
+    >
+  >
   animations?: ThemeAnimationTokens<AnimationStyle | string>
 }
 export type ThemeSchemes = Partial<
