@aloudata/aloudata-design 2.18.4 → 2.19.0-beta.2

package/dist/Tag/index.js

@@ -22,8 +22,40 @@ export default function Tag(props) {
     maxWidth = props.maxWidth,
     className = props.className,
     title = props.title;
-  var tagColor = getColor(color, status);
-  var bgColor = mode === 'border' ? '#fff' : convertHexToRGBA(tagColor, mode === 'fill' ? 0.16 : 0.06);
+  var tokens = getStatusTokens(status);
+  var providedIsHex = isHexColor(color);
+  var providedColor = color;
+
+  // background color
+  var bgColor = function () {
+    if (mode === 'border') {
+      return 'var(--background-default)';
+    }
+    if (providedColor) {
+      if (providedIsHex) return convertHexToRGBA(providedColor, mode === 'fill' ? 0.16 : 0.06);
+      // CSS var or named color -> mix to achieve subtle transparency
+      return "color-mix(in srgb, ".concat(providedColor, " ").concat(mode === 'fill' ? 16 : 6, "%, transparent)");
+    }
+    // use status tokens
+    return mode === 'fill' ? tokens.bgSubtle : tokens.bgOnSubtle;
+  }();
+  // text color
+  var textColor = function () {
+    if (providedColor) {
+      if (providedIsHex) return convertHexToRGBA(providedColor, 1);
+      return providedColor;
+    }
+    return tokens.text;
+  }();
+  // border color
+  var borderColor = function () {
+    if (mode === 'fill') return 'transparent';
+    if (providedColor) {
+      if (providedIsHex) return convertHexToRGBA(providedColor, 0.32);
+      return "color-mix(in srgb, ".concat(providedColor, " 32%, transparent)");
+    }
+    return tokens.borderSubtle;
+  }();
   var onTagClick = useCallback(function (e) {
     if (disabled) {
       return;
@@ -42,8 +74,8 @@ export default function Tag(props) {
     className: classNames(prefixCls('container'), (_classNames = {}, _defineProperty(_classNames, prefixCls('small'), size === 'small'), _defineProperty(_classNames, prefixCls('large'), size === 'large'), _defineProperty(_classNames, prefixCls('disabled'), disabled), _classNames), className || ''),
     style: {
       backgroundColor: bgColor,
-      color: convertHexToRGBA(tagColor, 1),
-      borderColor: mode === 'fill' ? 'transparent' : convertHexToRGBA(tagColor, 0.32),
+      color: textColor,
+      borderColor: borderColor,
       maxWidth: maxWidth || DEFAULT_MAX_WIDTH
     },
     onClick: onTagClick
@@ -58,26 +90,10 @@ export default function Tag(props) {
     className: prefixCls('close-btn'),
     onClick: onCloseBtnClick
   }, /*#__PURE__*/React.createElement(CloseLightLine, {
-    color: tagColor,
+    color: textColor,
     size: 16
   })) : null);
 }
-function getColor(color, status) {
-  if (color) {
-    return color;
-  }
-  var status2ColorMap = {
-    success: '#15803D',
-    info: '#126FDD',
-    warning: '#A16207',
-    error: '#B91C1C',
-    default: '#374151'
-  };
-  if (status) {
-    return status2ColorMap[status];
-  }
-  return status2ColorMap['info'];
-}
 var ALD_PREFIX = 'ald-tag';
 export function prefixCls(className) {
   return "".concat(ALD_PREFIX, "-").concat(className);
@@ -88,4 +104,48 @@ function convertHexToRGBA(hex, opacity) {
   var g = parseInt(tempHex.substring(2, 4), 16);
   var b = parseInt(tempHex.substring(4, 6), 16);
   return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(opacity, ")");
+}
+function isHexColor(value) {
+  return !!value && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value);
+}
+function getStatusTokens(status) {
+  // Map status to CSS variables defined in default.css
+  switch (status) {
+    case 'success':
+      return {
+        text: 'var(--alias-colors-text-success)',
+        bgSubtle: 'var(--background-positive-subtle)',
+        bgOnSubtle: 'var(--background-positive-on-subtle)',
+        borderSubtle: 'var(--border-positive-subtle)'
+      };
+    case 'warning':
+      return {
+        text: 'var(--alias-colors-text-warning)',
+        bgSubtle: 'var(--background-warning-subtle)',
+        bgOnSubtle: 'var(--background-warning-on-subtle)',
+        borderSubtle: 'var(--border-warning-subtle)'
+      };
+    case 'error':
+      return {
+        text: 'var(--alias-colors-text-danger)',
+        bgSubtle: 'var(--background-negative-subtle)',
+        bgOnSubtle: 'var(--background-negative-on-subtle)',
+        borderSubtle: 'var(--border-negative-subtle)'
+      };
+    case 'default':
+      return {
+        text: 'var(--alias-colors-text-default)',
+        bgSubtle: 'var(--background-neutral-subtle)',
+        bgOnSubtle: 'var(--background-neutral-on-subtle)',
+        borderSubtle: 'var(--border-neutral-subtle)'
+      };
+    case 'info':
+    default:
+      return {
+        text: 'var(--alias-colors-text-information)',
+        bgSubtle: 'var(--background-informative-subtle)',
+        bgOnSubtle: 'var(--background-informative-on-subtle)',
+        borderSubtle: 'var(--border-informative-subtle)'
+      };
+  }
 }

package/dist/Tag/style/index.less

@@ -4,13 +4,14 @@
   display: inline-flex;
   padding: 1px 5px;
   align-items: center;
-  column-gap: var(--alias-spacing-50, 4px);
+  column-gap: var(--alias-spacing-50);
   border-width: 1px;
   border-style: solid;
-  border-radius: var(--alias-radius-50, 4px);
+  border-radius: var(--alias-radius-50);
   font-size: 14px;
   line-height: 20px;
   overflow: hidden;
+  cursor: default;
 
   /** 尺寸 **/
   &.ald-tag-small {

package/dist/TextLink/style/type.less

@@ -1,63 +1,63 @@
 .ald-text-link-primary {
-  color: var(--alias-colors-link-default, #126fdd);
+  color: var(--alias-colors-link-default);
 
   .ald-icon {
-    color: #2986f4;
+    color: var(--interaction-default-hover);
   }
 
   &:hover {
-    color: var(--alias-colors-link-hover, #0f59b1);
+    color: var(--alias-colors-link-hover);
 
     .ald-icon {
-      color: #126fdd;
+      color: var(--interaction-default-selected);
     }
   }
 
   &:active {
-    color: var(--alias-colors-link-hover, #0f59b1);
+    color: var(--alias-colors-link-hover);
 
     .ald-icon {
-      color: #126fdd;
+      color: var(--interaction-default-selected);
     }
   }
 
   &.ald-text-link-disabled {
-    color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
+    color: var(--alias-colors-text-disabled);
 
     .ald-icon {
-      color: rgba(0, 0, 0, 0.25);
+      color: var(--alias-colors-icon-disabled);
     }
   }
 }
 
 .ald-text-link-secondary {
-  color: var(--alias-colors-text-default, #1f2937);
+  color: var(--alias-colors-text-default);
 
   .ald-icon {
-    color: #6b7280;
+    color: var(--alias-colors-icon-subtle);
   }
 
   &:hover {
-    color: var(--alias-colors-text-selected, #126fdd);
+    color: var(--alias-colors-text-selected);
 
     .ald-icon {
-      color: #2986f4;
+      color: var(--interaction-default-hover);
     }
   }
 
   &:active {
-    color: var(--alias-colors-text-selected, #126fdd);
+    color: var(--alias-colors-text-selected);
 
     .ald-icon {
-      color: #126fdd;
+      color: var(--interaction-default-selected);
     }
   }
 
   &.ald-text-link-disabled {
-    color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
+    color: var(--alias-colors-text-disabled);
 
     .ald-icon {
-      color: rgba(0, 0, 0, 0.25);
+      color: var(--alias-colors-icon-disabled);
     }
   }
 }

package/dist/Tooltip/style/index.less

@@ -4,22 +4,22 @@
   .ant-tooltip-inner {
     padding: 6px 8px;
     line-height: 16px;
-    background: var(--alias-colors-bg-skeleton-inverse-subtler, #111827);
-    border-radius: var(--alias-radius-50, 4px);
+    background: var(--alias-colors-bg-skeleton-inverse-subtler);
+    border-radius: var(--alias-radius-50);
     box-shadow: none;
     font-weight: 400;
     font-size: 12px;
     min-height: 28px;
-    color: var(--alias-colors-text-inverse-strong, #fff);
+    color: var(--alias-colors-text-inverse-strong);
   }
 
   .ant-tooltip-arrow {
     &::before {
-      background: var(--alias-colors-bg-skeleton-inverse-subtler, #111827);
+      background: var(--alias-colors-bg-skeleton-inverse-subtler);
     }
   }
 
   .ant-tooltip-arrow-content {
-    background: var(--alias-colors-bg-skeleton-inverse-subtler, #111827);
+    background: var(--alias-colors-bg-skeleton-inverse-subtler);
   }
 }

package/dist/Tree/Tree.js

@@ -84,7 +84,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     var newIcon = /*#__PURE__*/React.createElement(DragLine, {
       size: TREE_SWITCH_CION_SIZE,
-      color: "#a2a2a2"
+      color: 'var(--alias-colors-icon-subtle)'
     });
     var mergedDraggable = {
       icon: newIcon
@@ -196,7 +196,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     switcherIcon: function switcherIcon(nodeProps) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /*#__PURE__*/React.createElement(ArrowRightLightLine, {
         size: TREE_SWITCH_CION_SIZE,
-        color: '#9CA3AF'
+        color: 'var(--alias-colors-icon-subtle)'
       }, t.Tree.expand), showLine, nodeProps, TREE_SWITCH_CION_SIZE));
     },
     draggable: draggableConfig

package/dist/Tree/demo/basic/index.js

@@ -27,7 +27,7 @@ export default (function () {
         children: [{
           title: /*#__PURE__*/React.createElement("span", {
             style: {
-              color: '#1890ff'
+              color: 'var(--alias-colors-text-selected)'
             }
           }, "sss"),
           key: '0-0-1-0',

package/dist/Tree/style/checkbox.less

@@ -21,7 +21,7 @@
       animation: ald-checkbox-effect 0.36s ease-in-out;
       animation-fill-mode: backwards;
       content: '';
-      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+      border-color: var(--alias-colors-bg-selected-strong-default);
     }
 
     &-inner {
@@ -33,8 +33,7 @@
       height: @checkbox-size;
       direction: ltr;
       background-color: @checkbox-check-bg;
-      border: 1px solid
-        var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+      border: 1px solid var(--interaction-border-neutral-normal);
       border-radius: @checkbox-border-radius;
       border-collapse: separate;
       transition: all 0.3s;
@@ -60,18 +59,12 @@
       }
 
       &:hover {
-        border-color: var(
-          --alias-colors-border-accent-gray-subtle-hover,
-          #9ca3af
-        );
+        border-color: var(--interaction-border-hover);
       }
 
       &:active {
-        border-color: var(
-          --alias-colors-border-accent-gray-subtle-default,
-          #d1d5db
-        );
-        background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+        border-color: var(--interaction-border-neutral-normal);
+        background-color: var(--alias-colors-bg-skeleton-strong);
       }
     }
 
@@ -90,7 +83,7 @@
   .ald-tree-checkbox-checked .ald-tree-checkbox-inner::after {
     position: absolute;
     display: table;
-    border: 2px solid var(--alias-colors-icon-inverse-default, #fff);
+    border: 2px solid var(--alias-colors-icon-inverse-default);
     border-top: 0;
     border-left: 0;
     transform: rotate(45deg) scale(1) translate(-50%, -50%);
@@ -101,8 +94,8 @@
 
   .ald-tree-checkbox-checked {
     .ald-tree-checkbox-inner {
-      background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
-      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+      background-color: var(--alias-colors-bg-selected-strong-default);
+      border-color: var(--alias-colors-bg-selected-strong-default);
     }
   }
 
@@ -111,7 +104,7 @@
 
     &.ald-tree-checkbox-checked {
       .ald-tree-checkbox-inner::after {
-        border-color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
+        border-color: var(--alias-colors-icon-disabled);
         animation-name: none;
       }
     }
@@ -122,8 +115,8 @@
     }
 
     .ald-tree-checkbox-inner {
-      background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
-      border-color: var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1));
+      background-color: var(--alias-colors-bg-disabled);
+      border-color: var(--alias-colors-border-disabled);
 
       &::after {
         border-color: @input-disabled-bg;
@@ -201,8 +194,8 @@
   // 半选状态
   .ald-tree-checkbox-indeterminate {
     .ald-tree-checkbox-inner {
-      background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
-      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+      background-color: var(--alias-colors-bg-selected-strong-default);
+      border-color: var(--alias-colors-bg-selected-strong-default);
     }
 
     .ald-tree-checkbox-inner::after {
@@ -213,7 +206,7 @@
       left: 50%;
       width: @indeterminate-width;
       height: @indeterminate-height;
-      background-color: var(--alias-colors-icon-inverse-default, #fff);
+      background-color: var(--alias-colors-icon-inverse-default);
       border: 0;
       transform: translate(-50%, -50%) scale(1);
       opacity: 1;
@@ -221,14 +214,11 @@
     }
 
     &.ald-tree-checkbox-disabled .ald-tree-checkbox-inner {
-      background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
-      border-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+      background-color: var(--alias-colors-bg-disabled);
+      border-color: var(--alias-colors-bg-disabled);
 
       &::after {
-        background-color: var(
-          --alias-colors-icon-disabled,
-          rgba(0, 0, 0, 0.25)
-        );
+        background-color: var(--alias-colors-icon-disabled);
       }
     }
   }

package/dist/Tree/style/index.less

@@ -53,7 +53,7 @@
   align-items: center;
   font-size: @tree-font-size-default;
   font-weight: 400;
-  color: var(--alias-colors-text-default, #1f2937);
+  color: var(--alias-colors-text-default);
 
   &.ald-tree-node-disabled {
     display: none;
@@ -117,11 +117,11 @@
     }
 
     &:hover {
-      background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
+      background: var(--alias-colors-bg-interaction-hover);
     }
 
     &.ald-tree-node-selected {
-      background: var(--alias-colors-bg-selected-default, #e8f2fe);
+      background: var(--alias-colors-bg-selected-default);
       font-size: 12px;
       font-weight: 400;
       line-height: 16px;
@@ -148,7 +148,7 @@
 
     .ald-tree-node-content-wrapper {
       padding: @tree-padding-large;
-      border-radius: var(--alias-radius-75, 6px);
+      border-radius: var(--alias-radius-75);
 
       .ald-tree-title {
         line-height: @tree-line-height-large;

package/dist/Tree/style/mixin.less

@@ -24,7 +24,7 @@
     // it should displayed over the following node
     z-index: 1;
     height: 2px;
-    background-color: var(--alias-colors-border-selected, #126fdd);
+    background-color: var(--alias-colors-border-selected);
     border-radius: 1px;
     pointer-events: none;
 
@@ -37,7 +37,7 @@
       height: 0;
       border-top: 6px solid transparent;
       border-bottom: 6px solid transparent;
-      border-left: 10px solid var(--alias-colors-border-selected, #126fdd); /* 高度 */
+      border-left: 10px solid var(--alias-colors-border-selected); /* 高度 */
     }
   }
 }
@@ -97,7 +97,7 @@
     &-disabled {
       // >>> Title
       .@{custom-tree-prefix-cls}-node-content-wrapper {
-        color: var(--alias-colors-text-default, #1f2937);
+        color: var(--alias-colors-text-default);
         cursor: default;
         font-size: 14px;
         font-style: normal;

package/dist/Tree/style/reset.less

@@ -14,7 +14,7 @@
   width: 6px;
 
   .ald-tree-list-scrollbar-thumb {
-    background: #575757 !important;
+    background: var(--alias-colors-icon-subtle) !important;
     border-radius: var(--scrollbar-size);
     position: relative;
     opacity: 0.2 !important;

package/dist/Tree/style/var.less

@@ -1,42 +1,42 @@
 @import '../../style/color/colorPalette.less';
 @padding-xs: 4px; // small items
-@item-hover-bg: fade(#fff, 8%);
-@tree-directory-selected-color: #fff;
-@tree-directory-selected-bg: @BG40;
+@item-hover-bg: var(--action-ghost-hover);
+@tree-directory-selected-color: var(--content-inverted-primary);
+@tree-directory-selected-bg: var(--background-neutral-strong);
 @tree-title-height: 16px;
-@border-color-base: #434343; // base border outline a component
+@border-color-base: var(
+  --border-neutral-strong
+); // base border outline a component
 
 @checkbox-size: 16px;
-@text-color: fade(#000, 85%);
+@text-color: var(--content-primary);
 @font-size-base: 12px;
-@primary-color: #126fdd;
-@component-background: #141414;
+@primary-color: var(--action-primary-normal);
+@component-background: var(--background-inverted);
 @border-radius-sm: 2px;
 @border-width-base: 1px;
 @border-style-base: solid;
-@primary-1: mix(
-  color(~`colorPalette('@{primary-color}', 8) `),
-  @component-background,
-  15%
-);
-@primary-2: color(~`colorPalette('@{primary-color}', 2) `);
+@primary-1: var(--background-informative-subtle);
+@primary-2: var(--background-informative-on-subtle);
 @font-variant-base: tabular-nums;
 @line-height-base: 1.6667;
 @font-feature-settings-base: 'tnum';
-@disabled-color: fade(#fff, 30%);
-@tree-node-hover-bg: #f5f5f5;
+@disabled-color: var(--content-inverted-disabled);
+@tree-node-hover-bg: var(--action-ghost-hover);
 @animation-duration-slow: 0.3s; // Modal
-@normal-color: #d9d9d9;
+@normal-color: var(--border-default);
 @border-radius-base: 2px;
 @tree-node-selected-bg: @primary-2;
-@checkbox-color: var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+@checkbox-color: var(--border-default);
 @checkbox-border-radius: @border-radius-sm;
 @checkbox-check-bg: transparent;
 @checkbox-border-width: @border-width-base;
-@checkbox-check-color: #fff;
+@checkbox-check-color: var(--content-inverted-primary);
 @ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
 @ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
 @input-disabled-bg: @disabled-bg;
 @checkbox-group-item-margin-right: 6px;
-@background-color-base: fade(#fff, 8%); // Default grey background color
+@background-color-base: var(
+  --background-neutral-subtle
+); // Default grey background color
 @disabled-bg: @background-color-base;

package/dist/Tree/utils/iconUtil.js

@@ -13,7 +13,7 @@ export default function renderSwitcherIcon(prefixCls, switcherIcon, showLine, tr
     loading = treeNodeProps.loading;
   if (loading) {
     return /*#__PURE__*/React.createElement(Loading2Line, {
-      color: '#3271c9',
+      color: 'var(--content-informative-primary)',
       size: iconSize,
       className: "".concat(prefixCls, "-switcher-loading-icon ")
     });

package/dist/User/style/index.less

@@ -8,7 +8,7 @@
     gap: 4px;
 
     .ald-user-text {
-      color: var(--alias-colors-text-default, #1f2937);
+      color: var(--alias-colors-text-default);
       font-size: 12px;
       line-height: 16px;
     }
@@ -18,7 +18,7 @@
     gap: 6px;
 
     .ald-user-text {
-      color: var(--alias-colors-text-default, #1f2937);
+      color: var(--alias-colors-text-default);
       font-size: 14px;
       line-height: 20px; /* 142.857% */
     }
@@ -28,7 +28,7 @@
     gap: 8px;
 
     .ald-user-text {
-      color: var(--alias-colors-text-default, #1f2937);
+      color: var(--alias-colors-text-default);
       font-size: 14px;
       font-weight: 500;
       line-height: 20px; /* 142.857% */