@bifrostui/styles 2.0.0-alpha.2 → 2.0.0-alpha.20

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 (10) hide show
  1. package/dist/index.css +26 -26
  2. package/package.json +1 -1
  3. package/registry/default-light.mjs +1 -1
  4. package/registry/dm-light.mjs +2 -2
  5. package/registry/pioneer-light.mjs +24 -13
  6. package/themes/default-light.less +3 -3
  7. package/themes/dm-light.less +1 -1
  8. package/themes/index.less +0 -1
  9. package/themes/pioneer-light.less +26 -15
  10. package/themes/pioneer-light-components.less +0 -51
package/dist/index.css CHANGED
@@ -4,25 +4,15 @@
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,
14
+ 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
15
+ sans-serif;
26
16
  --bui-color-red: #ff335c;
27
17
  --bui-color-red-light: #ffebef;
28
18
  --bui-color-pink: #dd10f2;
@@ -192,7 +182,7 @@ xhs-page,
192
182
  --bui-color-blue-dark: #2b9ce5;
193
183
  --bui-color-aiblue: #5cfffa;
194
184
  --bui-color-aiblue-light: #f0fffc;
195
- --bui-color-aiblue-dark: #1d858c;
185
+ --bui-color-aiblue-dark: #00898e;
196
186
  --bui-color-primary-start: var(--bui-color-red);
197
187
  --bui-color-primary-end: #ff4a72;
198
188
  --bui-color-info-start: #51bbff;
@@ -212,7 +202,9 @@ xhs-page,
212
202
  /** 先锋主题 */
213
203
  .bui-pioneer-light,
214
204
  [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;
205
+ --bui-font-family-accent: 'AlibabaPuHuiTi-Heavy', 'PingFang SC',
206
+ 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei',
207
+ 'Helvetica Neue', helvetica, arial, sans-serif;
216
208
  --bui-color-red: #ff471a;
217
209
  --bui-color-red-light: #ffefe6;
218
210
  --bui-color-red-dark: #b31800;
@@ -236,18 +228,20 @@ xhs-page,
236
228
  --bui-color-blue-dark: #0757a3;
237
229
  --bui-color-aiblue: #5cfffa;
238
230
  --bui-color-aiblue-light: #f0fffc;
239
- --bui-color-aiblue-dark: #1d858c;
231
+ --bui-color-aiblue-dark: #00898e;
240
232
  --bui-color-primary: var(--bui-color-orange);
241
233
  --bui-color-primary-light: var(--bui-color-orange-light);
242
234
  --bui-color-primary-dark: var(--bui-color-orange-dark);
235
+ --bui-color-warning: var(--bui-color-yellow);
236
+ --bui-color-warning-light: var(--bui-color-yellow-light);
237
+ --bui-color-warning-dark: var(--bui-color-yellow-dark);
243
238
  --bui-title-size-4: var(--bui-font-size-md1);
244
- --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,21 +254,27 @@ 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);
274
270
  /* prettier-ignore */
275
- --bui-tabs-indicator-height: 4PX;
271
+ --bui-tabs-indicator-height: 6PX;
276
272
  --bui-tabs-indicator-border-radius: 2px;
273
+ --bui-tabs-indicator-width: 27px;
277
274
  --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
275
+ --bui-tabs-indicator-bg: linear-gradient(90deg, var(--bui-color-primary-start) 0%, var(--bui-color-primary-end) 100%);
276
+ --bui-calendar-middle-bg-color: var(--bui-color-primary-light);
277
+ --bui-calendar-range-both-ends-bg-color: #ffb999;
278
278
  }
279
279
  /** 暗黑模式 */
280
280
  .bui-dark,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/styles",
3
- "version": "2.0.0-alpha.2",
3
+ "version": "2.0.0-alpha.20",
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/default-light.mjs CHANGED
@@ -208,4 +208,4 @@ export const defaultLight = {
208
208
  '--bui-z-index-tooltip': '1400',
209
209
  '--bui-z-index-toast': '1500', // 反馈提示，高于所有元素
210
210
  },
211
- };
211
+ };
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,28 +45,30 @@ 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
 
58
- // 用于失效、不可用等状态
59
- '--bui-color-fg-disabled': 'rgba(3, 11, 26, 0.5)',
60
-
61
63
  /** 分割线、边框 */
62
64
  '--bui-color-border-primary': 'rgba(255, 80, 0, 0.4)',
63
65
  '--bui-color-border-info': 'rgba(34, 154, 240, 0.4)',
64
66
  '--bui-color-border-success': 'rgba(64, 191, 0, 0.4)',
65
- '--bui-color-border-warning': 'rgba(255, 80, 0, 0.4)',
67
+ '--bui-color-border-warning': 'rgba(255, 166, 8, 0.4)',
66
68
  '--bui-color-border-danger': 'rgba(255, 71, 26, 0.4)',
67
69
 
68
70
  /** 主题色渐变 */
69
- '--bui-color-primary-start': '#ffb300',
71
+ '--bui-color-primary-start': '#ff8500',
70
72
  '--bui-color-primary-end': 'var(--bui-color-primary)',
71
73
  '--bui-color-info-start': '#5bc8ff',
72
74
  '--bui-color-info-end': 'var(--bui-color-info)',
@@ -85,14 +87,16 @@ export const pioneerLight = {
85
87
  '--bui-shape-radius-default': 'var(--bui-radius-4)',
86
88
 
87
89
  // Button
90
+ '--bui-btn-small-height': '21px',
88
91
  '--bui-btn-full-height': '45px',
89
- '--bui-btn-large-height': '30px',
90
- '--bui-btn-full-font-size': '18px',
92
+ '--bui-btn-large-height': '45px',
93
+ '--bui-btn-full-font-size': 'var(--bui-title-size-3)',
94
+ '--bui-btn-large-font-size': 'var(--bui-title-size-3)',
91
95
  '--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',
96
+ '--bui-btn-small-border-radius': 'var(--bui-radius-3)',
97
+ '--bui-btn-border-radius': 'var(--bui-radius-4)',
98
+ '--bui-btn-large-border-radius': 'var(--bui-radius-5)',
99
+ '--bui-btn-full-border-radius': 'var(--bui-radius-5)',
96
100
 
97
101
  // Card
98
102
  '--bui-card-header-title-font-size': 'var(--bui-title-size-3)',
@@ -100,8 +104,15 @@ export const pioneerLight = {
100
104
  // Tabs
101
105
  '--bui-tab-font-size': 'var(--bui-title-size-4)',
102
106
  '--bui-tab-color': 'var(--bui-color-fg-muted)',
103
- '--bui-tabs-indicator-height': '4PX',
107
+ '--bui-tabs-indicator-height': '6PX',
104
108
  '--bui-tabs-indicator-border-radius': '2px',
109
+ '--bui-tabs-indicator-width': '27px',
105
110
  '--bui-tabs-indicator-box-shadow': '0 2px 4px 0 rgba(255, 98, 0, 0.2)',
111
+ '--bui-tabs-indicator-bg':
112
+ 'linear-gradient(90deg,var(--bui-color-primary-start) 0%,var(--bui-color-primary-end) 100%)',
113
+
114
+ // Calendar
115
+ '--bui-calendar-middle-bg-color': 'var(--bui-color-primary-light)',
116
+ '--bui-calendar-range-both-ends-bg-color': '#ffb999',
106
117
  },
107
118
  };
package/themes/default-light.less CHANGED
@@ -1,8 +1,8 @@
1
1
  /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
2
2
  .default-light() {
3
- --bui-font-family:
4
- 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB',
5
- 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif;
3
+ --bui-font-family: 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto,
4
+ 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', helvetica, arial,
5
+ sans-serif;
6
6
  --bui-color-red: #ff335c;
7
7
  --bui-color-red-light: #ffebef;
8
8
  --bui-color-pink: #dd10f2;
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
@@ -1,9 +1,8 @@
1
1
  /** 此文件由脚本自动生成，请勿直接修改，若有变更请维护bui-styles/registry/*.mjs，再执行`pnpm theme:js2less`更新主题 */
2
2
  .pioneer-light() {
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;
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;
7
6
  --bui-color-red: #ff471a;
8
7
  --bui-color-red-light: #ffefe6;
9
8
  --bui-color-red-dark: #b31800;
@@ -27,18 +26,20 @@
27
26
  --bui-color-blue-dark: #0757a3;
28
27
  --bui-color-aiblue: #5cfffa;
29
28
  --bui-color-aiblue-light: #f0fffc;
30
- --bui-color-aiblue-dark: #1d858c;
29
+ --bui-color-aiblue-dark: #00898e;
31
30
  --bui-color-primary: var(--bui-color-orange);
32
31
  --bui-color-primary-light: var(--bui-color-orange-light);
33
32
  --bui-color-primary-dark: var(--bui-color-orange-dark);
33
+ --bui-color-warning: var(--bui-color-yellow);
34
+ --bui-color-warning-light: var(--bui-color-yellow-light);
35
+ --bui-color-warning-dark: var(--bui-color-yellow-dark);
34
36
  --bui-title-size-4: var(--bui-font-size-md1);
35
- --bui-color-fg-disabled: rgba(3, 11, 26, 0.5);
36
37
  --bui-color-border-primary: rgba(255, 80, 0, 0.4);
37
38
  --bui-color-border-info: rgba(34, 154, 240, 0.4);
38
39
  --bui-color-border-success: rgba(64, 191, 0, 0.4);
39
- --bui-color-border-warning: rgba(255, 80, 0, 0.4);
40
+ --bui-color-border-warning: rgba(255, 166, 8, 0.4);
40
41
  --bui-color-border-danger: rgba(255, 71, 26, 0.4);
41
- --bui-color-primary-start: #ffb300;
42
+ --bui-color-primary-start: #ff8500;
42
43
  --bui-color-primary-end: var(--bui-color-primary);
43
44
  --bui-color-info-start: #5bc8ff;
44
45
  --bui-color-info-end: var(--bui-color-info);
@@ -51,20 +52,30 @@
51
52
  --bui-shape-radius-drawer: var(--bui-radius-6);
52
53
  --bui-shape-radius-card: var(--bui-radius-5);
53
54
  --bui-shape-radius-default: var(--bui-radius-4);
55
+ --bui-btn-small-height: 21px;
54
56
  --bui-btn-full-height: 45px;
55
- --bui-btn-large-height: 30px;
56
- --bui-btn-full-font-size: 18px;
57
+ --bui-btn-large-height: 45px;
58
+ --bui-btn-full-font-size: var(--bui-title-size-3);
59
+ --bui-btn-large-font-size: var(--bui-title-size-3);
57
60
  --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;
61
+ --bui-btn-small-border-radius: var(--bui-radius-3);
62
+ --bui-btn-border-radius: var(--bui-radius-4);
63
+ --bui-btn-large-border-radius: var(--bui-radius-5);
64
+ --bui-btn-full-border-radius: var(--bui-radius-5);
62
65
  --bui-card-header-title-font-size: var(--bui-title-size-3);
63
66
  --bui-tab-font-size: var(--bui-title-size-4);
64
67
  --bui-tab-color: var(--bui-color-fg-muted);
65
68
 
66
69
  /* prettier-ignore */
67
- --bui-tabs-indicator-height: 4PX;
70
+ --bui-tabs-indicator-height: 6PX;
68
71
  --bui-tabs-indicator-border-radius: 2px;
72
+ --bui-tabs-indicator-width: 27px;
69
73
  --bui-tabs-indicator-box-shadow: 0 2px 4px 0 rgba(255, 98, 0, 0.2);
74
+ --bui-tabs-indicator-bg: linear-gradient(
75
+ 90deg,
76
+ var(--bui-color-primary-start) 0%,
77
+ var(--bui-color-primary-end) 100%
78
+ );
79
+ --bui-calendar-middle-bg-color: var(--bui-color-primary-light);
80
+ --bui-calendar-range-both-ends-bg-color: #ffb999;
70
81
  }
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
- }