@lobehub/ui 1.11.4 → 1.12.0

package/es/ColorScales/ScaleRow.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface IScaleRow {
+    title: 'light' | 'lightA' | 'dark' | 'darkA';
+    scale: string[];
+}
+declare const ScaleRow: import("react").NamedExoticComponent<IScaleRow>;
+export default ScaleRow;

package/es/ColorScales/ScaleRow.js

@@ -0,0 +1,56 @@
+import { Space, message } from 'antd';
+import copy from 'copy-to-clipboard';
+import { memo } from 'react';
+import { alphaBg, useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ScaleRow = /*#__PURE__*/memo(function (_ref) {
+  var title = _ref.title,
+    scale = _ref.scale;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var style = {};
+  switch (title) {
+    case 'lightA':
+      style = {
+        backgroundColor: '#fff',
+        background: alphaBg.light
+      };
+      break;
+    case 'darkA':
+      style = {
+        backgroundColor: '#000',
+        background: alphaBg.dark
+      };
+      break;
+    default:
+      break;
+  }
+  return /*#__PURE__*/_jsxs(Space, {
+    size: 2,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.scaleRowTitle,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.text,
+        children: title
+      })
+    }, title), scale.map(function (color, index) {
+      return /*#__PURE__*/_jsx("div", {
+        className: styles.scaleBox,
+        title: color,
+        style: style,
+        onClick: function onClick() {
+          copy(color);
+          message.success(color);
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: styles.scaleItem,
+          style: {
+            backgroundColor: color
+          }
+        })
+      }, index);
+    })]
+  });
+});
+export default ScaleRow;

package/es/ColorScales/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ColorScaleItem } from "../styles/colors";
+export interface ColorScalesProps {
+    scale: ColorScaleItem;
+    midHighLight: number;
+}
+declare const ColorScales: import("react").NamedExoticComponent<ColorScalesProps>;
+export default ColorScales;

package/es/ColorScales/index.js

@@ -0,0 +1,59 @@
+import { Space } from 'antd';
+import { memo } from 'react';
+import ScaleRow from "./ScaleRow";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ColorScales = /*#__PURE__*/memo(function (_ref) {
+  var scale = _ref.scale,
+    midHighLight = _ref.midHighLight;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.view,
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        padding: '8px 16px 32px 0'
+      },
+      children: /*#__PURE__*/_jsxs(Space, {
+        direction: 'vertical',
+        size: 2,
+        children: [/*#__PURE__*/_jsxs(Space, {
+          size: 2,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: styles.scaleRowTitle
+          }, "scale-num"), new Array(scale.light.length).fill('').map(function (_, index) {
+            var isMidHighlight = midHighLight === index;
+            return /*#__PURE__*/_jsx("div", {
+              className: styles.scaleBox,
+              children: /*#__PURE__*/_jsx("div", {
+                className: styles.scaleBox,
+                children: /*#__PURE__*/_jsx("div", {
+                  className: styles.scaleItem,
+                  style: {
+                    opacity: 0.5,
+                    fontWeight: isMidHighlight ? 700 : 400
+                  },
+                  children: index + 1
+                })
+              })
+            }, 'num' + index);
+          })]
+        }, "scale-title"), /*#__PURE__*/_jsx(ScaleRow, {
+          title: "light",
+          scale: scale.light
+        }, "light"), /*#__PURE__*/_jsx(ScaleRow, {
+          title: "lightA",
+          scale: scale.lightA
+        }, "lightA"), /*#__PURE__*/_jsx(ScaleRow, {
+          title: "dark",
+          scale: scale.dark
+        }, "dark"), /*#__PURE__*/_jsx(ScaleRow, {
+          title: "darkA",
+          scale: scale.darkA
+        }, "darkA")]
+      })
+    })
+  });
+});
+export default ColorScales;

package/es/ColorScales/style.d.ts

@@ -0,0 +1,11 @@
+export declare const alphaBg: {
+    light: string;
+    dark: string;
+};
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    view: import("antd-style").SerializedStyles;
+    scaleBox: import("antd-style").SerializedStyles;
+    scaleItem: import("antd-style").SerializedStyles;
+    scaleRowTitle: import("antd-style").SerializedStyles;
+    text: import("antd-style").SerializedStyles;
+}>;

package/es/ColorScales/style.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+export var alphaBg = {
+  light: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',
+  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px'
+};
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    view: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n  "]))),
+    scaleBox: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    background-size: 16px 16px;\n    &:active {\n      transform: scale(0.95);\n    }\n  "]))),
+    scaleItem: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 100%;\n    height: 100%;\n  "]))),
+    scaleRowTitle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    width: 64px;\n    height: 32px;\n  "]))),
+    text: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    opacity: 0.5;\n  "])))
+  };
+});

package/es/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as Avatar, type AvatarProps } from './Avatar';
 export type { ChatMessage } from './Chat';
+export { default as ColorScales, type ColorScalesProps } from './ColorScales';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as Conversation, type ConversationProps } from './Conversation';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';
@@ -25,3 +26,4 @@ export { default as TabsNav, type TabsNavProps } from './TabsNav';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
 export { default as Tooltip, type TooltipProps } from './Tooltip';
+export { colorScales as colors } from './styles/colors';

package/es/index.js

@@ -1,5 +1,6 @@
 export { default as ActionIcon } from "./ActionIcon";
 export { default as Avatar } from "./Avatar";
+export { default as ColorScales } from "./ColorScales";
 export { default as ContextMenu } from "./ContextMenu";
 export { default as Conversation } from "./Conversation";
 export { default as CopyButton } from "./CopyButton";
@@ -23,4 +24,5 @@ export { default as Swatches } from "./Swatches";
 export { default as TabsNav } from "./TabsNav";
 export { default as ThemeProvider } from "./ThemeProvider";
 export { default as ThemeSwitch } from "./ThemeSwitch";
-export { default as Tooltip } from "./Tooltip";
+export { default as Tooltip } from "./Tooltip";
+export { colorScales as colors } from "./styles/colors";

package/es/styles/algorithms/generateColorPalette.js

@@ -6,7 +6,7 @@ export var generateColorPalette = function generateColorPalette(_ref) {
     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;
+  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, "TextActive"), scale[appearance][7]), _ref2;
 };
 export var generateColorNeutralPalette = function generateColorNeutralPalette(_ref3) {
   var scale = _ref3.scale,
@@ -16,8 +16,8 @@ export var generateColorNeutralPalette = function generateColorNeutralPalette(_r
     colorTextSecondary: scale[appearance][10],
     colorTextTertiary: scale[appearance][8],
     colorTextQuaternary: scale[appearance][6],
-    colorBorder: scale["".concat(appearance, "A")][4],
-    colorBorderSecondary: scale["".concat(appearance, "A")][3],
+    colorBorder: scale[appearance][4],
+    colorBorderSecondary: scale[appearance][3],
     colorFill: scale["".concat(appearance, "A")][3],
     colorFillSecondary: scale["".concat(appearance, "A")][2],
     colorFillTertiary: scale["".concat(appearance, "A")][1],

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

@@ -1,17 +1,3 @@
+import { LobeCustomStylish } from "../../types/customStylish";
 import { GetCustomStylish } from 'antd-style';
-declare module 'antd-style' {
-    interface CustomStylish extends SiteStylish {
-    }
-}
-export interface SiteStylish {
-    clickableText: string;
-    resetLinkColor: string;
-    heroButtonGradient: string;
-    heroGradient: string;
-    heroTextShadow: string;
-    heroGradientFlow: string;
-    heroBlurBall: string;
-    iconGradientDefault: string;
-    blur: string;
-}
-export declare const generateCustomStylish: GetCustomStylish<SiteStylish>;
+export declare const generateCustomStylish: GetCustomStylish<LobeCustomStylish>;

package/es/styles/algorithms/generateCustomStylish.js

@@ -1,19 +1,17 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { rgba } from 'polished';
 export var generateCustomStylish = function generateCustomStylish(_ref) {
   var css = _ref.css,
-    token = _ref.token,
-    isDarkMode = _ref.isDarkMode;
+    token = _ref.token;
   return {
     clickableText: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText),
     resetLinkColor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: inherit;\n\n      &:hover,\n      &:active {\n        color: inherit;\n      }\n    "]))),
     heroButtonGradient: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      background: linear-gradient(90deg, ", " 0%, ", " 100%);\n    "])), token.gradientColor1, token.gradientColor2),
     heroGradient: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background-image: ", ";\n      background-size: 300% 300%;\n    "])), token.gradientHeroBgG),
     heroGradientFlow: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      animation: flow 5s ease infinite;\n\n      @keyframes flow {\n        0% {\n          background-position: 0 0;\n        }\n\n        50% {\n          background-position: 100% 100%;\n        }\n\n        100% {\n          background-position: 0 0;\n        }\n      }\n    "]))),
-    heroTextShadow: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      will-change: transform;\n      text-shadow: 0 8px 20px ", ",\n        0 8px 60px ", ",\n        0 8px 80px ", ";\n    "])), rgba(token.gradientColor2, 0.2), rgba(token.gradientColor3, 0.2), rgba(token.cyan, isDarkMode ? 0.2 : 0.4)),
-    heroBlurBall: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      will-change: transform;\n\n      background: linear-gradient(\n        135deg,\n        ", " 0%,\n        ", " 30%,\n        ", " 70%,\n        ", " 100%\n      );\n      background-size: 200% 200%;\n      filter: blur(69px);\n\n      animation: glow 10s ease infinite;\n\n      @keyframes glow {\n        0% {\n          background-position: 0 -100%;\n        }\n\n        50% {\n          background-position: 200% 50%;\n        }\n\n        100% {\n          background-position: 0 -100%;\n        }\n      }\n    "])), token.gradientColor3, token.gradientColor1, token.red, token.cyan),
-    iconGradientDefault: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      background-image: radial-gradient(\n        100% 100% at 50% 0,\n        ", " 0,\n        ", " 100%\n      );\n    "])), rgba(token.colorSolid, 0.2), rgba(token.colorSolid, 0.1)),
-    blur: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      backdrop-filter: blur(7px);\n    "])))
+    heroBlurBall: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      will-change: transform;\n\n      background: linear-gradient(\n        135deg,\n        ", " 0%,\n        ", " 30%,\n        ", " 70%,\n        ", " 100%\n      );\n      background-size: 200% 200%;\n      filter: blur(69px);\n\n      animation: glow 10s ease infinite;\n\n      @keyframes glow {\n        0% {\n          background-position: 0 -100%;\n        }\n\n        50% {\n          background-position: 200% 50%;\n        }\n\n        100% {\n          background-position: 0 -100%;\n        }\n      }\n    "])), token.gradientColor3, token.gradientColor1, token.red, token.cyan),
+    iconGradientDefault: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background-image: radial-gradient(\n        100% 100% at 50% 0,\n        ", " 0,\n        ", " 100%\n      );\n    "])), rgba(token.colorSolid, 0.2), rgba(token.colorSolid, 0.1)),
+    blur: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      backdrop-filter: blur(7px);\n    "])))
   };
 };

package/es/styles/algorithms/generateCustomToken.js

@@ -1,37 +1,49 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { colorScales } from "../colors";
-import { capitalize } from 'lodash';
-import { generateColorPalette } from "./generateColorPalette";
-var generateCustomColorPalette = function generateCustomColorPalette(_ref) {
-  var type = _ref.type,
-    scale = _ref.scale,
+import { camelCase } from 'lodash';
+var generateColorPalette = function generateColorPalette(_ref) {
+  var _ref2;
+  var scale = _ref.scale,
     appearance = _ref.appearance;
-  var name = capitalize(type);
+  return _ref2 = {}, _defineProperty(_ref2, "colorBg", scale[appearance][1]), _defineProperty(_ref2, "colorBgHover", scale[appearance][2]), _defineProperty(_ref2, "colorBorder", scale[appearance][4]), _defineProperty(_ref2, "colorBorderHover", scale[appearance][5]), _defineProperty(_ref2, "colorHover", scale[appearance][10]), _defineProperty(_ref2, "color", scale[appearance][9]), _defineProperty(_ref2, "colorActive", scale[appearance][7]), _defineProperty(_ref2, "colorTextHover", scale[appearance][10]), _defineProperty(_ref2, "colorText", scale[appearance][9]), _defineProperty(_ref2, "colorTextActive", scale[appearance][7]), _ref2;
+};
+var generateCustomColorPalette = function generateCustomColorPalette(_ref3) {
+  var scale = _ref3.scale,
+    appearance = _ref3.appearance;
   var colorStepPalette = {};
   scale[appearance].forEach(function (color, index) {
-    colorStepPalette["color".concat(name).concat(index + 1)] = color;
+    colorStepPalette["color".concat(index + 1)] = color;
   });
   scale["".concat(appearance, "A")].forEach(function (color, index) {
-    colorStepPalette["color".concat(name).concat(index + 1, "A")] = color;
+    colorStepPalette["color".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 = {
+export var generateCustomToken = function generateCustomToken(_ref4) {
+  var token = _ref4.token,
+    isDarkMode = _ref4.isDarkMode;
+  var colorCustomToken = {};
+  Object.entries(colorScales).forEach(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      type = _ref6[0],
+      scale = _ref6[1];
+    colorCustomToken[camelCase(type)] = generateCustomColorPalette({
+      scale: scale,
+      appearance: isDarkMode ? 'dark' : 'light'
+    });
+  });
+  var gradientColor1 = colorScales.blue.darkA[8];
+  var gradientColor2 = isDarkMode ? colorScales.pink.darkA[8] : colorScales.cyan.darkA[8];
+  var gradientColor3 = colorScales.purple.darkA[8];
+  var colorSolid = isDarkMode ? '#fff' : '#000';
+  return _objectSpread(_objectSpread(_objectSpread({}, token), colorCustomToken), {}, {
     headerHeight: 64,
     footerHeight: 300,
     sidebarWidth: 240,
@@ -42,16 +54,5 @@ export var generateCustomToken = function generateCustomToken(_ref2) {
     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/types/customStylish.d.ts

@@ -0,0 +1,13 @@
+export interface LobeCustomStylish {
+  clickableText: string;
+  resetLinkColor: string;
+
+  heroButtonGradient: string;
+  heroGradient: string;
+
+  heroGradientFlow: string;
+  heroBlurBall: string;
+
+  iconGradientDefault: string;
+  blur: string;
+}