@zl-ui-kit/theme 0.21.1 → 0.22.1

package/dist/index.js

@@ -1248,7 +1248,7 @@ function buildCssVars(resolved, themeName, baseName = themeName) {
   decls.push(`--el-bg-color-overlay: ${get("bg-3")};`);
   decls.push(`--el-color-white: ${isDark ? "#141414" : "#ffffff"};`);
   decls.push(`--el-color-black: ${isDark ? "#ffffff" : "#000000"};`);
-  decls.push(`--el-mask-color: rgb(0, 0, 0, ${isDark ? "0.8" : "0.5"});`);
+  decls.push(`--el-mask-color: rgb(0, 0, 0, ${isDark ? "0.3" : "0.1"});`);
   decls.push(`color-scheme: ${isDark ? "dark" : "light"};`);
   decls.push(`--el-border-radius-base: ${get("radius-base")};`);
   decls.push(`--el-border-radius-small: ${get("radius-small")};`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/theme",
-  "version": "0.21.1",
+  "version": "0.22.1",
   "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/eslint-config": "1.0.0",
-    "@jichuang/tsconfig": "1.0.0"
+    "@jichuang/tsconfig": "1.0.0",
+    "@jichuang/eslint-config": "1.0.0"
   },
   "repository": {
     "type": "git",

package/src/generated/theme-blue.css

@@ -330,7 +330,7 @@ body[data-theme='blue'] {
   --el-bg-color-overlay: #FFFFFF;
   --el-color-white: #ffffff;
   --el-color-black: #000000;
-  --el-mask-color: rgb(0, 0, 0, 0.5);
+  --el-mask-color: rgb(0, 0, 0, 0.1);
   color-scheme: light;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;

package/src/generated/theme-dark.css

@@ -330,7 +330,7 @@ body[data-theme='dark'] {
   --el-bg-color-overlay: #313E56;
   --el-color-white: #141414;
   --el-color-black: #ffffff;
-  --el-mask-color: rgb(0, 0, 0, 0.8);
+  --el-mask-color: rgb(0, 0, 0, 0.3);
   color-scheme: dark;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;

package/src/generated/theme-light.css

@@ -330,7 +330,7 @@ body {
   --el-bg-color-overlay: #FFFFFF;
   --el-color-white: #ffffff;
   --el-color-black: #000000;
-  --el-mask-color: rgb(0, 0, 0, 0.5);
+  --el-mask-color: rgb(0, 0, 0, 0.1);
   color-scheme: light;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;

package/src/generated/theme-red-dark.css

@@ -330,7 +330,7 @@ body[data-theme='red-dark'] {
   --el-bg-color-overlay: #313E56;
   --el-color-white: #141414;
   --el-color-black: #ffffff;
-  --el-mask-color: rgb(0, 0, 0, 0.8);
+  --el-mask-color: rgb(0, 0, 0, 0.3);
   color-scheme: dark;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;

package/src/generated/theme-red-light.css

@@ -330,7 +330,7 @@ body[data-theme='red-light'] {
   --el-bg-color-overlay: #FFFFFF;
   --el-color-white: #ffffff;
   --el-color-black: #000000;
-  --el-mask-color: rgb(0, 0, 0, 0.5);
+  --el-mask-color: rgb(0, 0, 0, 0.1);
   color-scheme: light;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;

package/src/generated/themes.css

@@ -330,7 +330,7 @@ body[data-theme='blue'] {
   --el-bg-color-overlay: #FFFFFF;
   --el-color-white: #ffffff;
   --el-color-black: #000000;
-  --el-mask-color: rgb(0, 0, 0, 0.5);
+  --el-mask-color: rgb(0, 0, 0, 0.1);
   color-scheme: light;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;
@@ -695,7 +695,7 @@ body[data-theme='dark'] {
   --el-bg-color-overlay: #313E56;
   --el-color-white: #141414;
   --el-color-black: #ffffff;
-  --el-mask-color: rgb(0, 0, 0, 0.8);
+  --el-mask-color: rgb(0, 0, 0, 0.3);
   color-scheme: dark;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;
@@ -1047,7 +1047,7 @@ body {
   --el-bg-color-overlay: #FFFFFF;
   --el-color-white: #ffffff;
   --el-color-black: #000000;
-  --el-mask-color: rgb(0, 0, 0, 0.5);
+  --el-mask-color: rgb(0, 0, 0, 0.1);
   color-scheme: light;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;
@@ -1412,7 +1412,7 @@ body[data-theme='red-dark'] {
   --el-bg-color-overlay: #313E56;
   --el-color-white: #141414;
   --el-color-black: #ffffff;
-  --el-mask-color: rgb(0, 0, 0, 0.8);
+  --el-mask-color: rgb(0, 0, 0, 0.3);
   color-scheme: dark;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;
@@ -1764,7 +1764,7 @@ body[data-theme='red-light'] {
   --el-bg-color-overlay: #FFFFFF;
   --el-color-white: #ffffff;
   --el-color-black: #000000;
-  --el-mask-color: rgb(0, 0, 0, 0.5);
+  --el-mask-color: rgb(0, 0, 0, 0.1);
   color-scheme: light;
   --el-border-radius-base: 4px;
   --el-border-radius-small: 2px;

package/src/runtime/api.ts

@@ -128,7 +128,7 @@ function buildCssVars(resolved: Record<string, string>, themeName: string, baseN
   decls.push(`--el-bg-color-overlay: ${get('bg-3')};`)
   decls.push(`--el-color-white: ${isDark ? '#141414' : '#ffffff'};`)
   decls.push(`--el-color-black: ${isDark ? '#ffffff' : '#000000'};`)
-  decls.push(`--el-mask-color: rgb(0, 0, 0, ${isDark ? '0.8' : '0.5'});`)
+  decls.push(`--el-mask-color: rgb(0, 0, 0, ${isDark ? '0.3' : '0.1'});`)
   decls.push(`color-scheme: ${isDark ? 'dark' : 'light'};`)
   // EP 圆角 ← 形状 token（与内置主题产物同构）：`defineTheme({ tokens: { 'radius-base': ... } })`
   // 即可同时驱动 kit 组件与 Element Plus 控件，宿主不必再用 CSS 选择器抢优先级。