@bifrostui/react 1.4.5-beta.0 → 1.4.5-beta.1

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 (26) hide show
  1. package/dist/Button/Button.css +50 -23
  2. package/dist/Button/Button.d.ts +1 -1
  3. package/dist/Button/Button.js +1 -2
  4. package/dist/Button/Button.types.d.ts +8 -7
  5. package/dist/Card/Card.css +4 -1
  6. package/dist/Card/CardContent.css +0 -2
  7. package/dist/Card/CardFooter.css +1 -4
  8. package/dist/Card/CardHeader.css +3 -5
  9. package/dist/Modal/Modal.miniapp.d.ts +1 -1
  10. package/dist/Tabs/Tab.css +6 -9
  11. package/dist/Tabs/Tab.js +1 -1
  12. package/dist/Tabs/Tabs.css +19 -20
  13. package/dist/Tabs/Tabs.js +2 -2
  14. package/es/Button/Button.css +50 -23
  15. package/es/Button/Button.d.ts +1 -1
  16. package/es/Button/Button.js +0 -1
  17. package/es/Button/Button.types.d.ts +8 -7
  18. package/es/Card/Card.css +4 -1
  19. package/es/Card/CardContent.css +0 -2
  20. package/es/Card/CardFooter.css +1 -4
  21. package/es/Card/CardHeader.css +3 -5
  22. package/es/Tabs/Tab.css +6 -9
  23. package/es/Tabs/Tab.js +1 -1
  24. package/es/Tabs/Tabs.css +19 -20
  25. package/es/Tabs/Tabs.js +2 -2
  26. package/package.json +5 -5
package/dist/Button/Button.css CHANGED
@@ -88,23 +88,32 @@
88
88
  --bui-btn-font-size: var(--bui-title-size-4);
89
89
  width: 100%;
90
90
  }
91
+ .bui-btn-text {
92
+ --bui-btn-bg: none;
93
+ }
91
94
  .bui-btn-text.bui-btn-primary {
92
- color: var(--bui-color-primary);
95
+ --bui-btn-color: var(--bui-color-primary);
93
96
  }
94
97
  .bui-btn-text.bui-btn-success {
95
- color: var(--bui-color-success);
98
+ --bui-btn-color: var(--bui-color-success);
96
99
  }
97
100
  .bui-btn-text.bui-btn-info {
98
- color: var(--bui-color-info);
101
+ --bui-btn-color: var(--bui-color-info);
99
102
  }
100
103
  .bui-btn-text.bui-btn-warning {
101
- color: var(--bui-color-warning);
104
+ --bui-btn-color: var(--bui-color-warning);
102
105
  }
103
106
  .bui-btn-text.bui-btn-danger {
104
- color: var(--bui-color-danger);
107
+ --bui-btn-color: var(--bui-color-danger);
108
+ }
109
+ .bui-btn-text.bui-btn-light {
110
+ --bui-btn-color: var(--bui-color-bg-view);
111
+ }
112
+ .bui-btn-text.bui-btn-dark {
113
+ --bui-btn-color: var(--bui-color-fg-default);
105
114
  }
106
115
  .bui-btn-text.bui-btn-vip {
107
- color: var(--bui-color-vip);
116
+ --bui-btn-color: var(--bui-color-vip);
108
117
  }
109
118
  .bui-btn-contained {
110
119
  --bui-btn-bg: var(--bui-color-neutral-5);
@@ -149,6 +158,14 @@
149
158
  var(--bui-color-danger-start) 0%,
150
159
  var(--bui-color-danger-end) 100%);
151
160
  }
161
+ .bui-btn-contained.bui-btn-light {
162
+ --bui-btn-color: var(--bui-color-fg-default);
163
+ --bui-btn-bg: var(--bui-color-bg-view);
164
+ }
165
+ .bui-btn-contained.bui-btn-dark {
166
+ --bui-btn-color: var(--bui-color-bg-view);
167
+ --bui-btn-bg: var(--bui-color-fg-default);
168
+ }
152
169
  .bui-btn-contained.bui-btn-vip {
153
170
  --bui-btn-color: #582331;
154
171
  --bui-btn-bg:
@@ -158,6 +175,7 @@
158
175
  var(--bui-color-vip-end) 100%);
159
176
  }
160
177
  .bui-btn-outlined {
178
+ --bui-btn-bg: transparent;
161
179
  --bui-btn-border: 1px solid var(--bui-color-neutral-4);
162
180
  }
163
181
  .bui-btn-outlined.bui-btn-primary {
@@ -180,39 +198,48 @@
180
198
  color: var(--bui-color-danger);
181
199
  border-color: var(--bui-color-danger);
182
200
  }
201
+ .bui-btn-outlined.bui-btn-light {
202
+ --bui-btn-color: var(--bui-color-bg-view);
203
+ --bui-btn-border: solid 1px var(--bui-color-bg-view);
204
+ }
205
+ .bui-btn-outlined.bui-btn-dark {
206
+ --bui-btn-color: var(--bui-color-fg-default);
207
+ --bui-btn-border: solid 1px var(--bui-color-fg-default);
208
+ }
183
209
  .bui-btn-outlined.bui-btn-vip {
184
210
  color: var(--bui-color-vip);
185
211
  border-color: var(--bui-color-vip);
186
212
  }
187
- .bui-btn-light {
213
+ .bui-btn-subtle {
188
214
  --bui-btn-bg: var(--bui-color-gray-light);
189
215
  }
190
- .bui-btn-light.bui-btn-warning {
191
- background-image: none;
216
+ .bui-btn-subtle.bui-btn-warning {
192
217
  color: var(--bui-color-warning);
193
- background-color: var(--bui-color-warning-light);
218
+ background: var(--bui-color-warning-light);
194
219
  }
195
- .bui-btn-light.bui-btn-primary {
196
- background-image: none;
220
+ .bui-btn-subtle.bui-btn-primary {
197
221
  color: var(--bui-color-primary);
198
- background-color: var(--bui-color-primary-light);
222
+ background: var(--bui-color-primary-light);
199
223
  }
200
- .bui-btn-light.bui-btn-info {
201
- background-image: none;
224
+ .bui-btn-subtle.bui-btn-info {
202
225
  color: var(--bui-color-info);
203
- background-color: var(--bui-color-info-light);
226
+ background: var(--bui-color-info-light);
204
227
  }
205
- .bui-btn-light.bui-btn-success {
206
- background-image: none;
228
+ .bui-btn-subtle.bui-btn-success {
207
229
  color: var(--bui-color-success);
208
- background-color: var(--bui-color-success-light);
230
+ background: var(--bui-color-success-light);
209
231
  }
210
- .bui-btn-light.bui-btn-danger {
211
- background-image: none;
232
+ .bui-btn-subtle.bui-btn-danger {
212
233
  color: var(--bui-color-danger);
213
- background-color: var(--bui-color-danger-light);
234
+ background: var(--bui-color-danger-light);
235
+ }
236
+ .bui-btn-subtle.bui-btn-light {
237
+ --bui-btn-color: var(--bui-color-bg-view);
238
+ }
239
+ .bui-btn-subtle.bui-btn-dark {
240
+ --bui-btn-color: var(--bui-color-fg-default);
214
241
  }
215
- .bui-btn-light.bui-btn-vip {
242
+ .bui-btn-subtle.bui-btn-vip {
216
243
  position: relative;
217
244
  --bui-btn-color: var(--bui-color-vip);
218
245
  --bui-btn-bg: rgba(255, 134, 110, 0.3);
package/dist/Button/Button.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import './Button.less';
3
2
  import { ButtonProps } from './Button.types';
3
+ import './Button.less';
4
4
  declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
5
5
  export default Button;
package/dist/Button/Button.js CHANGED
@@ -58,7 +58,7 @@ __export(Button_exports, {
58
58
  module.exports = __toCommonJS(Button_exports);
59
59
  var import_clsx = __toESM(require("clsx"));
60
60
  var import_react = __toESM(require("react"));
61
- var import_Button = require("./Button.css");
61
+ var import_Button2 = require("./Button.css");
62
62
  const prefixCls = "bui-btn";
63
63
  const ButtonIcon = ({ children, iconPosition }) => {
64
64
  return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-icon-${iconPosition}` }, children);
@@ -110,7 +110,6 @@ Button.displayName = "BuiButton";
110
110
  Button.defaultProps = {
111
111
  size: "medium",
112
112
  variant: "outlined",
113
- color: "default",
114
113
  disabled: false
115
114
  };
116
115
  var Button_default = Button;
package/dist/Button/Button.types.d.ts CHANGED
@@ -16,19 +16,20 @@ export type ButtonProps<D extends React.ElementType = 'button', P = {}> = Overri
16
16
  * @default 'medium'
17
17
  */
18
18
  size?: 'small' | 'medium' | 'large' | 'full';
19
- /** 按钮颜色
20
- * @default 'default'
19
+ /**
20
+ * 按钮颜色
21
+ * @default 'neutral'
21
22
  */
22
- color?: ThemeColor | 'default' | 'vip';
23
+ color?: ThemeColor | 'vip';
23
24
  /**
24
25
  * 按钮类型
25
26
  * - text: 文字按钮
26
- * - outlined: 描边按钮
27
- * - contained: 实心填充按钮
28
- * - light: 浅亮填充按钮
27
+ * - outlined: 线框按钮
28
+ * - contained: 填充按钮
29
+ * - subtle: 柔和按钮
29
30
  * @default 'outlined'
30
31
  */
31
- variant?: 'outlined' | 'text' | 'contained' | 'light';
32
+ variant?: 'outlined' | 'text' | 'contained' | 'subtle';
32
33
  /**
33
34
  * 在子元素前放在的内容
34
35
  */
package/dist/Card/Card.css CHANGED
@@ -1,8 +1,11 @@
1
1
  .bui-card {
2
+ --bui-card-font-family: var(--bui-font-family);
3
+ --bui-card-font-size: var(--bui-text-size-1);
2
4
  background-color: var(--bui-color-bg-view);
3
5
  border-radius: var(--bui-shape-radius-card);
4
6
  overflow: hidden;
5
- font-family: var(--bui-font-family);
7
+ font-family: var(--bui-card-font-family);
8
+ font-size: var(--bui-card-font-size);
6
9
  }
7
10
  .bui-card-header + .bui-card-content {
8
11
  padding-top: 0;
package/dist/Card/CardContent.css CHANGED
@@ -1,6 +1,4 @@
1
1
  .bui-card-content {
2
- font-size: var(--bui-text-size-2);
3
2
  padding: var(--bui-spacing-lg);
4
3
  color: var(--bui-color-fg-muted);
5
- font-family: var(--bui-font-family);
6
4
  }
package/dist/Card/CardFooter.css CHANGED
@@ -1,9 +1,6 @@
1
1
  .bui-card-footer {
2
- --padding: var(--bui-card-footer-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
3
2
  color: var(--bui-color-fg-muted);
4
- font-size: var(--bui-text-size-1);
5
3
  display: flex;
6
4
  align-items: center;
7
- padding: var(--padding);
8
- font-family: var(--bui-font-family);
5
+ padding: var(--bui-spacing-md) var(--bui-spacing-lg);
9
6
  }
package/dist/Card/CardHeader.css CHANGED
@@ -1,15 +1,13 @@
1
1
  .bui-card-header {
2
- --padding: var(--bui-card-header-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
3
- --end-icon-margin-left: var(--bui-card-header-end-icon-margin-left, 2px);
2
+ --bui-card-font-size: var(--bui-title-size-4);
4
3
  display: flex;
5
4
  align-items: center;
6
5
  flex-direction: row;
7
6
  position: relative;
8
7
  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
9
- font-size: var(--bui-title-size-4);
10
- font-weight: var(--bui-font-weight-medium);
8
+ font-weight: var(--bui-font-weight-bold);
9
+ font-family: var(--bui-card-font-family);
11
10
  color: var(--bui-color-fg-default);
12
- font-family: var(--bui-font-family);
13
11
  }
14
12
  .bui-card-header-title {
15
13
  white-space: nowrap;
package/dist/Modal/Modal.miniapp.d.ts CHANGED
@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
12
12
  keepMounted?: boolean;
13
13
  } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
14
14
  ref?: React.Ref<HTMLDivElement>;
15
- }, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
+ }, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
16
16
  export default Modal;
package/dist/Tabs/Tab.css CHANGED
@@ -4,31 +4,28 @@
4
4
  justify-content: center;
5
5
  white-space: nowrap;
6
6
  width: min-content;
7
- height: var(--bui-tab-height);
7
+ height: 100%;
8
8
  box-sizing: border-box;
9
9
  position: relative;
10
10
  cursor: pointer;
11
- font-size: var(--bui-tab-font-size);
11
+ font-size: var(--bui-tabs-font-size);
12
12
  line-height: var(--bui-line-height);
13
13
  color: var(--bui-tabs-color);
14
14
  padding: var(--bui-tab-padding);
15
- font-family: var(--bui-font-family);
15
+ font-family: var(--bui-tabs-font-family);
16
16
  }
17
17
  .bui-tab-active {
18
- font-size: var(--bui-tab-active-font-size);
19
18
  line-height: var(--bui-line-height);
20
- font-weight: var(--bui-tabs-active-font-weight);
21
- color: var(--bui-tabs-active-color);
19
+ --bui-tabs-color: var(--bui-color-fg-default);
22
20
  }
23
21
  .bui-tab-center {
24
22
  flex: 1 0 0;
25
23
  margin: 0 auto;
26
24
  }
27
25
  .bui-tab-miniapp-active {
28
- font-size: var(--bui-tab-font-size);
29
26
  line-height: 1.5;
30
27
  font-weight: var(--bui-font-weight-medium);
31
- color: var(--bui-tabs-active-color);
28
+ --bui-tabs-color: var(--bui-color-fg-default);
32
29
  position: relative;
33
30
  }
34
31
  .bui-tab-miniapp-active-line {
@@ -46,7 +43,7 @@
46
43
  opacity: 0.5;
47
44
  pointer-events: none;
48
45
  }
49
- .bui-tabline-invisible {
46
+ .bui-indicator-invisible {
50
47
  visibility: hidden;
51
48
  background-color: transparent;
52
49
  }
package/dist/Tabs/Tab.js CHANGED
@@ -100,7 +100,7 @@ const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
100
100
  "div",
101
101
  {
102
102
  className: (0, import_clsx.default)(`${prefixCls}-miniapp-active-line`, {
103
- "bui-tabline-invisible": index !== value
103
+ "bui-indicator-invisible": index !== value
104
104
  })
105
105
  }
106
106
  )
package/dist/Tabs/Tabs.css CHANGED
@@ -1,22 +1,20 @@
1
1
  .bui-tabs {
2
+ --bui-tabs-font-family: var(--bui-font-family);
3
+ --bui-tabs-font-size: var(--bui-text-size-1);
2
4
  --bui-tabs-height: 39px;
3
5
  --bui-tabs-color: var(--bui-color-fg-subtle);
4
- --bui-tabs-active-color: var(--bui-color-fg-default);
5
- --bui-tabs-line-color: var(--bui-color-primary);
6
- --bui-tabs-line-height: 3px;
7
- --bui-tabs-line-width: 18px;
8
- --bui-tabs-line-border-radius: 3px;
9
- --bui-tabs-line-bottom: 0;
10
- --bui-tabs-line-box-shadow: none;
6
+ --bui-tabs-font-weight: var(--bui-font-weight-medium);
7
+ --bui-tabs-indicator-bg: var(--bui-color-primary);
8
+ --bui-tabs-indicator-height: 3px;
9
+ --bui-tabs-indicator-width: 18px;
10
+ --bui-tabs-indicator-border-radius: 3px;
11
+ --bui-tabs-indicator-bottom: 0;
12
+ --bui-tabs-indicator-box-shadow: none;
11
13
  --bui-tabs-mask-width: 12px;
12
14
  --bui-tabs-mask-height: 100%;
13
- --bui-tab-height: 100%;
14
15
  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
15
- --bui-tab-font-size: var(--bui-text-size-1);
16
- --bui-tab-active-font-size: var(--bui-text-size-1);
17
- --bui-tabs-active-font-weight: var(--bui-font-weight-medium);
18
16
  position: relative;
19
- font-family: var(--bui-font-family);
17
+ font-family: var(--bui-tabs-font-family);
20
18
  }
21
19
  .bui-tabs-tabs {
22
20
  height: var(--bui-tabs-height);
@@ -26,20 +24,21 @@
26
24
  align-items: center;
27
25
  position: relative;
28
26
  overflow-x: scroll;
27
+ font-weight: var(--bui-tabs-font-weight);
29
28
  scrollbar-width: none;
30
29
  }
31
30
  .bui-tabs-tabs::-webkit-scrollbar {
32
31
  display: none;
33
32
  }
34
- .bui-tabs-tabline {
33
+ .bui-tabs-indicator {
35
34
  position: absolute;
36
- width: var(--bui-tabs-line-width);
37
- bottom: var(--bui-tabs-line-bottom);
38
- height: var(--bui-tabs-line-height);
35
+ width: var(--bui-tabs-indicator-width);
36
+ bottom: var(--bui-tabs-indicator-bottom);
37
+ height: var(--bui-tabs-indicator-height);
39
38
  color: var(--bui-color-primary);
40
- background: var(--bui-tabs-line-color);
41
- border-radius: var(--bui-tabs-line-border-radius);
42
- box-shadow: var(--bui-tabs-line-box-shadow);
39
+ background: var(--bui-tabs-indicator-bg);
40
+ border-radius: var(--bui-tabs-indicator-border-radius);
41
+ box-shadow: var(--bui-tabs-indicator-box-shadow);
43
42
  }
44
43
  .bui-tabs-content {
45
44
  padding: var(--bui-spacing-lg);
@@ -69,7 +68,7 @@
69
68
  var(--bui-color-bg-view),
70
69
  rgba(255, 255, 255, 0));
71
70
  }
72
- .bui-tabline-invisible {
71
+ .bui-indicator-invisible {
73
72
  visibility: hidden;
74
73
  background-color: transparent;
75
74
  }
package/dist/Tabs/Tabs.js CHANGED
@@ -215,8 +215,8 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
215
215
  "div",
216
216
  {
217
217
  ref: activeLineRef,
218
- className: (0, import_clsx.default)(`${prefixCls}-tabline`, {
219
- "bui-tabline-invisible": import_utils.isMini || !lineData.hasActiveTab
218
+ className: (0, import_clsx.default)(`${prefixCls}-indicator`, {
219
+ "bui-indicator-invisible": import_utils.isMini || !lineData.hasActiveTab
220
220
  }),
221
221
  style: {
222
222
  transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
package/es/Button/Button.css CHANGED
@@ -88,23 +88,32 @@
88
88
  --bui-btn-font-size: var(--bui-title-size-4);
89
89
  width: 100%;
90
90
  }
91
+ .bui-btn-text {
92
+ --bui-btn-bg: none;
93
+ }
91
94
  .bui-btn-text.bui-btn-primary {
92
- color: var(--bui-color-primary);
95
+ --bui-btn-color: var(--bui-color-primary);
93
96
  }
94
97
  .bui-btn-text.bui-btn-success {
95
- color: var(--bui-color-success);
98
+ --bui-btn-color: var(--bui-color-success);
96
99
  }
97
100
  .bui-btn-text.bui-btn-info {
98
- color: var(--bui-color-info);
101
+ --bui-btn-color: var(--bui-color-info);
99
102
  }
100
103
  .bui-btn-text.bui-btn-warning {
101
- color: var(--bui-color-warning);
104
+ --bui-btn-color: var(--bui-color-warning);
102
105
  }
103
106
  .bui-btn-text.bui-btn-danger {
104
- color: var(--bui-color-danger);
107
+ --bui-btn-color: var(--bui-color-danger);
108
+ }
109
+ .bui-btn-text.bui-btn-light {
110
+ --bui-btn-color: var(--bui-color-bg-view);
111
+ }
112
+ .bui-btn-text.bui-btn-dark {
113
+ --bui-btn-color: var(--bui-color-fg-default);
105
114
  }
106
115
  .bui-btn-text.bui-btn-vip {
107
- color: var(--bui-color-vip);
116
+ --bui-btn-color: var(--bui-color-vip);
108
117
  }
109
118
  .bui-btn-contained {
110
119
  --bui-btn-bg: var(--bui-color-neutral-5);
@@ -149,6 +158,14 @@
149
158
  var(--bui-color-danger-start) 0%,
150
159
  var(--bui-color-danger-end) 100%);
151
160
  }
161
+ .bui-btn-contained.bui-btn-light {
162
+ --bui-btn-color: var(--bui-color-fg-default);
163
+ --bui-btn-bg: var(--bui-color-bg-view);
164
+ }
165
+ .bui-btn-contained.bui-btn-dark {
166
+ --bui-btn-color: var(--bui-color-bg-view);
167
+ --bui-btn-bg: var(--bui-color-fg-default);
168
+ }
152
169
  .bui-btn-contained.bui-btn-vip {
153
170
  --bui-btn-color: #582331;
154
171
  --bui-btn-bg:
@@ -158,6 +175,7 @@
158
175
  var(--bui-color-vip-end) 100%);
159
176
  }
160
177
  .bui-btn-outlined {
178
+ --bui-btn-bg: transparent;
161
179
  --bui-btn-border: 1px solid var(--bui-color-neutral-4);
162
180
  }
163
181
  .bui-btn-outlined.bui-btn-primary {
@@ -180,39 +198,48 @@
180
198
  color: var(--bui-color-danger);
181
199
  border-color: var(--bui-color-danger);
182
200
  }
201
+ .bui-btn-outlined.bui-btn-light {
202
+ --bui-btn-color: var(--bui-color-bg-view);
203
+ --bui-btn-border: solid 1px var(--bui-color-bg-view);
204
+ }
205
+ .bui-btn-outlined.bui-btn-dark {
206
+ --bui-btn-color: var(--bui-color-fg-default);
207
+ --bui-btn-border: solid 1px var(--bui-color-fg-default);
208
+ }
183
209
  .bui-btn-outlined.bui-btn-vip {
184
210
  color: var(--bui-color-vip);
185
211
  border-color: var(--bui-color-vip);
186
212
  }
187
- .bui-btn-light {
213
+ .bui-btn-subtle {
188
214
  --bui-btn-bg: var(--bui-color-gray-light);
189
215
  }
190
- .bui-btn-light.bui-btn-warning {
191
- background-image: none;
216
+ .bui-btn-subtle.bui-btn-warning {
192
217
  color: var(--bui-color-warning);
193
- background-color: var(--bui-color-warning-light);
218
+ background: var(--bui-color-warning-light);
194
219
  }
195
- .bui-btn-light.bui-btn-primary {
196
- background-image: none;
220
+ .bui-btn-subtle.bui-btn-primary {
197
221
  color: var(--bui-color-primary);
198
- background-color: var(--bui-color-primary-light);
222
+ background: var(--bui-color-primary-light);
199
223
  }
200
- .bui-btn-light.bui-btn-info {
201
- background-image: none;
224
+ .bui-btn-subtle.bui-btn-info {
202
225
  color: var(--bui-color-info);
203
- background-color: var(--bui-color-info-light);
226
+ background: var(--bui-color-info-light);
204
227
  }
205
- .bui-btn-light.bui-btn-success {
206
- background-image: none;
228
+ .bui-btn-subtle.bui-btn-success {
207
229
  color: var(--bui-color-success);
208
- background-color: var(--bui-color-success-light);
230
+ background: var(--bui-color-success-light);
209
231
  }
210
- .bui-btn-light.bui-btn-danger {
211
- background-image: none;
232
+ .bui-btn-subtle.bui-btn-danger {
212
233
  color: var(--bui-color-danger);
213
- background-color: var(--bui-color-danger-light);
234
+ background: var(--bui-color-danger-light);
235
+ }
236
+ .bui-btn-subtle.bui-btn-light {
237
+ --bui-btn-color: var(--bui-color-bg-view);
238
+ }
239
+ .bui-btn-subtle.bui-btn-dark {
240
+ --bui-btn-color: var(--bui-color-fg-default);
214
241
  }
215
- .bui-btn-light.bui-btn-vip {
242
+ .bui-btn-subtle.bui-btn-vip {
216
243
  position: relative;
217
244
  --bui-btn-color: var(--bui-color-vip);
218
245
  --bui-btn-bg: rgba(255, 134, 110, 0.3);
package/es/Button/Button.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import './Button.less';
3
2
  import { ButtonProps } from './Button.types';
3
+ import './Button.less';
4
4
  declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
5
5
  export default Button;
package/es/Button/Button.js CHANGED
@@ -80,7 +80,6 @@ Button.displayName = "BuiButton";
80
80
  Button.defaultProps = {
81
81
  size: "medium",
82
82
  variant: "outlined",
83
- color: "default",
84
83
  disabled: false
85
84
  };
86
85
  var Button_default = Button;
package/es/Button/Button.types.d.ts CHANGED
@@ -16,19 +16,20 @@ export type ButtonProps<D extends React.ElementType = 'button', P = {}> = Overri
16
16
  * @default 'medium'
17
17
  */
18
18
  size?: 'small' | 'medium' | 'large' | 'full';
19
- /** 按钮颜色
20
- * @default 'default'
19
+ /**
20
+ * 按钮颜色
21
+ * @default 'neutral'
21
22
  */
22
- color?: ThemeColor | 'default' | 'vip';
23
+ color?: ThemeColor | 'vip';
23
24
  /**
24
25
  * 按钮类型
25
26
  * - text: 文字按钮
26
- * - outlined: 描边按钮
27
- * - contained: 实心填充按钮
28
- * - light: 浅亮填充按钮
27
+ * - outlined: 线框按钮
28
+ * - contained: 填充按钮
29
+ * - subtle: 柔和按钮
29
30
  * @default 'outlined'
30
31
  */
31
- variant?: 'outlined' | 'text' | 'contained' | 'light';
32
+ variant?: 'outlined' | 'text' | 'contained' | 'subtle';
32
33
  /**
33
34
  * 在子元素前放在的内容
34
35
  */
package/es/Card/Card.css CHANGED
@@ -1,8 +1,11 @@
1
1
  .bui-card {
2
+ --bui-card-font-family: var(--bui-font-family);
3
+ --bui-card-font-size: var(--bui-text-size-1);
2
4
  background-color: var(--bui-color-bg-view);
3
5
  border-radius: var(--bui-shape-radius-card);
4
6
  overflow: hidden;
5
- font-family: var(--bui-font-family);
7
+ font-family: var(--bui-card-font-family);
8
+ font-size: var(--bui-card-font-size);
6
9
  }
7
10
  .bui-card-header + .bui-card-content {
8
11
  padding-top: 0;
package/es/Card/CardContent.css CHANGED
@@ -1,6 +1,4 @@
1
1
  .bui-card-content {
2
- font-size: var(--bui-text-size-2);
3
2
  padding: var(--bui-spacing-lg);
4
3
  color: var(--bui-color-fg-muted);
5
- font-family: var(--bui-font-family);
6
4
  }
package/es/Card/CardFooter.css CHANGED
@@ -1,9 +1,6 @@
1
1
  .bui-card-footer {
2
- --padding: var(--bui-card-footer-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
3
2
  color: var(--bui-color-fg-muted);
4
- font-size: var(--bui-text-size-1);
5
3
  display: flex;
6
4
  align-items: center;
7
- padding: var(--padding);
8
- font-family: var(--bui-font-family);
5
+ padding: var(--bui-spacing-md) var(--bui-spacing-lg);
9
6
  }
package/es/Card/CardHeader.css CHANGED
@@ -1,15 +1,13 @@
1
1
  .bui-card-header {
2
- --padding: var(--bui-card-header-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
3
- --end-icon-margin-left: var(--bui-card-header-end-icon-margin-left, 2px);
2
+ --bui-card-font-size: var(--bui-title-size-4);
4
3
  display: flex;
5
4
  align-items: center;
6
5
  flex-direction: row;
7
6
  position: relative;
8
7
  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
9
- font-size: var(--bui-title-size-4);
10
- font-weight: var(--bui-font-weight-medium);
8
+ font-weight: var(--bui-font-weight-bold);
9
+ font-family: var(--bui-card-font-family);
11
10
  color: var(--bui-color-fg-default);
12
- font-family: var(--bui-font-family);
13
11
  }
14
12
  .bui-card-header-title {
15
13
  white-space: nowrap;
package/es/Tabs/Tab.css CHANGED
@@ -4,31 +4,28 @@
4
4
  justify-content: center;
5
5
  white-space: nowrap;
6
6
  width: min-content;
7
- height: var(--bui-tab-height);
7
+ height: 100%;
8
8
  box-sizing: border-box;
9
9
  position: relative;
10
10
  cursor: pointer;
11
- font-size: var(--bui-tab-font-size);
11
+ font-size: var(--bui-tabs-font-size);
12
12
  line-height: var(--bui-line-height);
13
13
  color: var(--bui-tabs-color);
14
14
  padding: var(--bui-tab-padding);
15
- font-family: var(--bui-font-family);
15
+ font-family: var(--bui-tabs-font-family);
16
16
  }
17
17
  .bui-tab-active {
18
- font-size: var(--bui-tab-active-font-size);
19
18
  line-height: var(--bui-line-height);
20
- font-weight: var(--bui-tabs-active-font-weight);
21
- color: var(--bui-tabs-active-color);
19
+ --bui-tabs-color: var(--bui-color-fg-default);
22
20
  }
23
21
  .bui-tab-center {
24
22
  flex: 1 0 0;
25
23
  margin: 0 auto;
26
24
  }
27
25
  .bui-tab-miniapp-active {
28
- font-size: var(--bui-tab-font-size);
29
26
  line-height: 1.5;
30
27
  font-weight: var(--bui-font-weight-medium);
31
- color: var(--bui-tabs-active-color);
28
+ --bui-tabs-color: var(--bui-color-fg-default);
32
29
  position: relative;
33
30
  }
34
31
  .bui-tab-miniapp-active-line {
@@ -46,7 +43,7 @@
46
43
  opacity: 0.5;
47
44
  pointer-events: none;
48
45
  }
49
- .bui-tabline-invisible {
46
+ .bui-indicator-invisible {
50
47
  visibility: hidden;
51
48
  background-color: transparent;
52
49
  }
package/es/Tabs/Tab.js CHANGED
@@ -70,7 +70,7 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
70
70
  "div",
71
71
  {
72
72
  className: clsx(`${prefixCls}-miniapp-active-line`, {
73
- "bui-tabline-invisible": index !== value
73
+ "bui-indicator-invisible": index !== value
74
74
  })
75
75
  }
76
76
  )
package/es/Tabs/Tabs.css CHANGED
@@ -1,22 +1,20 @@
1
1
  .bui-tabs {
2
+ --bui-tabs-font-family: var(--bui-font-family);
3
+ --bui-tabs-font-size: var(--bui-text-size-1);
2
4
  --bui-tabs-height: 39px;
3
5
  --bui-tabs-color: var(--bui-color-fg-subtle);
4
- --bui-tabs-active-color: var(--bui-color-fg-default);
5
- --bui-tabs-line-color: var(--bui-color-primary);
6
- --bui-tabs-line-height: 3px;
7
- --bui-tabs-line-width: 18px;
8
- --bui-tabs-line-border-radius: 3px;
9
- --bui-tabs-line-bottom: 0;
10
- --bui-tabs-line-box-shadow: none;
6
+ --bui-tabs-font-weight: var(--bui-font-weight-medium);
7
+ --bui-tabs-indicator-bg: var(--bui-color-primary);
8
+ --bui-tabs-indicator-height: 3px;
9
+ --bui-tabs-indicator-width: 18px;
10
+ --bui-tabs-indicator-border-radius: 3px;
11
+ --bui-tabs-indicator-bottom: 0;
12
+ --bui-tabs-indicator-box-shadow: none;
11
13
  --bui-tabs-mask-width: 12px;
12
14
  --bui-tabs-mask-height: 100%;
13
- --bui-tab-height: 100%;
14
15
  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
15
- --bui-tab-font-size: var(--bui-text-size-1);
16
- --bui-tab-active-font-size: var(--bui-text-size-1);
17
- --bui-tabs-active-font-weight: var(--bui-font-weight-medium);
18
16
  position: relative;
19
- font-family: var(--bui-font-family);
17
+ font-family: var(--bui-tabs-font-family);
20
18
  }
21
19
  .bui-tabs-tabs {
22
20
  height: var(--bui-tabs-height);
@@ -26,20 +24,21 @@
26
24
  align-items: center;
27
25
  position: relative;
28
26
  overflow-x: scroll;
27
+ font-weight: var(--bui-tabs-font-weight);
29
28
  scrollbar-width: none;
30
29
  }
31
30
  .bui-tabs-tabs::-webkit-scrollbar {
32
31
  display: none;
33
32
  }
34
- .bui-tabs-tabline {
33
+ .bui-tabs-indicator {
35
34
  position: absolute;
36
- width: var(--bui-tabs-line-width);
37
- bottom: var(--bui-tabs-line-bottom);
38
- height: var(--bui-tabs-line-height);
35
+ width: var(--bui-tabs-indicator-width);
36
+ bottom: var(--bui-tabs-indicator-bottom);
37
+ height: var(--bui-tabs-indicator-height);
39
38
  color: var(--bui-color-primary);
40
- background: var(--bui-tabs-line-color);
41
- border-radius: var(--bui-tabs-line-border-radius);
42
- box-shadow: var(--bui-tabs-line-box-shadow);
39
+ background: var(--bui-tabs-indicator-bg);
40
+ border-radius: var(--bui-tabs-indicator-border-radius);
41
+ box-shadow: var(--bui-tabs-indicator-box-shadow);
43
42
  }
44
43
  .bui-tabs-content {
45
44
  padding: var(--bui-spacing-lg);
@@ -69,7 +68,7 @@
69
68
  var(--bui-color-bg-view),
70
69
  rgba(255, 255, 255, 0));
71
70
  }
72
- .bui-tabline-invisible {
71
+ .bui-indicator-invisible {
73
72
  visibility: hidden;
74
73
  background-color: transparent;
75
74
  }
package/es/Tabs/Tabs.js CHANGED
@@ -196,8 +196,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
196
196
  "div",
197
197
  {
198
198
  ref: activeLineRef,
199
- className: clsx(`${prefixCls}-tabline`, {
200
- "bui-tabline-invisible": isMini || !lineData.hasActiveTab
199
+ className: clsx(`${prefixCls}-indicator`, {
200
+ "bui-indicator-invisible": isMini || !lineData.hasActiveTab
201
201
  }),
202
202
  style: {
203
203
  transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/react",
3
- "version": "1.4.5-beta.0",
3
+ "version": "1.4.5-beta.1",
4
4
  "description": "React components for building mobile application",
5
5
  "homepage": "http://bui.taopiaopiao.com",
6
6
  "license": "MIT",
@@ -33,10 +33,10 @@
33
33
  "clsx": "^2.1.1",
34
34
  "dayjs": "^1.11.7",
35
35
  "swiper": "^8.1.5",
36
- "@bifrostui/icons": "1.4.5-beta.0",
37
- "@bifrostui/types": "1.4.5-beta.0",
38
- "@bifrostui/utils": "1.4.5-beta.0",
39
- "@bifrostui/styles": "1.4.5-beta.0"
36
+ "@bifrostui/icons": "1.4.5-beta.1",
37
+ "@bifrostui/types": "1.4.5-beta.1",
38
+ "@bifrostui/styles": "1.4.5-beta.1",
39
+ "@bifrostui/utils": "1.4.5-beta.1"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@tarojs/components": "^3.0.0",