feat!: compat to preset wind4 (#31)

* feat: compat to preset wind4

* chore: upgrade pnpm action to v4 in CI and release workflows

* chore: update unocss and related dependencies to version 66.5.0, add npm registry configuration

* chore: update dependencies in pnpm-lock.yaml to latest versions

* chore: bump version to 1.0.0 in package.json

---------

Co-authored-by: clark.zou <clark.zou@zoom.us>

Author: zouhangwithsweet

.github/workflows/ci.yml

@@ -29,7 +29,7 @@ jobs:
           node-version: ${{ matrix.node }}
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
         with:
           run_install: |
             - args: [--frozen-lockfile]

.github/workflows/release.yml

@@ -27,7 +27,7 @@ jobs:
           registry-url: "https://registry.npmjs.org"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
         with:
           run_install: |
             - args: [--frozen-lockfile]

.npmrc

@@ -1 +1,2 @@
+registry=https://registry.npmjs.org/
 ignore-workspace-root-check=true

build.config.ts

@@ -1,7 +1,7 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
-  entries: ['src/index'],
+  entries: ['src/index', 'src/v3'],
   declaration: true,
   clean: true,
   rollup: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "unocss-preset-shadcn",
   "type": "module",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "packageManager": "pnpm@10.6.2",
   "description": "use shadcn ui with unocss",
   "author": "Stephen Zhou <hi@hyoban.cc>",
@@ -27,6 +27,16 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
+    },
+    "./v3": {
+      "import": {
+        "types": "./dist/v3.d.mts",
+        "default": "./dist/v3.mjs"
+      },
+      "require": {
+        "types": "./dist/v3.d.cts",
+        "default": "./dist/v3.cjs"
+      }
     }
   },
   "main": "./dist/index.cjs",
@@ -61,17 +71,16 @@
     "@antfu/ni": "^24.1.0",
     "@antfu/utils": "^9.1.0",
     "@types/node": "^22.13.10",
-    "@unocss/preset-mini": "^66.1.0-beta.3",
+    "@unocss/preset-mini": "^66.5.0",
     "eslint": "^9.22.0",
     "eslint-config-hyoban": "^4.0.1",
     "lint-staged": "^15.5.0",
-    "pnpm": "^10.6.2",
     "release-it": "^18.1.2",
     "release-it-pnpm": "^4.6.4",
     "simple-git-hooks": "^2.11.1",
     "typescript": "^5.8.2",
     "unbuild": "^3.5.0",
-    "unocss": "^66.1.0-beta.3",
+    "unocss": "^66.5.0",
     "vite": "^6.2.1",
     "vitest": "^3.0.8"
   },

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import { mergeDeep } from 'unocss'
 
-import type { ThemeCSSVarKey, ThemeCSSVars, ThemeCSSVarsVariant } from './themes'
-import { themeCSSVarKeys, themes } from './themes'
+import type { ThemeCSSVarKey, ThemeCSSVars, ThemeCSSVarsVariant, themes } from './themes/v3'
+import { themeCSSVarKeys } from './themes/v3'
 import type { ColorOptions, PresetShadcnThemeOptions } from './types'
 
 function generateColorCSSVars(color: ThemeCSSVars) {
@@ -38,7 +38,7 @@ ${generateRadiusCSSVars(radius)}
 `
 }
 
-export function generateGlobalStyles() {
+export function generateGlobalStylesV3() {
   return `
 * {
   border-color: hsl(var(--border));
@@ -51,8 +51,21 @@ body {
 `
 }
 
-function getBuiltInTheme(name: string): ThemeCSSVarsVariant {
-  const theme = themes.find(t => t.name === name)
+export function generateGlobalStyles() {
+  return `
+* {
+  border-color: oklch(var(--border));
+}
+
+body {
+  color: oklch(var(--foreground));
+  background: oklch(var(--background));
+}
+  `
+}
+
+function getBuiltInTheme(name: string, themesRaw: typeof themes): ThemeCSSVarsVariant {
+  const theme = themesRaw.find(t => t.name === name)
   if (!theme)
     throw new Error(`Unknown color: ${name}`)
   return {
@@ -61,18 +74,18 @@ function getBuiltInTheme(name: string): ThemeCSSVarsVariant {
   }
 }
 
-function getColorTheme(color: ColorOptions) {
+function getColorTheme(color: ColorOptions, themesRaw: typeof themes) {
   let light: ThemeCSSVars
   let dark: ThemeCSSVars
   let name: string
 
   if (typeof color === 'string') {
     name = color
-    ;({ light, dark } = getBuiltInTheme(color))
+    ;({ light, dark } = getBuiltInTheme(color, themesRaw))
   }
   else if ('base' in color) {
     name = color.base
-    ;({ light, dark } = mergeDeep(getBuiltInTheme(color.base), color))
+    ;({ light, dark } = mergeDeep(getBuiltInTheme(color.base, themesRaw), color))
   }
   else {
     name = color.name
@@ -83,10 +96,11 @@ function getColorTheme(color: ColorOptions) {
 
 export function generateCSSVars(
   theme: PresetShadcnThemeOptions,
+  themesRaw: typeof themes,
   onlyOne = true,
 ): string {
   if (Array.isArray(theme))
-    return theme.map(t => generateCSSVars(t, false)).join('\n')
+    return theme.map(t => generateCSSVars(t, themesRaw, false)).join('\n')
 
   const { color = 'zinc', radius = 0.5, darkSelector = '.dark' } = theme
 
@@ -97,7 +111,7 @@ export function generateCSSVars(
       cssStyle += radiusCSSVarsStyles(radius)
   }
   else {
-    const { light, dark, name } = getColorTheme(color)
+    const { light, dark, name } = getColorTheme(color, themesRaw)
     const lightVars = generateColorCSSVars(light)
     const darkVars = generateColorCSSVars(dark)
 

src/generate.ts

@@ -2,7 +2,8 @@ import type { Preset } from 'unocss'
 import type { Theme } from 'unocss/preset-mini'
 
 import { generateCSSVars, generateGlobalStyles } from './generate'
-import { themes } from './themes'
+import type { themes as themesV3 } from './themes/v3'
+import { themes } from './themes/v4'
 import type { PresetShadcnControlOptions, PresetShadcnThemeOptions } from './types'
 
 export const builtinColors = themes.map(theme => theme.name)
@@ -24,7 +25,7 @@ export function presetShadcn(
           @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--${componentLibrary}-collapsible-content-height)} }
           @keyframes shadcn-collapsible-up { from{ height: var(--${componentLibrary}-collapsible-content-height)} to { height: 0 } }
 
-          ${generateCSSVars(themeOptions)}
+          ${generateCSSVars(themeOptions, themes as unknown as typeof themesV3)}
 
           ${globals ? generateGlobalStyles() : ''}
         `,
@@ -58,58 +59,58 @@ export function presetShadcn(
     ],
     theme: {
       colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        border: 'oklch(var(--border))',
+        input: 'oklch(var(--input))',
+        ring: 'oklch(var(--ring))',
+        background: 'oklch(var(--background))',
+        foreground: 'oklch(var(--foreground))',
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+          DEFAULT: 'oklch(var(--primary))',
+          foreground: 'oklch(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: 'oklch(var(--secondary))',
+          foreground: 'oklch(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
+          DEFAULT: 'oklch(var(--destructive))',
+          foreground: 'oklch(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          DEFAULT: 'oklch(var(--muted))',
+          foreground: 'oklch(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          DEFAULT: 'oklch(var(--accent))',
+          foreground: 'oklch(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          DEFAULT: 'oklch(var(--popover))',
+          foreground: 'oklch(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: 'oklch(var(--card))',
+          foreground: 'oklch(var(--card-foreground))',
         },
-        chart1: 'hsl(var(--chart1))',
-        chart2: 'hsl(var(--chart2))',
-        chart3: 'hsl(var(--chart3))',
-        chart4: 'hsl(var(--chart4))',
-        chart5: 'hsl(var(--chart5))',
+        chart1: 'oklch(var(--chart1))',
+        chart2: 'oklch(var(--chart2))',
+        chart3: 'oklch(var(--chart3))',
+        chart4: 'oklch(var(--chart4))',
+        chart5: 'oklch(var(--chart5))',
         sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          background: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
+          DEFAULT: 'oklch(var(--sidebar-background))',
+          background: 'oklch(var(--sidebar-background))',
+          foreground: 'oklch(var(--sidebar-foreground))',
           primary: {
-            DEFAULT: 'hsl(var(--sidebar-primary))',
-            foreground: 'hsl(var(--sidebar-primary-foreground))',
+            DEFAULT: 'oklch(var(--sidebar-primary))',
+            foreground: 'oklch(var(--sidebar-primary-foreground))',
           },
           accent: {
-            DEFAULT: 'hsl(var(--sidebar-accent))',
-            foreground: 'hsl(var(--sidebar-accent-foreground))',
+            DEFAULT: 'oklch(var(--sidebar-accent))',
+            foreground: 'oklch(var(--sidebar-accent-foreground))',
           },
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
+          border: 'oklch(var(--sidebar-border))',
+          ring: 'oklch(var(--sidebar-ring))',
         },
       },
       borderRadius: {