@bifrostui/styles 1.4.5-beta.2 → 1.4.5

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 (8) hide show
  1. package/dist/index.css +244 -179
  2. package/index.less +58 -12
  3. package/package.json +1 -1
  4. package/theme/default-light.less +2 -2
  5. package/theme/dm-dark.less +33 -0
  6. package/theme/dm-light.less +1 -0
  7. package/theme/index.less +1 -1
  8. package/theme/pioneer-light.less +0 -228
package/dist/index.css CHANGED
@@ -1,10 +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] {
53
+ [data-color-mode='light'][data-theme='default'] {
8
54
  /** 品牌红 */
9
55
  --bui-color-red: #ff335c;
10
56
  --bui-color-red-light: #ffebef;
@@ -42,7 +88,7 @@ xhs-page,
42
88
  --bui-font-weight-normal: 400;
43
89
  --bui-font-weight-medium: 500;
44
90
  --bui-font-weight-bold: 600;
45
- /** 语义色 */
91
+ /** 主题 */
46
92
  --bui-color-primary: var(--bui-color-red);
47
93
  --bui-color-primary-light: var(--bui-color-red-light);
48
94
  --bui-color-info: var(--bui-color-blue);
@@ -53,7 +99,7 @@ xhs-page,
53
99
  --bui-color-warning-light: var(--bui-color-orange-light);
54
100
  --bui-color-danger: var(--bui-color-red);
55
101
  --bui-color-danger-light: var(--bui-color-red-light);
56
- /** 字号 */
102
+ /** 语义化字体 */
57
103
  --bui-title-size-1: 21px;
58
104
  --bui-title-size-2: 18px;
59
105
  --bui-title-size-3: 16px;
@@ -124,9 +170,31 @@ xhs-page,
124
170
  'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
125
171
  sans-serif;
126
172
  }
127
- /** 大麦主题-高亮 */
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
+ /** 大麦主题 */
128
195
  .bui-dm-light,
129
- [data-color-mode][data-theme='dm'] {
196
+ [data-color-mode='light'][data-theme='dm'] {
197
+ /** 颜色 */
130
198
  --bui-color-blue: #48b1f1;
131
199
  --bui-color-orange: #ff8f3f;
132
200
  --bui-color-gray: #f5f5f5;
@@ -144,179 +212,12 @@ xhs-page,
144
212
  --bui-color-fg-muted: #2e333e;
145
213
  --bui-shape-radius-label: 4px;
146
214
  }
147
- /** 先锋主题 */
148
- .bui-pioneer-light,
149
- [data-color-mode][data-theme='pioneer'] {
150
- /** pioneer 特殊字体 */
151
- --bui-font-family-accent: 'AlibabaPuHuiTi-Heavy', 'PingFang SC',
152
- 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei',
153
- 'Helvetica Neue', helvetica, arial, sans-serif;
154
- /** 品牌红 */
155
- --bui-color-red: #ff335c;
156
- --bui-color-red-light: #ffebef;
157
- /** 明亮粉 */
158
- --bui-color-pink: #dd10f2;
159
- --bui-color-pink-light: #fce7fe;
160
- /** 活力橙 */
161
- --bui-color-orange: #ff8533;
162
- --bui-color-orange-light: #fff0e5;
163
- /** 亲和绿 */
164
- --bui-color-green: #00d68f;
165
- --bui-color-green-light: #dcf9f0;
166
- /** 神秘紫 */
167
- --bui-color-purple: #8b52ff;
168
- --bui-color-purple-light: #f2ebff;
169
- /** 宁静蓝 */
170
- --bui-color-blue: #148aff;
171
- --bui-color-blue-light: #e1f0ff;
172
- /** 中性灰 */
173
- --bui-color-gray: #8896b1;
174
- --bui-color-gray-light: #f3f5f8;
175
- --bui-color-black: #000;
176
- --bui-color-white: #fff;
177
- --bui-color-vip: #ff866e;
178
- /** 中性色 */
179
- --bui-color-neutral-0: var(--bui-color-black);
180
- --bui-color-neutral-1: #2e333e;
181
- --bui-color-neutral-2: #5f6672;
182
- --bui-color-neutral-3: #959aa5;
183
- --bui-color-neutral-4: #ced1d6;
184
- --bui-color-neutral-5: #e9ebef;
185
- --bui-color-neutral-6: #f5f6f8;
186
- --bui-color-neutral-7: var(--bui-color-white);
187
- /** 字重 */
188
- --bui-font-weight-normal: 400;
189
- --bui-font-weight-medium: 500;
190
- --bui-font-weight-bold: 600;
191
- /** 主题 */
192
- --bui-color-primary: #ff7600;
193
- --bui-color-primary-light: #ffefe5;
194
- --bui-color-info: var(--bui-color-blue);
195
- --bui-color-info-light: var(--bui-color-blue-light);
196
- --bui-color-success: var(--bui-color-green);
197
- --bui-color-success-light: var(--bui-color-green-light);
198
- --bui-color-warning: var(--bui-color-orange);
199
- --bui-color-warning-light: var(--bui-color-orange-light);
200
- --bui-color-danger: var(--bui-color-red);
201
- --bui-color-danger-light: var(--bui-color-red-light);
202
- /** 语义化字体 */
203
- --bui-title-size-1: 21px;
204
- --bui-title-size-2: 18px;
205
- --bui-title-size-3: 16px;
206
- --bui-title-size-4: 14px;
207
- --bui-text-size-1: 14px;
208
- --bui-text-size-2: 13px;
209
- --bui-text-size-3: 12px;
210
- --bui-text-size-4: 11px;
211
- --bui-text-size-5: 10px;
212
- --bui-color-fg-default: #181818;
213
- --bui-color-fg-muted: var(--bui-color-neutral-2);
214
- --bui-color-fg-subtle: var(--bui-color-neutral-3);
215
- --bui-color-fg-disabled: rgba(24, 24, 24, 0.5);
216
- --bui-color-bg-default: var(--bui-color-neutral-6);
217
- --bui-color-bg-view: var(--bui-color-neutral-7);
218
- --bui-color-bg-popover: var(--bui-color-neutral-7);
219
- --bui-color-bg-alpha-light-9: rgba(255, 255, 255, 0.9);
220
- --bui-color-bg-alpha-light-7: rgba(255, 255, 255, 0.7);
221
- --bui-color-bg-alpha-light-5: rgba(255, 255, 255, 0.5);
222
- --bui-color-bg-alpha-light-3: rgba(255, 255, 255, 0.3);
223
- --bui-color-bg-alpha-light-1: rgba(255, 255, 255, 0.1);
224
- --bui-color-bg-alpha-dark-9: rgba(0, 0, 0, 0.9);
225
- --bui-color-bg-alpha-dark-7: rgba(0, 0, 0, 0.7);
226
- --bui-color-bg-alpha-dark-5: rgba(0, 0, 0, 0.5);
227
- --bui-color-bg-alpha-dark-3: rgba(0, 0, 0, 0.3);
228
- --bui-color-bg-alpha-dark-1: rgba(0, 0, 0, 0.1);
229
- --bui-color-border-default: var(--bui-color-neutral-5);
230
- --bui-color-border-primary: rgba(255, 118, 0, 0.4);
231
- --bui-color-border-info: rgba(20, 138, 255, 0.4);
232
- --bui-color-border-success: rgba(0, 214, 143, 0.4);
233
- --bui-color-border-warning: rgba(255, 133, 51, 0.4);
234
- --bui-color-border-danger: rgba(255, 51, 92, 0.4);
235
- --bui-color-border-gray: rgba(136, 150, 177, 0.4);
236
- --bui-color-primary-start: #ff9c0d;
237
- --bui-color-primary-end: #ff6813;
238
- --bui-color-secondary-start: #f32adf;
239
- --bui-color-secondary-end: var(--bui-color-pink);
240
- --bui-color-info-start: #17b6ff;
241
- --bui-color-info-end: #48d3ff;
242
- --bui-color-warning-start: #ffcf02;
243
- --bui-color-warning-end: #ffb205;
244
- --bui-color-success-start: #00ebac;
245
- --bui-color-success-end: var(--bui-color-green);
246
- --bui-color-danger-start: #ef16b9;
247
- --bui-color-danger-end: var(--bui-color-red);
248
- --bui-color-vip-start: #ffd4a6;
249
- --bui-color-vip-end: #ffbeae;
250
- --bui-shape-radius-popover: 18px;
251
- --bui-shape-radius-drawer: 15px;
252
- --bui-shape-radius-card: 12px;
253
- --bui-shape-radius-default: 9px;
254
- --bui-shape-radius-poster: 4px;
255
- --bui-shape-radius-label: 3px;
256
- }
257
- .bui-pioneer-light .bui-btn,
258
- [data-color-mode][data-theme='pioneer'] .bui-btn {
259
- --bui-button-border-radius: 14px;
260
- --bui-button-outlined-default-border: 1px solid #171717;
261
- --bui-button-text-color: var(--bui-color-fg-default);
262
- --bui-button-font-weight: 700;
263
- --bui-button-default-bg-color: #171717;
264
- --bui-button-full-height: 45px;
265
- }
266
- .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large,
267
- [data-color-mode][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large {
268
- 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%);
269
- }
270
- .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full,
271
- [data-color-mode][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full {
272
- 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%);
273
- }
274
- .bui-pioneer-light .bui-btn-full,
275
- [data-color-mode][data-theme='pioneer'] .bui-btn-full {
276
- --bui-btn-border-radius: 14px;
277
- --bui-btn-height: 45px;
278
- --bui-btn-font-size: 18px;
279
- --bui-btn-font-family: var(--bui-font-family-accent);
280
- }
281
- .bui-pioneer-light .bui-btn-large,
282
- [data-color-mode][data-theme='pioneer'] .bui-btn-large {
283
- --bui-btn-border-radius: 7px;
284
- --bui-btn-height: 30px;
285
- }
286
- .bui-pioneer-light .bui-btn-medium,
287
- [data-color-mode][data-theme='pioneer'] .bui-btn-medium {
288
- --bui-btn-border-radius: 6px;
289
- }
290
- .bui-pioneer-light .bui-tabs,
291
- [data-color-mode][data-theme='pioneer'] .bui-tabs {
292
- --bui-tabs-font-size: var(--bui-title-size-4);
293
- --bui-tabs-active-font-weight: 700;
294
- --bui-tabs-color: var(--bui-color-fg-muted);
295
- --bui-tabs-indicator-width: 36px;
296
- /* prettier-ignore */
297
- --bui-tabs-indicator-height: 7PX;
298
- --bui-tabs-indicator-border-radius: 2px;
299
- --bui-tabs-indicator-bottom: 6px;
300
- --bui-tabs-indicator-box-shadow: 0 1px 5px 0 rgba(255, 98, 0, 0.6);
301
- }
302
- .bui-pioneer-light .bui-tabs .bui-tabs-indicator,
303
- [data-color-mode][data-theme='pioneer'] .bui-tabs .bui-tabs-indicator {
304
- background-image: linear-gradient(90deg, #ff9b00 0%, #ffa700 21%, #ff8300 100%);
305
- }
306
- .bui-pioneer-light .bui-tab-active,
307
- [data-color-mode][data-theme='pioneer'] .bui-tab-active {
308
- --bui-tabs-font-family: var(--bui-font-family-accent);
309
- --bui-tabs-color: var(--bui-color-fg-default);
310
- }
311
- .bui-pioneer-light .bui-card-header,
312
- [data-color-mode][data-theme='pioneer'] .bui-card-header {
313
- --bui-card-font-family: var(--bui-font-family-accent);
314
- --bui-card-font-size: var(--bui-title-size-3);
315
- }
316
- /** 暗黑模式 */
317
- :root,
318
- .bui-dark,
319
- [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;
320
221
  --bui-color-fg-default: #f0f6fc;
321
222
  --bui-color-fg-muted: #8b949e;
322
223
  --bui-color-fg-subtle: #484f58;
@@ -336,6 +237,170 @@ xhs-page,
336
237
  --bui-color-bg-alpha-dark-1: rgba(72, 79, 88, 0.1);
337
238
  --bui-color-border-default: #30363d;
338
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
+ }
339
404
  [data-color-mode] {
340
405
  color: var(--bui-color-fg-default);
341
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/styles",
3
- "version": "1.4.5-beta.2",
3
+ "version": "1.4.5",
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-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,228 +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: var(--bui-color-neutral-6);
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-tabs {
198
- --bui-tabs-font-size: var(--bui-title-size-4);
199
- --bui-tabs-active-font-weight: 700;
200
- --bui-tabs-color: var(--bui-color-fg-muted);
201
- --bui-tabs-indicator-width: 36px;
202
-
203
- /* prettier-ignore */
204
- --bui-tabs-indicator-height: 7PX;
205
- --bui-tabs-indicator-border-radius: 2px;
206
- --bui-tabs-indicator-bottom: 6px;
207
- --bui-tabs-indicator-box-shadow: 0 1px 5px 0 rgba(255, 98, 0, 0.6);
208
-
209
- .bui-tabs-indicator {
210
- background-image: linear-gradient(
211
- 90deg,
212
- #ff9b00 0%,
213
- #ffa700 21%,
214
- #ff8300 100%
215
- );
216
- }
217
- }
218
-
219
- .bui-tab-active {
220
- --bui-tabs-font-family: var(--bui-font-family-accent);
221
- --bui-tabs-color: var(--bui-color-fg-default);
222
- }
223
-
224
- .bui-card-header {
225
- --bui-card-font-family: var(--bui-font-family-accent);
226
- --bui-card-font-size: var(--bui-title-size-3);
227
- }
228
- }