@zl-ui-kit/theme 0.6.3 → 0.7.1

package/dist/index.js

@@ -1185,8 +1185,8 @@ function initThemeFromStorage() {
     return "light";
   }
 }
-function buildCssVars(resolved, themeName) {
-  const isDark = themeName.includes("dark");
+function buildCssVars(resolved, themeName, baseName = themeName) {
+  const isDark = themeName.includes("dark") || baseName.includes("dark");
   const get = (k, fallback = "") => resolved[`color-${k}`] ?? fallback;
   const getLevel = (name, level) => resolved[`color-${name}-${level}`] ?? "";
   const decls = [];
@@ -1202,6 +1202,9 @@ function buildCssVars(resolved, themeName) {
     ["success", getLevel("green", 6)],
     ["warning", getLevel("orange", 6)],
     ["danger", getLevel("red", 6)],
+    // EP 2.14 起 error 是规范名（el-tag--error / el-message--error 走它），
+    // 只给 danger 会让这些组件回落到 EP 默认浅色底，深色主题下尤其刺眼
+    ["error", getLevel("red", 6)],
     ["info", getLevel("gray", 6)]
   ];
   for (const [name, hex] of semantic) {
@@ -1215,14 +1218,18 @@ function buildCssVars(resolved, themeName) {
     regular: "text-2",
     secondary: "text-3",
     placeholder: "text-4",
-    disabled: "text-5"
+    // 没有 text-5：留空会产出 `--el-text-color-disabled: ;` 这种非法声明，
+    // 浏览器整条丢弃，EP 内部又会回落默认值 —— 直接复用 placeholder
+    disabled: "text-4"
   };
   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"]
+    ["", "border-4"],
+    ["dark", "border-4"],
+    ["darker", "border-4"]
   ];
   for (const [suffix, token] of borderMap)
     decls.push(`--el-border-color${suffix ? `-${suffix}` : ""}: ${get(token)};`);
@@ -1230,7 +1237,8 @@ function buildCssVars(resolved, themeName) {
     ["extra-light", "fill-1"],
     ["lighter", "fill-2"],
     ["light", "fill-3"],
-    ["", "fill-4"]
+    ["", "fill-4"],
+    ["dark", "fill-4"]
   ];
   for (const [suffix, token] of fillMap)
     decls.push(`--el-fill-color${suffix ? `-${suffix}` : ""}: ${get(token)};`);
@@ -1240,7 +1248,19 @@ function buildCssVars(resolved, 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(`color-scheme: ${isDark ? "dark" : "light"};`);
+  const isPlainBase = baseName === "light" || baseName === "dark";
+  decls.push(`--zl-menu-hover-bg: ${isPlainBase ? "var(--zl-fill-2)" : "rgba(255, 255, 255, 0.2)"};`);
+  decls.push(`--zl-menu-text-color: ${isPlainBase ? "var(--zl-text-1)" : "var(--zl-white)"};`);
+  decls.push(`--zl-menu-trigger-arrow-color: ${isDark ? "#253044" : "#f6fafc"};`);
+  decls.push(`--zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));`);
+  decls.push(
+    `--zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);`
+  );
+  decls.push(
+    `--zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);`
+  );
   return decls.join("\n    ");
 }
 function injectStyle(name, cssText) {
@@ -1254,6 +1274,7 @@ function injectStyle(name, cssText) {
   style.textContent = cssText;
 }
 function defineTheme(options) {
+  var _a;
   const { name, base = "light", colors = {}, tokens = {}, apply = false } = options;
   if (THEMES.includes(name) && !customThemes.has(name)) {
     throw new Error(`\u4E3B\u9898 ${name} \u4E3A\u5185\u7F6E\u4E3B\u9898\uFF0C\u4E0D\u53EF\u8986\u76D6`);
@@ -1262,6 +1283,19 @@ function defineTheme(options) {
   for (const [key, value] of Object.entries(tokens)) {
     resolved[`color-${key.replace(/^color-/, "")}`] = value;
   }
+  const shapeTokens = {
+    "radius-small": "2px",
+    "radius-base": "4px",
+    "radius-medium": "4px",
+    "radius-large": "6px",
+    "radius-xl": "12px",
+    "radius-round": "99px",
+    "font-family-code": "Consolas, 'SFMono-Regular', Menlo, monospace",
+    "slogan-font-family": "'PingFang SC', 'Microsoft YaHei', sans-serif"
+  };
+  for (const [key, value] of Object.entries(shapeTokens)) {
+    resolved[_a = `color-${key}`] ?? (resolved[_a] = value);
+  }
   const colorEntries = [
     ["primary", "modo", "6"],
     ["success", "green", "6"],
@@ -1286,7 +1320,7 @@ function defineTheme(options) {
     resolved["color-bg-2"] = colors.bg;
   }
   const cssText = `body[data-theme='${name}'] {
-    ${buildCssVars(resolved, name)}
+    ${buildCssVars(resolved, name, base)}
 }`;
   injectStyle(name, cssText);
   customThemes.set(name, { cssText });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/theme",
-  "version": "0.6.3",
+  "version": "0.7.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

@@ -312,7 +312,7 @@ body[data-theme='blue'] {
   --el-text-color-regular: #4D5E7D;
   --el-text-color-secondary: #79879C;
   --el-text-color-placeholder: #B3C0CC;
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: #B3C0CC;
   --el-border-color-extra-light: #EFF4F9;
   --el-border-color-lighter: #E3E9EF;
   --el-border-color-light: #B3C0CC;
@@ -338,6 +338,14 @@ body[data-theme='blue'] {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /*

package/src/generated/theme-dark.css

@@ -312,7 +312,7 @@ body[data-theme='dark'] {
   --el-text-color-regular: rgba(255,255,255,0.7);
   --el-text-color-secondary: rgba(255,255,255,0.5);
   --el-text-color-placeholder: rgba(255,255,255,0.3);
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: rgba(255,255,255,0.3);
   --el-border-color-extra-light: #35435E;
   --el-border-color-lighter: #4D5E7D;
   --el-border-color-light: #5E708A;
@@ -338,6 +338,14 @@ body[data-theme='dark'] {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /*

package/src/generated/theme-light.css

@@ -312,7 +312,7 @@ body {
   --el-text-color-regular: #4D5E7D;
   --el-text-color-secondary: #79879C;
   --el-text-color-placeholder: #B3C0CC;
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: #B3C0CC;
   --el-border-color-extra-light: #EFF4F9;
   --el-border-color-lighter: #E3E9EF;
   --el-border-color-light: #B3C0CC;
@@ -338,6 +338,14 @@ body {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /*

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

@@ -312,7 +312,7 @@ body[data-theme='red-dark'] {
   --el-text-color-regular: rgba(255,255,255,0.7);
   --el-text-color-secondary: rgba(255,255,255,0.5);
   --el-text-color-placeholder: rgba(255,255,255,0.3);
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: rgba(255,255,255,0.3);
   --el-border-color-extra-light: #35435E;
   --el-border-color-lighter: #4D5E7D;
   --el-border-color-light: #5E708A;
@@ -338,6 +338,14 @@ body[data-theme='red-dark'] {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /*

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

@@ -312,7 +312,7 @@ body[data-theme='red-light'] {
   --el-text-color-regular: #4D5E7D;
   --el-text-color-secondary: #79879C;
   --el-text-color-placeholder: #B3C0CC;
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: #B3C0CC;
   --el-border-color-extra-light: #EFF4F9;
   --el-border-color-lighter: #E3E9EF;
   --el-border-color-light: #B3C0CC;
@@ -338,6 +338,14 @@ body[data-theme='red-light'] {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /*

package/src/generated/themes.css

@@ -312,7 +312,7 @@ body[data-theme='blue'] {
   --el-text-color-regular: #4D5E7D;
   --el-text-color-secondary: #79879C;
   --el-text-color-placeholder: #B3C0CC;
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: #B3C0CC;
   --el-border-color-extra-light: #EFF4F9;
   --el-border-color-lighter: #E3E9EF;
   --el-border-color-light: #B3C0CC;
@@ -338,6 +338,14 @@ body[data-theme='blue'] {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /* dark 主题（由 scripts/themegen.mjs 生成，DO NOT EDIT） */
@@ -654,7 +662,7 @@ body[data-theme='dark'] {
   --el-text-color-regular: rgba(255,255,255,0.7);
   --el-text-color-secondary: rgba(255,255,255,0.5);
   --el-text-color-placeholder: rgba(255,255,255,0.3);
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: rgba(255,255,255,0.3);
   --el-border-color-extra-light: #35435E;
   --el-border-color-lighter: #4D5E7D;
   --el-border-color-light: #5E708A;
@@ -680,6 +688,14 @@ body[data-theme='dark'] {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /* light 主题（由 scripts/themegen.mjs 生成，DO NOT EDIT） */
@@ -996,7 +1012,7 @@ body {
   --el-text-color-regular: #4D5E7D;
   --el-text-color-secondary: #79879C;
   --el-text-color-placeholder: #B3C0CC;
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: #B3C0CC;
   --el-border-color-extra-light: #EFF4F9;
   --el-border-color-lighter: #E3E9EF;
   --el-border-color-light: #B3C0CC;
@@ -1022,6 +1038,14 @@ body {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /* red-dark 主题（由 scripts/themegen.mjs 生成，DO NOT EDIT） */
@@ -1338,7 +1362,7 @@ body[data-theme='red-dark'] {
   --el-text-color-regular: rgba(255,255,255,0.7);
   --el-text-color-secondary: rgba(255,255,255,0.5);
   --el-text-color-placeholder: rgba(255,255,255,0.3);
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: rgba(255,255,255,0.3);
   --el-border-color-extra-light: #35435E;
   --el-border-color-lighter: #4D5E7D;
   --el-border-color-light: #5E708A;
@@ -1364,6 +1388,14 @@ body[data-theme='red-dark'] {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 /* red-light 主题（由 scripts/themegen.mjs 生成，DO NOT EDIT） */
@@ -1680,7 +1712,7 @@ body[data-theme='red-light'] {
   --el-text-color-regular: #4D5E7D;
   --el-text-color-secondary: #79879C;
   --el-text-color-placeholder: #B3C0CC;
-  --el-text-color-disabled: ;
+  --el-text-color-disabled: #B3C0CC;
   --el-border-color-extra-light: #EFF4F9;
   --el-border-color-lighter: #E3E9EF;
   --el-border-color-light: #B3C0CC;
@@ -1706,4 +1738,12 @@ body[data-theme='red-light'] {
   --zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));
   --zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);
   --zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);
+  --zl-radius-small: 2px;
+  --zl-radius-base: 4px;
+  --zl-radius-medium: 4px;
+  --zl-radius-large: 6px;
+  --zl-radius-xl: 12px;
+  --zl-radius-round: 99px;
+  --zl-font-family-code: Consolas, 'SFMono-Regular', Menlo, monospace;
+  --zl-slogan-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }

package/src/runtime/api.ts

@@ -56,8 +56,8 @@ function initThemeFromStorage(): string {
 }
 
 /** 生成某主题完整变量声明文本（--zl-* + --el-* + 布局资产变量） */
-function buildCssVars(resolved: Record<string, string>, themeName: string): string {
-  const isDark = themeName.includes('dark')
+function buildCssVars(resolved: Record<string, string>, themeName: string, baseName = themeName): string {
+  const isDark = themeName.includes('dark') || baseName.includes('dark')
   const get = (k: string, fallback = '') => resolved[`color-${k}`] ?? fallback
   const getLevel = (name: string, level: number) => resolved[`color-${name}-${level}`] ?? ''
 
@@ -78,6 +78,9 @@ function buildCssVars(resolved: Record<string, string>, themeName: string): stri
     ['success', getLevel('green', 6)],
     ['warning', getLevel('orange', 6)],
     ['danger', getLevel('red', 6)],
+    // EP 2.14 起 error 是规范名（el-tag--error / el-message--error 走它），
+    // 只给 danger 会让这些组件回落到 EP 默认浅色底，深色主题下尤其刺眼
+    ['error', getLevel('red', 6)],
     ['info', getLevel('gray', 6)],
   ]
   for (const [name, hex] of semantic) {
@@ -92,7 +95,9 @@ function buildCssVars(resolved: Record<string, string>, themeName: string): stri
     regular: 'text-2',
     secondary: 'text-3',
     placeholder: 'text-4',
-    disabled: 'text-5',
+    // 没有 text-5：留空会产出 `--el-text-color-disabled: ;` 这种非法声明，
+    // 浏览器整条丢弃，EP 内部又会回落默认值 —— 直接复用 placeholder
+    disabled: 'text-4',
   }
   for (const [el, token] of Object.entries(textMap)) decls.push(`--el-text-color-${el}: ${get(token)};`)
 
@@ -101,6 +106,8 @@ function buildCssVars(resolved: Record<string, string>, themeName: string): stri
     ['lighter', 'border-2'],
     ['light', 'border-3'],
     ['', 'border-4'],
+    ['dark', 'border-4'],
+    ['darker', 'border-4'],
   ]
   for (const [suffix, token] of borderMap)
     decls.push(`--el-border-color${suffix ? `-${suffix}` : ''}: ${get(token)};`)
@@ -110,6 +117,7 @@ function buildCssVars(resolved: Record<string, string>, themeName: string): stri
     ['lighter', 'fill-2'],
     ['light', 'fill-3'],
     ['', 'fill-4'],
+    ['dark', 'fill-4'],
   ]
   for (const [suffix, token] of fillMap)
     decls.push(`--el-fill-color${suffix ? `-${suffix}` : ''}: ${get(token)};`)
@@ -120,8 +128,25 @@ function buildCssVars(resolved: Record<string, string>, themeName: string): stri
   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(`color-scheme: ${isDark ? 'dark' : 'light'};`)
 
+  // 布局 / 菜单资产变量：内置主题由 scripts/themegen.mjs 产出，运行时主题必须同构，
+  // 否则 defineTheme 造出的主题会把侧栏与菜单底色整块丢掉（退化成透明）。
+  // 浅色/深色基线用弱对比底色；以彩色主题（red-light/blue…）为基线时侧栏是深色渐变，
+  // 菜单文字必须转白 —— 所以这里要看基线名，不能只看自定义主题名。
+  const isPlainBase = baseName === 'light' || baseName === 'dark'
+  decls.push(`--zl-menu-hover-bg: ${isPlainBase ? 'var(--zl-fill-2)' : 'rgba(255, 255, 255, 0.2)'};`)
+  decls.push(`--zl-menu-text-color: ${isPlainBase ? 'var(--zl-text-1)' : 'var(--zl-white)'};`)
+  decls.push(`--zl-menu-trigger-arrow-color: ${isDark ? '#253044' : '#f6fafc'};`)
+  decls.push(`--zl-menu-trigger-bg: linear-gradient(135deg, var(--zl-modo-5), var(--zl-modo-7));`)
+  decls.push(
+    `--zl-layout-vertical-aside-bg: linear-gradient(180deg, var(--zl-modo-7) 0%, var(--zl-modo-9) 100%);`,
+  )
+  decls.push(
+    `--zl-layout-horizontal-header-bg: linear-gradient(90deg, var(--zl-modo-7) 0%, var(--zl-modo-6) 60%, var(--zl-modo-5) 100%);`,
+  )
+
   return decls.join('\n    ')
 }
 
@@ -152,6 +177,23 @@ export function defineTheme(options: DefineThemeOptions): void {
     resolved[`color-${key.replace(/^color-/, '')}`] = value
   }
 
+  // 形状 / 字体 token：与内置主题同构产出。组件里写的是 `var(--zl-radius-large, 6px)`
+  // 这类带兜底的形式，此前这些 token 从未产出，等于「值被兜底写死、宿主改不了」。
+  // 用 `??=` 播种：`tokens: { 'radius-large': '10px' }` 这类覆盖仍然生效。
+  const shapeTokens: Record<string, string> = {
+    'radius-small': '2px',
+    'radius-base': '4px',
+    'radius-medium': '4px',
+    'radius-large': '6px',
+    'radius-xl': '12px',
+    'radius-round': '99px',
+    'font-family-code': "Consolas, 'SFMono-Regular', Menlo, monospace",
+    'slogan-font-family': "'PingFang SC', 'Microsoft YaHei', sans-serif",
+  }
+  for (const [key, value] of Object.entries(shapeTokens)) {
+    resolved[`color-${key}`] ??= value
+  }
+
   const colorEntries: Array<[keyof DefineThemeColors, string, string]> = [
     ['primary', 'modo', '6'],
     ['success', 'green', '6'],
@@ -179,7 +221,7 @@ export function defineTheme(options: DefineThemeOptions): void {
     resolved['color-bg-2'] = colors.bg
   }
 
-  const cssText = `body[data-theme='${name}'] {\n    ${buildCssVars(resolved, name)}\n}`
+  const cssText = `body[data-theme='${name}'] {\n    ${buildCssVars(resolved, name, base)}\n}`
   injectStyle(name, cssText)
   customThemes.set(name, { cssText })
   if (!THEMES.includes(name)) {