@bifrostui/styles 1.5.3 → 2.0.0-alpha.1

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 (21) hide show
  1. package/dist/index.css +193 -296
  2. package/index.less +12 -66
  3. package/mixins/gradient.less +1 -1
  4. package/mixins/variables.less +1 -1
  5. package/package.json +11 -2
  6. package/registry/default-dark.mjs +34 -0
  7. package/registry/default-light.mjs +211 -0
  8. package/registry/dm-light.mjs +60 -0
  9. package/registry/index.mjs +4 -0
  10. package/registry/pioneer-light.mjs +107 -0
  11. package/themes/default-dark.less +21 -0
  12. package/themes/default-light.less +151 -0
  13. package/themes/dm-light.less +39 -0
  14. package/themes/index.less +6 -0
  15. package/themes/pioneer-light-components.less +51 -0
  16. package/themes/pioneer-light.less +70 -0
  17. package/theme/default-dark.less +0 -29
  18. package/theme/default-light.less +0 -154
  19. package/theme/dm-dark.less +0 -33
  20. package/theme/dm-light.less +0 -19
  21. package/theme/index.less +0 -4
package/dist/index.css CHANGED
@@ -1,94 +1,63 @@
1
1
  /* stylelint-disable selector-type-no-unknown */
2
- @media (prefers-color-scheme: light) {
3
- [data-color-mode='auto'][data-theme='dm'] {
4
- /** 颜色 */
5
- --bui-color-blue: #48b1f1;
6
- --bui-color-orange: #ff8f3f;
7
- --bui-color-gray: #f5f5f5;
8
- --bui-color-pink: #ff8e92;
9
- --bui-color-neutral-2: #4d4d56;
10
- --bui-color-neutral-3: #9c9ca5;
11
- --bui-color-neutral-5: #f1f1f1;
12
- --bui-color-bg-default: #f4f5f6;
13
- --bui-color-powder-start: #ff72a2;
14
- --bui-color-powder-end: #ff7070;
15
- --bui-title-size-2: 20px;
16
- --bui-title-size-3: 18px;
17
- --bui-color-red: #ff4886;
18
- --bui-color-fg-default: #2e333e;
19
- --bui-color-fg-muted: #2e333e;
20
- --bui-shape-radius-label: 4px;
21
- }
2
+ /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
3
+ /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
4
+ /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
5
+ /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
6
+ /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
7
+ .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large,
8
+ [data-color-mode][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large {
9
+ background-image: radial-gradient(35px 25px ellipse at 2% 110%, #fffe1e 0%, rgba(251, 134, 35, 0) 99%), radial-gradient(35px 25px ellipse at 110% 120%, #ff3018 0%, rgba(0, 48, 24, 0) 92%), linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
22
10
  }
23
- @media (prefers-color-scheme: dark) {
24
- [data-color-mode='auto'][data-theme='dm'] {
25
- --bui-color-neutral-5: #e5e5e5;
26
- --bui-color-powder-start: #ff4886;
27
- --bui-color-powder-end: #ffa662;
28
- --bui-color-fg-default: #f0f6fc;
29
- --bui-color-fg-muted: #8b949e;
30
- --bui-color-fg-subtle: #484f58;
31
- --bui-color-fg-disabled: #484f58;
32
- --bui-color-bg-default: #010409;
33
- --bui-color-bg-view: #161b22;
34
- --bui-color-bg-popover: rgba(72, 79, 88, 0.7);
35
- --bui-color-bg-alpha-light-9: rgba(22, 27, 34, 0.9);
36
- --bui-color-bg-alpha-light-7: rgba(22, 27, 34, 0.7);
37
- --bui-color-bg-alpha-light-5: rgba(22, 27, 34, 0.5);
38
- --bui-color-bg-alpha-light-3: rgba(22, 27, 34, 0.3);
39
- --bui-color-bg-alpha-light-1: rgba(22, 27, 34, 0.1);
40
- --bui-color-bg-alpha-dark-9: rgba(72, 79, 88, 0.9);
41
- --bui-color-bg-alpha-dark-7: rgba(72, 79, 88, 0.7);
42
- --bui-color-bg-alpha-dark-5: rgba(72, 79, 88, 0.5);
43
- --bui-color-bg-alpha-dark-3: rgba(72, 79, 88, 0.3);
44
- --bui-color-bg-alpha-dark-1: rgba(72, 79, 88, 0.1);
45
- --bui-color-border-default: #30363d;
46
- }
11
+ .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full,
12
+ [data-color-mode][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full {
13
+ background-image: radial-gradient(93px 50px ellipse at 2% 110%, #fffe1e 0%, rgba(251, 134, 35, 0) 100%), radial-gradient(93px 50px ellipse at 98% 110%, #ff3018 0%, rgba(0, 48, 24, 0) 92%), linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
47
14
  }
48
- /* default theme */
15
+ .bui-pioneer-light .bui-tabs .bui-tabs-indicator,
16
+ [data-color-mode][data-theme='pioneer'] .bui-tabs .bui-tabs-indicator {
17
+ background-image: linear-gradient(90deg, #ff9b00 0%, #ffa700 21%, #ff8300 100%);
18
+ }
19
+ /* 经典 */
49
20
  :root,
50
21
  page,
51
22
  xhs-page,
52
23
  .bui-default-light,
53
- [data-color-mode='light'][data-theme='default'] {
54
- /** 品牌红 */
24
+ [data-color-mode='light'][data-theme] {
25
+ --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif;
55
26
  --bui-color-red: #ff335c;
56
27
  --bui-color-red-light: #ffebef;
57
- /** 明亮粉 */
58
28
  --bui-color-pink: #dd10f2;
59
29
  --bui-color-pink-light: #fce7fe;
60
- /** 活力橙 */
61
30
  --bui-color-orange: #ff8533;
62
31
  --bui-color-orange-light: #fff0e5;
63
- /** 亲和绿 */
32
+ --bui-color-yellow: #ff8533;
33
+ --bui-color-yellow-light: #fff0e5;
64
34
  --bui-color-green: #00d68f;
65
35
  --bui-color-green-light: #dcf9f0;
66
- /** 神秘紫 */
67
36
  --bui-color-purple: #8b52ff;
68
37
  --bui-color-purple-light: #f2ebff;
69
- /** 宁静蓝 */
70
38
  --bui-color-blue: #148aff;
71
39
  --bui-color-blue-light: #e1f0ff;
72
- /** 中性灰 */
73
40
  --bui-color-gray: #8896b1;
74
- --bui-color-gray-light: #f3f5f8;
41
+ --bui-color-gray-light: #f7f9fc;
75
42
  --bui-color-black: #000;
76
43
  --bui-color-white: #fff;
77
44
  --bui-color-vip: #ff866e;
78
- /** 中性色 */
45
+ --bui-color-vip1: #fec9a3;
46
+ --bui-color-vip2: #f44a8b;
47
+ --bui-color-vip3: #c46e31;
48
+ --bui-color-vip4: #fccfe0;
79
49
  --bui-color-neutral-0: var(--bui-color-black);
80
- --bui-color-neutral-1: #2e333e;
81
- --bui-color-neutral-2: #5f6672;
82
- --bui-color-neutral-3: #959aa5;
83
- --bui-color-neutral-4: #ced1d6;
50
+ --bui-color-neutral-1: #030b1a;
51
+ --bui-color-neutral-2: #444b5b;
52
+ --bui-color-neutral-3: #8b93a5;
53
+ --bui-color-neutral-4: #bfc4cf;
84
54
  --bui-color-neutral-5: #e9ebef;
85
- --bui-color-neutral-6: #f5f6f8;
55
+ --bui-color-neutral-6: #f7f9fc;
86
56
  --bui-color-neutral-7: var(--bui-color-white);
87
- /** 字重 */
88
57
  --bui-font-weight-normal: 400;
89
58
  --bui-font-weight-medium: 500;
90
- --bui-font-weight-bold: 600;
91
- /** 主题 */
59
+ --bui-font-weight-semibold: 600;
60
+ --bui-font-weight-bold: 700;
92
61
  --bui-color-primary: var(--bui-color-red);
93
62
  --bui-color-primary-light: var(--bui-color-red-light);
94
63
  --bui-color-info: var(--bui-color-blue);
@@ -99,16 +68,29 @@ xhs-page,
99
68
  --bui-color-warning-light: var(--bui-color-orange-light);
100
69
  --bui-color-danger: var(--bui-color-red);
101
70
  --bui-color-danger-light: var(--bui-color-red-light);
102
- /** 语义化字体 */
71
+ --bui-font-size-xs1: 8px;
72
+ --bui-font-size-xs2: 9px;
73
+ --bui-font-size-sm1: 10px;
74
+ --bui-font-size-sm2: 11px;
75
+ --bui-font-size-sm3: 12px;
76
+ --bui-font-size-sm4: 13px;
77
+ --bui-font-size-md1: 14px;
78
+ --bui-font-size-md2: 15px;
79
+ --bui-font-size-md3: 16px;
80
+ --bui-font-size-md4: 18px;
81
+ --bui-font-size-lg1: 20px;
82
+ --bui-font-size-lg2: 22px;
83
+ --bui-font-size-lg3: 24px;
84
+ --bui-font-size-lg4: 26px;
103
85
  --bui-title-size-1: 21px;
104
- --bui-title-size-2: 18px;
105
- --bui-title-size-3: 16px;
106
- --bui-title-size-4: 15px;
107
- --bui-text-size-1: 14px;
108
- --bui-text-size-2: 13px;
109
- --bui-text-size-3: 12px;
110
- --bui-text-size-4: 11px;
111
- --bui-text-size-5: 10px;
86
+ --bui-title-size-2: var(--bui-font-size-md4);
87
+ --bui-title-size-3: var(--bui-font-size-md3);
88
+ --bui-title-size-4: var(--bui-font-size-md2);
89
+ --bui-text-size-1: var(--bui-font-size-md1);
90
+ --bui-text-size-2: var(--bui-font-size-sm4);
91
+ --bui-text-size-3: var(--bui-font-size-sm3);
92
+ --bui-text-size-4: var(--bui-font-size-sm2);
93
+ --bui-text-size-5: var(--bui-font-size-sm1);
112
94
  --bui-color-fg-default: var(--bui-color-neutral-1);
113
95
  --bui-color-fg-muted: var(--bui-color-neutral-2);
114
96
  --bui-color-fg-subtle: var(--bui-color-neutral-3);
@@ -147,17 +129,37 @@ xhs-page,
147
129
  --bui-color-danger-end: var(--bui-color-red);
148
130
  --bui-color-vip-start: #ffd4a6;
149
131
  --bui-color-vip-end: #ffbeae;
150
- --bui-shape-radius-popover: 18px;
151
- --bui-shape-radius-drawer: 12px;
152
- --bui-shape-radius-card: 9px;
153
- --bui-shape-radius-default: 6px;
154
- --bui-shape-radius-poster: 4px;
155
- --bui-shape-radius-label: 3px;
156
- --bui-spacing-xl: 15px;
157
- --bui-spacing-lg: 12px;
158
- --bui-spacing-md: 9px;
159
- --bui-spacing-sm: 6px;
160
- --bui-spacing-xs: 4px;
132
+ --bui-radius-circular: 10000px;
133
+ --bui-radius-8: 24px;
134
+ --bui-radius-7: 18px;
135
+ --bui-radius-6: 15px;
136
+ --bui-radius-5: 12px;
137
+ --bui-radius-4: 9px;
138
+ --bui-radius-3: 6px;
139
+ --bui-radius-2: 4px;
140
+ --bui-radius-1: 3px;
141
+ --bui-radius-none: 0px;
142
+ --bui-shape-radius-popover: var(--bui-radius-7);
143
+ --bui-shape-radius-drawer: var(--bui-radius-5);
144
+ --bui-shape-radius-card: var(--bui-radius-4);
145
+ --bui-shape-radius-default: var(--bui-radius-3);
146
+ --bui-shape-radius-poster: var(--bui-radius-2);
147
+ --bui-shape-radius-label: var(--bui-radius-1);
148
+ --bui-spacing-1: 1px;
149
+ --bui-spacing-2: 2px;
150
+ --bui-spacing-3: 3px;
151
+ --bui-spacing-4: 4px;
152
+ --bui-spacing-5: 6px;
153
+ --bui-spacing-6: 9px;
154
+ --bui-spacing-7: 12px;
155
+ --bui-spacing-8: 15px;
156
+ --bui-spacing-9: 18px;
157
+ --bui-spacing-10: 24px;
158
+ --bui-spacing-xl: var(--bui-spacing-8);
159
+ --bui-spacing-lg: var(--bui-spacing-7);
160
+ --bui-spacing-md: var(--bui-spacing-6);
161
+ --bui-spacing-sm: var(--bui-spacing-5);
162
+ --bui-spacing-xs: var(--bui-spacing-4);
161
163
  --bui-line-height: 1.5;
162
164
  --bui-z-index-dropdown: 1000;
163
165
  --bui-z-index-affix: 1100;
@@ -166,58 +168,117 @@ xhs-page,
166
168
  --bui-z-index-popover: 1300;
167
169
  --bui-z-index-tooltip: 1400;
168
170
  --bui-z-index-toast: 1500;
169
- --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
170
- 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
171
- sans-serif;
172
171
  }
173
- .bui-dark,
174
- [data-color-mode='dark'][data-theme='default'] {
175
- --bui-color-fg-default: #f0f6fc;
176
- --bui-color-fg-muted: #8b949e;
177
- --bui-color-fg-subtle: #484f58;
178
- --bui-color-fg-disabled: #484f58;
179
- --bui-color-bg-default: #010409;
180
- --bui-color-bg-view: #161b22;
181
- --bui-color-bg-popover: rgba(72, 79, 88, 0.7);
182
- --bui-color-bg-alpha-light-9: rgba(22, 27, 34, 0.9);
183
- --bui-color-bg-alpha-light-7: rgba(22, 27, 34, 0.7);
184
- --bui-color-bg-alpha-light-5: rgba(22, 27, 34, 0.5);
185
- --bui-color-bg-alpha-light-3: rgba(22, 27, 34, 0.3);
186
- --bui-color-bg-alpha-light-1: rgba(22, 27, 34, 0.1);
187
- --bui-color-bg-alpha-dark-9: rgba(72, 79, 88, 0.9);
188
- --bui-color-bg-alpha-dark-7: rgba(72, 79, 88, 0.7);
189
- --bui-color-bg-alpha-dark-5: rgba(72, 79, 88, 0.5);
190
- --bui-color-bg-alpha-dark-3: rgba(72, 79, 88, 0.3);
191
- --bui-color-bg-alpha-dark-1: rgba(72, 79, 88, 0.1);
192
- --bui-color-border-default: #30363d;
193
- }
194
- /** 大麦主题 */
172
+ /** 大麦主题-高亮 */
195
173
  .bui-dm-light,
196
- [data-color-mode='light'][data-theme='dm'] {
197
- /** 颜色 */
198
- --bui-color-blue: #48b1f1;
199
- --bui-color-orange: #ff8f3f;
200
- --bui-color-gray: #f5f5f5;
201
- --bui-color-pink: #ff8e92;
202
- --bui-color-neutral-2: #4d4d56;
203
- --bui-color-neutral-3: #9c9ca5;
204
- --bui-color-neutral-5: #f1f1f1;
205
- --bui-color-bg-default: #f4f5f6;
206
- --bui-color-powder-start: #ff72a2;
207
- --bui-color-powder-end: #ff7070;
208
- --bui-title-size-2: 20px;
209
- --bui-title-size-3: 18px;
210
- --bui-color-red: #ff4886;
211
- --bui-color-fg-default: #2e333e;
212
- --bui-color-fg-muted: #2e333e;
213
- --bui-shape-radius-label: 4px;
174
+ [data-color-mode][data-theme='dm'] {
175
+ --bui-color-red: #ff3299;
176
+ --bui-color-red-light: #ffeaf5;
177
+ --bui-color-red-dark: #e62d8a;
178
+ --bui-color-yellow: #ffaf00;
179
+ --bui-color-yellow-light: #fff7e5;
180
+ --bui-color-yellow-dark: #e59d00;
181
+ --bui-color-lemonyellow: #fff36f;
182
+ --bui-color-lemonyellow-light: #ffffeb;
183
+ --bui-color-lemonyellow-dark: #b3a13d;
184
+ --bui-color-green: #0cdc87;
185
+ --bui-color-green-light: #e6fbf3;
186
+ --bui-color-green-dark: #0bc679;
187
+ --bui-color-purple: #754dff;
188
+ --bui-color-purple-light: #f6f0ff;
189
+ --bui-color-purple-dark: #3924b3;
190
+ --bui-color-blue: #30aeff;
191
+ --bui-color-blue-light: #eaf7ff;
192
+ --bui-color-blue-dark: #2b9ce5;
193
+ --bui-color-aiblue: #5cfffa;
194
+ --bui-color-aiblue-light: #f0fffc;
195
+ --bui-color-aiblue-dark: #1d858c;
196
+ --bui-color-primary-start: var(--bui-color-red);
197
+ --bui-color-primary-end: #ff4a72;
198
+ --bui-color-info-start: #51bbff;
199
+ --bui-color-info-end: var(--bui-color-blue);
200
+ --bui-color-warning-start: #ffc341;
201
+ --bui-color-warning-end: var(--bui-color-yellow);
202
+ --bui-color-success-start: var(--bui-color-green);
203
+ --bui-color-success-end: #00c474;
204
+ --bui-color-danger-start: var(--bui-color-red);
205
+ --bui-color-danger-end: #ff4a72;
206
+ --bui-color-border-primary: rgba(255, 50, 153, 0.4);
207
+ --bui-color-border-info: rgba(48, 174, 255, 0.4);
208
+ --bui-color-border-success: rgba(12, 220, 135, 0.4);
209
+ --bui-color-border-warning: rgba(255, 175, 0, 0.4);
210
+ --bui-color-border-danger: rgba(255, 50, 153, 0.4);
211
+ }
212
+ /** 先锋主题 */
213
+ .bui-pioneer-light,
214
+ [data-color-mode][data-theme='pioneer'] {
215
+ --bui-font-family-accent: 'AlibabaPuHuiTi-Heavy', 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif;
216
+ --bui-color-red: #ff471a;
217
+ --bui-color-red-light: #ffefe6;
218
+ --bui-color-red-dark: #b31800;
219
+ --bui-color-orange: #ff5000;
220
+ --bui-color-orange-light: #ffede5;
221
+ --bui-color-orange-dark: #d93d00;
222
+ --bui-color-yellow: #ffa608;
223
+ --bui-color-yellow-light: #fffae6;
224
+ --bui-color-yellow-dark: #b36500;
225
+ --bui-color-lemonyellow: #fff36f;
226
+ --bui-color-lemonyellow-light: #ffffeb;
227
+ --bui-color-lemonyellow-dark: #b3a13d;
228
+ --bui-color-green: #40bf00;
229
+ --bui-color-green-light: #f2ffe6;
230
+ --bui-color-green-dark: #1f7300;
231
+ --bui-color-purple: #754dff;
232
+ --bui-color-purple-light: #f6f0ff;
233
+ --bui-color-purple-dark: #3924b3;
234
+ --bui-color-blue: #229af0;
235
+ --bui-color-blue-light: #f0fbff;
236
+ --bui-color-blue-dark: #0757a3;
237
+ --bui-color-aiblue: #5cfffa;
238
+ --bui-color-aiblue-light: #f0fffc;
239
+ --bui-color-aiblue-dark: #1d858c;
240
+ --bui-color-primary: var(--bui-color-orange);
241
+ --bui-color-primary-light: var(--bui-color-orange-light);
242
+ --bui-color-primary-dark: var(--bui-color-orange-dark);
243
+ --bui-title-size-4: var(--bui-font-size-md1);
244
+ --bui-color-fg-disabled: rgba(3, 11, 26, 0.5);
245
+ --bui-color-border-primary: rgba(255, 80, 0, 0.4);
246
+ --bui-color-border-info: rgba(34, 154, 240, 0.4);
247
+ --bui-color-border-success: rgba(64, 191, 0, 0.4);
248
+ --bui-color-border-warning: rgba(255, 80, 0, 0.4);
249
+ --bui-color-border-danger: rgba(255, 71, 26, 0.4);
250
+ --bui-color-primary-start: #ffb300;
251
+ --bui-color-primary-end: var(--bui-color-primary);
252
+ --bui-color-info-start: #5bc8ff;
253
+ --bui-color-info-end: var(--bui-color-info);
254
+ --bui-color-warning-start: #fc3;
255
+ --bui-color-warning-end: var(--bui-color-warning);
256
+ --bui-color-success-start: #66d933;
257
+ --bui-color-success-end: var(--bui-color-success);
258
+ --bui-color-danger-start: #ff7633;
259
+ --bui-color-danger-end: var(--bui-color-danger);
260
+ --bui-shape-radius-drawer: var(--bui-radius-6);
261
+ --bui-shape-radius-card: var(--bui-radius-5);
262
+ --bui-shape-radius-default: var(--bui-radius-4);
263
+ --bui-btn-full-height: 45px;
264
+ --bui-btn-large-height: 30px;
265
+ --bui-btn-full-font-size: 18px;
266
+ --bui-btn-full-font-family: var(--bui-font-family-accent);
267
+ --bui-btn-small-border-radius: 6px;
268
+ --bui-btn-border-radius: 6px;
269
+ --bui-btn-large-border-radius: 7px;
270
+ --bui-btn-full-border-radius: 14px;
271
+ --bui-card-header-title-font-size: var(--bui-title-size-3);
272
+ --bui-tab-font-size: var(--bui-title-size-4);
273
+ --bui-tab-color: var(--bui-color-fg-muted);
274
+ /* prettier-ignore */
275
+ --bui-tabs-indicator-height: 4PX;
276
+ --bui-tabs-indicator-border-radius: 2px;
277
+ --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
214
278
  }
215
- /** 大麦主题 */
216
- .bui-dm-dark,
217
- [data-color-mode='dark'][data-theme='dm'] {
218
- --bui-color-neutral-5: #e5e5e5;
219
- --bui-color-powder-start: #ff4886;
220
- --bui-color-powder-end: #ffa662;
279
+ /** 暗黑模式 */
280
+ .bui-dark,
281
+ [data-color-mode='dark'][data-theme] {
221
282
  --bui-color-fg-default: #f0f6fc;
222
283
  --bui-color-fg-muted: #8b949e;
223
284
  --bui-color-fg-subtle: #484f58;
@@ -237,170 +298,6 @@ xhs-page,
237
298
  --bui-color-bg-alpha-dark-1: rgba(72, 79, 88, 0.1);
238
299
  --bui-color-border-default: #30363d;
239
300
  }
240
- @media (prefers-color-scheme: light) {
241
- [data-color-mode='auto'] {
242
- /** 品牌红 */
243
- --bui-color-red: #ff335c;
244
- --bui-color-red-light: #ffebef;
245
- /** 明亮粉 */
246
- --bui-color-pink: #dd10f2;
247
- --bui-color-pink-light: #fce7fe;
248
- /** 活力橙 */
249
- --bui-color-orange: #ff8533;
250
- --bui-color-orange-light: #fff0e5;
251
- /** 亲和绿 */
252
- --bui-color-green: #00d68f;
253
- --bui-color-green-light: #dcf9f0;
254
- /** 神秘紫 */
255
- --bui-color-purple: #8b52ff;
256
- --bui-color-purple-light: #f2ebff;
257
- /** 宁静蓝 */
258
- --bui-color-blue: #148aff;
259
- --bui-color-blue-light: #e1f0ff;
260
- /** 中性灰 */
261
- --bui-color-gray: #8896b1;
262
- --bui-color-gray-light: #f3f5f8;
263
- --bui-color-black: #000;
264
- --bui-color-white: #fff;
265
- --bui-color-vip: #ff866e;
266
- /** 中性色 */
267
- --bui-color-neutral-0: var(--bui-color-black);
268
- --bui-color-neutral-1: #2e333e;
269
- --bui-color-neutral-2: #5f6672;
270
- --bui-color-neutral-3: #959aa5;
271
- --bui-color-neutral-4: #ced1d6;
272
- --bui-color-neutral-5: #e9ebef;
273
- --bui-color-neutral-6: #f5f6f8;
274
- --bui-color-neutral-7: var(--bui-color-white);
275
- /** 字重 */
276
- --bui-font-weight-normal: 400;
277
- --bui-font-weight-medium: 500;
278
- --bui-font-weight-bold: 600;
279
- /** 主题 */
280
- --bui-color-primary: var(--bui-color-red);
281
- --bui-color-primary-light: var(--bui-color-red-light);
282
- --bui-color-info: var(--bui-color-blue);
283
- --bui-color-info-light: var(--bui-color-blue-light);
284
- --bui-color-success: var(--bui-color-green);
285
- --bui-color-success-light: var(--bui-color-green-light);
286
- --bui-color-warning: var(--bui-color-orange);
287
- --bui-color-warning-light: var(--bui-color-orange-light);
288
- --bui-color-danger: var(--bui-color-red);
289
- --bui-color-danger-light: var(--bui-color-red-light);
290
- /** 语义化字体 */
291
- --bui-title-size-1: 21px;
292
- --bui-title-size-2: 18px;
293
- --bui-title-size-3: 16px;
294
- --bui-title-size-4: 15px;
295
- --bui-text-size-1: 14px;
296
- --bui-text-size-2: 13px;
297
- --bui-text-size-3: 12px;
298
- --bui-text-size-4: 11px;
299
- --bui-text-size-5: 10px;
300
- --bui-color-fg-default: var(--bui-color-neutral-1);
301
- --bui-color-fg-muted: var(--bui-color-neutral-2);
302
- --bui-color-fg-subtle: var(--bui-color-neutral-3);
303
- --bui-color-fg-disabled: var(--bui-color-neutral-4);
304
- --bui-color-bg-default: var(--bui-color-neutral-6);
305
- --bui-color-bg-view: var(--bui-color-neutral-7);
306
- --bui-color-bg-popover: var(--bui-color-neutral-7);
307
- --bui-color-bg-alpha-light-9: rgba(255, 255, 255, 0.9);
308
- --bui-color-bg-alpha-light-7: rgba(255, 255, 255, 0.7);
309
- --bui-color-bg-alpha-light-5: rgba(255, 255, 255, 0.5);
310
- --bui-color-bg-alpha-light-3: rgba(255, 255, 255, 0.3);
311
- --bui-color-bg-alpha-light-1: rgba(255, 255, 255, 0.1);
312
- --bui-color-bg-alpha-dark-9: rgba(0, 0, 0, 0.9);
313
- --bui-color-bg-alpha-dark-7: rgba(0, 0, 0, 0.7);
314
- --bui-color-bg-alpha-dark-5: rgba(0, 0, 0, 0.5);
315
- --bui-color-bg-alpha-dark-3: rgba(0, 0, 0, 0.3);
316
- --bui-color-bg-alpha-dark-1: rgba(0, 0, 0, 0.1);
317
- --bui-color-border-default: var(--bui-color-neutral-5);
318
- --bui-color-border-primary: rgba(255, 51, 92, 0.4);
319
- --bui-color-border-info: rgba(20, 138, 255, 0.4);
320
- --bui-color-border-success: rgba(0, 214, 143, 0.4);
321
- --bui-color-border-warning: rgba(255, 133, 51, 0.4);
322
- --bui-color-border-danger: rgba(255, 51, 92, 0.4);
323
- --bui-color-border-gray: rgba(136, 150, 177, 0.4);
324
- --bui-color-primary-start: #ef16b9;
325
- --bui-color-primary-end: var(--bui-color-red);
326
- --bui-color-secondary-start: #f32adf;
327
- --bui-color-secondary-end: var(--bui-color-pink);
328
- --bui-color-info-start: #33a7ff;
329
- --bui-color-info-end: var(--bui-color-blue);
330
- --bui-color-warning-start: #ffad33;
331
- --bui-color-warning-end: var(--bui-color-orange);
332
- --bui-color-success-start: #00ebac;
333
- --bui-color-success-end: var(--bui-color-green);
334
- --bui-color-danger-start: #ef16b9;
335
- --bui-color-danger-end: var(--bui-color-red);
336
- --bui-color-vip-start: #ffd4a6;
337
- --bui-color-vip-end: #ffbeae;
338
- --bui-shape-radius-popover: 18px;
339
- --bui-shape-radius-drawer: 12px;
340
- --bui-shape-radius-card: 9px;
341
- --bui-shape-radius-default: 6px;
342
- --bui-shape-radius-poster: 4px;
343
- --bui-shape-radius-label: 3px;
344
- --bui-spacing-xl: 15px;
345
- --bui-spacing-lg: 12px;
346
- --bui-spacing-md: 9px;
347
- --bui-spacing-sm: 6px;
348
- --bui-spacing-xs: 4px;
349
- --bui-line-height: 1.5;
350
- --bui-z-index-dropdown: 1000;
351
- --bui-z-index-affix: 1100;
352
- --bui-z-index-modal-backdrop: 1200;
353
- --bui-z-index-modal: 1200;
354
- --bui-z-index-popover: 1300;
355
- --bui-z-index-tooltip: 1400;
356
- --bui-z-index-toast: 1500;
357
- --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
358
- 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
359
- sans-serif;
360
- }
361
- }
362
- @media (prefers-color-scheme: dark) {
363
- [data-color-mode='auto'] {
364
- --bui-color-fg-default: #f0f6fc;
365
- --bui-color-fg-muted: #8b949e;
366
- --bui-color-fg-subtle: #484f58;
367
- --bui-color-fg-disabled: #484f58;
368
- --bui-color-bg-default: #010409;
369
- --bui-color-bg-view: #161b22;
370
- --bui-color-bg-popover: rgba(72, 79, 88, 0.7);
371
- --bui-color-bg-alpha-light-9: rgba(22, 27, 34, 0.9);
372
- --bui-color-bg-alpha-light-7: rgba(22, 27, 34, 0.7);
373
- --bui-color-bg-alpha-light-5: rgba(22, 27, 34, 0.5);
374
- --bui-color-bg-alpha-light-3: rgba(22, 27, 34, 0.3);
375
- --bui-color-bg-alpha-light-1: rgba(22, 27, 34, 0.1);
376
- --bui-color-bg-alpha-dark-9: rgba(72, 79, 88, 0.9);
377
- --bui-color-bg-alpha-dark-7: rgba(72, 79, 88, 0.7);
378
- --bui-color-bg-alpha-dark-5: rgba(72, 79, 88, 0.5);
379
- --bui-color-bg-alpha-dark-3: rgba(72, 79, 88, 0.3);
380
- --bui-color-bg-alpha-dark-1: rgba(72, 79, 88, 0.1);
381
- --bui-color-border-default: #30363d;
382
- }
383
- }
384
- /* set color-scheme */
385
- :root,
386
- page,
387
- xhs-page,
388
- [data-color-mode='light'] {
389
- color-scheme: light;
390
- }
391
- [data-color-mode='dark'] {
392
- color-scheme: dark;
393
- }
394
- @media (prefers-color-scheme: light) {
395
- [data-color-mode='auto'] {
396
- color-scheme: light;
397
- }
398
- }
399
- @media (prefers-color-scheme: dark) {
400
- [data-color-mode='auto'] {
401
- color-scheme: dark;
402
- }
403
- }
404
301
  [data-color-mode] {
405
302
  color: var(--bui-color-fg-default);
406
303
  background-color: var(--bui-color-bg-default);
package/index.less CHANGED
@@ -1,80 +1,26 @@
1
1
  /* stylelint-disable selector-type-no-unknown */
2
2
 
3
- @import './theme/index.less';
3
+ @import './themes/index.less';
4
4
  @import './mixins/index.less';
5
5
 
6
- @media (prefers-color-scheme: light) {
7
- [data-color-mode='auto'][data-theme='dm'] {
8
- .dm-light();
9
- }
6
+ /* 经典 */
7
+ @{theme-selector-default-light} {
8
+ .default-light();
10
9
  }
11
10
 
12
- @media (prefers-color-scheme: dark) {
13
- [data-color-mode='auto'][data-theme='dm'] {
14
- .dm-dark();
15
- }
16
- }
17
-
18
- /* default theme */
19
- :root,
20
- page,
21
- xhs-page,
22
- .bui-default-light,
23
- [data-color-mode='light'][data-theme='default'] {
24
- .light();
25
- }
26
-
27
- .bui-dark,
28
- [data-color-mode='dark'][data-theme='default'] {
29
- .dark();
30
- }
31
-
32
- /** 大麦主题 */
33
- .bui-dm-light,
34
- [data-color-mode='light'][data-theme='dm'] {
11
+ /** 大麦主题-高亮 */
12
+ @{theme-selector-dm-light} {
35
13
  .dm-light();
36
14
  }
37
15
 
38
- /** 大麦主题 */
39
- .bui-dm-dark,
40
- [data-color-mode='dark'][data-theme='dm'] {
41
- .dm-dark();
42
- }
43
-
44
- @media (prefers-color-scheme: light) {
45
- [data-color-mode='auto'] {
46
- .light();
47
- }
48
- }
49
-
50
- @media (prefers-color-scheme: dark) {
51
- [data-color-mode='auto'] {
52
- .dark();
53
- }
54
- }
55
-
56
- /* set color-scheme */
57
- :root,
58
- page,
59
- xhs-page,
60
- [data-color-mode='light'] {
61
- color-scheme: light;
62
- }
63
-
64
- [data-color-mode='dark'] {
65
- color-scheme: dark;
66
- }
67
-
68
- @media (prefers-color-scheme: light) {
69
- [data-color-mode='auto'] {
70
- color-scheme: light;
71
- }
16
+ /** 先锋主题 */
17
+ @{theme-selector-pioneer-light} {
18
+ .pioneer-light();
72
19
  }
73
20
 
74
- @media (prefers-color-scheme: dark) {
75
- [data-color-mode='auto'] {
76
- color-scheme: dark;
77
- }
21
+ /** 暗黑模式 */
22
+ @{theme-selector-default-dark} {
23
+ .default-dark();
78
24
  }
79
25
 
80
26
  [data-color-mode] {
package/mixins/gradient.less CHANGED
@@ -1,3 +1,3 @@
1
- .linear-gradient(@start: @pink-start, @end: @pink-end) {
1
+ .linear-gradient(@start: var(--bui-color-primary-start), @end: var(--bui-color-primary-end)) {
2
2
  background-image: linear-gradient(90deg, @start 0%, @end 100%);
3
3
  }
package/mixins/variables.less CHANGED
@@ -1,5 +1,5 @@
1
1
  @root-selector: ~':root,page,xhs-page';
2
2
  @theme-selector-default-light: ~":root,page,xhs-page,.bui-default-light,[data-color-mode='light'][data-theme]";
3
- @theme-selector-default-dark: ~":root,.bui-dark,[data-color-mode='dark'][data-theme]";
3
+ @theme-selector-default-dark: ~".bui-dark,[data-color-mode='dark'][data-theme]";
4
4
  @theme-selector-pioneer-light: ~".bui-pioneer-light,[data-color-mode][data-theme='pioneer']";
5
5
  @theme-selector-dm-light: ~".bui-dm-light,[data-color-mode][data-theme='dm']";