@arcblock/ux 1.15.25 → 1.15.29

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,84 @@
+"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',
+    contrastText: '#fff'
+  },
+  // override
+  secondary: {
+    main: '#31AB86',
+    contrastText: '#fff'
+  },
+  // override
+  error: {
+    main: '#F16E6E',
+    contrastText: '#fff'
+  },
+  // override
+  warning: {
+    main: '#DE9E37',
+    contrastText: '#fff'
+  },
+  // override
+  info: {
+    main: '#0775F8',
+    contrastText: '#fff'
+  },
+  // override
+  success: {
+    main: '#34BE74',
+    contrastText: '#fff'
+  },
+  // 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/CookieConsent/index.js

@@ -3,83 +3,96 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UXCookieConsent = UXCookieConsent;
 exports.default = DefaultCookieConsent;
+Object.defineProperty(exports, "resetCookieConsentValue", {
+  enumerable: true,
+  get: function get() {
+    return _reactCookieConsent.resetCookieConsentValue;
+  }
+});
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
-var _reactCookieConsent = _interopRequireDefault(require("react-cookie-consent"));
+var _reactCookieConsent = _interopRequireWildcard(require("react-cookie-consent"));
 
-const _excluded = ["style", "contentStyle"];
+const _excluded = ["children", "locale", "style"];
 
-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 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 _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 _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; }
-
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
 
-/**
- * UXCookieConsent, 目前直接返回 CookieConsent 组件, 定制化要求高的场景可以使用该组件
- * 使用文档参考：https://github.com/Mastermindzh/react-cookie-consent
- */
-function UXCookieConsent(props) {
-  return /*#__PURE__*/_react.default.createElement(_reactCookieConsent.default, props);
-}
+const translations = {
+  en: {
+    content: 'We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content, to analyze our website traffic, and to understand where our visitors are coming from.',
+    agree: 'I Understand'
+  },
+  zh: {
+    content: '我们使用 cookies 和其他跟踪技术来改善您在我们网站上的浏览体验，向您展示个性化的内容，分析我们的网站流量，并了解我们的访问者来自哪里。',
+    agree: '我知道了'
+  }
+};
 /**
  * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用
  * - 默认内容
  * - 默认配置/样式
  */
 
-
 function DefaultCookieConsent(_ref) {
   let {
-    style,
-    contentStyle
+    children,
+    locale,
+    style
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react.default.createElement(_reactCookieConsent.default, Object.assign({
+  if (locale && !translations[locale]) {
+    // eslint-disable-next-line no-param-reassign
+    locale = 'en';
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Wrapper, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_reactCookieConsent.default, Object.assign({
+    disableStyles: true,
     disableButtonStyles: true,
     ButtonComponent: _Button.default,
+    buttonText: translations[locale].agree,
     buttonClasses: "MuiButton-contained MuiButton-containedPrimary",
     buttonStyle: {
-      margin: '0 16px',
+      marginTop: 16,
       padding: '6px 16px'
-    },
-    contentStyle: _objectSpread({
-      margin: 16
-    }, contentStyle),
-    style: _objectSpread({
-      boxSizing: 'border-box',
-      alignItems: 'center',
-      padding: 16
-    }, style)
-  }, rest));
+    }
+  }, rest), children || /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: 0
+    }
+  }, translations[locale].content)));
 }
 
 DefaultCookieConsent.propTypes = {
   children: _propTypes.default.any,
   style: _propTypes.default.object,
-  contentStyle: _propTypes.default.object
+  locale: _propTypes.default.string
 };
 DefaultCookieConsent.defaultProps = {
-  children: /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      margin: 0,
-      textAlign: 'justify'
-    }
-  }, "We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content, to analyze our website traffic, and to understand where our visitors are coming from."),
+  children: null,
   style: {},
-  contentStyle: {}
-};
+  locale: 'en'
+};
+
+const Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "CookieConsent__Wrapper",
+  componentId: "sc-xilwg4-0"
+})(["box-sizing:border-box;position:absolute;right:20px;bottom:20px;z-index:999;max-width:440px;padding:16px 24px;font-size:16px;color:#666;background:#fff;border-radius:6px;box-shadow:0 0 18px rgba(0,0,0,0.2);&:empty{display:none;}button{min-width:200px;}@media screen and (max-width:480px){left:16px;right:16px;bottom:16px;width:auto;button{display:block;width:100%;}}"]);

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,12 +3,14 @@
 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 }; }
@@ -23,29 +25,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-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/
-
-exports.colors = colors;
-
+// https://material-ui.com/customization/default-theme/
+// eslint-disable-next-line import/prefer-default-export
 const create = function create() {
   let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       {
@@ -59,35 +40,22 @@ const create = function create() {
 
   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(',')
@@ -106,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: {
@@ -119,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: {
@@ -145,15 +113,36 @@ 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, {

package/lib/Util/index.js

@@ -116,10 +116,10 @@ const getBackground = props => {
   }
 
   if (props.dark) {
-    return props.theme.palette.text.primary;
+    return props.theme.palette.common.black;
   }
 
-  return props.theme.palette.text.contrast;
+  return props.theme.palette.common.white;
 };
 
 exports.getBackground = getBackground;

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.25",
+  "version": "1.15.29",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "2ed5c5f32f4d1065109e18a3ccfc04a559595835",
+  "gitHead": "70fc37255f3e512fd45c5c0f0e06ee828d69b259",
   "dependencies": {
-    "@arcblock/icons": "^1.15.25",
-    "@arcblock/react-hooks": "^1.15.25",
+    "@arcblock/icons": "^1.15.29",
+    "@arcblock/react-hooks": "^1.15.29",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",