@gyyxds/zy-ui 0.0.3 → 0.1.0

package/dist/zy-ui/themes/solid.css

@@ -34,13 +34,13 @@ html[data-zy-theme='solid'] {
   --zy-key-edge: rgba(255, 255, 255, 0.95);
   /*
    * ---------- 键帽高度：挤出底座的厚度，三档 大 / 正常 / 小 ----------
-   * 大   = 卡片（--zy-card-fill-lift）
-   * 正常 = 按钮与控件（--zy-key-lift-btn、--zy-shadow-card）
+   * 大   = 浮板 / 对话框（--zy-key-lift-lg、--zy-shadow-float）
+   * 正常 = 按钮 / 控件 / 卡片（--zy-key-lift-btn、--zy-card-fill-lift、--zy-shadow-card）
    * 小   = 标签与角标（--zy-tag-fill-lift）、以及复选框 / 单选 / 分页这类小件
    * 组件自己的尺寸变体在各自档位上再 ±1 档（如 large 标签 = 正常、small 标签 = 小）。
    */
-  --zy-key-lift-lg: 6px; /* 大 · 卡片 */
-  --zy-key-lift: 4px; /* 正常 · 按钮 / 控件 */
+  --zy-key-lift-lg: 6px; /* 大 · 浮板 / 对话框 */
+  --zy-key-lift: 4px; /* 正常 · 按钮 / 控件 / 卡片 */
   --zy-key-lift-sm: 2px; /* 小 · 标签 / 角标 / 小件 */
   --zy-key-soft: 0 10px 18px rgba(15, 23, 42, 0.1);
   --zy-key-down: 0 2px 6px rgba(15, 23, 42, 0.14);
@@ -426,6 +426,134 @@ html[data-zy-theme='solid'] .zy-btn.is-fill .zy-btn-fill-label {
  * 悬停铺色、按下、禁用，全部交给组件自己那套数值。主题只声明「默认档也用这套材质」。
  */
 
+/* ============================================================
+ * 1·凸 · 默认键（type 为空）的液态玻璃面 —— 仅 B 浅色
+ * ------------------------------------------------------------
+ * 默认键没有语义色。这里把它做成一块**实色玻璃**：四边由面本身收，
+ * 不靠描边 / 内影，轮廓与 Primary 一样锐利；表面是平的，按压只下沉、不鼓。
+ *
+ *   面     #cfe0f0（原半透明面在 B 桌面上的合成色）
+ *   雾     ::before，竖向白，横向 mask 收进中间；向下收透
+ *   大弧   ::after，主题两条弧的路径，填白色渐变，收进边内 1px
+ *   底光   主题 --zy-key-gloss
+ *   底座   面色合成色 × 82% + 黑（与 Primary 同一条公式）
+ *   按下   贴平：底座收平，不保留落地影
+ *
+ * 暗色档、plain / dashed / sweep / fill 仍走原主题，不在此规则内。
+ * ::before 在 is-loading 下让给 Element 的 loading 遮罩；雾 / 弧 / 文字
+ * 都排除 loading，避免盖住遮罩。
+ * ============================================================ */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link) {
+  /* 实色玻璃面：四边由实色面收，和 Primary 的面边一样硬 */
+  --zy-key-glass-face: #cfe0f0;
+  /* 底座：面色合成色 × 82% + 黑，与 Primary 同一条公式 */
+  --zy-key-glass-base: color-mix(in srgb, #c6d8ea 82%, #000);
+  /* 乳白雾：中间一团，上下收干净；横向 24%–76% 收进中间 */
+  --zy-key-glass-fog: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.88) 26%,
+    rgba(255, 255, 255, 0.82) 60%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --zy-key-glass-fog-mask: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0) 0%,
+    #000 24%,
+    #000 76%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  /* 两块大弧形白高光：与主题同路径，填充改成白色渐变 */
+  --zy-key-glass-arc: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.52) 0%,
+    rgba(255, 255, 255, 0.34) 45%,
+    rgba(255, 255, 255, 0.22) 100%
+  );
+  --zy-key-glass-arc-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 487'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M0 .3c67 2.1 134.1 4.3 186.3 37 52.2 32.7 89.6 95.8 112.8 150.6 23.2 54.8 32.3 101.4 61.2 149.9 28.9 48.4 77.7 98.8 126.4 149.2H0V.3z'/%3E%3C/svg%3E");
+  --zy-key-glass-arc-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 487'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M487 486.7c-66.1-3.6-132.3-7.3-186.3-37s-95.9-85.3-126.2-137.2c-30.4-51.8-49.3-99.9-76.5-151.4C70.9 109.6 35.6 54.8.3 0H487v486.7z'/%3E%3C/svg%3E");
+
+  position: relative;
+  /* ::before 的负层级落在「按钮背景之上、文字之下」 */
+  isolation: isolate;
+  background-color: var(--zy-key-glass-face) !important;
+  /* 底部高光仍用主题那张图；面是实色，四边不靠底色透出来 */
+  background-image: var(--zy-key-gloss) !important;
+  background-repeat: no-repeat !important;
+  background-position: left top !important;
+  background-size: 100% 100% !important;
+  box-shadow:
+    0 var(--zy-key-lift-btn) 0 var(--zy-key-glass-base),
+    0 6px 14px rgba(15, 23, 42, 0.25) !important;
+}
+
+/* 乳白雾：单独一层，横向被 mask 收进中间；loading 下让给 Element 的遮罩 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-loading)::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--zy-key-glass-fog);
+  -webkit-mask-image: var(--zy-key-glass-fog-mask);
+  mask-image: var(--zy-key-glass-fog-mask);
+  pointer-events: none;
+}
+
+/* 两块大弧形白高光：收进边内 1px，最外圈留给实色面，四边才锐利 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-loading)::after {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  z-index: 1;
+  border-radius: inherit;
+  background: var(--zy-key-glass-arc);
+  -webkit-mask-image: var(--zy-key-glass-arc-l), var(--zy-key-glass-arc-r);
+  mask-image: var(--zy-key-glass-arc-l), var(--zy-key-glass-arc-r);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position:
+    left calc(var(--zy-key-h) * -0.18) bottom 0,
+    right calc(var(--zy-key-h) * -0.27) top 0;
+  mask-position:
+    left calc(var(--zy-key-h) * -0.18) bottom 0,
+    right calc(var(--zy-key-h) * -0.27) top 0;
+  -webkit-mask-size:
+    var(--zy-key-h) 100%,
+    calc(var(--zy-key-h) * 1.1) 100%;
+  mask-size:
+    var(--zy-key-h) 100%,
+    calc(var(--zy-key-h) * 1.1) 100%;
+  pointer-events: none;
+}
+
+/* 文字 / 图标压在弧之上；loading 下交回 Element 的遮罩层级 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-loading)
+  .zy-btn-text,
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-loading)
+  > .el-icon {
+  position: relative;
+  z-index: 2;
+}
+
+/* 按下：贴平桌面 —— 底座收平，落地影去掉；位移 / 时长仍走主题 active 规则 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info).is-press:not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):not(.is-disabled):active {
+  box-shadow: 0 0 0 var(--zy-key-glass-base) !important;
+}
+
+/* 焦点环：玻璃面不能用主题的白环，改用品色 */
+html[data-zy-theme='solid']:not(.dark)
+  .zy-btn.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-plain):not(.is-dashed):not(.is-sweep):not(.is-fill):not(.is-text):not(.is-link):focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--zy-brand) 55%, transparent);
+  outline-offset: 3px;
+}
+
 /* ============================================================
  * 2 · 图标 —— 无材质，只说明线宽与尺寸（见规范文档）
  * ============================================================ */
@@ -721,6 +849,34 @@ html[data-zy-theme='solid'] .zy-switch-track {
     0 10px 18px rgba(15, 23, 42, 0.22);
 }
 
+/*
+ * 基础款选中轨道 = primary 键面：面色与键帽图层都和按钮共用同一套令牌。
+ * 原稿只有一块平色；这里只补 primary 的两侧 10% 白弧 + 底部渐层，几何与动效不动。
+ */
+html[data-zy-theme='solid'] .zy-switch--default .zy-switch-default-track {
+  --zy-key-h: calc(50px * var(--zy-switch-scale));
+  --zy-key-lift-now: 0px;
+}
+
+html[data-zy-theme='solid']
+  .zy-switch--default
+  .zy-switch-input:checked
+  + .zy-switch-default-track {
+  background-color: var(--zy-brand);
+  background-image: var(--zy-key-stack);
+  background-repeat: no-repeat;
+  background-position: var(--zy-key-stack-pos);
+  background-size: var(--zy-key-stack-size);
+}
+
+/* 深色档的 primary 键面走品牌深档，开关跟着换 */
+html.dark[data-zy-theme='solid']
+  .zy-switch--default
+  .zy-switch-input:checked
+  + .zy-switch-default-track {
+  background-color: var(--zy-brand-key);
+}
+
 /* ============================================================
  * 8 · 单选框 —— 未选是槽里的小坑，选中是上色键
  * ============================================================ */
@@ -871,7 +1027,7 @@ html.dark[data-zy-theme='solid'] .zy-radio-group:has(.el-radio-button) .zy-radio
 }
 
 /* ============================================================
- * 9 · 卡片 —— 大键帽：白面 + 挤出边 + 两侧白弧（弧块由组件自带）
+ * 9 · 卡片 —— 正常键帽：白面 + 挤出边 + 两侧白弧（弧块由组件自带）
  * ============================================================ */
 
 html[data-zy-theme='solid'] .zy-card {
@@ -879,8 +1035,8 @@ html[data-zy-theme='solid'] .zy-card {
   --zy-card-fill-clr: var(--zy-key-face);
   --zy-card-fill-ink: var(--zy-ink);
   --zy-card-fill-line: rgba(15, 23, 42, 0.1);
-  /* 键帽高度「大」档：卡片底座 6px，取自主题令牌，不在组件里另写一份数值 */
-  --zy-card-fill-lift: var(--zy-key-lift-lg);
+  /* 正常档：卡片底座 4px，与按钮 / 控件同一档 */
+  --zy-card-fill-lift: var(--zy-key-lift);
 }
 
 /* ============================================================
@@ -1557,6 +1713,71 @@ html[data-zy-theme='solid'] .zy-pagination .el-pagination__jump {
   color: var(--zy-muted);
 }
 
+/* 每页条数：与选择器同一条槽形控件 */
+html[data-zy-theme='solid'] .zy-pagination .el-pagination__sizes .el-select__wrapper {
+  min-height: 28px;
+  height: 28px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--zy-radius-sm);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow-sm);
+  font-family: var(--zy-font-sans);
+  transition:
+    box-shadow var(--zy-duration-press) var(--zy-ease-soft),
+    background-color var(--zy-duration-press) var(--zy-ease-soft);
+}
+
+html[data-zy-theme='solid'] .zy-pagination .el-pagination__sizes .el-select__wrapper:hover {
+  box-shadow: var(--zy-slot-shadow-sm);
+}
+
+html[data-zy-theme='solid'] .zy-pagination .el-pagination__sizes .el-select__wrapper.is-focused,
+html[data-zy-theme='solid'] .zy-pagination .el-pagination__sizes .el-select__wrapper:focus-within {
+  box-shadow:
+    var(--zy-slot-shadow-sm),
+    0 0 0 2px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+}
+
+html[data-zy-theme='solid'] .zy-pagination .el-pagination__sizes .el-select__selected-item,
+html[data-zy-theme='solid'] .zy-pagination .el-pagination__sizes .el-select__placeholder {
+  color: var(--zy-ink);
+  font-size: 12px;
+}
+
+html[data-zy-theme='solid'] .zy-pagination .el-pagination__sizes .el-select__caret {
+  color: var(--zy-muted);
+}
+
+html[data-zy-theme='solid'] .zy-pagination-popper {
+  border: 0 !important;
+  border-radius: var(--zy-radius) !important;
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base),
+    var(--zy-key-soft) !important;
+}
+
+html[data-zy-theme='solid'] .zy-pagination-popper .el-select-dropdown__item {
+  min-height: 28px;
+  height: 28px;
+  line-height: 28px;
+  border-radius: var(--zy-radius-sm);
+  color: var(--zy-ink);
+  font-family: var(--zy-font-sans);
+  font-size: 12px;
+}
+
+html[data-zy-theme='solid'] .zy-pagination-popper .el-select-dropdown__item.is-hovering {
+  background: var(--zy-slot-face);
+}
+
+html[data-zy-theme='solid'] .zy-pagination-popper .el-select-dropdown__item.is-selected {
+  color: var(--zy-brand);
+  font-weight: 600;
+}
+
 /* ============================================================
  * 04 · 滑块拼图验证（实色键帽，方案稿）：一块槽 + 两枚键
  * 验证区是槽（凹），缺口是槽里挖出来的暗腔；拼图块是主色键、手柄是中性白键，
@@ -2173,7 +2394,8 @@ html.dark[data-zy-theme='solid'] .zy-loading-ball {
  *
  * 条 = **无标题容器那张面**（白面 + 1px 顶光 + 4px 底座 + 落影），
  * 入口是面上的字（悬停按出一个小坑），展开那颗**点亮并按下**（品牌面 + 两侧白弧 + 底部高光），
- * 面板 = 第四级浮板，面板里的悬停反过来凹下去（槽）—— 一凸一凹才分得清层级。
+ * 面板 = 正常键帽（键面 + 4px 底座 + 落影，厚一档就是大键帽）；面板里的悬停反过来凹下去（槽）——
+ * 一凸一凹才分得清层级。
  *
  * 深色：夜色令牌在 §0.1（键面 / 浮板 / 槽 / 语义键面），菜单只在自己的根上把它们
  * 映成一组 --zy-mm-* —— 条、面板、槽、点亮键各自取对应那一级，不再写死数值。
@@ -2185,9 +2407,7 @@ html[data-zy-theme='solid'] .zy-mega-menu {
   --zy-mm-bar-edge: var(--zy-key-edge);
   --zy-mm-bar-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
   --zy-mm-panel: var(--zy-key-face);
-  --zy-mm-panel-shadow:
-    0 var(--zy-key-lift-lg) 0 var(--zy-key-base-strong),
-    0 22px 40px rgba(15, 23, 42, 0.2);
+  --zy-mm-panel-shadow: var(--zy-shadow-card);
   --zy-mm-slot: var(--zy-slot-face);
   --zy-mm-slot-line: var(--zy-slot-line);
   --zy-mm-slot-shadow: var(--zy-slot-shadow-sm);
@@ -2201,13 +2421,13 @@ html[data-zy-theme='solid'] .zy-mega-menu {
 }
 
 html.dark[data-zy-theme='solid'] .zy-mega-menu {
-  /* 夜里的四级阶梯全部取 §0.1 的令牌：条回到键面、面板上浮一档、面板里的悬停沉进槽 */
+  /* 夜里的阶梯全部取 §0.1 的令牌：条和面板都回到键面、面板里的悬停沉进槽 */
   --zy-mm-bar: var(--zy-key-face);
   --zy-mm-bar-base: var(--zy-key-base);
   --zy-mm-bar-edge: var(--zy-key-edge);
   --zy-mm-bar-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
-  --zy-mm-panel: var(--zy-key-face-float);
-  --zy-mm-panel-shadow: var(--zy-shadow-float);
+  --zy-mm-panel: var(--zy-key-face);
+  --zy-mm-panel-shadow: var(--zy-shadow-card);
   --zy-mm-slot: var(--zy-slot-face);
   --zy-mm-slot-line: var(--zy-slot-line);
   --zy-mm-slot-shadow: var(--zy-slot-shadow-sm);
@@ -2279,7 +2499,7 @@ html[data-zy-theme='solid'] .zy-mega-menu__trigger.is-open {
 html[data-zy-theme='solid'] .zy-mega-menu__panel {
   top: calc(100% + 12px);
   background: var(--zy-mm-panel);
-  border-radius: 8px;
+  border-radius: var(--zy-radius);
   box-shadow:
     inset 0 1px 0 var(--zy-mm-bar-edge),
     var(--zy-mm-panel-shadow);
@@ -2349,3 +2569,268 @@ html[data-zy-theme='solid'] .zy-mega-menu__card-title {
 html[data-zy-theme='solid'] .zy-mega-menu__group-ico {
   color: var(--zy-mm-muted);
 }
+
+/* ---------- 侧边菜单：primary 渐变面板 + 平铺选中 ---------- */
+html[data-zy-theme='solid'] .zy-side-menu {
+  --zy-side-menu-bg: var(--zy-brand);
+  --zy-side-menu-bg-image: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--zy-brand) 84%, var(--zy-color-white)) 0%,
+    var(--zy-brand) 46%,
+    color-mix(in srgb, var(--zy-brand) 84%, #000) 100%
+  );
+  --zy-side-menu-fg: var(--zy-color-white);
+  --zy-side-menu-sub-fg: var(--zy-color-white);
+  --zy-side-menu-muted: var(--zy-color-white);
+  --zy-side-menu-brand: var(--zy-color-white);
+  --zy-side-menu-active-bg: rgba(255, 255, 255, 0.16);
+  --zy-side-menu-active-ink: var(--zy-color-white);
+
+  border: 0;
+  border-radius: var(--zy-radius);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.24),
+    0 10px 24px rgba(15, 23, 42, 0.22);
+}
+
+html.dark[data-zy-theme='solid'] .zy-side-menu {
+  --zy-side-menu-bg: var(--zy-brand-key);
+  --zy-side-menu-bg-image: linear-gradient(
+    180deg,
+    var(--zy-brand-key) 0%,
+    var(--zy-brand-key) 52%,
+    color-mix(in srgb, var(--zy-brand-key) 82%, #000) 100%
+  );
+}
+
+/* 白色背景变体：容器回到纸面 / 键面 */
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] {
+  --zy-side-menu-bg: var(--zy-key-face);
+  --zy-side-menu-bg-image: none;
+  --zy-side-menu-fg: var(--zy-ink);
+  --zy-side-menu-sub-fg: var(--zy-muted);
+  --zy-side-menu-muted: var(--zy-muted);
+  --zy-side-menu-brand: var(--zy-brand);
+  --zy-side-menu-active-bg: var(--zy-brand-soft);
+  --zy-side-menu-active-ink: var(--zy-brand);
+
+  border: 1px solid var(--zy-hairline);
+  box-shadow: var(--zy-shadow-card);
+}
+
+html.dark[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] {
+  border-color: var(--zy-hairline);
+}
+
+/* 滑行高亮：品牌蓝面板用一层白雾，白色面板回到浅槽 */
+html[data-zy-theme='solid'] .zy-side-menu__glide {
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: none;
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__glide {
+  background: var(--zy-slot-face);
+  box-shadow: none;
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__brand {
+  border-bottom-color: var(--zy-hairline);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__link:not(.is-active):hover,
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__sublink:not(.is-active):hover {
+  background: transparent;
+  color: var(--zy-side-menu-fg);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__link.is-parent-active {
+  background: var(--zy-slot-face);
+  color: var(--zy-side-menu-active-ink);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__link.is-active {
+  border-left-color: transparent;
+  background: var(--zy-side-menu-active-bg);
+  color: var(--zy-side-menu-active-ink);
+  box-shadow: none;
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__sublink.is-active {
+  color: var(--zy-side-menu-active-ink);
+  background: var(--zy-side-menu-active-bg);
+  box-shadow: none;
+}
+
+html[data-zy-theme='solid']
+  .zy-side-menu[data-surface='plain']
+  .zy-side-menu__sublink.is-active
+  .zy-side-menu__dot {
+  background: var(--zy-side-menu-active-ink);
+  opacity: 1;
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__sublink {
+  color: var(--zy-side-menu-sub-fg);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__badge {
+  background: var(--zy-slot-face);
+  color: var(--zy-muted);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__sublist::before {
+  background: var(--zy-hairline);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__footer {
+  border-top-color: var(--zy-hairline);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu[data-surface='plain'] .zy-side-menu__link:focus-visible,
+html[data-zy-theme='solid']
+  .zy-side-menu[data-surface='plain']
+  .zy-side-menu__sublink:focus-visible {
+  outline-color: var(--zy-brand);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__brand {
+  border-bottom-color: rgba(255, 255, 255, 0.22);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__link:hover,
+html[data-zy-theme='solid'] .zy-side-menu__sublink:hover {
+  background: transparent;
+  color: var(--zy-side-menu-fg);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__link.is-parent-active {
+  background: color-mix(in srgb, var(--zy-side-menu-active-bg) 70%, transparent);
+  color: var(--zy-side-menu-active-ink);
+}
+
+/* 选中 = 与二级同一层平铺底，不再使用键帽 */
+html[data-zy-theme='solid'] .zy-side-menu__link.is-active,
+html[data-zy-theme='solid'] .zy-side-menu__sublink.is-active {
+  border-left-color: transparent;
+  background: var(--zy-side-menu-active-bg);
+  color: var(--zy-side-menu-active-ink);
+  box-shadow: none;
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__link.is-active .zy-side-menu__ico {
+  color: var(--zy-side-menu-active-ink);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__link.is-active .zy-side-menu__badge {
+  background: color-mix(in srgb, var(--zy-side-menu-active-ink) 18%, transparent);
+  color: var(--zy-side-menu-active-ink);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__sublink.is-active .zy-side-menu__dot {
+  background: var(--zy-side-menu-active-ink);
+  opacity: 1;
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__badge {
+  background: rgba(0, 0, 0, 0.16);
+  color: var(--zy-color-white);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__sublist::before {
+  background: rgba(255, 255, 255, 0.24);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__footer {
+  border-top-color: rgba(255, 255, 255, 0.22);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__link:focus-visible,
+html[data-zy-theme='solid'] .zy-side-menu__sublink:focus-visible {
+  outline-color: var(--zy-color-white);
+}
+
+html[data-zy-theme='solid'] .zy-side-menu__link.is-active:focus-visible,
+html[data-zy-theme='solid'] .zy-side-menu__sublink.is-active:focus-visible {
+  outline-color: var(--zy-side-menu-active-ink);
+}
+
+/* ---------- 级联选择器：el-cascader 的主题化类 .zy-cascader / .zy-cascader-popper ---------- */
+html[data-zy-theme='solid'] .zy-cascader .el-input__wrapper {
+  border: 0;
+  border-radius: var(--zy-radius);
+  background-color: var(--zy-slot-face);
+  box-shadow: var(--zy-slot-shadow);
+  transition:
+    box-shadow var(--zy-duration-fast) var(--zy-ease-soft),
+    background-color var(--zy-duration-press) var(--zy-ease-soft);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-zy-theme='solid'] .zy-cascader .el-input__wrapper:hover {
+    box-shadow: var(--zy-slot-shadow-sm);
+  }
+}
+
+html[data-zy-theme='solid'] .zy-cascader .el-input__wrapper.is-focus {
+  box-shadow:
+    var(--zy-slot-shadow),
+    0 0 0 2px color-mix(in srgb, var(--zy-brand) 45%, transparent);
+}
+
+html[data-zy-theme='solid'] .zy-cascader .el-input__inner {
+  color: var(--zy-ink);
+  font-family: var(--zy-font-sans);
+}
+
+html[data-zy-theme='solid'] .zy-cascader-popper {
+  border: 0;
+  border-radius: var(--zy-radius);
+  background: var(--zy-key-face);
+  box-shadow:
+    inset 0 1px 0 var(--zy-key-edge),
+    0 var(--zy-key-lift-sm) 0 var(--zy-key-base),
+    var(--zy-key-soft);
+}
+
+html[data-zy-theme='solid'] .zy-cascader-popper .el-cascader-menu {
+  border-right-color: var(--zy-hairline);
+}
+
+html[data-zy-theme='solid'] .zy-cascader-popper .el-cascader-node {
+  color: var(--zy-ink);
+}
+
+html[data-zy-theme='solid'] .zy-cascader-popper .el-cascader-node.in-active-path,
+html[data-zy-theme='solid'] .zy-cascader-popper .el-cascader-node.is-active {
+  background: var(--zy-slot-face);
+  color: var(--zy-brand);
+  font-weight: 600;
+}
+
+html[data-zy-theme='solid'] .zy-cascader-popper .el-cascader-node.is-disabled {
+  opacity: 0.45;
+}
+
+html[data-zy-theme='solid'] .zy-cascader-popper .el-cascader-node__prefix {
+  color: var(--zy-muted);
+}
+
+/* ---------- 异形标签页：选中片是切角的品牌键帽 ---------- */
+html[data-zy-theme='solid'] .zy-tabs {
+  --zy-tabs-carrier-bg: var(--zy-brand-key, var(--zy-brand));
+  --zy-tabs-carrier-image: none;
+  --zy-tabs-carrier-shadow:
+    0 var(--zy-key-lift) 0 var(--zy-key-base),
+    0 6px 14px rgba(15, 23, 42, 0.18);
+  --zy-tabs-carrier-seam: color-mix(in srgb, var(--zy-color-white) 38%, transparent);
+  --zy-tabs-active-ink: var(--zy-color-white);
+  --zy-tabs-active-index: color-mix(in srgb, var(--zy-color-white) 78%, transparent);
+  --zy-tabs-cut: 16px;
+  --zy-tabs-cut-sm: 10px;
+  --zy-tabs-base-gap: 4px;
+}
+
+html[data-zy-theme='solid'] .zy-tabs__tab[aria-selected='true'] {
+  --zy-tabs-badge-bg: color-mix(in srgb, var(--zy-color-white) 20%, transparent);
+  --zy-tabs-badge-ink: var(--zy-color-white);
+}