@lobehub/ui 1.170.6 → 1.170.7

package/es/Drawer/index.js

@@ -102,7 +102,7 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
         padding: '0 4px'
       }, styles === null || styles === void 0 ? void 0 : styles.body),
       content: _objectSpread({
-        background: sidebar ? "linear-gradient(to right, ".concat(theme.colorBgContainer, " 49.9%, ").concat(theme.colorBgLayout, " 50%)") : theme.colorBgContainer
+        background: sidebar ? "linear-gradient(to right, ".concat(theme.colorBgLayout, " 49.9%, ").concat(theme.colorBgContainer, " 50%)") : theme.colorBgContainer
       }, styles === null || styles === void 0 ? void 0 : styles.content),
       header: _objectSpread({
         background: 'transparent',
@@ -146,7 +146,7 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
           paddingBlock: 12,
           paddingInline: 16,
           style: _objectSpread({
-            background: theme.colorBgContainer,
+            background: theme.colorBgLayout,
             borderRight: "1px solid ".concat(theme.colorBorderSecondary),
             height: '100%',
             overflowX: 'hidden',
@@ -160,7 +160,7 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
           paddingBlock: 12,
           paddingInline: 16,
           style: _objectSpread({
-            background: theme.colorBgLayout,
+            background: theme.colorBgContainer,
             height: '100%',
             overflowX: 'hidden',
             overflowY: 'auto'

package/es/Modal/index.js

@@ -20,7 +20,6 @@ import { Modal as AntModal, Button, ConfigProvider, Drawer } from 'antd';
 import { useResponsive } from 'antd-style';
 import { isNumber } from 'lodash-es';
 import { Maximize2, Minimize2, X } from 'lucide-react';
-import { lighten } from 'polished';
 import { memo, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import Icon from "../Icon";
@@ -71,57 +70,69 @@ var Modal = /*#__PURE__*/memo(function (_ref) {
   var body = stylesProps.body,
     restStyles = _objectWithoutProperties(stylesProps, _excluded2);
   var hideFooter = footer === false || footer === null;
-  if (enableResponsive && mobile) return /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
-    className: cx(styles.drawerContent, className),
-    closeIcon: /*#__PURE__*/_jsx(ActionIcon, {
-      icon: X
-    }),
-    destroyOnClose: destroyOnClose,
-    extra: allowFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
-      icon: fullscreen ? Minimize2 : Maximize2,
-      onClick: function onClick() {
-        return setFullscreen(!fullscreen);
+  if (enableResponsive && mobile) return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {
+      token: {
+        colorBgElevated: theme.colorBgContainer
       }
-    }),
-    footer: hideFooter ? null : footer || /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
-        onClick: onCancel
-      }, cancelButtonProps), {}, {
-        children: cancelText || 'Cancel'
-      })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
-        loading: confirmLoading,
-        onClick: onOk,
-        type: "primary"
-      }, okButtonProps), {}, {
-        style: _objectSpread({
-          marginInlineStart: 8
-        }, okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.style),
-        children: okText || 'OK'
-      }))]
-    }),
-    height: fullscreen ? 'calc(100% - env(safe-area-inset-top))' : maxHeight || '75vh',
-    maskClassName: cx(styles.wrap, wrapClassName),
-    onClose: onCancel,
-    open: open,
-    placement: 'bottom',
-    styles: _objectSpread({
-      body: _objectSpread({
-        paddingBlock: "16px ".concat(footer ? 0 : '16px'),
-        paddingInline: (_paddings$desktop = paddings === null || paddings === void 0 ? void 0 : paddings.desktop) !== null && _paddings$desktop !== void 0 ? _paddings$desktop : 16
-      }, body)
-    }, restStyles),
-    title: title
-  }, rest), {}, {
-    children: children
-  }));
+    },
+    children: /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
+      className: cx(styles.drawerContent, className),
+      closeIcon: /*#__PURE__*/_jsx(ActionIcon, {
+        icon: X
+      }),
+      destroyOnClose: destroyOnClose,
+      extra: allowFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
+        icon: fullscreen ? Minimize2 : Maximize2,
+        onClick: function onClick() {
+          return setFullscreen(!fullscreen);
+        }
+      }),
+      footer: hideFooter ? null : footer || /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          color: 'default',
+          onClick: onCancel,
+          variant: 'filled'
+        }, cancelButtonProps), {}, {
+          children: cancelText || 'Cancel'
+        })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          loading: confirmLoading,
+          onClick: onOk,
+          type: "primary"
+        }, okButtonProps), {}, {
+          style: _objectSpread({
+            marginInlineStart: 8
+          }, okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.style),
+          children: okText || 'OK'
+        }))]
+      }),
+      height: fullscreen ? 'calc(100% - env(safe-area-inset-top))' : maxHeight || '75vh',
+      maskClassName: cx(styles.wrap, wrapClassName),
+      onClose: onCancel,
+      open: open,
+      placement: 'bottom',
+      styles: _objectSpread({
+        body: _objectSpread({
+          paddingBlock: "16px ".concat(footer ? 0 : '16px'),
+          paddingInline: (_paddings$desktop = paddings === null || paddings === void 0 ? void 0 : paddings.desktop) !== null && _paddings$desktop !== void 0 ? _paddings$desktop : 16
+        }, body)
+      }, restStyles),
+      title: title
+    }, rest), {}, {
+      children: children
+    }))
+  });
   return /*#__PURE__*/_jsx(ConfigProvider, {
     theme: {
       token: {
-        colorBgElevated: lighten(0.005, theme.colorBgContainer)
+        colorBgElevated: theme.colorBgContainer
       }
     },
     children: /*#__PURE__*/_jsx(AntModal, _objectSpread(_objectSpread({
-      cancelButtonProps: cancelButtonProps,
+      cancelButtonProps: _objectSpread({
+        color: 'default',
+        variant: 'filled'
+      }, cancelButtonProps),
       cancelText: cancelText,
       className: cx(styles.content, className),
       closable: true,

package/es/Modal/style.js

@@ -11,7 +11,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var maxHeight = _ref2.maxHeight;
   return {
     content: cx(maxHeight && css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            .", "-modal-body {\n              overflow: auto;\n              max-height: ", ";\n            }\n          "])), prefixCls, maxHeight), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          .", "-modal-footer {\n            margin: 0;\n            padding: 16px;\n          }\n          .", "-modal-header {\n            display: flex;\n            gap: 4px;\n            align-items: center;\n            justify-content: center;\n\n            height: 56px;\n            margin-block-end: 0;\n            padding: 16px;\n          }\n          .", "-modal-content {\n            overflow: hidden;\n            padding: 0;\n            border: 1px solid ", ";\n            border-radius: ", "px;\n          }\n        "])), prefixCls, prefixCls, prefixCls, token.colorSplit, token.borderRadiusLG)),
-    drawerContent: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        &.", "-drawer-content {\n          background: ", ";\n        }\n\n        .", "-drawer-close {\n          padding: 0;\n        }\n\n        .", "-drawer-header {\n          flex: none;\n          height: ", "px !important;\n          padding-block: 0;\n          padding-inline: 16px;\n        }\n\n        .", "-drawer-footer {\n          display: flex;\n          align-items: center;\n          justify-content: flex-end;\n\n          padding: 16px;\n\n          border: none;\n        }\n      "])), prefixCls, token.colorBgContainer, prefixCls, prefixCls, HEADER_HEIGHT, prefixCls),
+    drawerContent: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .", "-drawer-close {\n          padding: 0;\n        }\n\n        .", "-drawer-header {\n          flex: none;\n          height: ", "px !important;\n          padding-block: 0;\n          padding-inline: 16px;\n        }\n\n        .", "-drawer-footer {\n          display: flex;\n          align-items: center;\n          justify-content: flex-end;\n\n          padding: 16px;\n\n          border: none;\n        }\n      "])), prefixCls, prefixCls, HEADER_HEIGHT, prefixCls),
     wrap: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: hidden auto;\n      "])))
   };
 });

package/es/styles/theme/customToken.js

@@ -12,6 +12,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { camelCase } from 'lodash-es';
+import { mix } from 'polished';
 import { colorScales } from "../../color/colors";
 var generateColorPalette = function generateColorPalette(_ref) {
   var _ref2;
@@ -62,7 +63,8 @@ var generateCustomColorPalette = function generateCustomColorPalette(_ref3) {
   }));
 };
 export var generateCustomToken = function generateCustomToken(_ref4) {
-  var isDarkMode = _ref4.isDarkMode;
+  var isDarkMode = _ref4.isDarkMode,
+    token = _ref4.token;
   var colorCustomToken = {};
   for (var _i = 0, _Object$entries = Object.entries(colorScales); _i < _Object$entries.length; _i++) {
     var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
@@ -74,5 +76,7 @@ export var generateCustomToken = function generateCustomToken(_ref4) {
       scale: scale
     }));
   }
-  return colorCustomToken;
+  return _objectSpread(_objectSpread({}, colorCustomToken), {}, {
+    colorBgContainerSecondary: mix(0.5, token.colorBgLayout, token.colorBgContainer)
+  });
 };

package/es/types/customToken.d.ts

@@ -13,5 +13,6 @@ export type ColorPalettesAlpha = {
     [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}A`]: string;
 };
 export interface LobeCustomToken extends ColorToken, ColorPalettes, ColorPalettesAlpha {
+    colorBgContainerSecondary: string;
 }
 export {};

package/package.json

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