@aloudata/aloudata-design 2.18.2 → 2.19.0-beta.1

package/dist/Menu/style/index.less

@@ -9,14 +9,14 @@
 
 .menuContainerStyle {
   display: flex;
-  padding: var(--alias-padding-50minus1, 4px) 0;
+  padding: var(--alias-padding-50-minus-1) 0;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
-  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 18px -2px #00000014;
+  border-radius: var(--alias-radius-75);
+  border: 1px solid var(--global-cool-gray-alpha-100);
+  background: var(--interaction-background-modeless);
+  box-shadow: var(--elevation-bottom-bottom-lg);
   min-width: @menu-width;
   font-size: 14px;
   z-index: 1001;
@@ -44,19 +44,19 @@
 
   .szh-menu__item {
     display: flex;
-    padding: var(--alias-padding-100minus1, 8px) var(--alias-padding-150, 12px)
-      var(--alias-padding-100, 8px) var(--alias-padding-150, 12px);
+    padding: var(--alias-padding-100-minus-1) var(--alias-padding-150)
+      var(--alias-padding-100) var(--alias-padding-150);
     align-items: center;
-    gap: var(--alias-spacing-75, 6px);
+    gap: var(--alias-spacing-75);
     align-self: stretch;
-    background: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
+    background: var(--alias-colors-bg-transp);
     width: 100%;
     line-height: 20px;
     cursor: pointer;
   }
 
   .szh-menu__item--hover {
-    background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
+    background: var(--alias-colors-bg-interaction-hover);
   }
 
   .szh-menu__submenu {
@@ -64,12 +64,13 @@
   }
 
   .szh-menu__item--disabled {
-    color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
+    color: var(--content-primary);
+    opacity: 0.4;
     cursor: default;
 
     .ald-menu-item-label-icon,
     &.ald-menu-item-selected {
-      color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
+      color: var(--content-primary);
     }
   }
 
@@ -87,18 +88,18 @@
       left: 0;
       right: 0;
       height: 1px;
-      background: var(--alias-colors-border-subtle, #f3f4f6);
+      background: var(--alias-colors-border-subtle);
     }
   }
 
   .ald-menu-item-danger {
-    color: #b91c1c;
+    color: var(--alias-colors-text-danger);
   }
 
   .ald-menu-item-label {
     display: flex;
     width: 100%;
-    gap: var(--alias-spacing-75, 6px);
+    gap: var(--alias-spacing-75);
     justify-content: space-between;
   }
 
@@ -117,12 +118,12 @@
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    color: #9ca3af;
-    gap: var(--alias-spacing-75, 6px);
+    color: var(--alias-colors-text-subtlest);
+    gap: var(--alias-spacing-75);
   }
 
   .ald-menu-item-selected {
-    color: #126fdd;
+    color: var(--alias-colors-text-selected);
   }
 
   .ald-menu-item-selected-icon {
@@ -135,9 +136,9 @@
   }
 
   .szh-menu__header {
-    padding: var(--alias-padding-100, 8px) var(--alias-padding-150, 12px)
-      var(--alias-padding-50, 4px) var(--alias-padding-150, 12px);
-    color: var(--alias-colors-text-subtlest, #9ca3af);
+    padding: var(--alias-padding-100) var(--alias-padding-150)
+      var(--alias-padding-50) var(--alias-padding-150);
+    color: var(--alias-colors-text-subtlest);
     line-height: 16px;
     font-size: 12px;
     cursor: default;

package/dist/Modal/index.js

@@ -70,22 +70,22 @@ var ModalTitle = function ModalTitle(_ref, type) {
 };
 function getIcon(type) {
   if (type === 'success') return /*#__PURE__*/React.createElement(CheckCircleLightLine, {
-    fill: "#fff",
-    color: "#22C55E",
+    fill: "var(--content-inverted-primary)",
+    color: "var(--background-positive-strong)",
     size: 24
   });
   if (type === 'error') return /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
-    color: "#EF4444",
-    fill: '#fff',
+    color: "var(--background-negative-strong)",
+    fill: 'var(--content-inverted-primary)',
     size: 24
   });
   if (type === 'warning') return /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
-    color: "#EAB308",
+    color: "var(--background-warning-strong)",
     size: 24
   });
   return /*#__PURE__*/React.createElement(InformationCircleLightLine, {
     size: 24,
-    color: '#2986F4',
+    color: 'var(--interaction-default-normal)',
     className: "ald-modal-close"
   });
 }
@@ -201,7 +201,7 @@ Modal.info = function infoFn(props) {
     title: ModalTitle({
       icon: /*#__PURE__*/React.createElement(InformationCircleLightLine, {
         size: 24,
-        color: '#2986F4'
+        color: 'var(--interaction-default-normal)'
       }),
       title: title,
       subTitle: subTitle
@@ -230,8 +230,8 @@ Modal.success = function successFn(props) {
     className: classNames('ald-modal', className),
     title: ModalTitle({
       icon: /*#__PURE__*/React.createElement(CheckCircleLightLine, {
-        fill: "#fff",
-        color: "#22C55E",
+        fill: "var(--content-inverted-primary)",
+        color: "var(--background-positive-strong)",
         size: 24
       }),
       title: title,
@@ -261,8 +261,8 @@ Modal.error = function errorFn(props) {
     className: classNames('ald-modal', className),
     title: ModalTitle({
       icon: /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
-        color: "#EF4444",
-        fill: '#fff',
+        color: "var(--background-negative-strong)",
+        fill: 'var(--content-inverted-primary)',
         size: 24
       }),
       title: title,
@@ -293,7 +293,7 @@ Modal.warning = function modalWarn(props) {
     className: classNames('ald-modal ald-modal-warning', className),
     title: ModalTitle({
       icon: /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
-        color: "#EAB308",
+        color: "var(--background-warning-strong)",
         size: 24
       }),
       title: title,

package/dist/Modal/style/modal.less

@@ -8,32 +8,31 @@
 
   .ant-modal-content {
     padding: 0;
-    border-radius: var(--alias-radius-75, 6px);
-    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);
+    border-radius: var(--alias-radius-75);
+    background: var(--alias-colors-bg-skeleton-subtler);
+    box-shadow: var(--elevation-bottom-bottom-lg);
     overflow: hidden;
 
     .ant-modal-close {
       width: 24px;
       height: 24px;
-      top: var(--alias-spacing-200, 16px);
-      right: var(--alias-spacing-250, 20px);
+      top: var(--alias-spacing-200);
+      right: var(--alias-spacing-250);
 
       .ant-modal-close-x {
-        background-color: #fff;
+        background-color: var(--background-default);
       }
     }
 
     .ant-modal-header {
-      padding: var(--alias-spacing-200, 16px) var(--alias-padding-300, 24px);
+      padding: var(--alias-spacing-200) var(--alias-padding-300);
       margin-bottom: 0;
-      border-bottom: 1px solid var(--alias-colors-border-default, #e5e7eb);
-      background: var(--alias-colors-bg-skeleton-subtler, #fff);
+      border-bottom: 1px solid var(--alias-colors-border-default);
+      background: var(--alias-colors-bg-skeleton-subtler);
 
       .ant-modal-title {
         width: 95%;
-        color: var(--alias-colors-text-strong, #111827);
+        color: var(--alias-colors-text-strong);
         font-weight: 600;
         font-size: 16px;
         line-height: 24px;
@@ -41,7 +40,7 @@
         .ald-modal-title-container {
           display: flex;
           align-items: center;
-          gap: var(--alias-spacing-100, 8px);
+          gap: var(--alias-spacing-100);
 
           .ald-modal-text-container {
             display: flex;
@@ -50,7 +49,7 @@
             gap: 4px;
 
             .ald-modal-text-title {
-              color: var(--alias-colors-text-strong, #111827);
+              color: var(--alias-colors-text-strong);
               font-weight: 600;
               font-size: 18px;
               line-height: 28px;
@@ -61,7 +60,7 @@
             }
 
             .ald-modal-text-sub-title {
-              color: var(--alias-colors-text-subtle, #4b5563);
+              color: var(--alias-colors-text-subtle);
               font-size: 12px;
               font-weight: 400;
               line-height: 16px;
@@ -77,15 +76,15 @@
       line-height: 20px;
       font-size: 14px;
       overflow-y: auto;
-      padding: var(--alias-padding-300, 24px);
+      padding: var(--alias-padding-300);
     }
 
     .ant-modal-footer {
       position: relative;
       margin-top: 0;
-      padding: var(--alias-spacing-150, 12px) var(--alias-padding-300, 24px);
-      border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
-      background: var(--alias-colors-bg-skeleton-subtler, #fff);
+      padding: var(--alias-spacing-150) var(--alias-padding-300);
+      border-top: 1px solid var(--alias-colors-border-default);
+      background: var(--alias-colors-bg-skeleton-subtler);
 
       .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
         margin-bottom: 0;

package/dist/Modal/style/modalConfirm.less

@@ -16,48 +16,33 @@
             .ald-modal-title-container {
               display: flex;
               align-items: center;
-              gap: var(--alias-spacing-200, 16px);
+              gap: var(--alias-spacing-200);
 
               .ald-modal-icon-container {
                 display: grid;
                 place-items: center;
                 width: 40px;
                 height: 40px;
-                border-radius: var(--global-grid-250, 20px);
+                border-radius: var(--global-grid-250);
 
                 &.ald-modal-cion-info-container {
-                  background: var(
-                    --alias-colors-bg-accent-blue-subtle-default,
-                    #d4e7fd
-                  );
+                  background: var(--action-primary-subtle-hover);
                 }
 
                 &.ald-modal-cion-warning-container {
-                  background: var(
-                    --alias-colors-bg-accent-yellow-subtle-default,
-                    #fef9c3
-                  );
+                  background: var(--background-warning-muted);
                 }
 
                 &.ald-modal-cion-success-container {
-                  background: var(
-                    --alias-colors-bg-accent-green-subtle-default,
-                    #dcfce7
-                  );
+                  background: var(--background-positive-muted);
                 }
 
                 &.ald-modal-cion-confirm-container {
-                  background: var(
-                    --alias-colors-bg-accent-blue-subtle-default,
-                    #d4e7fd
-                  );
+                  background: var(--action-primary-subtle-hover);
                 }
 
                 &.ald-modal-cion-error-container {
-                  background: var(
-                    --alias-colors-bg-accent-red-subtle-default,
-                    #fee2e2
-                  );
+                  background: var(--background-negative-muted);
                 }
               }
 
@@ -65,11 +50,11 @@
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;
-                gap: var(--alias-spacing-100, 8px);
+                gap: var(--alias-spacing-100);
                 flex: 1 0 0;
 
                 .ald-modal-text-title {
-                  color: var(--alias-colors-text-strong, #111827);
+                  color: var(--alias-colors-text-strong);
                   font-size: 18px;
                   font-weight: 600;
                   line-height: 28px;
@@ -80,7 +65,7 @@
                 }
 
                 .ald-modal-text-sub-title {
-                  color: var(--alias-colors-text-subtle, #4b5563);
+                  color: var(--alias-colors-text-subtle);
                   font-size: 12px;
                   font-weight: 400;
                   line-height: 20px;
@@ -90,7 +75,7 @@
           }
 
           .ant-modal-confirm-content {
-            margin-top: var(--alias-spacing-100, 8px);
+            margin-top: var(--alias-spacing-100);
             margin-left: 56px;
           }
         }

package/dist/Modal/style/polyfill/index.less

@@ -9,7 +9,7 @@
   inset-inline-start: 0;
   z-index: 1000;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.45);
+  background-color: var(--interaction-background-default-dimmer);
 }
 
 .ant-modal-wrap {
@@ -25,7 +25,7 @@
   box-sizing: border-box;
   margin: 0 auto;
   padding: 0;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--alias-colors-text-default);
   font-size: 14px;
   line-height: 1.5714;
   list-style: none;
@@ -39,7 +39,7 @@
 
 .ant-modal-content {
   position: relative;
-  background-color: #fff;
+  background-color: var(--background-default);
   background-clip: padding-box;
   pointer-events: auto;
 }

package/dist/Pagination/style/index.less

@@ -11,10 +11,9 @@
   &,
   &:focus,
   &:hover {
-    border: 1px solid
-      var(--alias-colors-border-accent-blue-subtle-default, #7fb6f8);
-    color: var(--alias-colors-border-accent-blue-subtle-default, #7fb6f8);
-    background-color: var(--alias-colors-bg-selected-default, #e8f2fe);
+    border: 1px solid var(--alias-colors-border-accent-blue-strong);
+    color: var(--alias-colors-text-selected);
+    background-color: var(--alias-colors-bg-selected-default);
   }
 }
 

package/dist/Popconfirm/index.js

@@ -17,8 +17,8 @@ function MyPopconfirm(props) {
     _props$icon = props.icon,
     icon = _props$icon === void 0 ? /*#__PURE__*/React.createElement(AttentionTriangleFill, {
       size: 16,
-      color: "#D64343",
-      fill: "#fff"
+      color: 'var(--action-destructive-normal)',
+      fill: 'var(--action-inverted-normal)'
     }) : _props$icon,
     restProps = _objectWithoutProperties(props, _excluded);
   function getButtonProps(buttonProps, defaultBtnType) {

package/dist/Popconfirm/style/index.less

@@ -14,7 +14,7 @@
     position: absolute;
     left: 4px;
     height: 10px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--border-default-alpha);
     transform: rotate(45deg);
     clip-path: none;
   }
@@ -22,7 +22,7 @@
   &.ant-popover[class] .ant-popover-arrow::after {
     content: '';
     width: 15px;
-    background-color: #fff;
+    background-color: var(--background-default);
     display: inline-block;
     bottom: -11px;
     position: absolute;
@@ -36,9 +36,9 @@
 .ald-pop-confirm.ant-popover.ant-popover .ant-popover-inner {
   width: 240px;
   padding: 12px;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--border-default-alpha);
   border-radius: 6px;
-  box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--elevation-bottom-bottom-md);
 
   .ant-popover-inner-content {
     .ant-popconfirm-message {
@@ -66,7 +66,7 @@
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
-    color: var(--alias-colors-text-default, #1f2937);
+    color: var(--alias-colors-text-default);
     margin-inline-start: 4px;
     margin-left: 8px !important;
     width: 190px;
@@ -76,6 +76,6 @@
 
 .ald-pop-confirm.ant-popover.ant-popover .ant-popover-arrow {
   &::after {
-    box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--elevation-bottom-bottom-md);
   }
 }

package/dist/Popover/style/index.less

@@ -1,15 +1,15 @@
 @import '../../style/index.less';
 
 .ald-popover {
-  border-radius: var(--alias-radius-75, 6px) !important;
-  border: 1px solid var(--alias-colors-border-strong, #d1d5db) !important;
-  background: var(--alias-colors-bg-skeleton-subtler, #fff) !important;
+  border-radius: var(--alias-radius-75) !important;
+  border: 1px solid var(--border-default-alpha) !important;
+  background: var(--alias-colors-bg-skeleton-subtler) !important;
 
   /* shadow/shadow-sm */
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--elevation-bottom-bottom-sm) !important;
 
   .ant-popover-inner {
-    border-radius: var(--alias-radius-75, 6px) !important;
+    border-radius: var(--alias-radius-75) !important;
   }
 
   &.ant-popover[class] .ant-popover-arrow::before {
@@ -20,8 +20,8 @@
     position: absolute;
     left: 4px;
     height: 10px;
-    border: 1px solid var(--alias-colors-border-strong, #d1d5db);
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    border: 1px solid var(--border-default-alpha);
+    box-shadow: var(--elevation-bottom-bottom-sm) !important;
     transform: rotate(45deg);
     clip-path: none;
   }
@@ -29,7 +29,7 @@
   &.ant-popover[class] .ant-popover-arrow::after {
     content: '';
     width: 15px;
-    background-color: #fff;
+    background-color: var(--background-default);
     display: inline-block;
     bottom: -10px;
     position: absolute;

package/dist/Progress/style/index.less

@@ -7,14 +7,11 @@
   pointer-events: none;
 
   &-show-bg {
-    background-color: var(
-      --alias-colors-bg-accent-blue-subtle-default,
-      #d4e7fd
-    );
+    background-color: var(--interaction-neutral-subtle-normal);
   }
 
   &-inner {
-    background-color: var(--alias-colors-icon-information, #2986f4);
+    background-color: var(--interaction-default-normal);
     border-radius: 2px 0 0;
     height: 100%;
     width: 0;