@nocobase/plugin-theme-editor 0.11.1-alpha.1

package/README.md

@@ -0,0 +1,55 @@
+English | [中文](./README.zh-CN.md)
+
+> 当前主题功能是在 antd 5.x 版本的基础上实现的，所以在阅读本文之前最好先阅读一下[定制主题](https://ant.design/docs/react/customize-theme-cn#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98)相关的概念。
+
+## 介绍
+
+目前支持编辑全局范围的 [SeedToken](https://ant.design/docs/react/customize-theme-cn#seedtoken)、[MapToken](https://ant.design/docs/react/customize-theme-cn#maptoken)、[AliasToken](https://ant.design/docs/react/customize-theme-cn#aliastoken)，和支持[切换](https://ant.design/docs/react/customize-theme-cn#%E4%BD%BF%E7%94%A8%E9%A2%84%E8%AE%BE%E7%AE%97%E6%B3%95)为 `暗黑模式` 和 `紧凑模式`。后期有可能会支持[组件级别](https://ant.design/docs/react/customize-theme-cn#%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%8F%98%E9%87%8F-component-token)的主题定制。
+
+## 如何使用
+
+### 1、启用主题插件
+
+首先把 NocoBase 更新到最新版本，然后会在[插件管理页面](http://localhost:13000/admin/pm/list/local/)看到 `theme-editor` 的卡片，点击卡片右下角的 `启用` 按钮等待页面刷新。
+
+<a href="https://sm.ms/image/EkiMxUpngzAb8yo" target="_blank"><img src="https://s2.loli.net/2023/07/19/EkiMxUpngzAb8yo.png" height="400" style="object-fit: contain;"></a>
+
+### 2、跳转到主题配置页面
+
+启用之后点击卡片左下角的设置按钮，会跳转到主题编辑页面。默认会有三个主题选项，分别是 `antd 的默认主题`、`暗黑主题` 和 `紧凑主题`。
+
+<a href="https://sm.ms/image/EGXaztphIqRcxgB" target="_blank"><img src="https://s2.loli.net/2023/07/19/EGXaztphIqRcxgB.png" height="400" style="object-fit: contain;"></a>
+
+## 新增一个主题
+
+点击 `添加新主题` 按钮，选择 `新增一个全新的主题`，然后会在页面右侧弹出一个 `主题编辑器`，支持编辑 `颜色`、`尺寸`、`风格`等。编辑好之后输入主题名称然后点击保存即可完成主题的新增。
+
+<a href="https://sm.ms/image/ksxKVAG9ltgFEXo" target="_blank"><img src="https://s2.loli.net/2023/07/19/ksxKVAG9ltgFEXo.png" height="400" style="object-fit: contain;"></a>
+
+## 应用新主题
+
+可以把鼠标移到页面右上角，可以看到一个主题切换项，点击可以切换到其他主题，比如可以切换刚才新增的主题。
+
+<a href="https://sm.ms/image/5I8F9dY4chPltZD" target="_blank"><img src="https://s2.loli.net/2023/07/19/5I8F9dY4chPltZD.png" height="400" style="object-fit: contain;"></a>
+
+## 编辑已经存在的主题
+
+点击卡片左下角的 `编辑` 按钮，如同新增主题一样，会在页面右侧弹出一个 `主题编辑器`，编辑好之后点击保存即可完成主题的编辑。
+
+## 用户切换主题时的可选项
+
+新添加的主题默认是允许非管理员用户切换的，如果不想让非管理员用户切换某个主题，可以关闭主题卡片右下角的 `可被用户选择` 开关，这样用户就无法切换到该主题了。
+
+<a href="https://sm.ms/image/aNOo3n1hzMJkFfv" target="_blank"><img src="https://s2.loli.net/2023/07/19/aNOo3n1hzMJkFfv.png" height="400" style="object-fit: contain;"></a>
+
+## 设置为默认主题（默认主题不可删除）
+
+在初始状态下，默认主题是 `antd 的默认主题`，如果想把某个主题设置为默认主题，可以开启卡片右下角的 `默认主题` 开关，这样当新用户第一次打开页面时应用的就是该默认主题。
+
+<a href="https://sm.ms/image/thZGqcmnJz5gwrY" target="_blank"><img src="https://s2.loli.net/2023/07/19/thZGqcmnJz5gwrY.png" height="400" style="object-fit: contain;"></a>
+
+## 删除主题
+
+点击卡片下方的 `删除` 按钮，然后点击弹出的确认按钮即可删除主题。
+
+<a href="https://sm.ms/image/jAyfnuMNO1vzcB4" target="_blank"><img src="https://s2.loli.net/2023/07/19/jAyfnuMNO1vzcB4.png" height="400" style="object-fit: contain;"></a>

package/README.zh-CN.md

@@ -0,0 +1,55 @@
+[English](./README.md) | 中文
+
+> 当前主题功能是在 antd 5.x 版本的基础上实现的，所以在阅读本文之前最好先阅读一下[定制主题](https://ant.design/docs/react/customize-theme-cn#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98)相关的概念。
+
+## 介绍
+
+目前支持编辑全局范围的 [SeedToken](https://ant.design/docs/react/customize-theme-cn#seedtoken)、[MapToken](https://ant.design/docs/react/customize-theme-cn#maptoken)、[AliasToken](https://ant.design/docs/react/customize-theme-cn#aliastoken)，和支持[切换](https://ant.design/docs/react/customize-theme-cn#%E4%BD%BF%E7%94%A8%E9%A2%84%E8%AE%BE%E7%AE%97%E6%B3%95)为 `暗黑模式` 和 `紧凑模式`。后期有可能会支持[组件级别](https://ant.design/docs/react/customize-theme-cn#%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%8F%98%E9%87%8F-component-token)的主题定制。
+
+## 如何使用
+
+### 1、启用主题插件
+
+首先把 NocoBase 更新到最新版本，然后会在[插件管理页面](http://localhost:13000/admin/pm/list/local/)看到 `theme-editor` 的卡片，点击卡片右下角的 `启用` 按钮等待页面刷新。
+
+<a href="https://sm.ms/image/EkiMxUpngzAb8yo" target="_blank"><img src="https://s2.loli.net/2023/07/19/EkiMxUpngzAb8yo.png" height="400" style="object-fit: contain;"></a>
+
+### 2、跳转到主题配置页面
+
+启用之后点击卡片左下角的设置按钮，会跳转到主题编辑页面。默认会有三个主题选项，分别是 `antd 的默认主题`、`暗黑主题` 和 `紧凑主题`。
+
+<a href="https://sm.ms/image/EGXaztphIqRcxgB" target="_blank"><img src="https://s2.loli.net/2023/07/19/EGXaztphIqRcxgB.png" height="400" style="object-fit: contain;"></a>
+
+## 新增一个主题
+
+点击 `添加新主题` 按钮，选择 `新增一个全新的主题`，然后会在页面右侧弹出一个 `主题编辑器`，支持编辑 `颜色`、`尺寸`、`风格`等。编辑好之后输入主题名称然后点击保存即可完成主题的新增。
+
+<a href="https://sm.ms/image/ksxKVAG9ltgFEXo" target="_blank"><img src="https://s2.loli.net/2023/07/19/ksxKVAG9ltgFEXo.png" height="400" style="object-fit: contain;"></a>
+
+## 应用新主题
+
+可以把鼠标移到页面右上角，可以看到一个主题切换项，点击可以切换到其他主题，比如可以切换刚才新增的主题。
+
+<a href="https://sm.ms/image/5I8F9dY4chPltZD" target="_blank"><img src="https://s2.loli.net/2023/07/19/5I8F9dY4chPltZD.png" height="400" style="object-fit: contain;"></a>
+
+## 编辑已经存在的主题
+
+点击卡片左下角的 `编辑` 按钮，如同新增主题一样，会在页面右侧弹出一个 `主题编辑器`，编辑好之后点击保存即可完成主题的编辑。
+
+## 用户切换主题时的可选项
+
+新添加的主题默认是允许非管理员用户切换的，如果不想让非管理员用户切换某个主题，可以关闭主题卡片右下角的 `可被用户选择` 开关，这样用户就无法切换到该主题了。
+
+<a href="https://sm.ms/image/aNOo3n1hzMJkFfv" target="_blank"><img src="https://s2.loli.net/2023/07/19/aNOo3n1hzMJkFfv.png" height="400" style="object-fit: contain;"></a>
+
+## 设置为默认主题（默认主题不可删除）
+
+在初始状态下，默认主题是 `antd 的默认主题`，如果想把某个主题设置为默认主题，可以开启卡片右下角的 `默认主题` 开关，这样当新用户第一次打开页面时应用的就是该默认主题。
+
+<a href="https://sm.ms/image/thZGqcmnJz5gwrY" target="_blank"><img src="https://s2.loli.net/2023/07/19/thZGqcmnJz5gwrY.png" height="400" style="object-fit: contain;"></a>
+
+## 删除主题
+
+点击卡片下方的 `删除` 按钮，然后点击弹出的确认按钮即可删除主题。
+
+<a href="https://sm.ms/image/jAyfnuMNO1vzcB4" target="_blank"><img src="https://s2.loli.net/2023/07/19/jAyfnuMNO1vzcB4.png" height="400" style="object-fit: contain;"></a>

package/client.d.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+export * from './lib/client';
+export { default } from './lib/client';

package/client.js

@@ -0,0 +1,65 @@
+'use strict';
+
+function _getRequireWildcardCache(nodeInterop) {
+  if (typeof WeakMap !== 'function') return null;
+  var cacheBabelInterop = new WeakMap();
+  var cacheNodeInterop = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
+    return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+  })(nodeInterop);
+}
+
+function _interopRequireWildcard(obj, nodeInterop) {
+  if (!nodeInterop && obj && obj.__esModule) {
+    return obj;
+  }
+  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
+    return { default: obj };
+  }
+  var cache = _getRequireWildcardCache(nodeInterop);
+  if (cache && cache.has(obj)) {
+    return cache.get(obj);
+  }
+  var newObj = {};
+  var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var key in obj) {
+    if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
+      var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+      if (desc && (desc.get || desc.set)) {
+        Object.defineProperty(newObj, key, desc);
+      } else {
+        newObj[key] = obj[key];
+      }
+    }
+  }
+  newObj.default = obj;
+  if (cache) {
+    cache.set(obj, newObj);
+  }
+  return newObj;
+}
+
+var _index = _interopRequireWildcard(require('./lib/client'));
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+var _exportNames = {};
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  },
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === 'default' || key === '__esModule') return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    },
+  });
+});

package/lib/client/antd-token-previewer/ColorPanel.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties, FC } from 'react';
+import tinycolor from 'tinycolor2';
+export type HexColorInputProps = {
+    value: string;
+    onChange?: (value: string) => void;
+    alpha?: boolean;
+};
+type RgbaColor = tinycolor.ColorFormats.RGBA;
+export type RgbColorInputProps = {
+    value?: RgbaColor;
+    onChange?: (value: RgbaColor) => void;
+    alpha?: boolean;
+};
+export type ColorPanelProps = {
+    color: string;
+    onChange: (color: string) => void;
+    alpha?: boolean;
+    style?: CSSProperties;
+};
+declare const ColorPanel: FC<ColorPanelProps>;
+export default ColorPanel;

package/lib/client/antd-token-previewer/ColorPanel.js

@@ -0,0 +1,359 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function _classnames() {
+    return data;
+  };
+  return data;
+}
+function _useMergedState3() {
+  const data = _interopRequireDefault(require("rc-util/es/hooks/useMergedState"));
+  _useMergedState3 = function _useMergedState3() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+function _reactColorful() {
+  const data = require("react-colorful");
+  _reactColorful = function _reactColorful() {
+    return data;
+  };
+  return data;
+}
+function _tinycolor() {
+  const data = _interopRequireDefault(require("tinycolor2"));
+  _tinycolor = function _tinycolor() {
+    return data;
+  };
+  return data;
+}
+var _makeStyle = _interopRequireDefault(require("./utils/makeStyle"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+const useToken = _antd().theme.useToken;
+const useStyle = (0, _makeStyle.default)('ColorPanel', token => ({
+  '.color-panel': {
+    padding: 12,
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    border: '1px solid rgba(0, 0, 0, 0.06)',
+    boxShadow: token.boxShadow,
+    width: 224,
+    boxSizing: 'border-box',
+    '.color-panel-mode': {
+      display: 'flex',
+      alignItems: 'center',
+      marginBottom: 6
+    },
+    '.color-panel-preview': {
+      width: 24,
+      height: 24,
+      borderRadius: 4,
+      boxShadow: '0 2px 3px -1px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.09)',
+      flex: 'none',
+      overflow: 'hidden',
+      background: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 32px'
+    },
+    '.color-panel-preset-colors': {
+      paddingTop: 12,
+      display: 'flex',
+      flexWrap: 'wrap',
+      width: 200
+    },
+    '.color-panel-preset-color-btn': {
+      borderRadius: 4,
+      width: 20,
+      height: 20,
+      border: 'none',
+      outline: 'none',
+      margin: 4,
+      cursor: 'pointer',
+      boxShadow: '0 2px 3px -1px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.09)'
+    },
+    '.color-panel-mode-title': {
+      color: token.colorTextPlaceholder,
+      marginTop: 2,
+      fontSize: 12,
+      textAlign: 'center'
+    },
+    '.color-panel-rgba-input': {
+      display: 'flex',
+      alignItems: 'center',
+      '&-part': {
+        flex: 1,
+        width: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        '&-title': {
+          color: token.colorTextPlaceholder,
+          marginTop: 2,
+          fontSize: 12
+        },
+        '&:not(:last-child)': {
+          marginRight: 4
+        },
+        [`${token.rootCls}-input-number`]: {
+          width: '100%',
+          input: {
+            fontSize: 12,
+            padding: '0 4px'
+          }
+        }
+      }
+    }
+  }
+}));
+const getHexValue = (value, alpha = false) => {
+  return alpha ? (0, _tinycolor().default)(value).toHex8() : (0, _tinycolor().default)(value).toHex();
+};
+const HexColorInput = ({
+  value,
+  onChange,
+  alpha
+}) => {
+  const _useState = (0, _react().useState)(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    hexValue = _useState2[0],
+    setHexValue = _useState2[1];
+  const focusRef = (0, _react().useRef)(false);
+  const handleChange = e => {
+    setHexValue(e.target.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(getHexValue(e.target.value, alpha));
+  };
+  const handleBlur = e => {
+    focusRef.current = false;
+    setHexValue(getHexValue(e.target.value, alpha));
+  };
+  const handleFocus = () => {
+    focusRef.current = true;
+  };
+  (0, _react().useEffect)(() => {
+    if (!focusRef.current) {
+      setHexValue(getHexValue(value, alpha));
+    }
+  }, [value, alpha]);
+  return _react().default.createElement("div", null, _react().default.createElement(_antd().Input, {
+    prefix: "#",
+    size: "small",
+    value: hexValue,
+    onFocus: handleFocus,
+    onChange: handleChange,
+    onBlur: handleBlur
+  }), _react().default.createElement("div", {
+    className: "color-panel-mode-title"
+  }, "HEX", alpha ? '8' : ''));
+};
+const RgbColorInput = ({
+  value: customValue,
+  onChange,
+  alpha
+}) => {
+  const _useMergedState = (0, _useMergedState3().default)(customValue !== null && customValue !== void 0 ? customValue : {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 1
+    }, {
+      value: customValue,
+      onChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    value = _useMergedState2[0],
+    setValue = _useMergedState2[1];
+  return _react().default.createElement("div", {
+    className: "color-panel-rgba-input"
+  }, _react().default.createElement(_antd().ConfigProvider, {
+    theme: {
+      components: {
+        InputNumber: {
+          handleWidth: 12
+        }
+      }
+    }
+  }, _react().default.createElement("div", {
+    className: "color-panel-rgba-input-part"
+  }, _react().default.createElement(_antd().InputNumber, {
+    min: 0,
+    max: 255,
+    size: "small",
+    value: value.r,
+    onChange: v => setValue(_objectSpread(_objectSpread({}, value), {}, {
+      r: v !== null && v !== void 0 ? v : 0
+    }))
+  }), _react().default.createElement("div", {
+    className: "color-panel-mode-title"
+  }, "R")), _react().default.createElement("div", {
+    className: "color-panel-rgba-input-part"
+  }, _react().default.createElement(_antd().InputNumber, {
+    min: 0,
+    max: 255,
+    size: "small",
+    value: value.g,
+    onChange: v => setValue(_objectSpread(_objectSpread({}, value), {}, {
+      g: v !== null && v !== void 0 ? v : 0
+    }))
+  }), _react().default.createElement("div", {
+    className: "color-panel-mode-title"
+  }, "G")), _react().default.createElement("div", {
+    className: "color-panel-rgba-input-part"
+  }, _react().default.createElement(_antd().InputNumber, {
+    min: 0,
+    max: 255,
+    size: "small",
+    value: value.b,
+    onChange: v => setValue(_objectSpread(_objectSpread({}, value), {}, {
+      b: v !== null && v !== void 0 ? v : 0
+    }))
+  }), _react().default.createElement("div", {
+    className: "color-panel-mode-title"
+  }, "B")), alpha && _react().default.createElement("div", {
+    className: "color-panel-rgba-input-part"
+  }, _react().default.createElement(_antd().InputNumber, {
+    min: 0,
+    max: 1,
+    step: 0.01,
+    size: "small",
+    value: value.a,
+    onChange: v => setValue(_objectSpread(_objectSpread({}, value), {}, {
+      a: v !== null && v !== void 0 ? v : 0
+    }))
+  }), _react().default.createElement("div", {
+    className: "color-panel-mode-title"
+  }, "A"))));
+};
+const colorModes = ['HEX', 'HEX8', 'RGB', 'RGBA'];
+const getColorStr = (color, mode) => {
+  switch (mode) {
+    case 'HEX':
+      return (0, _tinycolor().default)(color).toHexString();
+    case 'HEX8':
+      return (0, _tinycolor().default)(color).toHex8String();
+    case 'RGBA':
+    case 'RGB':
+    default:
+      return (0, _tinycolor().default)(color).toRgbString();
+  }
+};
+const ColorPanel = ({
+  color,
+  onChange: _onChange,
+  alpha,
+  style
+}) => {
+  const _useToken = useToken(),
+    token = _useToken.token;
+  const _useStyle = useStyle(),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    wrapSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  const _React$useState = _react().default.useState('HEX'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    colorMode = _React$useState2[0],
+    setColorMode = _React$useState2[1];
+  const presetColors = (0, _react().useMemo)(() => {
+    return [token.blue, token.purple, token.cyan, token.green, token.magenta, token.pink, token.red, token.orange, token.yellow, token.volcano, token.geekblue, token.gold, token.lime, '#000'];
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, []);
+  const handleColorModeChange = value => {
+    setColorMode(value);
+    _onChange(getColorStr(color, value));
+  };
+  return wrapSSR(_react().default.createElement("div", {
+    className: (0, _classnames().default)(hashId, 'color-panel'),
+    style: style
+  }, (colorMode === 'HEX' || colorMode === 'RGB') && _react().default.createElement(_reactColorful().HexColorPicker, {
+    style: {
+      height: 160
+    },
+    color: (0, _tinycolor().default)(color).toHex(),
+    onChange: value => {
+      _onChange(getColorStr(value, colorMode));
+    }
+  }), (colorMode === 'RGBA' || colorMode === 'HEX8') && _react().default.createElement(_reactColorful().RgbaColorPicker, {
+    style: {
+      height: 160
+    },
+    color: (0, _tinycolor().default)(color).toRgb(),
+    onChange: value => {
+      _onChange(getColorStr(value, colorMode));
+    }
+  }), _react().default.createElement("div", {
+    style: {
+      marginTop: 12
+    }
+  }, _react().default.createElement("div", {
+    className: "color-panel-mode"
+  }, _react().default.createElement("div", {
+    className: "color-panel-preview"
+  }, _react().default.createElement("div", {
+    style: {
+      backgroundColor: color,
+      width: '100%',
+      height: '100%'
+    }
+  })), _react().default.createElement(_antd().Select, {
+    value: colorMode,
+    onChange: handleColorModeChange,
+    options: colorModes.filter(item => alpha || item === 'HEX' || item === 'RGB').map(item => ({
+      value: item,
+      key: item
+    })),
+    size: "small",
+    bordered: false,
+    dropdownMatchSelectWidth: false
+  })), colorMode === 'HEX' && _react().default.createElement(HexColorInput, {
+    value: (0, _tinycolor().default)(color).toHex(),
+    onChange: v => _onChange === null || _onChange === void 0 ? void 0 : _onChange((0, _tinycolor().default)(v).toHexString())
+  }), colorMode === 'HEX8' && _react().default.createElement(HexColorInput, {
+    alpha: true,
+    value: (0, _tinycolor().default)(color).toHex8(),
+    onChange: v => _onChange === null || _onChange === void 0 ? void 0 : _onChange((0, _tinycolor().default)(v).toHex8String())
+  }), (colorMode === 'RGBA' || colorMode === 'RGB') && _react().default.createElement(RgbColorInput, {
+    alpha: colorMode === 'RGBA',
+    value: (0, _tinycolor().default)(color).toRgb(),
+    onChange: v => _onChange === null || _onChange === void 0 ? void 0 : _onChange((0, _tinycolor().default)(v).toRgbString())
+  })), _react().default.createElement("div", {
+    className: "color-panel-preset-colors"
+  }, presetColors.map(presetColor => _react().default.createElement("button", {
+    key: presetColor,
+    className: "color-panel-preset-color-btn",
+    style: {
+      backgroundColor: presetColor
+    },
+    onClick: () => _onChange(presetColor)
+  })))));
+};
+var _default = ColorPanel;
+exports.default = _default;

package/lib/client/antd-token-previewer/ColorPreview.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import React from 'react';
+export type ColorPreviewProps = {
+    color: string;
+    dark?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const ColorPreview: FC<ColorPreviewProps>;
+export default ColorPreview;

package/lib/client/antd-token-previewer/ColorPreview.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function _classnames() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+var _getColorBgImg = _interopRequireDefault(require("./utils/getColorBgImg"));
+var _makeStyle = _interopRequireDefault(require("./utils/makeStyle"));
+const _excluded = ["color", "style", "className", "dark"];
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 useStyle = (0, _makeStyle.default)('ColorPreview', () => ({
+  '.previewer-color-preview': {
+    width: 20,
+    height: 20,
+    position: 'relative',
+    borderRadius: '50%',
+    padding: 0,
+    display: 'inline-block',
+    '&::before': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      top: 0,
+      insetInlineStart: 0,
+      position: 'absolute',
+      zIndex: 2,
+      backgroundColor: 'var(--antd-token-previewer-color-preview)',
+      boxShadow: '0 2px 3px -1px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.09)'
+    }
+  }
+}));
+const ColorPreview = _ref => {
+  let color = _ref.color,
+    style = _ref.style,
+    className = _ref.className,
+    dark = _ref.dark,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  const _useStyle = useStyle(),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    warpSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  return warpSSR(_react().default.createElement("div", _objectSpread(_objectSpread({}, restProps), {}, {
+    className: (0, _classnames().default)('previewer-color-preview', className, hashId),
+    style: _objectSpread({
+      // @ts-ignore
+      ['--antd-token-previewer-color-preview']: color
+    }, style)
+  }), _react().default.createElement("div", {
+    style: {
+      content: '""',
+      width: 18,
+      height: 18,
+      borderRadius: '50%',
+      top: 1,
+      insetInlineStart: 1,
+      position: 'absolute',
+      zIndex: 1,
+      background: `${(0, _getColorBgImg.default)(dark)} 0% 0% / 20px`
+    }
+  })));
+};
+var _default = ColorPreview;
+exports.default = _default;