@epxing/theme 5.3.0-beta.2 → 5.3.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/API.md +239 -239
  2. package/package.json +1 -1
  3. package/src/theme/import-export-fields.scss +73 -0
package/API.md CHANGED
@@ -1,239 +1,239 @@
1
- # @epxing/theme API
2
-
3
- 全局样式、设计令牌、Sass mixin/function 和图标底座。此包没有 JavaScript 函数或组件导出。
4
-
5
- 本页对应包版本 `5.3.0-beta.2`。导出名、子路径和签名从当前源码、package.json 与类型声明生成。
6
-
7
- ## 安装与使用
8
-
9
-
10
- ```sh
11
- pnpm add @epxing/theme@5.3.0-beta.2
12
- ```
13
-
14
-
15
- ```js
16
- // 产品入口：全局主题仅引入一次
17
- import '@epxing/theme'
18
-
19
- // 仅补图标底座时：
20
- // import '@epxing/theme/src/icons/base.scss'
21
- ```
22
-
23
- ## 接入约定
24
-
25
- 根入口是 src/index.scss，由产品的 Sass 构建环境编译。Sass 定义可通过 @epxing/theme/src/theme/utils/mixins.scss 引入，再使用 @include b(...)、@include e(...)、@include m(...) 等。additionalData 只注入变量/函数/mixin 定义，避免重复输出全局 CSS。明暗、字号、圆角和密度由主题令牌控制。
26
-
27
- ## Sass 工具完整签名
28
-
29
- [详细参考](../../docs/revision/theme/api/mixins.md)。下表包括通过 /src/* 可访问的全部静态 mixin/function 定义。
30
-
31
- | 签名 | 文件（相对 src） |
32
- | --- | --- |
33
- | `@function selectorToString($selector)` | `theme/utils/function.scss` |
34
- | `@function containsModifier($selector)` | `theme/utils/function.scss` |
35
- | `@function containWhenFlag($selector)` | `theme/utils/function.scss` |
36
- | `@function containPseudoClass($selector)` | `theme/utils/function.scss` |
37
- | `@function hitAllSpecialNestRule($selector)` | `theme/utils/function.scss` |
38
- | `@mixin b($block)` | `theme/utils/mixins.scss` |
39
- | `@mixin e($element)` | `theme/utils/mixins.scss` |
40
- | `@mixin m($modifier)` | `theme/utils/mixins.scss` |
41
- | `@mixin meb($modifier: false, $element: $E, $block: $B)` | `theme/utils/mixins.scss` |
42
- | `@mixin when($state)` | `theme/utils/mixins.scss` |
43
- | `@mixin font_color_primary($opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
44
- | `@mixin font_color_primary_mixin($opacity: 1, $color: $--color-white)` | `theme/utils/mixins.scss` |
45
- | `@mixin bg_color_primary($opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
46
- | `@mixin bg_color_primary_mixin($opacity: 1, $color: $--color-white)` | `theme/utils/mixins.scss` |
47
- | `@mixin border_color_primary($opacity: 1, $position: null, $color: $--color-primary)` | `theme/utils/mixins.scss` |
48
- | `@mixin border_color_primary_mixin($opacity: 1, $color: $--color-white)` | `theme/utils/mixins.scss` |
49
- | `@mixin stroke_color_primary($opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
50
- | `@mixin border_primary($width: 1px, $position: null, $type: solid, $opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
51
- | `@mixin box_shadow_primary($hShadow, $vShadow, $blur, $spread, $opacity, $args...)` | `theme/utils/mixins.scss` |
52
- | `@mixin res($key, $map: $--breakpoints)` | `theme/utils/mixins.scss` |
53
- | `@mixin scroll-bar` | `theme/utils/mixins.scss` |
54
- | `@mixin placeholder` | `theme/utils/mixins.scss` |
55
- | `@mixin b($block)` | `theme/utils/mixins.scss` |
56
- | `@mixin e($element)` | `theme/utils/mixins.scss` |
57
- | `@mixin m($modifier)` | `theme/utils/mixins.scss` |
58
- | `@mixin configurable-m($modifier, $E-flag: false)` | `theme/utils/mixins.scss` |
59
- | `@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B)` | `theme/utils/mixins.scss` |
60
- | `@mixin meb($modifier: false, $element: $E, $block: $B)` | `theme/utils/mixins.scss` |
61
- | `@mixin when($state)` | `theme/utils/mixins.scss` |
62
- | `@mixin extend-rule($name)` | `theme/utils/mixins.scss` |
63
- | `@mixin share-rule($name)` | `theme/utils/mixins.scss` |
64
- | `@mixin pseudo($pseudo)` | `theme/utils/mixins.scss` |
65
- | `@mixin epx-card` | `theme/utils/mixins.scss` |
66
- | `@mixin epx-text($size: base, $secondary: false)` | `theme/utils/mixins.scss` |
67
-
68
- ## CSS / Sass 变量
69
-
70
- [详细参考](../../docs/revision/theme/api/tokens.md)。同名变量可能按主题和选择器覆写，下表显示各文件中的首次声明；动态插值生成的名称以编译 CSS 为准。
71
-
72
- | 名称 | 声明值 | 文件（相对 src） |
73
- | --- | --- | --- |
74
- | `--border-radius-zero` | `0px` | `index.scss` |
75
- | `--border-radius-base` | `4px` | `index.scss` |
76
- | `--border-radius-medium` | `8px` | `index.scss` |
77
- | `--border-radius-large` | `12px` | `index.scss` |
78
- | `--border-radius-circle` | `100%` | `index.scss` |
79
- | `--margin-small` | `6px` | `index.scss` |
80
- | `--margin-medium` | `8px` | `index.scss` |
81
- | `--margin-base` | `10px` | `index.scss` |
82
- | `--margin-large` | `12px` | `index.scss` |
83
- | `--padding-mini` | `6px` | `index.scss` |
84
- | `--padding-small` | `6px` | `index.scss` |
85
- | `--padding-medium` | `8px` | `index.scss` |
86
- | `--padding-base` | `10px` | `index.scss` |
87
- | `--padding-large` | `12px` | `index.scss` |
88
- | `--padding` | `var(--padding-base)` | `index.scss` |
89
- | `--el-button-size` | `24px` | `theme/element-plus-overrides.scss` |
90
- | `--el-color-primary` | `rgb(var(--color-primary))` | `theme/element-plus-tokens.scss` |
91
- | `--el-color-primary-rgb` | `var(--color-primary)` | `theme/element-plus-tokens.scss` |
92
- | `--el-color-primary-light-3` | `color-mix(in srgb, #fff 30%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
93
- | `--el-color-primary-light-5` | `color-mix(in srgb, #fff 50%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
94
- | `--el-color-primary-light-7` | `color-mix(in srgb, #fff 70%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
95
- | `--el-color-primary-light-8` | `color-mix(in srgb, #fff 80%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
96
- | `--el-color-primary-light-9` | `color-mix(in srgb, #fff 90%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
97
- | `--el-color-primary-dark-2` | `color-mix(in srgb, #000 20%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
98
- | `--epx-i` | `linear-gradient(#0000, #0000)` | `theme/icons/base.scss` |
99
- | `--color-primary` | `8,116,231` | `theme/tokens.scss` |
100
- | `--epx-font-size-s` | `12px` | `theme/tokens.scss` |
101
- | `--epx-font-size-base` | `14px` | `theme/tokens.scss` |
102
- | `--epx-font-size-l` | `16px` | `theme/tokens.scss` |
103
- | `--epx-font-size-xl` | `20px` | `theme/tokens.scss` |
104
- | `--epx-radius-s` | `2px` | `theme/tokens.scss` |
105
- | `--epx-radius-base` | `4px` | `theme/tokens.scss` |
106
- | `--epx-radius-l` | `8px` | `theme/tokens.scss` |
107
- | `--epx-space-1` | `4px` | `theme/tokens.scss` |
108
- | `--epx-space-2` | `8px` | `theme/tokens.scss` |
109
- | `--epx-space-3` | `12px` | `theme/tokens.scss` |
110
- | `--epx-space-4` | `16px` | `theme/tokens.scss` |
111
- | `--epx-space-5` | `24px` | `theme/tokens.scss` |
112
- | `--epx-space-6` | `32px` | `theme/tokens.scss` |
113
- | `--epx-bg` | `#f5f7fa` | `theme/tokens.scss` |
114
- | `--epx-bg-card` | `#ffffff` | `theme/tokens.scss` |
115
- | `--epx-text` | `#303133` | `theme/tokens.scss` |
116
- | `--epx-text-secondary` | `#909399` | `theme/tokens.scss` |
117
- | `--epx-border` | `#dcdfe6` | `theme/tokens.scss` |
118
- | `--color-text-title` | `#222222` | `theme/tokens.scss` |
119
- | `--color-text-primary` | `#444444` | `theme/tokens.scss` |
120
- | `--color-text-secondary` | `#666666` | `theme/tokens.scss` |
121
- | `--color-text-assistant` | `#999999` | `theme/tokens.scss` |
122
- | `--color-text-disabled` | `#aaaaaa` | `theme/tokens.scss` |
123
- | `--epx-margin` | `10px` | `theme/tokens.scss` |
124
- | `--epx-shadow-s` | `0px 0px 6px #0000001f` | `theme/tokens.scss` |
125
- | `--epx-shadow-base` | `0px 0px 12px #0000001f` | `theme/tokens.scss` |
126
- | `--epx-shadow-l` | `0px 12px 32px 4px #0000000a, 0px 8px 20px #00000014` | `theme/tokens.scss` |
127
- | `--epx-shadow-xl` | `0px 16px 48px 16px #00000014, 0px 12px 32px #0000001f, 0px 8px 16px -8px #00000029` | `theme/tokens.scss` |
128
- | `--epx-shadow-focus` | `0 0 0 2px rgba(var(--color-primary), 0.1)` | `theme/tokens.scss` |
129
- | `--border-radius` | `var(--epx-radius-base)` | `theme/tokens.scss` |
130
- | `--margin` | `var(--epx-margin)` | `theme/tokens.scss` |
131
- | `--el-border-radius-base` | `var(--epx-radius-base)` | `theme/tokens.scss` |
132
- | `--el-border-radius-small` | `var(--epx-radius-s)` | `theme/tokens.scss` |
133
- | `--el-font-size-base` | `var(--epx-font-size-base)` | `theme/tokens.scss` |
134
- | `--el-font-size-small` | `var(--epx-font-size-s)` | `theme/tokens.scss` |
135
- | `--el-font-size-large` | `var(--epx-font-size-l)` | `theme/tokens.scss` |
136
- | `--el-box-shadow-lighter` | `var(--epx-shadow-s)` | `theme/tokens.scss` |
137
- | `--el-box-shadow-light` | `var(--epx-shadow-base)` | `theme/tokens.scss` |
138
- | `--el-box-shadow` | `var(--epx-shadow-l)` | `theme/tokens.scss` |
139
- | `--el-box-shadow-dark` | `var(--epx-shadow-xl)` | `theme/tokens.scss` |
140
- | `--epx-touch-min` | `44px` | `theme/tokens.scss` |
141
- | `--epx-m-gutter` | `16px` | `theme/tokens.scss` |
142
- | `--epx-m-gap` | `12px` | `theme/tokens.scss` |
143
- | `--epx-m-radius-card` | `12px` | `theme/tokens.scss` |
144
- | `--epx-m-radius-sheet` | `16px` | `theme/tokens.scss` |
145
- | `--epx-m-nav-height` | `44px` | `theme/tokens.scss` |
146
- | `--epx-m-tab-height` | `50px` | `theme/tokens.scss` |
147
- | `--epx-safe-top` | `env(safe-area-inset-top, 0px)` | `theme/tokens.scss` |
148
- | `--epx-safe-bottom` | `env(safe-area-inset-bottom, 0px)` | `theme/tokens.scss` |
149
- | `--epx-icon-size` | `20px` | `theme/tokens.scss` |
150
- | `--el-component-size` | `var(--epx-touch-min)` | `theme/tokens.scss` |
151
- | `--el-input-height` | `var(--epx-touch-min)` | `theme/tokens.scss` |
152
- | `$namespace` | `'epx'` | `theme/utils/config.scss` |
153
- | `$element-separator` | `'__'` | `theme/utils/config.scss` |
154
- | `$modifier-separator` | `'--'` | `theme/utils/config.scss` |
155
- | `$state-prefix` | `'is-'` | `theme/utils/config.scss` |
156
- | `$selector` | `inspect($selector)` | `theme/utils/function.scss` |
157
- | `$B` | `$namespace+'-'+$block !global` | `theme/utils/mixins.scss` |
158
- | `$E` | `$element !global` | `theme/utils/mixins.scss` |
159
- | `$selector` | `&` | `theme/utils/mixins.scss` |
160
- | `$currentSelector` | `""` | `theme/utils/mixins.scss` |
161
- | `$modifierCombo` | `''` | `theme/utils/mixins.scss` |
162
- | `$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` |
163
- | `$--scrollbar-thumb-background` | `#b4bccc` | `theme/utils/mixins.scss` |
164
- | `$--scrollbar-track-background` | `#fff` | `theme/utils/mixins.scss` |
165
- | `$interpolation` | `''` | `theme/utils/mixins.scss` |
166
- | `$rule-name` | `'%shared-'+$name` | `theme/utils/mixins.scss` |
167
- | `$--color-primary` | `#0874E7!default` | `theme/utils/var.scss` |
168
- | `$--color-primary-purple` | `#7569E2!default` | `theme/utils/var.scss` |
169
- | `$--color-primary-palevioletred` | `#CE4545!default` | `theme/utils/var.scss` |
170
- | `$--color-primary-forestgreen` | `#3D8A50!default` | `theme/utils/var.scss` |
171
- | `$--color-primary-deepblue` | `#0F5FBD!default` | `theme/utils/var.scss` |
172
- | `$--color-primary-orange` | `#EA6000!default` | `theme/utils/var.scss` |
173
- | `$--color-primary-skyblue` | `#1A4586!default` | `theme/utils/var.scss` |
174
- | `$--color-primary-aurorablue` | `#383B9E!default` | `theme/utils/var.scss` |
175
- | `$--color-primary-tiffanyblue` | `#00AAAD!default` | `theme/utils/var.scss` |
176
- | `$--color-primary-tsinghuapurple` | `#5F2167!default` | `theme/utils/var.scss` |
177
- | `$--color-primary-creativeblue` | `#418CFF!default` | `theme/utils/var.scss` |
178
- | `$--color-primary-njhkht` | `#1D2088!default` | `theme/utils/var.scss` |
179
- | `$--color-success` | `#67C23A !default` | `theme/utils/var.scss` |
180
- | `$--color-warning` | `#E6A23C !default` | `theme/utils/var.scss` |
181
- | `$--color-danger` | `#F56C6C !default` | `theme/utils/var.scss` |
182
- | `$--color-white` | `#FFFFFF !default` | `theme/utils/var.scss` |
183
- | `$--color-black` | `#000000 !default` | `theme/utils/var.scss` |
184
- | `$--color-primary-light-1` | `mix($--color-white, $--color-primary, 10%) !default` | `theme/utils/var.scss` |
185
- | `$--color-primary-light-2` | `mix($--color-white, $--color-primary, 20%) !default` | `theme/utils/var.scss` |
186
- | `$--color-primary-light-3` | `mix($--color-white, $--color-primary, 30%) !default` | `theme/utils/var.scss` |
187
- | `$--color-primary-light-4` | `mix($--color-white, $--color-primary, 40%) !default` | `theme/utils/var.scss` |
188
- | `$--color-primary-light-5` | `mix($--color-white, $--color-primary, 50%) !default` | `theme/utils/var.scss` |
189
- | `$--color-primary-light-6` | `mix($--color-white, $--color-primary, 60%) !default` | `theme/utils/var.scss` |
190
- | `$--color-primary-light-7` | `mix($--color-white, $--color-primary, 70%) !default` | `theme/utils/var.scss` |
191
- | `$--color-primary-light-8` | `mix($--color-white, $--color-primary, 80%) !default` | `theme/utils/var.scss` |
192
- | `$--color-primary-light-9` | `mix($--color-white, $--color-primary, 90%) !default` | `theme/utils/var.scss` |
193
- | `$--color-text-primary` | `#333 !default` | `theme/utils/var.scss` |
194
- | `$--color-text-regular` | `#666 !default` | `theme/utils/var.scss` |
195
- | `$--color-text-secondary` | `#999 !default` | `theme/utils/var.scss` |
196
- | `$--color-text-placeholder` | `#C0C4CC !default` | `theme/utils/var.scss` |
197
- | `$--border-color-base` | `#E3E3E3 !default` | `theme/utils/var.scss` |
198
- | `$--border-color-light` | `#E4E7ED !default` | `theme/utils/var.scss` |
199
- | `$--border-color-lighter` | `#EBEEF5 !default` | `theme/utils/var.scss` |
200
- | `$--border-color-extra-light` | `#F2F6FC !default` | `theme/utils/var.scss` |
201
- | `$--background-color-base` | `#F5F7FA !default` | `theme/utils/var.scss` |
202
- | `$--link-color` | `$--color-primary-light-2 !default` | `theme/utils/var.scss` |
203
- | `$--link-hover-color` | `$--color-primary !default` | `theme/utils/var.scss` |
204
- | `$--border-width-base` | `1px !default` | `theme/utils/var.scss` |
205
- | `$--border-style-base` | `solid !default` | `theme/utils/var.scss` |
206
- | `$--border-color-hover` | `$--color-text-placeholder !default` | `theme/utils/var.scss` |
207
- | `$--border-base` | `$--border-width-base $--border-style-base $--border-color-base !default` | `theme/utils/var.scss` |
208
- | `$--border-radius-base` | `4px !default` | `theme/utils/var.scss` |
209
- | `$--border-radius-small` | `2px !default` | `theme/utils/var.scss` |
210
- | `$--border-radius-circle` | `100% !default` | `theme/utils/var.scss` |
211
- | `$--border-radius-zero` | `0 !default` | `theme/utils/var.scss` |
212
- | `$--font-size-extra-large` | `20px !default` | `theme/utils/var.scss` |
213
- | `$--font-size-large` | `18px !default` | `theme/utils/var.scss` |
214
- | `$--font-size-medium` | `16px !default` | `theme/utils/var.scss` |
215
- | `$--font-size-base` | `14px !default` | `theme/utils/var.scss` |
216
- | `$--font-size-small` | `13px !default` | `theme/utils/var.scss` |
217
- | `$--font-size-extra-small` | `12px !default` | `theme/utils/var.scss` |
218
- | `$--font-line-height-primary` | `24px !default` | `theme/utils/var.scss` |
219
- | `$--font-line-height-secondary` | `16px !default` | `theme/utils/var.scss` |
220
- | `$--font-color-disabled-base` | `#bbb !default` | `theme/utils/var.scss` |
221
- | `$--padding-base` | `16px!default` | `theme/utils/var.scss` |
222
- | `$--padding-small` | `10px!default` | `theme/utils/var.scss` |
223
- | `$--padding-large` | `24px!default` | `theme/utils/var.scss` |
224
- | `$--margin-base` | `16px!default` | `theme/utils/var.scss` |
225
- | `$--margin-small` | `10px!default` | `theme/utils/var.scss` |
226
- | `$--margin-large` | `24px!default` | `theme/utils/var.scss` |
227
-
228
- ## 样式源码与其他入口
229
-
230
- /src/* 是主题样式资源的公开入口，可按实际文件名引入 Sass 定义、令牌和图标底座。package.json 供构建工具读取包元数据。
231
-
232
- | 公开路径模式 | 实际目标 |
233
- | --- | --- |
234
- | `@epxing/theme/src/*` | `./src/*` |
235
- | `@epxing/theme/package.json` | `./package.json` |
236
-
237
- ## 文档维护
238
-
239
- 本页由 build/gen-package-api-docs.mjs 生成。修改公开入口并更新构建产物和类型声明后，在框架根运行 `pnpm docs:api`；`pnpm docs:api:check` 检查清单、类型、包内文档与站点镜像是否同步，同时验证页面编译和文档链接。用途和示例维护在 build/package-api-notes.mjs，组件和源码方法的详细参考位于 docs/revision。
1
+ # @epxing/theme API
2
+
3
+ 全局样式、设计令牌、Sass mixin/function 和图标底座。此包没有 JavaScript 函数或组件导出。
4
+
5
+ 本页对应包版本 `5.3.0-beta.4`。导出名、子路径和签名从当前源码、package.json 与类型声明生成。
6
+
7
+ ## 安装与使用
8
+
9
+
10
+ ```sh
11
+ pnpm add @epxing/theme@5.3.0-beta.2
12
+ ```
13
+
14
+
15
+ ```js
16
+ // 产品入口：全局主题仅引入一次
17
+ import '@epxing/theme'
18
+
19
+ // 仅补图标底座时：
20
+ // import '@epxing/theme/src/icons/base.scss'
21
+ ```
22
+
23
+ ## 接入约定
24
+
25
+ 根入口是 src/index.scss，由产品的 Sass 构建环境编译。Sass 定义可通过 @epxing/theme/src/theme/utils/mixins.scss 引入，再使用 @include b(...)、@include e(...)、@include m(...) 等。additionalData 只注入变量/函数/mixin 定义，避免重复输出全局 CSS。明暗、字号、圆角和密度由主题令牌控制。
26
+
27
+ ## Sass 工具完整签名
28
+
29
+ [详细参考](../../docs/revision/theme/api/mixins.md)。下表包括通过 /src/* 可访问的全部静态 mixin/function 定义。
30
+
31
+ | 签名 | 文件（相对 src） |
32
+ | --- | --- |
33
+ | `@function selectorToString($selector)` | `theme/utils/function.scss` |
34
+ | `@function containsModifier($selector)` | `theme/utils/function.scss` |
35
+ | `@function containWhenFlag($selector)` | `theme/utils/function.scss` |
36
+ | `@function containPseudoClass($selector)` | `theme/utils/function.scss` |
37
+ | `@function hitAllSpecialNestRule($selector)` | `theme/utils/function.scss` |
38
+ | `@mixin b($block)` | `theme/utils/mixins.scss` |
39
+ | `@mixin e($element)` | `theme/utils/mixins.scss` |
40
+ | `@mixin m($modifier)` | `theme/utils/mixins.scss` |
41
+ | `@mixin meb($modifier: false, $element: $E, $block: $B)` | `theme/utils/mixins.scss` |
42
+ | `@mixin when($state)` | `theme/utils/mixins.scss` |
43
+ | `@mixin font_color_primary($opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
44
+ | `@mixin font_color_primary_mixin($opacity: 1, $color: $--color-white)` | `theme/utils/mixins.scss` |
45
+ | `@mixin bg_color_primary($opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
46
+ | `@mixin bg_color_primary_mixin($opacity: 1, $color: $--color-white)` | `theme/utils/mixins.scss` |
47
+ | `@mixin border_color_primary($opacity: 1, $position: null, $color: $--color-primary)` | `theme/utils/mixins.scss` |
48
+ | `@mixin border_color_primary_mixin($opacity: 1, $color: $--color-white)` | `theme/utils/mixins.scss` |
49
+ | `@mixin stroke_color_primary($opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
50
+ | `@mixin border_primary($width: 1px, $position: null, $type: solid, $opacity: 1, $color: $--color-primary)` | `theme/utils/mixins.scss` |
51
+ | `@mixin box_shadow_primary($hShadow, $vShadow, $blur, $spread, $opacity, $args...)` | `theme/utils/mixins.scss` |
52
+ | `@mixin res($key, $map: $--breakpoints)` | `theme/utils/mixins.scss` |
53
+ | `@mixin scroll-bar` | `theme/utils/mixins.scss` |
54
+ | `@mixin placeholder` | `theme/utils/mixins.scss` |
55
+ | `@mixin b($block)` | `theme/utils/mixins.scss` |
56
+ | `@mixin e($element)` | `theme/utils/mixins.scss` |
57
+ | `@mixin m($modifier)` | `theme/utils/mixins.scss` |
58
+ | `@mixin configurable-m($modifier, $E-flag: false)` | `theme/utils/mixins.scss` |
59
+ | `@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B)` | `theme/utils/mixins.scss` |
60
+ | `@mixin meb($modifier: false, $element: $E, $block: $B)` | `theme/utils/mixins.scss` |
61
+ | `@mixin when($state)` | `theme/utils/mixins.scss` |
62
+ | `@mixin extend-rule($name)` | `theme/utils/mixins.scss` |
63
+ | `@mixin share-rule($name)` | `theme/utils/mixins.scss` |
64
+ | `@mixin pseudo($pseudo)` | `theme/utils/mixins.scss` |
65
+ | `@mixin epx-card` | `theme/utils/mixins.scss` |
66
+ | `@mixin epx-text($size: base, $secondary: false)` | `theme/utils/mixins.scss` |
67
+
68
+ ## CSS / Sass 变量
69
+
70
+ [详细参考](../../docs/revision/theme/api/tokens.md)。同名变量可能按主题和选择器覆写，下表显示各文件中的首次声明；动态插值生成的名称以编译 CSS 为准。
71
+
72
+ | 名称 | 声明值 | 文件（相对 src） |
73
+ | --- | --- | --- |
74
+ | `--border-radius-zero` | `0px` | `index.scss` |
75
+ | `--border-radius-base` | `4px` | `index.scss` |
76
+ | `--border-radius-medium` | `8px` | `index.scss` |
77
+ | `--border-radius-large` | `12px` | `index.scss` |
78
+ | `--border-radius-circle` | `100%` | `index.scss` |
79
+ | `--margin-small` | `6px` | `index.scss` |
80
+ | `--margin-medium` | `8px` | `index.scss` |
81
+ | `--margin-base` | `10px` | `index.scss` |
82
+ | `--margin-large` | `12px` | `index.scss` |
83
+ | `--padding-mini` | `6px` | `index.scss` |
84
+ | `--padding-small` | `6px` | `index.scss` |
85
+ | `--padding-medium` | `8px` | `index.scss` |
86
+ | `--padding-base` | `10px` | `index.scss` |
87
+ | `--padding-large` | `12px` | `index.scss` |
88
+ | `--padding` | `var(--padding-base)` | `index.scss` |
89
+ | `--el-button-size` | `24px` | `theme/element-plus-overrides.scss` |
90
+ | `--el-color-primary` | `rgb(var(--color-primary))` | `theme/element-plus-tokens.scss` |
91
+ | `--el-color-primary-rgb` | `var(--color-primary)` | `theme/element-plus-tokens.scss` |
92
+ | `--el-color-primary-light-3` | `color-mix(in srgb, #fff 30%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
93
+ | `--el-color-primary-light-5` | `color-mix(in srgb, #fff 50%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
94
+ | `--el-color-primary-light-7` | `color-mix(in srgb, #fff 70%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
95
+ | `--el-color-primary-light-8` | `color-mix(in srgb, #fff 80%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
96
+ | `--el-color-primary-light-9` | `color-mix(in srgb, #fff 90%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
97
+ | `--el-color-primary-dark-2` | `color-mix(in srgb, #000 20%, rgb(var(--color-primary)))` | `theme/element-plus-tokens.scss` |
98
+ | `--epx-i` | `linear-gradient(#0000, #0000)` | `theme/icons/base.scss` |
99
+ | `--color-primary` | `8,116,231` | `theme/tokens.scss` |
100
+ | `--epx-font-size-s` | `12px` | `theme/tokens.scss` |
101
+ | `--epx-font-size-base` | `14px` | `theme/tokens.scss` |
102
+ | `--epx-font-size-l` | `16px` | `theme/tokens.scss` |
103
+ | `--epx-font-size-xl` | `20px` | `theme/tokens.scss` |
104
+ | `--epx-radius-s` | `2px` | `theme/tokens.scss` |
105
+ | `--epx-radius-base` | `4px` | `theme/tokens.scss` |
106
+ | `--epx-radius-l` | `8px` | `theme/tokens.scss` |
107
+ | `--epx-space-1` | `4px` | `theme/tokens.scss` |
108
+ | `--epx-space-2` | `8px` | `theme/tokens.scss` |
109
+ | `--epx-space-3` | `12px` | `theme/tokens.scss` |
110
+ | `--epx-space-4` | `16px` | `theme/tokens.scss` |
111
+ | `--epx-space-5` | `24px` | `theme/tokens.scss` |
112
+ | `--epx-space-6` | `32px` | `theme/tokens.scss` |
113
+ | `--epx-bg` | `#f5f7fa` | `theme/tokens.scss` |
114
+ | `--epx-bg-card` | `#ffffff` | `theme/tokens.scss` |
115
+ | `--epx-text` | `#303133` | `theme/tokens.scss` |
116
+ | `--epx-text-secondary` | `#909399` | `theme/tokens.scss` |
117
+ | `--epx-border` | `#dcdfe6` | `theme/tokens.scss` |
118
+ | `--color-text-title` | `#222222` | `theme/tokens.scss` |
119
+ | `--color-text-primary` | `#444444` | `theme/tokens.scss` |
120
+ | `--color-text-secondary` | `#666666` | `theme/tokens.scss` |
121
+ | `--color-text-assistant` | `#999999` | `theme/tokens.scss` |
122
+ | `--color-text-disabled` | `#aaaaaa` | `theme/tokens.scss` |
123
+ | `--epx-margin` | `10px` | `theme/tokens.scss` |
124
+ | `--epx-shadow-s` | `0px 0px 6px #0000001f` | `theme/tokens.scss` |
125
+ | `--epx-shadow-base` | `0px 0px 12px #0000001f` | `theme/tokens.scss` |
126
+ | `--epx-shadow-l` | `0px 12px 32px 4px #0000000a, 0px 8px 20px #00000014` | `theme/tokens.scss` |
127
+ | `--epx-shadow-xl` | `0px 16px 48px 16px #00000014, 0px 12px 32px #0000001f, 0px 8px 16px -8px #00000029` | `theme/tokens.scss` |
128
+ | `--epx-shadow-focus` | `0 0 0 2px rgba(var(--color-primary), 0.1)` | `theme/tokens.scss` |
129
+ | `--border-radius` | `var(--epx-radius-base)` | `theme/tokens.scss` |
130
+ | `--margin` | `var(--epx-margin)` | `theme/tokens.scss` |
131
+ | `--el-border-radius-base` | `var(--epx-radius-base)` | `theme/tokens.scss` |
132
+ | `--el-border-radius-small` | `var(--epx-radius-s)` | `theme/tokens.scss` |
133
+ | `--el-font-size-base` | `var(--epx-font-size-base)` | `theme/tokens.scss` |
134
+ | `--el-font-size-small` | `var(--epx-font-size-s)` | `theme/tokens.scss` |
135
+ | `--el-font-size-large` | `var(--epx-font-size-l)` | `theme/tokens.scss` |
136
+ | `--el-box-shadow-lighter` | `var(--epx-shadow-s)` | `theme/tokens.scss` |
137
+ | `--el-box-shadow-light` | `var(--epx-shadow-base)` | `theme/tokens.scss` |
138
+ | `--el-box-shadow` | `var(--epx-shadow-l)` | `theme/tokens.scss` |
139
+ | `--el-box-shadow-dark` | `var(--epx-shadow-xl)` | `theme/tokens.scss` |
140
+ | `--epx-touch-min` | `44px` | `theme/tokens.scss` |
141
+ | `--epx-m-gutter` | `16px` | `theme/tokens.scss` |
142
+ | `--epx-m-gap` | `12px` | `theme/tokens.scss` |
143
+ | `--epx-m-radius-card` | `12px` | `theme/tokens.scss` |
144
+ | `--epx-m-radius-sheet` | `16px` | `theme/tokens.scss` |
145
+ | `--epx-m-nav-height` | `44px` | `theme/tokens.scss` |
146
+ | `--epx-m-tab-height` | `50px` | `theme/tokens.scss` |
147
+ | `--epx-safe-top` | `env(safe-area-inset-top, 0px)` | `theme/tokens.scss` |
148
+ | `--epx-safe-bottom` | `env(safe-area-inset-bottom, 0px)` | `theme/tokens.scss` |
149
+ | `--epx-icon-size` | `20px` | `theme/tokens.scss` |
150
+ | `--el-component-size` | `var(--epx-touch-min)` | `theme/tokens.scss` |
151
+ | `--el-input-height` | `var(--epx-touch-min)` | `theme/tokens.scss` |
152
+ | `$namespace` | `'epx'` | `theme/utils/config.scss` |
153
+ | `$element-separator` | `'__'` | `theme/utils/config.scss` |
154
+ | `$modifier-separator` | `'--'` | `theme/utils/config.scss` |
155
+ | `$state-prefix` | `'is-'` | `theme/utils/config.scss` |
156
+ | `$selector` | `inspect($selector)` | `theme/utils/function.scss` |
157
+ | `$B` | `$namespace+'-'+$block !global` | `theme/utils/mixins.scss` |
158
+ | `$E` | `$element !global` | `theme/utils/mixins.scss` |
159
+ | `$selector` | `&` | `theme/utils/mixins.scss` |
160
+ | `$currentSelector` | `""` | `theme/utils/mixins.scss` |
161
+ | `$modifierCombo` | `''` | `theme/utils/mixins.scss` |
162
+ | `$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` |
163
+ | `$--scrollbar-thumb-background` | `#b4bccc` | `theme/utils/mixins.scss` |
164
+ | `$--scrollbar-track-background` | `#fff` | `theme/utils/mixins.scss` |
165
+ | `$interpolation` | `''` | `theme/utils/mixins.scss` |
166
+ | `$rule-name` | `'%shared-'+$name` | `theme/utils/mixins.scss` |
167
+ | `$--color-primary` | `#0874E7!default` | `theme/utils/var.scss` |
168
+ | `$--color-primary-purple` | `#7569E2!default` | `theme/utils/var.scss` |
169
+ | `$--color-primary-palevioletred` | `#CE4545!default` | `theme/utils/var.scss` |
170
+ | `$--color-primary-forestgreen` | `#3D8A50!default` | `theme/utils/var.scss` |
171
+ | `$--color-primary-deepblue` | `#0F5FBD!default` | `theme/utils/var.scss` |
172
+ | `$--color-primary-orange` | `#EA6000!default` | `theme/utils/var.scss` |
173
+ | `$--color-primary-skyblue` | `#1A4586!default` | `theme/utils/var.scss` |
174
+ | `$--color-primary-aurorablue` | `#383B9E!default` | `theme/utils/var.scss` |
175
+ | `$--color-primary-tiffanyblue` | `#00AAAD!default` | `theme/utils/var.scss` |
176
+ | `$--color-primary-tsinghuapurple` | `#5F2167!default` | `theme/utils/var.scss` |
177
+ | `$--color-primary-creativeblue` | `#418CFF!default` | `theme/utils/var.scss` |
178
+ | `$--color-primary-njhkht` | `#1D2088!default` | `theme/utils/var.scss` |
179
+ | `$--color-success` | `#67C23A !default` | `theme/utils/var.scss` |
180
+ | `$--color-warning` | `#E6A23C !default` | `theme/utils/var.scss` |
181
+ | `$--color-danger` | `#F56C6C !default` | `theme/utils/var.scss` |
182
+ | `$--color-white` | `#FFFFFF !default` | `theme/utils/var.scss` |
183
+ | `$--color-black` | `#000000 !default` | `theme/utils/var.scss` |
184
+ | `$--color-primary-light-1` | `mix($--color-white, $--color-primary, 10%) !default` | `theme/utils/var.scss` |
185
+ | `$--color-primary-light-2` | `mix($--color-white, $--color-primary, 20%) !default` | `theme/utils/var.scss` |
186
+ | `$--color-primary-light-3` | `mix($--color-white, $--color-primary, 30%) !default` | `theme/utils/var.scss` |
187
+ | `$--color-primary-light-4` | `mix($--color-white, $--color-primary, 40%) !default` | `theme/utils/var.scss` |
188
+ | `$--color-primary-light-5` | `mix($--color-white, $--color-primary, 50%) !default` | `theme/utils/var.scss` |
189
+ | `$--color-primary-light-6` | `mix($--color-white, $--color-primary, 60%) !default` | `theme/utils/var.scss` |
190
+ | `$--color-primary-light-7` | `mix($--color-white, $--color-primary, 70%) !default` | `theme/utils/var.scss` |
191
+ | `$--color-primary-light-8` | `mix($--color-white, $--color-primary, 80%) !default` | `theme/utils/var.scss` |
192
+ | `$--color-primary-light-9` | `mix($--color-white, $--color-primary, 90%) !default` | `theme/utils/var.scss` |
193
+ | `$--color-text-primary` | `#333 !default` | `theme/utils/var.scss` |
194
+ | `$--color-text-regular` | `#666 !default` | `theme/utils/var.scss` |
195
+ | `$--color-text-secondary` | `#999 !default` | `theme/utils/var.scss` |
196
+ | `$--color-text-placeholder` | `#C0C4CC !default` | `theme/utils/var.scss` |
197
+ | `$--border-color-base` | `#E3E3E3 !default` | `theme/utils/var.scss` |
198
+ | `$--border-color-light` | `#E4E7ED !default` | `theme/utils/var.scss` |
199
+ | `$--border-color-lighter` | `#EBEEF5 !default` | `theme/utils/var.scss` |
200
+ | `$--border-color-extra-light` | `#F2F6FC !default` | `theme/utils/var.scss` |
201
+ | `$--background-color-base` | `#F5F7FA !default` | `theme/utils/var.scss` |
202
+ | `$--link-color` | `$--color-primary-light-2 !default` | `theme/utils/var.scss` |
203
+ | `$--link-hover-color` | `$--color-primary !default` | `theme/utils/var.scss` |
204
+ | `$--border-width-base` | `1px !default` | `theme/utils/var.scss` |
205
+ | `$--border-style-base` | `solid !default` | `theme/utils/var.scss` |
206
+ | `$--border-color-hover` | `$--color-text-placeholder !default` | `theme/utils/var.scss` |
207
+ | `$--border-base` | `$--border-width-base $--border-style-base $--border-color-base !default` | `theme/utils/var.scss` |
208
+ | `$--border-radius-base` | `4px !default` | `theme/utils/var.scss` |
209
+ | `$--border-radius-small` | `2px !default` | `theme/utils/var.scss` |
210
+ | `$--border-radius-circle` | `100% !default` | `theme/utils/var.scss` |
211
+ | `$--border-radius-zero` | `0 !default` | `theme/utils/var.scss` |
212
+ | `$--font-size-extra-large` | `20px !default` | `theme/utils/var.scss` |
213
+ | `$--font-size-large` | `18px !default` | `theme/utils/var.scss` |
214
+ | `$--font-size-medium` | `16px !default` | `theme/utils/var.scss` |
215
+ | `$--font-size-base` | `14px !default` | `theme/utils/var.scss` |
216
+ | `$--font-size-small` | `13px !default` | `theme/utils/var.scss` |
217
+ | `$--font-size-extra-small` | `12px !default` | `theme/utils/var.scss` |
218
+ | `$--font-line-height-primary` | `24px !default` | `theme/utils/var.scss` |
219
+ | `$--font-line-height-secondary` | `16px !default` | `theme/utils/var.scss` |
220
+ | `$--font-color-disabled-base` | `#bbb !default` | `theme/utils/var.scss` |
221
+ | `$--padding-base` | `16px!default` | `theme/utils/var.scss` |
222
+ | `$--padding-small` | `10px!default` | `theme/utils/var.scss` |
223
+ | `$--padding-large` | `24px!default` | `theme/utils/var.scss` |
224
+ | `$--margin-base` | `16px!default` | `theme/utils/var.scss` |
225
+ | `$--margin-small` | `10px!default` | `theme/utils/var.scss` |
226
+ | `$--margin-large` | `24px!default` | `theme/utils/var.scss` |
227
+
228
+ ## 样式源码与其他入口
229
+
230
+ /src/* 是主题样式资源的公开入口，可按实际文件名引入 Sass 定义、令牌和图标底座。package.json 供构建工具读取包元数据。
231
+
232
+ | 公开路径模式 | 实际目标 |
233
+ | --- | --- |
234
+ | `@epxing/theme/src/*` | `./src/*` |
235
+ | `@epxing/theme/package.json` | `./package.json` |
236
+
237
+ ## 文档维护
238
+
239
+ 本页由 build/gen-package-api-docs.mjs 生成。修改公开入口并更新构建产物和类型声明后，在框架根运行 `pnpm docs:api`；`pnpm docs:api:check` 检查清单、类型、包内文档与站点镜像是否同步，同时验证页面编译和文档链接。用途和示例维护在 build/package-api-notes.mjs，组件和源码方法的详细参考位于 docs/revision。
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epxing/theme",
3
- "version": "5.3.0-beta.2",
3
+ "version": "5.3.0-beta.4",
4
4
  "description": "设计令牌 + 主题 scss（源码分发：消费方 sass 编译期使用 mixins/tokens；各 @epxing 包构建时已把用到的样式编进各自 style.css）",
5
5
  "main": "src/index.scss",
6
6
  "exports": {
package/src/theme/import-export-fields.scss ADDED
@@ -0,0 +1,73 @@
1
+ @import './utils/mixins.scss';
2
+
3
+ // 导入和导出共用字段模板样式，按需加载时各自声明依赖。
4
+ @include b(import) {
5
+ @include e(download-template) {
6
+ &:last-child {
7
+ @include e(download-template-body) {
8
+ border: 0;
9
+ }
10
+ }
11
+ }
12
+ @include e(download-template-header) {
13
+ padding: 20px 0;
14
+ display: flex;
15
+ justify-content: space-between;
16
+ align-items: center;
17
+ >span:first-child {
18
+ font-size: var(--epx-font-size-l);
19
+ color: var(--epx-text);
20
+ line-height: 20px;
21
+ border-left: 4px solid;
22
+ @include border_color_primary;
23
+ padding-left: 8px;
24
+ }
25
+ }
26
+ @include e(common-field-group-item) {
27
+ display: inline-block;
28
+ padding: 8px 20px;
29
+ background: var(--epx-bg);
30
+ border-radius: var(--epx-radius-base);
31
+ line-height: 20px;
32
+ margin: 5px;
33
+ cursor: pointer;
34
+ i {
35
+ display: none;
36
+ }
37
+ &:hover {
38
+ box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
39
+ &:not(.is-common) {
40
+ padding:7px 4px;
41
+ i {
42
+ display: inline;
43
+ margin-left: 2px;
44
+ font-size: var(--epx-font-size-s);
45
+ margin: 0 2px;
46
+ }
47
+ }
48
+ }
49
+ &.is-active {
50
+ border: 1px solid ;
51
+ @include border_color_primary;
52
+ @include font_color_primary;
53
+ background: var(--epx-bg-card);
54
+ padding:6px 19px;
55
+ &:not(.is-common) {
56
+ padding:6px 3px;
57
+ i {
58
+ display: inline;
59
+ font-size: var(--epx-font-size-s);
60
+ margin: 0 2px;
61
+ }
62
+ }
63
+ }
64
+ }
65
+ @include e(common-field-move) {
66
+ cursor: move;
67
+ }
68
+ @include e(download-template-body) {
69
+ padding-bottom: 10px;
70
+ border-bottom: 1px dashed ;
71
+ @include border_color_primary;
72
+ }
73
+ }