@arcblock/ux 1.16.42 → 1.16.45

package/lib/ActivityIndicator/index.js

@@ -19,7 +19,8 @@ var _Logo = _interopRequireDefault(require("../Logo"));
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 
-const _excluded = ["messages", "interval"];
+const _excluded = ["messages", "interval"],
+      _excluded2 = ["size", "orbitColor", "atomColor", "duration"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -59,19 +60,21 @@ function ActivityIndicator(_ref) {
       transform: 'scale(0.6)'
     },
     showText: false
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pm-loader-orbit-1"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pm-loader-atom-1"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pm-loader-orbit-2"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pm-loader-atom-2"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pm-loader-orbit-3"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pm-loader-atom-3"
-  })))));
+  }), /*#__PURE__*/_react.default.createElement(Orbit, {
+    size: 56,
+    orbitColor: _green.default[500],
+    atomColor: _green.default[500],
+    duration: 1
+  }), /*#__PURE__*/_react.default.createElement(Orbit, {
+    size: 80,
+    orbitColor: _blue.default[800],
+    atomColor: _blue.default[800],
+    duration: 1.5
+  }), /*#__PURE__*/_react.default.createElement(Orbit, {
+    size: 100,
+    orbitColor: _Colors.default.grey[900],
+    atomColor: _Colors.default.grey[900]
+  }))));
 }
 
 ActivityIndicator.propTypes = {
@@ -86,4 +89,47 @@ ActivityIndicator.defaultProps = {
 const Div = _styledComponents.default.div.withConfig({
   displayName: "ActivityIndicator__Div",
   componentId: "sc-rsk6jb-0"
-})(["&&{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]);
+})(["&&{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]);
+
+const Orbit = _ref2 => {
+  let {
+    size,
+    orbitColor,
+    atomColor,
+    duration
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(OrbitRoot, Object.assign({
+    $duration: duration,
+    style: {
+      width: size,
+      height: size,
+      border: "1px solid ".concat(orbitColor)
+    }
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      background: atomColor
+    }
+  }));
+};
+
+Orbit.propTypes = {
+  size: _propTypes.default.number.isRequired,
+  orbitColor: _propTypes.default.string.isRequired,
+  atomColor: _propTypes.default.string.isRequired,
+  duration: _propTypes.default.number
+};
+Orbit.defaultProps = {
+  duration: 2
+};
+
+const OrbitRoot = _styledComponents.default.div.withConfig({
+  displayName: "ActivityIndicator__OrbitRoot",
+  componentId: "sc-rsk6jb-1"
+})(["@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 => {
+  let {
+    $duration
+  } = _ref3;
+  return $duration;
+});

package/lib/Button/wrap.js

@@ -15,10 +15,16 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
-const _excluded = ["children", "rounded", "loading", "disabled", "style", "forwardedRef"];
+const _excluded = ["children", "rounded", "loading", "disabled", "style", "forwardedRef", "color"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
+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; }
+
+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; }
+
 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; }
 
 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) {
       loading,
       disabled,
       style,
-      forwardedRef
+      forwardedRef,
+      color
     } = newProps,
           rest = _objectWithoutProperties(newProps, _excluded);
 
@@ -55,36 +62,59 @@ function _default(BaseComponent) {
     const styles = Object.assign({}, style, {
       boxShadow: 'none',
       textTransform: 'capitalize'
-    });
-
-    if (rest.color === 'danger') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = _Colors.default.error.main;
-        styles.color = _Colors.default.common.white;
-      } else {
-        styles.borderColor = _Colors.default.error.main;
-        styles.color = _Colors.default.error.main;
-      }
-    }
+    }); // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // 这里扩展 danger/warning/reverse 三种 color
+
+    let _rest = rest;
+
+    switch (color) {
+      case 'error':
+      case 'danger':
+        {
+          if (rest.variant === 'contained') {
+            styles.backgroundColor = _Colors.default.error.main;
+            styles.color = _Colors.default.common.white;
+          } else {
+            styles.borderColor = _Colors.default.error.main;
+            styles.color = _Colors.default.error.main;
+          }
+
+          break;
+        }
+
+      case 'warning':
+        {
+          if (rest.variant === 'contained') {
+            styles.backgroundColor = _Colors.default.warning.main;
+            styles.color = _Colors.default.common.white;
+          } else {
+            styles.borderColor = _Colors.default.warning.main;
+            styles.color = _Colors.default.warning.main;
+          }
+
+          break;
+        }
+
+      case 'reverse':
+        {
+          if (rest.variant === 'contained') {
+            styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
+            styles.color = _Colors.default.grey[900];
+          } else {
+            styles.borderColor = _Colors.default.grey[900];
+            styles.color = _Colors.default.grey[900];
+          }
+
+          break;
+        }
+      // 除扩展的几种 color 外, 由 mui button 自己处理 color
 
-    if (!rest.color || rest.color === 'default') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
-        styles.color = _Colors.default.common.white;
-      } else {
-        styles.borderColor = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
-        styles.color = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
-      }
-    }
-
-    if (rest.color === 'reverse') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
-        styles.color = _Colors.default.grey[900];
-      } else {
-        styles.borderColor = _Colors.default.grey[900];
-        styles.color = _Colors.default.grey[900];
-      }
+      default:
+        {
+          _rest = _objectSpread(_objectSpread({}, _rest), {}, {
+            color
+          });
+        }
     }
 
     if (rounded) {
@@ -96,7 +126,7 @@ function _default(BaseComponent) {
       style: styles,
       ref: forwardedRef,
       disabled: isDisabled
-    }, rest), loading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+    }, _rest), loading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
       size: loadingSize,
       style: {
         marginRight: 5

package/lib/ButtonGroup/index.js

@@ -5,27 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));
 
 var _wrap = _interopRequireDefault(require("../Button/wrap"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const sizes = {
-  small: 16,
-  medium: 18,
-  large: 20
-};
-
-const getBorderRadius = size => sizes[size || 'medium'];
-
-const StyledButtonGroup = (0, _styledComponents.default)(_ButtonGroup.default).withConfig({
-  displayName: "ButtonGroup__StyledButtonGroup",
-  componentId: "sc-1popzk9-0"
-})([".MuiButton-root:first-of-type{border-radius:", "px 0 0 ", "px;}.MuiButton-root:last-of-type{border-radius:0 ", "px ", "px 0;}"], props => getBorderRadius(props.size), props => getBorderRadius(props.size), props => getBorderRadius(props.size), props => getBorderRadius(props.size));
-
-var _default = (0, _wrap.default)(StyledButtonGroup);
+// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @material-ui/core/ButtonGroup
+// (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
+var _default = (0, _wrap.default)(_ButtonGroup.default);
 
 exports.default = _default;

package/lib/Colors/themes/default.js

@@ -19,12 +19,12 @@ const colors = {
     white: '#fff'
   },
   primary: {
-    main: '#4F6AF6',
+    main: '#3773F2',
     contrastText: '#fff'
   },
   // override
   secondary: {
-    main: '#31AB86',
+    main: '#16CED1',
     contrastText: '#fff'
   },
   // override
@@ -78,7 +78,8 @@ const colors = {
   did: {
     primary: '#4598FA',
     secondary: '#49C3AD'
-  }
+  } // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
+
 };
 var _default = colors;
 exports.default = _default;

package/lib/SplitButton/index.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SplitButton;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
+
+var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+const _excluded = ["size", "color", "menu", "children", "variant", "onClick"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+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; }
+
+function SplitButton(_ref) {
+  let {
+    size,
+    color,
+    menu,
+    children,
+    variant,
+    onClick
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const [open, setOpen] = (0, _react.useState)(false);
+  const anchorRef = (0, _react.useRef)(null);
+
+  const onToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
+  const handleClose = e => {
+    if (anchorRef.current && anchorRef.current.contains(e.target)) {
+      return;
+    }
+
+    setOpen(false);
+  }; // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
+
+
+  const handleItemClick = e => {
+    if (e.target.classList.contains('MuiListItem-root')) {
+      setOpen(false);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledButtonGroup, Object.assign({
+    variant: variant,
+    size: size,
+    color: color,
+    ref: anchorRef
+  }, rest), typeof children === 'function' ? children() : /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onClick,
+    color: color
+  }, children), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onToggle,
+    color: color
+  }, /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null))), /*#__PURE__*/_react.default.createElement(StyledPopper, {
+    open: open,
+    anchorEl: anchorRef.current,
+    placement: "bottom-end",
+    disablePortal: false
+  }, /*#__PURE__*/_react.default.createElement(_Paper.default, null, /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
+    onClickAway: handleClose
+  }, /*#__PURE__*/_react.default.createElement(_MenuList.default, {
+    onClick: handleItemClick
+  }, menu)))));
+}
+
+SplitButton.propTypes = {
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  color: _propTypes.default.oneOf(['default', 'primary', 'secondary', 'inherit']),
+  menu: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.array]),
+  // 也可以是用于渲染主按钮的 function
+  children: _propTypes.default.any,
+  variant: _propTypes.default.oneOf(['outlined', 'contained']),
+  onClick: _propTypes.default.func
+};
+SplitButton.defaultProps = {
+  size: 'medium',
+  color: 'primary',
+  menu: [],
+  children: null,
+  variant: 'contained',
+  onClick: () => {}
+};
+SplitButton.Item = _MenuItem.default;
+const StyledButtonGroup = (0, _styledComponents.default)(_ButtonGroup.default).withConfig({
+  displayName: "SplitButton__StyledButtonGroup",
+  componentId: "sc-1meco5z-0"
+})(["> .MuiButtonBase-root:last-child{min-width:2em;padding-left:0;padding-right:0;}"]);
+const StyledPopper = (0, _styledComponents.default)(_Popper.default).withConfig({
+  displayName: "SplitButton__StyledPopper",
+  componentId: "sc-1meco5z-1"
+})([".MuiList-root{padding:4px 0;}.MuiListItem-root{padding-top:4px;padding-bottom:4px;}"]);

package/lib/Theme/index.js

@@ -7,6 +7,10 @@ exports.create = void 0;
 
 var _styles = require("@material-ui/core/styles");
 
+require("@fontsource/lato/400.css");
+
+require("@fontsource/lato/700.css");
+
 var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
 
 var _Colors = _interopRequireDefault(require("../Colors"));
@@ -57,13 +61,11 @@ const create = function create() {
         main: mode === 'light' ? '#222222' : _Colors.default.common.white,
         gray: mode === 'light' ? _Colors.default.grey[500] : _Colors.default.grey[300]
       },
-      fontSize: 16,
-      fontFamily: ['Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
+      fontFamily: ['Lato', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
     }, typography || {}),
     overrides: Object.assign({
       MuiButton: {
         root: {
-          borderRadius: 0,
           boxShadow: 'none'
         }
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.42",
+  "version": "1.16.45",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,11 +53,12 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "2814f0f274c153e8000f8c49ce5a318e3623e0f0",
+  "gitHead": "2158b9836301fd2f258b0603f9bbaed41a367466",
   "dependencies": {
-    "@arcblock/icons": "^1.16.42",
-    "@arcblock/react-hooks": "^1.16.42",
+    "@arcblock/icons": "^1.16.45",
+    "@arcblock/react-hooks": "^1.16.45",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",
     "axios": "^0.21.1",

package/src/ActivityIndicator/index.js

@@ -29,15 +29,9 @@ export default function ActivityIndicator({ messages, interval, ...rest }) {
         </div>
         <div className="pm-loader-atoms">
           <Logo style={{ transform: 'scale(0.6)' }} showText={false} />
-          <div className="pm-loader-orbit-1">
-            <div className="pm-loader-atom-1" />
-          </div>
-          <div className="pm-loader-orbit-2">
-            <div className="pm-loader-atom-2" />
-          </div>
-          <div className="pm-loader-orbit-3">
-            <div className="pm-loader-atom-3" />
-          </div>
+          <Orbit size={56} orbitColor={green[500]} atomColor={green[500]} duration={1} />
+          <Orbit size={80} orbitColor={blue[800]} atomColor={blue[800]} duration={1.5} />
+          <Orbit size={100} orbitColor={colors.grey[900]} atomColor={colors.grey[900]} />
         </div>
       </div>
     </Div>
@@ -56,6 +50,7 @@ ActivityIndicator.defaultProps = {
 
 const Div = styled.div`
   && {
+    box-sizing: border-box;
     padding: 20px;
     width: 100%;
     height: 100%;
@@ -68,16 +63,6 @@ const Div = styled.div`
     justify-content: center;
   }
 
-  @keyframes orbit {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
   .pm-loader-text {
     color: ${colors.grey[900]};
     font-size: 14px;
@@ -105,82 +90,52 @@ const Div = styled.div`
     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 ${green[500]};
-  }
+const Orbit = ({ size, orbitColor, atomColor, duration, ...rest }) => {
+  return (
+    <OrbitRoot
+      $duration={duration}
+      style={{ width: size, height: size, border: `1px solid ${orbitColor}` }}
+      {...rest}>
+      <div style={{ background: atomColor }} />
+    </OrbitRoot>
+  );
+};
 
-  .pm-loader-orbit-2 {
-    top: 8px;
-    left: 8px;
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    position: absolute;
-    border: 1px solid ${blue[800]};
-  }
+Orbit.propTypes = {
+  size: PropTypes.number.isRequired,
+  orbitColor: PropTypes.string.isRequired,
+  atomColor: PropTypes.string.isRequired,
+  duration: PropTypes.number,
+};
 
-  .pm-loader-orbit-3 {
-    top: -4px;
-    left: -4px;
-    width: 104px;
-    height: 104px;
-    position: absolute;
-    border-radius: 50%;
-    border: 1px solid ${colors.grey[900]};
-  }
+Orbit.defaultProps = {
+  duration: 2,
+};
 
-  .pm-loader-atom-1 {
-    width: 7px;
-    height: 7px;
-    margin-top: 4px;
-    margin-left: 4px;
-    border-radius: 50%;
-    background-color: ${green[500]};
-    transform-origin: 24px 24px;
-    animation: orbit 1s infinite;
-    animation-timing-function: linear;
-    -webkit-transform-origin: 24px 24px;
+const OrbitRoot = styled.div`
+  @keyframes orbit {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
-  .pm-loader-atom-2 {
-    width: 7px;
-    height: 7px;
-    margin-top: 8px;
-    margin-left: 8px;
-    border-radius: 50%;
-    background-color: ${blue[800]};
-    transform-origin: 32px 32px;
-    animation: orbit 2s infinite;
-    animation-timing-function: linear;
-    -webkit-transform-origin: 32px 32px;
-  }
+  position: absolute;
+  border-radius: 50%;
+  animation: orbit ${({ $duration }) => $duration}s infinite;
+  animation-timing-function: linear;
+  transform-origin: center;
 
-  .pm-loader-atom-3 {
-    width: 7px;
-    height: 7px;
-    margin-top: 11px;
-    margin-left: 11px;
+  > div {
+    position: absolute;
+    top: 50%;
+    width: 6px;
+    height: 6px;
+    transform: translateX(-50%);
     border-radius: 50%;
-    background-color: ${colors.grey[900]};
-    transform-origin: 41px 41px;
-    animation: orbit 3s infinite;
-    animation-timing-function: linear;
-    -webkit-transform-origin: 41px 41px;
   }
 `;

package/src/Button/wrap.js

@@ -10,7 +10,7 @@ import { mergeProps } from '../Util';
 export default function (BaseComponent) {
   function WrappedComponent(props) {
     const newProps = mergeProps(props, WrappedComponent, ['style']);
-    const { children, rounded, loading, disabled, style, forwardedRef, ...rest } = newProps;
+    const { children, rounded, loading, disabled, style, forwardedRef, color, ...rest } = newProps;
 
     const isDisabled = disabled || loading;
 
@@ -29,31 +29,44 @@ export default function (BaseComponent) {
       textTransform: 'capitalize',
     });
 
-    if (rest.color === 'danger') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = colors.error.main;
-        styles.color = colors.common.white;
-      } else {
-        styles.borderColor = colors.error.main;
-        styles.color = colors.error.main;
+    // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // 这里扩展 danger/warning/reverse 三种 color
+    let _rest = rest;
+    switch (color) {
+      case 'error':
+      case 'danger': {
+        if (rest.variant === 'contained') {
+          styles.backgroundColor = colors.error.main;
+          styles.color = colors.common.white;
+        } else {
+          styles.borderColor = colors.error.main;
+          styles.color = colors.error.main;
+        }
+        break;
       }
-    }
-    if (!rest.color || rest.color === 'default') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = isDisabled ? colors.grey[400] : colors.grey[900];
-        styles.color = colors.common.white;
-      } else {
-        styles.borderColor = isDisabled ? colors.grey[400] : colors.grey[900];
-        styles.color = isDisabled ? colors.grey[400] : colors.grey[900];
+      case 'warning': {
+        if (rest.variant === 'contained') {
+          styles.backgroundColor = colors.warning.main;
+          styles.color = colors.common.white;
+        } else {
+          styles.borderColor = colors.warning.main;
+          styles.color = colors.warning.main;
+        }
+        break;
       }
-    }
-    if (rest.color === 'reverse') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
-        styles.color = colors.grey[900];
-      } else {
-        styles.borderColor = colors.grey[900];
-        styles.color = colors.grey[900];
+      case 'reverse': {
+        if (rest.variant === 'contained') {
+          styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
+          styles.color = colors.grey[900];
+        } else {
+          styles.borderColor = colors.grey[900];
+          styles.color = colors.grey[900];
+        }
+        break;
+      }
+      // 除扩展的几种 color 外, 由 mui button 自己处理 color
+      default: {
+        _rest = { ..._rest, color };
       }
     }
     if (rounded) {
@@ -62,7 +75,7 @@ export default function (BaseComponent) {
     }
 
     return (
-      <BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {...rest}>
+      <BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {..._rest}>
         {loading && <Spinner size={loadingSize} style={{ marginRight: 5 }} />}
         {children}
       </BaseComponent>

package/src/ButtonGroup/index.js

@@ -1,19 +1,6 @@
-import styled from 'styled-components';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
 import wrap from '../Button/wrap';
 
-const sizes = { small: 16, medium: 18, large: 20 };
-const getBorderRadius = size => sizes[size || 'medium'];
-
-const StyledButtonGroup = styled(ButtonGroup)`
-  .MuiButton-root:first-of-type {
-    border-radius: ${props => getBorderRadius(props.size)}px 0 0
-      ${props => getBorderRadius(props.size)}px;
-  }
-  .MuiButton-root:last-of-type {
-    border-radius: 0 ${props => getBorderRadius(props.size)}px
-      ${props => getBorderRadius(props.size)}px 0;
-  }
-`;
-
-export default wrap(StyledButtonGroup);
+// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @material-ui/core/ButtonGroup
+// (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
+export default wrap(ButtonGroup);

package/src/Colors/themes/default.js

@@ -11,8 +11,8 @@ const colors = {
     black: '#000',
     white: '#fff',
   },
-  primary: { main: '#4F6AF6', contrastText: '#fff' }, // override
-  secondary: { main: '#31AB86', contrastText: '#fff' }, // override
+  primary: { main: '#3773F2', contrastText: '#fff' }, // override
+  secondary: { main: '#16CED1', contrastText: '#fff' }, // override
   error: { main: '#F16E6E', contrastText: '#fff' }, // override
   warning: { main: '#DE9E37', contrastText: '#fff' }, // override
   info: { main: '#0775F8', contrastText: '#fff' }, // override
@@ -48,6 +48,7 @@ const colors = {
     primary: '#4598FA',
     secondary: '#49C3AD',
   },
+  // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
 };
 
 export default colors;

package/src/SplitButton/index.js

@@ -0,0 +1,101 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import Popper from '@material-ui/core/Popper';
+import Paper from '@material-ui/core/Paper';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import MenuList from '@material-ui/core/MenuList';
+import MenuItem from '@material-ui/core/MenuItem';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '../Button';
+
+export default function SplitButton({ size, color, menu, children, variant, onClick, ...rest }) {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+
+  const onToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
+  const handleClose = e => {
+    if (anchorRef.current && anchorRef.current.contains(e.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
+  const handleItemClick = e => {
+    if (e.target.classList.contains('MuiListItem-root')) {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <StyledButtonGroup variant={variant} size={size} color={color} ref={anchorRef} {...rest}>
+        {typeof children === 'function' ? (
+          children()
+        ) : (
+          <Button onClick={onClick} color={color}>
+            {children}
+          </Button>
+        )}
+        <Button onClick={onToggle} color={color}>
+          <ExpandMore />
+        </Button>
+      </StyledButtonGroup>
+      <StyledPopper
+        open={open}
+        anchorEl={anchorRef.current}
+        placement="bottom-end"
+        disablePortal={false}>
+        <Paper>
+          <ClickAwayListener onClickAway={handleClose}>
+            <MenuList onClick={handleItemClick}>{menu}</MenuList>
+          </ClickAwayListener>
+        </Paper>
+      </StyledPopper>
+    </>
+  );
+}
+
+SplitButton.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'inherit']),
+  menu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+  // 也可以是用于渲染主按钮的 function
+  children: PropTypes.any,
+  variant: PropTypes.oneOf(['outlined', 'contained']),
+  onClick: PropTypes.func,
+};
+
+SplitButton.defaultProps = {
+  size: 'medium',
+  color: 'primary',
+  menu: [],
+  children: null,
+  variant: 'contained',
+  onClick: () => {},
+};
+
+SplitButton.Item = MenuItem;
+
+const StyledButtonGroup = styled(ButtonGroup)`
+  > .MuiButtonBase-root:last-child {
+    min-width: 2em;
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+
+const StyledPopper = styled(Popper)`
+  .MuiList-root {
+    padding: 4px 0;
+  }
+  .MuiListItem-root {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+`;

package/src/Theme/index.js

@@ -1,5 +1,7 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
 import { createTheme } from '@material-ui/core/styles';
+import '@fontsource/lato/400.css';
+import '@fontsource/lato/700.css';
 import responsiveFontSizes from './responsiveFontSizes';
 import colors from '../Colors';
 
@@ -37,8 +39,8 @@ export const create = ({
           main: mode === 'light' ? '#222222' : colors.common.white,
           gray: mode === 'light' ? colors.grey[500] : colors.grey[300],
         },
-        fontSize: 16,
         fontFamily: [
+          'Lato',
           'Avenir',
           '-apple-system',
           'BlinkMacSystemFont',
@@ -58,7 +60,6 @@ export const create = ({
       {
         MuiButton: {
           root: {
-            borderRadius: 0,
             boxShadow: 'none',
           },
         },