@bifrostui/styles 1.4.4-beta.0 → 1.4.5-beta.0

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 +335 -8
  2. package/index.less +16 -2
  3. package/mixins/gradient.less +1 -1
  4. package/package.json +1 -1
  5. package/theme/default-light.less +2 -2
  6. package/theme/dm-light.less +0 -1
  7. package/theme/index.less +2 -0
  8. package/theme/pioneer-components.less +69 -0
  9. package/theme/pioneer-light.less +162 -0
package/dist/index.css CHANGED
@@ -1,7 +1,166 @@
1
1
  /* stylelint-disable selector-type-no-unknown */
2
+ /** pioneer 组件主题 */
3
+ @media (prefers-color-scheme: light) {
4
+ [data-color-mode='auto'][data-theme='pioneer'] {
5
+ /** 品牌红 */
6
+ --bui-color-red: #ff335c;
7
+ --bui-color-red-light: #ffebef;
8
+ /** 明亮粉 */
9
+ --bui-color-pink: #dd10f2;
10
+ --bui-color-pink-light: #fce7fe;
11
+ /** 活力橙 */
12
+ --bui-color-orange: #ff8533;
13
+ --bui-color-orange-light: #fff0e5;
14
+ /** 亲和绿 */
15
+ --bui-color-green: #00d68f;
16
+ --bui-color-green-light: #dcf9f0;
17
+ /** 神秘紫 */
18
+ --bui-color-purple: #8b52ff;
19
+ --bui-color-purple-light: #f2ebff;
20
+ /** 宁静蓝 */
21
+ --bui-color-blue: #148aff;
22
+ --bui-color-blue-light: #e1f0ff;
23
+ /** 中性灰 */
24
+ --bui-color-gray: #8896b1;
25
+ --bui-color-gray-light: #f3f5f8;
26
+ --bui-color-black: #000;
27
+ --bui-color-white: #fff;
28
+ --bui-color-vip: #ff866e;
29
+ /** 中性色 */
30
+ --bui-color-neutral-0: var(--bui-color-black);
31
+ --bui-color-neutral-1: #2e333e;
32
+ --bui-color-neutral-2: #5f6672;
33
+ --bui-color-neutral-3: #959aa5;
34
+ --bui-color-neutral-4: #ced1d6;
35
+ --bui-color-neutral-5: #e9ebef;
36
+ --bui-color-neutral-6: #f5f6f8;
37
+ --bui-color-neutral-7: var(--bui-color-white);
38
+ /** 字重 */
39
+ --bui-font-weight-normal: 400;
40
+ --bui-font-weight-medium: 500;
41
+ --bui-font-weight-bold: 600;
42
+ /** 主题 */
43
+ --bui-color-primary: #ff7600;
44
+ --bui-color-primary-light: #ffefe5;
45
+ --bui-color-info: var(--bui-color-blue);
46
+ --bui-color-info-light: var(--bui-color-blue-light);
47
+ --bui-color-success: var(--bui-color-green);
48
+ --bui-color-success-light: var(--bui-color-green-light);
49
+ --bui-color-warning: var(--bui-color-orange);
50
+ --bui-color-warning-light: var(--bui-color-orange-light);
51
+ --bui-color-danger: var(--bui-color-red);
52
+ --bui-color-danger-light: var(--bui-color-red-light);
53
+ /** 语义化字体 */
54
+ --bui-title-size-1: 21px;
55
+ --bui-title-size-2: 18px;
56
+ --bui-title-size-3: 16px;
57
+ --bui-title-size-4: 14px;
58
+ --bui-text-size-1: 14px;
59
+ --bui-text-size-2: 13px;
60
+ --bui-text-size-3: 12px;
61
+ --bui-text-size-4: 11px;
62
+ --bui-text-size-5: 10px;
63
+ --bui-color-fg-default: #181818;
64
+ --bui-color-fg-muted: var(--bui-color-neutral-2);
65
+ --bui-color-fg-subtle: var(--bui-color-neutral-3);
66
+ --bui-color-fg-disabled: rgba(24, 24, 24, 0.5);
67
+ --bui-color-bg-default: var(--bui-color-neutral-6);
68
+ --bui-color-bg-view: var(--bui-color-neutral-7);
69
+ --bui-color-bg-popover: var(--bui-color-neutral-7);
70
+ --bui-color-bg-alpha-light-9: rgba(255, 255, 255, 0.9);
71
+ --bui-color-bg-alpha-light-7: rgba(255, 255, 255, 0.7);
72
+ --bui-color-bg-alpha-light-5: rgba(255, 255, 255, 0.5);
73
+ --bui-color-bg-alpha-light-3: rgba(255, 255, 255, 0.3);
74
+ --bui-color-bg-alpha-light-1: rgba(255, 255, 255, 0.1);
75
+ --bui-color-bg-alpha-dark-9: rgba(0, 0, 0, 0.9);
76
+ --bui-color-bg-alpha-dark-7: rgba(0, 0, 0, 0.7);
77
+ --bui-color-bg-alpha-dark-5: rgba(0, 0, 0, 0.5);
78
+ --bui-color-bg-alpha-dark-3: rgba(0, 0, 0, 0.3);
79
+ --bui-color-bg-alpha-dark-1: rgba(0, 0, 0, 0.1);
80
+ --bui-color-border-default: var(--bui-color-neutral-5);
81
+ --bui-color-border-primary: rgba(255, 118, 0, 0.4);
82
+ --bui-color-border-info: rgba(20, 138, 255, 0.4);
83
+ --bui-color-border-success: rgba(0, 214, 143, 0.4);
84
+ --bui-color-border-warning: rgba(255, 133, 51, 0.4);
85
+ --bui-color-border-danger: rgba(255, 51, 92, 0.4);
86
+ --bui-color-border-gray: rgba(136, 150, 177, 0.4);
87
+ --bui-color-primary-start: #ff9c0d;
88
+ --bui-color-primary-end: #ff6813;
89
+ --bui-color-secondary-start: #f32adf;
90
+ --bui-color-secondary-end: var(--bui-color-pink);
91
+ --bui-color-info-start: #17b6ff;
92
+ --bui-color-info-end: #48d3ff;
93
+ --bui-color-warning-start: #ffcf02;
94
+ --bui-color-warning-end: #ffb205;
95
+ --bui-color-success-start: #00ebac;
96
+ --bui-color-success-end: var(--bui-color-green);
97
+ --bui-color-danger-start: #ef16b9;
98
+ --bui-color-danger-end: var(--bui-color-red);
99
+ --bui-color-vip-start: #ffd4a6;
100
+ --bui-color-vip-end: #ffbeae;
101
+ --bui-shape-radius-popover: 18px;
102
+ --bui-shape-radius-drawer: 15px;
103
+ --bui-shape-radius-card: 12px;
104
+ --bui-shape-radius-default: 9px;
105
+ --bui-shape-radius-poster: 4px;
106
+ --bui-shape-radius-label: 3px;
107
+ }
108
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-btn-full {
109
+ --bui-btn-border-radius: 14px;
110
+ --bui-btn-height: 45px;
111
+ --bui-btn-font-size: 18px;
112
+ --bui-btn-font-family: alibabapuhuiti-heavy, chinese quote, segoe ui, roboto,
113
+ pingfang sc, hiragino sans gb, microsoft yahei, helvetica neue, helvetica,
114
+ arial, sans-serif;
115
+ }
116
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-btn-large {
117
+ --bui-btn-border-radius: 7px;
118
+ --bui-btn-height: 30px;
119
+ }
120
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-btn-medium {
121
+ --bui-btn-border-radius: 6px;
122
+ }
123
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-btn-outlined {
124
+ --bui-btn-border: solid 1px var(--bui-color-fg-default);
125
+ --bui-btn-color: var(--bui-color-fg-default);
126
+ }
127
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-btn-contained {
128
+ --bui-btn-color: var(--bui-color-bg-view);
129
+ --bui-btn-bg: var(--bui-color-fg-default);
130
+ }
131
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-btn {
132
+ --bui-button-border-radius: 14px;
133
+ --bui-button-outlined-default-border: 1px solid #171717;
134
+ --bui-button-text-color: var(--bui-color-fg-default);
135
+ --bui-button-font-weight: 700;
136
+ --bui-button-default-bg-color: #171717;
137
+ --bui-button-full-height: 45px;
138
+ }
139
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large {
140
+ 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%);
141
+ }
142
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full {
143
+ 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%);
144
+ }
145
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-tabs {
146
+ --bui-tab-font-size: var(--bui-title-size-4);
147
+ --bui-tabs-active-font-weight: 700;
148
+ --bui-tab-active-font-size: var(--bui-title-size-2);
149
+ --bui-tabs-color: var(--bui-color-fg-muted);
150
+ --bui-tabs-active-color: var(--bui-color-fg-default);
151
+ --bui-tabs-line-width: 32px;
152
+ /* prettier-ignore */
153
+ --bui-tabs-line-height: 7PX;
154
+ --bui-tabs-line-border-radius: 2px;
155
+ --bui-tabs-line-bottom: 6px;
156
+ --bui-tabs-line-box-shadow: 0 1px 5px 0 rgba(255, 98, 0, 0.6);
157
+ }
158
+ [data-color-mode='auto'][data-theme='pioneer'] .bui-tabs .bui-tabs-tabline {
159
+ background-image: linear-gradient(90deg, #ff9b00 0%, #ffa700 21%, #ff8300 100%);
160
+ }
161
+ }
2
162
  @media (prefers-color-scheme: light) {
3
163
  [data-color-mode='auto'][data-theme='dm'] {
4
- /** 颜色 */
5
164
  --bui-color-blue: #48b1f1;
6
165
  --bui-color-orange: #ff8f3f;
7
166
  --bui-color-gray: #f5f5f5;
@@ -88,7 +247,7 @@ xhs-page,
88
247
  --bui-font-weight-normal: 400;
89
248
  --bui-font-weight-medium: 500;
90
249
  --bui-font-weight-bold: 600;
91
- /** 主题 */
250
+ /** 语义色 */
92
251
  --bui-color-primary: var(--bui-color-red);
93
252
  --bui-color-primary-light: var(--bui-color-red-light);
94
253
  --bui-color-info: var(--bui-color-blue);
@@ -99,7 +258,7 @@ xhs-page,
99
258
  --bui-color-warning-light: var(--bui-color-orange-light);
100
259
  --bui-color-danger: var(--bui-color-red);
101
260
  --bui-color-danger-light: var(--bui-color-red-light);
102
- /** 语义化字体 */
261
+ /** 字号 */
103
262
  --bui-title-size-1: 21px;
104
263
  --bui-title-size-2: 18px;
105
264
  --bui-title-size-3: 16px;
@@ -191,10 +350,9 @@ xhs-page,
191
350
  --bui-color-bg-alpha-dark-1: rgba(72, 79, 88, 0.1);
192
351
  --bui-color-border-default: #30363d;
193
352
  }
194
- /** 大麦主题 */
353
+ /** 大麦主题-高亮 */
195
354
  .bui-dm-light,
196
355
  [data-color-mode='light'][data-theme='dm'] {
197
- /** 颜色 */
198
356
  --bui-color-blue: #48b1f1;
199
357
  --bui-color-orange: #ff8f3f;
200
358
  --bui-color-gray: #f5f5f5;
@@ -212,7 +370,7 @@ xhs-page,
212
370
  --bui-color-fg-muted: #2e333e;
213
371
  --bui-shape-radius-label: 4px;
214
372
  }
215
- /** 大麦主题 */
373
+ /** 大麦主题-暗黑 */
216
374
  .bui-dm-dark,
217
375
  [data-color-mode='dark'][data-theme='dm'] {
218
376
  --bui-color-neutral-5: #e5e5e5;
@@ -237,6 +395,175 @@ xhs-page,
237
395
  --bui-color-bg-alpha-dark-1: rgba(72, 79, 88, 0.1);
238
396
  --bui-color-border-default: #30363d;
239
397
  }
398
+ /** 大麦主题-高亮 */
399
+ .bui-pioneer-light,
400
+ [data-color-mode='light'][data-theme='pioneer'] {
401
+ /** 品牌红 */
402
+ --bui-color-red: #ff335c;
403
+ --bui-color-red-light: #ffebef;
404
+ /** 明亮粉 */
405
+ --bui-color-pink: #dd10f2;
406
+ --bui-color-pink-light: #fce7fe;
407
+ /** 活力橙 */
408
+ --bui-color-orange: #ff8533;
409
+ --bui-color-orange-light: #fff0e5;
410
+ /** 亲和绿 */
411
+ --bui-color-green: #00d68f;
412
+ --bui-color-green-light: #dcf9f0;
413
+ /** 神秘紫 */
414
+ --bui-color-purple: #8b52ff;
415
+ --bui-color-purple-light: #f2ebff;
416
+ /** 宁静蓝 */
417
+ --bui-color-blue: #148aff;
418
+ --bui-color-blue-light: #e1f0ff;
419
+ /** 中性灰 */
420
+ --bui-color-gray: #8896b1;
421
+ --bui-color-gray-light: #f3f5f8;
422
+ --bui-color-black: #000;
423
+ --bui-color-white: #fff;
424
+ --bui-color-vip: #ff866e;
425
+ /** 中性色 */
426
+ --bui-color-neutral-0: var(--bui-color-black);
427
+ --bui-color-neutral-1: #2e333e;
428
+ --bui-color-neutral-2: #5f6672;
429
+ --bui-color-neutral-3: #959aa5;
430
+ --bui-color-neutral-4: #ced1d6;
431
+ --bui-color-neutral-5: #e9ebef;
432
+ --bui-color-neutral-6: #f5f6f8;
433
+ --bui-color-neutral-7: var(--bui-color-white);
434
+ /** 字重 */
435
+ --bui-font-weight-normal: 400;
436
+ --bui-font-weight-medium: 500;
437
+ --bui-font-weight-bold: 600;
438
+ /** 主题 */
439
+ --bui-color-primary: #ff7600;
440
+ --bui-color-primary-light: #ffefe5;
441
+ --bui-color-info: var(--bui-color-blue);
442
+ --bui-color-info-light: var(--bui-color-blue-light);
443
+ --bui-color-success: var(--bui-color-green);
444
+ --bui-color-success-light: var(--bui-color-green-light);
445
+ --bui-color-warning: var(--bui-color-orange);
446
+ --bui-color-warning-light: var(--bui-color-orange-light);
447
+ --bui-color-danger: var(--bui-color-red);
448
+ --bui-color-danger-light: var(--bui-color-red-light);
449
+ /** 语义化字体 */
450
+ --bui-title-size-1: 21px;
451
+ --bui-title-size-2: 18px;
452
+ --bui-title-size-3: 16px;
453
+ --bui-title-size-4: 14px;
454
+ --bui-text-size-1: 14px;
455
+ --bui-text-size-2: 13px;
456
+ --bui-text-size-3: 12px;
457
+ --bui-text-size-4: 11px;
458
+ --bui-text-size-5: 10px;
459
+ --bui-color-fg-default: #181818;
460
+ --bui-color-fg-muted: var(--bui-color-neutral-2);
461
+ --bui-color-fg-subtle: var(--bui-color-neutral-3);
462
+ --bui-color-fg-disabled: rgba(24, 24, 24, 0.5);
463
+ --bui-color-bg-default: var(--bui-color-neutral-6);
464
+ --bui-color-bg-view: var(--bui-color-neutral-7);
465
+ --bui-color-bg-popover: var(--bui-color-neutral-7);
466
+ --bui-color-bg-alpha-light-9: rgba(255, 255, 255, 0.9);
467
+ --bui-color-bg-alpha-light-7: rgba(255, 255, 255, 0.7);
468
+ --bui-color-bg-alpha-light-5: rgba(255, 255, 255, 0.5);
469
+ --bui-color-bg-alpha-light-3: rgba(255, 255, 255, 0.3);
470
+ --bui-color-bg-alpha-light-1: rgba(255, 255, 255, 0.1);
471
+ --bui-color-bg-alpha-dark-9: rgba(0, 0, 0, 0.9);
472
+ --bui-color-bg-alpha-dark-7: rgba(0, 0, 0, 0.7);
473
+ --bui-color-bg-alpha-dark-5: rgba(0, 0, 0, 0.5);
474
+ --bui-color-bg-alpha-dark-3: rgba(0, 0, 0, 0.3);
475
+ --bui-color-bg-alpha-dark-1: rgba(0, 0, 0, 0.1);
476
+ --bui-color-border-default: var(--bui-color-neutral-5);
477
+ --bui-color-border-primary: rgba(255, 118, 0, 0.4);
478
+ --bui-color-border-info: rgba(20, 138, 255, 0.4);
479
+ --bui-color-border-success: rgba(0, 214, 143, 0.4);
480
+ --bui-color-border-warning: rgba(255, 133, 51, 0.4);
481
+ --bui-color-border-danger: rgba(255, 51, 92, 0.4);
482
+ --bui-color-border-gray: rgba(136, 150, 177, 0.4);
483
+ --bui-color-primary-start: #ff9c0d;
484
+ --bui-color-primary-end: #ff6813;
485
+ --bui-color-secondary-start: #f32adf;
486
+ --bui-color-secondary-end: var(--bui-color-pink);
487
+ --bui-color-info-start: #17b6ff;
488
+ --bui-color-info-end: #48d3ff;
489
+ --bui-color-warning-start: #ffcf02;
490
+ --bui-color-warning-end: #ffb205;
491
+ --bui-color-success-start: #00ebac;
492
+ --bui-color-success-end: var(--bui-color-green);
493
+ --bui-color-danger-start: #ef16b9;
494
+ --bui-color-danger-end: var(--bui-color-red);
495
+ --bui-color-vip-start: #ffd4a6;
496
+ --bui-color-vip-end: #ffbeae;
497
+ --bui-shape-radius-popover: 18px;
498
+ --bui-shape-radius-drawer: 15px;
499
+ --bui-shape-radius-card: 12px;
500
+ --bui-shape-radius-default: 9px;
501
+ --bui-shape-radius-poster: 4px;
502
+ --bui-shape-radius-label: 3px;
503
+ }
504
+ .bui-pioneer-light .bui-btn-full,
505
+ [data-color-mode='light'][data-theme='pioneer'] .bui-btn-full {
506
+ --bui-btn-border-radius: 14px;
507
+ --bui-btn-height: 45px;
508
+ --bui-btn-font-size: 18px;
509
+ --bui-btn-font-family: alibabapuhuiti-heavy, chinese quote, segoe ui, roboto,
510
+ pingfang sc, hiragino sans gb, microsoft yahei, helvetica neue, helvetica,
511
+ arial, sans-serif;
512
+ }
513
+ .bui-pioneer-light .bui-btn-large,
514
+ [data-color-mode='light'][data-theme='pioneer'] .bui-btn-large {
515
+ --bui-btn-border-radius: 7px;
516
+ --bui-btn-height: 30px;
517
+ }
518
+ .bui-pioneer-light .bui-btn-medium,
519
+ [data-color-mode='light'][data-theme='pioneer'] .bui-btn-medium {
520
+ --bui-btn-border-radius: 6px;
521
+ }
522
+ .bui-pioneer-light .bui-btn-outlined,
523
+ [data-color-mode='light'][data-theme='pioneer'] .bui-btn-outlined {
524
+ --bui-btn-border: solid 1px var(--bui-color-fg-default);
525
+ --bui-btn-color: var(--bui-color-fg-default);
526
+ }
527
+ .bui-pioneer-light .bui-btn-contained,
528
+ [data-color-mode='light'][data-theme='pioneer'] .bui-btn-contained {
529
+ --bui-btn-color: var(--bui-color-bg-view);
530
+ --bui-btn-bg: var(--bui-color-fg-default);
531
+ }
532
+ .bui-pioneer-light .bui-btn,
533
+ [data-color-mode='light'][data-theme='pioneer'] .bui-btn {
534
+ --bui-button-border-radius: 14px;
535
+ --bui-button-outlined-default-border: 1px solid #171717;
536
+ --bui-button-text-color: var(--bui-color-fg-default);
537
+ --bui-button-font-weight: 700;
538
+ --bui-button-default-bg-color: #171717;
539
+ --bui-button-full-height: 45px;
540
+ }
541
+ .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large,
542
+ [data-color-mode='light'][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large {
543
+ 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%);
544
+ }
545
+ .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full,
546
+ [data-color-mode='light'][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full {
547
+ 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%);
548
+ }
549
+ .bui-pioneer-light .bui-tabs,
550
+ [data-color-mode='light'][data-theme='pioneer'] .bui-tabs {
551
+ --bui-tab-font-size: var(--bui-title-size-4);
552
+ --bui-tabs-active-font-weight: 700;
553
+ --bui-tab-active-font-size: var(--bui-title-size-2);
554
+ --bui-tabs-color: var(--bui-color-fg-muted);
555
+ --bui-tabs-active-color: var(--bui-color-fg-default);
556
+ --bui-tabs-line-width: 32px;
557
+ /* prettier-ignore */
558
+ --bui-tabs-line-height: 7PX;
559
+ --bui-tabs-line-border-radius: 2px;
560
+ --bui-tabs-line-bottom: 6px;
561
+ --bui-tabs-line-box-shadow: 0 1px 5px 0 rgba(255, 98, 0, 0.6);
562
+ }
563
+ .bui-pioneer-light .bui-tabs .bui-tabs-tabline,
564
+ [data-color-mode='light'][data-theme='pioneer'] .bui-tabs .bui-tabs-tabline {
565
+ background-image: linear-gradient(90deg, #ff9b00 0%, #ffa700 21%, #ff8300 100%);
566
+ }
240
567
  @media (prefers-color-scheme: light) {
241
568
  [data-color-mode='auto'] {
242
569
  /** 品牌红 */
@@ -276,7 +603,7 @@ xhs-page,
276
603
  --bui-font-weight-normal: 400;
277
604
  --bui-font-weight-medium: 500;
278
605
  --bui-font-weight-bold: 600;
279
- /** 主题 */
606
+ /** 语义色 */
280
607
  --bui-color-primary: var(--bui-color-red);
281
608
  --bui-color-primary-light: var(--bui-color-red-light);
282
609
  --bui-color-info: var(--bui-color-blue);
@@ -287,7 +614,7 @@ xhs-page,
287
614
  --bui-color-warning-light: var(--bui-color-orange-light);
288
615
  --bui-color-danger: var(--bui-color-red);
289
616
  --bui-color-danger-light: var(--bui-color-red-light);
290
- /** 语义化字体 */
617
+ /** 字号 */
291
618
  --bui-title-size-1: 21px;
292
619
  --bui-title-size-2: 18px;
293
620
  --bui-title-size-3: 16px;
package/index.less CHANGED
@@ -3,6 +3,13 @@
3
3
  @import './theme/index.less';
4
4
  @import './mixins/index.less';
5
5
 
6
+ @media (prefers-color-scheme: light) {
7
+ [data-color-mode='auto'][data-theme='pioneer'] {
8
+ .pioneer-light();
9
+ .pioneer-components();
10
+ }
11
+ }
12
+
6
13
  @media (prefers-color-scheme: light) {
7
14
  [data-color-mode='auto'][data-theme='dm'] {
8
15
  .dm-light();
@@ -29,18 +36,25 @@ xhs-page,
29
36
  .dark();
30
37
  }
31
38
 
32
- /** 大麦主题 */
39
+ /** 大麦主题-高亮 */
33
40
  .bui-dm-light,
34
41
  [data-color-mode='light'][data-theme='dm'] {
35
42
  .dm-light();
36
43
  }
37
44
 
38
- /** 大麦主题 */
45
+ /** 大麦主题-暗黑 */
39
46
  .bui-dm-dark,
40
47
  [data-color-mode='dark'][data-theme='dm'] {
41
48
  .dm-dark();
42
49
  }
43
50
 
51
+ /** 大麦主题-高亮 */
52
+ .bui-pioneer-light,
53
+ [data-color-mode='light'][data-theme='pioneer'] {
54
+ .pioneer-light();
55
+ .pioneer-components();
56
+ }
57
+
44
58
  @media (prefers-color-scheme: light) {
45
59
  [data-color-mode='auto'] {
46
60
  .light();
package/mixins/gradient.less CHANGED
@@ -1,3 +1,3 @@
1
1
  .linear-gradient(@start: @pink-start, @end: @pink-end) {
2
- background-image: linear-gradient(45deg, @start 0%, @end 100%);
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.4-beta.0",
3
+ "version": "1.4.5-beta.0",
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
@@ -45,7 +45,7 @@
45
45
  --bui-font-weight-medium: 500;
46
46
  --bui-font-weight-bold: 600;
47
47
 
48
- /** 主题 */
48
+ /** 语义色 */
49
49
  --bui-color-primary: var(--bui-color-red);
50
50
  --bui-color-primary-light: var(--bui-color-red-light);
51
51
  --bui-color-info: var(--bui-color-blue);
@@ -57,7 +57,7 @@
57
57
  --bui-color-danger: var(--bui-color-red);
58
58
  --bui-color-danger-light: var(--bui-color-red-light);
59
59
 
60
- /** 语义化字体 */
60
+ /** 字号 */
61
61
  --bui-title-size-1: 21px;
62
62
  --bui-title-size-2: 18px;
63
63
  --bui-title-size-3: 16px;
package/theme/dm-light.less CHANGED
@@ -1,5 +1,4 @@
1
1
  .dm-light() {
2
- /** 颜色 */
3
2
  --bui-color-blue: #48b1f1;
4
3
  --bui-color-orange: #ff8f3f;
5
4
  --bui-color-gray: #f5f5f5;
package/theme/index.less CHANGED
@@ -2,3 +2,5 @@
2
2
  @import './default-dark.less';
3
3
  @import './dm-light.less';
4
4
  @import './dm-dark.less';
5
+ @import './pioneer-light.less';
6
+ @import './pioneer-components.less';
package/theme/pioneer-components.less ADDED
@@ -0,0 +1,69 @@
1
+ /** pioneer 组件主题 */
2
+
3
+ .pioneer-components() {
4
+ // TODO 黑色与灰色
5
+ .bui-btn {
6
+ --bui-button-border-radius: 14px;
7
+ --bui-button-outlined-default-border: 1px solid #171717;
8
+ --bui-button-text-color: var(--bui-color-fg-default);
9
+ --bui-button-font-weight: 700;
10
+ --bui-button-default-bg-color: #171717;
11
+ --bui-button-full-height: 45px;
12
+
13
+ &.bui-btn-contained {
14
+ &.bui-btn-primary {
15
+ &.bui-btn-large {
16
+ background-image: radial-gradient(
17
+ 35px 25px ellipse at 2% 110%,
18
+ #fffe1e 0%,
19
+ rgba(251, 134, 35, 0) 99%
20
+ ),
21
+ radial-gradient(
22
+ 35px 25px ellipse at 110% 120%,
23
+ #ff3018 0%,
24
+ rgba(0, 48, 24, 0) 92%
25
+ ),
26
+ linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
27
+ }
28
+
29
+ &.bui-btn-full {
30
+ background-image: radial-gradient(
31
+ 93px 50px ellipse at 2% 110%,
32
+ #fffe1e 0%,
33
+ rgba(251, 134, 35, 0) 100%
34
+ ),
35
+ radial-gradient(
36
+ 93px 50px ellipse at 98% 110%,
37
+ #ff3018 0%,
38
+ rgba(0, 48, 24, 0) 92%
39
+ ),
40
+ linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
41
+ }
42
+ }
43
+ }
44
+ }
45
+
46
+ .bui-tabs {
47
+ --bui-tab-font-size: var(--bui-title-size-4);
48
+ --bui-tabs-active-font-weight: 700;
49
+ --bui-tab-active-font-size: var(--bui-title-size-2);
50
+ --bui-tabs-color: var(--bui-color-fg-muted);
51
+ --bui-tabs-active-color: var(--bui-color-fg-default);
52
+ --bui-tabs-line-width: 32px;
53
+
54
+ /* prettier-ignore */
55
+ --bui-tabs-line-height: 7PX;
56
+ --bui-tabs-line-border-radius: 2px;
57
+ --bui-tabs-line-bottom: 6px;
58
+ --bui-tabs-line-box-shadow: 0 1px 5px 0 rgba(255, 98, 0, 0.6);
59
+
60
+ .bui-tabs-tabline {
61
+ background-image: linear-gradient(
62
+ 90deg,
63
+ #ff9b00 0%,
64
+ #ffa700 21%,
65
+ #ff8300 100%
66
+ );
67
+ }
68
+ }
69
+ }
package/theme/pioneer-light.less ADDED
@@ -0,0 +1,162 @@
1
+ .pioneer-light() {
2
+ /** 品牌红 */
3
+ --bui-color-red: #ff335c;
4
+ --bui-color-red-light: #ffebef;
5
+
6
+ /** 明亮粉 */
7
+ --bui-color-pink: #dd10f2;
8
+ --bui-color-pink-light: #fce7fe;
9
+
10
+ /** 活力橙 */
11
+ --bui-color-orange: #ff8533;
12
+ --bui-color-orange-light: #fff0e5;
13
+
14
+ /** 亲和绿 */
15
+ --bui-color-green: #00d68f;
16
+ --bui-color-green-light: #dcf9f0;
17
+
18
+ /** 神秘紫 */
19
+ --bui-color-purple: #8b52ff;
20
+ --bui-color-purple-light: #f2ebff;
21
+
22
+ /** 宁静蓝 */
23
+ --bui-color-blue: #148aff;
24
+ --bui-color-blue-light: #e1f0ff;
25
+
26
+ /** 中性灰 */
27
+ --bui-color-gray: #8896b1;
28
+ --bui-color-gray-light: #f3f5f8;
29
+ --bui-color-black: #000;
30
+ --bui-color-white: #fff;
31
+ --bui-color-vip: #ff866e;
32
+
33
+ /** 中性色 */
34
+ --bui-color-neutral-0: var(--bui-color-black);
35
+ --bui-color-neutral-1: #2e333e;
36
+ --bui-color-neutral-2: #5f6672;
37
+ --bui-color-neutral-3: #959aa5;
38
+ --bui-color-neutral-4: #ced1d6;
39
+ --bui-color-neutral-5: #e9ebef;
40
+ --bui-color-neutral-6: #f5f6f8;
41
+ --bui-color-neutral-7: var(--bui-color-white);
42
+
43
+ /** 字重 */
44
+ --bui-font-weight-normal: 400;
45
+ --bui-font-weight-medium: 500;
46
+ --bui-font-weight-bold: 600;
47
+
48
+ /** 主题 */
49
+ --bui-color-primary: #ff7600;
50
+ --bui-color-primary-light: #ffefe5;
51
+ --bui-color-info: var(--bui-color-blue);
52
+ --bui-color-info-light: var(--bui-color-blue-light);
53
+ --bui-color-success: var(--bui-color-green);
54
+ --bui-color-success-light: var(--bui-color-green-light);
55
+ --bui-color-warning: var(--bui-color-orange);
56
+ --bui-color-warning-light: var(--bui-color-orange-light);
57
+ --bui-color-danger: var(--bui-color-red);
58
+ --bui-color-danger-light: var(--bui-color-red-light);
59
+
60
+ /** 语义化字体 */
61
+ --bui-title-size-1: 21px;
62
+ --bui-title-size-2: 18px;
63
+ --bui-title-size-3: 16px;
64
+ --bui-title-size-4: 14px;
65
+ --bui-text-size-1: 14px;
66
+ --bui-text-size-2: 13px;
67
+ --bui-text-size-3: 12px;
68
+ --bui-text-size-4: 11px;
69
+ --bui-text-size-5: 10px;
70
+
71
+ // 前景色，通常用于文字
72
+ // default是最通用的色彩，比如标题和一级信息
73
+ --bui-color-fg-default: #181818;
74
+ // 柔和色，通常用于次级及补充说明信息
75
+ --bui-color-fg-muted: var(--bui-color-neutral-2);
76
+ // 淡色，很细微的色彩，用于辅助和需要弱化的信息
77
+ --bui-color-fg-subtle: var(--bui-color-neutral-3);
78
+ // 用于失效、不可用等状态
79
+ --bui-color-fg-disabled: fade(#181818, 50%);
80
+
81
+ // 默认背景色
82
+ --bui-color-bg-default: var(--bui-color-neutral-6);
83
+ // 视图背景色
84
+ --bui-color-bg-view: var(--bui-color-neutral-7);
85
+ --bui-color-bg-popover: var(--bui-color-neutral-7);
86
+ --bui-color-bg-alpha-light-9: fade(#fff, 90%);
87
+ --bui-color-bg-alpha-light-7: fade(#fff, 70%);
88
+ --bui-color-bg-alpha-light-5: fade(#fff, 50%);
89
+ --bui-color-bg-alpha-light-3: fade(#fff, 30%);
90
+ --bui-color-bg-alpha-light-1: fade(#fff, 10%);
91
+ --bui-color-bg-alpha-dark-9: fade(#000, 90%);
92
+ --bui-color-bg-alpha-dark-7: fade(#000, 70%);
93
+ --bui-color-bg-alpha-dark-5: fade(#000, 50%);
94
+ --bui-color-bg-alpha-dark-3: fade(#000, 30%);
95
+ --bui-color-bg-alpha-dark-1: fade(#000, 10%);
96
+
97
+ // 分割线、边框
98
+ --bui-color-border-default: var(--bui-color-neutral-5);
99
+ --bui-color-border-primary: fade(#ff7600, 40%);
100
+ --bui-color-border-info: fade(#148aff, 40%);
101
+ --bui-color-border-success: fade(#00d68f, 40%);
102
+ --bui-color-border-warning: fade(#ff8533, 40%);
103
+ --bui-color-border-danger: fade(#ff335c, 40%);
104
+ --bui-color-border-gray: fade(#8896b1, 40%);
105
+
106
+ // 主题色渐变
107
+ --bui-color-primary-start: #ff9c0d;
108
+ --bui-color-primary-end: #ff6813;
109
+ --bui-color-secondary-start: #f32adf;
110
+ --bui-color-secondary-end: var(--bui-color-pink);
111
+ --bui-color-info-start: #17b6ff;
112
+ --bui-color-info-end: #48d3ff;
113
+ --bui-color-warning-start: #ffcf02;
114
+ --bui-color-warning-end: #ffb205;
115
+ --bui-color-success-start: #00ebac;
116
+ --bui-color-success-end: var(--bui-color-green);
117
+ --bui-color-danger-start: #ef16b9;
118
+ --bui-color-danger-end: var(--bui-color-red);
119
+ --bui-color-vip-start: #ffd4a6;
120
+ --bui-color-vip-end: #ffbeae;
121
+
122
+ // 形状定义
123
+ // 页面级浮层
124
+ --bui-shape-radius-popover: 18px;
125
+ --bui-shape-radius-drawer: 15px;
126
+ // 卡片、普通视图、抽屉、action sheet，常用于信息密度较低的视图
127
+ --bui-shape-radius-card: 12px;
128
+ // 独立海报、卡片，常用于信息密度较高的视图
129
+ --bui-shape-radius-default: 9px;
130
+ // 容器内海报
131
+ --bui-shape-radius-poster: 4px;
132
+ // 标签
133
+ --bui-shape-radius-label: 3px;
134
+
135
+ .bui-btn-full {
136
+ --bui-btn-border-radius: 14px;
137
+ --bui-btn-height: 45px;
138
+ --bui-btn-font-size: 18px;
139
+ --bui-btn-font-family: alibabapuhuiti-heavy, chinese quote, segoe ui, roboto,
140
+ pingfang sc, hiragino sans gb, microsoft yahei, helvetica neue, helvetica,
141
+ arial, sans-serif;
142
+ }
143
+
144
+ .bui-btn-large {
145
+ --bui-btn-border-radius: 7px;
146
+ --bui-btn-height: 30px;
147
+ }
148
+
149
+ .bui-btn-medium {
150
+ --bui-btn-border-radius: 6px;
151
+ }
152
+
153
+ .bui-btn-outlined {
154
+ --bui-btn-border: solid 1px var(--bui-color-fg-default);
155
+ --bui-btn-color: var(--bui-color-fg-default);
156
+ }
157
+
158
+ .bui-btn-contained {
159
+ --bui-btn-color: var(--bui-color-bg-view);
160
+ --bui-btn-bg: var(--bui-color-fg-default);
161
+ }
162
+ }