@arcblock/ux 1.16.41 → 1.16.44

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 (9) hide show
  1. package/lib/ActivityIndicator/index.js +61 -15
  2. package/lib/Button/wrap.js +62 -32
  3. package/lib/Colors/themes/default.js +4 -3
  4. package/lib/Theme/index.js +5 -2
  5. package/package.json +5 -4
  6. package/src/ActivityIndicator/index.js +43 -88
  7. package/src/Button/wrap.js +38 -25
  8. package/src/Colors/themes/default.js +3 -2
  9. package/src/Theme/index.js +3 -1
package/lib/ActivityIndicator/index.js CHANGED
@@ -19,7 +19,8 @@ var _Logo = _interopRequireDefault(require("../Logo"));
19
19
 
20
20
  var _Colors = _interopRequireDefault(require("../Colors"));
21
21
 
22
- const _excluded = ["messages", "interval"];
22
+ const _excluded = ["messages", "interval"],
23
+ _excluded2 = ["size", "orbitColor", "atomColor", "duration"];
23
24
 
24
25
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
26
 
@@ -59,19 +60,21 @@ function ActivityIndicator(_ref) {
59
60
  transform: 'scale(0.6)'
60
61
  },
61
62
  showText: false
62
- }), /*#__PURE__*/_react.default.createElement("div", {
63
- className: "pm-loader-orbit-1"
64
- }, /*#__PURE__*/_react.default.createElement("div", {
65
- className: "pm-loader-atom-1"
66
- })), /*#__PURE__*/_react.default.createElement("div", {
67
- className: "pm-loader-orbit-2"
68
- }, /*#__PURE__*/_react.default.createElement("div", {
69
- className: "pm-loader-atom-2"
70
- })), /*#__PURE__*/_react.default.createElement("div", {
71
- className: "pm-loader-orbit-3"
72
- }, /*#__PURE__*/_react.default.createElement("div", {
73
- className: "pm-loader-atom-3"
74
- })))));
63
+ }), /*#__PURE__*/_react.default.createElement(Orbit, {
64
+ size: 56,
65
+ orbitColor: _green.default[500],
66
+ atomColor: _green.default[500],
67
+ duration: 1
68
+ }), /*#__PURE__*/_react.default.createElement(Orbit, {
69
+ size: 80,
70
+ orbitColor: _blue.default[800],
71
+ atomColor: _blue.default[800],
72
+ duration: 1.5
73
+ }), /*#__PURE__*/_react.default.createElement(Orbit, {
74
+ size: 100,
75
+ orbitColor: _Colors.default.grey[900],
76
+ atomColor: _Colors.default.grey[900]
77
+ }))));
75
78
  }
76
79
 
77
80
  ActivityIndicator.propTypes = {
@@ -86,4 +89,47 @@ ActivityIndicator.defaultProps = {
86
89
  const Div = _styledComponents.default.div.withConfig({
87
90
  displayName: "ActivityIndicator__Div",
88
91
  componentId: "sc-rsk6jb-0"
89
- })(["&&{padding:20px;width:100%;height:100%;min-height:360px;z-index:100;transition:opacity 0.5s linear;display:flex;align-items:center;flex-direction:column;justify-content:center;}@keyframes orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.pm-loader-text{color:", ";font-size:14px;text-align:center;position:relative;height:70px;-webkit-user-select:none;}.pm-loader-container{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;}.pm-loader-atoms{width:100px;height:100px;display:flex;position:relative;align-items:center;justify-content:center;}.pm-loader-center-atom{top:32px;left:32px;width:32px;height:32px;position:absolute;border-radius:50%;}.pm-loader-orbit-1{top:20px;left:20px;width:56px;height:56px;position:absolute;border-radius:50%;border:1px solid ", ";}.pm-loader-orbit-2{top:8px;left:8px;width:80px;height:80px;border-radius:50%;position:absolute;border:1px solid ", ";}.pm-loader-orbit-3{top:-4px;left:-4px;width:104px;height:104px;position:absolute;border-radius:50%;border:1px solid ", ";}.pm-loader-atom-1{width:7px;height:7px;margin-top:4px;margin-left:4px;border-radius:50%;background-color:", ";transform-origin:24px 24px;animation:orbit 1s infinite;animation-timing-function:linear;-webkit-transform-origin:24px 24px;}.pm-loader-atom-2{width:7px;height:7px;margin-top:8px;margin-left:8px;border-radius:50%;background-color:", ";transform-origin:32px 32px;animation:orbit 2s infinite;animation-timing-function:linear;-webkit-transform-origin:32px 32px;}.pm-loader-atom-3{width:7px;height:7px;margin-top:11px;margin-left:11px;border-radius:50%;background-color:", ";transform-origin:41px 41px;animation:orbit 3s infinite;animation-timing-function:linear;-webkit-transform-origin:41px 41px;}"], _Colors.default.grey[900], _green.default[500], _blue.default[800], _Colors.default.grey[900], _green.default[500], _blue.default[800], _Colors.default.grey[900]);
92
+ })(["&&{box-sizing:border-box;padding:20px;width:100%;height:100%;min-height:360px;z-index:100;transition:opacity 0.5s linear;display:flex;align-items:center;flex-direction:column;justify-content:center;}.pm-loader-text{color:", ";font-size:14px;text-align:center;position:relative;height:70px;-webkit-user-select:none;}.pm-loader-container{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;}.pm-loader-atoms{width:100px;height:100px;display:flex;position:relative;align-items:center;justify-content:center;}"], _Colors.default.grey[900]);
93
+
94
+ const Orbit = _ref2 => {
95
+ let {
96
+ size,
97
+ orbitColor,
98
+ atomColor,
99
+ duration
100
+ } = _ref2,
101
+ rest = _objectWithoutProperties(_ref2, _excluded2);
102
+
103
+ return /*#__PURE__*/_react.default.createElement(OrbitRoot, Object.assign({
104
+ $duration: duration,
105
+ style: {
106
+ width: size,
107
+ height: size,
108
+ border: "1px solid ".concat(orbitColor)
109
+ }
110
+ }, rest), /*#__PURE__*/_react.default.createElement("div", {
111
+ style: {
112
+ background: atomColor
113
+ }
114
+ }));
115
+ };
116
+
117
+ Orbit.propTypes = {
118
+ size: _propTypes.default.number.isRequired,
119
+ orbitColor: _propTypes.default.string.isRequired,
120
+ atomColor: _propTypes.default.string.isRequired,
121
+ duration: _propTypes.default.number
122
+ };
123
+ Orbit.defaultProps = {
124
+ duration: 2
125
+ };
126
+
127
+ const OrbitRoot = _styledComponents.default.div.withConfig({
128
+ displayName: "ActivityIndicator__OrbitRoot",
129
+ componentId: "sc-rsk6jb-1"
130
+ })(["@keyframes orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}position:absolute;border-radius:50%;animation:orbit ", "s infinite;animation-timing-function:linear;transform-origin:center;> div{position:absolute;top:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;}"], _ref3 => {
131
+ let {
132
+ $duration
133
+ } = _ref3;
134
+ return $duration;
135
+ });
package/lib/Button/wrap.js CHANGED
@@ -15,10 +15,16 @@ var _Colors = _interopRequireDefault(require("../Colors"));
15
15
 
16
16
  var _Util = require("../Util");
17
17
 
18
- const _excluded = ["children", "rounded", "loading", "disabled", "style", "forwardedRef"];
18
+ const _excluded = ["children", "rounded", "loading", "disabled", "style", "forwardedRef", "color"];
19
19
 
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
21
 
22
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
23
+
24
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
25
+
26
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
27
+
22
28
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
23
29
 
24
30
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -33,7 +39,8 @@ function _default(BaseComponent) {
33
39
  loading,
34
40
  disabled,
35
41
  style,
36
- forwardedRef
42
+ forwardedRef,
43
+ color
37
44
  } = newProps,
38
45
  rest = _objectWithoutProperties(newProps, _excluded);
39
46
 
@@ -55,36 +62,59 @@ function _default(BaseComponent) {
55
62
  const styles = Object.assign({}, style, {
56
63
  boxShadow: 'none',
57
64
  textTransform: 'capitalize'
58
- });
59
-
60
- if (rest.color === 'danger') {
61
- if (rest.variant === 'contained') {
62
- styles.backgroundColor = _Colors.default.error.main;
63
- styles.color = _Colors.default.common.white;
64
- } else {
65
- styles.borderColor = _Colors.default.error.main;
66
- styles.color = _Colors.default.error.main;
67
- }
68
- }
65
+ }); // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
66
+ // 这里扩展 danger/warning/reverse 三种 color
67
+
68
+ let _rest = rest;
69
+
70
+ switch (color) {
71
+ case 'error':
72
+ case 'danger':
73
+ {
74
+ if (rest.variant === 'contained') {
75
+ styles.backgroundColor = _Colors.default.error.main;
76
+ styles.color = _Colors.default.common.white;
77
+ } else {
78
+ styles.borderColor = _Colors.default.error.main;
79
+ styles.color = _Colors.default.error.main;
80
+ }
81
+
82
+ break;
83
+ }
84
+
85
+ case 'warning':
86
+ {
87
+ if (rest.variant === 'contained') {
88
+ styles.backgroundColor = _Colors.default.warning.main;
89
+ styles.color = _Colors.default.common.white;
90
+ } else {
91
+ styles.borderColor = _Colors.default.warning.main;
92
+ styles.color = _Colors.default.warning.main;
93
+ }
94
+
95
+ break;
96
+ }
97
+
98
+ case 'reverse':
99
+ {
100
+ if (rest.variant === 'contained') {
101
+ styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
102
+ styles.color = _Colors.default.grey[900];
103
+ } else {
104
+ styles.borderColor = _Colors.default.grey[900];
105
+ styles.color = _Colors.default.grey[900];
106
+ }
107
+
108
+ break;
109
+ }
110
+ // 除扩展的几种 color 外, 由 mui button 自己处理 color
69
111
 
70
- if (!rest.color || rest.color === 'default') {
71
- if (rest.variant === 'contained') {
72
- styles.backgroundColor = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
73
- styles.color = _Colors.default.common.white;
74
- } else {
75
- styles.borderColor = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
76
- styles.color = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
77
- }
78
- }
79
-
80
- if (rest.color === 'reverse') {
81
- if (rest.variant === 'contained') {
82
- styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
83
- styles.color = _Colors.default.grey[900];
84
- } else {
85
- styles.borderColor = _Colors.default.grey[900];
86
- styles.color = _Colors.default.grey[900];
87
- }
112
+ default:
113
+ {
114
+ _rest = _objectSpread(_objectSpread({}, _rest), {}, {
115
+ color
116
+ });
117
+ }
88
118
  }
89
119
 
90
120
  if (rounded) {
@@ -96,7 +126,7 @@ function _default(BaseComponent) {
96
126
  style: styles,
97
127
  ref: forwardedRef,
98
128
  disabled: isDisabled
99
- }, rest), loading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
129
+ }, _rest), loading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
100
130
  size: loadingSize,
101
131
  style: {
102
132
  marginRight: 5
package/lib/Colors/themes/default.js CHANGED
@@ -19,12 +19,12 @@ const colors = {
19
19
  white: '#fff'
20
20
  },
21
21
  primary: {
22
- main: '#4F6AF6',
22
+ main: '#3773F2',
23
23
  contrastText: '#fff'
24
24
  },
25
25
  // override
26
26
  secondary: {
27
- main: '#31AB86',
27
+ main: '#16CED1',
28
28
  contrastText: '#fff'
29
29
  },
30
30
  // override
@@ -78,7 +78,8 @@ const colors = {
78
78
  did: {
79
79
  primary: '#4598FA',
80
80
  secondary: '#49C3AD'
81
- }
81
+ } // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
82
+
82
83
  };
83
84
  var _default = colors;
84
85
  exports.default = _default;
package/lib/Theme/index.js CHANGED
@@ -7,6 +7,10 @@ exports.create = void 0;
7
7
 
8
8
  var _styles = require("@material-ui/core/styles");
9
9
 
10
+ require("@fontsource/lato/400.css");
11
+
12
+ require("@fontsource/lato/700.css");
13
+
10
14
  var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
11
15
 
12
16
  var _Colors = _interopRequireDefault(require("../Colors"));
@@ -58,12 +62,11 @@ const create = function create() {
58
62
  gray: mode === 'light' ? _Colors.default.grey[500] : _Colors.default.grey[300]
59
63
  },
60
64
  fontSize: 16,
61
- fontFamily: ['Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
65
+ fontFamily: ['Lato', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
62
66
  }, typography || {}),
63
67
  overrides: Object.assign({
64
68
  MuiButton: {
65
69
  root: {
66
- borderRadius: 0,
67
70
  boxShadow: 'none'
68
71
  }
69
72
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "1.16.41",
3
+ "version": "1.16.44",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -53,11 +53,12 @@
53
53
  "react": ">=16.12.0",
54
54
  "react-ga": "^2.7.0"
55
55
  },
56
- "gitHead": "70983fb3757f3d4e0cb552f2035fe787f25f65d2",
56
+ "gitHead": "912f6b79061afd403605e241044579d60a1149fc",
57
57
  "dependencies": {
58
- "@arcblock/icons": "^1.16.41",
59
- "@arcblock/react-hooks": "^1.16.41",
58
+ "@arcblock/icons": "^1.16.44",
59
+ "@arcblock/react-hooks": "^1.16.44",
60
60
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
61
+ "@fontsource/lato": "^4.5.3",
61
62
  "@material-ui/core": "^4.12.3",
62
63
  "@material-ui/icons": "4.11.2",
63
64
  "axios": "^0.21.1",
package/src/ActivityIndicator/index.js CHANGED
@@ -29,15 +29,9 @@ export default function ActivityIndicator({ messages, interval, ...rest }) {
29
29
  </div>
30
30
  <div className="pm-loader-atoms">
31
31
  <Logo style={{ transform: 'scale(0.6)' }} showText={false} />
32
- <div className="pm-loader-orbit-1">
33
- <div className="pm-loader-atom-1" />
34
- </div>
35
- <div className="pm-loader-orbit-2">
36
- <div className="pm-loader-atom-2" />
37
- </div>
38
- <div className="pm-loader-orbit-3">
39
- <div className="pm-loader-atom-3" />
40
- </div>
32
+ <Orbit size={56} orbitColor={green[500]} atomColor={green[500]} duration={1} />
33
+ <Orbit size={80} orbitColor={blue[800]} atomColor={blue[800]} duration={1.5} />
34
+ <Orbit size={100} orbitColor={colors.grey[900]} atomColor={colors.grey[900]} />
41
35
  </div>
42
36
  </div>
43
37
  </Div>
@@ -56,6 +50,7 @@ ActivityIndicator.defaultProps = {
56
50
 
57
51
  const Div = styled.div`
58
52
  && {
53
+ box-sizing: border-box;
59
54
  padding: 20px;
60
55
  width: 100%;
61
56
  height: 100%;
@@ -68,16 +63,6 @@ const Div = styled.div`
68
63
  justify-content: center;
69
64
  }
70
65
 
71
- @keyframes orbit {
72
- 0% {
73
- transform: rotate(0deg);
74
- }
75
-
76
- 100% {
77
- transform: rotate(360deg);
78
- }
79
- }
80
-
81
66
  .pm-loader-text {
82
67
  color: ${colors.grey[900]};
83
68
  font-size: 14px;
@@ -105,82 +90,52 @@ const Div = styled.div`
105
90
  align-items: center;
106
91
  justify-content: center;
107
92
  }
93
+ `;
108
94
 
109
- .pm-loader-center-atom {
110
- top: 32px;
111
- left: 32px;
112
- width: 32px;
113
- height: 32px;
114
- position: absolute;
115
- border-radius: 50%;
116
- }
117
-
118
- .pm-loader-orbit-1 {
119
- top: 20px;
120
- left: 20px;
121
- width: 56px;
122
- height: 56px;
123
- position: absolute;
124
- border-radius: 50%;
125
- border: 1px solid ${green[500]};
126
- }
95
+ const Orbit = ({ size, orbitColor, atomColor, duration, ...rest }) => {
96
+ return (
97
+ <OrbitRoot
98
+ $duration={duration}
99
+ style={{ width: size, height: size, border: `1px solid ${orbitColor}` }}
100
+ {...rest}>
101
+ <div style={{ background: atomColor }} />
102
+ </OrbitRoot>
103
+ );
104
+ };
127
105
 
128
- .pm-loader-orbit-2 {
129
- top: 8px;
130
- left: 8px;
131
- width: 80px;
132
- height: 80px;
133
- border-radius: 50%;
134
- position: absolute;
135
- border: 1px solid ${blue[800]};
136
- }
106
+ Orbit.propTypes = {
107
+ size: PropTypes.number.isRequired,
108
+ orbitColor: PropTypes.string.isRequired,
109
+ atomColor: PropTypes.string.isRequired,
110
+ duration: PropTypes.number,
111
+ };
137
112
 
138
- .pm-loader-orbit-3 {
139
- top: -4px;
140
- left: -4px;
141
- width: 104px;
142
- height: 104px;
143
- position: absolute;
144
- border-radius: 50%;
145
- border: 1px solid ${colors.grey[900]};
146
- }
113
+ Orbit.defaultProps = {
114
+ duration: 2,
115
+ };
147
116
 
148
- .pm-loader-atom-1 {
149
- width: 7px;
150
- height: 7px;
151
- margin-top: 4px;
152
- margin-left: 4px;
153
- border-radius: 50%;
154
- background-color: ${green[500]};
155
- transform-origin: 24px 24px;
156
- animation: orbit 1s infinite;
157
- animation-timing-function: linear;
158
- -webkit-transform-origin: 24px 24px;
117
+ const OrbitRoot = styled.div`
118
+ @keyframes orbit {
119
+ 0% {
120
+ transform: rotate(0deg);
121
+ }
122
+ 100% {
123
+ transform: rotate(360deg);
124
+ }
159
125
  }
160
126
 
161
- .pm-loader-atom-2 {
162
- width: 7px;
163
- height: 7px;
164
- margin-top: 8px;
165
- margin-left: 8px;
166
- border-radius: 50%;
167
- background-color: ${blue[800]};
168
- transform-origin: 32px 32px;
169
- animation: orbit 2s infinite;
170
- animation-timing-function: linear;
171
- -webkit-transform-origin: 32px 32px;
172
- }
127
+ position: absolute;
128
+ border-radius: 50%;
129
+ animation: orbit ${({ $duration }) => $duration}s infinite;
130
+ animation-timing-function: linear;
131
+ transform-origin: center;
173
132
 
174
- .pm-loader-atom-3 {
175
- width: 7px;
176
- height: 7px;
177
- margin-top: 11px;
178
- margin-left: 11px;
133
+ > div {
134
+ position: absolute;
135
+ top: 50%;
136
+ width: 6px;
137
+ height: 6px;
138
+ transform: translateX(-50%);
179
139
  border-radius: 50%;
180
- background-color: ${colors.grey[900]};
181
- transform-origin: 41px 41px;
182
- animation: orbit 3s infinite;
183
- animation-timing-function: linear;
184
- -webkit-transform-origin: 41px 41px;
185
140
  }
186
141
  `;
package/src/Button/wrap.js CHANGED
@@ -10,7 +10,7 @@ import { mergeProps } from '../Util';
10
10
  export default function (BaseComponent) {
11
11
  function WrappedComponent(props) {
12
12
  const newProps = mergeProps(props, WrappedComponent, ['style']);
13
- const { children, rounded, loading, disabled, style, forwardedRef, ...rest } = newProps;
13
+ const { children, rounded, loading, disabled, style, forwardedRef, color, ...rest } = newProps;
14
14
 
15
15
  const isDisabled = disabled || loading;
16
16
 
@@ -29,31 +29,44 @@ export default function (BaseComponent) {
29
29
  textTransform: 'capitalize',
30
30
  });
31
31
 
32
- if (rest.color === 'danger') {
33
- if (rest.variant === 'contained') {
34
- styles.backgroundColor = colors.error.main;
35
- styles.color = colors.common.white;
36
- } else {
37
- styles.borderColor = colors.error.main;
38
- styles.color = colors.error.main;
32
+ // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
33
+ // 这里扩展 danger/warning/reverse 三种 color
34
+ let _rest = rest;
35
+ switch (color) {
36
+ case 'error':
37
+ case 'danger': {
38
+ if (rest.variant === 'contained') {
39
+ styles.backgroundColor = colors.error.main;
40
+ styles.color = colors.common.white;
41
+ } else {
42
+ styles.borderColor = colors.error.main;
43
+ styles.color = colors.error.main;
44
+ }
45
+ break;
39
46
  }
40
- }
41
- if (!rest.color || rest.color === 'default') {
42
- if (rest.variant === 'contained') {
43
- styles.backgroundColor = isDisabled ? colors.grey[400] : colors.grey[900];
44
- styles.color = colors.common.white;
45
- } else {
46
- styles.borderColor = isDisabled ? colors.grey[400] : colors.grey[900];
47
- styles.color = isDisabled ? colors.grey[400] : colors.grey[900];
47
+ case 'warning': {
48
+ if (rest.variant === 'contained') {
49
+ styles.backgroundColor = colors.warning.main;
50
+ styles.color = colors.common.white;
51
+ } else {
52
+ styles.borderColor = colors.warning.main;
53
+ styles.color = colors.warning.main;
54
+ }
55
+ break;
48
56
  }
49
- }
50
- if (rest.color === 'reverse') {
51
- if (rest.variant === 'contained') {
52
- styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
53
- styles.color = colors.grey[900];
54
- } else {
55
- styles.borderColor = colors.grey[900];
56
- styles.color = colors.grey[900];
57
+ case 'reverse': {
58
+ if (rest.variant === 'contained') {
59
+ styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
60
+ styles.color = colors.grey[900];
61
+ } else {
62
+ styles.borderColor = colors.grey[900];
63
+ styles.color = colors.grey[900];
64
+ }
65
+ break;
66
+ }
67
+ // 除扩展的几种 color 外, 由 mui button 自己处理 color
68
+ default: {
69
+ _rest = { ..._rest, color };
57
70
  }
58
71
  }
59
72
  if (rounded) {
@@ -62,7 +75,7 @@ export default function (BaseComponent) {
62
75
  }
63
76
 
64
77
  return (
65
- <BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {...rest}>
78
+ <BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {..._rest}>
66
79
  {loading && <Spinner size={loadingSize} style={{ marginRight: 5 }} />}
67
80
  {children}
68
81
  </BaseComponent>
package/src/Colors/themes/default.js CHANGED
@@ -11,8 +11,8 @@ const colors = {
11
11
  black: '#000',
12
12
  white: '#fff',
13
13
  },
14
- primary: { main: '#4F6AF6', contrastText: '#fff' }, // override
15
- secondary: { main: '#31AB86', contrastText: '#fff' }, // override
14
+ primary: { main: '#3773F2', contrastText: '#fff' }, // override
15
+ secondary: { main: '#16CED1', contrastText: '#fff' }, // override
16
16
  error: { main: '#F16E6E', contrastText: '#fff' }, // override
17
17
  warning: { main: '#DE9E37', contrastText: '#fff' }, // override
18
18
  info: { main: '#0775F8', contrastText: '#fff' }, // override
@@ -48,6 +48,7 @@ const colors = {
48
48
  primary: '#4598FA',
49
49
  secondary: '#49C3AD',
50
50
  },
51
+ // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
51
52
  };
52
53
 
53
54
  export default colors;
package/src/Theme/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
2
2
  import { createTheme } from '@material-ui/core/styles';
3
+ import '@fontsource/lato/400.css';
4
+ import '@fontsource/lato/700.css';
3
5
  import responsiveFontSizes from './responsiveFontSizes';
4
6
  import colors from '../Colors';
5
7
 
@@ -39,6 +41,7 @@ export const create = ({
39
41
  },
40
42
  fontSize: 16,
41
43
  fontFamily: [
44
+ 'Lato',
42
45
  'Avenir',
43
46
  '-apple-system',
44
47
  'BlinkMacSystemFont',
@@ -58,7 +61,6 @@ export const create = ({
58
61
  {
59
62
  MuiButton: {
60
63
  root: {
61
- borderRadius: 0,
62
64
  boxShadow: 'none',
63
65
  },
64
66
  },