@bifrostui/styles 2.0.0-beta.10 → 2.0.0-beta.11

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 (5) hide show
  1. package/dist/index.css +184 -144
  2. package/package.json +1 -1
  3. package/theme/default-light.less +89 -37
  4. package/theme/dm-light.less +53 -16
  5. package/theme/pioneer-light.less +67 -123
package/dist/index.css CHANGED
@@ -5,6 +5,7 @@ page,
5
5
  xhs-page,
6
6
  .bui-default-light,
7
7
  [data-color-mode='light'][data-theme] {
8
+ /** 字体 */
8
9
  --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
9
10
  'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
10
11
  sans-serif;
@@ -17,6 +18,9 @@ xhs-page,
17
18
  /** 活力橙 */
18
19
  --bui-color-orange: #ff8533;
19
20
  --bui-color-orange-light: #fff0e5;
21
+ /** 活力黄 */
22
+ --bui-color-yellow: #ff8533;
23
+ --bui-color-yellow-light: #fff0e5;
20
24
  /** 亲和绿 */
21
25
  --bui-color-green: #00d68f;
22
26
  --bui-color-green-light: #dcf9f0;
@@ -28,23 +32,28 @@ xhs-page,
28
32
  --bui-color-blue-light: #e1f0ff;
29
33
  /** 中性灰 */
30
34
  --bui-color-gray: #8896b1;
31
- --bui-color-gray-light: #f3f5f8;
35
+ --bui-color-gray-light: #f7f9fc;
32
36
  --bui-color-black: #000;
33
37
  --bui-color-white: #fff;
34
38
  --bui-color-vip: #ff866e;
39
+ --bui-color-vip1: #fec9a3;
40
+ --bui-color-vip2: #f44a8b;
41
+ --bui-color-vip3: #c46e31;
42
+ --bui-color-vip4: #fccfe0;
35
43
  /** 中性色 */
36
44
  --bui-color-neutral-0: var(--bui-color-black);
37
- --bui-color-neutral-1: #2e333e;
38
- --bui-color-neutral-2: #5f6672;
39
- --bui-color-neutral-3: #959aa5;
40
- --bui-color-neutral-4: #ced1d6;
45
+ --bui-color-neutral-1: #030b1a;
46
+ --bui-color-neutral-2: #444b5b;
47
+ --bui-color-neutral-3: #8b93a5;
48
+ --bui-color-neutral-4: #bfc4cf;
41
49
  --bui-color-neutral-5: #e9ebef;
42
- --bui-color-neutral-6: #f5f6f8;
50
+ --bui-color-neutral-6: #f7f9fc;
43
51
  --bui-color-neutral-7: var(--bui-color-white);
44
52
  /** 字重 */
45
53
  --bui-font-weight-normal: 400;
46
54
  --bui-font-weight-medium: 500;
47
- --bui-font-weight-bold: 600;
55
+ --bui-font-weight-semibold: 600;
56
+ --bui-font-weight-bold: 700;
48
57
  /** 语义色 */
49
58
  --bui-color-primary: var(--bui-color-red);
50
59
  --bui-color-primary-light: var(--bui-color-red-light);
@@ -56,20 +65,37 @@ xhs-page,
56
65
  --bui-color-warning-light: var(--bui-color-orange-light);
57
66
  --bui-color-danger: var(--bui-color-red);
58
67
  --bui-color-danger-light: var(--bui-color-red-light);
59
- /** 字号 */
68
+ /** 基础字号 */
69
+ --bui-font-size-xs1: 8px;
70
+ --bui-font-size-xs2: 9px;
71
+ --bui-font-size-sm1: 10px;
72
+ --bui-font-size-sm2: 11px;
73
+ --bui-font-size-sm3: 12px;
74
+ --bui-font-size-sm4: 13px;
75
+ --bui-font-size-md1: 14px;
76
+ --bui-font-size-md2: 15px;
77
+ --bui-font-size-md3: 16px;
78
+ --bui-font-size-md4: 18px;
79
+ --bui-font-size-lg1: 20px;
80
+ --bui-font-size-lg2: 22px;
81
+ --bui-font-size-lg3: 24px;
82
+ --bui-font-size-lg4: 26px;
83
+ /** 语义化字号 */
60
84
  --bui-title-size-1: 21px;
61
- --bui-title-size-2: 18px;
62
- --bui-title-size-3: 16px;
63
- --bui-title-size-4: 15px;
64
- --bui-text-size-1: 14px;
65
- --bui-text-size-2: 13px;
66
- --bui-text-size-3: 12px;
67
- --bui-text-size-4: 11px;
68
- --bui-text-size-5: 10px;
85
+ --bui-title-size-2: var(--bui-font-size-md4);
86
+ --bui-title-size-3: var(--bui-font-size-md3);
87
+ --bui-title-size-4: var(--bui-font-size-md2);
88
+ --bui-text-size-1: var(--bui-font-size-md1);
89
+ --bui-text-size-2: var(--bui-font-size-sm4);
90
+ --bui-text-size-3: var(--bui-font-size-sm3);
91
+ --bui-text-size-4: var(--bui-font-size-sm2);
92
+ --bui-text-size-5: var(--bui-font-size-sm1);
93
+ /** 前景色，通常用于文字 */
69
94
  --bui-color-fg-default: var(--bui-color-neutral-1);
70
95
  --bui-color-fg-muted: var(--bui-color-neutral-2);
71
96
  --bui-color-fg-subtle: var(--bui-color-neutral-3);
72
97
  --bui-color-fg-disabled: var(--bui-color-neutral-4);
98
+ /** 背景色，通常用于视图 */
73
99
  --bui-color-bg-default: var(--bui-color-neutral-6);
74
100
  --bui-color-bg-view: var(--bui-color-neutral-7);
75
101
  --bui-color-bg-popover: var(--bui-color-neutral-7);
@@ -83,6 +109,7 @@ xhs-page,
83
109
  --bui-color-bg-alpha-dark-5: rgba(0, 0, 0, 0.5);
84
110
  --bui-color-bg-alpha-dark-3: rgba(0, 0, 0, 0.3);
85
111
  --bui-color-bg-alpha-dark-1: rgba(0, 0, 0, 0.1);
112
+ /** 分割线、边框 */
86
113
  --bui-color-border-default: var(--bui-color-neutral-5);
87
114
  --bui-color-border-primary: rgba(255, 51, 92, 0.4);
88
115
  --bui-color-border-info: rgba(20, 138, 255, 0.4);
@@ -90,6 +117,7 @@ xhs-page,
90
117
  --bui-color-border-warning: rgba(255, 133, 51, 0.4);
91
118
  --bui-color-border-danger: rgba(255, 51, 92, 0.4);
92
119
  --bui-color-border-gray: rgba(136, 150, 177, 0.4);
120
+ /** 主题色渐变 */
93
121
  --bui-color-primary-start: #ef16b9;
94
122
  --bui-color-primary-end: var(--bui-color-red);
95
123
  --bui-color-secondary-start: #f32adf;
@@ -104,18 +132,43 @@ xhs-page,
104
132
  --bui-color-danger-end: var(--bui-color-red);
105
133
  --bui-color-vip-start: #ffd4a6;
106
134
  --bui-color-vip-end: #ffbeae;
107
- --bui-shape-radius-popover: 18px;
108
- --bui-shape-radius-drawer: 12px;
109
- --bui-shape-radius-card: 9px;
110
- --bui-shape-radius-default: 6px;
111
- --bui-shape-radius-poster: 4px;
112
- --bui-shape-radius-label: 3px;
113
- --bui-spacing-xl: 15px;
114
- --bui-spacing-lg: 12px;
115
- --bui-spacing-md: 9px;
116
- --bui-spacing-sm: 6px;
117
- --bui-spacing-xs: 4px;
135
+ /* 基础圆角 */
136
+ --bui-radius-circular: 10000px;
137
+ --bui-radius-8: 24px;
138
+ --bui-radius-7: 18px;
139
+ --bui-radius-6: 15px;
140
+ --bui-radius-5: 12px;
141
+ --bui-radius-4: 9px;
142
+ --bui-radius-3: 6px;
143
+ --bui-radius-2: 4px;
144
+ --bui-radius-1: 3px;
145
+ --bui-radius-none: 0px;
146
+ /* 形状定义 */
147
+ --bui-shape-radius-popover: var(--bui-radius-7);
148
+ --bui-shape-radius-drawer: var(--bui-radius-5);
149
+ --bui-shape-radius-card: var(--bui-radius-4);
150
+ --bui-shape-radius-default: var(--bui-radius-3);
151
+ --bui-shape-radius-poster: var(--bui-radius-2);
152
+ --bui-shape-radius-label: var(--bui-radius-1);
153
+ /* 基础间距 */
154
+ --bui-spacing-1: 1px;
155
+ --bui-spacing-2: 2px;
156
+ --bui-spacing-3: 3px;
157
+ --bui-spacing-4: 4px;
158
+ --bui-spacing-5: 6px;
159
+ --bui-spacing-6: 9px;
160
+ --bui-spacing-7: 12px;
161
+ --bui-spacing-8: 15px;
162
+ --bui-spacing-9: 18px;
163
+ --bui-spacing-10: 24px;
164
+ /** 语义化间距 */
165
+ --bui-spacing-xl: var(--bui-spacing-8);
166
+ --bui-spacing-lg: var(--bui-spacing-7);
167
+ --bui-spacing-md: var(--bui-spacing-6);
168
+ --bui-spacing-sm: var(--bui-spacing-5);
169
+ --bui-spacing-xs: var(--bui-spacing-4);
118
170
  --bui-line-height: 1.5;
171
+ /** 层级 */
119
172
  --bui-z-index-dropdown: 1000;
120
173
  --bui-z-index-affix: 1100;
121
174
  --bui-z-index-modal-backdrop: 1200;
@@ -151,22 +204,51 @@ xhs-page,
151
204
  /** 大麦主题-高亮 */
152
205
  .bui-dm-light,
153
206
  [data-color-mode][data-theme='dm'] {
154
- --bui-color-blue: #48b1f1;
155
- --bui-color-orange: #ff8f3f;
156
- --bui-color-gray: #f5f5f5;
157
- --bui-color-pink: #ff8e92;
158
- --bui-color-neutral-2: #4d4d56;
159
- --bui-color-neutral-3: #9c9ca5;
160
- --bui-color-neutral-5: #f1f1f1;
161
- --bui-color-bg-default: #f4f5f6;
162
- --bui-color-powder-start: #ff72a2;
163
- --bui-color-powder-end: #ff7070;
164
- --bui-title-size-2: 20px;
165
- --bui-title-size-3: 18px;
166
- --bui-color-red: #ff4886;
167
- --bui-color-fg-default: #2e333e;
168
- --bui-color-fg-muted: #2e333e;
169
- --bui-shape-radius-label: 4px;
207
+ /** 淘麦红 */
208
+ --bui-color-red: #ff3299;
209
+ --bui-color-red-light: #ffeaf5;
210
+ --bui-color-red-dark: #e62d8a;
211
+ /** 活力黄 */
212
+ --bui-color-yellow: #ffaf00;
213
+ --bui-color-yellow-light: #fff7e5;
214
+ --bui-color-yellow-dark: #e59d00;
215
+ /** 荧光黄 */
216
+ --bui-color-lemonyellow: #fff36f;
217
+ --bui-color-lemonyellow-light: #ffffeb;
218
+ --bui-color-lemonyellow-dark: #b3a13d;
219
+ /** 亲和绿 */
220
+ --bui-color-green: #0cdc87;
221
+ --bui-color-green-light: #e6fbf3;
222
+ --bui-color-green-dark: #0bc679;
223
+ /** 神秘紫 */
224
+ --bui-color-purple: #754dff;
225
+ --bui-color-purple-light: #f6f0ff;
226
+ --bui-color-purple-dark: #3924b3;
227
+ /** 宁静蓝 */
228
+ --bui-color-blue: #30aeff;
229
+ --bui-color-blue-light: #eaf7ff;
230
+ --bui-color-blue-dark: #2b9ce5;
231
+ /** 智能蓝 */
232
+ --bui-color-aiblue: #5cfffa;
233
+ --bui-color-aiblue-light: #f0fffc;
234
+ --bui-color-aiblue-dark: #1d858c;
235
+ /** 主题色渐变 */
236
+ --bui-color-primary-start: var(--bui-color-red);
237
+ --bui-color-primary-end: #ff4a72;
238
+ --bui-color-info-start: #51bbff;
239
+ --bui-color-info-end: var(--bui-color-blue);
240
+ --bui-color-warning-start: #ffc341;
241
+ --bui-color-warning-end: var(--bui-color-yellow);
242
+ --bui-color-success-start: var(--bui-color-green);
243
+ --bui-color-success-end: #00c474;
244
+ --bui-color-danger-start: var(--bui-color-red);
245
+ --bui-color-danger-end: #ff4a72;
246
+ /** 分割线、边框 */
247
+ --bui-color-border-primary: rgba(255, 50, 153, 0.4);
248
+ --bui-color-border-info: rgba(48, 174, 255, 0.4);
249
+ --bui-color-border-success: rgba(12, 220, 135, 0.4);
250
+ --bui-color-border-warning: rgba(255, 175, 0, 0.4);
251
+ --bui-color-border-danger: rgba(255, 50, 153, 0.4);
170
252
  }
171
253
  /** 先锋主题 */
172
254
  .bui-pioneer-light,
@@ -176,115 +258,73 @@ xhs-page,
176
258
  'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei',
177
259
  'Helvetica Neue', helvetica, arial, sans-serif;
178
260
  /** 品牌红 */
179
- --bui-color-red: #ff335c;
180
- --bui-color-red-light: #ffebef;
181
- /** 明亮粉 */
182
- --bui-color-pink: #dd10f2;
183
- --bui-color-pink-light: #fce7fe;
261
+ --bui-color-red: #ff471a;
262
+ --bui-color-red-light: #ffefe6;
263
+ --bui-color-red-dark: #b31800;
184
264
  /** 活力橙 */
185
- --bui-color-orange: #ff8533;
186
- --bui-color-orange-light: #fff0e5;
265
+ --bui-color-orange: #ff7600;
266
+ --bui-color-orange-light: #fff6e6;
267
+ --bui-color-orange-dark: #b34700;
268
+ /** 活力黄 */
269
+ --bui-color-yellow: #ffa608;
270
+ --bui-color-yellow-light: #fffae6;
271
+ --bui-color-yellow-dark: #b36500;
272
+ /** 荧光黄 */
273
+ --bui-color-lemonyellow: #fff36f;
274
+ --bui-color-lemonyellow-light: #ffffeb;
275
+ --bui-color-lemonyellow-dark: #b3a13d;
187
276
  /** 亲和绿 */
188
- --bui-color-green: #00d68f;
189
- --bui-color-green-light: #dcf9f0;
277
+ --bui-color-green: #40bf00;
278
+ --bui-color-green-light: #f2ffe6;
279
+ --bui-color-green-dark: #1f7300;
190
280
  /** 神秘紫 */
191
- --bui-color-purple: #8b52ff;
192
- --bui-color-purple-light: #f2ebff;
281
+ --bui-color-purple: #754dff;
282
+ --bui-color-purple-light: #f6f0ff;
283
+ --bui-color-purple-dark: #3924b3;
193
284
  /** 宁静蓝 */
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;
285
+ --bui-color-blue: #229af0;
286
+ --bui-color-blue-light: #f0fbff;
287
+ --bui-color-blue-dark: #0757a3;
288
+ /** 智能蓝 */
289
+ --bui-color-aiblue: #5cfffa;
290
+ --bui-color-aiblue-light: #f0fffc;
291
+ --bui-color-aiblue-dark: #1d858c;
215
292
  /** 主题 */
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);
293
+ --bui-color-primary: var(--bui-color-orange);
294
+ --bui-color-primary-light: var(--bui-color-orange-light);
295
+ --bui-color-primary-dark: var(--bui-color-orange-dark);
296
+ /** 语义化字号 */
297
+ --bui-title-size-4: var(--bui-font-size-md1);
298
+ --bui-color-fg-disabled: rgba(3, 11, 26, 0.5);
299
+ /** 分割线、边框 */
254
300
  --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;
301
+ --bui-color-border-info: rgba(34, 154, 240, 0.4);
302
+ --bui-color-border-success: rgba(64, 191, 0, 0.4);
303
+ --bui-color-border-warning: rgba(255, 118, 0, 0.4);
304
+ --bui-color-border-danger: rgba(255, 71, 26, 0.4);
305
+ /** 主题色渐变 */
306
+ --bui-color-primary-start: #ffb300;
307
+ --bui-color-primary-end: var(--bui-color-primary);
308
+ --bui-color-info-start: #5bc8ff;
309
+ --bui-color-info-end: var(--bui-color-info);
310
+ --bui-color-warning-start: #fc3;
311
+ --bui-color-warning-end: var(--bui-color-warning);
312
+ --bui-color-success-start: #66d933;
313
+ --bui-color-success-end: var(--bui-color-success);
314
+ --bui-color-danger-start: #ff7633;
315
+ --bui-color-danger-end: var(--bui-color-danger);
316
+ /** 形状定义 */
317
+ --bui-shape-radius-drawer: var(--bui-radius-6);
318
+ --bui-shape-radius-card: var(--bui-radius-5);
319
+ --bui-shape-radius-default: var(--bui-radius-4);
280
320
  }
281
321
  .bui-pioneer-light .bui-btn,
282
322
  [data-color-mode][data-theme='pioneer'] .bui-btn {
283
323
  --bui-button-border-radius: 14px;
284
- --bui-button-outlined-default-border: 1px solid #171717;
324
+ --bui-button-outlined-default-border: 1px solid var(--bui-color-neutral-1);
285
325
  --bui-button-text-color: var(--bui-color-fg-default);
286
326
  --bui-button-font-weight: 700;
287
- --bui-button-default-bg-color: #171717;
327
+ --bui-button-default-bg-color: var(--bui-color-neutral-1);
288
328
  --bui-button-full-height: 45px;
289
329
  }
290
330
  .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large,
@@ -299,7 +339,7 @@ xhs-page,
299
339
  [data-color-mode][data-theme='pioneer'] .bui-btn-full {
300
340
  --bui-btn-border-radius: 14px;
301
341
  --bui-btn-height: 45px;
302
- --bui-btn-font-size: 18px;
342
+ --bui-btn-font-size: var(--bui-font-size-md4);
303
343
  --bui-btn-font-family: var(--bui-font-family-accent);
304
344
  }
305
345
  .bui-pioneer-light .bui-btn-large,
@@ -309,16 +349,16 @@ xhs-page,
309
349
  }
310
350
  .bui-pioneer-light .bui-btn-medium,
311
351
  [data-color-mode][data-theme='pioneer'] .bui-btn-medium {
312
- --bui-btn-border-radius: 6px;
352
+ --bui-btn-border-radius: var(--bui-spacing-radius-3);
313
353
  }
314
354
  .bui-pioneer-light .bui-btn-small,
315
355
  [data-color-mode][data-theme='pioneer'] .bui-btn-small {
316
- --bui-btn-border-radius: 6px;
356
+ --bui-btn-border-radius: var(--bui-spacing-radius-3);
317
357
  }
318
358
  .bui-pioneer-light .bui-tabs,
319
359
  [data-color-mode][data-theme='pioneer'] .bui-tabs {
320
360
  --bui-tabs-font-size: var(--bui-title-size-4);
321
- --bui-tabs-active-font-weight: 700;
361
+ --bui-tabs-active-font-weight: var(--bui-font-weight-bold);
322
362
  --bui-tabs-color: var(--bui-color-fg-muted);
323
363
  /* prettier-ignore */
324
364
  --bui-tabs-indicator-height: 4PX;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/styles",
3
- "version": "2.0.0-beta.10",
3
+ "version": "2.0.0-beta.11",
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,5 +1,5 @@
1
1
  .light() {
2
- // 字体
2
+ /** 字体 */
3
3
  --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
4
4
  'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
5
5
  sans-serif;
@@ -16,6 +16,10 @@
16
16
  --bui-color-orange: #ff8533;
17
17
  --bui-color-orange-light: #fff0e5;
18
18
 
19
+ /** 活力黄 */
20
+ --bui-color-yellow: #ff8533;
21
+ --bui-color-yellow-light: #fff0e5;
22
+
19
23
  /** 亲和绿 */
20
24
  --bui-color-green: #00d68f;
21
25
  --bui-color-green-light: #dcf9f0;
@@ -30,25 +34,30 @@
30
34
 
31
35
  /** 中性灰 */
32
36
  --bui-color-gray: #8896b1;
33
- --bui-color-gray-light: #f3f5f8;
37
+ --bui-color-gray-light: #f7f9fc;
34
38
  --bui-color-black: #000;
35
39
  --bui-color-white: #fff;
36
40
  --bui-color-vip: #ff866e;
41
+ --bui-color-vip1: #fec9a3;
42
+ --bui-color-vip2: #f44a8b;
43
+ --bui-color-vip3: #c46e31;
44
+ --bui-color-vip4: #fccfe0;
37
45
 
38
46
  /** 中性色 */
39
47
  --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;
48
+ --bui-color-neutral-1: #030b1a;
49
+ --bui-color-neutral-2: #444b5b;
50
+ --bui-color-neutral-3: #8b93a5;
51
+ --bui-color-neutral-4: #bfc4cf;
44
52
  --bui-color-neutral-5: #e9ebef;
45
- --bui-color-neutral-6: #f5f6f8;
53
+ --bui-color-neutral-6: #f7f9fc;
46
54
  --bui-color-neutral-7: var(--bui-color-white);
47
55
 
48
56
  /** 字重 */
49
57
  --bui-font-weight-normal: 400;
50
58
  --bui-font-weight-medium: 500;
51
- --bui-font-weight-bold: 600;
59
+ --bui-font-weight-semibold: 600;
60
+ --bui-font-weight-bold: 700;
52
61
 
53
62
  /** 语义色 */
54
63
  --bui-color-primary: var(--bui-color-red);
@@ -62,18 +71,34 @@
62
71
  --bui-color-danger: var(--bui-color-red);
63
72
  --bui-color-danger-light: var(--bui-color-red-light);
64
73
 
65
- /** 字号 */
74
+ /** 基础字号 */
75
+ --bui-font-size-xs1: 8px;
76
+ --bui-font-size-xs2: 9px;
77
+ --bui-font-size-sm1: 10px;
78
+ --bui-font-size-sm2: 11px;
79
+ --bui-font-size-sm3: 12px;
80
+ --bui-font-size-sm4: 13px;
81
+ --bui-font-size-md1: 14px;
82
+ --bui-font-size-md2: 15px;
83
+ --bui-font-size-md3: 16px;
84
+ --bui-font-size-md4: 18px;
85
+ --bui-font-size-lg1: 20px;
86
+ --bui-font-size-lg2: 22px;
87
+ --bui-font-size-lg3: 24px;
88
+ --bui-font-size-lg4: 26px;
89
+
90
+ /** 语义化字号 */
66
91
  --bui-title-size-1: 21px;
67
- --bui-title-size-2: 18px;
68
- --bui-title-size-3: 16px;
69
- --bui-title-size-4: 15px;
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
- // 前景色，通常用于文字
92
+ --bui-title-size-2: var(--bui-font-size-md4);
93
+ --bui-title-size-3: var(--bui-font-size-md3);
94
+ --bui-title-size-4: var(--bui-font-size-md2);
95
+ --bui-text-size-1: var(--bui-font-size-md1);
96
+ --bui-text-size-2: var(--bui-font-size-sm4);
97
+ --bui-text-size-3: var(--bui-font-size-sm3);
98
+ --bui-text-size-4: var(--bui-font-size-sm2);
99
+ --bui-text-size-5: var(--bui-font-size-sm1);
100
+
101
+ /** 前景色，通常用于文字 */
77
102
  // default是最通用的色彩，比如标题和一级信息
78
103
  --bui-color-fg-default: var(--bui-color-neutral-1);
79
104
  // 柔和色，通常用于次级及补充说明信息
@@ -83,9 +108,8 @@
83
108
  // 用于失效、不可用等状态
84
109
  --bui-color-fg-disabled: var(--bui-color-neutral-4);
85
110
 
86
- // 背景色
111
+ /** 背景色，通常用于视图 */
87
112
  --bui-color-bg-default: var(--bui-color-neutral-6);
88
- // 视图背景色
89
113
  --bui-color-bg-view: var(--bui-color-neutral-7);
90
114
  --bui-color-bg-popover: var(--bui-color-neutral-7);
91
115
  --bui-color-bg-alpha-light-9: fade(#fff, 90%);
@@ -99,7 +123,7 @@
99
123
  --bui-color-bg-alpha-dark-3: fade(#000, 30%);
100
124
  --bui-color-bg-alpha-dark-1: fade(#000, 10%);
101
125
 
102
- // 分割线、边框
126
+ /** 分割线、边框 */
103
127
  --bui-color-border-default: var(--bui-color-neutral-5);
104
128
  --bui-color-border-primary: fade(#ff335c, 40%);
105
129
  --bui-color-border-info: fade(#148aff, 40%);
@@ -108,7 +132,7 @@
108
132
  --bui-color-border-danger: fade(#ff335c, 40%);
109
133
  --bui-color-border-gray: fade(#8896b1, 40%);
110
134
 
111
- // 主题色渐变
135
+ /** 主题色渐变 */
112
136
  --bui-color-primary-start: #ef16b9;
113
137
  --bui-color-primary-end: var(--bui-color-red);
114
138
  --bui-color-secondary-start: #f32adf;
@@ -124,26 +148,54 @@
124
148
  --bui-color-vip-start: #ffd4a6;
125
149
  --bui-color-vip-end: #ffbeae;
126
150
 
127
- // 形状定义
151
+ /* 基础圆角 */
152
+ --bui-radius-circular: 10000px;
153
+ --bui-radius-8: 24px;
154
+ --bui-radius-7: 18px;
155
+ --bui-radius-6: 15px;
156
+ --bui-radius-5: 12px;
157
+ --bui-radius-4: 9px;
158
+ --bui-radius-3: 6px;
159
+ --bui-radius-2: 4px;
160
+ --bui-radius-1: 3px;
161
+ --bui-radius-none: 0px;
162
+
163
+ /* 形状定义 */
128
164
  // 页面级浮层
129
- --bui-shape-radius-popover: 18px;
130
- --bui-shape-radius-drawer: 12px;
165
+ --bui-shape-radius-popover: var(--bui-radius-7);
166
+ --bui-shape-radius-drawer: var(--bui-radius-5);
131
167
  // 卡片、普通视图、抽屉、action sheet，常用于信息密度较低的视图
132
- --bui-shape-radius-card: 9px;
168
+ --bui-shape-radius-card: var(--bui-radius-4);
133
169
  // 独立海报、卡片，常用于信息密度较高的视图
134
- --bui-shape-radius-default: 6px;
170
+ --bui-shape-radius-default: var(--bui-radius-3);
135
171
  // 容器内海报
136
- --bui-shape-radius-poster: 4px;
172
+ --bui-shape-radius-poster: var(--bui-radius-2);
137
173
  // 标签
138
- --bui-shape-radius-label: 3px;
139
-
140
- // 空间定义
141
- --bui-spacing-xl: 15px;
142
- --bui-spacing-lg: 12px;
143
- --bui-spacing-md: 9px;
144
- --bui-spacing-sm: 6px;
145
- --bui-spacing-xs: 4px;
174
+ --bui-shape-radius-label: var(--bui-radius-1);
175
+
176
+ /* 基础间距 */
177
+ --bui-spacing-1: 1px;
178
+ --bui-spacing-2: 2px;
179
+ --bui-spacing-3: 3px;
180
+ --bui-spacing-4: 4px;
181
+ --bui-spacing-5: 6px;
182
+ --bui-spacing-6: 9px;
183
+ --bui-spacing-7: 12px;
184
+ --bui-spacing-8: 15px;
185
+ --bui-spacing-9: 18px;
186
+ --bui-spacing-10: 24px;
187
+
188
+ /** 语义化间距 */
189
+ --bui-spacing-xl: var(--bui-spacing-8);
190
+ --bui-spacing-lg: var(--bui-spacing-7);
191
+ --bui-spacing-md: var(--bui-spacing-6);
192
+ --bui-spacing-sm: var(--bui-spacing-5);
193
+ --bui-spacing-xs: var(--bui-spacing-4);
194
+
195
+ // 行高
146
196
  --bui-line-height: 1.5;
197
+
198
+ /** 层级 */
147
199
  --bui-z-index-dropdown: 1000; // dropdown 、cascader、DatePicker、select、TimePicker、treeSelect
148
200
  --bui-z-index-affix: 1100; // 吸顶元素、固定元素fixed
149
201
  --bui-z-index-modal-backdrop: 1200;
package/theme/dm-light.less CHANGED
@@ -1,18 +1,55 @@
1
1
  .dm-light() {
2
- --bui-color-blue: #48b1f1;
3
- --bui-color-orange: #ff8f3f;
4
- --bui-color-gray: #f5f5f5;
5
- --bui-color-pink: #ff8e92;
6
- --bui-color-neutral-2: #4d4d56;
7
- --bui-color-neutral-3: #9c9ca5;
8
- --bui-color-neutral-5: #f1f1f1;
9
- --bui-color-bg-default: #f4f5f6;
10
- --bui-color-powder-start: #ff72a2;
11
- --bui-color-powder-end: #ff7070;
12
- --bui-title-size-2: 20px;
13
- --bui-title-size-3: 18px;
14
- --bui-color-red: #ff4886;
15
- --bui-color-fg-default: #2e333e;
16
- --bui-color-fg-muted: #2e333e;
17
- --bui-shape-radius-label: 4px;
2
+ /** 淘麦红 */
3
+ --bui-color-red: #ff3299;
4
+ --bui-color-red-light: #ffeaf5;
5
+ --bui-color-red-dark: #e62d8a;
6
+
7
+ /** 活力黄 */
8
+ --bui-color-yellow: #ffaf00;
9
+ --bui-color-yellow-light: #fff7e5;
10
+ --bui-color-yellow-dark: #e59d00;
11
+
12
+ /** 荧光黄 */
13
+ --bui-color-lemonyellow: #fff36f;
14
+ --bui-color-lemonyellow-light: #ffffeb;
15
+ --bui-color-lemonyellow-dark: #b3a13d;
16
+
17
+ /** 亲和绿 */
18
+ --bui-color-green: #0cdc87;
19
+ --bui-color-green-light: #e6fbf3;
20
+ --bui-color-green-dark: #0bc679;
21
+
22
+ /** 神秘紫 */
23
+ --bui-color-purple: #754dff;
24
+ --bui-color-purple-light: #f6f0ff;
25
+ --bui-color-purple-dark: #3924b3;
26
+
27
+ /** 宁静蓝 */
28
+ --bui-color-blue: #30aeff;
29
+ --bui-color-blue-light: #eaf7ff;
30
+ --bui-color-blue-dark: #2b9ce5;
31
+
32
+ /** 智能蓝 */
33
+ --bui-color-aiblue: #5cfffa;
34
+ --bui-color-aiblue-light: #f0fffc;
35
+ --bui-color-aiblue-dark: #1d858c;
36
+
37
+ /** 主题色渐变 */
38
+ --bui-color-primary-start: var(--bui-color-red);
39
+ --bui-color-primary-end: #ff4a72;
40
+ --bui-color-info-start: #51bbff;
41
+ --bui-color-info-end: var(--bui-color-blue);
42
+ --bui-color-warning-start: #ffc341;
43
+ --bui-color-warning-end: var(--bui-color-yellow);
44
+ --bui-color-success-start: var(--bui-color-green);
45
+ --bui-color-success-end: #00c474;
46
+ --bui-color-danger-start: var(--bui-color-red);
47
+ --bui-color-danger-end: #ff4a72;
48
+
49
+ /** 分割线、边框 */
50
+ --bui-color-border-primary: fade(#ff3299, 40%);
51
+ --bui-color-border-info: fade(#30aeff, 40%);
52
+ --bui-color-border-success: fade(#0cdc87, 40%);
53
+ --bui-color-border-warning: fade(#ffaf00, 40%);
54
+ --bui-color-border-danger: fade(#ff3299, 40%);
18
55
  }
package/theme/pioneer-light.less CHANGED
@@ -5,144 +5,88 @@
5
5
  'Helvetica Neue', helvetica, arial, sans-serif;
6
6
 
7
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;
8
+ --bui-color-red: #ff471a;
9
+ --bui-color-red-light: #ffefe6;
10
+ --bui-color-red-dark: #b31800;
14
11
 
15
12
  /** 活力橙 */
16
- --bui-color-orange: #ff8533;
17
- --bui-color-orange-light: #fff0e5;
13
+ --bui-color-orange: #ff7600;
14
+ --bui-color-orange-light: #fff6e6;
15
+ --bui-color-orange-dark: #b34700;
16
+
17
+ /** 活力黄 */
18
+ --bui-color-yellow: #ffa608;
19
+ --bui-color-yellow-light: #fffae6;
20
+ --bui-color-yellow-dark: #b36500;
21
+
22
+ /** 荧光黄 */
23
+ --bui-color-lemonyellow: #fff36f;
24
+ --bui-color-lemonyellow-light: #ffffeb;
25
+ --bui-color-lemonyellow-dark: #b3a13d;
18
26
 
19
27
  /** 亲和绿 */
20
- --bui-color-green: #00d68f;
21
- --bui-color-green-light: #dcf9f0;
28
+ --bui-color-green: #40bf00;
29
+ --bui-color-green-light: #f2ffe6;
30
+ --bui-color-green-dark: #1f7300;
22
31
 
23
32
  /** 神秘紫 */
24
- --bui-color-purple: #8b52ff;
25
- --bui-color-purple-light: #f2ebff;
33
+ --bui-color-purple: #754dff;
34
+ --bui-color-purple-light: #f6f0ff;
35
+ --bui-color-purple-dark: #3924b3;
26
36
 
27
37
  /** 宁静蓝 */
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;
38
+ --bui-color-blue: #229af0;
39
+ --bui-color-blue-light: #f0fbff;
40
+ --bui-color-blue-dark: #0757a3;
41
+
42
+ /** 智能蓝 */
43
+ --bui-color-aiblue: #5cfffa;
44
+ --bui-color-aiblue-light: #f0fffc;
45
+ --bui-color-aiblue-dark: #1d858c;
52
46
 
53
47
  /** 主题 */
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);
48
+ --bui-color-primary: var(--bui-color-orange);
49
+ --bui-color-primary-light: var(--bui-color-orange-light);
50
+ --bui-color-primary-dark: var(--bui-color-orange-dark);
51
+
52
+ /** 语义化字号 */
53
+ --bui-title-size-4: var(--bui-font-size-md1);
54
+
83
55
  // 用于失效、不可用等状态
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);
56
+ --bui-color-fg-disabled: fade(#030b1a, 50%);
57
+
58
+ /** 分割线、边框 */
104
59
  --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;
60
+ --bui-color-border-info: fade(#229af0, 40%);
61
+ --bui-color-border-success: fade(#40bf00, 40%);
62
+ --bui-color-border-warning: fade(#ff7600, 40%);
63
+ --bui-color-border-danger: fade(#ff471a, 40%);
64
+
65
+ /** 主题色渐变 */
66
+ --bui-color-primary-start: #ffb300;
67
+ --bui-color-primary-end: var(--bui-color-primary);
68
+ --bui-color-info-start: #5bc8ff;
69
+ --bui-color-info-end: var(--bui-color-info);
70
+ --bui-color-warning-start: #fc3;
71
+ --bui-color-warning-end: var(--bui-color-warning);
72
+ --bui-color-success-start: #66d933;
73
+ --bui-color-success-end: var(--bui-color-success);
74
+ --bui-color-danger-start: #ff7633;
75
+ --bui-color-danger-end: var(--bui-color-danger);
76
+
77
+ /** 形状定义 */
78
+ --bui-shape-radius-drawer: var(--bui-radius-6);
131
79
  // 卡片、普通视图、抽屉、action sheet，常用于信息密度较低的视图
132
- --bui-shape-radius-card: 12px;
80
+ --bui-shape-radius-card: var(--bui-radius-5);
133
81
  // 独立海报、卡片，常用于信息密度较高的视图
134
- --bui-shape-radius-default: 9px;
135
- // 容器内海报
136
- --bui-shape-radius-poster: 4px;
137
- // 标签
138
- --bui-shape-radius-label: 3px;
82
+ --bui-shape-radius-default: var(--bui-radius-4);
139
83
 
140
84
  .bui-btn {
141
85
  --bui-button-border-radius: 14px;
142
- --bui-button-outlined-default-border: 1px solid #171717;
86
+ --bui-button-outlined-default-border: 1px solid var(--bui-color-neutral-1);
143
87
  --bui-button-text-color: var(--bui-color-fg-default);
144
88
  --bui-button-font-weight: 700;
145
- --bui-button-default-bg-color: #171717;
89
+ --bui-button-default-bg-color: var(--bui-color-neutral-1);
146
90
  --bui-button-full-height: 45px;
147
91
 
148
92
  &.bui-btn-contained {
@@ -181,7 +125,7 @@
181
125
  .bui-btn-full {
182
126
  --bui-btn-border-radius: 14px;
183
127
  --bui-btn-height: 45px;
184
- --bui-btn-font-size: 18px;
128
+ --bui-btn-font-size: var(--bui-font-size-md4);
185
129
  --bui-btn-font-family: var(--bui-font-family-accent);
186
130
  }
187
131
 
@@ -191,16 +135,16 @@
191
135
  }
192
136
 
193
137
  .bui-btn-medium {
194
- --bui-btn-border-radius: 6px;
138
+ --bui-btn-border-radius: var(--bui-spacing-radius-3);
195
139
  }
196
140
 
197
141
  .bui-btn-small {
198
- --bui-btn-border-radius: 6px;
142
+ --bui-btn-border-radius: var(--bui-spacing-radius-3);
199
143
  }
200
144
 
201
145
  .bui-tabs {
202
146
  --bui-tabs-font-size: var(--bui-title-size-4);
203
- --bui-tabs-active-font-weight: 700;
147
+ --bui-tabs-active-font-weight: var(--bui-font-weight-bold);
204
148
  --bui-tabs-color: var(--bui-color-fg-muted);
205
149
 
206
150
  /* prettier-ignore */