@gyyxds/zy-ui 0.0.4 → 0.1.0

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

@@ -849,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 · 单选框 —— 未选是槽里的小坑，选中是上色键
  * ============================================================ */
@@ -1685,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 · 滑块拼图验证（实色键帽，方案稿）：一块槽 + 两枚键
  * 验证区是槽（凹），缺口是槽里挖出来的暗腔；拼图块是主色键、手柄是中性白键，
@@ -2476,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);
+}