@bifrostui/styles 2.0.0-alpha.0 → 2.0.0-alpha.10

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.
package/dist/index.css CHANGED
@@ -4,33 +4,22 @@
4
4
  /** 此文件由脚本自动生成,请勿直接修改,若有变更请维护bui-styles/registry/*.mjs,再执行`pnpm theme:js2less`更新主题 */
5
5
  /** 此文件由脚本自动生成,请勿直接修改,若有变更请维护bui-styles/registry/*.mjs,再执行`pnpm theme:js2less`更新主题 */
6
6
  /** 此文件由脚本自动生成,请勿直接修改,若有变更请维护bui-styles/registry/*.mjs,再执行`pnpm theme:js2less`更新主题 */
7
- .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large,
8
- [data-color-mode][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-large {
9
- background-image: radial-gradient(35px 25px ellipse at 2% 110%, #fffe1e 0%, rgba(251, 134, 35, 0) 99%), radial-gradient(35px 25px ellipse at 110% 120%, #ff3018 0%, rgba(0, 48, 24, 0) 92%), linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
10
- }
11
- .bui-pioneer-light .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full,
12
- [data-color-mode][data-theme='pioneer'] .bui-btn.bui-btn-contained.bui-btn-primary.bui-btn-full {
13
- background-image: radial-gradient(93px 50px ellipse at 2% 110%, #fffe1e 0%, rgba(251, 134, 35, 0) 100%), radial-gradient(93px 50px ellipse at 98% 110%, #ff3018 0%, rgba(0, 48, 24, 0) 92%), linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
14
- }
15
- .bui-pioneer-light .bui-tabs .bui-tabs-indicator,
16
- [data-color-mode][data-theme='pioneer'] .bui-tabs .bui-tabs-indicator {
17
- background-image: linear-gradient(90deg, #ff9b00 0%, #ffa700 21%, #ff8300 100%);
18
- }
19
7
  /* 经典 */
20
8
  :root,
21
9
  page,
22
10
  xhs-page,
23
11
  .bui-default-light,
24
12
  [data-color-mode='light'][data-theme] {
25
- --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
26
- 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
27
- sans-serif;
13
+ --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB',
14
+ 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif;
28
15
  --bui-color-red: #ff335c;
29
16
  --bui-color-red-light: #ffebef;
30
17
  --bui-color-pink: #dd10f2;
31
18
  --bui-color-pink-light: #fce7fe;
32
19
  --bui-color-orange: #ff8533;
33
20
  --bui-color-orange-light: #fff0e5;
21
+ --bui-color-yellow: #ff8533;
22
+ --bui-color-yellow-light: #fff0e5;
34
23
  --bui-color-green: #00d68f;
35
24
  --bui-color-green-light: #dcf9f0;
36
25
  --bui-color-purple: #8b52ff;
@@ -38,21 +27,26 @@ xhs-page,
38
27
  --bui-color-blue: #148aff;
39
28
  --bui-color-blue-light: #e1f0ff;
40
29
  --bui-color-gray: #8896b1;
41
- --bui-color-gray-light: #f3f5f8;
30
+ --bui-color-gray-light: #f7f9fc;
42
31
  --bui-color-black: #000;
43
32
  --bui-color-white: #fff;
44
33
  --bui-color-vip: #ff866e;
34
+ --bui-color-vip1: #fec9a3;
35
+ --bui-color-vip2: #f44a8b;
36
+ --bui-color-vip3: #c46e31;
37
+ --bui-color-vip4: #fccfe0;
45
38
  --bui-color-neutral-0: var(--bui-color-black);
46
- --bui-color-neutral-1: #2e333e;
47
- --bui-color-neutral-2: #5f6672;
48
- --bui-color-neutral-3: #959aa5;
49
- --bui-color-neutral-4: #ced1d6;
39
+ --bui-color-neutral-1: #030b1a;
40
+ --bui-color-neutral-2: #444b5b;
41
+ --bui-color-neutral-3: #8b93a5;
42
+ --bui-color-neutral-4: #bfc4cf;
50
43
  --bui-color-neutral-5: #e9ebef;
51
- --bui-color-neutral-6: #f5f6f8;
44
+ --bui-color-neutral-6: #f7f9fc;
52
45
  --bui-color-neutral-7: var(--bui-color-white);
53
46
  --bui-font-weight-normal: 400;
54
47
  --bui-font-weight-medium: 500;
55
- --bui-font-weight-bold: 600;
48
+ --bui-font-weight-semibold: 600;
49
+ --bui-font-weight-bold: 700;
56
50
  --bui-color-primary: var(--bui-color-red);
57
51
  --bui-color-primary-light: var(--bui-color-red-light);
58
52
  --bui-color-info: var(--bui-color-blue);
@@ -63,15 +57,29 @@ xhs-page,
63
57
  --bui-color-warning-light: var(--bui-color-orange-light);
64
58
  --bui-color-danger: var(--bui-color-red);
65
59
  --bui-color-danger-light: var(--bui-color-red-light);
60
+ --bui-font-size-xs1: 8px;
61
+ --bui-font-size-xs2: 9px;
62
+ --bui-font-size-sm1: 10px;
63
+ --bui-font-size-sm2: 11px;
64
+ --bui-font-size-sm3: 12px;
65
+ --bui-font-size-sm4: 13px;
66
+ --bui-font-size-md1: 14px;
67
+ --bui-font-size-md2: 15px;
68
+ --bui-font-size-md3: 16px;
69
+ --bui-font-size-md4: 18px;
70
+ --bui-font-size-lg1: 20px;
71
+ --bui-font-size-lg2: 22px;
72
+ --bui-font-size-lg3: 24px;
73
+ --bui-font-size-lg4: 26px;
66
74
  --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
+ --bui-title-size-2: var(--bui-font-size-md4);
76
+ --bui-title-size-3: var(--bui-font-size-md3);
77
+ --bui-title-size-4: var(--bui-font-size-md2);
78
+ --bui-text-size-1: var(--bui-font-size-md1);
79
+ --bui-text-size-2: var(--bui-font-size-sm4);
80
+ --bui-text-size-3: var(--bui-font-size-sm3);
81
+ --bui-text-size-4: var(--bui-font-size-sm2);
82
+ --bui-text-size-5: var(--bui-font-size-sm1);
75
83
  --bui-color-fg-default: var(--bui-color-neutral-1);
76
84
  --bui-color-fg-muted: var(--bui-color-neutral-2);
77
85
  --bui-color-fg-subtle: var(--bui-color-neutral-3);
@@ -110,17 +118,37 @@ xhs-page,
110
118
  --bui-color-danger-end: var(--bui-color-red);
111
119
  --bui-color-vip-start: #ffd4a6;
112
120
  --bui-color-vip-end: #ffbeae;
113
- --bui-shape-radius-popover: 18px;
114
- --bui-shape-radius-drawer: 12px;
115
- --bui-shape-radius-card: 9px;
116
- --bui-shape-radius-default: 6px;
117
- --bui-shape-radius-poster: 4px;
118
- --bui-shape-radius-label: 3px;
119
- --bui-spacing-xl: 15px;
120
- --bui-spacing-lg: 12px;
121
- --bui-spacing-md: 9px;
122
- --bui-spacing-sm: 6px;
123
- --bui-spacing-xs: 4px;
121
+ --bui-radius-circular: 10000px;
122
+ --bui-radius-8: 24px;
123
+ --bui-radius-7: 18px;
124
+ --bui-radius-6: 15px;
125
+ --bui-radius-5: 12px;
126
+ --bui-radius-4: 9px;
127
+ --bui-radius-3: 6px;
128
+ --bui-radius-2: 4px;
129
+ --bui-radius-1: 3px;
130
+ --bui-radius-none: 0px;
131
+ --bui-shape-radius-popover: var(--bui-radius-7);
132
+ --bui-shape-radius-drawer: var(--bui-radius-5);
133
+ --bui-shape-radius-card: var(--bui-radius-4);
134
+ --bui-shape-radius-default: var(--bui-radius-3);
135
+ --bui-shape-radius-poster: var(--bui-radius-2);
136
+ --bui-shape-radius-label: var(--bui-radius-1);
137
+ --bui-spacing-1: 1px;
138
+ --bui-spacing-2: 2px;
139
+ --bui-spacing-3: 3px;
140
+ --bui-spacing-4: 4px;
141
+ --bui-spacing-5: 6px;
142
+ --bui-spacing-6: 9px;
143
+ --bui-spacing-7: 12px;
144
+ --bui-spacing-8: 15px;
145
+ --bui-spacing-9: 18px;
146
+ --bui-spacing-10: 24px;
147
+ --bui-spacing-xl: var(--bui-spacing-8);
148
+ --bui-spacing-lg: var(--bui-spacing-7);
149
+ --bui-spacing-md: var(--bui-spacing-6);
150
+ --bui-spacing-sm: var(--bui-spacing-5);
151
+ --bui-spacing-xs: var(--bui-spacing-4);
124
152
  --bui-line-height: 1.5;
125
153
  --bui-z-index-dropdown: 1000;
126
154
  --bui-z-index-affix: 1100;
@@ -133,52 +161,109 @@ xhs-page,
133
161
  /** 大麦主题-高亮 */
134
162
  .bui-dm-light,
135
163
  [data-color-mode][data-theme='dm'] {
136
- --bui-color-blue: #48b1f1;
137
- --bui-color-orange: #ff8f3f;
138
- --bui-color-gray: #f5f5f5;
139
- --bui-color-pink: #ff8e92;
140
- --bui-color-neutral-2: #4d4d56;
141
- --bui-color-neutral-3: #9c9ca5;
142
- --bui-color-neutral-5: #f1f1f1;
143
- --bui-color-bg-default: #f4f5f6;
144
- --bui-color-powder-start: #ff72a2;
145
- --bui-color-powder-end: #ff7070;
146
- --bui-title-size-2: 20px;
147
- --bui-title-size-3: 18px;
148
- --bui-color-red: #ff4886;
149
- --bui-color-fg-default: #2e333e;
150
- --bui-color-fg-muted: #2e333e;
151
- --bui-shape-radius-label: 4px;
164
+ --bui-color-red: #ff3299;
165
+ --bui-color-red-light: #ffeaf5;
166
+ --bui-color-red-dark: #e62d8a;
167
+ --bui-color-yellow: #ffaf00;
168
+ --bui-color-yellow-light: #fff7e5;
169
+ --bui-color-yellow-dark: #e59d00;
170
+ --bui-color-lemonyellow: #fff36f;
171
+ --bui-color-lemonyellow-light: #ffffeb;
172
+ --bui-color-lemonyellow-dark: #b3a13d;
173
+ --bui-color-green: #0cdc87;
174
+ --bui-color-green-light: #e6fbf3;
175
+ --bui-color-green-dark: #0bc679;
176
+ --bui-color-purple: #754dff;
177
+ --bui-color-purple-light: #f6f0ff;
178
+ --bui-color-purple-dark: #3924b3;
179
+ --bui-color-blue: #30aeff;
180
+ --bui-color-blue-light: #eaf7ff;
181
+ --bui-color-blue-dark: #2b9ce5;
182
+ --bui-color-aiblue: #5cfffa;
183
+ --bui-color-aiblue-light: #f0fffc;
184
+ --bui-color-aiblue-dark: #00898e;
185
+ --bui-color-primary-start: var(--bui-color-red);
186
+ --bui-color-primary-end: #ff4a72;
187
+ --bui-color-info-start: #51bbff;
188
+ --bui-color-info-end: var(--bui-color-blue);
189
+ --bui-color-warning-start: #ffc341;
190
+ --bui-color-warning-end: var(--bui-color-yellow);
191
+ --bui-color-success-start: var(--bui-color-green);
192
+ --bui-color-success-end: #00c474;
193
+ --bui-color-danger-start: var(--bui-color-red);
194
+ --bui-color-danger-end: #ff4a72;
195
+ --bui-color-border-primary: rgba(255, 50, 153, 0.4);
196
+ --bui-color-border-info: rgba(48, 174, 255, 0.4);
197
+ --bui-color-border-success: rgba(12, 220, 135, 0.4);
198
+ --bui-color-border-warning: rgba(255, 175, 0, 0.4);
199
+ --bui-color-border-danger: rgba(255, 50, 153, 0.4);
152
200
  }
153
201
  /** 先锋主题 */
154
202
  .bui-pioneer-light,
155
203
  [data-color-mode][data-theme='pioneer'] {
156
- --bui-font-family-accent: 'AlibabaPuHuiTi-Heavy', 'PingFang SC',
157
- 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei',
158
- 'Helvetica Neue', helvetica, arial, sans-serif;
159
- --bui-color-primary: #ff7600;
160
- --bui-color-primary-light: #ffefe5;
161
- --bui-title-size-4: 14px;
162
- --bui-color-fg-default: #181818;
163
- --bui-color-fg-disabled: rgba(24, 24, 24, 0.5);
164
- --bui-color-border-primary: rgba(20, 138, 255, 0.4);
165
- --bui-color-primary-start: #ff9c0d;
166
- --bui-color-primary-end: #ff6813;
167
- --bui-color-info-start: #17b6ff;
168
- --bui-color-info-end: #48d3ff;
169
- --bui-color-warning-start: #ffcf02;
170
- --bui-color-warning-end: #ffb205;
171
- --bui-shape-radius-drawer: 15px;
172
- --bui-shape-radius-card: 12px;
173
- --bui-shape-radius-default: 9px;
204
+ --bui-font-family-accent: 'AlibabaPuHuiTi-Heavy', 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
205
+ 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
206
+ sans-serif;
207
+ --bui-color-red: #ff471a;
208
+ --bui-color-red-light: #ffefe6;
209
+ --bui-color-red-dark: #b31800;
210
+ --bui-color-orange: #ff5000;
211
+ --bui-color-orange-light: #ffede5;
212
+ --bui-color-orange-dark: #d93d00;
213
+ --bui-color-yellow: #ffa608;
214
+ --bui-color-yellow-light: #fffae6;
215
+ --bui-color-yellow-dark: #b36500;
216
+ --bui-color-lemonyellow: #fff36f;
217
+ --bui-color-lemonyellow-light: #ffffeb;
218
+ --bui-color-lemonyellow-dark: #b3a13d;
219
+ --bui-color-green: #40bf00;
220
+ --bui-color-green-light: #f2ffe6;
221
+ --bui-color-green-dark: #1f7300;
222
+ --bui-color-purple: #754dff;
223
+ --bui-color-purple-light: #f6f0ff;
224
+ --bui-color-purple-dark: #3924b3;
225
+ --bui-color-blue: #229af0;
226
+ --bui-color-blue-light: #f0fbff;
227
+ --bui-color-blue-dark: #0757a3;
228
+ --bui-color-aiblue: #5cfffa;
229
+ --bui-color-aiblue-light: #f0fffc;
230
+ --bui-color-aiblue-dark: #00898e;
231
+ --bui-color-primary: var(--bui-color-orange);
232
+ --bui-color-primary-light: var(--bui-color-orange-light);
233
+ --bui-color-primary-dark: var(--bui-color-orange-dark);
234
+ --bui-color-warning: var(--bui-color-yellow);
235
+ --bui-color-warning-light: var(--bui-color-yellow-light);
236
+ --bui-color-warning-dark: var(--bui-color-yellow-dark);
237
+ --bui-title-size-4: var(--bui-font-size-md1);
238
+ --bui-color-fg-disabled: rgba(3, 11, 26, 0.5);
239
+ --bui-color-border-primary: rgba(255, 80, 0, 0.4);
240
+ --bui-color-border-info: rgba(34, 154, 240, 0.4);
241
+ --bui-color-border-success: rgba(64, 191, 0, 0.4);
242
+ --bui-color-border-warning: rgba(255, 166, 8, 0.4);
243
+ --bui-color-border-danger: rgba(255, 71, 26, 0.4);
244
+ --bui-color-primary-start: #ff8500;
245
+ --bui-color-primary-end: var(--bui-color-primary);
246
+ --bui-color-info-start: #5bc8ff;
247
+ --bui-color-info-end: var(--bui-color-info);
248
+ --bui-color-warning-start: #fc3;
249
+ --bui-color-warning-end: var(--bui-color-warning);
250
+ --bui-color-success-start: #66d933;
251
+ --bui-color-success-end: var(--bui-color-success);
252
+ --bui-color-danger-start: #ff7633;
253
+ --bui-color-danger-end: var(--bui-color-danger);
254
+ --bui-shape-radius-drawer: var(--bui-radius-6);
255
+ --bui-shape-radius-card: var(--bui-radius-5);
256
+ --bui-shape-radius-default: var(--bui-radius-4);
257
+ --bui-btn-small-height: 21px;
174
258
  --bui-btn-full-height: 45px;
175
- --bui-btn-large-height: 30px;
176
- --bui-btn-full-font-size: 18px;
259
+ --bui-btn-large-height: 45px;
260
+ --bui-btn-full-font-size: var(--bui-title-size-3);
261
+ --bui-btn-large-font-size: var(--bui-title-size-3);
177
262
  --bui-btn-full-font-family: var(--bui-font-family-accent);
178
- --bui-btn-small-border-radius: 6px;
179
- --bui-btn-border-radius: 6px;
180
- --bui-btn-large-border-radius: 7px;
181
- --bui-btn-full-border-radius: 14px;
263
+ --bui-btn-small-border-radius: var(--bui-radius-3);
264
+ --bui-btn-border-radius: var(--bui-radius-4);
265
+ --bui-btn-large-border-radius: var(--bui-radius-5);
266
+ --bui-btn-full-border-radius: var(--bui-radius-5);
182
267
  --bui-card-header-title-font-size: var(--bui-title-size-3);
183
268
  --bui-tab-font-size: var(--bui-title-size-4);
184
269
  --bui-tab-color: var(--bui-color-fg-muted);
@@ -186,6 +271,7 @@ xhs-page,
186
271
  --bui-tabs-indicator-height: 4PX;
187
272
  --bui-tabs-indicator-border-radius: 2px;
188
273
  --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
274
+ --bui-tabs-indicator-bg: linear-gradient(90deg, var(--bui-color-primary-start) 0%, var(--bui-color-primary-end) 100%);
189
275
  }
190
276
  /** 暗黑模式 */
191
277
  .bui-dark,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/styles",
3
- "version": "2.0.0-alpha.0",
3
+ "version": "2.0.0-alpha.10",
4
4
  "main": "dist/index.css",
5
5
  "description": "Common style definitions for BUI React components",
6
6
  "homepage": "http://bui.taopiaopiao.com",
@@ -19,6 +19,10 @@ export const defaultLight = {
19
19
  '--bui-color-orange': '#ff8533',
20
20
  '--bui-color-orange-light': '#fff0e5',
21
21
 
22
+ /** 活力黄 */
23
+ '--bui-color-yellow': '#ff8533',
24
+ '--bui-color-yellow-light': '#fff0e5',
25
+
22
26
  /** 亲和绿 */
23
27
  '--bui-color-green': '#00d68f',
24
28
  '--bui-color-green-light': '#dcf9f0',
@@ -33,25 +37,30 @@ export const defaultLight = {
33
37
 
34
38
  /** 中性灰 */
35
39
  '--bui-color-gray': '#8896b1',
36
- '--bui-color-gray-light': '#f3f5f8',
40
+ '--bui-color-gray-light': '#f7f9fc',
37
41
  '--bui-color-black': '#000',
38
42
  '--bui-color-white': '#fff',
39
43
  '--bui-color-vip': '#ff866e',
44
+ '--bui-color-vip1': '#fec9a3',
45
+ '--bui-color-vip2': '#f44a8b',
46
+ '--bui-color-vip3': '#c46e31',
47
+ '--bui-color-vip4': '#fccfe0',
40
48
 
41
49
  /** 中性色 */
42
50
  '--bui-color-neutral-0': 'var(--bui-color-black)',
43
- '--bui-color-neutral-1': '#2e333e',
44
- '--bui-color-neutral-2': '#5f6672',
45
- '--bui-color-neutral-3': '#959aa5',
46
- '--bui-color-neutral-4': '#ced1d6',
51
+ '--bui-color-neutral-1': '#030b1a',
52
+ '--bui-color-neutral-2': '#444b5b',
53
+ '--bui-color-neutral-3': '#8b93a5',
54
+ '--bui-color-neutral-4': '#bfc4cf',
47
55
  '--bui-color-neutral-5': '#e9ebef',
48
- '--bui-color-neutral-6': '#f5f6f8',
56
+ '--bui-color-neutral-6': '#f7f9fc',
49
57
  '--bui-color-neutral-7': 'var(--bui-color-white)',
50
58
 
51
59
  /** 字重 */
52
60
  '--bui-font-weight-normal': '400',
53
61
  '--bui-font-weight-medium': '500',
54
- '--bui-font-weight-bold': '600',
62
+ '--bui-font-weight-semibold': '600',
63
+ '--bui-font-weight-bold': '700',
55
64
 
56
65
  /** 语义色 */
57
66
  '--bui-color-primary': 'var(--bui-color-red)',
@@ -65,16 +74,32 @@ export const defaultLight = {
65
74
  '--bui-color-danger': 'var(--bui-color-red)',
66
75
  '--bui-color-danger-light': 'var(--bui-color-red-light)',
67
76
 
77
+ /** 基础字号 */
78
+ '--bui-font-size-xs1': '8px',
79
+ '--bui-font-size-xs2': '9px',
80
+ '--bui-font-size-sm1': '10px',
81
+ '--bui-font-size-sm2': '11px',
82
+ '--bui-font-size-sm3': '12px',
83
+ '--bui-font-size-sm4': '13px',
84
+ '--bui-font-size-md1': '14px',
85
+ '--bui-font-size-md2': '15px',
86
+ '--bui-font-size-md3': '16px',
87
+ '--bui-font-size-md4': '18px',
88
+ '--bui-font-size-lg1': '20px',
89
+ '--bui-font-size-lg2': '22px',
90
+ '--bui-font-size-lg3': '24px',
91
+ '--bui-font-size-lg4': '26px',
92
+
68
93
  /** 语义化字号 */
69
94
  '--bui-title-size-1': '21px',
70
- '--bui-title-size-2': '18px',
71
- '--bui-title-size-3': '16px',
72
- '--bui-title-size-4': '15px',
73
- '--bui-text-size-1': '14px',
74
- '--bui-text-size-2': '13px',
75
- '--bui-text-size-3': '12px',
76
- '--bui-text-size-4': '11px',
77
- '--bui-text-size-5': '10px',
95
+ '--bui-title-size-2': 'var(--bui-font-size-md4)',
96
+ '--bui-title-size-3': 'var(--bui-font-size-md3)',
97
+ '--bui-title-size-4': 'var(--bui-font-size-md2)',
98
+ '--bui-text-size-1': 'var(--bui-font-size-md1)',
99
+ '--bui-text-size-2': 'var(--bui-font-size-sm4)',
100
+ '--bui-text-size-3': 'var(--bui-font-size-sm3)',
101
+ '--bui-text-size-4': 'var(--bui-font-size-sm2)',
102
+ '--bui-text-size-5': 'var(--bui-font-size-sm1)',
78
103
 
79
104
  // 前景色,通常用于文字
80
105
  // default是最通用的色彩,比如标题和一级信息
@@ -127,26 +152,54 @@ export const defaultLight = {
127
152
  '--bui-color-vip-start': '#ffd4a6',
128
153
  '--bui-color-vip-end': '#ffbeae',
129
154
 
155
+ /* 基础圆角 */
156
+ '--bui-radius-circular': '10000px',
157
+ '--bui-radius-8': '24px',
158
+ '--bui-radius-7': '18px',
159
+ '--bui-radius-6': '15px',
160
+ '--bui-radius-5': '12px',
161
+ '--bui-radius-4': '9px',
162
+ '--bui-radius-3': '6px',
163
+ '--bui-radius-2': '4px',
164
+ '--bui-radius-1': '3px',
165
+ '--bui-radius-none': '0px',
166
+
130
167
  // 形状定义
131
168
  // 页面级浮层
132
- '--bui-shape-radius-popover': '18px',
133
- '--bui-shape-radius-drawer': '12px',
169
+ '--bui-shape-radius-popover': 'var(--bui-radius-7)',
170
+ '--bui-shape-radius-drawer': 'var(--bui-radius-5)',
134
171
  // 卡片、普通视图、抽屉、action sheet,常用于信息密度较低的视图
135
- '--bui-shape-radius-card': '9px',
172
+ '--bui-shape-radius-card': 'var(--bui-radius-4)',
136
173
  // 独立海报、卡片,常用于信息密度较高的视图
137
- '--bui-shape-radius-default': '6px',
174
+ '--bui-shape-radius-default': 'var(--bui-radius-3)',
138
175
  // 容器内海报
139
- '--bui-shape-radius-poster': '4px',
176
+ '--bui-shape-radius-poster': 'var(--bui-radius-2)',
140
177
  // 标签
141
- '--bui-shape-radius-label': '3px',
178
+ '--bui-shape-radius-label': 'var(--bui-radius-1)',
179
+
180
+ /* 基础间距 */
181
+ '--bui-spacing-1': '1px',
182
+ '--bui-spacing-2': '2px',
183
+ '--bui-spacing-3': '3px',
184
+ '--bui-spacing-4': '4px',
185
+ '--bui-spacing-5': '6px',
186
+ '--bui-spacing-6': '9px',
187
+ '--bui-spacing-7': '12px',
188
+ '--bui-spacing-8': '15px',
189
+ '--bui-spacing-9': '18px',
190
+ '--bui-spacing-10': '24px',
142
191
 
143
192
  // 空间定义
144
- '--bui-spacing-xl': '15px',
145
- '--bui-spacing-lg': '12px',
146
- '--bui-spacing-md': '9px',
147
- '--bui-spacing-sm': '6px',
148
- '--bui-spacing-xs': '4px',
193
+ '--bui-spacing-xl': 'var(--bui-spacing-8)',
194
+ '--bui-spacing-lg': 'var(--bui-spacing-7)',
195
+ '--bui-spacing-md': 'var(--bui-spacing-6)',
196
+ '--bui-spacing-sm': 'var(--bui-spacing-5)',
197
+ '--bui-spacing-xs': 'var(--bui-spacing-4)',
198
+
199
+ // 行高
149
200
  '--bui-line-height': '1.5',
201
+
202
+ /** 层级 */
150
203
  '--bui-z-index-dropdown': '1000', // dropdown 、cascader、DatePicker、select、TimePicker、treeSelect
151
204
  '--bui-z-index-affix': '1100', // 吸顶元素、固定元素fixed
152
205
  '--bui-z-index-modal-backdrop': '1200',
@@ -155,4 +208,4 @@ export const defaultLight = {
155
208
  '--bui-z-index-tooltip': '1400',
156
209
  '--bui-z-index-toast': '1500', // 反馈提示,高于所有元素
157
210
  },
158
- };
211
+ };
@@ -3,21 +3,58 @@ export const dmLight = {
3
3
  label: 'Damai Light',
4
4
  mixinName: 'dm-light',
5
5
  cssVars: {
6
- '--bui-color-blue': '#48b1f1',
7
- '--bui-color-orange': '#ff8f3f',
8
- '--bui-color-gray': '#f5f5f5',
9
- '--bui-color-pink': '#ff8e92',
10
- '--bui-color-neutral-2': '#4d4d56',
11
- '--bui-color-neutral-3': '#9c9ca5',
12
- '--bui-color-neutral-5': '#f1f1f1',
13
- '--bui-color-bg-default': '#f4f5f6',
14
- '--bui-color-powder-start': '#ff72a2',
15
- '--bui-color-powder-end': '#ff7070',
16
- '--bui-title-size-2': '20px',
17
- '--bui-title-size-3': '18px',
18
- '--bui-color-red': '#ff4886',
19
- '--bui-color-fg-default': '#2e333e',
20
- '--bui-color-fg-muted': '#2e333e',
21
- '--bui-shape-radius-label': '4px',
6
+ /** 淘麦红 */
7
+ '--bui-color-red': '#ff3299',
8
+ '--bui-color-red-light': '#ffeaf5',
9
+ '--bui-color-red-dark': '#e62d8a',
10
+
11
+ /** 活力黄 */
12
+ '--bui-color-yellow': '#ffaf00',
13
+ '--bui-color-yellow-light': '#fff7e5',
14
+ '--bui-color-yellow-dark': '#e59d00',
15
+
16
+ /** 荧光黄 */
17
+ '--bui-color-lemonyellow': '#fff36f',
18
+ '--bui-color-lemonyellow-light': '#ffffeb',
19
+ '--bui-color-lemonyellow-dark': '#b3a13d',
20
+
21
+ /** 亲和绿 */
22
+ '--bui-color-green': '#0cdc87',
23
+ '--bui-color-green-light': '#e6fbf3',
24
+ '--bui-color-green-dark': '#0bc679',
25
+
26
+ /** 神秘紫 */
27
+ '--bui-color-purple': '#754dff',
28
+ '--bui-color-purple-light': '#f6f0ff',
29
+ '--bui-color-purple-dark': '#3924b3',
30
+
31
+ /** 宁静蓝 */
32
+ '--bui-color-blue': '#30aeff',
33
+ '--bui-color-blue-light': '#eaf7ff',
34
+ '--bui-color-blue-dark': '#2b9ce5',
35
+
36
+ /** 智能蓝 */
37
+ '--bui-color-aiblue': '#5cfffa',
38
+ '--bui-color-aiblue-light': '#f0fffc',
39
+ '--bui-color-aiblue-dark': '#00898e',
40
+
41
+ /** 主题色渐变 */
42
+ '--bui-color-primary-start': 'var(--bui-color-red)',
43
+ '--bui-color-primary-end': '#ff4a72',
44
+ '--bui-color-info-start': '#51bbff',
45
+ '--bui-color-info-end': 'var(--bui-color-blue)',
46
+ '--bui-color-warning-start': '#ffc341',
47
+ '--bui-color-warning-end': 'var(--bui-color-yellow)',
48
+ '--bui-color-success-start': 'var(--bui-color-green)',
49
+ '--bui-color-success-end': '#00c474',
50
+ '--bui-color-danger-start': 'var(--bui-color-red)',
51
+ '--bui-color-danger-end': '#ff4a72',
52
+
53
+ /** 分割线、边框 */
54
+ '--bui-color-border-primary': 'rgba(255, 50, 153, 0.4)',
55
+ '--bui-color-border-info': 'rgba(48, 174, 255, 0.4)',
56
+ '--bui-color-border-success': 'rgba(12, 220, 135, 0.4)',
57
+ '--bui-color-border-warning': 'rgba(255, 175, 0, 0.4)',
58
+ '--bui-color-border-danger': 'rgba(255, 50, 153, 0.4)',
22
59
  },
23
60
  };
@@ -7,46 +7,99 @@ export const pioneerLight = {
7
7
  '--bui-font-family-accent':
8
8
  "'AlibabaPuHuiTi-Heavy', 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif",
9
9
 
10
- /** 语义色 */
11
- '--bui-color-primary': '#ff7600',
12
- '--bui-color-primary-light': '#ffefe5',
10
+ /** 品牌红 */
11
+ '--bui-color-red': '#ff471a',
12
+ '--bui-color-red-light': '#ffefe6',
13
+ '--bui-color-red-dark': '#b31800',
14
+
15
+ /** 活力橙 */
16
+ '--bui-color-orange': '#ff5000',
17
+ '--bui-color-orange-light': '#ffede5',
18
+ '--bui-color-orange-dark': '#d93d00',
19
+
20
+ /** 活力黄 */
21
+ '--bui-color-yellow': '#ffa608',
22
+ '--bui-color-yellow-light': '#fffae6',
23
+ '--bui-color-yellow-dark': '#b36500',
24
+
25
+ /** 荧光黄 */
26
+ '--bui-color-lemonyellow': '#fff36f',
27
+ '--bui-color-lemonyellow-light': '#ffffeb',
28
+ '--bui-color-lemonyellow-dark': '#b3a13d',
29
+
30
+ /** 亲和绿 */
31
+ '--bui-color-green': '#40bf00',
32
+ '--bui-color-green-light': '#f2ffe6',
33
+ '--bui-color-green-dark': '#1f7300',
34
+
35
+ /** 神秘紫 */
36
+ '--bui-color-purple': '#754dff',
37
+ '--bui-color-purple-light': '#f6f0ff',
38
+ '--bui-color-purple-dark': '#3924b3',
39
+
40
+ /** 宁静蓝 */
41
+ '--bui-color-blue': '#229af0',
42
+ '--bui-color-blue-light': '#f0fbff',
43
+ '--bui-color-blue-dark': '#0757a3',
44
+
45
+ /** 智能蓝 */
46
+ '--bui-color-aiblue': '#5cfffa',
47
+ '--bui-color-aiblue-light': '#f0fffc',
48
+ '--bui-color-aiblue-dark': '#00898e',
49
+
50
+ /** 主题 */
51
+ '--bui-color-primary': 'var(--bui-color-orange)',
52
+ '--bui-color-primary-light': 'var(--bui-color-orange-light)',
53
+ '--bui-color-primary-dark': 'var(--bui-color-orange-dark)',
54
+
55
+ /** 警告 */
56
+ '--bui-color-warning': 'var(--bui-color-yellow)',
57
+ '--bui-color-warning-light': 'var(--bui-color-yellow-light)',
58
+ '--bui-color-warning-dark': 'var(--bui-color-yellow-dark)',
13
59
 
14
60
  /** 语义化字号 */
15
- '--bui-title-size-4': '14px',
61
+ '--bui-title-size-4': 'var(--bui-font-size-md1)',
16
62
 
17
- // 前景色,通常用于文字
18
- // default是最通用的色彩,比如标题和一级信息
19
- '--bui-color-fg-default': '#181818',
20
63
  // 用于失效、不可用等状态
21
- '--bui-color-fg-disabled': 'rgba(24, 24, 24, 0.5)',
64
+ '--bui-color-fg-disabled': 'rgba(3, 11, 26, 0.5)',
22
65
 
23
- // 分割线、边框
24
- '--bui-color-border-primary': 'rgba(20, 138, 255, 0.4)',
66
+ /** 分割线、边框 */
67
+ '--bui-color-border-primary': 'rgba(255, 80, 0, 0.4)',
68
+ '--bui-color-border-info': 'rgba(34, 154, 240, 0.4)',
69
+ '--bui-color-border-success': 'rgba(64, 191, 0, 0.4)',
70
+ '--bui-color-border-warning': 'rgba(255, 166, 8, 0.4)',
71
+ '--bui-color-border-danger': 'rgba(255, 71, 26, 0.4)',
25
72
 
26
- // 主题色渐变
27
- '--bui-color-primary-start': '#ff9c0d',
28
- '--bui-color-primary-end': '#ff6813',
29
- '--bui-color-info-start': '#17b6ff',
30
- '--bui-color-info-end': '#48d3ff',
31
- '--bui-color-warning-start': '#ffcf02',
32
- '--bui-color-warning-end': '#ffb205',
73
+ /** 主题色渐变 */
74
+ '--bui-color-primary-start': '#ff8500',
75
+ '--bui-color-primary-end': 'var(--bui-color-primary)',
76
+ '--bui-color-info-start': '#5bc8ff',
77
+ '--bui-color-info-end': 'var(--bui-color-info)',
78
+ '--bui-color-warning-start': '#fc3',
79
+ '--bui-color-warning-end': 'var(--bui-color-warning)',
80
+ '--bui-color-success-start': '#66d933',
81
+ '--bui-color-success-end': 'var(--bui-color-success)',
82
+ '--bui-color-danger-start': '#ff7633',
83
+ '--bui-color-danger-end': 'var(--bui-color-danger)',
33
84
 
34
- // 形状定义
35
- '--bui-shape-radius-drawer': '15px',
85
+ /** 形状定义 */
86
+ '--bui-shape-radius-drawer': 'var(--bui-radius-6)',
36
87
  // 卡片、普通视图、抽屉、action sheet,常用于信息密度较低的视图
37
- '--bui-shape-radius-card': '12px',
88
+ '--bui-shape-radius-card': 'var(--bui-radius-5)',
38
89
  // 独立海报、卡片,常用于信息密度较高的视图
39
- '--bui-shape-radius-default': '9px',
90
+ '--bui-shape-radius-default': 'var(--bui-radius-4)',
40
91
 
41
92
  // Button
93
+ '--bui-btn-small-height': '21px',
42
94
  '--bui-btn-full-height': '45px',
43
- '--bui-btn-large-height': '30px',
44
- '--bui-btn-full-font-size': '18px',
95
+ '--bui-btn-large-height': '45px',
96
+ '--bui-btn-full-font-size': 'var(--bui-title-size-3)',
97
+ '--bui-btn-large-font-size': 'var(--bui-title-size-3)',
45
98
  '--bui-btn-full-font-family': 'var(--bui-font-family-accent)',
46
- '--bui-btn-small-border-radius': '6px',
47
- '--bui-btn-border-radius': '6px',
48
- '--bui-btn-large-border-radius': '7px',
49
- '--bui-btn-full-border-radius': '14px',
99
+ '--bui-btn-small-border-radius': 'var(--bui-radius-3)',
100
+ '--bui-btn-border-radius': 'var(--bui-radius-4)',
101
+ '--bui-btn-large-border-radius': 'var(--bui-radius-5)',
102
+ '--bui-btn-full-border-radius': 'var(--bui-radius-5)',
50
103
 
51
104
  // Card
52
105
  '--bui-card-header-title-font-size': 'var(--bui-title-size-3)',
@@ -57,5 +110,7 @@ export const pioneerLight = {
57
110
  '--bui-tabs-indicator-height': '4PX',
58
111
  '--bui-tabs-indicator-border-radius': '2px',
59
112
  '--bui-tabs-indicator-box-shadow': '0 2px 4px 0 rgba(255, 98, 0, 0.2)',
113
+ '--bui-tabs-indicator-bg':
114
+ 'linear-gradient(90deg,var(--bui-color-primary-start) 0%,var(--bui-color-primary-end) 100%)',
60
115
  },
61
116
  };
@@ -1,14 +1,16 @@
1
1
  /** 此文件由脚本自动生成,请勿直接修改,若有变更请维护bui-styles/registry/*.mjs,再执行`pnpm theme:js2less`更新主题 */
2
2
  .default-light() {
3
- --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
4
- 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
5
- sans-serif;
3
+ --bui-font-family:
4
+ 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB',
5
+ 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif;
6
6
  --bui-color-red: #ff335c;
7
7
  --bui-color-red-light: #ffebef;
8
8
  --bui-color-pink: #dd10f2;
9
9
  --bui-color-pink-light: #fce7fe;
10
10
  --bui-color-orange: #ff8533;
11
11
  --bui-color-orange-light: #fff0e5;
12
+ --bui-color-yellow: #ff8533;
13
+ --bui-color-yellow-light: #fff0e5;
12
14
  --bui-color-green: #00d68f;
13
15
  --bui-color-green-light: #dcf9f0;
14
16
  --bui-color-purple: #8b52ff;
@@ -16,21 +18,26 @@
16
18
  --bui-color-blue: #148aff;
17
19
  --bui-color-blue-light: #e1f0ff;
18
20
  --bui-color-gray: #8896b1;
19
- --bui-color-gray-light: #f3f5f8;
21
+ --bui-color-gray-light: #f7f9fc;
20
22
  --bui-color-black: #000;
21
23
  --bui-color-white: #fff;
22
24
  --bui-color-vip: #ff866e;
25
+ --bui-color-vip1: #fec9a3;
26
+ --bui-color-vip2: #f44a8b;
27
+ --bui-color-vip3: #c46e31;
28
+ --bui-color-vip4: #fccfe0;
23
29
  --bui-color-neutral-0: var(--bui-color-black);
24
- --bui-color-neutral-1: #2e333e;
25
- --bui-color-neutral-2: #5f6672;
26
- --bui-color-neutral-3: #959aa5;
27
- --bui-color-neutral-4: #ced1d6;
30
+ --bui-color-neutral-1: #030b1a;
31
+ --bui-color-neutral-2: #444b5b;
32
+ --bui-color-neutral-3: #8b93a5;
33
+ --bui-color-neutral-4: #bfc4cf;
28
34
  --bui-color-neutral-5: #e9ebef;
29
- --bui-color-neutral-6: #f5f6f8;
35
+ --bui-color-neutral-6: #f7f9fc;
30
36
  --bui-color-neutral-7: var(--bui-color-white);
31
37
  --bui-font-weight-normal: 400;
32
38
  --bui-font-weight-medium: 500;
33
- --bui-font-weight-bold: 600;
39
+ --bui-font-weight-semibold: 600;
40
+ --bui-font-weight-bold: 700;
34
41
  --bui-color-primary: var(--bui-color-red);
35
42
  --bui-color-primary-light: var(--bui-color-red-light);
36
43
  --bui-color-info: var(--bui-color-blue);
@@ -41,15 +48,29 @@
41
48
  --bui-color-warning-light: var(--bui-color-orange-light);
42
49
  --bui-color-danger: var(--bui-color-red);
43
50
  --bui-color-danger-light: var(--bui-color-red-light);
51
+ --bui-font-size-xs1: 8px;
52
+ --bui-font-size-xs2: 9px;
53
+ --bui-font-size-sm1: 10px;
54
+ --bui-font-size-sm2: 11px;
55
+ --bui-font-size-sm3: 12px;
56
+ --bui-font-size-sm4: 13px;
57
+ --bui-font-size-md1: 14px;
58
+ --bui-font-size-md2: 15px;
59
+ --bui-font-size-md3: 16px;
60
+ --bui-font-size-md4: 18px;
61
+ --bui-font-size-lg1: 20px;
62
+ --bui-font-size-lg2: 22px;
63
+ --bui-font-size-lg3: 24px;
64
+ --bui-font-size-lg4: 26px;
44
65
  --bui-title-size-1: 21px;
45
- --bui-title-size-2: 18px;
46
- --bui-title-size-3: 16px;
47
- --bui-title-size-4: 15px;
48
- --bui-text-size-1: 14px;
49
- --bui-text-size-2: 13px;
50
- --bui-text-size-3: 12px;
51
- --bui-text-size-4: 11px;
52
- --bui-text-size-5: 10px;
66
+ --bui-title-size-2: var(--bui-font-size-md4);
67
+ --bui-title-size-3: var(--bui-font-size-md3);
68
+ --bui-title-size-4: var(--bui-font-size-md2);
69
+ --bui-text-size-1: var(--bui-font-size-md1);
70
+ --bui-text-size-2: var(--bui-font-size-sm4);
71
+ --bui-text-size-3: var(--bui-font-size-sm3);
72
+ --bui-text-size-4: var(--bui-font-size-sm2);
73
+ --bui-text-size-5: var(--bui-font-size-sm1);
53
74
  --bui-color-fg-default: var(--bui-color-neutral-1);
54
75
  --bui-color-fg-muted: var(--bui-color-neutral-2);
55
76
  --bui-color-fg-subtle: var(--bui-color-neutral-3);
@@ -88,17 +109,37 @@
88
109
  --bui-color-danger-end: var(--bui-color-red);
89
110
  --bui-color-vip-start: #ffd4a6;
90
111
  --bui-color-vip-end: #ffbeae;
91
- --bui-shape-radius-popover: 18px;
92
- --bui-shape-radius-drawer: 12px;
93
- --bui-shape-radius-card: 9px;
94
- --bui-shape-radius-default: 6px;
95
- --bui-shape-radius-poster: 4px;
96
- --bui-shape-radius-label: 3px;
97
- --bui-spacing-xl: 15px;
98
- --bui-spacing-lg: 12px;
99
- --bui-spacing-md: 9px;
100
- --bui-spacing-sm: 6px;
101
- --bui-spacing-xs: 4px;
112
+ --bui-radius-circular: 10000px;
113
+ --bui-radius-8: 24px;
114
+ --bui-radius-7: 18px;
115
+ --bui-radius-6: 15px;
116
+ --bui-radius-5: 12px;
117
+ --bui-radius-4: 9px;
118
+ --bui-radius-3: 6px;
119
+ --bui-radius-2: 4px;
120
+ --bui-radius-1: 3px;
121
+ --bui-radius-none: 0px;
122
+ --bui-shape-radius-popover: var(--bui-radius-7);
123
+ --bui-shape-radius-drawer: var(--bui-radius-5);
124
+ --bui-shape-radius-card: var(--bui-radius-4);
125
+ --bui-shape-radius-default: var(--bui-radius-3);
126
+ --bui-shape-radius-poster: var(--bui-radius-2);
127
+ --bui-shape-radius-label: var(--bui-radius-1);
128
+ --bui-spacing-1: 1px;
129
+ --bui-spacing-2: 2px;
130
+ --bui-spacing-3: 3px;
131
+ --bui-spacing-4: 4px;
132
+ --bui-spacing-5: 6px;
133
+ --bui-spacing-6: 9px;
134
+ --bui-spacing-7: 12px;
135
+ --bui-spacing-8: 15px;
136
+ --bui-spacing-9: 18px;
137
+ --bui-spacing-10: 24px;
138
+ --bui-spacing-xl: var(--bui-spacing-8);
139
+ --bui-spacing-lg: var(--bui-spacing-7);
140
+ --bui-spacing-md: var(--bui-spacing-6);
141
+ --bui-spacing-sm: var(--bui-spacing-5);
142
+ --bui-spacing-xs: var(--bui-spacing-4);
102
143
  --bui-line-height: 1.5;
103
144
  --bui-z-index-dropdown: 1000;
104
145
  --bui-z-index-affix: 1100;
@@ -1,19 +1,39 @@
1
1
  /** 此文件由脚本自动生成,请勿直接修改,若有变更请维护bui-styles/registry/*.mjs,再执行`pnpm theme:js2less`更新主题 */
2
2
  .dm-light() {
3
- --bui-color-blue: #48b1f1;
4
- --bui-color-orange: #ff8f3f;
5
- --bui-color-gray: #f5f5f5;
6
- --bui-color-pink: #ff8e92;
7
- --bui-color-neutral-2: #4d4d56;
8
- --bui-color-neutral-3: #9c9ca5;
9
- --bui-color-neutral-5: #f1f1f1;
10
- --bui-color-bg-default: #f4f5f6;
11
- --bui-color-powder-start: #ff72a2;
12
- --bui-color-powder-end: #ff7070;
13
- --bui-title-size-2: 20px;
14
- --bui-title-size-3: 18px;
15
- --bui-color-red: #ff4886;
16
- --bui-color-fg-default: #2e333e;
17
- --bui-color-fg-muted: #2e333e;
18
- --bui-shape-radius-label: 4px;
3
+ --bui-color-red: #ff3299;
4
+ --bui-color-red-light: #ffeaf5;
5
+ --bui-color-red-dark: #e62d8a;
6
+ --bui-color-yellow: #ffaf00;
7
+ --bui-color-yellow-light: #fff7e5;
8
+ --bui-color-yellow-dark: #e59d00;
9
+ --bui-color-lemonyellow: #fff36f;
10
+ --bui-color-lemonyellow-light: #ffffeb;
11
+ --bui-color-lemonyellow-dark: #b3a13d;
12
+ --bui-color-green: #0cdc87;
13
+ --bui-color-green-light: #e6fbf3;
14
+ --bui-color-green-dark: #0bc679;
15
+ --bui-color-purple: #754dff;
16
+ --bui-color-purple-light: #f6f0ff;
17
+ --bui-color-purple-dark: #3924b3;
18
+ --bui-color-blue: #30aeff;
19
+ --bui-color-blue-light: #eaf7ff;
20
+ --bui-color-blue-dark: #2b9ce5;
21
+ --bui-color-aiblue: #5cfffa;
22
+ --bui-color-aiblue-light: #f0fffc;
23
+ --bui-color-aiblue-dark: #00898e;
24
+ --bui-color-primary-start: var(--bui-color-red);
25
+ --bui-color-primary-end: #ff4a72;
26
+ --bui-color-info-start: #51bbff;
27
+ --bui-color-info-end: var(--bui-color-blue);
28
+ --bui-color-warning-start: #ffc341;
29
+ --bui-color-warning-end: var(--bui-color-yellow);
30
+ --bui-color-success-start: var(--bui-color-green);
31
+ --bui-color-success-end: #00c474;
32
+ --bui-color-danger-start: var(--bui-color-red);
33
+ --bui-color-danger-end: #ff4a72;
34
+ --bui-color-border-primary: rgba(255, 50, 153, 0.4);
35
+ --bui-color-border-info: rgba(48, 174, 255, 0.4);
36
+ --bui-color-border-success: rgba(12, 220, 135, 0.4);
37
+ --bui-color-border-warning: rgba(255, 175, 0, 0.4);
38
+ --bui-color-border-danger: rgba(255, 50, 153, 0.4);
19
39
  }
package/themes/index.less CHANGED
@@ -3,4 +3,3 @@
3
3
  @import './default-dark.less';
4
4
  @import './dm-light.less';
5
5
  @import './pioneer-light.less';
6
- @import './pioneer-light-components.less';
@@ -1,31 +1,69 @@
1
1
  /** 此文件由脚本自动生成,请勿直接修改,若有变更请维护bui-styles/registry/*.mjs,再执行`pnpm theme:js2less`更新主题 */
2
2
  .pioneer-light() {
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
- --bui-color-primary: #ff7600;
7
- --bui-color-primary-light: #ffefe5;
8
- --bui-title-size-4: 14px;
9
- --bui-color-fg-default: #181818;
10
- --bui-color-fg-disabled: rgba(24, 24, 24, 0.5);
11
- --bui-color-border-primary: rgba(20, 138, 255, 0.4);
12
- --bui-color-primary-start: #ff9c0d;
13
- --bui-color-primary-end: #ff6813;
14
- --bui-color-info-start: #17b6ff;
15
- --bui-color-info-end: #48d3ff;
16
- --bui-color-warning-start: #ffcf02;
17
- --bui-color-warning-end: #ffb205;
18
- --bui-shape-radius-drawer: 15px;
19
- --bui-shape-radius-card: 12px;
20
- --bui-shape-radius-default: 9px;
3
+ --bui-font-family-accent:
4
+ 'AlibabaPuHuiTi-Heavy', 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
5
+ 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
6
+ sans-serif;
7
+ --bui-color-red: #ff471a;
8
+ --bui-color-red-light: #ffefe6;
9
+ --bui-color-red-dark: #b31800;
10
+ --bui-color-orange: #ff5000;
11
+ --bui-color-orange-light: #ffede5;
12
+ --bui-color-orange-dark: #d93d00;
13
+ --bui-color-yellow: #ffa608;
14
+ --bui-color-yellow-light: #fffae6;
15
+ --bui-color-yellow-dark: #b36500;
16
+ --bui-color-lemonyellow: #fff36f;
17
+ --bui-color-lemonyellow-light: #ffffeb;
18
+ --bui-color-lemonyellow-dark: #b3a13d;
19
+ --bui-color-green: #40bf00;
20
+ --bui-color-green-light: #f2ffe6;
21
+ --bui-color-green-dark: #1f7300;
22
+ --bui-color-purple: #754dff;
23
+ --bui-color-purple-light: #f6f0ff;
24
+ --bui-color-purple-dark: #3924b3;
25
+ --bui-color-blue: #229af0;
26
+ --bui-color-blue-light: #f0fbff;
27
+ --bui-color-blue-dark: #0757a3;
28
+ --bui-color-aiblue: #5cfffa;
29
+ --bui-color-aiblue-light: #f0fffc;
30
+ --bui-color-aiblue-dark: #00898e;
31
+ --bui-color-primary: var(--bui-color-orange);
32
+ --bui-color-primary-light: var(--bui-color-orange-light);
33
+ --bui-color-primary-dark: var(--bui-color-orange-dark);
34
+ --bui-color-warning: var(--bui-color-yellow);
35
+ --bui-color-warning-light: var(--bui-color-yellow-light);
36
+ --bui-color-warning-dark: var(--bui-color-yellow-dark);
37
+ --bui-title-size-4: var(--bui-font-size-md1);
38
+ --bui-color-fg-disabled: rgba(3, 11, 26, 0.5);
39
+ --bui-color-border-primary: rgba(255, 80, 0, 0.4);
40
+ --bui-color-border-info: rgba(34, 154, 240, 0.4);
41
+ --bui-color-border-success: rgba(64, 191, 0, 0.4);
42
+ --bui-color-border-warning: rgba(255, 166, 8, 0.4);
43
+ --bui-color-border-danger: rgba(255, 71, 26, 0.4);
44
+ --bui-color-primary-start: #ff8500;
45
+ --bui-color-primary-end: var(--bui-color-primary);
46
+ --bui-color-info-start: #5bc8ff;
47
+ --bui-color-info-end: var(--bui-color-info);
48
+ --bui-color-warning-start: #fc3;
49
+ --bui-color-warning-end: var(--bui-color-warning);
50
+ --bui-color-success-start: #66d933;
51
+ --bui-color-success-end: var(--bui-color-success);
52
+ --bui-color-danger-start: #ff7633;
53
+ --bui-color-danger-end: var(--bui-color-danger);
54
+ --bui-shape-radius-drawer: var(--bui-radius-6);
55
+ --bui-shape-radius-card: var(--bui-radius-5);
56
+ --bui-shape-radius-default: var(--bui-radius-4);
57
+ --bui-btn-small-height: 21px;
21
58
  --bui-btn-full-height: 45px;
22
- --bui-btn-large-height: 30px;
23
- --bui-btn-full-font-size: 18px;
59
+ --bui-btn-large-height: 45px;
60
+ --bui-btn-full-font-size: var(--bui-title-size-3);
61
+ --bui-btn-large-font-size: var(--bui-title-size-3);
24
62
  --bui-btn-full-font-family: var(--bui-font-family-accent);
25
- --bui-btn-small-border-radius: 6px;
26
- --bui-btn-border-radius: 6px;
27
- --bui-btn-large-border-radius: 7px;
28
- --bui-btn-full-border-radius: 14px;
63
+ --bui-btn-small-border-radius: var(--bui-radius-3);
64
+ --bui-btn-border-radius: var(--bui-radius-4);
65
+ --bui-btn-large-border-radius: var(--bui-radius-5);
66
+ --bui-btn-full-border-radius: var(--bui-radius-5);
29
67
  --bui-card-header-title-font-size: var(--bui-title-size-3);
30
68
  --bui-tab-font-size: var(--bui-title-size-4);
31
69
  --bui-tab-color: var(--bui-color-fg-muted);
@@ -34,4 +72,9 @@
34
72
  --bui-tabs-indicator-height: 4PX;
35
73
  --bui-tabs-indicator-border-radius: 2px;
36
74
  --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
75
+ --bui-tabs-indicator-bg: linear-gradient(
76
+ 90deg,
77
+ var(--bui-color-primary-start) 0%,
78
+ var(--bui-color-primary-end) 100%
79
+ );
37
80
  }
@@ -1,49 +0,0 @@
1
- // 无法用css variables实现的先锋版高亮主题色
2
- @import '../mixins/variables.less';
3
-
4
- @{theme-selector-pioneer-light} {
5
- .bui-btn {
6
- &.bui-btn-contained {
7
- &.bui-btn-primary {
8
- &.bui-btn-large {
9
- background-image: radial-gradient(
10
- 35px 25px ellipse at 2% 110%,
11
- #fffe1e 0%,
12
- rgba(251, 134, 35, 0) 99%
13
- ),
14
- radial-gradient(
15
- 35px 25px ellipse at 110% 120%,
16
- #ff3018 0%,
17
- rgba(0, 48, 24, 0) 92%
18
- ),
19
- linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
20
- }
21
-
22
- &.bui-btn-full {
23
- background-image: radial-gradient(
24
- 93px 50px ellipse at 2% 110%,
25
- #fffe1e 0%,
26
- rgba(251, 134, 35, 0) 100%
27
- ),
28
- radial-gradient(
29
- 93px 50px ellipse at 98% 110%,
30
- #ff3018 0%,
31
- rgba(0, 48, 24, 0) 92%
32
- ),
33
- linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
34
- }
35
- }
36
- }
37
- }
38
-
39
- .bui-tabs {
40
- .bui-tabs-indicator {
41
- background-image: linear-gradient(
42
- 90deg,
43
- #ff9b00 0%,
44
- #ffa700 21%,
45
- #ff8300 100%
46
- );
47
- }
48
- }
49
- }