@epxing/theme 0.0.0-stage → 5.3.0-beta.2

package/src/theme/element-plus-overrides.scss

@@ -0,0 +1,186 @@
+// T29：element.scss 里的**结构性定制**移植到 Element Plus。
+//
+// `theme/element.scss`（257 行）拆成两部分：
+//   - **50 处主题色 @include**  → 由 `element-plus-tokens.scss` 的 CSS 变量整块取代（EP 组件自动跟着变）
+//   - **28 条结构性定制**（本文件）→ 类名/DOM 结构可能变，必须逐条核对
+//
+// 已逐条核对 EP 的 theme-chalk：**除 tooltip 外，所有 element-ui 类名 EP 都保留了**。
+// 唯一改名：`.el-tooltip__popper.is-dark` → `.el-popper.is-dark`（EP 把 tooltip 重构成了 el-popper）。
+//
+// ## 现状
+// **已生效**：`index.scss:5-6` 已 @import 本文件与 element-plus-tokens.scss，element.scss 已删除。
+// （原文这段写的是「本文件尚未被引入、element-ui 还在跑」，那是 T29 拆分当时的状态，
+//   切 EP 后不再成立；留着会让人以为在这里加规则不生效。）
+//
+// ⚠️ **视觉核对是必须的**：类名在不代表 DOM 结构和默认值一样。切 EP 后每条都要看一眼实际效果，
+//    特别是 cascader（EP 的面板布局改过）和 dialog（EP 的 header/body padding 默认值不同）。
+
+/* ---- 圆角令牌（沿用 --border-radius，各处统一） ---- */
+.el-card,
+.el-button,
+.el-input__inner {
+  border-radius: var(--border-radius);
+}
+
+// 原文是 `.el-tabs--card, .el-tabs--card > .el-tabs__header .el-tabs__nav`
+// —— 圆角加在 **nav** 上，不是 header 上。（第一版抄漏了 .el-tabs__nav，被覆盖面校验脚本抓到。）
+.el-tabs--card,
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.el-input-number.is-controls-right {
+  .el-input-number__increase {
+    border-radius: 0 var(--border-radius) 0 0;
+  }
+  .el-input-number__decrease {
+    border-radius: 0 0 var(--border-radius);
+  }
+}
+
+/* ---- 级联选择：长文本换行 + 面板不撑破视口 ---- */
+.el-cascader-panel {
+  max-width: 100vw;
+  .el-cascader-menu {
+    flex: 1;
+    min-width: auto;
+    .el-cascader-node {
+      padding: 10px 15px !important;
+      line-height: 20px;
+      .el-cascader-node__label {
+        white-space: pre-wrap;
+      }
+    }
+  }
+}
+
+/* ---- 弹窗 ---- */
+body .el-dialog__body {
+  padding: 10px 20px;
+}
+
+.dialog--noheader {
+  .el-dialog__header {
+    padding-top: 10px;
+    border: none;
+    .el-dialog__title {
+      display: none;
+    }
+  }
+  .el-dialog__headerbtn {
+    top: 0;
+    font-size: 18px;
+  }
+}
+
+.el-message-box {
+  max-width: 90%;
+}
+
+div.el-message {
+  max-width: 90%;
+  min-width: 300px;
+}
+
+/* ---- Tooltip：**唯一一处类名改名** ----
+   element-ui: `.el-tooltip__popper.is-dark`
+   EP:         `.el-popper.is-dark`（tooltip 重构成了 el-popper） */
+.el-popper.is-dark {
+  max-width: 50%;
+  line-height: 1.4;
+}
+
+/* ---- 走马灯指示器：方块而非圆点 ---- */
+body .el-carousel__button {
+  width: 20px;
+  height: 6px;
+  border-radius: 0;
+}
+
+/* ---- 表格：修 gutter 列在某些浏览器下塌陷 ---- */
+body .el-table th.gutter {
+  display: table-cell !important;
+}
+
+/* ---- vant（移动端）覆写：整段删除（P2c）----
+   这里原有两条，都是老 element.scss 里混进来的 vant 样式（文件名有误导性）：
+     · `body .van-nav-bar .van-icon { color:#666; font-size:18px }`
+     · `.van-tabbar-item--active { color: var(--el-color-primary) }`
+   两条都已被自建原子件**自己实现**，不是丢样式：
+     · mobile/NavBar.vue 的 e(arrow) 写着 color: var(--epx-text)（比 #666 更跟令牌）
+     · mobile/TabBarItem.vue 的 when(active) 写着 @include font_color_primary
+   Vant 已整体移除（依赖、插件、令牌文件全撤），这两条选择器恒不命中。 */
+
+/* ---- EU text 按钮盒模型桥（EP 3.0 预清② codemod-ep-button-link）----
+   全仓 315 处 `type="text"` 已换成 `type="primary" link`（EP 3.0 移除 type=text）。
+   颜色由 EP 的 `.el-button--primary.is-link` 专门规则解析回主色，无需干预；
+   但盒模型不同：EU/EP 的 --text 是**正常按钮高度 + 左右 padding 0**，EP 的 .is-link 是
+   height:auto + padding:2px —— 直换会让操作列/弹窗按钮区整体位移。
+   迁移前全仓 link/text prop 用量为 **0**，所以本桥只影响迁移过来的按钮，零误伤。
+   设计侧若日后接受 EP 原生 link 观感，删掉本段即可。 */
+.el-button.is-link {
+  height: 32px;
+  padding: 8px 0;
+}
+.el-button--small.is-link {
+  height: 24px;
+  padding: 5px 0;
+}
+.el-button--large.is-link {
+  height: 40px;
+  padding: 12px 0;
+}
+
+/* ---- 遗留档名 `mini`：让它与 small 一致 ----
+   EP 的 size 只有 large / default / small；element-ui 时代的 `mini` / `middle` 传进来，
+   `useSizeProp` 的校验器只在 dev 下告一句警（不拦值），类名照样拼成
+   `el-button--mini` / `el-button--middle` —— 而 EP **没有这两个类的 CSS**，
+   尺寸于是回落到基础的 `.el-button`（32px）。
+
+   按现行口径（2026-09-01 决策）：
+     default 32 / small 24 / middle 32 / mini 与 small 一致
+   其中 middle→32 正好就是回落值，不需要写规则；只有 mini 回落到 32 是错的，这里补齐。
+
+   ⚠️ 取值逐条抄自 EP 编译产物里的 `.el-button--small`（--el-button-size:24px；
+   padding:5px 11px；font-size:12px），但**不抄它的 border-radius**：
+   本文件开头那条 `.el-card,.el-button,.el-input__inner{border-radius:var(--border-radius)}`
+   是全仓统一圆角，抄 EP 的 calc() 会把这一档从统一里挖出去。
+
+   ⚠️ 只处理按钮。`size="mini"/"middle"` 在 el-input / el-color-picker 上也有用量
+   （集中在 packages/business/），那些不在本次口径内。 */
+.el-button--mini {
+  --el-button-size: 24px;
+
+  height: var(--el-button-size);
+  padding: 5px 11px;
+  font-size: 12px;
+
+  &.is-round {
+    padding: 5px 11px;
+  }
+
+  &.is-circle {
+    width: var(--el-button-size);
+    padding: 5px;
+  }
+
+  &.is-link {
+    height: 24px;
+    padding: 5px 0;
+  }
+
+  [class*='el-icon'] + span {
+    margin-left: 4px;
+  }
+}
+
+/* ---- EP 2.x 比 Element UI 2 多出来的默认值，逐条复位 ---- */
+
+// `.el-checkbox-group`：EL2 只有 `{font-size:0}`，EP 的 theme-chalk 多了一条 `line-height:0`。
+// line-height 是可继承属性，凡是「用 el-checkbox-group 包一整块内容」的组件（如待办列表
+// TaskList，整张列表都在这一层里）行高会被整块压成 0、条目文字互相重叠。
+// 放在全局覆盖层而不是各组件内复位：组件内那条若写在 <style scoped> 里，被 extends 时会整块
+// 失效（Vue3 的 extends 不继承 __scopeId），复位就跟着一起没了。
+.el-checkbox-group {
+  line-height: inherit;
+}

package/src/theme/element-plus-tokens.scss

@@ -0,0 +1,48 @@
+// T29：Element Plus 主题令牌映射（换肤体系的新底座）
+//
+// ## 为什么这文件能替掉 element.scss 的 50 处换肤 @include
+//
+// 老体系（element-ui）：element-ui 的颜色是**编译进 CSS 的字面量**，没有运行时变量。
+// 所以 `theme/element.scss` 只能**逐个选择器覆盖**（`.el-button--primary { @include bg_color_primary; }` …），
+// 而每个 `@include` 又被 `@each map-keys($theme)` 展开成 12 个 `[data-theme=x] &` 选择器。
+// → 257 行里 50 处 @include，编译后是几百条规则，而且**每加一个 element 组件就要手工补一条覆盖**。
+//
+// 新体系（Element Plus）：EP 的所有组件颜色都走 CSS 自定义属性（`--el-color-primary` 及其派生）。
+// 于是换肤退化成「给每个 `[data-theme=x]` 设一组变量」—— EP 的**全部**组件自动跟着变，
+// 不需要枚举选择器，也不需要为新组件补覆盖。
+//
+// ## EP 的派生规则（抄自 element-plus/theme-chalk/src/common/var.scss:55-95）
+//   light-N = mix(白, base, N*10%)     （N ∈ {3,5,7,8,9}）
+//   dark-2  = mix(黑, base, 20%)
+//   --el-color-primary-rgb = base 的 "r, g, b"（EP 用它做 rgba()）
+//
+// ## 与 `custom` 主题的衔接
+// 老体系里 `custom` 主题在 $theme map 里是 `var(--color-primary)`（运行时由 AppRoleSelect 设置）。
+// 这里保持同样的契约：`[data-theme=custom]` 下的 EP 变量由 `--color-primary` 派生。
+// ⚠️ SCSS 的 `mix()` **不能**作用于 `var()`（编译期拿不到值）→ custom 主题的派生色改用
+//    CSS 原生 `color-mix()`（Chrome 111+ / Safari 16.2+ 支持；本平台是内网 PC 端 Chrome，OK）。
+//
+// ## 现状
+// **本文件尚未被引入**（`index.scss` 还没 @import 它）—— element-ui 还在跑，引了也没用。
+// 切 EP 那一步：`index.scss` 里 `@import "./theme/element.scss"` → `@import "./theme/element-plus-tokens.scss"`，
+// 并把 element.scss 里剩下的 28 条**结构性**定制（border-radius / max-width / padding 等，非颜色）
+// 摘出来单独保留。
+
+// 与 mixins.scss 的 $theme map 同源（那边是给老 element-ui 用的，这边给 EP）。
+// custom 不在这里 —— 它走 CSS 原生 color-mix()，见文件末尾。
+// ── 2026-07 塌缩：全部主题统一从 --color-primary（RGB 三元组，mixins.scss 里每套
+// data-theme 各定义一份，custom 由运行时 JS 注入）经 color-mix 派生 EP 全套变量。
+// 原来的「:root 默认块 + 11 套 @each 展开 + custom 特例块」≈90 条声明 → 8 条。
+// 颜色学等价：SCSS color.mix(#fff, c, 30%) ≡ color-mix(in srgb, #fff 30%, c)（同 sRGB 线性
+// 插值，亚像素舍入差不可见）；color-mix 需 Chrome 111+，custom 主题此前已依赖（先例）。
+// 换主题 = data-theme 属性切换 --color-primary → 本块所有派生色自动重算，EP 全组件跟随。
+:root {
+  --el-color-primary: rgb(var(--color-primary));
+  --el-color-primary-rgb: var(--color-primary);
+  --el-color-primary-light-3: color-mix(in srgb, #fff 30%, rgb(var(--color-primary)));
+  --el-color-primary-light-5: color-mix(in srgb, #fff 50%, rgb(var(--color-primary)));
+  --el-color-primary-light-7: color-mix(in srgb, #fff 70%, rgb(var(--color-primary)));
+  --el-color-primary-light-8: color-mix(in srgb, #fff 80%, rgb(var(--color-primary)));
+  --el-color-primary-light-9: color-mix(in srgb, #fff 90%, rgb(var(--color-primary)));
+  --el-color-primary-dark-2: color-mix(in srgb, #000 20%, rgb(var(--color-primary)));
+}

package/src/theme/icons/.generated/icon-vars.css

@@ -0,0 +1,3 @@
+/* 本文件为 codegen 产物 —— build/icons/gen-icon-css.mjs 生成。别手改、别入库（.gitignore）。
+   3 处历史遗留调用点专用，两条路径都无条件 eager 引入，见该函数头注释。 */
+:root{--epx-i-el-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z'/%3E%3C/svg%3E");--epx-i-el-icon-caret-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m16 12l-6 6V6z'/%3E%3C/svg%3E");--epx-i-epx-icon-kapianxuanzhong:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m5.457-12.543L11 15.914l-4.207-4.207l1.414-1.414L11 13.086l5.043-5.043z'/%3E%3C/svg%3E")}