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

package/src/client/antd-token-previewer/hooks/useControlledTheme.tsx

@@ -0,0 +1,111 @@
+import type { DerivativeFunc } from '@ant-design/cssinjs';
+import { theme as antTheme } from 'antd';
+import type { ThemeConfig } from 'antd/es/config-provider/context';
+import { useEffect, useRef, useState } from 'react';
+import type { MutableTheme, Theme } from '../interface';
+import deepUpdateObj from '../utils/deepUpdateObj';
+import getDesignToken from '../utils/getDesignToken';
+import getValueByPath from '../utils/getValueByPath';
+
+const { darkAlgorithm: defaultDark, compactAlgorithm, defaultAlgorithm } = antTheme;
+
+export type ThemeCode = 'default' | 'dark' | 'compact';
+export const themeMap: Record<ThemeCode, DerivativeFunc<any, any>> = {
+  dark: defaultDark,
+  compact: compactAlgorithm,
+  default: defaultAlgorithm,
+};
+
+export type SetThemeState = (theme: Theme, modifiedPath: string[], updated?: boolean) => void;
+
+export type UseControlledTheme = (options: {
+  theme?: Theme;
+  defaultTheme: Theme;
+  onChange?: (theme: Theme) => void;
+  darkAlgorithm?: DerivativeFunc<any, any>;
+}) => {
+  theme: MutableTheme;
+  infoFollowPrimary: boolean;
+  onInfoFollowPrimaryChange: (value: boolean) => void;
+  updateRef: () => void;
+};
+
+const useControlledTheme: UseControlledTheme = ({ theme: customTheme, defaultTheme, onChange }) => {
+  const [theme, setTheme] = useState<Theme>(customTheme ?? defaultTheme);
+  const [infoFollowPrimary, setInfoFollowPrimary] = useState<boolean>(false);
+  const themeRef = useRef<Theme>(theme);
+  const [, setRenderHolder] = useState(0);
+
+  const forceUpdate = () => setRenderHolder((prev) => prev + 1);
+
+  const getNewTheme = (newTheme: Theme, force?: boolean): Theme => {
+    const newToken = { ...newTheme.config.token };
+    if (infoFollowPrimary || force) {
+      newToken.colorInfo = getDesignToken(newTheme.config).colorPrimary;
+    }
+    return { ...newTheme, config: { ...newTheme.config, token: newToken } };
+  };
+
+  const handleSetTheme: SetThemeState = (newTheme) => {
+    if (customTheme) {
+      onChange?.(getNewTheme(newTheme));
+    } else {
+      setTheme(getNewTheme(newTheme));
+    }
+  };
+
+  const handleResetTheme = (path: string[]) => {
+    let newConfig = { ...theme.config };
+    newConfig = deepUpdateObj(newConfig, path, getValueByPath(themeRef.current?.config, path));
+
+    if (path[1] === 'colorSettings') {
+      newConfig = deepUpdateObj(
+        newConfig,
+        ['token', 'colorBgSettingsHover'],
+        getValueByPath(themeRef.current?.config, ['token', 'colorBgSettingsHover']),
+      );
+      newConfig = deepUpdateObj(
+        newConfig,
+        ['token', 'colorBorderSettingsHover'],
+        getValueByPath(themeRef.current?.config, ['token', 'colorBorderSettingsHover']),
+      );
+    }
+
+    handleSetTheme({ ...theme, config: newConfig }, path);
+  };
+
+  const getCanReset = (origin: ThemeConfig, current: ThemeConfig) => (path: string[]) => {
+    return getValueByPath(origin, path) !== getValueByPath(current, path);
+  };
+
+  // Controlled theme change
+  useEffect(() => {
+    if (customTheme) {
+      setTheme(customTheme);
+    }
+  }, [customTheme]);
+
+  const handleInfoFollowPrimaryChange = (value: boolean) => {
+    setInfoFollowPrimary(value);
+    if (value) {
+      setTheme(getNewTheme(theme, true));
+    }
+  };
+
+  return {
+    theme: {
+      ...theme,
+      onThemeChange: (config, path) => handleSetTheme({ ...theme, config }, path),
+      onReset: handleResetTheme,
+      getCanReset: getCanReset(themeRef.current?.config, theme.config),
+    },
+    infoFollowPrimary,
+    onInfoFollowPrimaryChange: handleInfoFollowPrimaryChange,
+    updateRef: () => {
+      themeRef.current = theme;
+      forceUpdate();
+    },
+  };
+};
+
+export default useControlledTheme;

package/src/client/antd-token-previewer/icons/Arrow.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;

package/src/client/antd-token-previewer/icons/Arrow.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+function Arrow(props) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        width: '1em',
+        height: '1em',
+        viewBox: '0 0 16 16',
+        xmlns: 'http://www.w3.org/2000/svg',
+        xmlnsXlink: 'http://www.w3.org/1999/xlink',
+      },
+      props,
+      {
+        style: Object.assign(
+          {
+            verticalAlign: '-0.125em',
+          },
+          props.style,
+        ),
+        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
+      },
+    ),
+    /*#__PURE__*/ React.createElement(
+      'g',
+      {
+        id: 'Arrow-\u9875\u9762-1',
+        stroke: 'none',
+        strokeWidth: 1,
+        fill: 'none',
+        fillRule: 'evenodd',
+      },
+      /*#__PURE__*/ React.createElement(
+        'g',
+        {
+          id: 'Arrow-\u4E3B\u9898\u9884\u89C8\u5668---\u7EC4\u4EF6\u9884\u89C8',
+          transform: 'translate(-335.000000, -153.000000)',
+          fill: 'currentColor',
+          fillRule: 'nonzero',
+        },
+        /*#__PURE__*/ React.createElement(
+          'g',
+          {
+            id: 'Arrow-\u7F16\u7EC4-18',
+            transform: 'translate(0.000000, 70.000000)',
+          },
+          /*#__PURE__*/ React.createElement(
+            'g',
+            {
+              id: 'Arrow-\u7F16\u7EC4-13',
+              transform: 'translate(331.000000, 79.000000)',
+            },
+            /*#__PURE__*/ React.createElement(
+              'g',
+              {
+                id: 'Arrow-\u6298\u53E0\u7BAD\u5934_Black@2x',
+                transform:
+                  'translate(12.000000, 12.000000) rotate(90.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)',
+              },
+              /*#__PURE__*/ React.createElement('rect', {
+                id: 'Arrow-\u77E9\u5F62',
+                opacity: 0,
+                x: 0,
+                y: 0,
+                width: 16,
+                height: 16,
+              }),
+              /*#__PURE__*/ React.createElement('path', {
+                d: 'M8.576,10.6224 C8.46400007,10.7357654 8.31136002,10.7997014 8.152,10.8 L7.848,10.8 C7.68897547,10.7980619 7.53693306,10.7343763 7.424,10.6224 L3.3184,6.4672 C3.16044703,6.30862179 3.16044703,6.05217821 3.3184,5.8936 L3.8864,5.3192 C3.95991079,5.24354153 4.06091047,5.20085176 4.1664,5.20085176 C4.27188953,5.20085176 4.37288921,5.24354153 4.4464,5.3192 L8,8.9168 L11.5536,5.3192 C11.6284927,5.24307539 11.7308111,5.20020394 11.8376,5.20020394 C11.9443889,5.20020394 12.0467073,5.24307539 12.1216,5.3192 L12.6816,5.8936 C12.839553,6.05217821 12.839553,6.30862179 12.6816,6.4672 L8.576,10.6224 Z',
+                id: 'Arrow-\u8DEF\u5F84',
+              }),
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+export default Arrow;

package/src/client/antd-token-previewer/icons/Brush.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;

package/src/client/antd-token-previewer/icons/Brush.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+function Brush(props) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        width: '1em',
+        height: '1em',
+        viewBox: '0 0 14 18',
+        xmlns: 'http://www.w3.org/2000/svg',
+        xmlnsXlink: 'http://www.w3.org/1999/xlink',
+      },
+      props,
+      {
+        style: Object.assign(
+          {
+            verticalAlign: '-0.125em',
+          },
+          props.style,
+        ),
+        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
+      },
+    ),
+    /*#__PURE__*/ React.createElement(
+      'g',
+      {
+        id: 'Brush-\u9875\u9762-1',
+        stroke: 'none',
+        strokeWidth: 1,
+        fill: 'none',
+        fillRule: 'evenodd',
+        fillOpacity: 0.649999976,
+      },
+      /*#__PURE__*/ React.createElement(
+        'g',
+        {
+          id: 'Brush-\u4E3B\u9898\u7F16\u8F91\u5668---\u591A\u4E3B\u9898',
+          transform: 'translate(-17.000000, -121.000000)',
+          fill: 'currentColor',
+          fillRule: 'nonzero',
+        },
+        /*#__PURE__*/ React.createElement(
+          'g',
+          {
+            id: 'Brush-brush',
+            transform: 'translate(14.000000, 120.000000)',
+          },
+          /*#__PURE__*/ React.createElement('path', {
+            d: 'M8.20652175,3.2826087 L8.20652175,4.10326086 C8.20652175,4.55649455 7.83910325,4.92391304 7.38586957,4.92391304 C6.93263588,4.92391304 6.56521738,4.55649455 6.56521738,4.10326086 L6.56521738,3.2826087 L4.92391304,3.2826087 L4.92391304,8.20652175 L14.7717391,8.20652175 L14.7717391,3.2826087 L13.1304348,3.2826087 L13.1304348,5.74456522 C13.1304348,6.19779891 12.7630163,6.5652174 12.3097826,6.5652174 C11.8565489,6.5652174 11.4891304,6.19779891 11.4891304,5.74456522 L11.4891304,3.2826087 L8.20652175,3.2826087 Z M4.92391304,9.84782609 L4.92391304,11.4891304 L7.72233695,11.4891304 C8.08431263,11.4890155 8.42799204,11.6482243 8.66197039,11.9244136 C8.89594874,12.2006029 8.99650752,12.5657753 8.93690217,12.9228098 L8.60043479,14.9399728 C8.51784643,15.435105 8.73592476,15.9322123 9.15616576,16.2067558 C9.57640676,16.4812994 10.1192454,16.4812994 10.5394864,16.2067558 C10.9597274,15.9322123 11.1778057,15.435105 11.0952174,14.9399728 L10.75875,12.9228098 C10.6991446,12.5657753 10.7997034,12.2006029 11.0336818,11.9244136 C11.2676601,11.6482243 11.6113395,11.4890155 11.9733152,11.4891304 L14.7717391,11.4891304 L14.7717391,9.84782609 L4.92391304,9.84782609 Z M12.7143641,14.6699783 C12.9035912,15.807501 12.4022968,16.9492894 11.4368082,17.5798421 C10.4713197,18.2103948 9.2243325,18.2103948 8.25884395,17.5798421 C7.2933554,16.9492894 6.79206095,15.807501 6.98128804,14.6699783 L7.23815217,13.1304348 L4.92391304,13.1304348 C4.48861206,13.1304348 4.07113988,12.9575121 3.76333561,12.6497079 C3.45553133,12.3419036 3.2826087,11.9244314 3.2826087,11.4891304 L3.2826087,3.2826087 C3.2826087,2.84730772 3.45553133,2.42983554 3.76333561,2.12203126 C4.07113988,1.81422698 4.48861206,1.64130434 4.92391304,1.64130434 L14.7717391,1.64130434 C15.2070401,1.64130434 15.6245123,1.81422698 15.9323166,2.12203126 C16.2401208,2.42983554 16.4130435,2.84730772 16.4130435,3.2826087 L16.4130435,11.4891304 C16.4130435,11.9244314 16.2401208,12.3419036 15.9323166,12.6497079 C15.6245123,12.9575121 15.2070401,13.1304348 14.7717391,13.1304348 L12.4575,13.1304348 L12.7143641,14.6699783 L12.7143641,14.6699783 Z',
+            id: 'Brush-\u5F62\u72B6',
+          }),
+        ),
+      ),
+    ),
+  );
+}
+
+export default Brush;

package/src/client/antd-token-previewer/icons/Compact.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;

package/src/client/antd-token-previewer/icons/Compact.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+function Compact(props) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        width: '1em',
+        height: '1em',
+        viewBox: '0 0 17 16',
+        xmlns: 'http://www.w3.org/2000/svg',
+        xmlnsXlink: 'http://www.w3.org/1999/xlink',
+      },
+      props,
+      {
+        style: Object.assign(
+          {
+            verticalAlign: '-0.125em',
+          },
+          props.style,
+        ),
+        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
+      },
+    ),
+    /*#__PURE__*/ React.createElement(
+      'g',
+      {
+        id: 'Compact-\u9875\u9762-1',
+        stroke: 'none',
+        strokeWidth: 1,
+        fill: 'none',
+        fillRule: 'evenodd',
+      },
+      /*#__PURE__*/ React.createElement(
+        'g',
+        {
+          id: 'Compact-\u9ED8\u8BA4',
+          transform: 'translate(-9.000000, -82.500000)',
+          fill: 'currentColor',
+          fillRule: 'nonzero',
+        },
+        /*#__PURE__*/ React.createElement(
+          'g',
+          {
+            id: 'Compact-\u9009\u9879\u4E00',
+            transform: 'translate(9.268811, 79.500000)',
+          },
+          /*#__PURE__*/ React.createElement(
+            'g',
+            {
+              id: 'Compact-smaller',
+              transform: 'translate(0.000000, 3.000000)',
+            },
+            /*#__PURE__*/ React.createElement('rect', {
+              id: 'Compact-\u77E9\u5F62',
+              opacity: 0,
+              x: 0,
+              y: 0,
+              width: 16,
+              height: 16,
+            }),
+            /*#__PURE__*/ React.createElement('path', {
+              d: 'M10,14 L10,12 C10,10.8666667 10.8666667,10 12,10 L14,10 C14.4,10 14.6666667,10.2666667 14.6666667,10.6666667 C14.6666667,11.0666667 14.4,11.3333333 14,11.3333333 L12,11.3333333 C11.6,11.3333333 11.3333333,11.6 11.3333333,12 L11.3333333,14 C11.3333333,14.4 11.0666667,14.6666667 10.6666667,14.6666667 C10.2666667,14.6666667 10,14.4 10,14 L10,14 Z M4.66666667,14 L4.66666667,12 C4.66666667,11.6 4.4,11.3333333 4,11.3333333 L2,11.3333333 C1.6,11.3333333 1.33333333,11.0666667 1.33333333,10.6666667 C1.33333333,10.2666667 1.6,10 2,10 L4,10 C5.13333333,10 6,10.8666667 6,12 L6,14 C6,14.4 5.73333333,14.6666667 5.33333333,14.6666667 C4.93333333,14.6666667 4.66666666,14.4 4.66666667,14 L4.66666667,14 Z M12,6 C10.8666667,6 10,5.13333333 10,4 L10,2 C10,1.6 10.2666667,1.33333333 10.6666667,1.33333333 C11.0666667,1.33333333 11.3333333,1.6 11.3333333,2 L11.3333333,4 C11.3333333,4.4 11.6,4.66666667 12,4.66666667 L14,4.66666667 C14.4,4.66666667 14.6666667,4.93333334 14.6666667,5.33333333 C14.6666667,5.73333331 14.4,6 14,6 L12,6 L12,6 Z M2,6 C1.6,6 1.33333333,5.73333333 1.33333333,5.33333333 C1.33333333,4.93333333 1.6,4.66666666 2,4.66666667 L4,4.66666667 C4.4,4.66666667 4.66666667,4.4 4.66666667,4 L4.66666667,2 C4.66666667,1.6 4.93333334,1.33333333 5.33333333,1.33333333 C5.73333331,1.33333333 6,1.6 6,2 L6,4 C6,5.13333333 5.13333333,6 4,6 L2,6 Z',
+              id: 'Compact-\u5F62\u72B6',
+            }),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+export default Compact;

package/src/client/antd-token-previewer/icons/Control.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;

package/src/client/antd-token-previewer/icons/Control.js

@@ -0,0 +1,116 @@
+import * as React from 'react';
+
+function Control(props) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        width: '1em',
+        height: '1em',
+        viewBox: '0 0 16 16',
+        xmlns: 'http://www.w3.org/2000/svg',
+        xmlnsXlink: 'http://www.w3.org/1999/xlink',
+      },
+      props,
+      {
+        style: Object.assign(
+          {
+            verticalAlign: '-0.125em',
+          },
+          props.style,
+        ),
+        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
+      },
+    ),
+    /*#__PURE__*/ React.createElement(
+      'g',
+      {
+        id: 'Control-\u9875\u9762-1',
+        stroke: 'none',
+        strokeWidth: 1,
+        fill: 'none',
+        fillRule: 'evenodd',
+      },
+      /*#__PURE__*/ React.createElement(
+        'g',
+        {
+          id: 'Control-\u4E3B\u9898\u9884\u89C8\u5668---\u7EC4\u4EF6\u9884\u89C8',
+          transform: 'translate(-1372.000000, -505.000000)',
+          fillRule: 'nonzero',
+        },
+        /*#__PURE__*/ React.createElement(
+          'g',
+          {
+            id: 'Control-\u7F16\u7EC4-18',
+            transform: 'translate(0.000000, 70.000000)',
+          },
+          /*#__PURE__*/ React.createElement(
+            'g',
+            {
+              id: 'Control-\u7F16\u7EC4-14',
+              transform: 'translate(536.000000, 420.000000)',
+            },
+            /*#__PURE__*/ React.createElement(
+              'g',
+              {
+                id: 'Control-\u7CFB\u7EDF\u63A7\u5236',
+                transform: 'translate(836.000000, 15.000000)',
+              },
+              /*#__PURE__*/ React.createElement('rect', {
+                id: 'Control-\u77E9\u5F62',
+                fill: '#000000',
+                opacity: 0,
+                x: 0,
+                y: 0,
+                width: 16,
+                height: 16,
+              }),
+              /*#__PURE__*/ React.createElement('path', {
+                d: 'M6,3.5625 L13.75,3.5625 L13.75,4.1875 L6,4.1875 L6,3.5625 Z M2.1875,3.5625 L3.8125,3.5625 L3.8125,4.1875 L2.1875,4.1875 L2.1875,3.5625 Z M8.3125,11.8125 L13.75,11.8125 L13.75,12.4375 L8.3125,12.4375 L8.3125,11.8125 Z M2.1875,11.8125 L6.125,11.8125 L6.125,12.4375 L2.1875,12.4375 L2.1875,11.8125 Z M12.625,7.6875 L13.75,7.6875 L13.75,8.3125 L12.625,8.3125 L12.625,7.6875 Z M2.1875,7.6875 L10.4375,7.6875 L10.4375,8.3125 L2.1875,8.3125 L2.1875,7.6875 Z',
+                id: 'Control-\u5F62\u72B6',
+                fill: 'currentColor',
+              }),
+              /*#__PURE__*/ React.createElement('path', {
+                d: 'M1.875,3.875 C1.875,4.04758898 2.01491102,4.1875 2.1875,4.1875 C2.36008898,4.1875 2.5,4.04758898 2.5,3.875 C2.5,3.70241102 2.36008898,3.5625 2.1875,3.5625 C2.01491102,3.5625 1.875,3.70241102 1.875,3.875 Z',
+                id: 'Control-\u8DEF\u5F84',
+                fill: 'currentColor',
+              }),
+              /*#__PURE__*/ React.createElement('path', {
+                d: 'M13.4375,3.875 C13.4375,4.04758898 13.577411,4.1875 13.75,4.1875 C13.922589,4.1875 14.0625,4.04758898 14.0625,3.875 C14.0625,3.70241102 13.922589,3.5625 13.75,3.5625 C13.577411,3.5625 13.4375,3.70241102 13.4375,3.875 Z',
+                id: 'Control-\u8DEF\u5F84',
+                fill: 'currentColor',
+              }),
+              /*#__PURE__*/ React.createElement('path', {
+                d: 'M13.4375,8 C13.4375,8.17258898 13.577411,8.3125 13.75,8.3125 C13.922589,8.3125 14.0625,8.17258898 14.0625,8 C14.0625,7.82741102 13.922589,7.6875 13.75,7.6875 C13.577411,7.6875 13.4375,7.82741102 13.4375,8 Z',
+                id: 'Control-\u8DEF\u5F84',
+                fill: 'currentColor',
+              }),
+              /*#__PURE__*/ React.createElement('path', {
+                d: 'M13.4375,12.125 C13.4375,12.297589 13.577411,12.4375 13.75,12.4375 C13.922589,12.4375 14.0625,12.297589 14.0625,12.125 C14.0625,11.952411 13.922589,11.8125 13.75,11.8125 C13.577411,11.8125 13.4375,11.952411 13.4375,12.125 L13.4375,12.125 Z',
+                id: 'Control-\u8DEF\u5F84',
+                fill: 'currentColor',
+              }),
+              /*#__PURE__*/ React.createElement('path', {
+                d: 'M1.875,8 C1.875,8.17258898 2.01491102,8.3125 2.1875,8.3125 C2.36008898,8.3125 2.5,8.17258898 2.5,8 C2.5,7.82741102 2.36008898,7.6875 2.1875,7.6875 C2.01491102,7.6875 1.875,7.82741102 1.875,8 Z',
+                id: 'Control-\u8DEF\u5F84',
+                fill: 'currentColor',
+              }),
+              /*#__PURE__*/ React.createElement('path', {
+                d: 'M1.875,12.125 C1.875,12.297589 2.01491102,12.4375 2.1875,12.4375 C2.36008898,12.4375 2.5,12.297589 2.5,12.125 C2.5,11.952411 2.36008898,11.8125 2.1875,11.8125 C2.01491102,11.8125 1.875,11.952411 1.875,12.125 L1.875,12.125 Z',
+                id: 'Control-\u8DEF\u5F84',
+                fill: 'currentColor',
+              }),
+              /*#__PURE__*/ React.createElement('path', {
+                d: 'M4.90625,5.25 C4.13125,5.25 3.5,4.61875 3.5,3.84375 C3.5,3.06875 4.13125,2.4375 4.90625,2.4375 C5.68125,2.4375 6.3125,3.06875 6.3125,3.84375 C6.3125,4.61875 5.68125,5.25 4.90625,5.25 Z M4.90625,3.0625 C4.475,3.0625 4.125,3.4125 4.125,3.84375 C4.125,4.275 4.475,4.625 4.90625,4.625 C5.3375,4.625 5.6875,4.275 5.6875,3.84375 C5.6875,3.4125 5.3375,3.0625 4.90625,3.0625 Z M11.53125,9.4375 C10.75625,9.4375 10.125,8.80625 10.125,8.03125 C10.125,7.25625 10.75625,6.625 11.53125,6.625 C12.30625,6.625 12.9375,7.25625 12.9375,8.03125 C12.9375,8.80625 12.30625,9.4375 11.53125,9.4375 Z M11.53125,7.25 C11.1,7.25 10.75,7.6 10.75,8.03125 C10.75,8.4625 11.1,8.8125 11.53125,8.8125 C11.9625,8.8125 12.3125,8.4625 12.3125,8.03125 C12.3125,7.6 11.9625,7.25 11.53125,7.25 Z M7.21875,13.5 C6.44375,13.5 5.8125,12.86875 5.8125,12.09375 C5.8125,11.31875 6.44375,10.6875 7.21875,10.6875 C7.99375,10.6875 8.625,11.31875 8.625,12.09375 C8.625,12.86875 7.99375,13.5 7.21875,13.5 Z M7.21875,11.3125 C6.7875,11.3125 6.4375,11.6625 6.4375,12.09375 C6.4375,12.525 6.7875,12.875 7.21875,12.875 C7.65,12.875 8,12.525 8,12.09375 C8,11.6625 7.65,11.3125 7.21875,11.3125 Z',
+                id: 'Control-\u5F62\u72B6',
+                fill: 'currentColor',
+              }),
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+export default Control;

package/src/client/antd-token-previewer/icons/Dark.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;

package/src/client/antd-token-previewer/icons/Dark.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+function Dark(props) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        width: '1em',
+        height: '1em',
+        viewBox: '0 0 17 17',
+        xmlns: 'http://www.w3.org/2000/svg',
+        xmlnsXlink: 'http://www.w3.org/1999/xlink',
+      },
+      props,
+      {
+        style: Object.assign(
+          {
+            verticalAlign: '-0.125em',
+          },
+          props.style,
+        ),
+        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
+      },
+    ),
+    /*#__PURE__*/ React.createElement(
+      'g',
+      {
+        id: 'Dark-\u9875\u9762-1',
+        stroke: 'none',
+        strokeWidth: 1,
+        fill: 'none',
+        fillRule: 'evenodd',
+      },
+      /*#__PURE__*/ React.createElement(
+        'g',
+        {
+          id: 'Dark-\u9ED8\u8BA4',
+          transform: 'translate(-9.000000, -49.500000)',
+          fill: 'currentColor',
+          fillRule: 'nonzero',
+        },
+        /*#__PURE__*/ React.createElement(
+          'g',
+          {
+            id: 'Dark-\u7F16\u7EC4-17',
+            transform: 'translate(0.000000, 42.500000)',
+          },
+          /*#__PURE__*/ React.createElement(
+            'g',
+            {
+              id: 'Dark-moon',
+              transform: 'translate(9.268811, 7.500000)',
+            },
+            /*#__PURE__*/ React.createElement('rect', {
+              id: 'Dark-\u77E9\u5F62',
+              opacity: 0,
+              x: 0,
+              y: 0,
+              width: 16,
+              height: 16,
+            }),
+            /*#__PURE__*/ React.createElement('path', {
+              d: 'M8,1.33333333 C8.14933333,1.33333333 8.29688889,1.33844444 8.44266667,1.34866666 C8.14755556,1.98422221 8,2.64577777 8,3.33333333 C8,3.96533333 8.12333333,4.56955555 8.37,5.146 C8.61666667,5.72244445 8.94822222,6.21888889 9.36466667,6.63533333 C9.78111112,7.05177777 10.2775556,7.38333332 10.854,7.63 C11.4304444,7.87666668 12.0346667,8.00000001 12.6666667,8 C13.3542222,8 14.0157778,7.85244444 14.6513333,7.55733333 C14.6615556,7.70311111 14.6666667,7.85066667 14.6666667,8 C14.6666667,8.604 14.5868889,9.19422222 14.4273333,9.77066667 C14.2677778,10.3471111 14.0446667,10.8793333 13.758,11.3673333 C13.4713333,11.8553333 13.1233333,12.3042222 12.714,12.714 C12.3046667,13.1237778 11.8557778,13.4717778 11.3673333,13.758 C10.8788889,14.0442222 10.3466667,14.2673333 9.77066667,14.4273333 C9.19466667,14.5873333 8.60444445,14.6671111 8,14.6666685 C7.39555555,14.6662222 6.80533333,14.5864444 6.22933333,14.4273333 C5.65333333,14.2682222 5.1211111,14.0451111 4.63266666,13.758 C4.14422221,13.4708889 3.69533332,13.1228889 3.28599998,12.714 C2.87666665,12.3051111 2.52866665,11.8562222 2.24199998,11.3673333 C1.95533332,10.8784444 1.73222221,10.3462222 1.57266666,9.77066667 C1.4131111,9.19511112 1.33333333,8.6048889 1.33333333,8 C1.33333333,7.3951111 1.4131111,6.80488888 1.57266666,6.22933333 C1.73222221,5.65377778 1.95533332,5.12155555 2.24199998,4.63266666 C2.52866665,4.14377776 2.87666665,3.69488887 3.28599998,3.28599998 C3.69533332,2.8771111 4.14422221,2.5291111 4.63266666,2.24199998 C5.1211111,1.95488887 5.65333333,1.73177776 6.22933333,1.57266666 C6.80533333,1.41355555 7.39555555,1.33377778 8,1.33333333 Z M6.68733333,2.828 C6.11444444,2.97377778 5.58066667,3.20977778 5.086,3.536 C4.59133333,3.86222222 4.166,4.24933333 3.81,4.69733333 C3.454,5.14533333 3.17444444,5.65488889 2.97133333,6.226 C2.76822221,6.79711111 2.66666666,7.38822222 2.66666666,7.99933333 C2.66666666,8.72155555 2.80733332,9.41155555 3.08866666,10.0693333 C3.36999999,10.7271111 3.74933332,11.2948889 4.22666666,11.7726667 C4.70399999,12.2504444 5.27177777,12.6297778 5.92999998,12.9106667 C6.5882222,13.1915556 7.2782222,13.3322222 7.99999998,13.3326667 C8.6111111,13.3326667 9.20222221,13.2311111 9.77333331,13.028 C10.3444444,12.8248889 10.854,12.5453333 11.302,12.1893333 C11.75,11.8333333 12.1371111,11.408 12.4633333,10.9133333 C12.7895555,10.4186666 13.0255555,9.88488887 13.1713333,9.31199998 C13.022,9.32577777 12.8535555,9.33266666 12.666,9.33266666 C11.8535555,9.33266666 11.0775555,9.17377777 10.338,8.85599998 C9.59844443,8.5382222 8.96044443,8.11111109 8.42399998,7.57466666 C7.88755554,7.03822222 7.46044443,6.40022222 7.14266666,5.66066666 C6.82488889,4.92111109 6.66599999,4.14511109 6.66599998,3.33266666 C6.66599998,3.1451111 6.67288888,2.97666666 6.68666666,2.82733333 L6.68733333,2.828 Z',
+              id: 'Dark-\u5F62\u72B6',
+            }),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+export default Dark;

package/src/client/antd-token-previewer/icons/Light.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;

package/src/client/antd-token-previewer/icons/Light.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+
+function Light(props) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        width: '1em',
+        height: '1em',
+        viewBox: '0 0 13 13',
+        xmlns: 'http://www.w3.org/2000/svg',
+        xmlnsXlink: 'http://www.w3.org/1999/xlink',
+      },
+      props,
+      {
+        style: Object.assign(
+          {
+            verticalAlign: '-0.125em',
+          },
+          props.style,
+        ),
+        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
+      },
+    ),
+    /*#__PURE__*/ React.createElement(
+      'g',
+      {
+        id: 'Light-\u9875\u9762-1',
+        stroke: 'none',
+        strokeWidth: 1,
+        fill: 'none',
+        fillRule: 'evenodd',
+      },
+      /*#__PURE__*/ React.createElement(
+        'g',
+        {
+          id: 'Light-\u4E3B\u9898\u5305',
+          transform: 'translate(-2943.000000, -292.000000)',
+          fill: 'currentColor',
+          fillRule: 'nonzero',
+        },
+        /*#__PURE__*/ React.createElement(
+          'g',
+          {
+            id: 'Light-\u7F16\u7EC4-12',
+            transform: 'translate(2415.000000, 222.000000)',
+          },
+          /*#__PURE__*/ React.createElement(
+            'g',
+            {
+              id: 'Light-\u89C6\u56FE\u5207\u6362-\u7F16\u8F91\u6001',
+              transform: 'translate(518.000000, 60.000000)',
+            },
+            /*#__PURE__*/ React.createElement(
+              'g',
+              {
+                id: 'Light-eye',
+                transform: 'translate(8.000000, 8.000000)',
+              },
+              /*#__PURE__*/ React.createElement(
+                'g',
+                {
+                  id: 'Light-sun',
+                  transform: 'translate(2.000000, 2.000000)',
+                },
+                /*#__PURE__*/ React.createElement('rect', {
+                  id: 'Light-\u77E9\u5F62',
+                  opacity: 0,
+                  x: 0,
+                  y: 0,
+                  width: 13,
+                  height: 13,
+                }),
+                /*#__PURE__*/ React.createElement('path', {
+                  d: 'M6.5,9.75 C4.7051875,9.75 3.25,8.2948125 3.25,6.5 C3.25,4.7051875 4.7051875,3.25 6.5,3.25 C8.2948125,3.25 9.75,4.7051875 9.75,6.5 C9.75,8.2948125 8.2948125,9.75 6.5,9.75 Z M6.5,8.66666667 C7.69661696,8.66666667 8.66666667,7.69661696 8.66666667,6.5 C8.66666667,5.30338304 7.69661696,4.33333333 6.5,4.33333333 C5.30338305,4.33333333 4.33333336,5.30338305 4.33333336,6.5 C4.33333336,7.69661695 5.30338305,8.66666667 6.5,8.66666667 Z M5.95833333,1.08333333 C5.95833333,0.784179087 6.20084576,0.541666658 6.5,0.541666658 C6.79915424,0.541666658 7.04166667,0.784179087 7.04166667,1.08333333 L7.04166667,2.16666667 C7.04166667,2.46582091 6.79915424,2.70833334 6.5,2.70833334 C6.20084576,2.70833334 5.95833333,2.46582091 5.95833333,2.16666667 L5.95833333,1.08333333 L5.95833333,1.08333333 Z M5.95833333,10.8333333 C5.95833333,10.5341791 6.20084576,10.2916667 6.5,10.2916667 C6.79915424,10.2916667 7.04166667,10.5341791 7.04166667,10.8333333 L7.04166667,11.9166667 C7.04166667,12.2158209 6.79915424,12.4583333 6.5,12.4583333 C6.20084576,12.4583333 5.95833333,12.2158209 5.95833333,11.9166667 L5.95833333,10.8333333 L5.95833333,10.8333333 Z M1.08333333,7.04166667 C0.784179087,7.04166667 0.541666658,6.79915424 0.541666658,6.5 C0.541666658,6.20084576 0.784179087,5.95833333 1.08333333,5.95833333 L2.16666667,5.95833333 C2.46582091,5.95833333 2.70833334,6.20084576 2.70833334,6.5 C2.70833334,6.79915424 2.46582091,7.04166667 2.16666667,7.04166667 L1.08333333,7.04166667 L1.08333333,7.04166667 Z M10.8333333,7.04166667 C10.5341791,7.04166667 10.2916667,6.79915424 10.2916667,6.5 C10.2916667,6.20084576 10.5341791,5.95833333 10.8333333,5.95833333 L11.9166667,5.95833333 C12.2158209,5.95833333 12.4583333,6.20084576 12.4583333,6.5 C12.4583333,6.79915424 12.2158209,7.04166667 11.9166667,7.04166667 L10.8333333,7.04166667 L10.8333333,7.04166667 Z M2.05454167,2.82045833 C1.84926545,2.60791971 1.85220137,2.27007933 2.06114035,2.06114035 C2.27007933,1.85220137 2.60791971,1.84926545 2.82045833,2.05454167 L3.63295833,2.86704167 C3.83823455,3.07958029 3.83529863,3.41742067 3.62635965,3.62635965 C3.41742067,3.83529863 3.07958029,3.83823455 2.86704167,3.63295833 L2.05454167,2.82045833 L2.05454167,2.82045833 Z M9.36704167,10.1329583 C9.16176545,9.92041971 9.16470137,9.58257933 9.37364035,9.37364035 C9.58257933,9.16470137 9.92041971,9.16176545 10.1329583,9.36704167 L10.9454583,10.1795417 C11.1507346,10.3920803 11.1477986,10.7299207 10.9388596,10.9388596 C10.7299207,11.1477986 10.3920803,11.1507346 10.1795417,10.9454583 L9.36704167,10.1329583 L9.36704167,10.1329583 Z M2.82045833,10.9454583 C2.60791971,11.1507346 2.27007933,11.1477986 2.06114035,10.9388596 C1.85220137,10.7299207 1.84926545,10.3920803 2.05454167,10.1795417 L2.86704167,9.36704167 C3.07958029,9.16176545 3.41742067,9.16470137 3.62635965,9.37364035 C3.83529863,9.58257933 3.83823455,9.92041971 3.63295833,10.1329583 L2.82045833,10.9454583 L2.82045833,10.9454583 Z M10.1329583,3.63295833 C9.92041971,3.83823455 9.58257933,3.83529863 9.37364035,3.62635965 C9.16470137,3.41742067 9.16176545,3.07958029 9.36704167,2.86704167 L10.1795417,2.05454167 C10.3920803,1.84926545 10.7299207,1.85220137 10.9388596,2.06114035 C11.1477986,2.27007933 11.1507346,2.60791971 10.9454583,2.82045833 L10.1329583,3.63295833 L10.1329583,3.63295833 Z',
+                  id: 'Light-\u5F62\u72B6',
+                }),
+              ),
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+export default Light;

package/src/client/antd-token-previewer/icons/Margin.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;