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

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 (27) 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/Tabs/Tab.css +6 -13
  10. package/dist/Tabs/Tab.js +2 -3
  11. package/dist/Tabs/Tabs.css +19 -20
  12. package/dist/Tabs/Tabs.js +5 -6
  13. package/dist/Tabs/Tabs.types.d.ts +0 -4
  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 -13
  23. package/es/Tabs/Tab.js +2 -3
  24. package/es/Tabs/Tabs.css +19 -20
  25. package/es/Tabs/Tabs.js +5 -6
  26. package/es/Tabs/Tabs.types.d.ts +0 -4
  27. 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/Tabs/Tab.css CHANGED
@@ -4,31 +4,24 @@
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);
22
- }
23
- .bui-tab-center {
24
- flex: 1 0 0;
25
- margin: 0 auto;
19
+ --bui-tabs-color: var(--bui-color-fg-default);
26
20
  }
27
21
  .bui-tab-miniapp-active {
28
- font-size: var(--bui-tab-font-size);
29
22
  line-height: 1.5;
30
23
  font-weight: var(--bui-font-weight-medium);
31
- color: var(--bui-tabs-active-color);
24
+ --bui-tabs-color: var(--bui-color-fg-default);
32
25
  position: relative;
33
26
  }
34
27
  .bui-tab-miniapp-active-line {
@@ -46,7 +39,7 @@
46
39
  opacity: 0.5;
47
40
  pointer-events: none;
48
41
  }
49
- .bui-tabline-invisible {
42
+ .bui-indicator-invisible {
50
43
  visibility: hidden;
51
44
  background-color: transparent;
52
45
  }
package/dist/Tabs/Tab.js CHANGED
@@ -71,14 +71,13 @@ const defaultProps = {
71
71
  const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
72
72
  const _a = __spreadValues(__spreadValues({}, defaultProps), props), { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
73
73
  const tabsContext = import_react.default.useContext(import_TabsContext.default);
74
- const { value, align, triggerChange } = tabsContext;
74
+ const { value, triggerChange } = tabsContext;
75
75
  return /* @__PURE__ */ import_react.default.createElement(
76
76
  "div",
77
77
  __spreadProps(__spreadValues({
78
78
  ref,
79
79
  className: (0, import_clsx.default)(
80
80
  prefixCls,
81
- align !== "start" && `${prefixCls}-${align}`,
82
81
  {
83
82
  [`${prefixCls}-active`]: !import_utils.isMini && index === value,
84
83
  [`${prefixCls}-miniapp-active`]: import_utils.isMini && index === value,
@@ -100,7 +99,7 @@ const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
100
99
  "div",
101
100
  {
102
101
  className: (0, import_clsx.default)(`${prefixCls}-miniapp-active-line`, {
103
- "bui-tabline-invisible": index !== value
102
+ "bui-indicator-invisible": index !== value
104
103
  })
105
104
  }
106
105
  )
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
@@ -65,11 +65,10 @@ var import_bound = __toESM(require("./utils/bound"));
65
65
  var import_Tabs2 = require("./Tabs.css");
66
66
  const prefixCls = "bui-tabs";
67
67
  const defaultProps = {
68
- align: "center",
69
68
  tabs: []
70
69
  };
71
70
  const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
72
- const _a = __spreadValues(__spreadValues({}, defaultProps), props), { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
71
+ const _a = __spreadValues(__spreadValues({}, defaultProps), props), { children, className, value, tabs, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
73
72
  const [active, setActive] = (0, import_react.useState)("");
74
73
  const tabsRef = (0, import_react.useRef)(null);
75
74
  const activeLineRef = (0, import_react.useRef)(null);
@@ -193,8 +192,8 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
193
192
  }
194
193
  };
195
194
  const providerValue = (0, import_react.useMemo)(() => {
196
- return { value, align, triggerChange: handleClick };
197
- }, [value, align, children, handleClick]);
195
+ return { value, triggerChange: handleClick };
196
+ }, [value, children, handleClick]);
198
197
  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(prefixCls, className) }, others), /* @__PURE__ */ import_react.default.createElement(
199
198
  "div",
200
199
  {
@@ -215,8 +214,8 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
215
214
  "div",
216
215
  {
217
216
  ref: activeLineRef,
218
- className: (0, import_clsx.default)(`${prefixCls}-tabline`, {
219
- "bui-tabline-invisible": import_utils.isMini || !lineData.hasActiveTab
217
+ className: (0, import_clsx.default)(`${prefixCls}-indicator`, {
218
+ "bui-indicator-invisible": import_utils.isMini || !lineData.hasActiveTab
220
219
  }),
221
220
  style: {
222
221
  transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
package/dist/Tabs/Tabs.types.d.ts CHANGED
@@ -26,10 +26,6 @@ export type TabsProps<D extends React.ElementType = 'div', P = {}> = OverridePro
26
26
  * 切换面板的数据
27
27
  */
28
28
  tabs?: ITabItem[];
29
- /**
30
- * 对齐方式，默认为center
31
- */
32
- align?: ITabAlign;
33
29
  /**
34
30
  * 切换面板的回调
35
31
  */
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,24 @@
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);
22
- }
23
- .bui-tab-center {
24
- flex: 1 0 0;
25
- margin: 0 auto;
19
+ --bui-tabs-color: var(--bui-color-fg-default);
26
20
  }
27
21
  .bui-tab-miniapp-active {
28
- font-size: var(--bui-tab-font-size);
29
22
  line-height: 1.5;
30
23
  font-weight: var(--bui-font-weight-medium);
31
- color: var(--bui-tabs-active-color);
24
+ --bui-tabs-color: var(--bui-color-fg-default);
32
25
  position: relative;
33
26
  }
34
27
  .bui-tab-miniapp-active-line {
@@ -46,7 +39,7 @@
46
39
  opacity: 0.5;
47
40
  pointer-events: none;
48
41
  }
49
- .bui-tabline-invisible {
42
+ .bui-indicator-invisible {
50
43
  visibility: hidden;
51
44
  background-color: transparent;
52
45
  }
package/es/Tabs/Tab.js CHANGED
@@ -41,14 +41,13 @@ const defaultProps = {
41
41
  const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
42
42
  const _a = __spreadValues(__spreadValues({}, defaultProps), props), { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
43
43
  const tabsContext = React.useContext(TabsContext);
44
- const { value, align, triggerChange } = tabsContext;
44
+ const { value, triggerChange } = tabsContext;
45
45
  return /* @__PURE__ */ React.createElement(
46
46
  "div",
47
47
  __spreadProps(__spreadValues({
48
48
  ref,
49
49
  className: clsx(
50
50
  prefixCls,
51
- align !== "start" && `${prefixCls}-${align}`,
52
51
  {
53
52
  [`${prefixCls}-active`]: !isMini && index === value,
54
53
  [`${prefixCls}-miniapp-active`]: isMini && index === value,
@@ -70,7 +69,7 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
70
69
  "div",
71
70
  {
72
71
  className: clsx(`${prefixCls}-miniapp-active-line`, {
73
- "bui-tabline-invisible": index !== value
72
+ "bui-indicator-invisible": index !== value
74
73
  })
75
74
  }
76
75
  )
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
@@ -46,11 +46,10 @@ import bound from "./utils/bound";
46
46
  import "./Tabs.css";
47
47
  const prefixCls = "bui-tabs";
48
48
  const defaultProps = {
49
- align: "center",
50
49
  tabs: []
51
50
  };
52
51
  const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
53
- const _a = __spreadValues(__spreadValues({}, defaultProps), props), { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
52
+ const _a = __spreadValues(__spreadValues({}, defaultProps), props), { children, className, value, tabs, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
54
53
  const [active, setActive] = useState("");
55
54
  const tabsRef = useRef(null);
56
55
  const activeLineRef = useRef(null);
@@ -174,8 +173,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
174
173
  }
175
174
  };
176
175
  const providerValue = useMemo(() => {
177
- return { value, align, triggerChange: handleClick };
178
- }, [value, align, children, handleClick]);
176
+ return { value, triggerChange: handleClick };
177
+ }, [value, children, handleClick]);
179
178
  return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), /* @__PURE__ */ React.createElement(
180
179
  "div",
181
180
  {
@@ -196,8 +195,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
196
195
  "div",
197
196
  {
198
197
  ref: activeLineRef,
199
- className: clsx(`${prefixCls}-tabline`, {
200
- "bui-tabline-invisible": isMini || !lineData.hasActiveTab
198
+ className: clsx(`${prefixCls}-indicator`, {
199
+ "bui-indicator-invisible": isMini || !lineData.hasActiveTab
201
200
  }),
202
201
  style: {
203
202
  transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
package/es/Tabs/Tabs.types.d.ts CHANGED
@@ -26,10 +26,6 @@ export type TabsProps<D extends React.ElementType = 'div', P = {}> = OverridePro
26
26
  * 切换面板的数据
27
27
  */
28
28
  tabs?: ITabItem[];
29
- /**
30
- * 对齐方式，默认为center
31
- */
32
- align?: ITabAlign;
33
29
  /**
34
30
  * 切换面板的回调
35
31
  */
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.2",
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.2",
37
+ "@bifrostui/styles": "1.4.5-beta.2",
38
+ "@bifrostui/types": "1.4.5-beta.2",
39
+ "@bifrostui/utils": "1.4.5-beta.2"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@tarojs/components": "^3.0.0",