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

package/API.md

@@ -0,0 +1,239 @@
+# @epxing/theme API
+
+全局样式、设计令牌、Sass mixin/function 和图标底座。此包没有 JavaScript 函数或组件导出。
+
+本页对应包版本 `5.3.0-beta.2`。导出名、子路径和签名从当前源码、package.json 与类型声明生成。
+
+## 安装与使用
+
+
+```sh
+pnpm add @epxing/theme@5.3.0-beta.2
+```
+
+
+```js
+// 产品入口：全局主题仅引入一次
+import '@epxing/theme'
+
+// 仅补图标底座时：
+// import '@epxing/theme/src/icons/base.scss'
+```
+
+## 接入约定
+
+根入口是 src/index.scss，由产品的 Sass 构建环境编译。Sass 定义可通过 @epxing/theme/src/theme/utils/mixins.scss 引入，再使用 @include b(...)、@include e(...)、@include m(...) 等。additionalData 只注入变量/函数/mixin 定义，避免重复输出全局 CSS。明暗、字号、圆角和密度由主题令牌控制。
+
+## Sass 工具完整签名
+
+[详细参考](../../docs/revision/theme/api/mixins.md)。下表包括通过 /src/* 可访问的全部静态 mixin/function 定义。
+
+| 签名 | 文件（相对 src） |
+| --- | --- |
+| `@function selectorToString($selector)` | `theme/utils/function.scss` |
+| `@function containsModifier($selector)` | `theme/utils/function.scss` |
+| `@function containWhenFlag($selector)` | `theme/utils/function.scss` |
+| `@function containPseudoClass($selector)` | `theme/utils/function.scss` |
+| `@function hitAllSpecialNestRule($selector)` | `theme/utils/function.scss` |
+| `@mixin b($block)` | `theme/utils/mixins.scss` |
+| `@mixin e($element)` | `theme/utils/mixins.scss` |
+| `@mixin m($modifier)` | `theme/utils/mixins.scss` |
+| `@mixin meb($modifier: false, $element: $E, $block: $B)` | `theme/utils/mixins.scss` |
+| `@mixin when($state)` | `theme/utils/mixins.scss` |
+| `@mixin font_color_primary($opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
+| `@mixin font_color_primary_mixin($opacity: 1, $color: $--color-white)` | `theme/utils/mixins.scss` |
+| `@mixin bg_color_primary($opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
+| `@mixin bg_color_primary_mixin($opacity: 1, $color: $--color-white)` | `theme/utils/mixins.scss` |
+| `@mixin border_color_primary($opacity: 1, $position: null, $color: $--color-primary)` | `theme/utils/mixins.scss` |
+| `@mixin border_color_primary_mixin($opacity: 1, $color: $--color-white)` | `theme/utils/mixins.scss` |
+| `@mixin stroke_color_primary($opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
+| `@mixin border_primary($width: 1px, $position: null, $type: solid, $opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
+| `@mixin box_shadow_primary($hShadow, $vShadow, $blur, $spread, $opacity, $args...)` | `theme/utils/mixins.scss` |
+| `@mixin res($key, $map: $--breakpoints)` | `theme/utils/mixins.scss` |
+| `@mixin scroll-bar` | `theme/utils/mixins.scss` |
+| `@mixin placeholder` | `theme/utils/mixins.scss` |
+| `@mixin b($block)` | `theme/utils/mixins.scss` |
+| `@mixin e($element)` | `theme/utils/mixins.scss` |
+| `@mixin m($modifier)` | `theme/utils/mixins.scss` |
+| `@mixin configurable-m($modifier, $E-flag: false)` | `theme/utils/mixins.scss` |
+| `@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B)` | `theme/utils/mixins.scss` |
+| `@mixin meb($modifier: false, $element: $E, $block: $B)` | `theme/utils/mixins.scss` |
+| `@mixin when($state)` | `theme/utils/mixins.scss` |
+| `@mixin extend-rule($name)` | `theme/utils/mixins.scss` |
+| `@mixin share-rule($name)` | `theme/utils/mixins.scss` |
+| `@mixin pseudo($pseudo)` | `theme/utils/mixins.scss` |
+| `@mixin epx-card` | `theme/utils/mixins.scss` |
+| `@mixin epx-text($size: base, $secondary: false)` | `theme/utils/mixins.scss` |
+
+## CSS / Sass 变量
+
+[详细参考](../../docs/revision/theme/api/tokens.md)。同名变量可能按主题和选择器覆写，下表显示各文件中的首次声明；动态插值生成的名称以编译 CSS 为准。
+
+| 名称 | 声明值 | 文件（相对 src） |
+| --- | --- | --- |
+| `--border-radius-zero` | `0px` | `index.scss` |
+| `--border-radius-base` | `4px` | `index.scss` |
+| `--border-radius-medium` | `8px` | `index.scss` |
+| `--border-radius-large` | `12px` | `index.scss` |
+| `--border-radius-circle` | `100%` | `index.scss` |
+| `--margin-small` | `6px` | `index.scss` |
+| `--margin-medium` | `8px` | `index.scss` |
+| `--margin-base` | `10px` | `index.scss` |
+| `--margin-large` | `12px` | `index.scss` |
+| `--padding-mini` | `6px` | `index.scss` |
+| `--padding-small` | `6px` | `index.scss` |
+| `--padding-medium` | `8px` | `index.scss` |
+| `--padding-base` | `10px` | `index.scss` |
+| `--padding-large` | `12px` | `index.scss` |
+| `--padding` | `var(--padding-base)` | `index.scss` |
+| `--el-button-size` | `24px` | `theme/element-plus-overrides.scss` |
+| `--el-color-primary` | `rgb(var(--color-primary))` | `theme/element-plus-tokens.scss` |
+| `--el-color-primary-rgb` | `var(--color-primary)` | `theme/element-plus-tokens.scss` |
+| `--el-color-primary-light-3` | `color-mix(in srgb, #fff 30%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
+| `--el-color-primary-light-5` | `color-mix(in srgb, #fff 50%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
+| `--el-color-primary-light-7` | `color-mix(in srgb, #fff 70%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
+| `--el-color-primary-light-8` | `color-mix(in srgb, #fff 80%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
+| `--el-color-primary-light-9` | `color-mix(in srgb, #fff 90%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
+| `--el-color-primary-dark-2` | `color-mix(in srgb, #000 20%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
+| `--epx-i` | `linear-gradient(#0000, #0000)` | `theme/icons/base.scss` |
+| `--color-primary` | `8,116,231` | `theme/tokens.scss` |
+| `--epx-font-size-s` | `12px` | `theme/tokens.scss` |
+| `--epx-font-size-base` | `14px` | `theme/tokens.scss` |
+| `--epx-font-size-l` | `16px` | `theme/tokens.scss` |
+| `--epx-font-size-xl` | `20px` | `theme/tokens.scss` |
+| `--epx-radius-s` | `2px` | `theme/tokens.scss` |
+| `--epx-radius-base` | `4px` | `theme/tokens.scss` |
+| `--epx-radius-l` | `8px` | `theme/tokens.scss` |
+| `--epx-space-1` | `4px` | `theme/tokens.scss` |
+| `--epx-space-2` | `8px` | `theme/tokens.scss` |
+| `--epx-space-3` | `12px` | `theme/tokens.scss` |
+| `--epx-space-4` | `16px` | `theme/tokens.scss` |
+| `--epx-space-5` | `24px` | `theme/tokens.scss` |
+| `--epx-space-6` | `32px` | `theme/tokens.scss` |
+| `--epx-bg` | `#f5f7fa` | `theme/tokens.scss` |
+| `--epx-bg-card` | `#ffffff` | `theme/tokens.scss` |
+| `--epx-text` | `#303133` | `theme/tokens.scss` |
+| `--epx-text-secondary` | `#909399` | `theme/tokens.scss` |
+| `--epx-border` | `#dcdfe6` | `theme/tokens.scss` |
+| `--color-text-title` | `#222222` | `theme/tokens.scss` |
+| `--color-text-primary` | `#444444` | `theme/tokens.scss` |
+| `--color-text-secondary` | `#666666` | `theme/tokens.scss` |
+| `--color-text-assistant` | `#999999` | `theme/tokens.scss` |
+| `--color-text-disabled` | `#aaaaaa` | `theme/tokens.scss` |
+| `--epx-margin` | `10px` | `theme/tokens.scss` |
+| `--epx-shadow-s` | `0px 0px 6px #0000001f` | `theme/tokens.scss` |
+| `--epx-shadow-base` | `0px 0px 12px #0000001f` | `theme/tokens.scss` |
+| `--epx-shadow-l` | `0px 12px 32px 4px #0000000a, 0px 8px 20px #00000014` | `theme/tokens.scss` |
+| `--epx-shadow-xl` | `0px 16px 48px 16px #00000014, 0px 12px 32px #0000001f, 0px 8px 16px -8px #00000029` | `theme/tokens.scss` |
+| `--epx-shadow-focus` | `0 0 0 2px rgba(var(--color-primary), 0.1)` | `theme/tokens.scss` |
+| `--border-radius` | `var(--epx-radius-base)` | `theme/tokens.scss` |
+| `--margin` | `var(--epx-margin)` | `theme/tokens.scss` |
+| `--el-border-radius-base` | `var(--epx-radius-base)` | `theme/tokens.scss` |
+| `--el-border-radius-small` | `var(--epx-radius-s)` | `theme/tokens.scss` |
+| `--el-font-size-base` | `var(--epx-font-size-base)` | `theme/tokens.scss` |
+| `--el-font-size-small` | `var(--epx-font-size-s)` | `theme/tokens.scss` |
+| `--el-font-size-large` | `var(--epx-font-size-l)` | `theme/tokens.scss` |
+| `--el-box-shadow-lighter` | `var(--epx-shadow-s)` | `theme/tokens.scss` |
+| `--el-box-shadow-light` | `var(--epx-shadow-base)` | `theme/tokens.scss` |
+| `--el-box-shadow` | `var(--epx-shadow-l)` | `theme/tokens.scss` |
+| `--el-box-shadow-dark` | `var(--epx-shadow-xl)` | `theme/tokens.scss` |
+| `--epx-touch-min` | `44px` | `theme/tokens.scss` |
+| `--epx-m-gutter` | `16px` | `theme/tokens.scss` |
+| `--epx-m-gap` | `12px` | `theme/tokens.scss` |
+| `--epx-m-radius-card` | `12px` | `theme/tokens.scss` |
+| `--epx-m-radius-sheet` | `16px` | `theme/tokens.scss` |
+| `--epx-m-nav-height` | `44px` | `theme/tokens.scss` |
+| `--epx-m-tab-height` | `50px` | `theme/tokens.scss` |
+| `--epx-safe-top` | `env(safe-area-inset-top, 0px)` | `theme/tokens.scss` |
+| `--epx-safe-bottom` | `env(safe-area-inset-bottom, 0px)` | `theme/tokens.scss` |
+| `--epx-icon-size` | `20px` | `theme/tokens.scss` |
+| `--el-component-size` | `var(--epx-touch-min)` | `theme/tokens.scss` |
+| `--el-input-height` | `var(--epx-touch-min)` | `theme/tokens.scss` |
+| `$namespace` | `'epx'` | `theme/utils/config.scss` |
+| `$element-separator` | `'__'` | `theme/utils/config.scss` |
+| `$modifier-separator` | `'--'` | `theme/utils/config.scss` |
+| `$state-prefix` | `'is-'` | `theme/utils/config.scss` |
+| `$selector` | `inspect($selector)` | `theme/utils/function.scss` |
+| `$B` | `$namespace+'-'+$block !global` | `theme/utils/mixins.scss` |
+| `$E` | `$element !global` | `theme/utils/mixins.scss` |
+| `$selector` | `&` | `theme/utils/mixins.scss` |
+| `$currentSelector` | `""` | `theme/utils/mixins.scss` |
+| `$modifierCombo` | `''` | `theme/utils/mixins.scss` |
+| `$theme` | `( purple: $--color-primary-purple, palevioletred: $--color-primary-palevioletred, forestgreen: $--color-primary-forestgreen, deepblue: $--color-primary-deepblue, orange: $--color-primary-orange, skyblue: $--color-primary-skyblue, aurorablue: $--color-primary-aurorablue, tiffanyblue: $--color-primary-tiffanyblue, tsinghuapurple:$--color-primary-tsinghuapurple, creativeblue:$--color-primary-creativeblue, njhkht:$--color-primary-njhkht, custom: var(--color-primary) )` | `theme/utils/mixins.scss` |
+| `$--scrollbar-thumb-background` | `#b4bccc` | `theme/utils/mixins.scss` |
+| `$--scrollbar-track-background` | `#fff` | `theme/utils/mixins.scss` |
+| `$interpolation` | `''` | `theme/utils/mixins.scss` |
+| `$rule-name` | `'%shared-'+$name` | `theme/utils/mixins.scss` |
+| `$--color-primary` | `#0874E7!default` | `theme/utils/var.scss` |
+| `$--color-primary-purple` | `#7569E2!default` | `theme/utils/var.scss` |
+| `$--color-primary-palevioletred` | `#CE4545!default` | `theme/utils/var.scss` |
+| `$--color-primary-forestgreen` | `#3D8A50!default` | `theme/utils/var.scss` |
+| `$--color-primary-deepblue` | `#0F5FBD!default` | `theme/utils/var.scss` |
+| `$--color-primary-orange` | `#EA6000!default` | `theme/utils/var.scss` |
+| `$--color-primary-skyblue` | `#1A4586!default` | `theme/utils/var.scss` |
+| `$--color-primary-aurorablue` | `#383B9E!default` | `theme/utils/var.scss` |
+| `$--color-primary-tiffanyblue` | `#00AAAD!default` | `theme/utils/var.scss` |
+| `$--color-primary-tsinghuapurple` | `#5F2167!default` | `theme/utils/var.scss` |
+| `$--color-primary-creativeblue` | `#418CFF!default` | `theme/utils/var.scss` |
+| `$--color-primary-njhkht` | `#1D2088!default` | `theme/utils/var.scss` |
+| `$--color-success` | `#67C23A !default` | `theme/utils/var.scss` |
+| `$--color-warning` | `#E6A23C !default` | `theme/utils/var.scss` |
+| `$--color-danger` | `#F56C6C !default` | `theme/utils/var.scss` |
+| `$--color-white` | `#FFFFFF !default` | `theme/utils/var.scss` |
+| `$--color-black` | `#000000 !default` | `theme/utils/var.scss` |
+| `$--color-primary-light-1` | `mix($--color-white, $--color-primary, 10%) !default` | `theme/utils/var.scss` |
+| `$--color-primary-light-2` | `mix($--color-white, $--color-primary, 20%) !default` | `theme/utils/var.scss` |
+| `$--color-primary-light-3` | `mix($--color-white, $--color-primary, 30%) !default` | `theme/utils/var.scss` |
+| `$--color-primary-light-4` | `mix($--color-white, $--color-primary, 40%) !default` | `theme/utils/var.scss` |
+| `$--color-primary-light-5` | `mix($--color-white, $--color-primary, 50%) !default` | `theme/utils/var.scss` |
+| `$--color-primary-light-6` | `mix($--color-white, $--color-primary, 60%) !default` | `theme/utils/var.scss` |
+| `$--color-primary-light-7` | `mix($--color-white, $--color-primary, 70%) !default` | `theme/utils/var.scss` |
+| `$--color-primary-light-8` | `mix($--color-white, $--color-primary, 80%) !default` | `theme/utils/var.scss` |
+| `$--color-primary-light-9` | `mix($--color-white, $--color-primary, 90%) !default` | `theme/utils/var.scss` |
+| `$--color-text-primary` | `#333 !default` | `theme/utils/var.scss` |
+| `$--color-text-regular` | `#666 !default` | `theme/utils/var.scss` |
+| `$--color-text-secondary` | `#999 !default` | `theme/utils/var.scss` |
+| `$--color-text-placeholder` | `#C0C4CC !default` | `theme/utils/var.scss` |
+| `$--border-color-base` | `#E3E3E3 !default` | `theme/utils/var.scss` |
+| `$--border-color-light` | `#E4E7ED !default` | `theme/utils/var.scss` |
+| `$--border-color-lighter` | `#EBEEF5 !default` | `theme/utils/var.scss` |
+| `$--border-color-extra-light` | `#F2F6FC !default` | `theme/utils/var.scss` |
+| `$--background-color-base` | `#F5F7FA !default` | `theme/utils/var.scss` |
+| `$--link-color` | `$--color-primary-light-2 !default` | `theme/utils/var.scss` |
+| `$--link-hover-color` | `$--color-primary !default` | `theme/utils/var.scss` |
+| `$--border-width-base` | `1px !default` | `theme/utils/var.scss` |
+| `$--border-style-base` | `solid !default` | `theme/utils/var.scss` |
+| `$--border-color-hover` | `$--color-text-placeholder !default` | `theme/utils/var.scss` |
+| `$--border-base` | `$--border-width-base $--border-style-base $--border-color-base !default` | `theme/utils/var.scss` |
+| `$--border-radius-base` | `4px !default` | `theme/utils/var.scss` |
+| `$--border-radius-small` | `2px !default` | `theme/utils/var.scss` |
+| `$--border-radius-circle` | `100% !default` | `theme/utils/var.scss` |
+| `$--border-radius-zero` | `0 !default` | `theme/utils/var.scss` |
+| `$--font-size-extra-large` | `20px !default` | `theme/utils/var.scss` |
+| `$--font-size-large` | `18px !default` | `theme/utils/var.scss` |
+| `$--font-size-medium` | `16px !default` | `theme/utils/var.scss` |
+| `$--font-size-base` | `14px !default` | `theme/utils/var.scss` |
+| `$--font-size-small` | `13px !default` | `theme/utils/var.scss` |
+| `$--font-size-extra-small` | `12px !default` | `theme/utils/var.scss` |
+| `$--font-line-height-primary` | `24px !default` | `theme/utils/var.scss` |
+| `$--font-line-height-secondary` | `16px !default` | `theme/utils/var.scss` |
+| `$--font-color-disabled-base` | `#bbb !default` | `theme/utils/var.scss` |
+| `$--padding-base` | `16px!default` | `theme/utils/var.scss` |
+| `$--padding-small` | `10px!default` | `theme/utils/var.scss` |
+| `$--padding-large` | `24px!default` | `theme/utils/var.scss` |
+| `$--margin-base` | `16px!default` | `theme/utils/var.scss` |
+| `$--margin-small` | `10px!default` | `theme/utils/var.scss` |
+| `$--margin-large` | `24px!default` | `theme/utils/var.scss` |
+
+## 样式源码与其他入口
+
+/src/* 是主题样式资源的公开入口，可按实际文件名引入 Sass 定义、令牌和图标底座。package.json 供构建工具读取包元数据。
+
+| 公开路径模式 | 实际目标 |
+| --- | --- |
+| `@epxing/theme/src/*` | `./src/*` |
+| `@epxing/theme/package.json` | `./package.json` |
+
+## 文档维护
+
+本页由 build/gen-package-api-docs.mjs 生成。修改公开入口并更新构建产物和类型声明后，在框架根运行 `pnpm docs:api`；`pnpm docs:api:check` 检查清单、类型、包内文档与站点镜像是否同步，同时验证页面编译和文档链接。用途和示例维护在 build/package-api-notes.mjs，组件和源码方法的详细参考位于 docs/revision。

package/README.md

@@ -1,3 +1,22 @@
-# Temporary Holding Version
+# @epxing/theme
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[完整公开 API、导入方式与示例](./API.md)
+
+主题与 UI 库注册包 - **叶子层**。
+
+## 范围
+
+- `src/assets/scss/` 设计令牌
+- BEM mixin（`@include b/e/m`）
+- 换肤 mixin
+- `src/plugins/element.js` - Element Plus 注册
+- `src/plugins/vant.js` - Vant 4 注册
+- iconfont 资源
+
+## 重要约束
+
+**必须最先发布**：所有其他包通过 `@use '@epxing/theme/mixins'` 消费 SCSS。
+
+## 状态
+
+🟡 stub - 实际迁移在 T16。

package/package.json

@@ -1,6 +1,23 @@
 {
   "name": "@epxing/theme",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "5.3.0-beta.2",
+  "description": "设计令牌 + 主题 scss（源码分发：消费方 sass 编译期使用 mixins/tokens；各 @epxing 包构建时已把用到的样式编进各自 style.css）",
+  "main": "src/index.scss",
+  "exports": {
+    ".": "./src/index.scss",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "API.md"
+  ],
+  "sideEffects": true,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "echo '@epxing/theme 为 scss 源码包，无需构建'"
+  }
 }

package/src/idea.css

@@ -0,0 +1,42 @@
+/**
+    Name:       IDEA default theme
+    From IntelliJ IDEA by JetBrains
+ */
+
+ .cm-s-idea span.cm-meta { color: #808000; }
+ .cm-s-idea span.cm-number { color: #0000FF; }
+ .cm-s-idea span.cm-keyword { line-height: 1em; font-weight: bold; color: #000080; }
+ .cm-s-idea span.cm-atom { font-weight: bold; color: #000080; }
+ .cm-s-idea span.cm-def { color: #000000; }
+ .cm-s-idea span.cm-variable { color: black; }
+ .cm-s-idea span.cm-variable-2 { color: black; }
+ .cm-s-idea span.cm-variable-3, .cm-s-idea span.cm-type { color: #555; }
+ .cm-s-idea span.cm-string { color: #0D3BD8; }
+ .cm-s-idea span.cm-property { color: #db2d20; }
+ .cm-s-idea span.cm-operator { color: black; }
+ .cm-s-idea span.cm-comment { color: #808080; }
+ .cm-s-idea span.cm-string-2 { color: #008000; }
+ .cm-s-idea span.cm-qualifier { color: #555; }
+ .cm-s-idea span.cm-error { color: #FF0000; }
+ .cm-s-idea span.cm-attribute { color: #0000FF; }
+ .cm-s-idea span.cm-tag { color: #000080; }
+ .cm-s-idea span.cm-link { color: #0000FF; }
+ .cm-s-idea .CodeMirror-activeline-background { background: #FFFAE3; }
+ 
+ .cm-s-idea span.cm-builtin { color: #30a; }
+ .cm-s-idea span.cm-bracket { color: #cc7; }
+ .cm-s-idea  { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;}
+ 
+ 
+ .cm-s-idea .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }
+ 
+ .CodeMirror-hints.idea {
+   font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+   color: #616569;
+   background-color: #ebf3fd !important;
+ }
+ 
+ .CodeMirror-hints.idea .CodeMirror-hint-active {
+   background-color: #a2b8c9 !important;
+   color: #5c6065 !important;
+ }