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

package/dist/message/index.js

@@ -10,19 +10,19 @@ import { Slide, toast } from 'react-toastify';
 import { CheckCircleFill, CloseLLine, DangerFill, InformationCircleFill } from "../Icon";
 var closeX = /*#__PURE__*/React.createElement(CloseLLine, {
   size: 20,
-  color: "#6B7280"
+  color: "var(--alias-colors-icon-subtle)"
 });
 var iconMap = {
   info: /*#__PURE__*/React.createElement(InformationCircleFill, {
-    color: "#fff",
+    color: "var(--content-inverted-primary)",
     size: 20
   }),
   success: /*#__PURE__*/React.createElement(CheckCircleFill, {
-    color: "#fff",
+    color: "var(--content-inverted-primary)",
     size: 20
   }),
   error: /*#__PURE__*/React.createElement(DangerFill, {
-    color: "#fff",
+    color: "var(--content-inverted-primary)",
     size: 20
   })
 };

package/dist/message/style/index.less

@@ -5,8 +5,8 @@
   display: flex;
   align-items: center;
   padding: 0;
-  border-radius: var(--alias-radius-75, 6px);
-  background: var(--alias-colors-bg-skeleton-subtler, #fff);
+  border-radius: var(--alias-radius-75);
+  background: var(--alias-colors-bg-skeleton-subtler);
 
   & > svg {
     flex-shrink: 0;
@@ -35,17 +35,14 @@
         display: flex;
         align-items: center;
         padding: 12px;
-        color: var(--alias-colors-text-default, #1f2937);
+        color: var(--alias-colors-text-default);
         height: 52px;
         gap: 12px;
-        border-top-right-radius: var(--alias-radius-75, 6px);
-        border-bottom-right-radius: var(--alias-radius-75, 6px);
-        border-top: var(--alias-stroke-md, 1px) solid
-          var(--alias-colors-border-strong, #d1d5db);
-        border-bottom: var(--alias-stroke-md, 1px) solid
-          var(--alias-colors-border-strong, #d1d5db);
-        border-right: var(--alias-stroke-md, 1px) solid
-          var(--alias-colors-border-strong, #d1d5db);
+        border-top-right-radius: var(--alias-radius-75);
+        border-bottom-right-radius: var(--alias-radius-75);
+        border-top: var(--alias-stroke-md) solid var(--border-default-alpha);
+        border-bottom: var(--alias-stroke-md) solid var(--border-default-alpha);
+        border-right: var(--alias-stroke-md) solid var(--border-default-alpha);
       }
     }
   }
@@ -53,7 +50,7 @@
   &.ald-message-success {
     .ald-message-content {
       .ald-message-icon-wrap {
-        background: var(--alias-colors-bg-accent-green-strong, #22c55e);
+        background: var(--alias-colors-bg-accent-green-strong);
       }
     }
   }
@@ -61,7 +58,7 @@
   &.ald-message-info {
     .ald-message-content {
       .ald-message-icon-wrap {
-        background: var(--alias-colors-bg-accent-blue-strong, #2986f4);
+        background: var(--alias-colors-bg-accent-blue-strong);
       }
     }
   }
@@ -69,7 +66,7 @@
   &.ald-message-error {
     .ald-message-content {
       .ald-message-icon-wrap {
-        background: var(--alias-colors-bg-accent-red-strong, #ef4444);
+        background: var(--alias-colors-bg-accent-red-strong);
       }
     }
   }

package/dist/notification/index.js

@@ -17,7 +17,7 @@ import { Slide, toast } from 'react-toastify';
 import { AttentionTriangleFill, CheckCircleFill, CloseLLine, DangerFill, InformationCircleFill } from "../Icon";
 var closeX = /*#__PURE__*/React.createElement(CloseLLine, {
   size: 20,
-  color: "#6B7280"
+  color: "var(--alias-colors-icon-subtle)"
 });
 var DEFAULT_DURATION_TIME = 4500;
 var defaultOptions = {
@@ -39,25 +39,25 @@ var iconMap = {
   info: /*#__PURE__*/React.createElement("div", {
     className: "ald-notification-notice-icon"
   }, /*#__PURE__*/React.createElement(InformationCircleFill, {
-    color: "var(--alias-colors-icon-information ,#2986F4)",
+    color: "var(--alias-colors-icon-information)",
     size: 24
   })),
   success: /*#__PURE__*/React.createElement("div", {
     className: "ald-notification-notice-icon"
   }, /*#__PURE__*/React.createElement(CheckCircleFill, {
-    color: "var(--alias-colors-icon-success ,#22C55E)",
+    color: "var(--alias-colors-icon-success)",
     size: 24
   })),
   error: /*#__PURE__*/React.createElement("div", {
     className: "ald-notification-notice-icon"
   }, /*#__PURE__*/React.createElement(DangerFill, {
-    color: "var(--alias-colors-icon-error ,#EF4444)",
+    color: "var(--alias-colors-icon-error)",
     size: 24
   })),
   warning: /*#__PURE__*/React.createElement("div", {
     className: "ald-notification-notice-icon"
   }, /*#__PURE__*/React.createElement(AttentionTriangleFill, {
-    color: "var(--alias-colors-icon-warning ,#EAB308)",
+    color: "var(--alias-colors-icon-warning)",
     size: 24
   }))
 };

package/dist/notification/style/index.less

@@ -4,13 +4,12 @@
 .ald-notification {
   width: 360px;
   padding: 16px;
-  background: var(--alias-colors-bg-skeleton-subtler, #fff);
-  border-radius: var(--alias-radius-75, 6px);
-  border: 1px solid var(--alias-colors-border-strong, #d1d5db);
+  background: var(--alias-colors-bg-skeleton-subtler);
+  border-radius: var(--alias-radius-75);
+  border: 1px solid var(--border-default-alpha);
 
   /* shadow/shadow-xl */
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05),
-    0 8px 10px -6px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--elevation-bottom-bottom-xl);
 
   & > svg {
     flex-shrink: 0;
@@ -34,7 +33,7 @@
       gap: 4px;
 
       .ald-notification-message {
-        color: var(--alias-colors-text-default, #1f2937);
+        color: var(--alias-colors-text-default);
         text-align: justify;
         font-size: 18px;
         font-style: normal;
@@ -43,7 +42,7 @@
       }
 
       .ald-notification-description {
-        color: var(--alias-colors-text-subtle, #4b5563);
+        color: var(--alias-colors-text-subtle);
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

package/dist/style/components/toastify.css

@@ -1,12 +1,12 @@
 /* stylelint-disable selector-class-pattern, keyframes-name-pattern */
 :root {
-  --toastify-color-light: #fff;
-  --toastify-color-dark: #121212;
-  --toastify-color-info: #3498db;
-  --toastify-color-success: #07bc0c;
-  --toastify-color-warning: #f1c40f;
-  --toastify-color-error: #e74c3c;
-  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
+  --toastify-color-light: var(--background-default);
+  --toastify-color-dark: var(--background-inverted);
+  --toastify-color-info: var(--background-informative-strong);
+  --toastify-color-success: var(--background-positive-strong);
+  --toastify-color-warning: var(--background-warning-strong);
+  --toastify-color-error: var(--background-negative-strong);
+  --toastify-color-transparent: var(--global-white-alpha-800);
   --toastify-icon-color-info: var(--toastify-color-info);
   --toastify-icon-color-success: var(--toastify-color-success);
   --toastify-icon-color-warning: var(--toastify-color-warning);
@@ -29,30 +29,30 @@
     var(--toastify-toast-offset),
     env(safe-area-inset-bottom)
   );
-  --toastify-toast-background: #fff;
+  --toastify-toast-background: var(--background-default);
   --toastify-toast-min-height: 48px;
   --toastify-toast-max-height: 800px;
   --toastify-toast-bd-radius: 6px;
   --toastify-font-family: sans-serif;
   --toastify-z-index: 9999;
-  --toastify-text-color-light: #757575;
-  --toastify-text-color-dark: #fff;
-  --toastify-text-color-info: #fff;
-  --toastify-text-color-success: #fff;
-  --toastify-text-color-warning: #fff;
-  --toastify-text-color-error: #fff;
-  --toastify-spinner-color: #616161;
-  --toastify-spinner-color-empty-area: #e0e0e0;
+  --toastify-text-color-light: var(--content-secondary);
+  --toastify-text-color-dark: var(--content-inverted-primary);
+  --toastify-text-color-info: var(--content-inverted-primary);
+  --toastify-text-color-success: var(--content-inverted-primary);
+  --toastify-text-color-warning: var(--content-inverted-primary);
+  --toastify-text-color-error: var(--content-inverted-primary);
+  --toastify-spinner-color: var(--alias-colors-icon-subtle);
+  --toastify-spinner-color-empty-area: var(--border-default);
   --toastify-color-progress-light: linear-gradient(
     to right,
-    #4cd964,
-    #5ac8fa,
-    #007aff,
-    #34aadc,
-    #5856d6,
-    #ff2d55
+    var(--data-visualisation-graphical-teal),
+    var(--data-visualisation-graphical-cyan),
+    var(--data-visualisation-graphical-blue),
+    var(--data-visualisation-graphical-violet),
+    var(--data-visualisation-graphical-pink),
+    var(--data-visualisation-graphical-orange)
   );
-  --toastify-color-progress-dark: #bb86fc;
+  --toastify-color-progress-dark: var(--data-visualisation-graphical-purple);
   --toastify-color-progress-info: var(--toastify-color-info);
   --toastify-color-progress-success: var(--toastify-color-success);
   --toastify-color-progress-warning: var(--toastify-color-warning);
@@ -65,7 +65,7 @@
   transform: translate3d(0, 0, var(--toastify-z-index));
   position: fixed;
   box-sizing: border-box;
-  color: #fff;
+  color: var(--content-inverted-primary);
 }
 
 .Toastify__toast-container--top-left {
@@ -137,7 +137,7 @@
   box-sizing: border-box;
   margin-bottom: 1rem;
   border-radius: var(--toastify-toast-bd-radius);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px var(--semantic-neutral-alpha-100);
   display: flexbox;
   display: flex;
   -ms-flex-pack: justify;
@@ -323,7 +323,7 @@
 }
 
 .Toastify__close-button {
-  color: #fff;
+  color: var(--content-inverted-primary);
   background: transparent;
   outline: none;
   border: none;
@@ -337,7 +337,7 @@
 }
 
 .Toastify__close-button--light {
-  color: #000;
+  color: var(--content-primary);
   opacity: 0.3;
 }
 

package/dist/style/index.less

@@ -16,7 +16,7 @@ body {
 }
 
 .ald-icon {
-  color: #6b7280;
+  color: var(--content-secondary);
 }
 
 .rc-virtual-list {
@@ -24,7 +24,7 @@ body {
     width: 6px !important;
 
     .rc-virtual-list-scrollbar-thumb {
-      background: #575757 !important;
+      background: var(--background-neutral-strong) !important;
       opacity: 0.2 !important;
     }
   }

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

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

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

@@ -5,7 +5,7 @@
 'Helvetica Neue', 'Segoe UI', helvetica, arial, 'Microsoft YaHei',
 'WenQuanYi Micro Hei', sans-serif;
 @ald-prefix: ald;
-@error-color: #d64343;
+@error-color: var(--semantic-negative-600);
 // large
 @font-size-large: 16px;
 @line-height-large: 24px;

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

@@ -1,17 +1,21 @@
 &::-webkit-scrollbar {
   width: 12px !important;
   height: 12px !important;
-  background: var(--global-colors-base-white-950a, #fff);
+  background: var(--background-default);
   opacity: 0.5;
 }
 
 &::-webkit-scrollbar-thumb {
-  background-color: rgb(152 162 179 / 0.5);
-  border: 3px solid transparent;
+  background-color: color-mix(
+    in srgb,
+    var(--semantic-neutral-600) 50%,
+    var(--alias-colors-icon-transp)
+  );
+  border: 3px solid var(--alias-colors-icon-transp);
   border-radius: 6px;
   background-clip: padding-box;
 }
 
 &::-webkit-scrollbar-track {
-  background-color: transparent;
+  background-color: var(--alias-colors-icon-transp);
 }