@zl-ui-kit/theme 0.5.1 → 0.6.0

package/README.md

@@ -8,7 +8,7 @@ ZL UI 主题引擎（决策 D7）：内置 5 套主题（light/dark/red-light/re
 ## 快速上手
 
 ```ts
-import '@zl-ui-kit/theme/themes.css'                       // 或按需 '@zl-ui-kit/theme/light'
+import '@zl-ui-kit/theme/themes.css' // 或按需 '@zl-ui-kit/theme/light'
 import { setTheme, defineTheme, useTheme } from '@zl-ui-kit/theme'
 
 setTheme('dark')
@@ -20,12 +20,12 @@ defineTheme({ name: 'brand', base: 'light', colors: { primary: '#722ED1' }, appl
 
 ## 入口
 
-| 入口 | 内容 |
-| --- | --- |
-| `.` | 运行时 API（defineTheme/setTheme/useTheme/mix/generateElShades）+ 常量 |
-| `/light` `/dark` `/red-light` `/red-dark` `/blue` `/themes.css` | 每主题/合集预编译 CSS（变量 + reset + overrides） |
-| `/scss`（及 `/scss/*.scss`） | SCSS 工具（colorForEach/colorGradient/theme mixin/mapGet） |
-| `/assets/*` | 主题背景图 |
+| 入口                                                            | 内容                                                                   |
+| --------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| `.`                                                             | 运行时 API（defineTheme/setTheme/useTheme/mix/generateElShades）+ 常量 |
+| `/light` `/dark` `/red-light` `/red-dark` `/blue` `/themes.css` | 每主题/合集预编译 CSS（变量 + reset + overrides）                      |
+| `/scss`（及 `/scss/*.scss`）                                    | SCSS 工具（colorForEach/colorGradient/theme mixin/mapGet）             |
+| `/assets/*`                                                     | 主题背景图                                                             |
 
 ## 本地调试
 

package/dist/index.js

@@ -1132,7 +1132,11 @@ function parseColor(str) {
     let hex = s.slice(1);
     if (hex.length === 3)
       hex = hex.split("").map((c) => c + c).join("");
-    return [Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16)];
+    return [
+      Number.parseInt(hex.slice(0, 2), 16),
+      Number.parseInt(hex.slice(2, 4), 16),
+      Number.parseInt(hex.slice(4, 6), 16)
+    ];
   }
   const m = s.match(/rgba?\(([^)]+)\)/);
   if (m) {
@@ -1151,8 +1155,7 @@ function toHex([r, g, b]) {
 function mix(color1, color2, weight) {
   const c1 = parseColor(color1);
   const c2 = parseColor(color2);
-  if (!c1 || !c2)
-    return color1;
+  if (!c1 || !c2) return color1;
   const w = weight / 100;
   return toHex([c1[0] * (1 - w) + c2[0] * w, c1[1] * (1 - w) + c2[1] * w, c1[2] * (1 - w) + c2[2] * w]);
 }
@@ -1207,13 +1210,28 @@ function buildCssVars(resolved, themeName) {
       decls.push(`--el-color-${name}-${shade}: ${value};`);
     }
   }
-  const textMap = { primary: "text-1", regular: "text-2", secondary: "text-3", placeholder: "text-4", disabled: "text-5" };
-  for (const [el, token] of Object.entries(textMap))
-    decls.push(`--el-text-color-${el}: ${get(token)};`);
-  const borderMap = [["extra-light", "border-1"], ["lighter", "border-2"], ["light", "border-3"], ["", "border-4"]];
+  const textMap = {
+    primary: "text-1",
+    regular: "text-2",
+    secondary: "text-3",
+    placeholder: "text-4",
+    disabled: "text-5"
+  };
+  for (const [el, token] of Object.entries(textMap)) decls.push(`--el-text-color-${el}: ${get(token)};`);
+  const borderMap = [
+    ["extra-light", "border-1"],
+    ["lighter", "border-2"],
+    ["light", "border-3"],
+    ["", "border-4"]
+  ];
   for (const [suffix, token] of borderMap)
     decls.push(`--el-border-color${suffix ? `-${suffix}` : ""}: ${get(token)};`);
-  const fillMap = [["extra-light", "fill-1"], ["lighter", "fill-2"], ["light", "fill-3"], ["", "fill-4"]];
+  const fillMap = [
+    ["extra-light", "fill-1"],
+    ["lighter", "fill-2"],
+    ["light", "fill-3"],
+    ["", "fill-4"]
+  ];
   for (const [suffix, token] of fillMap)
     decls.push(`--el-fill-color${suffix ? `-${suffix}` : ""}: ${get(token)};`);
   decls.push(`--el-fill-color-blank: ${isDark ? get("bg-2") : "#ffffff"};`);
@@ -1257,8 +1275,7 @@ function defineTheme(options) {
       resolved[`color-${palette}-${level}`] = hex;
       const seedLevel = Number(level);
       for (let i = 1; i <= 10; i++) {
-        if (i === seedLevel)
-          continue;
+        if (i === seedLevel) continue;
         const weight = Math.abs(i - seedLevel) / 5 * 50;
         resolved[`color-${palette}-${i}`] = i < seedLevel ? mix("#ffffff", hex, 100 - weight) : mix("#000000", hex, 100 - weight);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/theme",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
   "description": "ZL UI 主题引擎：内置 5 套主题（light/dark/red-light/red-dark/blue），--zl-* 业务变量 + --el-* Element Plus 变量三层体系，支持运行时自定义主题（defineTheme/setTheme）",
   "license": "MIT",
@@ -41,8 +41,8 @@
     "cross-env": "^7.0.3",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
-    "@jichuang/tsconfig": "1.0.0",
-    "@jichuang/eslint-config": "1.0.0"
+    "@jichuang/eslint-config": "1.0.0",
+    "@jichuang/tsconfig": "1.0.0"
   },
   "repository": {
     "type": "git",

package/src/runtime/api.ts

@@ -50,8 +50,7 @@ const changeListeners = new Set<(theme: string) => void>()
 function initThemeFromStorage(): string {
   try {
     return localStorage.getItem(THEME_STORAGE_KEY) || 'light'
-  }
-  catch {
+  } catch {
     return 'light'
   }
 }
@@ -88,15 +87,30 @@ function buildCssVars(resolved: Record<string, string>, themeName: string): stri
     }
   }
 
-  const textMap: Record<string, string> = { primary: 'text-1', regular: 'text-2', secondary: 'text-3', placeholder: 'text-4', disabled: 'text-5' }
-  for (const [el, token] of Object.entries(textMap))
-    decls.push(`--el-text-color-${el}: ${get(token)};`)
+  const textMap: Record<string, string> = {
+    primary: 'text-1',
+    regular: 'text-2',
+    secondary: 'text-3',
+    placeholder: 'text-4',
+    disabled: 'text-5',
+  }
+  for (const [el, token] of Object.entries(textMap)) decls.push(`--el-text-color-${el}: ${get(token)};`)
 
-  const borderMap: Array<[string, string]> = [['extra-light', 'border-1'], ['lighter', 'border-2'], ['light', 'border-3'], ['', 'border-4']]
+  const borderMap: Array<[string, string]> = [
+    ['extra-light', 'border-1'],
+    ['lighter', 'border-2'],
+    ['light', 'border-3'],
+    ['', 'border-4'],
+  ]
   for (const [suffix, token] of borderMap)
     decls.push(`--el-border-color${suffix ? `-${suffix}` : ''}: ${get(token)};`)
 
-  const fillMap: Array<[string, string]> = [['extra-light', 'fill-1'], ['lighter', 'fill-2'], ['light', 'fill-3'], ['', 'fill-4']]
+  const fillMap: Array<[string, string]> = [
+    ['extra-light', 'fill-1'],
+    ['lighter', 'fill-2'],
+    ['light', 'fill-3'],
+    ['', 'fill-4'],
+  ]
   for (const [suffix, token] of fillMap)
     decls.push(`--el-fill-color${suffix ? `-${suffix}` : ''}: ${get(token)};`)
   decls.push(`--el-fill-color-blank: ${isDark ? get('bg-2') : '#ffffff'};`)
@@ -152,12 +166,10 @@ export function defineTheme(options: DefineThemeOptions): void {
       // 主色同时派生整组色板（浅→白、深→黑，各 10 级），保证 --zl-{palette}-N 可用
       const seedLevel = Number(level)
       for (let i = 1; i <= 10; i++) {
-        if (i === seedLevel)
-          continue
+        if (i === seedLevel) continue
         const weight = (Math.abs(i - seedLevel) / 5) * 50
-        resolved[`color-${palette}-${i}`] = i < seedLevel
-          ? mix('#ffffff', hex, 100 - weight)
-          : mix('#000000', hex, 100 - weight)
+        resolved[`color-${palette}-${i}`] =
+          i < seedLevel ? mix('#ffffff', hex, 100 - weight) : mix('#000000', hex, 100 - weight)
       }
     }
   }
@@ -189,21 +201,19 @@ export function setTheme(name: string, options: SetThemeOptions = {}): void {
   currentTheme.value = name
   if (name === 'light') {
     document.body.removeAttribute('data-theme')
-  }
-  else {
+  } else {
     document.body.setAttribute('data-theme', name)
   }
 
   if (persistenceEnabled.value || options.persist) {
     try {
       localStorage.setItem(THEME_STORAGE_KEY, name)
-    }
-    catch {
+    } catch {
       // storage 不可用时忽略
     }
   }
 
-  changeListeners.forEach(fn => fn(name))
+  changeListeners.forEach((fn) => fn(name))
 }
 
 /** 当前主题名 */

package/src/runtime/colors.ts

@@ -8,8 +8,15 @@ export function parseColor(str: string): [number, number, number] | null {
   if (s.startsWith('#')) {
     let hex = s.slice(1)
     if (hex.length === 3)
-      hex = hex.split('').map(c => c + c).join('')
-    return [Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16)]
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    return [
+      Number.parseInt(hex.slice(0, 2), 16),
+      Number.parseInt(hex.slice(2, 4), 16),
+      Number.parseInt(hex.slice(4, 6), 16),
+    ]
   }
   const m = s.match(/rgba?\(([^)]+)\)/)
   if (m) {
@@ -31,8 +38,7 @@ export function toHex([r, g, b]: [number, number, number]): string {
 export function mix(color1: string, color2: string, weight: number): string {
   const c1 = parseColor(color1)
   const c2 = parseColor(color2)
-  if (!c1 || !c2)
-    return color1
+  if (!c1 || !c2) return color1
   const w = weight / 100
   return toHex([c1[0] * (1 - w) + c2[0] * w, c1[1] * (1 - w) + c2[1] * w, c1[2] * (1 - w) + c2[2] * w])
 }