@bifrostui/styles 1.4.5-beta.3 → 1.4.6

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 (9) hide show
  1. package/dist/index.css +247 -202
  2. package/index.less +58 -12
  3. package/mixins/gradient.less +1 -1
  4. package/package.json +1 -1
  5. package/theme/default-light.less +7 -38
  6. package/theme/dm-dark.less +33 -0
  7. package/theme/dm-light.less +1 -0
  8. package/theme/index.less +1 -1
  9. package/theme/pioneer-light.less +0 -224
package/dist/index.css CHANGED
@@ -1,13 +1,56 @@
1
1
  /* stylelint-disable selector-type-no-unknown */
2
- /* 经典 */
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
+ }
22
+ }
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
+ }
47
+ }
48
+ /* default theme */
3
49
  :root,
4
50
  page,
5
51
  xhs-page,
6
52
  .bui-default-light,
7
- [data-color-mode='light'][data-theme] {
8
- --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
9
- 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
10
- sans-serif;
53
+ [data-color-mode='light'][data-theme='default'] {
11
54
  /** 品牌红 */
12
55
  --bui-color-red: #ff335c;
13
56
  --bui-color-red-light: #ffebef;
@@ -45,7 +88,7 @@ xhs-page,
45
88
  --bui-font-weight-normal: 400;
46
89
  --bui-font-weight-medium: 500;
47
90
  --bui-font-weight-bold: 600;
48
- /** 语义色 */
91
+ /** 主题 */
49
92
  --bui-color-primary: var(--bui-color-red);
50
93
  --bui-color-primary-light: var(--bui-color-red-light);
51
94
  --bui-color-info: var(--bui-color-blue);
@@ -56,7 +99,7 @@ xhs-page,
56
99
  --bui-color-warning-light: var(--bui-color-orange-light);
57
100
  --bui-color-danger: var(--bui-color-red);
58
101
  --bui-color-danger-light: var(--bui-color-red-light);
59
- /** 字号 */
102
+ /** 语义化字体 */
60
103
  --bui-title-size-1: 21px;
61
104
  --bui-title-size-2: 18px;
62
105
  --bui-title-size-3: 16px;
@@ -123,34 +166,35 @@ xhs-page,
123
166
  --bui-z-index-popover: 1300;
124
167
  --bui-z-index-tooltip: 1400;
125
168
  --bui-z-index-toast: 1500;
126
- --bui-btn-font-size: var(--bui-text-size-3);
127
- --bui-btn-font-weight: var(--bui-font-weight-medium);
128
- --bui-btn-border-radius: 120px;
129
- --bui-btn-height: 27px;
130
- --bui-btn-color: var(--bui-color-fg-muted);
131
- --bui-btn-bg: var(--bui-color-bg-view);
132
- --bui-btn-opacity: 1;
133
- --bui-btn-padding: 0 14px;
134
- --bui-btn-border: 0;
135
- --bui-btn-font-family: var(--bui-font-family);
136
- --bui-card-font-family: var(--bui-font-family);
137
- --bui-card-font-size: var(--bui-text-size-2);
138
- --bui-tabs-font-family: var(--bui-font-family);
139
- --bui-tabs-font-size: var(--bui-text-size-1);
140
- --bui-tabs-height: 39px;
141
- --bui-tabs-color: var(--bui-color-fg-subtle);
142
- --bui-tabs-font-weight: var(--bui-font-weight-medium);
143
- --bui-tabs-indicator-bg: var(--bui-color-primary);
144
- --bui-tabs-indicator-height: 3px;
145
- --bui-tabs-indicator-width: 24px;
146
- --bui-tabs-indicator-border-radius: 3px 3px 0 0;
147
- --bui-tabs-indicator-bottom: 0;
148
- --bui-tabs-indicator-box-shadow: none;
149
- --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
169
+ --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
170
+ 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
171
+ sans-serif;
150
172
  }
151
- /** 大麦主题-高亮 */
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
+ /** 大麦主题 */
152
195
  .bui-dm-light,
153
- [data-color-mode][data-theme='dm'] {
196
+ [data-color-mode='light'][data-theme='dm'] {
197
+ /** 颜色 */
154
198
  --bui-color-blue: #48b1f1;
155
199
  --bui-color-orange: #ff8f3f;
156
200
  --bui-color-gray: #f5f5f5;
@@ -168,175 +212,12 @@ xhs-page,
168
212
  --bui-color-fg-muted: #2e333e;
169
213
  --bui-shape-radius-label: 4px;
170
214
  }
171
- /** 先锋主题 */
172
- .bui-pioneer-light,
173
- [data-color-mode][data-theme='pioneer'] {
174
- /** pioneer 特殊字体 */
175
- --bui-font-family-accent: 'AlibabaPuHuiTi-Heavy', 'PingFang SC',
176
- 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei',
177
- 'Helvetica Neue', helvetica, arial, sans-serif;
178
- /** 品牌红 */
179
- --bui-color-red: #ff335c;
180
- --bui-color-red-light: #ffebef;
181
- /** 明亮粉 */
182
- --bui-color-pink: #dd10f2;
183
- --bui-color-pink-light: #fce7fe;
184
- /** 活力橙 */
185
- --bui-color-orange: #ff8533;
186
- --bui-color-orange-light: #fff0e5;
187
- /** 亲和绿 */
188
- --bui-color-green: #00d68f;
189
- --bui-color-green-light: #dcf9f0;
190
- /** 神秘紫 */
191
- --bui-color-purple: #8b52ff;
192
- --bui-color-purple-light: #f2ebff;
193
- /** 宁静蓝 */
194
- --bui-color-blue: #148aff;
195
- --bui-color-blue-light: #e1f0ff;
196
- /** 中性灰 */
197
- --bui-color-gray: #8896b1;
198
- --bui-color-gray-light: #f3f5f8;
199
- --bui-color-black: #000;
200
- --bui-color-white: #fff;
201
- --bui-color-vip: #ff866e;
202
- /** 中性色 */
203
- --bui-color-neutral-0: var(--bui-color-black);
204
- --bui-color-neutral-1: #2e333e;
205
- --bui-color-neutral-2: #5f6672;
206
- --bui-color-neutral-3: #959aa5;
207
- --bui-color-neutral-4: #ced1d6;
208
- --bui-color-neutral-5: #e9ebef;
209
- --bui-color-neutral-6: #f5f6f8;
210
- --bui-color-neutral-7: var(--bui-color-white);
211
- /** 字重 */
212
- --bui-font-weight-normal: 400;
213
- --bui-font-weight-medium: 500;
214
- --bui-font-weight-bold: 600;
215
- /** 主题 */
216
- --bui-color-primary: #ff7600;
217
- --bui-color-primary-light: #ffefe5;
218
- --bui-color-info: var(--bui-color-blue);
219
- --bui-color-info-light: var(--bui-color-blue-light);
220
- --bui-color-success: var(--bui-color-green);
221
- --bui-color-success-light: var(--bui-color-green-light);
222
- --bui-color-warning: var(--bui-color-orange);
223
- --bui-color-warning-light: var(--bui-color-orange-light);
224
- --bui-color-danger: var(--bui-color-red);
225
- --bui-color-danger-light: var(--bui-color-red-light);
226
- /** 语义化字体 */
227
- --bui-title-size-1: 21px;
228
- --bui-title-size-2: 18px;
229
- --bui-title-size-3: 16px;
230
- --bui-title-size-4: 14px;
231
- --bui-text-size-1: 14px;
232
- --bui-text-size-2: 13px;
233
- --bui-text-size-3: 12px;
234
- --bui-text-size-4: 11px;
235
- --bui-text-size-5: 10px;
236
- --bui-color-fg-default: #181818;
237
- --bui-color-fg-muted: var(--bui-color-neutral-2);
238
- --bui-color-fg-subtle: var(--bui-color-neutral-3);
239
- --bui-color-fg-disabled: rgba(24, 24, 24, 0.5);
240
- --bui-color-bg-default: #f0f3f7;
241
- --bui-color-bg-view: var(--bui-color-neutral-7);
242
- --bui-color-bg-popover: var(--bui-color-neutral-7);
243
- --bui-color-bg-alpha-light-9: rgba(255, 255, 255, 0.9);
244
- --bui-color-bg-alpha-light-7: rgba(255, 255, 255, 0.7);
245
- --bui-color-bg-alpha-light-5: rgba(255, 255, 255, 0.5);
246
- --bui-color-bg-alpha-light-3: rgba(255, 255, 255, 0.3);
247
- --bui-color-bg-alpha-light-1: rgba(255, 255, 255, 0.1);
248
- --bui-color-bg-alpha-dark-9: rgba(0, 0, 0, 0.9);
249
- --bui-color-bg-alpha-dark-7: rgba(0, 0, 0, 0.7);
250
- --bui-color-bg-alpha-dark-5: rgba(0, 0, 0, 0.5);
251
- --bui-color-bg-alpha-dark-3: rgba(0, 0, 0, 0.3);
252
- --bui-color-bg-alpha-dark-1: rgba(0, 0, 0, 0.1);
253
- --bui-color-border-default: var(--bui-color-neutral-5);
254
- --bui-color-border-primary: rgba(255, 118, 0, 0.4);
255
- --bui-color-border-info: rgba(20, 138, 255, 0.4);
256
- --bui-color-border-success: rgba(0, 214, 143, 0.4);
257
- --bui-color-border-warning: rgba(255, 133, 51, 0.4);
258
- --bui-color-border-danger: rgba(255, 51, 92, 0.4);
259
- --bui-color-border-gray: rgba(136, 150, 177, 0.4);
260
- --bui-color-primary-start: #ff9c0d;
261
- --bui-color-primary-end: #ff6813;
262
- --bui-color-secondary-start: #f32adf;
263
- --bui-color-secondary-end: var(--bui-color-pink);
264
- --bui-color-info-start: #17b6ff;
265
- --bui-color-info-end: #48d3ff;
266
- --bui-color-warning-start: #ffcf02;
267
- --bui-color-warning-end: #ffb205;
268
- --bui-color-success-start: #00ebac;
269
- --bui-color-success-end: var(--bui-color-green);
270
- --bui-color-danger-start: #ef16b9;
271
- --bui-color-danger-end: var(--bui-color-red);
272
- --bui-color-vip-start: #ffd4a6;
273
- --bui-color-vip-end: #ffbeae;
274
- --bui-shape-radius-popover: 18px;
275
- --bui-shape-radius-drawer: 15px;
276
- --bui-shape-radius-card: 12px;
277
- --bui-shape-radius-default: 9px;
278
- --bui-shape-radius-poster: 4px;
279
- --bui-shape-radius-label: 3px;
280
- }
281
- .bui-pioneer-light .bui-btn,
282
- [data-color-mode][data-theme='pioneer'] .bui-btn {
283
- --bui-button-border-radius: 14px;
284
- --bui-button-outlined-default-border: 1px solid #171717;
285
- --bui-button-text-color: var(--bui-color-fg-default);
286
- --bui-button-font-weight: 700;
287
- --bui-button-default-bg-color: #171717;
288
- --bui-button-full-height: 45px;
289
- }
290
- .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large,
291
- [data-color-mode][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large {
292
- 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%);
293
- }
294
- .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full,
295
- [data-color-mode][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full {
296
- 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%);
297
- }
298
- .bui-pioneer-light .bui-btn-full,
299
- [data-color-mode][data-theme='pioneer'] .bui-btn-full {
300
- --bui-btn-border-radius: 14px;
301
- --bui-btn-height: 45px;
302
- --bui-btn-font-size: 18px;
303
- --bui-btn-font-family: var(--bui-font-family-accent);
304
- }
305
- .bui-pioneer-light .bui-btn-large,
306
- [data-color-mode][data-theme='pioneer'] .bui-btn-large {
307
- --bui-btn-border-radius: 7px;
308
- --bui-btn-height: 30px;
309
- }
310
- .bui-pioneer-light .bui-btn-medium,
311
- [data-color-mode][data-theme='pioneer'] .bui-btn-medium {
312
- --bui-btn-border-radius: 6px;
313
- }
314
- .bui-pioneer-light .bui-btn-small,
315
- [data-color-mode][data-theme='pioneer'] .bui-btn-small {
316
- --bui-btn-border-radius: 6px;
317
- }
318
- .bui-pioneer-light .bui-tabs,
319
- [data-color-mode][data-theme='pioneer'] .bui-tabs {
320
- --bui-tabs-font-size: var(--bui-title-size-4);
321
- --bui-tabs-active-font-weight: 700;
322
- --bui-tabs-color: var(--bui-color-fg-muted);
323
- /* prettier-ignore */
324
- --bui-tabs-indicator-height: 4PX;
325
- --bui-tabs-indicator-border-radius: 2px;
326
- --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
327
- }
328
- .bui-pioneer-light .bui-tabs .bui-tabs-indicator,
329
- [data-color-mode][data-theme='pioneer'] .bui-tabs .bui-tabs-indicator {
330
- background-image: linear-gradient(90deg, #ff9b00 0%, #ffa700 21%, #ff8300 100%);
331
- }
332
- .bui-pioneer-light .bui-card-header-title,
333
- [data-color-mode][data-theme='pioneer'] .bui-card-header-title {
334
- --bui-card-font-size: var(--bui-title-size-3);
335
- }
336
- /** 暗黑模式 */
337
- :root,
338
- .bui-dark,
339
- [data-color-mode='dark'][data-theme] {
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;
340
221
  --bui-color-fg-default: #f0f6fc;
341
222
  --bui-color-fg-muted: #8b949e;
342
223
  --bui-color-fg-subtle: #484f58;
@@ -356,6 +237,170 @@ xhs-page,
356
237
  --bui-color-bg-alpha-dark-1: rgba(72, 79, 88, 0.1);
357
238
  --bui-color-border-default: #30363d;
358
239
  }
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
+ }
359
404
  [data-color-mode] {
360
405
  color: var(--bui-color-fg-default);
361
406
  background-color: var(--bui-color-bg-default);
package/index.less CHANGED
@@ -3,32 +3,78 @@
3
3
  @import './theme/index.less';
4
4
  @import './mixins/index.less';
5
5
 
6
- /* 经典 */
6
+ @media (prefers-color-scheme: light) {
7
+ [data-color-mode='auto'][data-theme='dm'] {
8
+ .dm-light();
9
+ }
10
+ }
11
+
12
+ @media (prefers-color-scheme: dark) {
13
+ [data-color-mode='auto'][data-theme='dm'] {
14
+ .dm-dark();
15
+ }
16
+ }
17
+
18
+ /* default theme */
7
19
  :root,
8
20
  page,
9
21
  xhs-page,
10
22
  .bui-default-light,
11
- [data-color-mode='light'][data-theme] {
23
+ [data-color-mode='light'][data-theme='default'] {
12
24
  .light();
13
25
  }
14
26
 
15
- /** 大麦主题-高亮 */
27
+ .bui-dark,
28
+ [data-color-mode='dark'][data-theme='default'] {
29
+ .dark();
30
+ }
31
+
32
+ /** 大麦主题 */
16
33
  .bui-dm-light,
17
- [data-color-mode][data-theme='dm'] {
34
+ [data-color-mode='light'][data-theme='dm'] {
18
35
  .dm-light();
19
36
  }
20
37
 
21
- /** 先锋主题 */
22
- .bui-pioneer-light,
23
- [data-color-mode][data-theme='pioneer'] {
24
- .pioneer-light();
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
+ }
25
54
  }
26
55
 
27
- /** 暗黑模式 */
56
+ /* set color-scheme */
28
57
  :root,
29
- .bui-dark,
30
- [data-color-mode='dark'][data-theme] {
31
- .dark();
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
+ }
72
+ }
73
+
74
+ @media (prefers-color-scheme: dark) {
75
+ [data-color-mode='auto'] {
76
+ color-scheme: dark;
77
+ }
32
78
  }
33
79
 
34
80
  [data-color-mode] {
package/mixins/gradient.less CHANGED
@@ -1,3 +1,3 @@
1
- .linear-gradient(@start: var(--bui-color-primary-start), @end: var(--bui-color-primary-end)) {
1
+ .linear-gradient(@start: @pink-start, @end: @pink-end) {
2
2
  background-image: linear-gradient(90deg, @start 0%, @end 100%);
3
3
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/styles",
3
- "version": "1.4.5-beta.3",
3
+ "version": "1.4.6",
4
4
  "main": "dist/index.css",
5
5
  "description": "Common style definitions for BUI React components",
6
6
  "homepage": "http://bui.taopiaopiao.com",
package/theme/default-light.less CHANGED
@@ -1,9 +1,4 @@
1
1
  .light() {
2
- // 字体
3
- --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
4
- 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
5
- sans-serif;
6
-
7
2
  /** 品牌红 */
8
3
  --bui-color-red: #ff335c;
9
4
  --bui-color-red-light: #ffebef;
@@ -50,7 +45,7 @@
50
45
  --bui-font-weight-medium: 500;
51
46
  --bui-font-weight-bold: 600;
52
47
 
53
- /** 语义色 */
48
+ /** 主题 */
54
49
  --bui-color-primary: var(--bui-color-red);
55
50
  --bui-color-primary-light: var(--bui-color-red-light);
56
51
  --bui-color-info: var(--bui-color-blue);
@@ -62,7 +57,7 @@
62
57
  --bui-color-danger: var(--bui-color-red);
63
58
  --bui-color-danger-light: var(--bui-color-red-light);
64
59
 
65
- /** 字号 */
60
+ /** 语义化字体 */
66
61
  --bui-title-size-1: 21px;
67
62
  --bui-title-size-2: 18px;
68
63
  --bui-title-size-3: 16px;
@@ -83,7 +78,7 @@
83
78
  // 用于失效、不可用等状态
84
79
  --bui-color-fg-disabled: var(--bui-color-neutral-4);
85
80
 
86
- // 背景色
81
+ // 默认背景色
87
82
  --bui-color-bg-default: var(--bui-color-neutral-6);
88
83
  // 视图背景色
89
84
  --bui-color-bg-view: var(--bui-color-neutral-7);
@@ -152,34 +147,8 @@
152
147
  --bui-z-index-tooltip: 1400;
153
148
  --bui-z-index-toast: 1500; // 反馈提示，高于所有元素
154
149
 
155
- // Components Variables
156
- // Button
157
- --bui-btn-font-size: var(--bui-text-size-3);
158
- --bui-btn-font-weight: var(--bui-font-weight-medium);
159
- --bui-btn-border-radius: 120px;
160
- --bui-btn-height: 27px;
161
- --bui-btn-color: var(--bui-color-fg-muted);
162
- --bui-btn-bg: var(--bui-color-bg-view);
163
- --bui-btn-opacity: 1;
164
- --bui-btn-padding: 0 14px;
165
- --bui-btn-border: 0;
166
- --bui-btn-font-family: var(--bui-font-family);
167
-
168
- // Card
169
- --bui-card-font-family: var(--bui-font-family);
170
- --bui-card-font-size: var(--bui-text-size-2);
171
-
172
- // Tabs
173
- --bui-tabs-font-family: var(--bui-font-family);
174
- --bui-tabs-font-size: var(--bui-text-size-1);
175
- --bui-tabs-height: 39px;
176
- --bui-tabs-color: var(--bui-color-fg-subtle);
177
- --bui-tabs-font-weight: var(--bui-font-weight-medium);
178
- --bui-tabs-indicator-bg: var(--bui-color-primary);
179
- --bui-tabs-indicator-height: 3px;
180
- --bui-tabs-indicator-width: 24px;
181
- --bui-tabs-indicator-border-radius: 3px 3px 0 0;
182
- --bui-tabs-indicator-bottom: 0;
183
- --bui-tabs-indicator-box-shadow: none;
184
- --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
150
+ // 字体
151
+ --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
152
+ 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
153
+ sans-serif;
185
154
  }
package/theme/dm-dark.less ADDED
@@ -0,0 +1,33 @@
1
+ .dm-dark() {
2
+ --bui-color-neutral-5: #e5e5e5;
3
+ --bui-color-powder-start: #ff4886;
4
+ --bui-color-powder-end: #ffa662;
5
+
6
+ // default是最通用的色彩，比如标题和一级信息
7
+ --bui-color-fg-default: #f0f6fc;
8
+ // 柔和色，通常用于次级及补充说明信息
9
+ --bui-color-fg-muted: #8b949e;
10
+ // 淡色，很细微的色彩，用于辅助和需要弱化的信息
11
+ --bui-color-fg-subtle: #484f58;
12
+ // 用于失效、不可用等状态
13
+ --bui-color-fg-disabled: #484f58;
14
+
15
+ // 默认背景色
16
+ --bui-color-bg-default: #010409;
17
+ // 视图背景色
18
+ --bui-color-bg-view: #161b22;
19
+ --bui-color-bg-popover: fade(#484f58, 70%);
20
+ --bui-color-bg-alpha-light-9: fade(#161b22, 90%);
21
+ --bui-color-bg-alpha-light-7: fade(#161b22, 70%);
22
+ --bui-color-bg-alpha-light-5: fade(#161b22, 50%);
23
+ --bui-color-bg-alpha-light-3: fade(#161b22, 30%);
24
+ --bui-color-bg-alpha-light-1: fade(#161b22, 10%);
25
+ --bui-color-bg-alpha-dark-9: fade(#484f58, 90%);
26
+ --bui-color-bg-alpha-dark-7: fade(#484f58, 70%);
27
+ --bui-color-bg-alpha-dark-5: fade(#484f58, 50%);
28
+ --bui-color-bg-alpha-dark-3: fade(#484f58, 30%);
29
+ --bui-color-bg-alpha-dark-1: fade(#484f58, 10%);
30
+
31
+ // 分割线、边框
32
+ --bui-color-border-default: #30363d;
33
+ }
package/theme/dm-light.less CHANGED
@@ -1,4 +1,5 @@
1
1
  .dm-light() {
2
+ /** 颜色 */
2
3
  --bui-color-blue: #48b1f1;
3
4
  --bui-color-orange: #ff8f3f;
4
5
  --bui-color-gray: #f5f5f5;
package/theme/index.less CHANGED
@@ -1,4 +1,4 @@
1
1
  @import './default-light.less';
2
2
  @import './default-dark.less';
3
3
  @import './dm-light.less';
4
- @import './pioneer-light.less';
4
+ @import './dm-dark.less';
package/theme/pioneer-light.less DELETED
@@ -1,224 +0,0 @@
1
- .pioneer-light() {
2
- /** pioneer 特殊字体 */
3
- --bui-font-family-accent: 'AlibabaPuHuiTi-Heavy', 'PingFang SC',
4
- 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei',
5
- 'Helvetica Neue', helvetica, arial, sans-serif;
6
-
7
- /** 品牌红 */
8
- --bui-color-red: #ff335c;
9
- --bui-color-red-light: #ffebef;
10
-
11
- /** 明亮粉 */
12
- --bui-color-pink: #dd10f2;
13
- --bui-color-pink-light: #fce7fe;
14
-
15
- /** 活力橙 */
16
- --bui-color-orange: #ff8533;
17
- --bui-color-orange-light: #fff0e5;
18
-
19
- /** 亲和绿 */
20
- --bui-color-green: #00d68f;
21
- --bui-color-green-light: #dcf9f0;
22
-
23
- /** 神秘紫 */
24
- --bui-color-purple: #8b52ff;
25
- --bui-color-purple-light: #f2ebff;
26
-
27
- /** 宁静蓝 */
28
- --bui-color-blue: #148aff;
29
- --bui-color-blue-light: #e1f0ff;
30
-
31
- /** 中性灰 */
32
- --bui-color-gray: #8896b1;
33
- --bui-color-gray-light: #f3f5f8;
34
- --bui-color-black: #000;
35
- --bui-color-white: #fff;
36
- --bui-color-vip: #ff866e;
37
-
38
- /** 中性色 */
39
- --bui-color-neutral-0: var(--bui-color-black);
40
- --bui-color-neutral-1: #2e333e;
41
- --bui-color-neutral-2: #5f6672;
42
- --bui-color-neutral-3: #959aa5;
43
- --bui-color-neutral-4: #ced1d6;
44
- --bui-color-neutral-5: #e9ebef;
45
- --bui-color-neutral-6: #f5f6f8;
46
- --bui-color-neutral-7: var(--bui-color-white);
47
-
48
- /** 字重 */
49
- --bui-font-weight-normal: 400;
50
- --bui-font-weight-medium: 500;
51
- --bui-font-weight-bold: 600;
52
-
53
- /** 主题 */
54
- --bui-color-primary: #ff7600;
55
- --bui-color-primary-light: #ffefe5;
56
- --bui-color-info: var(--bui-color-blue);
57
- --bui-color-info-light: var(--bui-color-blue-light);
58
- --bui-color-success: var(--bui-color-green);
59
- --bui-color-success-light: var(--bui-color-green-light);
60
- --bui-color-warning: var(--bui-color-orange);
61
- --bui-color-warning-light: var(--bui-color-orange-light);
62
- --bui-color-danger: var(--bui-color-red);
63
- --bui-color-danger-light: var(--bui-color-red-light);
64
-
65
- /** 语义化字体 */
66
- --bui-title-size-1: 21px;
67
- --bui-title-size-2: 18px;
68
- --bui-title-size-3: 16px;
69
- --bui-title-size-4: 14px;
70
- --bui-text-size-1: 14px;
71
- --bui-text-size-2: 13px;
72
- --bui-text-size-3: 12px;
73
- --bui-text-size-4: 11px;
74
- --bui-text-size-5: 10px;
75
-
76
- // 前景色，通常用于文字
77
- // default是最通用的色彩，比如标题和一级信息
78
- --bui-color-fg-default: #181818;
79
- // 柔和色，通常用于次级及补充说明信息
80
- --bui-color-fg-muted: var(--bui-color-neutral-2);
81
- // 淡色，很细微的色彩，用于辅助和需要弱化的信息
82
- --bui-color-fg-subtle: var(--bui-color-neutral-3);
83
- // 用于失效、不可用等状态
84
- --bui-color-fg-disabled: fade(#181818, 50%);
85
-
86
- // 默认背景色
87
- --bui-color-bg-default: #f0f3f7;
88
- // 视图背景色
89
- --bui-color-bg-view: var(--bui-color-neutral-7);
90
- --bui-color-bg-popover: var(--bui-color-neutral-7);
91
- --bui-color-bg-alpha-light-9: fade(#fff, 90%);
92
- --bui-color-bg-alpha-light-7: fade(#fff, 70%);
93
- --bui-color-bg-alpha-light-5: fade(#fff, 50%);
94
- --bui-color-bg-alpha-light-3: fade(#fff, 30%);
95
- --bui-color-bg-alpha-light-1: fade(#fff, 10%);
96
- --bui-color-bg-alpha-dark-9: fade(#000, 90%);
97
- --bui-color-bg-alpha-dark-7: fade(#000, 70%);
98
- --bui-color-bg-alpha-dark-5: fade(#000, 50%);
99
- --bui-color-bg-alpha-dark-3: fade(#000, 30%);
100
- --bui-color-bg-alpha-dark-1: fade(#000, 10%);
101
-
102
- // 分割线、边框
103
- --bui-color-border-default: var(--bui-color-neutral-5);
104
- --bui-color-border-primary: fade(#ff7600, 40%);
105
- --bui-color-border-info: fade(#148aff, 40%);
106
- --bui-color-border-success: fade(#00d68f, 40%);
107
- --bui-color-border-warning: fade(#ff8533, 40%);
108
- --bui-color-border-danger: fade(#ff335c, 40%);
109
- --bui-color-border-gray: fade(#8896b1, 40%);
110
-
111
- // 主题色渐变
112
- --bui-color-primary-start: #ff9c0d;
113
- --bui-color-primary-end: #ff6813;
114
- --bui-color-secondary-start: #f32adf;
115
- --bui-color-secondary-end: var(--bui-color-pink);
116
- --bui-color-info-start: #17b6ff;
117
- --bui-color-info-end: #48d3ff;
118
- --bui-color-warning-start: #ffcf02;
119
- --bui-color-warning-end: #ffb205;
120
- --bui-color-success-start: #00ebac;
121
- --bui-color-success-end: var(--bui-color-green);
122
- --bui-color-danger-start: #ef16b9;
123
- --bui-color-danger-end: var(--bui-color-red);
124
- --bui-color-vip-start: #ffd4a6;
125
- --bui-color-vip-end: #ffbeae;
126
-
127
- // 形状定义
128
- // 页面级浮层
129
- --bui-shape-radius-popover: 18px;
130
- --bui-shape-radius-drawer: 15px;
131
- // 卡片、普通视图、抽屉、action sheet，常用于信息密度较低的视图
132
- --bui-shape-radius-card: 12px;
133
- // 独立海报、卡片，常用于信息密度较高的视图
134
- --bui-shape-radius-default: 9px;
135
- // 容器内海报
136
- --bui-shape-radius-poster: 4px;
137
- // 标签
138
- --bui-shape-radius-label: 3px;
139
-
140
- .bui-btn {
141
- --bui-button-border-radius: 14px;
142
- --bui-button-outlined-default-border: 1px solid #171717;
143
- --bui-button-text-color: var(--bui-color-fg-default);
144
- --bui-button-font-weight: 700;
145
- --bui-button-default-bg-color: #171717;
146
- --bui-button-full-height: 45px;
147
-
148
- &.bui-btn-contained {
149
- &.bui-btn-primary {
150
- &.bui-btn-large {
151
- background-image: radial-gradient(
152
- 35px 25px ellipse at 2% 110%,
153
- #fffe1e 0%,
154
- rgba(251, 134, 35, 0) 99%
155
- ),
156
- radial-gradient(
157
- 35px 25px ellipse at 110% 120%,
158
- #ff3018 0%,
159
- rgba(0, 48, 24, 0) 92%
160
- ),
161
- linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
162
- }
163
-
164
- &.bui-btn-full {
165
- background-image: radial-gradient(
166
- 93px 50px ellipse at 2% 110%,
167
- #fffe1e 0%,
168
- rgba(251, 134, 35, 0) 100%
169
- ),
170
- radial-gradient(
171
- 93px 50px ellipse at 98% 110%,
172
- #ff3018 0%,
173
- rgba(0, 48, 24, 0) 92%
174
- ),
175
- linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
176
- }
177
- }
178
- }
179
- }
180
-
181
- .bui-btn-full {
182
- --bui-btn-border-radius: 14px;
183
- --bui-btn-height: 45px;
184
- --bui-btn-font-size: 18px;
185
- --bui-btn-font-family: var(--bui-font-family-accent);
186
- }
187
-
188
- .bui-btn-large {
189
- --bui-btn-border-radius: 7px;
190
- --bui-btn-height: 30px;
191
- }
192
-
193
- .bui-btn-medium {
194
- --bui-btn-border-radius: 6px;
195
- }
196
-
197
- .bui-btn-small {
198
- --bui-btn-border-radius: 6px;
199
- }
200
-
201
- .bui-tabs {
202
- --bui-tabs-font-size: var(--bui-title-size-4);
203
- --bui-tabs-active-font-weight: 700;
204
- --bui-tabs-color: var(--bui-color-fg-muted);
205
-
206
- /* prettier-ignore */
207
- --bui-tabs-indicator-height: 4PX;
208
- --bui-tabs-indicator-border-radius: 2px;
209
- --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
210
-
211
- .bui-tabs-indicator {
212
- background-image: linear-gradient(
213
- 90deg,
214
- #ff9b00 0%,
215
- #ffa700 21%,
216
- #ff8300 100%
217
- );
218
- }
219
- }
220
-
221
- .bui-card-header-title {
222
- --bui-card-font-size: var(--bui-title-size-3);
223
- }
224
- }