@arcblock/ux 2.1.70 → 2.2.1

package/lib/Theme/index.js

@@ -3,155 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.create = void 0;
-
-var _styles = require("@mui/material/styles");
-
-require("@fontsource/lato/400.css");
-
-require("@fontsource/lato/700.css");
-
-var _Colors = _interopRequireDefault(require("../Colors"));
-
-const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"];
-
-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; }
-
-const muiDarkTheme = (0, _styles.createTheme)({
-  palette: {
-    mode: 'dark'
+var _exportNames = {
+  ThemeProvider: true
+};
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function get() {
+    return _themeProvider.default;
   }
-}); // 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] : {},
-      {
-    mode = 'light',
-    pageWidth = 'md',
-    palette,
-    typography,
-    overrides
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  // palette 考虑 light & dark mode, dark mode 需要持续完善
-  // - 能配合 ColorModeContext 使用
-  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
-  const _palette = mode === 'light' ? Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
-    background: {
-      paper: _Colors.default.common.white,
-      default: _Colors.default.background.default
-    },
-    mode
-  }), palette || {}) : Object.assign(_objectSpread(_objectSpread({}, muiDarkTheme.palette), {}, {
-    background: {
-      paper: _Colors.default.grey[900],
-      default: _Colors.default.grey[900]
-    },
-    mode
-  }), palette || {});
+});
 
-  const theme = (0, _styles.createTheme)(_objectSpread({
-    themeName: 'ArcBlock',
-    palette: _palette,
-    typography: Object.assign({
-      useNextVariants: true,
-      color: {
-        // 此处 #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]
-      },
-      fontFamily: ['Lato', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
-      // 按最新设计规范, 只使用 400/700
-      fontWeightLight: 400,
-      fontWeightRegular: 400,
-      fontWeightMedium: 700,
-      fontWeightBold: 700,
-      // button 默认使用粗体
-      button: {
-        fontWeight: 700
-      }
-    }, typography || {}),
-    components: _objectSpread({
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none'
-          }
-        }
-      },
-      MuiButtonGroup: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none'
-          }
-        }
-      },
-      MuiTableCell: {
-        styleOverrides: {
-          root: {
-            borderBottomWidth: '0',
-            paddingTop: '14px',
-            paddingBottom: '14px',
-            paddingLeft: 0,
-            paddingRight: '30px'
-          },
-          head: {
-            textTransform: 'uppercase',
-            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
-          },
-          body: {
-            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
-          }
-        }
-      }
-    }, overrides),
-    pageWidth,
-    // 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, _styles.responsiveFontSizes)(theme, {
-    breakpoints: ['xs', 'sm', 'md', 'lg'],
-    disableAlign: false,
-    factor: 3,
-    variants: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
+var _theme = require("./theme");
+
+Object.keys(_theme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _theme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _theme[key];
+    }
   });
-  return enhanced;
-};
+});
+
+var _themeProvider = _interopRequireDefault(require("./theme-provider"));
 
-exports.create = create;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Theme/theme-provider.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ThemeProvider;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = require("styled-components");
+
+var _styles = require("@mui/material/styles");
+
+var _StyledEngineProvider = _interopRequireDefault(require("@mui/material/StyledEngineProvider"));
+
+var _CssBaseline = _interopRequireDefault(require("@mui/material/CssBaseline"));
+
+var _theme = require("./theme");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const defaultTheme = (0, _theme.create)();
+/**
+ * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
+ * 注: 目前 UX 依赖 styled-components, 所以该组件也内置了一个 StyledThemeProvider
+ */
+
+function ThemeProvider(_ref) {
+  let {
+    children,
+    theme
+  } = _ref;
+  return (
+    /*#__PURE__*/
+    // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
+    (0, _jsxRuntime.jsx)(_StyledEngineProvider.default, {
+      injectFirst: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
+        theme: theme,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledComponents.ThemeProvider, {
+          theme: theme,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), children]
+        })
+      })
+    })
+  );
+}
+
+ThemeProvider.propTypes = {
+  children: _propTypes.default.any,
+  theme: _propTypes.default.any
+};
+ThemeProvider.defaultProps = {
+  children: null,
+  theme: defaultTheme
+};

package/lib/Theme/theme.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.create = void 0;
+
+var _styles = require("@mui/material/styles");
+
+require("@fontsource/lato/400.css");
+
+require("@fontsource/lato/700.css");
+
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"];
+
+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; }
+
+const muiDarkTheme = (0, _styles.createTheme)({
+  palette: {
+    mode: 'dark'
+  }
+}); // 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] : {},
+      {
+    mode = 'light',
+    pageWidth = 'md',
+    palette,
+    typography,
+    overrides
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  // palette 考虑 light & dark mode, dark mode 需要持续完善
+  // - 能配合 ColorModeContext 使用
+  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
+  const _palette = mode === 'light' ? Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
+    background: {
+      paper: _Colors.default.common.white,
+      default: _Colors.default.background.default
+    },
+    mode
+  }), palette || {}) : Object.assign(_objectSpread(_objectSpread({}, muiDarkTheme.palette), {}, {
+    background: {
+      paper: _Colors.default.grey[900],
+      default: _Colors.default.grey[900]
+    },
+    mode
+  }), palette || {});
+
+  const theme = (0, _styles.createTheme)(_objectSpread({
+    themeName: 'ArcBlock',
+    palette: _palette,
+    typography: Object.assign({
+      useNextVariants: true,
+      color: {
+        // 此处 #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]
+      },
+      fontFamily: ['Lato', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
+      // 按最新设计规范, 只使用 400/700
+      fontWeightLight: 400,
+      fontWeightRegular: 400,
+      fontWeightMedium: 700,
+      fontWeightBold: 700,
+      // button 默认使用粗体
+      button: {
+        fontWeight: 700
+      }
+    }, typography || {}),
+    components: _objectSpread({
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            boxShadow: 'none'
+          }
+        }
+      },
+      MuiButtonGroup: {
+        styleOverrides: {
+          root: {
+            boxShadow: 'none'
+          }
+        }
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          root: {
+            borderBottomWidth: '0',
+            paddingTop: '14px',
+            paddingBottom: '14px',
+            paddingLeft: 0,
+            paddingRight: '30px'
+          },
+          head: {
+            textTransform: 'uppercase',
+            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+          },
+          body: {
+            color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
+          }
+        }
+      }
+    }, overrides),
+    pageWidth,
+    // 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, _styles.responsiveFontSizes)(theme, {
+    breakpoints: ['xs', 'sm', 'md', 'lg'],
+    disableAlign: false,
+    factor: 3,
+    variants: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
+  });
+  return enhanced;
+};
+
+exports.create = create;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.70",
+  "version": "2.2.1",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -32,59 +32,59 @@
     "access": "public"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "babel-plugin-inline-react-svg": "^1.1.1",
-    "babel-plugin-styled-components": "^1.10.7",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^24.1.0",
-    "moment-timezone": "^0.5.33"
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.18.10",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "babel-plugin-inline-react-svg": "^1.1.2",
+    "babel-plugin-styled-components": "^1.13.3",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^24.9.0",
+    "moment-timezone": "^0.5.34"
   },
   "peerDependencies": {
     "@sentry/browser": "^5.0.8",
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "f8a19c44fc1814f7c191023297b38ef9af21efc6",
+  "gitHead": "7fd063875d78f056aadea005b21b48c8c3bfb6c7",
   "dependencies": {
-    "@arcblock/icons": "^2.1.70",
-    "@arcblock/react-hooks": "^2.1.70",
+    "@arcblock/icons": "^2.2.1",
+    "@arcblock/react-hooks": "^2.2.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@fontsource/lato": "^4.5.3",
-    "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.4",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@fontsource/lato": "^4.5.8",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.9.3",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
-    "axios": "^0.21.2",
+    "axios": "^0.21.4",
     "base64-url": "^2.3.3",
-    "copy-to-clipboard": "^3.2.0",
-    "core-js": "^3.6.4",
-    "d3-geo": "^1.11.6",
-    "dayjs": "^1.11.2",
+    "copy-to-clipboard": "^3.3.1",
+    "core-js": "^3.24.1",
+    "d3-geo": "^1.12.1",
+    "dayjs": "^1.11.4",
     "devices.css": "^0.1.15",
     "highlight.js": "^11.6.0",
-    "is-svg": "^4.3.1",
-    "js-cookie": "^2.2.0",
+    "is-svg": "^4.3.2",
+    "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
-    "mdi-material-ui": "^7.2.0",
+    "mdi-material-ui": "^7.4.0",
     "mui-datatables": "^4.2.2",
     "notistack": "^2.0.5",
     "react-cookie-consent": "^6.4.1",
     "react-error-boundary": "^3.1.4",
     "react-helmet": "^6.1.0",
-    "react-intersection-observer": "^8.31.1",
-    "react-lottie-player": "^1.4.2",
-    "react-player": "^1.15.2",
-    "react-router-dom": "^5.1.2",
-    "react-shadow": "^19.0.2",
-    "react-use": "^17.2.4",
+    "react-intersection-observer": "^8.34.0",
+    "react-lottie-player": "^1.4.3",
+    "react-player": "^1.15.3",
+    "react-router-dom": "^5.3.3",
+    "react-shadow": "^19.0.3",
+    "react-use": "^17.4.0",
     "rebound": "^0.1.0",
-    "styled-components": "^5.0.0",
-    "topojson-client": "^3.0.0",
+    "styled-components": "^5.3.5",
+    "topojson-client": "^3.1.0",
     "versor": "^0.0.4"
   }
 }

package/src/Theme/index.js

@@ -1,164 +1,2 @@
-// https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/700.css';
-import colors from '../Colors';
-
-const muiDarkTheme = createTheme({ palette: { mode: 'dark' } });
-
-// https://material-ui.com/customization/default-theme/
-// eslint-disable-next-line import/prefer-default-export
-export const create = ({ mode = 'light', pageWidth = 'md', palette, typography, overrides, ...rest } = {}) => {
-  // palette 考虑 light & dark mode, dark mode 需要持续完善
-  // - 能配合 ColorModeContext 使用
-  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
-  const _palette =
-    mode === 'light'
-      ? Object.assign(
-          {
-            ...colors,
-            background: {
-              paper: colors.common.white,
-              default: colors.background.default,
-            },
-            mode,
-          },
-          palette || {}
-        )
-      : Object.assign(
-          {
-            ...muiDarkTheme.palette,
-            background: {
-              paper: colors.grey[900],
-              default: colors.grey[900],
-            },
-            mode,
-          },
-          palette || {}
-        );
-
-  const theme = createTheme({
-    themeName: 'ArcBlock',
-    palette: _palette,
-    typography: Object.assign(
-      {
-        useNextVariants: true,
-        color: {
-          // 此处 #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.common.white,
-          gray: mode === 'light' ? colors.grey[500] : colors.grey[300],
-        },
-        fontFamily: [
-          'Lato',
-          'Avenir',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          'Roboto',
-          '"Helvetica Neue"',
-          'Arial',
-          'sans-serif',
-          '"Apple Color Emoji"',
-          '"Segoe UI Emoji"',
-          '"Segoe UI Symbol"',
-        ].join(','),
-        // 按最新设计规范, 只使用 400/700
-        fontWeightLight: 400,
-        fontWeightRegular: 400,
-        fontWeightMedium: 700,
-        fontWeightBold: 700,
-        // button 默认使用粗体
-        button: {
-          fontWeight: 700,
-        },
-      },
-      typography || {}
-    ),
-    components: {
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none',
-          },
-        },
-      },
-      MuiButtonGroup: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none',
-          },
-        },
-      },
-      MuiTableCell: {
-        styleOverrides: {
-          root: {
-            borderBottomWidth: '0',
-            paddingTop: '14px',
-            paddingBottom: '14px',
-            paddingLeft: 0,
-            paddingRight: '30px',
-          },
-          head: {
-            textTransform: 'uppercase',
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
-          },
-          body: {
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
-          },
-        },
-      },
-      ...overrides,
-    },
-    pageWidth,
-    // 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 = responsiveFontSizes(theme, {
-    breakpoints: ['xs', 'sm', 'md', 'lg'],
-    disableAlign: false,
-    factor: 3,
-    variants: [
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6',
-      'subtitle1',
-      'subtitle2',
-      'body1',
-      'body2',
-      'caption',
-      'button',
-      'overline',
-    ],
-  });
-
-  return enhanced;
-};
+export * from './theme';
+export { default as ThemeProvider } from './theme-provider';

package/src/Theme/theme-provider.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import StyledEngineProvider from '@mui/material/StyledEngineProvider';
+import CssBaseline from '@mui/material/CssBaseline';
+import { create } from './theme';
+
+const defaultTheme = create();
+
+/**
+ * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
+ * 注: 目前 UX 依赖 styled-components, 所以该组件也内置了一个 StyledThemeProvider
+ */
+export default function ThemeProvider({ children, theme }) {
+  return (
+    // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={theme}>
+        <StyledThemeProvider theme={theme}>
+          <CssBaseline />
+          {children}
+        </StyledThemeProvider>
+      </MuiThemeProvider>
+    </StyledEngineProvider>
+  );
+}
+
+ThemeProvider.propTypes = {
+  children: PropTypes.any,
+  theme: PropTypes.any,
+};
+
+ThemeProvider.defaultProps = {
+  children: null,
+  theme: defaultTheme,
+};

package/src/Theme/theme.js

@@ -0,0 +1,164 @@
+// https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
+import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import '@fontsource/lato/400.css';
+import '@fontsource/lato/700.css';
+import colors from '../Colors';
+
+const muiDarkTheme = createTheme({ palette: { mode: 'dark' } });
+
+// https://material-ui.com/customization/default-theme/
+// eslint-disable-next-line import/prefer-default-export
+export const create = ({ mode = 'light', pageWidth = 'md', palette, typography, overrides, ...rest } = {}) => {
+  // palette 考虑 light & dark mode, dark mode 需要持续完善
+  // - 能配合 ColorModeContext 使用
+  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
+  const _palette =
+    mode === 'light'
+      ? Object.assign(
+          {
+            ...colors,
+            background: {
+              paper: colors.common.white,
+              default: colors.background.default,
+            },
+            mode,
+          },
+          palette || {}
+        )
+      : Object.assign(
+          {
+            ...muiDarkTheme.palette,
+            background: {
+              paper: colors.grey[900],
+              default: colors.grey[900],
+            },
+            mode,
+          },
+          palette || {}
+        );
+
+  const theme = createTheme({
+    themeName: 'ArcBlock',
+    palette: _palette,
+    typography: Object.assign(
+      {
+        useNextVariants: true,
+        color: {
+          // 此处 #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.common.white,
+          gray: mode === 'light' ? colors.grey[500] : colors.grey[300],
+        },
+        fontFamily: [
+          'Lato',
+          'Avenir',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          '"Segoe UI"',
+          'Roboto',
+          '"Helvetica Neue"',
+          'Arial',
+          'sans-serif',
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+        ].join(','),
+        // 按最新设计规范, 只使用 400/700
+        fontWeightLight: 400,
+        fontWeightRegular: 400,
+        fontWeightMedium: 700,
+        fontWeightBold: 700,
+        // button 默认使用粗体
+        button: {
+          fontWeight: 700,
+        },
+      },
+      typography || {}
+    ),
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            boxShadow: 'none',
+          },
+        },
+      },
+      MuiButtonGroup: {
+        styleOverrides: {
+          root: {
+            boxShadow: 'none',
+          },
+        },
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          root: {
+            borderBottomWidth: '0',
+            paddingTop: '14px',
+            paddingBottom: '14px',
+            paddingLeft: 0,
+            paddingRight: '30px',
+          },
+          head: {
+            textTransform: 'uppercase',
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
+          },
+          body: {
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
+          },
+        },
+      },
+      ...overrides,
+    },
+    pageWidth,
+    // 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 = responsiveFontSizes(theme, {
+    breakpoints: ['xs', 'sm', 'md', 'lg'],
+    disableAlign: false,
+    factor: 3,
+    variants: [
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'subtitle1',
+      'subtitle2',
+      'body1',
+      'body2',
+      'caption',
+      'button',
+      'overline',
+    ],
+  });
+
+  return enhanced;
+};