@lobehub/ui 1.95.0 → 1.95.1-beta.1

package/README.md

@@ -27,7 +27,7 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
 [![][github-issues-shield]][github-issues-link]
 [![][github-license-shield]][github-license-link]
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268452017-960ab8a1-e4b7-4648-beb1-77daf4b6034a.png)
+[![][banner]][vercel-link]
 
 </div>
 
@@ -52,7 +52,8 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
 
 ## 📦 Installation
 
-This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+> **Important**\
+> This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
 
 To install Lobe UI, run the following command:
 
@@ -82,6 +83,30 @@ const nextConfig = {
 
 </div>
 
+## 🤯 Usage
+
+> **Note**\
+> The LobeUI components are developed based on [Antd](https://ant.design/components/overview/), fully compatible with Antd components,
+> and it is recommended to use [antd-style](https://ant-design.github.io/antd-style/) as the default css-in-js styling solution.
+
+```tsx
+import { ThemeProvider, Button } from '@lobehub/ui'
+import { Button } from 'antd'
+
+export default () => (
+  <ThemeProvider>
+    <Button>Hello AIGC</Button>
+  </ThemeProvider>
+)
+```
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+
 ## ⌨️ Local Development
 
 You can use Github Codespaces for online development:
@@ -109,7 +134,7 @@ Contributions of all types are more than welcome, if you are interested in contr
 
 [![][pr-welcome-shield]][pr-welcome-link]
 
-[![][contributors-contrib]][contributors-url]
+[![][contributors-contrib]][contributors-link]
 
 <div align="right">
 
@@ -138,18 +163,19 @@ Contributions of all types are more than welcome, if you are interested in contr
 
 </details>
 
-Copyright © 2023 [LobeHub][profile-url]. <br />
+Copyright © 2023 [LobeHub][profile-link]. <br />
 This project is [MIT](./LICENSE) licensed.
 
 <!-- LINK GROUP -->
 
 [back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
+[banner]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268452017-960ab8a1-e4b7-4648-beb1-77daf4b6034a.png
 [bun-link]: https://bun.sh
 [bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
 [codespaces-link]: https://codespaces.new/lobehub/lobe-ui
 [codespaces-shield]: https://github.com/codespaces/badge.svg
 [contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-ui
-[contributors-url]: https://github.com/lobehub/lobe-ui/graphs/contributors
+[contributors-link]: https://github.com/lobehub/lobe-ui/graphs/contributors
 [discord-link]: https://discord.gg/AYFPHvv2jT
 [discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
 [fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-ui
@@ -180,6 +206,6 @@ This project is [MIT](./LICENSE) licensed.
 [npm-release-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
 [pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
 [pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
-[profile-url]: https://github.com/lobehub
+[profile-link]: https://github.com/lobehub
 [vercel-link]: https://ui.lobehub.com
 [vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fui.lobehub.com

package/es/ColorScales/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorScaleItem } from "../styles/colors";
+import { ColorScaleItem } from "../styles/colors/colors";
 export interface ColorScalesProps {
     /**
      * @description Index of the mid highlight color in the scale

package/es/FontLoader/index.js

@@ -1,4 +1,4 @@
-import { memo, useEffect } from 'react';
+import { memo, useEffect, useRef } from 'react';
 var createElement = function createElement(url) {
   var element = document.createElement('link');
   element.rel = 'stylesheet';
@@ -7,10 +7,13 @@ var createElement = function createElement(url) {
 };
 var FontLoader = /*#__PURE__*/memo(function (_ref) {
   var url = _ref.url;
+  var loadRef = useRef(false);
   useEffect(function () {
+    if (loadRef.current) return;
+    loadRef.current = true;
     var element = createElement(url);
     document.head.append(element);
   }, []);
-  return false;
+  return null;
 });
 export default FontLoader;

package/es/Giscus/style.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject;
 import { css } from 'antd-style';
 import { readableColor, rgba } from 'polished';
-import { colorScales } from "../styles/colors";
+import { colorScales } from "../styles/colors/colors";
 export var genStyles = function genStyles(token, isDarkMode) {
   var type = isDarkMode ? 'dark' : 'light';
   var colorText = colorScales.gray[type][11];

package/es/Highlighter/theme.js

@@ -1,4 +1,4 @@
-import { colorScales } from "../styles/colors";
+import { colorScales } from "../styles/colors/colors";
 export var themeConfig = function themeConfig(isDarkMode) {
   var type = isDarkMode ? 'dark' : 'light';
   var colorText = colorScales.gray[type][11];

package/es/ThemeProvider/GlobalStyle/antdOverride.js

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { css } from 'antd-style';
+import { readableColor } from 'polished';
 export default (function (token) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .ant-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .ant-switch-handle::before {\n    background: ", " !important;\n  }\n"])), token.colorBgLayout, token.colorText, token.borderRadiusSM, token.colorText, token.colorBgContainer);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-btn-primary {\n    color: ", " !important;\n  }\n\n  .ant-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .ant-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .ant-switch-handle::before {\n    background: ", " !important;\n  }\n"])), readableColor(token.colorPrimary), token.colorBgLayout, token.colorText, token.borderRadiusSM, token.colorText, token.colorBgContainer);
 });

package/es/ThemeProvider/index.d.ts

@@ -1,21 +1,14 @@
-import { type ThemeMode, extractStaticStyle } from 'antd-style';
-import type { CustomStylishParams, CustomTokenParams } from 'antd-style/lib/types/function';
-import { type ReactNode } from 'react';
-export interface ThemeProviderProps {
-    /**
-     * @description Cache for the extracted static styles
-     */
-    cache?: typeof extractStaticStyle.cache;
-    /**
-     * @description The children of the ThemeProvider component
-     */
-    children: ReactNode;
-    /**
-     * @description Custom stylish
-     */
+/// <reference types="react" />
+import { ThemeProviderProps as AntdThemeProviderProps, CustomStylishParams, CustomTokenParams } from 'antd-style';
+import { NeutralColors, PrimaryColors } from "../styles";
+export interface ThemeProviderProps extends Omit<AntdThemeProviderProps<any>, 'theme'> {
     customStylish?: (theme: CustomStylishParams) => {
         [key: string]: any;
     };
+    customTheme?: {
+        neutralColor?: NeutralColors;
+        primaryColor?: PrimaryColors;
+    };
     /**
      * @description Custom extra token
      */
@@ -23,14 +16,6 @@ export interface ThemeProviderProps {
         [key: string]: any;
     };
     enableWebfonts?: boolean;
-    /**
-     * @description Whether to inline the styles on server-side rendering or not
-     */
-    ssrInline?: boolean;
-    /**
-     * @description The mode of the theme (light or dark)
-     */
-    themeMode?: ThemeMode;
     /**
      * @description Webfont loader css strings
      */

package/es/ThemeProvider/index.js

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "customStylish", "customToken", "enableWebfonts", "webfonts", "customTheme"];
 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; }
 import { App } from 'antd';
@@ -7,19 +9,22 @@ import { memo, useCallback, useEffect } from 'react';
 import { ThemeContext } from 'styled-components';
 import { useCdnFn } from "../ConfigProvider";
 import FontLoader from "../FontLoader";
-import { lobeCustomStylish, lobeCustomToken, lobeTheme } from "../styles";
+import { lobeCustomStylish, lobeCustomToken } from "../styles";
+import { createLobeAntdTheme } from "../styles/theme/antdTheme";
 import GlobalStyle from "./GlobalStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
-    themeMode = _ref.themeMode,
     customStylish = _ref.customStylish,
     customToken = _ref.customToken,
     _ref$enableWebfonts = _ref.enableWebfonts,
     enableWebfonts = _ref$enableWebfonts === void 0 ? true : _ref$enableWebfonts,
-    webfonts = _ref.webfonts;
+    webfonts = _ref.webfonts,
+    _ref$customTheme = _ref.customTheme,
+    customTheme = _ref$customTheme === void 0 ? {} : _ref$customTheme,
+    res = _objectWithoutProperties(_ref, _excluded);
   var genCdnUrl = useCdnFn();
   var webfontUrls = webfonts || [genCdnUrl({
     path: 'css/index.css',
@@ -49,18 +54,25 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
   var token = useCallback(function (theme) {
     return _objectSpread(_objectSpread({}, lobeCustomToken(theme)), customToken === null || customToken === void 0 ? void 0 : customToken(theme));
   }, [customToken]);
+  var theme = useCallback(function (appearance) {
+    return createLobeAntdTheme({
+      appearance: appearance,
+      neutralColor: customTheme.neutralColor,
+      primaryColor: customTheme.primaryColor
+    });
+  }, [customTheme.primaryColor, customTheme.neutralColor]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [enableWebfonts && (webfontUrls === null || webfontUrls === void 0 ? void 0 : webfontUrls.length) > 0 && webfontUrls.map(function (webfont, index) {
+    children: [enableWebfonts && (webfontUrls === null || webfontUrls === void 0 ? void 0 : webfontUrls.length) > 0 && webfontUrls.map(function (webfont) {
       return /*#__PURE__*/_jsx(FontLoader, {
         url: webfont
-      }, index);
+      }, webfont);
     }), /*#__PURE__*/_jsx(StyleProvider, {
       speedy: process.env.NODE_ENV === 'production',
-      children: /*#__PURE__*/_jsxs(AntdThemeProvider, {
+      children: /*#__PURE__*/_jsxs(AntdThemeProvider, _objectSpread(_objectSpread({
         customStylish: stylish,
-        customToken: token,
-        theme: lobeTheme,
-        themeMode: themeMode,
+        customToken: token
+      }, res), {}, {
+        theme: theme,
         children: [/*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
           style: {
             minHeight: 'inherit',
@@ -68,7 +80,7 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
           },
           children: children
         })]
-      })
+      }))
     })]
   });
 });

package/es/styles/{algorithms → colors}/generateColorPalette.d.ts

@@ -1,5 +1,5 @@
 import { AliasToken } from 'antd/es/theme/interface';
-import { ColorScaleItem } from "../colors";
+import { ColorScaleItem } from "./colors";
 export declare const generateColorPalette: ({ type, scale, appearance, }: {
     appearance: 'light' | 'dark';
     scale: ColorScaleItem;

package/es/styles/customTheme.js

@@ -1,5 +1,5 @@
-import { colorScales } from "./colors";
-import { neutralColorScales } from "./neutralColors";
+import { colorScales } from "./colors/colors";
+import { neutralColorScales } from "./colors/neutralColors";
 export var primaryColors = {
   blue: colorScales.blue.dark[9],
   cyan: colorScales.cyan.dark[9],

package/es/styles/index.d.ts

@@ -1,9 +1,7 @@
-export { generateColorNeutralPalette, generateColorPalette, } from './algorithms/generateColorPalette';
-export { generateCustomStylish as lobeCustomStylish } from './algorithms/generateCustomStylish';
-export { generateCustomTheme as lobeCustomTheme } from './algorithms/generateCustomTheme';
-export { generateCustomToken as lobeCustomToken } from './algorithms/generateCustomToken';
-export { generateTheme as lobeTheme } from './algorithms/generateTheme';
-export { colorScales as colors } from './colors';
-export { colorScales } from './colors';
+export { colorScales as colors } from './colors/colors';
+export { colorScales } from './colors/colors';
+export { generateColorNeutralPalette, generateColorPalette } from './colors/generateColorPalette';
+export { neutralColorScales } from './colors/neutralColors';
 export * from './customTheme';
-export { neutralColorScales } from './neutralColors';
+export { generateCustomStylish as lobeCustomStylish } from './theme/customStylish';
+export { generateCustomToken as lobeCustomToken } from './theme/customToken';

package/es/styles/index.js

@@ -1,9 +1,7 @@
-export { generateColorNeutralPalette, generateColorPalette } from "./algorithms/generateColorPalette";
-export { generateCustomStylish as lobeCustomStylish } from "./algorithms/generateCustomStylish";
-export { generateCustomTheme as lobeCustomTheme } from "./algorithms/generateCustomTheme";
-export { generateCustomToken as lobeCustomToken } from "./algorithms/generateCustomToken";
-export { generateTheme as lobeTheme } from "./algorithms/generateTheme";
-export { colorScales as colors } from "./colors";
-export { colorScales } from "./colors";
+export { colorScales as colors } from "./colors/colors";
+export { colorScales } from "./colors/colors";
+export { generateColorNeutralPalette, generateColorPalette } from "./colors/generateColorPalette";
+export { neutralColorScales } from "./colors/neutralColors";
 export * from "./customTheme";
-export { neutralColorScales } from "./neutralColors";
+export { generateCustomStylish as lobeCustomStylish } from "./theme/customStylish";
+export { generateCustomToken as lobeCustomToken } from "./theme/customToken";

package/es/styles/theme/algorithms/darkAlgorithm.d.ts

@@ -0,0 +1,2 @@
+import { MappingAlgorithm } from 'antd/es/theme/interface';
+export declare const darkAlgorithm: MappingAlgorithm;

package/es/styles/theme/algorithms/darkAlgorithm.js

@@ -0,0 +1,32 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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; }
+import { generateColorNeutralPalette, generateColorPalette, neutralColorScales } from "../..";
+import { colorScales } from "../../colors/colors";
+import darkBaseToken from "../token/dark";
+export var darkAlgorithm = function darkAlgorithm(seedToken, mapToken) {
+  var primaryColor = seedToken.primaryColor;
+  var neutralColor = seedToken.neutralColor;
+  var primaryTokens = {};
+  var neutralTokens = {};
+
+  // generate primary color Token with colorPrimary
+  var primaryScale = colorScales[primaryColor];
+  if (primaryScale) {
+    primaryTokens = generateColorPalette({
+      appearance: 'dark',
+      scale: primaryScale,
+      type: 'Primary'
+    });
+  }
+
+  // generate neutral color Token with colorBgBase
+  var neutralScale = neutralColorScales[neutralColor];
+  if (neutralScale) {
+    neutralTokens = generateColorNeutralPalette({
+      appearance: 'dark',
+      scale: neutralScale
+    });
+  }
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, mapToken), darkBaseToken), primaryTokens), neutralTokens);
+};

package/es/styles/theme/algorithms/lightAlgorithm.d.ts

@@ -0,0 +1,2 @@
+import { MappingAlgorithm } from 'antd/es/theme/interface';
+export declare const lightAlgorithm: MappingAlgorithm;

package/es/styles/{algorithms/generateCustomTheme.js → theme/algorithms/lightAlgorithm.js}

@@ -1,30 +1,28 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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; }
-import { colorScales } from "../colors";
-import { neutralColorScales } from "../neutralColors";
-import { generateColorNeutralPalette, generateColorPalette } from "./generateColorPalette";
-export var generateCustomTheme = function generateCustomTheme(_ref) {
-  var primaryColor = _ref.primaryColor,
-    neutralColor = _ref.neutralColor,
-    isDarkMode = _ref.isDarkMode;
-  var appearance = isDarkMode ? 'dark' : 'light';
+import { generateColorNeutralPalette, generateColorPalette, neutralColorScales } from "../..";
+import { colorScales } from "../../colors/colors";
+import lightBaseToken from "../token/light";
+export var lightAlgorithm = function lightAlgorithm(seedToken, mapToken) {
+  var primaryColor = seedToken.colorPrimary;
+  var neutralColor = seedToken.colorBgBase;
   var primaryTokens = {};
   var neutralTokens = {};
-  if (primaryColor) {
-    var scale = colorScales[primaryColor];
+  var primaryScale = colorScales[primaryColor];
+  if (primaryScale) {
     primaryTokens = generateColorPalette({
-      appearance: appearance,
-      scale: scale,
+      appearance: 'light',
+      scale: primaryScale,
       type: 'Primary'
     });
   }
-  if (neutralColor) {
-    var _scale = neutralColorScales[neutralColor];
+  var neutralScale = neutralColorScales[neutralColor];
+  if (neutralScale) {
     neutralTokens = generateColorNeutralPalette({
-      appearance: appearance,
-      scale: _scale
+      appearance: 'light',
+      scale: neutralScale
     });
   }
-  return _objectSpread(_objectSpread({}, primaryTokens), neutralTokens);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, mapToken), lightBaseToken), primaryTokens), neutralTokens);
 };

package/es/styles/theme/antdTheme.d.ts

@@ -0,0 +1,15 @@
+import { ThemeConfig } from 'antd';
+import { ThemeAppearance } from 'antd-style';
+import { NeutralColors, PrimaryColors } from "..";
+export interface LobeAntdThemeParams {
+    appearance: ThemeAppearance;
+    neutralColor?: NeutralColors;
+    primaryColor?: PrimaryColors;
+}
+/**
+ * create A LobeHub Style Antd Theme Object
+ * @param neutralColor
+ * @param appearance
+ * @param primaryColor
+ */
+export declare const createLobeAntdTheme: ({ neutralColor, appearance, primaryColor, }: LobeAntdThemeParams) => ThemeConfig;

package/es/styles/{algorithms/generateTheme.js → theme/antdTheme.js}

@@ -1,20 +1,26 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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; }
-import darkBaseToken from "../theme/dark";
-import lightBaseToken from "../theme/light";
-export var lightTheme = {
-  algorithm: function algorithm(seedToken, mapToken) {
-    return _objectSpread(_objectSpread({}, mapToken), lightBaseToken);
-  },
-  token: lightBaseToken
-};
-export var darkTheme = {
-  algorithm: function algorithm(seedToken, mapToken) {
-    return _objectSpread(_objectSpread({}, mapToken), darkBaseToken);
-  },
-  token: darkBaseToken
-};
-export var generateTheme = function generateTheme(appearance) {
-  return appearance === 'dark' ? darkTheme : lightTheme;
+import { darkAlgorithm } from "./algorithms/darkAlgorithm";
+import { lightAlgorithm } from "./algorithms/lightAlgorithm";
+import { baseToken } from "./token/base";
+/**
+ * create A LobeHub Style Antd Theme Object
+ * @param neutralColor
+ * @param appearance
+ * @param primaryColor
+ */
+export var createLobeAntdTheme = function createLobeAntdTheme(_ref) {
+  var neutralColor = _ref.neutralColor,
+    appearance = _ref.appearance,
+    primaryColor = _ref.primaryColor;
+  var isDark = appearance === 'dark';
+  return {
+    algorithm: isDark ? darkAlgorithm : lightAlgorithm,
+    token: _objectSpread(_objectSpread({}, baseToken), {}, {
+      // @ts-ignore
+      neutralColor: neutralColor,
+      primaryColor: primaryColor
+    })
+  };
 };

package/es/styles/{algorithms/generateCustomToken.js → theme/customToken.js}

@@ -6,7 +6,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 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; }
 import { camelCase } from 'lodash-es';
-import { colorScales } from "../colors";
+import { colorScales } from "../colors/colors";
 var generateColorPalette = function generateColorPalette(_ref) {
   var _ref2;
   var name = _ref.name,
@@ -55,8 +55,6 @@ var generateCustomColorPalette = function generateCustomColorPalette(_ref3) {
     scale: scale
   }));
 };
-
-// @ts-ignore
 export var generateCustomToken = function generateCustomToken(_ref4) {
   var isDarkMode = _ref4.isDarkMode;
   var colorCustomToken = {};

package/es/styles/theme/{dark.js → token/dark.js}

@@ -1,9 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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; }
-import { generateColorNeutralPalette, generateColorPalette } from "../algorithms/generateColorPalette";
-import { colorScales } from "../colors";
-import { baseToken } from "./base";
+import { generateColorNeutralPalette, generateColorPalette } from "../../colors/generateColorPalette";
+import { colorScales } from "../../colors/colors";
 var primaryToken = generateColorPalette({
   appearance: 'dark',
   scale: colorScales.bnw,
@@ -33,7 +32,7 @@ var infoToken = generateColorPalette({
   scale: colorScales.blue,
   type: 'Info'
 });
-var darkBaseToken = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, baseToken), primaryToken), neutralToken), successToken), warningToken), errorToken), infoToken), {}, {
+var darkBaseToken = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, primaryToken), neutralToken), successToken), warningToken), errorToken), infoToken), {}, {
   boxShadow: '0 12px 20px 6px rgb(0 0 0 / 0.08)',
   boxShadowSecondary: '0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)',
   colorLink: infoToken.colorInfoText,

package/es/styles/theme/{light.js → token/light.js}

@@ -1,9 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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; }
-import { generateColorNeutralPalette, generateColorPalette } from "../algorithms/generateColorPalette";
-import { colorScales } from "../colors";
-import { baseToken } from "./base";
+import { generateColorNeutralPalette, generateColorPalette } from "../../colors/generateColorPalette";
+import { colorScales } from "../../colors/colors";
 var primaryToken = generateColorPalette({
   appearance: 'light',
   scale: colorScales.bnw,
@@ -33,7 +32,7 @@ var infoToken = generateColorPalette({
   scale: colorScales.geekblue,
   type: 'Info'
 });
-var lightBaseToken = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, baseToken), primaryToken), neutralToken), successToken), warningToken), errorToken), infoToken), {}, {
+var lightBaseToken = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, primaryToken), neutralToken), successToken), warningToken), errorToken), infoToken), {}, {
   boxShadow: '0 12px 20px 6px rgb(104 112 118 / 0.08)',
   boxShadowSecondary: '0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)',
   colorLink: infoToken.colorInfoText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.95.0",
+  "version": "1.95.1-beta.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",

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

@@ -1,9 +0,0 @@
-import { AliasToken } from 'antd/es/theme/interface';
-import { type NeutralColors, type PrimaryColors } from '../customTheme';
-interface generateCustomThemeProps {
-    isDarkMode: boolean;
-    neutralColor?: NeutralColors | '';
-    primaryColor?: PrimaryColors | '';
-}
-export declare const generateCustomTheme: ({ primaryColor, neutralColor, isDarkMode, }: generateCustomThemeProps) => Partial<AliasToken>;
-export {};

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

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