@zl-ui-kit/theme 0.24.2 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +3 -3
  2. package/src/generated/theme-light.css +8 -2
  3. package/src/generated/themes.css +8 -2
  4. package/src/runtime/api.ts +24 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zl-ui-kit/theme",
3
- "version": "0.24.2",
3
+ "version": "0.25.0",
4
4
  "type": "module",
5
5
  "description": "ZL UI 主题引擎：内置 5 套主题（light/dark/red-light/red-dark/blue），--zl-* 业务变量 + --el-* Element Plus 变量三层体系，支持运行时自定义主题（defineTheme/setTheme）",
6
6
  "license": "MIT",
@@ -41,8 +41,8 @@
41
41
  "cross-env": "^7.0.3",
42
42
  "tsup": "^8.3.5",
43
43
  "typescript": "^5.7.3",
44
- "@jichuang/tsconfig": "1.0.0",
45
- "@jichuang/eslint-config": "1.0.0"
44
+ "@jichuang/eslint-config": "1.0.0",
45
+ "@jichuang/tsconfig": "1.0.0"
46
46
  },
47
47
  "repository": {
48
48
  "type": "git",
package/src/generated/theme-light.css CHANGED
@@ -336,10 +336,16 @@ body {
336
336
  --el-border-radius-small: 2px;
337
337
  --zl-menu-hover-bg: var(--zl-fill-2);
338
338
  --zl-menu-text-color: var(--zl-text-1);
339
+ --zl-menu-active-bg: var(--zl-primary-1);
340
+ --zl-menu-active-color: var(--zl-primary-6);
341
+ --zl-menu-active-border-color: var(--zl-primary-6);
342
+ --zl-menu-icon-color: var(--zl-text-3);
343
+ --zl-menu-font-size: 14px;
344
+ --zl-menu-item-height: 40px;
339
345
  --zl-menu-trigger-arrow-color: #f6fafc;
340
346
  --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
341
- --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
342
- --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
347
+ --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-primary-1) 0%, var(--zl-bg-1) 100%);
348
+ --zl-layout-horizontal-header-bg: var(--zl-bg-1);
343
349
  --zl-radius-small: 2px;
344
350
  --zl-radius-base: 4px;
345
351
  --zl-radius-medium: 4px;
package/src/generated/themes.css CHANGED
@@ -1053,10 +1053,16 @@ body {
1053
1053
  --el-border-radius-small: 2px;
1054
1054
  --zl-menu-hover-bg: var(--zl-fill-2);
1055
1055
  --zl-menu-text-color: var(--zl-text-1);
1056
+ --zl-menu-active-bg: var(--zl-primary-1);
1057
+ --zl-menu-active-color: var(--zl-primary-6);
1058
+ --zl-menu-active-border-color: var(--zl-primary-6);
1059
+ --zl-menu-icon-color: var(--zl-text-3);
1060
+ --zl-menu-font-size: 14px;
1061
+ --zl-menu-item-height: 40px;
1056
1062
  --zl-menu-trigger-arrow-color: #f6fafc;
1057
1063
  --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
1058
- --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
1059
- --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
1064
+ --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-primary-1) 0%, var(--zl-bg-1) 100%);
1065
+ --zl-layout-horizontal-header-bg: var(--zl-bg-1);
1060
1066
  --zl-radius-small: 2px;
1061
1067
  --zl-radius-base: 4px;
1062
1068
  --zl-radius-medium: 4px;
package/src/runtime/api.ts CHANGED
@@ -141,15 +141,37 @@ function buildCssVars(resolved: Record<string, string>, themeName: string, baseN
141
141
  // 浅色/深色基线用弱对比底色；以彩色主题（red-light/blue…）为基线时侧栏是深色渐变，
142
142
  // 菜单文字必须转白 —— 所以这里要看基线名，不能只看自定义主题名。
143
143
  const isPlainBase = baseName === 'light' || baseName === 'dark'
144
+ const isLightBase = baseName === 'light'
144
145
  decls.push(`--zl-menu-hover-bg: ${isPlainBase ? 'var(--zl-fill-2)' : 'rgba(255, 255, 255, 0.2)'};`)
145
146
  decls.push(`--zl-menu-text-color: ${isPlainBase ? 'var(--zl-text-1)' : 'var(--zl-white)'};`)
147
+ // 浅色基线：主色选中态 + 浅色侧栏/顶栏（与内置 light 主题同构）；
148
+ // 其它基线显式回写中性值，避免继承 body 上的 light 令牌
149
+ if (isLightBase) {
150
+ decls.push('--zl-menu-active-bg: var(--zl-primary-1);')
151
+ decls.push('--zl-menu-active-color: var(--zl-primary-6);')
152
+ decls.push('--zl-menu-active-border-color: var(--zl-primary-6);')
153
+ decls.push('--zl-menu-icon-color: var(--zl-text-3);')
154
+ decls.push('--zl-menu-font-size: 14px;')
155
+ decls.push('--zl-menu-item-height: 40px;')
156
+ } else {
157
+ decls.push('--zl-menu-active-bg: var(--zl-menu-hover-bg);')
158
+ decls.push('--zl-menu-active-color: var(--zl-menu-text-color);')
159
+ decls.push('--zl-menu-active-border-color: transparent;')
160
+ decls.push('--zl-menu-icon-color: currentColor;')
161
+ decls.push('--zl-menu-font-size: 12px;')
162
+ decls.push('--zl-menu-item-height: 36px;')
163
+ }
146
164
  decls.push(`--zl-menu-trigger-arrow-color: ${isDark ? '#253044' : '#f6fafc'};`)
147
165
  decls.push(`--zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));`)
148
166
  decls.push(
149
- `--zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);`,
167
+ isLightBase
168
+ ? `--zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-primary-1) 0%, var(--zl-bg-1) 100%);`
169
+ : `--zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);`,
150
170
  )
151
171
  decls.push(
152
- `--zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);`,
172
+ isLightBase
173
+ ? `--zl-layout-horizontal-header-bg: var(--zl-bg-1);`
174
+ : `--zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);`,
153
175
  )
154
176
 
155
177
  return decls.join('\n ')