fix(preset-wind4): fix theme color resolved key (#4461)

unocss · Feb 27, 2025 · c78d0ae · c78d0ae
1 parent ad5b40b
commit c78d0ae
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 94 deletions.
diff --git a/packages-presets/preset-wind4/src/rules/background.ts b/packages-presets/preset-wind4/src/rules/background.ts
@@ -39,7 +39,7 @@ function bgGradientColorResolver() {
       }
       else {
         css[`--un-${position}-opacity`] = `${opacity || 100}%`
-        const value = key ? `var(--color-${key})` : color
+        const value = key ? `var(--colors-${key})` : color
         css[`--un-gradient-${position}`] = `color-mix(in oklab, ${value} var(--un-${position}-opacity), transparent)`
       }
     }

diff --git a/packages-presets/preset-wind4/src/rules/border.ts b/packages-presets/preset-wind4/src/rules/border.ts
@@ -60,7 +60,7 @@ function
10000
 transformBorderColor(color: string, opacity: string | number | undefine
       if (direction && direction !== '') {
         css[`--un-border${direction}-opacity`] = `var(--un-border-opacity)`
       }
-      const value = key ? `var(--color-${key})` : color
+      const value = key ? `var(--colors-${key})` : color
       css[`border${direction}-color`] = `color-mix(in oklch, ${value} var(--un-border${direction}-opacity), transparent)`
     }
   }

diff --git a/packages-presets/preset-wind4/src/theme/types.ts b/packages-presets/preset-wind4/src/theme/types.ts
@@ -18,7 +18,7 @@ export interface Theme {
   breakpoint?: Record<string, string>
   verticalBreakpoint?: Record<string, string>
   container?: Record<string, string>
-  text: Record<string, { fontSize?: string, lineHeight?: string, letterSpacing?: string }>
+  text?: Record<string, { fontSize?: string, lineHeight?: string, letterSpacing?: string }>
   fontWeight?: Record<string, string>
   tracking?: Record<string, string>
   leading?: Record<string, string>

diff --git a/packages-presets/preset-wind4/src/utils/utilities.ts b/packages-presets/preset-wind4/src/utils/utilities.ts
@@ -141,7 +141,7 @@ export function colorResolver(property: string, varName: string) {
       }
       else {
         css[`--un-${varName}-opacity`] = `${opacity || 100}%`
-        const value = key ? `var(--color-${key})` : color
+        const value = key ? `var(--colors-${key})` : color
         css[property] = `color-mix(in oklch, ${value} var(--un-${varName}-opacity), transparent)${rawColorComment}`
       }
     }
@@ -207,6 +207,9 @@ export function parseColor(body: string, theme: Theme) {
      * Key means the color is from theme object.
      */
     key,
+    get cssColor() {
+      return parseCssColor(this.color)
+    },
   }
 }