@arcblock/ux 1.15.21 → 1.15.26

package/lib/ActivityIndicator/index.js

@@ -11,9 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _green = _interopRequireDefault(require("@material-ui/core/colors/green"));
+
+var _blue = _interopRequireDefault(require("@material-ui/core/colors/blue"));
+
 var _Logo = _interopRequireDefault(require("../Logo"));
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
 
 const _excluded = ["messages", "interval"];
 
@@ -82,4 +86,4 @@ 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;}"], _Theme.colors.primary, _Theme.colors.green, _Theme.colors.blue, _Theme.colors.primary, _Theme.colors.green, _Theme.colors.blue, _Theme.colors.primary);
+})(["&&{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]);

package/lib/Alert/index.js

@@ -13,12 +13,14 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _blueGrey = _interopRequireDefault(require("@material-ui/core/colors/blueGrey"));
 
-var _Theme = require("../Theme");
+var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Util = require("../Util");
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
 const _excluded = ["type", "children", "style", "className", "variant"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,25 +32,25 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const types = {
   error: {
     icon: 'exclamation-circle',
-    color: _Theme.colors.red,
+    color: _Colors.default.error.main,
     borderColor: '#e35b54',
     backgroundColor: 'rgba(227, 91, 84, 0.2)'
   },
   warning: {
     icon: 'exclamation-triangle',
-    color: _Theme.colors.yellow,
+    color: _Colors.default.warning.main,
     borderColor: '#f7d040',
     backgroundColor: 'rgba(247, 208, 64, 0.2)'
   },
   success: {
     icon: 'check-circle',
-    color: _Theme.colors.green,
+    color: _Colors.default.success.main,
     borderColor: '#89ddd9',
     backgroundColor: 'rgba(137, 221, 217, 0.2)'
   },
   tip: {
     icon: 'info-circle',
-    color: _Theme.colors.minor,
+    color: _Colors.default.grey[500],
     borderColor: '#222222',
     backgroundColor: '#EEEEEE'
   }
@@ -73,7 +75,7 @@ const Alert = props => {
     borderColor
   } = types[type] || types.success;
   const styles = Object.assign({
-    color: _Theme.colors.dark,
+    color: _blueGrey.default[500],
     backgroundColor: variant === 'border' ? backgroundColor : 'transparent',
     borderLeft: variant === 'border' ? "5px solid ".concat(borderColor) : 'none'
   }, style);

package/lib/Badge/index.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
@@ -27,24 +27,24 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 const types = {
   error: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.red
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.error.main
   },
   warning: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.yellow
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.warning.main
   },
   success: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.green
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.success.main
   },
   primary: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.blue
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.primary.main
   },
   reverse: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.primary
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.grey[900]
   }
 };
 

package/lib/Button/wrap.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Spinner = _interopRequireDefault(require("../Spinner"));
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
@@ -59,31 +59,31 @@ function _default(BaseComponent) {
 
     if (rest.color === 'danger') {
       if (rest.variant === 'contained') {
-        styles.backgroundColor = _Theme.colors.danger;
-        styles.color = _Theme.colors.white;
+        styles.backgroundColor = _Colors.default.error.main;
+        styles.color = _Colors.default.common.white;
       } else {
-        styles.borderColor = _Theme.colors.danger;
-        styles.color = _Theme.colors.danger;
+        styles.borderColor = _Colors.default.error.main;
+        styles.color = _Colors.default.error.main;
       }
     }
 
     if (!rest.color || rest.color === 'default') {
       if (rest.variant === 'contained') {
-        styles.backgroundColor = isDisabled ? _Theme.colors.lightGrey : _Theme.colors.primary;
-        styles.color = _Theme.colors.white;
+        styles.backgroundColor = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
+        styles.color = _Colors.default.common.white;
       } else {
-        styles.borderColor = isDisabled ? _Theme.colors.lightGrey : _Theme.colors.primary;
-        styles.color = isDisabled ? _Theme.colors.lightGrey : _Theme.colors.primary;
+        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 = _Theme.colors.primary;
+        styles.color = _Colors.default.grey[900];
       } else {
-        styles.borderColor = _Theme.colors.primary;
-        styles.color = _Theme.colors.primary;
+        styles.borderColor = _Colors.default.grey[900];
+        styles.color = _Colors.default.grey[900];
       }
     }
 

package/lib/Colors/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _default.default;
+  }
+});
+
+var _default = _interopRequireDefault(require("./themes/default"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Colors/themes/default.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * 默认 colors, ABT 系列
+ *
+ * - colors object 结构是在 mui theme#palette object 基础上调整后的结构
+ * - 色值在 mui default theme 基础上将 figma 中常用的 colors 进行覆盖
+ * - 扩展一些常用色值 (如 DID 系列)
+ * - figma: https://www.figma.com/file/1qHyMF137EXOQpSFVByszG/UX-Library?node-id=295%3A1518
+ */
+const colors = {
+  common: {
+    black: '#000',
+    white: '#fff'
+  },
+  primary: {
+    main: '#4F6AF6'
+  },
+  // override
+  secondary: {
+    main: '#31AB86'
+  },
+  // override
+  error: {
+    main: '#F16E6E'
+  },
+  // override
+  warning: {
+    main: '#DE9E37'
+  },
+  // override
+  info: {
+    main: '#0775F8'
+  },
+  // override
+  success: {
+    main: '#34BE74'
+  },
+  // override
+  grey: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#eeeeee',
+    300: '#e0e0e0',
+    400: '#bdbdbd',
+    500: '#9e9e9e',
+    600: '#757575',
+    700: '#616161',
+    800: '#424242',
+    900: '#212121',
+    A100: '#d5d5d5',
+    A200: '#aaaaaa',
+    A400: '#303030',
+    A700: '#616161'
+  },
+  text: {
+    primary: 'rgba(0, 0, 0, 0.87)',
+    secondary: 'rgba(0, 0, 0, 0.54)',
+    disabled: 'rgba(0, 0, 0, 0.38)',
+    hint: 'rgba(0, 0, 0, 0.38)'
+  },
+  divider: 'rgba(0, 0, 0, 0.12)',
+  background: {
+    default: '#fff'
+  },
+  // 扩展色值, 适用于 did 相关的组件, 如果某些产品整体风格是 did 系列, 可以扩展出一个 did 系列的 theme
+  did: {
+    primary: '#4598FA',
+    secondary: '#49C3AD'
+  }
+};
+var _default = colors;
+exports.default = _default;

package/lib/Footer/index.js

@@ -76,4 +76,4 @@ Footer.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "Footer__Container",
   componentId: "sc-1qpifuv-0"
-})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;.footer{display:flex;align-items:center;justify-content:space-between;@media (max-width:540px){flex-direction:column;align-items:flex-start;justify-content:flex-start;}.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}}"], props => props.dark ? props.theme.colors.minor : '#dee2e7', props => props.theme.colors.minor);
+})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;.footer{display:flex;align-items:center;justify-content:space-between;@media (max-width:540px){flex-direction:column;align-items:flex-start;justify-content:flex-start;}.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', props => props.theme.palette.grey[900]);

package/lib/Icon/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
 
 const _excluded = ["name", "color", "size", "variant", "rounded", "style", "className", "forwardedRef"];
 
@@ -73,7 +73,7 @@ Icon.propTypes = {
 Icon.defaultProps = {
   rounded: false,
   variant: 'light',
-  color: _Theme.colors.primary,
+  color: _Colors.default.grey[900],
   className: '',
   size: 24,
   style: {}

package/lib/Layout/dashboard/sidebar.js

@@ -19,6 +19,8 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
+var _teal = _interopRequireDefault(require("@material-ui/core/colors/teal"));
+
 var _image = _interopRequireDefault(require("../../Icon/image"));
 
 var _Logo = _interopRequireDefault(require("../../Logo"));
@@ -105,7 +107,7 @@ const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255
 const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "sidebar__MenuItem",
   componentId: "sc-gaosgy-1"
-})(["&&{display:block;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;}.MuiButton-label{display:flex;flex-direction:column;justify-content:center;align-items:center;}}"], props => props.selected ? gradient : '', props => props.selected ? props.theme.colors.green : 'transparent', gradient, props => props.theme.colors.green);
+})(["&&{display:block;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;}.MuiButton-label{display:flex;flex-direction:column;justify-content:center;align-items:center;}}"], props => props.selected ? gradient : '', props => props.selected ? _teal.default.A700 : 'transparent', gradient, _teal.default.A700);
 
 var _default = (0, _reactRouterDom.withRouter)((0, _withTheme.default)(Sidebar));
 

package/lib/Tag/index.js

@@ -13,10 +13,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _Theme = require("../Theme");
-
 var _Util = require("../Util");
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
 const _excluded = ["type", "content", "children", "style", "className", "forwardedRef"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,24 +27,24 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 const types = {
   error: {
-    color: _Theme.colors.red,
+    color: _Colors.default.error.main,
     backgroundColor: 'rgba(227, 91, 84, 0.2)'
   },
   warning: {
-    color: _Theme.colors.yellow,
+    color: _Colors.default.warning.main,
     backgroundColor: 'rgba(247, 208, 64, 0.2)'
   },
   success: {
-    color: '#5b9025',
+    color: _Colors.default.success.main,
     backgroundColor: '#eafbd9'
   },
   primary: {
-    color: _Theme.colors.blue,
+    color: _Colors.default.primary.main,
     backgroundColor: '#ECEFFF'
   },
   reverse: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.primary
+    color: '#fff',
+    backgroundColor: '#222'
   }
 };
 

package/lib/Theme/index.js

@@ -3,77 +3,59 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.create = exports.colors = void 0;
+exports.create = void 0;
 
 var _styles = require("@material-ui/core/styles");
 
 var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-const colors = {
-  white: '#FFFFFF',
-  dark: '#4A707C',
-  gray: '#222222',
-  minor: '#9B9B9B',
-  darkText: '#DCDCDC',
-  background: '#F7F8F8',
-  yellow: '#FFCF71',
-  green: '#44cdc6',
-  red: '#D0021B',
-  blue: '#4E6AF6',
-  primary: '#222222',
-  black: '#222222',
-  secondary: '#44cdc6',
-  mint: '#44cdc6',
-  textSecondary: '#4A4A4A',
-  active: '#5b9025',
-  danger: '#D0021B',
-  lightGrey: '#BCBCBC'
-}; // https://material-ui.com/customization/default-theme/
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-exports.colors = colors;
+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; }
+
+// https://material-ui.com/customization/default-theme/
+// eslint-disable-next-line import/prefer-default-export
 const create = function create() {
-  let {
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      {
     mode = 'light',
     pageWidth = 'md',
     palette,
     typography,
     overrides
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const theme = (0, _styles.createTheme)({
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _styles.createTheme)(_objectSpread({
     themeName: 'ArcBlock',
-    palette: Object.assign({
-      primary: {
-        main: colors.blue,
-        contrastText: colors.white
-      },
-      secondary: {
-        main: colors.mint,
-        contrastText: colors.white
-      },
-      danger: {
-        main: colors.danger,
-        contrastText: colors.white
-      },
-      text: {
-        primary: '#404040',
-        contrast: colors.white
-      },
+    palette: Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
       background: {
-        paper: mode === 'light' ? colors.white : colors.gray,
-        default: mode === 'light' ? colors.background : colors.gray
+        paper: mode === 'light' ? _Colors.default.common.white : _Colors.default.grey[900],
+        default: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
       },
       type: mode
-    }, palette || {}),
+    }), palette || {}),
     typography: Object.assign({
       useNextVariants: true,
       color: {
-        main: mode === 'light' ? colors.gray : colors.white,
-        gray: mode === 'light' ? colors.minor : colors.darkText,
-        blue: colors.blue
+        // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
+        // TODO: 此处硬编码的色值后面需要改为 colors.grey[900],
+        //       或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
+        //       layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
+        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(',')
@@ -92,7 +74,7 @@ const create = function create() {
       },
       MuiToolbar: {
         root: {
-          background: mode === 'light' ? colors.background : colors.gray
+          background: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
         }
       },
       MuiTableCell: {
@@ -105,10 +87,10 @@ const create = function create() {
         },
         head: {
           textTransform: 'uppercase',
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         },
         body: {
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         }
       },
       MuiChip: {
@@ -131,17 +113,38 @@ const create = function create() {
       },
       MuiTypography: {
         body1: {
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         },
         body2: {
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         }
       }
     }, overrides || {}),
     pageWidth,
-    colors,
+    // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
+    //       可以从 Colors 模块/theme.palette/mui colors 中取值
+    colors: {
+      white: '#FFFFFF',
+      dark: '#4A707C',
+      gray: '#222222',
+      minor: '#9B9B9B',
+      darkText: '#DCDCDC',
+      background: '#F7F8F8',
+      yellow: '#FFCF71',
+      green: '#44cdc6',
+      red: '#D0021B',
+      blue: '#4E6AF6',
+      primary: '#222222',
+      black: '#222222',
+      secondary: '#44cdc6',
+      mint: '#44cdc6',
+      textSecondary: '#4A4A4A',
+      active: '#5b9025',
+      danger: '#D0021B',
+      lightGrey: '#BCBCBC'
+    },
     mode
-  });
+  }, rest));
   const enhanced = (0, _responsiveFontSizes.default)(theme, {
     breakpoints: ['xs', 'sm', 'md', 'lg'],
     disableAlign: false,

package/lib/Util/index.js

@@ -11,6 +11,7 @@ exports.setDateTool = setDateTool;
 exports.getDateTool = getDateTool;
 exports.formatToDate = formatToDate;
 exports.formatToDatetime = formatToDatetime;
+exports.openWebWallet = openWebWallet;
 exports.formatUptime = exports.str2color = exports.getTimezone = exports.getBackground = exports.getColor = void 0;
 
 var _padStart = _interopRequireDefault(require("lodash/padStart"));
@@ -31,6 +32,13 @@ function parseQuery(str) {
     return memo;
   }, {});
 }
+/**
+ * @param {number} opts.expireInDays
+ * @param {string} opts.path
+ * @param {domain} opts.domain
+ * @param {boolean} opts.returnDomain if === false, opts.domain will be skipped
+ */
+
 
 function getCookieOptions() {
   let expireInDays = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
@@ -56,7 +64,11 @@ function getCookieOptions() {
     domain: opts.domain || ''
   };
 
-  if (typeof window === 'undefined' || opts.domain) {
+  if (typeof window === 'undefined' || opts.domain || opts.returnDomain === false) {
+    if (opts.returnDomain === false) {
+      delete options.domain;
+    }
+
     return options;
   }
 
@@ -266,4 +278,46 @@ function formatToDatetime(date) {
     locale,
     tz
   });
+}
+
+function openWebWallet(_ref3) {
+  let {
+    webWalletUrl,
+    action = 'login',
+    locale = 'en',
+    url,
+    windowFeatures
+  } = _ref3;
+  const defaultWindowFeatures = {
+    toolbar: 'no',
+    location: 'no',
+    status: 'no',
+    menubar: 'no',
+    scrollbars: 'yes',
+    resizable: 'yes',
+    // iphone 8plus size
+    width: 414,
+    height: 736
+  };
+  const windowUrl = "".concat(webWalletUrl, "?action=").concat(action, "&locale=").concat(locale, "&url=").concat(encodeURIComponent(url));
+  const mergedWindowFeatures = Object.assign({}, defaultWindowFeatures, windowFeatures);
+
+  const getWindowWidth = win => {
+    return win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth;
+  }; // 默认在浏览器右上角弹出窗口
+
+
+  if (!('left' in mergedWindowFeatures)) {
+    const winWidth = getWindowWidth(window.top || window);
+    const winLeft = window.screenLeft || window.screenX;
+    mergedWindowFeatures.left = winWidth + winLeft - mergedWindowFeatures.width;
+  }
+
+  if (!('top' in mergedWindowFeatures)) {
+    const winTop = window.screenTop || window.screenY;
+    mergedWindowFeatures.top = winTop;
+  }
+
+  const strWindowFeatures = Object.keys(mergedWindowFeatures).map(key => "".concat(key, "=").concat(mergedWindowFeatures[key])).join(',');
+  window.open(windowUrl, 'targetWindow', strWindowFeatures);
 }

package/lib/Wallet/Action.js

@@ -17,7 +17,7 @@ var _abtwallet = _interopRequireDefault(require("./images/abtwallet.png"));
 
 var _Util = require("../Util");
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -100,4 +100,4 @@ const sizes = {
 const Content = _styledComponents.default.div.withConfig({
   displayName: "Action__Content",
   componentId: "sc-zuf4zr-0"
-})(["display:flex;justify-content:center;align-items:center;&:hover{opacity:0.9;}.wallet-action__logo{width:auto;height:auto;max-width:", "px;margin-left:5px;}.wallet-action__text{padding:8px;display:flex;height:100%;flex-direction:column;justify-content:space-between;align-items:flex-start;}.wallet-action__action{font-size:", "px;text-transform:capitalize;margin-bottom:1px;color:", ";letter-spacing:1px;}.wallet-action__title{font-size:", "px;text-transform:capitalize;color:", ";letter-spacing:1px;}"], props => sizes.logo[props.size], props => sizes.font[props.size], props => props.color || _Theme.colors.blue, props => sizes.font[props.size] * 1.5, props => props.color || _Theme.colors.blue);
+})(["display:flex;justify-content:center;align-items:center;&:hover{opacity:0.9;}.wallet-action__logo{width:auto;height:auto;max-width:", "px;margin-left:5px;}.wallet-action__text{padding:8px;display:flex;height:100%;flex-direction:column;justify-content:space-between;align-items:flex-start;}.wallet-action__action{font-size:", "px;text-transform:capitalize;margin-bottom:1px;color:", ";letter-spacing:1px;}.wallet-action__title{font-size:", "px;text-transform:capitalize;color:", ";letter-spacing:1px;}"], props => sizes.logo[props.size], props => sizes.font[props.size], props => props.color || _Colors.default.primary.main, props => sizes.font[props.size] * 1.5, props => props.color || _Colors.default.primary.main);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.15.21",
+  "version": "1.15.26",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "73a5c87eb70b98e72c3fd01307d1bd680ddc60a1",
+  "gitHead": "8a7c124f0e96d768d52239970309264eac5770ef",
   "dependencies": {
-    "@arcblock/icons": "^1.15.21",
-    "@arcblock/react-hooks": "^1.15.21",
+    "@arcblock/icons": "^1.15.26",
+    "@arcblock/react-hooks": "^1.15.26",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",