@lobehub/ui 1.10.0 → 1.11.1

package/es/ActionIcon/style.js

@@ -7,6 +7,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var active = _ref2.active,
     glass = _ref2.glass;
   return {
-    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        display: flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n\n        color: ", ";\n\n        background: ", ";\n\n        transition: color 600ms ", ",\n          background-color 100ms ", ";\n\n        ", "\n\n        &:hover {\n          color: ", ";\n          background-color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      "])), active ? token.colorText : token.colorTextQuaternary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, glass && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          backdrop-filter: saturate(180%) blur(10px);\n        "]))), token.colorText, active ? token.colorFillSecondary : token.colorFillTertiary, token.colorText, token.colorFill)
+    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        display: flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n\n        color: ", ";\n\n        background: ", ";\n\n        transition: color 600ms ", ",\n          background-color 100ms ", ";\n\n        ", "\n\n        &:hover {\n          color: ", ";\n          background-color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, glass && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          backdrop-filter: saturate(180%) blur(10px);\n        "]))), token.colorText, token.colorFillSecondary, token.colorText, token.colorFill)
   };
 });

package/es/Highlighter/style.js

@@ -1,7 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, type) {
   var token = _ref.token,
     css = _ref.css,
@@ -11,7 +10,7 @@ export var useStyles = createStyles(function (_ref, type) {
   var buttonHoverCls = "".concat(prefix, "-hover-btn");
   var langHoverCls = "".concat(prefix, "-hover-lang");
   return {
-    container: cx(prefix, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: auto;\n\n          background-color: ", ";\n          border-radius: ", "px;\n\n          transition: background-color 100ms ", ";\n          ", "\n          &:hover {\n            background-color: ", ";\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent', token.borderRadius, token.motionEaseOut, type === 'ghost' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), type === 'prue' ? 'transparent' : token.colorFillTertiary, buttonHoverCls, langHoverCls, type === 'prue' ? 0 : "16px 24px")),
+    container: cx(prefix, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: auto;\n\n          background-color: ", ";\n          border-radius: ", "px;\n\n          transition: background-color 100ms ", ";\n          ", "\n          &:hover {\n            background-color: ", ";\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), type === 'block' ? token.colorFillTertiary : 'transparent', token.borderRadius, token.motionEaseOut, type === 'ghost' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), type === 'prue' ? 'transparent' : token.colorFillTertiary, buttonHoverCls, langHoverCls, type === 'prue' ? 0 : "16px 24px")),
     button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: 8px;\n          right: 8px;\n\n          opacity: 0;\n        "])))),
     lang: cx(langHoverCls, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 50;\n          right: 8px;\n          bottom: 8px;\n\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.colorTextPlaceholder))
   };

package/es/Input/index.js

@@ -3,10 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className", "type"],
   _excluded2 = ["className", "type"];
 import { Input as AntInput } from 'antd';
-import { memo } from 'react';
+import { forwardRef, memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var Input = /*#__PURE__*/memo(function (_ref) {
+export var Input = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'ghost' : _ref$type,
@@ -17,10 +17,11 @@ export var Input = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsx(AntInput, _objectSpread({
+    ref: ref,
     className: cx(styles.input, className)
   }, props));
-});
-export var TextArea = /*#__PURE__*/memo(function (_ref2) {
+}));
+export var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
     _ref2$type = _ref2.type,
     type = _ref2$type === void 0 ? 'ghost' : _ref2$type,
@@ -31,6 +32,7 @@ export var TextArea = /*#__PURE__*/memo(function (_ref2) {
     styles = _useStyles2.styles,
     cx = _useStyles2.cx;
   return /*#__PURE__*/_jsx(AntInput.TextArea, _objectSpread({
+    ref: ref,
     className: cx(styles.textarea, className)
   }, props));
-});
+}));

package/es/Input/style.js

@@ -1,13 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     token = _ref.token;
   var type = _ref2.type;
   return {
-    input: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    height: 36px;\n    padding: 0 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    input {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary),
-    textarea: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    padding: 8px 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    textarea {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary)
+    input: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    height: 36px;\n    padding: 0 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    input {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary),
+    textarea: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    padding: 8px 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    textarea {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary)
   };
 });

package/es/Markdown/style.js

@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorder, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n\n      pre {\n        border-radius: ", "px;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius),
     code: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding: 2px 4px;\n      font-family: ", " !important;\n      color: ", ";\n      border-radius: 4px;\n    "])), token.fontFamilyCode, isDarkMode ? token.cyan8 : token.pink7)
   };
 });

package/es/SearchBar/index.js

@@ -37,8 +37,9 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
     if (!enableShortKey) return;
     var handler = function handler(ev) {
       if ((isAppleDevice ? ev.metaKey : ev.ctrlKey) && ev.key === shortKey) {
+        var _inputRef$current;
         ev.preventDefault();
-        inputRef.current.focus();
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
       }
     };
     document.addEventListener('keydown', handler);

package/es/Snippet/style.js

@@ -1,9 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, type) {
   var css = _ref.css,
     token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        padding-top: 6px !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), rgba(token.colorBgElevated, 0.6)) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), token.colorFillTertiary);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        padding-top: 6px !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillTertiary) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), token.colorFillTertiary);
 });

package/es/StroyBook/style.js

@@ -9,6 +9,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   return {
     editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: stretch;\n        justify-content: stretch;\n\n        width: inherit;\n        min-height: inherit;\n        ", "\n      "])), mobile && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          flex-direction: column;\n        "])))),
     left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto;\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n\n        ", "\n      "])), !noPadding && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 40px 24px;\n        "])))),
-    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n\n        button {\n          --leva-colors-accent2: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorBorder, token.colorFillSecondary)
+    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n\n        button {\n          --leva-colors-accent2: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorBgLayout, token.colorFillSecondary)
   };
 });

package/es/ThemeProvider/index.d.ts

@@ -1,10 +1,6 @@
+/// <reference types="react" />
 import { extractStaticStyle, type ThemeMode } from 'antd-style';
-import React from 'react';
 export interface ThemeProviderProps {
-    /**
-     * @description Custom tokens to be used in the theme
-     */
-    token?: any;
     /**
      * @description The children of the ThemeProvider component
      */
@@ -22,5 +18,5 @@ export interface ThemeProviderProps {
      */
     cache?: typeof extractStaticStyle.cache;
 }
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const ThemeProvider: import("react").NamedExoticComponent<ThemeProviderProps>;
 export default ThemeProvider;

package/es/ThemeProvider/index.js

@@ -1,36 +1,26 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { lobeCustomStylish, lobeCustomToken, lobeTheme } from "../styles";
 import { App } from 'antd';
 import { ThemeProvider as AntdThemeProvider, StyleProvider, setupStyled } from 'antd-style';
-import React, { useCallback } from 'react';
+import { memo } from 'react';
 // @ts-ignore
 import ReactFontLoader from 'react-font-loader';
 import { ThemeContext } from 'styled-components';
-import { createCustomToken, getAntdTheme, getCustomStylish } from "../styles";
 import GlobalStyle from "./GlobalStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ThemeProvider = function ThemeProvider(_ref) {
-  var token = _ref.token,
-    children = _ref.children,
+var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
     themeMode = _ref.themeMode;
   setupStyled({
     ThemeContext: ThemeContext
   });
-  var getCustomToken = useCallback(function (params) {
-    var base = createCustomToken(params);
-    if (token) {
-      return _objectSpread(_objectSpread({}, base), token);
-    } else {
-      return base;
-    }
-  }, [token]);
   return /*#__PURE__*/_jsx(StyleProvider, {
     speedy: process.env.NODE_ENV === 'production',
     children: /*#__PURE__*/_jsxs(AntdThemeProvider, {
       themeMode: themeMode,
-      theme: getAntdTheme,
-      customStylish: getCustomStylish,
-      customToken: getCustomToken,
+      theme: lobeTheme,
+      customStylish: lobeCustomStylish,
+      customToken: lobeCustomToken,
       children: [/*#__PURE__*/_jsx(ReactFontLoader, {
         url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans.css"
       }), /*#__PURE__*/_jsx(ReactFontLoader, {
@@ -44,5 +34,5 @@ var ThemeProvider = function ThemeProvider(_ref) {
       })]
     })
   });
-};
+});
 export default ThemeProvider;

package/es/styles/algorithms/generateColorPalette.d.ts

@@ -0,0 +1,11 @@
+import { ColorScaleItem } from "../colors";
+import { AliasToken } from 'antd/es/theme/interface';
+export declare const generateColorPalette: ({ type, scale, appearance, }: {
+    type: 'Primary' | 'Success' | 'Warning' | 'Error' | 'Info' | string;
+    scale: ColorScaleItem;
+    appearance: 'light' | 'dark';
+}) => Partial<AliasToken>;
+export declare const generateColorNeutralPalette: ({ scale, appearance, }: {
+    scale: ColorScaleItem;
+    appearance: 'light' | 'dark';
+}) => Partial<AliasToken>;

package/es/styles/algorithms/generateColorPalette.js

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { capitalize } from 'lodash';
+export var generateColorPalette = function generateColorPalette(_ref) {
+  var _ref2;
+  var type = _ref.type,
+    scale = _ref.scale,
+    appearance = _ref.appearance;
+  var name = capitalize(type);
+  return _ref2 = {}, _defineProperty(_ref2, "color".concat(name, "Bg"), scale[appearance][1]), _defineProperty(_ref2, "color".concat(name, "BgHover"), scale[appearance][2]), _defineProperty(_ref2, "color".concat(name, "Border"), scale[appearance][4]), _defineProperty(_ref2, "color".concat(name, "BorderHover"), scale[appearance][5]), _defineProperty(_ref2, "color".concat(name, "Hover"), scale[appearance][10]), _defineProperty(_ref2, "color".concat(name), scale[appearance][9]), _defineProperty(_ref2, "color".concat(name, "Active"), scale[appearance][7]), _defineProperty(_ref2, "color".concat(name, "TextHover"), scale[appearance][10]), _defineProperty(_ref2, "color".concat(name, "Text"), scale[appearance][9]), _defineProperty(_ref2, "color".concat(name, "Active"), scale[appearance][7]), _ref2;
+};
+export var generateColorNeutralPalette = function generateColorNeutralPalette(_ref3) {
+  var scale = _ref3.scale,
+    appearance = _ref3.appearance;
+  return {
+    colorText: scale[appearance][12],
+    colorTextSecondary: scale[appearance][10],
+    colorTextTertiary: scale[appearance][8],
+    colorTextQuaternary: scale[appearance][6],
+    colorBorder: scale["".concat(appearance, "A")][4],
+    colorBorderSecondary: scale["".concat(appearance, "A")][3],
+    colorFill: scale["".concat(appearance, "A")][3],
+    colorFillSecondary: scale["".concat(appearance, "A")][2],
+    colorFillTertiary: scale["".concat(appearance, "A")][1],
+    colorFillQuaternary: scale["".concat(appearance, "A")][0],
+    colorBgContainer: appearance === 'dark' ? scale[appearance][1] : scale[appearance][0],
+    colorBgElevated: appearance === 'dark' ? scale[appearance][2] : scale[appearance][0],
+    colorBgLayout: appearance === 'dark' ? scale[appearance][0] : scale[appearance][1],
+    colorBgSpotlight: scale[appearance][5],
+    colorBgMask: scale.lightA[8]
+  };
+};

package/es/styles/{customStylish.d.ts → algorithms/generateCustomStylish.d.ts}

@@ -14,4 +14,4 @@ export interface SiteStylish {
     iconGradientDefault: string;
     blur: string;
 }
-export declare const getCustomStylish: GetCustomStylish<SiteStylish>;
+export declare const generateCustomStylish: GetCustomStylish<SiteStylish>;

package/es/styles/{customStylish.js → algorithms/generateCustomStylish.js}

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 import { rgba } from 'polished';
-export var getCustomStylish = function getCustomStylish(_ref) {
+export var generateCustomStylish = function generateCustomStylish(_ref) {
   var css = _ref.css,
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;

package/es/styles/algorithms/generateCustomToken.d.ts

@@ -0,0 +1,3 @@
+import { LobeCustomToken } from "../../types/customToken";
+import { GetCustomToken } from 'antd-style';
+export declare const generateCustomToken: GetCustomToken<LobeCustomToken>;

package/es/styles/algorithms/generateCustomToken.js

@@ -0,0 +1,57 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { colorScales } from "../colors";
+import { capitalize } from 'lodash';
+import { generateColorPalette } from "./generateColorPalette";
+var generateCustomColorPalette = function generateCustomColorPalette(_ref) {
+  var type = _ref.type,
+    scale = _ref.scale,
+    appearance = _ref.appearance;
+  var name = capitalize(type);
+  var colorStepPalette = {};
+  scale[appearance].forEach(function (color, index) {
+    colorStepPalette["color".concat(name).concat(index + 1)] = color;
+  });
+  scale["".concat(appearance, "A")].forEach(function (color, index) {
+    colorStepPalette["color".concat(name).concat(index + 1, "A")] = color;
+  });
+  return _objectSpread(_objectSpread({}, colorStepPalette), generateColorPalette({
+    type: type,
+    scale: scale,
+    appearance: appearance
+  }));
+};
+
+// @ts-ignore
+export var generateCustomToken = function generateCustomToken(_ref2) {
+  var appearance = _ref2.appearance,
+    token = _ref2.token,
+    isDarkMode = _ref2.isDarkMode;
+  var gradientColor1 = token.blue;
+  var gradientColor2 = isDarkMode ? token.pink : token.cyan;
+  var gradientColor3 = token.purple;
+  var colorSolid = isDarkMode ? token.colorWhite : '#000';
+  var colorCustomToken = {
+    headerHeight: 64,
+    footerHeight: 300,
+    sidebarWidth: 240,
+    tocWidth: 176,
+    contentMaxWidth: 1152,
+    colorSolid: colorSolid,
+    gradientColor1: gradientColor1,
+    gradientColor2: gradientColor2,
+    gradientColor3: gradientColor3,
+    gradientHeroBgG: "radial-gradient(at 80% 20%, ".concat(gradientColor1, " 0%, ").concat(gradientColor2, " 80%, ").concat(gradientColor3, " 130%)")
+  };
+  Object.entries(colorScales).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      type = _ref4[0],
+      scale = _ref4[1];
+    colorCustomToken = _objectSpread(_objectSpread({}, colorCustomToken), generateCustomColorPalette({
+      type: type,
+      scale: scale,
+      appearance: appearance
+    }));
+  });
+  return colorCustomToken;
+};

package/es/styles/algorithms/generateTheme.d.ts

@@ -0,0 +1,5 @@
+import { ThemeConfig } from 'antd';
+import { GetAntdTheme } from 'antd-style';
+export declare const lightTheme: ThemeConfig;
+export declare const darkTheme: ThemeConfig;
+export declare const generateTheme: GetAntdTheme;

package/es/styles/algorithms/generateTheme.js

@@ -0,0 +1,18 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import darkBaseToken from "../theme/dark";
+import lightBaseToken from "../theme/light";
+export var lightTheme = {
+  token: lightBaseToken,
+  algorithm: function algorithm(seedToken, mapToken) {
+    return _objectSpread(_objectSpread({}, mapToken), lightBaseToken);
+  }
+};
+export var darkTheme = {
+  token: darkBaseToken,
+  algorithm: function algorithm(seedToken, mapToken) {
+    return _objectSpread(_objectSpread({}, mapToken), darkBaseToken);
+  }
+};
+export var generateTheme = function generateTheme(appearance) {
+  return appearance === 'dark' ? darkTheme : lightTheme;
+};

package/es/styles/colors.d.ts

@@ -0,0 +1,38 @@
+export interface ColorScaleItem {
+    light: string[];
+    lightA: string[];
+    dark: string[];
+    darkA: string[];
+}
+export interface ColorScales {
+    tomato: ColorScaleItem;
+    red: ColorScaleItem;
+    crimson: ColorScaleItem;
+    pink: ColorScaleItem;
+    plum: ColorScaleItem;
+    purple: ColorScaleItem;
+    violet: ColorScaleItem;
+    indigo: ColorScaleItem;
+    blue: ColorScaleItem;
+    cyan: ColorScaleItem;
+    teal: ColorScaleItem;
+    green: ColorScaleItem;
+    grass: ColorScaleItem;
+    orange: ColorScaleItem;
+    brown: ColorScaleItem;
+    sky: ColorScaleItem;
+    mint: ColorScaleItem;
+    lime: ColorScaleItem;
+    yellow: ColorScaleItem;
+    amber: ColorScaleItem;
+    bronze: ColorScaleItem;
+    gold: ColorScaleItem;
+    gray: ColorScaleItem;
+    mauve: ColorScaleItem;
+    slate: ColorScaleItem;
+    sage: ColorScaleItem;
+    olive: ColorScaleItem;
+    sand: ColorScaleItem;
+    bnw: ColorScaleItem;
+}
+export declare const colorScales: ColorScales;