@bifrostui/styles 2.0.0-alpha.1 → 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.
Files changed (8) hide show
  1. package/dist/index.css +21 -24
  2. package/package.json +1 -1
  3. package/registry/dm-light.mjs +2 -2
  4. package/registry/pioneer-light.mjs +18 -9
  5. package/themes/dm-light.less +1 -1
  6. package/themes/index.less +0 -1
  7. package/themes/pioneer-light.less +19 -9
  8. package/themes/pioneer-light-components.less +0 -51
package/dist/index.css CHANGED
@@ -4,25 +4,14 @@
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, 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, 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;
26
15
  --bui-color-red: #ff335c;
27
16
  --bui-color-red-light: #ffebef;
28
17
  --bui-color-pink: #dd10f2;
@@ -192,7 +181,7 @@ xhs-page,
192
181
  --bui-color-blue-dark: #2b9ce5;
193
182
  --bui-color-aiblue: #5cfffa;
194
183
  --bui-color-aiblue-light: #f0fffc;
195
- --bui-color-aiblue-dark: #1d858c;
184
+ --bui-color-aiblue-dark: #00898e;
196
185
  --bui-color-primary-start: var(--bui-color-red);
197
186
  --bui-color-primary-end: #ff4a72;
198
187
  --bui-color-info-start: #51bbff;
@@ -212,7 +201,9 @@ xhs-page,
212
201
  /** 先锋主题 */
213
202
  .bui-pioneer-light,
214
203
  [data-color-mode][data-theme='pioneer'] {
215
- --bui-font-family-accent: 'AlibabaPuHuiTi-Heavy', 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif;
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;
216
207
  --bui-color-red: #ff471a;
217
208
  --bui-color-red-light: #ffefe6;
218
209
  --bui-color-red-dark: #b31800;
@@ -236,18 +227,21 @@ xhs-page,
236
227
  --bui-color-blue-dark: #0757a3;
237
228
  --bui-color-aiblue: #5cfffa;
238
229
  --bui-color-aiblue-light: #f0fffc;
239
- --bui-color-aiblue-dark: #1d858c;
230
+ --bui-color-aiblue-dark: #00898e;
240
231
  --bui-color-primary: var(--bui-color-orange);
241
232
  --bui-color-primary-light: var(--bui-color-orange-light);
242
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);
243
237
  --bui-title-size-4: var(--bui-font-size-md1);
244
238
  --bui-color-fg-disabled: rgba(3, 11, 26, 0.5);
245
239
  --bui-color-border-primary: rgba(255, 80, 0, 0.4);
246
240
  --bui-color-border-info: rgba(34, 154, 240, 0.4);
247
241
  --bui-color-border-success: rgba(64, 191, 0, 0.4);
248
- --bui-color-border-warning: rgba(255, 80, 0, 0.4);
242
+ --bui-color-border-warning: rgba(255, 166, 8, 0.4);
249
243
  --bui-color-border-danger: rgba(255, 71, 26, 0.4);
250
- --bui-color-primary-start: #ffb300;
244
+ --bui-color-primary-start: #ff8500;
251
245
  --bui-color-primary-end: var(--bui-color-primary);
252
246
  --bui-color-info-start: #5bc8ff;
253
247
  --bui-color-info-end: var(--bui-color-info);
@@ -260,14 +254,16 @@ xhs-page,
260
254
  --bui-shape-radius-drawer: var(--bui-radius-6);
261
255
  --bui-shape-radius-card: var(--bui-radius-5);
262
256
  --bui-shape-radius-default: var(--bui-radius-4);
257
+ --bui-btn-small-height: 21px;
263
258
  --bui-btn-full-height: 45px;
264
- --bui-btn-large-height: 30px;
265
- --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);
266
262
  --bui-btn-full-font-family: var(--bui-font-family-accent);
267
- --bui-btn-small-border-radius: 6px;
268
- --bui-btn-border-radius: 6px;
269
- --bui-btn-large-border-radius: 7px;
270
- --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);
271
267
  --bui-card-header-title-font-size: var(--bui-title-size-3);
272
268
  --bui-tab-font-size: var(--bui-title-size-4);
273
269
  --bui-tab-color: var(--bui-color-fg-muted);
@@ -275,6 +271,7 @@ xhs-page,
275
271
  --bui-tabs-indicator-height: 4PX;
276
272
  --bui-tabs-indicator-border-radius: 2px;
277
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%);
278
275
  }
279
276
  /** 暗黑模式 */
280
277
  .bui-dark,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/styles",
3
- "version": "2.0.0-alpha.1",
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",
package/registry/dm-light.mjs CHANGED
@@ -36,7 +36,7 @@ export const dmLight = {
36
36
  /** 智能蓝 */
37
37
  '--bui-color-aiblue': '#5cfffa',
38
38
  '--bui-color-aiblue-light': '#f0fffc',
39
- '--bui-color-aiblue-dark': '#1d858c',
39
+ '--bui-color-aiblue-dark': '#00898e',
40
40
 
41
41
  /** 主题色渐变 */
42
42
  '--bui-color-primary-start': 'var(--bui-color-red)',
@@ -57,4 +57,4 @@ export const dmLight = {
57
57
  '--bui-color-border-warning': 'rgba(255, 175, 0, 0.4)',
58
58
  '--bui-color-border-danger': 'rgba(255, 50, 153, 0.4)',
59
59
  },
60
- };
60
+ };
package/registry/pioneer-light.mjs CHANGED
@@ -45,13 +45,18 @@ export const pioneerLight = {
45
45
  /** 智能蓝 */
46
46
  '--bui-color-aiblue': '#5cfffa',
47
47
  '--bui-color-aiblue-light': '#f0fffc',
48
- '--bui-color-aiblue-dark': '#1d858c',
48
+ '--bui-color-aiblue-dark': '#00898e',
49
49
 
50
50
  /** 主题 */
51
51
  '--bui-color-primary': 'var(--bui-color-orange)',
52
52
  '--bui-color-primary-light': 'var(--bui-color-orange-light)',
53
53
  '--bui-color-primary-dark': 'var(--bui-color-orange-dark)',
54
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)',
59
+
55
60
  /** 语义化字号 */
56
61
  '--bui-title-size-4': 'var(--bui-font-size-md1)',
57
62
 
@@ -62,11 +67,11 @@ export const pioneerLight = {
62
67
  '--bui-color-border-primary': 'rgba(255, 80, 0, 0.4)',
63
68
  '--bui-color-border-info': 'rgba(34, 154, 240, 0.4)',
64
69
  '--bui-color-border-success': 'rgba(64, 191, 0, 0.4)',
65
- '--bui-color-border-warning': 'rgba(255, 80, 0, 0.4)',
70
+ '--bui-color-border-warning': 'rgba(255, 166, 8, 0.4)',
66
71
  '--bui-color-border-danger': 'rgba(255, 71, 26, 0.4)',
67
72
 
68
73
  /** 主题色渐变 */
69
- '--bui-color-primary-start': '#ffb300',
74
+ '--bui-color-primary-start': '#ff8500',
70
75
  '--bui-color-primary-end': 'var(--bui-color-primary)',
71
76
  '--bui-color-info-start': '#5bc8ff',
72
77
  '--bui-color-info-end': 'var(--bui-color-info)',
@@ -85,14 +90,16 @@ export const pioneerLight = {
85
90
  '--bui-shape-radius-default': 'var(--bui-radius-4)',
86
91
 
87
92
  // Button
93
+ '--bui-btn-small-height': '21px',
88
94
  '--bui-btn-full-height': '45px',
89
- '--bui-btn-large-height': '30px',
90
- '--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)',
91
98
  '--bui-btn-full-font-family': 'var(--bui-font-family-accent)',
92
- '--bui-btn-small-border-radius': '6px',
93
- '--bui-btn-border-radius': '6px',
94
- '--bui-btn-large-border-radius': '7px',
95
- '--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)',
96
103
 
97
104
  // Card
98
105
  '--bui-card-header-title-font-size': 'var(--bui-title-size-3)',
@@ -103,5 +110,7 @@ export const pioneerLight = {
103
110
  '--bui-tabs-indicator-height': '4PX',
104
111
  '--bui-tabs-indicator-border-radius': '2px',
105
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%)',
106
115
  },
107
116
  };
package/themes/dm-light.less CHANGED
@@ -20,7 +20,7 @@
20
20
  --bui-color-blue-dark: #2b9ce5;
21
21
  --bui-color-aiblue: #5cfffa;
22
22
  --bui-color-aiblue-light: #f0fffc;
23
- --bui-color-aiblue-dark: #1d858c;
23
+ --bui-color-aiblue-dark: #00898e;
24
24
  --bui-color-primary-start: var(--bui-color-red);
25
25
  --bui-color-primary-end: #ff4a72;
26
26
  --bui-color-info-start: #51bbff;
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';
package/themes/pioneer-light.less CHANGED
@@ -27,18 +27,21 @@
27
27
  --bui-color-blue-dark: #0757a3;
28
28
  --bui-color-aiblue: #5cfffa;
29
29
  --bui-color-aiblue-light: #f0fffc;
30
- --bui-color-aiblue-dark: #1d858c;
30
+ --bui-color-aiblue-dark: #00898e;
31
31
  --bui-color-primary: var(--bui-color-orange);
32
32
  --bui-color-primary-light: var(--bui-color-orange-light);
33
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);
34
37
  --bui-title-size-4: var(--bui-font-size-md1);
35
38
  --bui-color-fg-disabled: rgba(3, 11, 26, 0.5);
36
39
  --bui-color-border-primary: rgba(255, 80, 0, 0.4);
37
40
  --bui-color-border-info: rgba(34, 154, 240, 0.4);
38
41
  --bui-color-border-success: rgba(64, 191, 0, 0.4);
39
- --bui-color-border-warning: rgba(255, 80, 0, 0.4);
42
+ --bui-color-border-warning: rgba(255, 166, 8, 0.4);
40
43
  --bui-color-border-danger: rgba(255, 71, 26, 0.4);
41
- --bui-color-primary-start: #ffb300;
44
+ --bui-color-primary-start: #ff8500;
42
45
  --bui-color-primary-end: var(--bui-color-primary);
43
46
  --bui-color-info-start: #5bc8ff;
44
47
  --bui-color-info-end: var(--bui-color-info);
@@ -51,14 +54,16 @@
51
54
  --bui-shape-radius-drawer: var(--bui-radius-6);
52
55
  --bui-shape-radius-card: var(--bui-radius-5);
53
56
  --bui-shape-radius-default: var(--bui-radius-4);
57
+ --bui-btn-small-height: 21px;
54
58
  --bui-btn-full-height: 45px;
55
- --bui-btn-large-height: 30px;
56
- --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);
57
62
  --bui-btn-full-font-family: var(--bui-font-family-accent);
58
- --bui-btn-small-border-radius: 6px;
59
- --bui-btn-border-radius: 6px;
60
- --bui-btn-large-border-radius: 7px;
61
- --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);
62
67
  --bui-card-header-title-font-size: var(--bui-title-size-3);
63
68
  --bui-tab-font-size: var(--bui-title-size-4);
64
69
  --bui-tab-color: var(--bui-color-fg-muted);
@@ -67,4 +72,9 @@
67
72
  --bui-tabs-indicator-height: 4PX;
68
73
  --bui-tabs-indicator-border-radius: 2px;
69
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
+ );
70
80
  }
package/themes/pioneer-light-components.less DELETED
@@ -1,51 +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:
10
- radial-gradient(
11
- 35px 25px ellipse at 2% 110%,
12
- #fffe1e 0%,
13
- rgba(251, 134, 35, 0) 99%
14
- ),
15
- radial-gradient(
16
- 35px 25px ellipse at 110% 120%,
17
- #ff3018 0%,
18
- rgba(0, 48, 24, 0) 92%
19
- ),
20
- linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
21
- }
22
-
23
- &.bui-btn-full {
24
- background-image:
25
- radial-gradient(
26
- 93px 50px ellipse at 2% 110%,
27
- #fffe1e 0%,
28
- rgba(251, 134, 35, 0) 100%
29
- ),
30
- radial-gradient(
31
- 93px 50px ellipse at 98% 110%,
32
- #ff3018 0%,
33
- rgba(0, 48, 24, 0) 92%
34
- ),
35
- linear-gradient(90deg, #fc8622 0%, #ff5000 100%);
36
- }
37
- }
38
- }
39
- }
40
-
41
- .bui-tabs {
42
- .bui-tabs-indicator {
43
- background-image: linear-gradient(
44
- 90deg,
45
- #ff9b00 0%,
46
- #ffa700 21%,
47
- #ff8300 100%
48
- );
49
- }
50
- }
51
- }