@aloudata/aloudata-design 1.10.14 → 2.0.0-beta.10

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export type { CollapsePanelProps, CollapseProps } from './Collapse';
 export { default as ColorPicker } from './ColorPicker';
 export type { IColorPickerProps } from './ColorPicker';
 export { default as ConfigProvider } from './ConfigProvider';
+export type { SizeType } from './ConfigProvider/sizeContext';
 export { default as DataPreviewTable } from './DataPreviewTable';
 export type { ITableProps as DataPreviewTableProps, DataPreviewTableRef, PreviewColumn, } from './DataPreviewTable/interface';
 export { default as DatePicker } from './DatePicker';
@@ -36,7 +37,6 @@ export { default as Empty } from './Empty';
 export type { IEmptyProps as EmptyProps } from './Empty';
 export { default as Form } from './Form';
 export type { FormInstance, FormItemProps, FormProps } from './Form';
-export { default as Icon } from './Icon';
 export { default as IconButton } from './IconButton';
 export { default as Input } from './Input';
 export type { IInputProps as InputProps, InputRef, TSize, TextAreaRef, } from './Input';
@@ -83,6 +83,7 @@ export { default as Tabs } from './Tabs';
 export type { ITabsProps as TabsProps, TabsSize } from './Tabs';
 export { default as Tag } from './Tag';
 export type { TagProps, TagType } from './Tag';
+export { default as TextLink } from './TextLink';
 export { default as Tooltip } from './Tooltip';
 export type { ActionType as TooltipActionType, ITooltipProps as TooltipProps, } from './Tooltip';
 export { default as Tree } from './Tree';

package/dist/index.js

@@ -20,7 +20,6 @@ export { default as Drawer } from "./Drawer";
 export { default as Dropdown } from "./Dropdown";
 export { default as Empty } from "./Empty";
 export { default as Form } from "./Form";
-export { default as Icon } from "./Icon";
 export { default as IconButton } from "./IconButton";
 export { default as Input } from "./Input";
 export { default as InputNumber } from "./InputNumber";
@@ -46,6 +45,7 @@ export { default as Switch } from "./Switch";
 export { default as Table } from "./Table";
 export { default as Tabs } from "./Tabs";
 export { default as Tag } from "./Tag";
+export { default as TextLink } from "./TextLink";
 export { default as Tooltip } from "./Tooltip";
 export { default as Tree } from "./Tree";
 export { default as Typography } from "./Typography";

package/dist/index.less

@@ -47,3 +47,4 @@
 @import './Tree/style/index.less';
 @import './Upload/style/index.less';
 @import './Typography/style/index.less';
+@import './TextLink/style/index.less';

package/dist/message/index.js

@@ -6,8 +6,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 import { message as AntdMessage } from 'antd';
 import React from 'react';
-import { AlertTriangleDuotone, CheckCircleDuotone, InfoCircleLine, LoadingLine } from "../Icon";
-import styles from "../style/themes/default/themeColor.module.less";
+import { AttentionTriangleFill, CheckCircleFill, CloseCircleFill, InformationCircleFill, LoadingLine } from "../Icon";
 function isReactNode(value) {
   return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || _typeof(value) === 'symbol' || value === null || value === undefined || /*#__PURE__*/React.isValidElement(value);
 }
@@ -15,35 +14,36 @@ var iconMap = {
   info: {
     icon: /*#__PURE__*/React.createElement("div", {
       className: "ald-message-icon-wrap"
-    }, /*#__PURE__*/React.createElement(InfoCircleLine, {
-      fill: styles.B40
+    }, /*#__PURE__*/React.createElement(InformationCircleFill, {
+      color: 'var(--alias-colors-icon-information)',
+      size: 20
     })),
     type: 'info'
   },
   success: {
     icon: /*#__PURE__*/React.createElement("div", {
       className: "ald-message-icon-wrap"
-    }, /*#__PURE__*/React.createElement(CheckCircleDuotone, {
-      color: styles.ND0,
-      fill: styles.SA40
+    }, /*#__PURE__*/React.createElement(CheckCircleFill, {
+      color: 'var(--alias-colors-icon-success)',
+      size: 20
     })),
     type: 'success'
   },
   error: {
     icon: /*#__PURE__*/React.createElement("div", {
       className: "ald-message-icon-wrap"
-    }, /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
-      color: styles.ND0,
-      fill: styles.SC40
+    }, /*#__PURE__*/React.createElement(CloseCircleFill, {
+      color: 'var(--alias-colors-icon-danger)',
+      size: 20
     })),
     type: 'error'
   },
   warning: {
     icon: /*#__PURE__*/React.createElement("div", {
       className: "ald-message-icon-wrap"
-    }, /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
-      color: styles.ND0,
-      fill: styles.SB40
+    }, /*#__PURE__*/React.createElement(AttentionTriangleFill, {
+      color: 'var(--alias-colors-icon-warning)',
+      size: 20
     })),
     type: 'warning'
   },
@@ -51,7 +51,8 @@ var iconMap = {
     icon: /*#__PURE__*/React.createElement("div", {
       className: "ald-message-icon-wrap"
     }, /*#__PURE__*/React.createElement(LoadingLine, {
-      className: "ald-loading-spin"
+      className: "ald-loading-spin",
+      size: 20
     })),
     type: 'loading'
   }

package/dist/message/style/color.less

@@ -1,55 +1,36 @@
 // info
-.ant-message-notice-info{
-  .ant-message-custom-content{
-    background-color: @BG100;
-    color:@NL0;
-
-    .ald-message-icon-wrap{
-      background-color: @B95;
-    }
+.ant-message-notice-info {
+  .ant-message-custom-content {
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
+    color: var(--colors-gray-900, #171717);
+    border-radius: var(--alias-radius-75, 6px);
   }
 }
 // success
-.ant-message-notice-success{
-  .ant-message-custom-content{
-    background-color: @SA10;
-    color:@ND0;
-
-    .ald-message-icon-wrap{
-      background-color: @SA40;
-    }
+.ant-message-notice-success {
+  .ant-message-custom-content {
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
+    color: var(--global-colors-base-white-950a, #fff);
   }
 }
 // error
-.ant-message-notice-error{
-  .ant-message-custom-content{
-    background-color: @SC10;
-    color:@ND0;
-
-    .ald-message-icon-wrap{
-      background-color: @SC40;
-    }
+.ant-message-notice-error {
+  .ant-message-custom-content {
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
+    color: var(--global-colors-base-white-950a, #fff);
   }
 }
 // warning
-.ant-message-notice-warning{
-  .ant-message-custom-content{
-    background-color: @SB20;
-    color:@ND0;
-
-    .ald-message-icon-wrap{
-      background-color: @SB40;
-    }
+.ant-message-notice-warning {
+  .ant-message-custom-content {
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
+    color: var(--global-colors-base-white-950a, #fff);
   }
 }
 // loading
-.ant-message-notice-loading{
-  .ant-message-custom-content{
-    background-color: @BG100;
-    color:@NL0;
-
-    .ald-message-icon-wrap{
-      background-color: @B95;
-    }
+.ant-message-notice-loading {
+  .ant-message-custom-content {
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
+    color: var(--colors-gray-900, #171717);
   }
-}
+}

package/dist/message/style/index.less

@@ -1,32 +1,31 @@
 @import '../../style/index.less';
-@import './color.less';
 
 .ant-message .ant-message-notice {
   .ant-message-notice-content {
     padding: 0;
-    box-shadow: 0 12px 16px -4px rgb(16 24 40 / 0.08),
-      0 4px 6px -2px rgb(16 24 40 / 0.03);
+    border-radius: var(--alias-radius-75, 6px);
+    border: 1px solid var(--alias-colors-border-strong, #d1d5db);
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
+    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.04),
+      0 20px 25px -5px rgba(0, 0, 0, 0.1);
 
     .ant-message-custom-content {
-      padding: 0;
       display: flex;
+      overflow: hidden;
+      padding: var(--alias-padding-150-minus-1, 12px)
+        var(--alias-padding-200-minus-1, 16px);
       align-items: center;
-      border-radius: 4px;
-      padding-right: 16px;
-      font-size: 13px;
+      color: var(--alias-colors-text-default, #1f2937);
+      font-size: 14px;
+      font-weight: 500;
       line-height: 20px;
-      overflow: hidden;
-      font-weight: 600;
 
       .ald-message-icon-wrap {
+        display: grid;
+        place-items: center;
         flex-shrink: 0;
-        width: 40px;
-        height: 40px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 16px;
-        margin-right: 16px;
+        font-size: 20px;
+        margin-right: 6px;
       }
     }
   }

package/dist/notification/demo/footer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/notification/demo/footer.js

@@ -0,0 +1,44 @@
+import { App, Button, notification, Space, TextLink } from "../..";
+import React from 'react';
+export default (function () {
+  var notices = function notices(type) {
+    notification[type]({
+      message: 'Notification Message',
+      description: 'description,description,description,description,description,description,description,description',
+      style: {
+        width: 360,
+        maxHeight: 500,
+        overflow: 'auto'
+      },
+      footer: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          return console.log('Dismiss');
+        }
+      }, "Dismiss"), /*#__PURE__*/React.createElement(TextLink, {
+        onClick: function onClick() {
+          return console.log('Confirm');
+        }
+      }, "Confirm"))
+    });
+  };
+  return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('success');
+    }
+  }, "Notification success with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('error');
+    }
+  }, "Notification error with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('warning');
+    }
+  }, "Notification warning with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('info');
+    }
+  }, "Notification info with message\u3001description")));
+});

package/dist/notification/demo/index.js

@@ -6,6 +6,7 @@ export default (function () {
       message: 'Notification Message',
       description: 'description,description,description,description,description,description,description,description',
       style: {
+        width: 360,
         maxHeight: 500,
         overflow: 'auto'
       }

package/dist/notification/index.js

@@ -1,65 +1,58 @@
-var _excluded = ["icon", "closeIcon"],
-  _excluded2 = ["icon", "closeIcon"],
-  _excluded3 = ["icon", "closeIcon"],
-  _excluded4 = ["icon", "closeIcon"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["icon", "closeIcon", "description", "footer"],
+  _excluded2 = ["icon", "closeIcon", "description", "footer"],
+  _excluded3 = ["icon", "closeIcon", "description", "footer"],
+  _excluded4 = ["icon", "closeIcon", "description", "footer"];
 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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { notification as AntdNotification } from 'antd';
 import classnames from 'classnames';
 import React from 'react';
-import { AlertTriangleDuotone, CancelCircleDuotone, CheckCircleDuotone, CloseMLine, InfoCircleLine } from "../Icon";
+import { AttentionTriangleLightLine, CheckCircleLightLine, CloseCircleLightLine, CloseLLine, InformationCircleLightLine } from "../Icon";
 import theme from "../style/themes/default/themeColor.module.less";
 var iconMap = {
-  info: /*#__PURE__*/React.createElement(InfoCircleLine, {
-    fill: theme.B40,
-    size: 20
-  }),
-  success: /*#__PURE__*/React.createElement(CheckCircleDuotone, {
-    color: "#16B667",
-    fill: "#FFFFFF",
-    size: 20
-  }),
-  error: /*#__PURE__*/React.createElement(CancelCircleDuotone, {
-    color: "#D64343",
-    fill: "#FFFFFF",
-    size: 20
-  }),
-  warning: /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
+  info: /*#__PURE__*/React.createElement("div", {
+    className: "ald-notification-notice-icon-success"
+  }, /*#__PURE__*/React.createElement(InformationCircleLightLine, {
+    color: "#22C55E",
+    size: 24
+  })),
+  success: /*#__PURE__*/React.createElement("div", {
+    className: "ald-notification-notice-icon-success"
+  }, /*#__PURE__*/React.createElement(CheckCircleLightLine, {
+    color: 'var(--global-colors-green-600)',
+    size: 24
+  })),
+  error: /*#__PURE__*/React.createElement("div", {
+    className: "ald-notification-notice-icon-error"
+  }, /*#__PURE__*/React.createElement(CloseCircleLightLine, {
+    color: "#EF4444",
+    size: 24
+  })),
+  warning: /*#__PURE__*/React.createElement("div", {
+    className: "ald-notification-notice-icon-warning"
+  }, /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
     color: "#FFB01F",
-    fill: "#FFFFFF",
-    size: 20
-  })
+    size: 24
+  }))
 };
-var closeX = /*#__PURE__*/React.createElement(CloseMLine, {
+var closeX = /*#__PURE__*/React.createElement(CloseLLine, {
   size: 20,
-  color: theme.NL40
+  color: "#171717"
 });
-var getSDefaultStyle = function getSDefaultStyle(type) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    padding: '16px 24px',
-    background: theme.SC95,
-    border: '1px solid',
-    borderRadius: '4px',
-    boxShadow: theme.SHADOW_LG
-  }, type === 'error' && {
-    background: theme.SC95,
-    borderColor: theme.SC60
-  }), type === 'success' && {
-    background: theme.SA95,
-    borderColor: theme.SA60
-  }), type === 'warning' && {
-    background: theme.SB95,
-    borderColor: theme.SB60
-  }), type === 'info' && {
-    background: theme.B95,
-    borderColor: theme.B60
-  });
+var getSDefaultStyle = function getSDefaultStyle() {
+  return {
+    padding: '24px',
+    border: '1px solid #D1D5DB',
+    borderRadius: '2px',
+    boxShadow: theme.SHADOW_LG,
+    background: '#FFF'
+  };
 };
 var notification = {
   open: function open(config) {
@@ -70,12 +63,21 @@ var notification = {
       icon = _config$icon === void 0 ? iconMap.success : _config$icon,
       _config$closeIcon = config.closeIcon,
       closeIcon = _config$closeIcon === void 0 ? closeX : _config$closeIcon,
+      description = config.description,
+      footer = config.footer,
       rest = _objectWithoutProperties(config, _excluded);
     return AntdNotification.success(_objectSpread(_objectSpread({}, rest), {}, {
-      style: Object.assign({}, getSDefaultStyle('success'), config.style),
+      style: Object.assign({}, getSDefaultStyle(), config.style),
       className: classnames('ald-notification-notice', config.className),
       icon: icon,
-      closeIcon: closeIcon
+      closeIcon: closeIcon,
+      description: /*#__PURE__*/React.createElement("div", {
+        className: "ald-notification-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-desc'
+      }, description), footer && /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-footer'
+      }, footer))
     }));
   },
   error: function error(config) {
@@ -83,12 +85,21 @@ var notification = {
       icon = _config$icon2 === void 0 ? iconMap.error : _config$icon2,
       _config$closeIcon2 = config.closeIcon,
       closeIcon = _config$closeIcon2 === void 0 ? closeX : _config$closeIcon2,
+      description = config.description,
+      footer = config.footer,
       rest = _objectWithoutProperties(config, _excluded2);
     return AntdNotification.error(_objectSpread(_objectSpread({}, rest), {}, {
       className: classnames('ald-notification-notice', config.className),
-      style: Object.assign(getSDefaultStyle('error'), config.style),
+      style: Object.assign(getSDefaultStyle(), config.style),
       icon: icon,
-      closeIcon: closeIcon
+      closeIcon: closeIcon,
+      description: /*#__PURE__*/React.createElement("div", {
+        className: "ald-notification-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-desc'
+      }, description), footer && /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-footer'
+      }, footer))
     }));
   },
   warning: function warning(config) {
@@ -96,12 +107,21 @@ var notification = {
       icon = _config$icon3 === void 0 ? iconMap.warning : _config$icon3,
       _config$closeIcon3 = config.closeIcon,
       closeIcon = _config$closeIcon3 === void 0 ? closeX : _config$closeIcon3,
+      description = config.description,
+      footer = config.footer,
       rest = _objectWithoutProperties(config, _excluded3);
     return AntdNotification.warning(_objectSpread(_objectSpread({}, rest), {}, {
       className: classnames('ald-notification-notice', config.className),
-      style: Object.assign(getSDefaultStyle('warning'), config.style),
+      style: Object.assign(getSDefaultStyle(), config.style),
       icon: icon,
-      closeIcon: closeIcon
+      closeIcon: closeIcon,
+      description: /*#__PURE__*/React.createElement("div", {
+        className: "ald-notification-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-desc'
+      }, description), footer && /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-footer'
+      }, footer))
     }));
   },
   info: function info(config) {
@@ -109,12 +129,21 @@ var notification = {
       icon = _config$icon4 === void 0 ? iconMap.info : _config$icon4,
       _config$closeIcon4 = config.closeIcon,
       closeIcon = _config$closeIcon4 === void 0 ? closeX : _config$closeIcon4,
+      description = config.description,
+      footer = config.footer,
       rest = _objectWithoutProperties(config, _excluded4);
     return AntdNotification.info(_objectSpread(_objectSpread({}, rest), {}, {
       className: classnames('ald-notification-notice', config.className),
-      style: Object.assign(getSDefaultStyle('info'), config.style),
+      style: Object.assign(getSDefaultStyle(), config.style),
       icon: icon,
-      closeIcon: closeIcon
+      closeIcon: closeIcon,
+      description: /*#__PURE__*/React.createElement("div", {
+        className: "ald-notification-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-desc'
+      }, description), footer && /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-footer'
+      }, footer))
     }));
   },
   destroy: function destroy(key) {

package/dist/notification/style/index.less

@@ -2,28 +2,72 @@
 
 .ald-notification-notice.ant-notification-notice {
   .ant-notification-notice-icon {
-    top: 18px;
+    top: 24px;
   }
 
   .ant-notification-notice-message {
     margin-inline-start: 28px;
     padding-inline-end: 28px;
-    margin-bottom: 4px;
+    margin-bottom: 8px !important;
+    margin-left: 56px !important;
+    color: var(--alias-colors-text-strong, #111827);
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px; /* 155.556% */
   }
 
   .ant-notification-notice-description {
     margin-inline-start: 28px;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 20px;
-    color: @NL40;
+    padding-inline-end: 28px;
+    margin-bottom: 8px !important;
+    margin-left: 56px !important;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .ald-notification-desc {
+      color: var(--alias-colors-text-subtle, #4b5563);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+    }
   }
 
   .ant-notification-notice-close {
-    top: 17px;
+    top: 24px;
+    right: 24px;
+    width: fit-content;
+    height: fit-content;
 
-    &:hover{
-      background:none;
+    &:hover {
+      background: none;
     }
   }
 }
+
+.ald-notification-notice-icon-success,
+.ald-notification-notice-icon-error,
+.ald-notification-notice-icon-warning,
+.ald-notification-notice-icon-info {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+
+.ald-notification-notice-icon-success {
+  background: var(--alias-colors-bg-accent-green-subtle-default, #dcfce7);
+}
+
+.ald-notification-notice-icon-error {
+  background: var(--alias-colors-bg-accent-red-subtle-default, #fee2e2);
+}
+
+.ald-notification-notice-icon-warning {
+  background: var(--alias-colors-bg-accent-yellow-subtle-default, #fef9c3);
+}
+
+.ald-notification-notice-icon-info {
+  background: var(--alias-colors-bg-accent-blue-subtle-default, #d4e7fd);
+}

package/dist/style/index.less

@@ -1,4 +1,5 @@
 @root-entry-name: default;
+@import './var/default.css';
 @import './mixins/index.less';
 @import './core/index.less';
 @import './themes/default/scrollBar.less';

package/dist/style/themes/default/default.less

@@ -1,4 +1,4 @@
-@primary-color: @B40;
+@primary-color: #126fdd;
 
 // Animation
 @ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);

package/dist/style/themes/default/index.less

@@ -2,7 +2,7 @@
 @import './default.less';
 /* stylelint-disable-next-line at-rule-no-unknown */
 @font-family:inter, -apple-system, PingFang SC, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
-@ald-prefix: ant;
+@ald-prefix: ald;
 @error-color: #d64343;
 // large
 @font-size-large: 16px;
@@ -11,7 +11,7 @@
 @padding-bottom-large: 6px;
 @padding-left-large: 12px;
 @padding-right-large: 12px;
-@border-radius-large: 4px;
+@border-radius-large: 8px;
 
 // middle
 @font-size-middle: 13px;
@@ -20,7 +20,7 @@
 @padding-bottom-middle: 6px;
 @padding-left-middle: 12px;
 @padding-right-middle: 12px;
-@border-radius-middle: 2px;
+@border-radius-middle: 8px;
 
 // small
 @font-size-small: 12px;
@@ -29,4 +29,4 @@
 @padding-bottom-small: 6px;
 @padding-left-small: 8px;
 @padding-right-small: 8px;
-@border-radius-small: 2px;
+@border-radius-small: 8px;

package/dist/style/themes/default/scrollBar.less

@@ -1,7 +1,7 @@
 &::-webkit-scrollbar {
   width: 12px !important;
   height: 12px !important;
-  background: var(--colors-neutral-white, #fff);
+  background: var(--global-colors-base-white-950a, #fff);
   opacity: 0.5;
 }