@zl-ui-kit/theme 0.5.0 → 0.6.0

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])
 }
@@ -50,12 +56,21 @@ export interface ElColorShades {
   'dark-2': string
 }
 
-/** EP 主色色阶：light-n = mix(白, 主色, n*10%)；dark-2 = mix(黑, 主色, 20%) */
-export function generateElShades(hex: string): ElColorShades {
+/**
+ * EP 主色色阶：**light-n 中 n 越大越"靠背景"** ——
+ * 浅色主题往白走（light-9 ≈ 混 90% 白），深色主题往黑走（light-9 ≈ 混 90% 黑）；
+ * dark-2 则相反：浅色下更深（混黑），深色下更浅（混白）。
+ *
+ * ⚠️ mix(c1, c2, w) 的 w 是"混入 c2 的比例"，与 light-n 的 n 方向相反，
+ * 故必须用 (10 - i) * 10。写成 i * 10 会颠倒色阶，导致 el-tag / el-message /
+ * el-alert 的 light-9 背景变深、与同色系文字几乎同色（"灰蒙蒙看不清"）。
+ */
+export function generateElShades(hex: string, isDark = false): ElColorShades {
   const shades = {} as ElColorShades
+  const toBg = isDark ? '#000000' : '#ffffff'
   for (let i = 1; i <= 9; i++) {
-    shades[`light-${i}` as keyof ElColorShades] = mix('#ffffff', hex, i * 10)
+    shades[`light-${i}` as keyof ElColorShades] = mix(toBg, hex, (10 - i) * 10)
   }
-  shades['dark-2'] = mix('#000000', hex, 20)
+  shades['dark-2'] = mix(isDark ? '#ffffff' : '#000000', hex, 20)
   return shades
 }