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

package/dist/AldSelect/style/color.less

@@ -1,40 +1,49 @@
 .beta-ald-select {
-  border-color: #d1d5db;
-  color: #1f2937;
-  background-color: #fff;
+  border-color: var(--interaction-border-neutral-normal);
+  color: var(--content-primary);
+  background-color: var(--interaction-background-form-field);
+
+  &:hover {
+    border-color: var(--interaction-border-normal);
+  }
 
   &-active {
-    border-color: #007bff;
+    border-color: var(--global-transparent-transparent);
+    box-shadow: var(--focus-default-focus);
+
+    &:hover {
+      border-color: var(--global-transparent-transparent);
+    }
   }
 
   &-error {
-    border-color: #dc2626;
+    border-color: var(--interaction-border-alert);
   }
 
   &-validating,
   &-passed {
-    border-color: #16a34a;
+    border-color: var(--interaction-border-success);
   }
 
   &-borderless {
     border-color: transparent;
     background-color: transparent;
-    color: #111827;
+    color: var(--content-primary);
 
     &:hover {
-      background-color: #f3f4f6;
-      border-color: #f3f4f6;
+      background-color: var(--background-neutral-muted);
+      border-color: var(--background-neutral-muted);
     }
 
     &.beta-ald-select-active {
-      background-color: #fff;
-      border-color: #fff;
+      background-color: var(--background-default);
+      border-color: var(--background-default);
     }
   }
 
   &-disabled {
-    border: 1px solid #d1d5db;
-    background: #f3f4f6;
+    border: 1px solid var(--border-default);
+    background: var(--background-neutral-muted);
 
     &.beta-ald-select-borderless {
       border-color: transparent;
@@ -43,14 +52,14 @@
   }
 
   .beta-ald-select-placeholder {
-    color: #9ca3af;
+    color: var(--content-tertiary);
   }
 }
 
 .beta-ald-select-prefix {
-  color: #4b5563;
+  color: var(--content-secondary);
 }
 
 .beta-ald-select-selector-multiple-responsive-selected-section {
-  border-color: #007bff;
+  border-color: var(--interaction-border-selected);
 }

package/dist/AldSelect/style/index.less

@@ -121,7 +121,7 @@
         left: -1px;
         border-width: 1px;
         border-style: solid;
-        background-color: #fff;
+        background-color: var(--background-default);
         z-index: 1;
 
         .beta-ald-select-selector-multiple-responsive-selected-section-tags {
@@ -162,7 +162,7 @@
     width: 100%;
 
     .beta-ald-select-search-box {
-      border-bottom: 1px solid #d1d5db;
+      border-bottom: 1px solid var(--border-default);
       border-radius: 0 !important;
 
       .ald-input {

package/dist/Avatar/component/Avatar/index.js

@@ -1,5 +1,9 @@
-var _excluded = ["size", "children", "src", "icon", "type"];
+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); }
+var _excluded = ["size", "children", "src", "icon"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 InternalAvatar from 'antd/lib/avatar/avatar';
@@ -7,7 +11,7 @@ import * as React from 'react';
 import { User } from "../../../Icon";
 import _ from 'lodash';
 import { useCallback, useMemo } from 'react';
-import { AVATAR_SIZE_MAP, AVATAR_TYPE_TO_BG_COLOR } from "./type";
+import { AVATAR_SIZE_MAP } from "./type";
 import { getFontSize } from "./helper";
 import classNames from 'classnames';
 var ZERO = 0;
@@ -17,7 +21,6 @@ var Avatar = function Avatar(props) {
     children = props.children,
     src = props.src,
     icon = props.icon,
-    type = props.type,
     restProps = _objectWithoutProperties(props, _excluded);
   var getSize = useCallback(function () {
     if (typeof size === 'number') {
@@ -34,18 +37,6 @@ var Avatar = function Avatar(props) {
     }
     return children;
   }, [children]);
-  var bgColor = useMemo(function () {
-    if (type) {
-      return AVATAR_TYPE_TO_BG_COLOR[type];
-    }
-    return AVATAR_TYPE_TO_BG_COLOR.user;
-  }, [type]);
-  var fontColor = useMemo(function () {
-    if (type === 'count') {
-      return '#1F2937';
-    }
-    return '#fff';
-  }, [type]);
   var innerIcon = useMemo(function () {
     if (icon) {
       return icon;
@@ -53,8 +44,6 @@ var Avatar = function Avatar(props) {
     if (!_.isEmpty(children)) {
       return /*#__PURE__*/React.createElement("div", {
         style: {
-          backgroundColor: bgColor,
-          color: fontColor,
           height: '100%',
           width: '100%',
           display: 'flex',
@@ -68,10 +57,10 @@ var Avatar = function Avatar(props) {
     return /*#__PURE__*/React.createElement(User, {
       size: getSize()
     });
-  }, [icon, getSize, children, getChildren, bgColor, fontColor]);
+  }, [icon, getSize, children, getChildren]);
   return /*#__PURE__*/React.createElement(InternalAvatar, _extends({}, restProps, {
     size: getSize(),
-    className: classNames(restProps.className, 'ald-avatar'),
+    className: classNames(restProps.className, 'ald-avatar', _defineProperty({}, "ald-avatar-default", !icon && _.isEmpty(children))),
     icon: innerIcon,
     src: src
   }));

package/dist/Avatar/component/Avatar/type.js

@@ -10,7 +10,7 @@ export var AVATAR_SIZE_MAP = {
 };
 export var AVATAR_SIZE_TO_FONT_SIZE = (_AVATAR_SIZE_TO_FONT_ = {}, _defineProperty(_AVATAR_SIZE_TO_FONT_, 16, 8), _defineProperty(_AVATAR_SIZE_TO_FONT_, 20, 10), _defineProperty(_AVATAR_SIZE_TO_FONT_, 24, 10), _defineProperty(_AVATAR_SIZE_TO_FONT_, 28, 12), _defineProperty(_AVATAR_SIZE_TO_FONT_, 32, 12), _defineProperty(_AVATAR_SIZE_TO_FONT_, 40, 14), _defineProperty(_AVATAR_SIZE_TO_FONT_, 48, 16), _defineProperty(_AVATAR_SIZE_TO_FONT_, 64, 24), _AVATAR_SIZE_TO_FONT_);
 export var AVATAR_TYPE_TO_BG_COLOR = {
-  user: '#1D4ED8',
-  userGroup: '#15803D',
-  count: '#E5E7EB'
+  user: 'var(--non-semantic-background-blue-muted)',
+  userGroup: 'var(--non-semantic-background-blue-muted)',
+  count: 'var(--non-semantic-background-grey-muted)'
 };

package/dist/Avatar/style/index.less

@@ -1,16 +1,23 @@
 @import '../../style/index.less';
 
 .ald-avatar.ald-avatar {
-  background-color: #fff;
-  color: #1f2937;
   border: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  background-color: var(--non-semantic-background-blue-muted);
+  color: var(--non-semantic-content-blue-primary);
+
+  &.ald-avatar-default {
+    background-color: white;
+  }
 }
 
 .ant-avatar-group {
   .ald-avatar.ald-avatar {
-    border: 1px solid #fff;
+    &.ald-avatar-default {
+      background-color: var(--non-semantic-background-blue-muted);
+      color: var(--non-semantic-content-blue-primary);
+    }
   }
 }

package/dist/Badge/index.js

@@ -17,34 +17,8 @@ export default function Badge(props) {
     className = props.className,
     onClick = props.onClick,
     rest = _objectWithoutProperties(props, _excluded);
-  var status2ColorMap = {
-    success: {
-      color: '#15803D',
-      backgroundColor: '#BBF7D0'
-    },
-    error: {
-      color: '#B91C1C',
-      backgroundColor: '#FECACA'
-    },
-    default: {
-      color: '#374151',
-      backgroundColor: '#E5E7EB'
-    },
-    info: {
-      color: '#0F59B1',
-      backgroundColor: '#A9CFFB'
-    },
-    warning: {
-      color: '#A16207',
-      backgroundColor: '#FEF08A'
-    }
-  };
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: classNames('ald-badge', (_classNames = {}, _defineProperty(_classNames, 'ald-badge-large', size === 'large'), _defineProperty(_classNames, 'ald-badge-clickable', typeof onClick === 'function'), _classNames), className),
-    style: {
-      color: status2ColorMap[status].color,
-      backgroundColor: status2ColorMap[status].backgroundColor
-    },
+    className: classNames('ald-badge', (_classNames = {}, _defineProperty(_classNames, 'ald-badge-large', size === 'large'), _defineProperty(_classNames, 'ald-badge-clickable', typeof onClick === 'function'), _defineProperty(_classNames, "ald-badge-".concat(status), status), _classNames), className),
     onClick: onClick
   }), count);
 }

package/dist/Badge/style/index.less

@@ -2,7 +2,7 @@
 
 .ald-badge {
   display: inline-flex;
-  padding: var(--alias-padding-25, 2px) var(--alias-padding-75, 6px);
+  padding: var(--alias-padding-25) var(--alias-padding-75);
   align-items: center;
   min-width: 20px;
   height: 20px;
@@ -10,6 +10,7 @@
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
+  cursor: default;
 
   &.ald-badge-large {
     font-size: 14px;
@@ -21,4 +22,29 @@
   &.ald-badge-clickable {
     cursor: pointer;
   }
+
+  &.ald-badge-success {
+    color: var(--content-inverted-primary);
+    background-color: var(--background-positive-strong);
+  }
+
+  &.ald-badge-error {
+    color: var(--content-inverted-primary);
+    background-color: var(--background-negative-strong);
+  }
+
+  &.ald-badge-default {
+    color: var(--content-inverted-primary);
+    background-color: var(--background-neutral-strong);
+  }
+
+  &.ald-badge-info {
+    color: var(--content-inverted-primary);
+    background-color: var(--background-informative-strong);
+  }
+
+  &.ald-badge-warning {
+    color: var(--content-primary);
+    background-color: var(--background-warning-strong);
+  }
 }

package/dist/Button/style/index.less

@@ -10,6 +10,7 @@
 
 .ald-loading-spin {
   animation: spin 1s linear infinite;
+  flex-shrink: 0;
 }
 
 @keyframes spin {

package/dist/Button/style/type.less

@@ -18,7 +18,7 @@
       text-decoration: none;
 
       .ald-icon {
-        color: #fff;
+        color: var(--alias-colors-text-inverse-strong);
       }
 
       /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -133,7 +133,7 @@
       box-shadow: none;
 
       .ald-icon {
-        color: #6b7280;
+        color: var(--alias-colors-icon-subtle);
       }
 
       &:focus {
@@ -182,7 +182,7 @@
       box-shadow: none;
 
       .ald-icon {
-        color: #6b7280;
+        color: var(--content-secondary);
       }
 
       &:focus {
@@ -198,7 +198,7 @@
         border-color: @button-text-border-color-hover;
 
         .ald-icon {
-          color: #2986f4;
+          color: var(--alias-colors-text-brand);
         }
       }
 
@@ -209,7 +209,7 @@
         box-shadow: none;
 
         .ald-icon {
-          color: #2986f4;
+          color: var(--alias-colors-text-brand);
         }
       }
 

package/dist/Button/style/variables.less

@@ -5,29 +5,29 @@
 /** size控制 **/
 @button-height-large: 36px;
 @button-text-size-large: 16px;
-@button-border-radius-large: var(--alias-radius-100, 8px);
-@button-padding-large: var(--alias-padding-75-minus-1, 6px)
-  var(--alias-padding-150-minus-1, 12px);
+@button-border-radius-large: var(--alias-radius-100);
+@button-padding-large: var(--alias-padding-75-minus-1)
+  var(--alias-padding-150-minus-1);
 @button-line-height-large: 24px;
 @button-gap-large: 8px;
 @button-text-min-width-large: 56px;
 
 @button-height-middle: 32px;
 @button-text-size-middle: 14px;
-@button-border-radius-middle: var(--alias-radius-75, 6px);
-@button-padding-middle: var(--alias-padding-75-minus-1, 6px)
-  var(--alias-padding-150-minus-1, 12px);
+@button-border-radius-middle: var(--alias-radius-75);
+@button-padding-middle: var(--alias-padding-75-minus-1)
+  var(--alias-padding-150-minus-1);
 @button-line-height-middle: 20px;
 @button-gap-middle: 4px;
 @button-text-min-width-middle: 52px;
 
 @button-height-small: 28px;
 @button-text-size-small: 12px;
-@button-border-radius-small: var(--alias-radius-50, 4px);
-@button-padding-small: var(--alias-padding-75-minus-1, 6px)
-  var(--alias-padding-150-minus-1, 12px);
+@button-border-radius-small: var(--alias-radius-50);
+@button-padding-small: var(--alias-padding-75-minus-1)
+  var(--alias-padding-150-minus-1);
 @button-line-height-small: 16px;
-@button-gap-small: var(--alias-radius-50, 4px);
+@button-gap-small: var(--alias-radius-50);
 @button-text-min-width-small: 48px;
 
 // @button-height-mini: 24px;
@@ -38,220 +38,87 @@
 
 /****  primary按钮  ****/
 // bg color
-@button-primary-bg-color: var(
-  --alias-colors-bg-accent-blue-stronger-default,
-  #126fdd
-);
-@button-primary-bg-color-hover: var(
-  --alias-colors-bg-accent-blue-stronger-hover,
-  #0f59b1
-);
-@button-primary-bg-color-active: var(
-  --alias-colors-bg-accent-blue-stronger-press,
-  #0b4385
-);
-@button-primary-bg-color-disable: var(
-  --alias-colors-bg-disabled,
-  rgba(0, 0, 0, 0.05)
-);
+@button-primary-bg-color: var(--action-primary-normal);
+@button-primary-bg-color-hover: var(--action-primary-hover);
+@button-primary-bg-color-active: var(--action-primary-active);
+@button-primary-bg-color-disable: var(--action-primary-normal);
 // text color
-@button-primary-color: var(--alias-colors-text-inverse-strong, #fff);
-@button-primary-color-hover: var(--alias-colors-text-inverse-strong, #fff);
-@button-primary-color-active: var(--alias-colors-text-inverse-strong, #fff);
-@button-primary-color-disable: var(
-  --alias-colors-text-disabled,
-  rgba(0, 0, 0, 0.25)
-);
+@button-primary-color: var(--action-inverted-normal);
+@button-primary-color-hover: var(--action-inverted-hover);
+@button-primary-color-active: var(--action-inverted-active);
+@button-primary-color-disable: var(--action-inverted-normal);
 // border color
-@button-primary-border-color: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-primary-border-color-hover: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-primary-border-color-active: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-primary-border-color-disable: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
+@button-primary-border-color: var(--alias-colors-border-transp);
+@button-primary-border-color-hover: var(--alias-colors-border-transp);
+@button-primary-border-color-active: var(--alias-colors-border-transp);
+@button-primary-border-color-disable: var(--alias-colors-border-transp);
 
 /*********** secondary按钮 ***********/
 // bg color
-@button-secondary-bg-color: var(
-  --alias-colors-bg-accent-gray-subtler-default,
-  #f9fafb
-);
-@button-secondary-bg-color-hover: var(
-  --alias-colors-bg-accent-gray-subtler-default,
-  #f9fafb
-);
-@button-secondary-bg-color-active: var(
-  --alias-colors-bg-accent-gray-subtler-press,
-  #e5e7eb
-);
-@button-secondary-bg-color-disable: var(
-  --alias-colors-bg-disabled,
-  rgba(0, 0, 0, 0.05)
-);
+@button-secondary-bg-color: var(--action-inverted-normal);
+@button-secondary-bg-color-hover: var(--action-inverted-hover);
+@button-secondary-bg-color-active: var(--action-inverted-active);
+@button-secondary-bg-color-disable: var(--action-inverted-normal);
 // text color
-@button-secondary-color: var(--alias-colors-text-default, #1f2937);
-@button-secondary-color-hover: var(--alias-colors-text-default, #1f2937);
-@button-secondary-color-active: var(--alias-colors-text-default, #1f2937);
-@button-secondary-color-disable: var(
-  --alias-colors-text-disabled,
-  rgba(0, 0, 0, 0.25)
-);
+@button-secondary-color: var(--action-neutral-normal);
+@button-secondary-color-hover: var(--action-neutral-hover);
+@button-secondary-color-active: var(--action-neutral-active);
+@button-secondary-color-disable: var(--action-neutral-normal);
 // border color
-@button-secondary-border-color: var(
-  --alias-colors-border-accent-gray-subtle-default,
-  #d1d5db
-);
-@button-secondary-border-color-hover: var(
-  --alias-colors-border-accent-gray-subtle-hover,
-  #9ca3af
-);
-@button-secondary-border-color-active: var(
-  --alias-colors-border-accent-gray-subtle-default,
-  #d1d5db
-);
-@button-secondary-border-color-disable: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
+@button-secondary-border-color: var(--action-outline-normal);
+@button-secondary-border-color-hover: var(--action-outline-hover);
+@button-secondary-border-color-active: var(--action-outline-active);
+@button-secondary-border-color-disable: var(--action-outline-normal);
 
 /*********** danger按钮 ***********/
 // bg color
-@button-dangerous-bg-color: var(
-  --alias-colors-bg-accent-red-stronger-default,
-  #dc2626
-);
-@button-dangerous-bg-color-hover: var(
-  --alias-colors-bg-accent-red-stronger-hover,
-  #b91c1c
-);
-@button-dangerous-bg-color-active: var(
-  --alias-colors-bg-accent-red-stronger-press,
-  #991b1b
-);
-@button-dangerous-bg-color-disable: var(
-  --alias-colors-bg-disabled,
-  rgba(0, 0, 0, 0.05)
-);
+@button-dangerous-bg-color: var(--action-destructive-normal);
+@button-dangerous-bg-color-hover: var(--action-destructive-hover);
+@button-dangerous-bg-color-active: var(--action-destructive-active);
+@button-dangerous-bg-color-disable: var(--action-destructive-normal);
 // text color
-@button-dangerous-color: var(--alias-colors-text-inverse-strong, #fff);
-@button-dangerous-color-hover: var(--alias-colors-text-inverse-strong, #fff);
-@button-dangerous-color-active: var(--alias-colors-text-inverse-strong, #fff);
-@button-dangerous-color-disable: var(
-  --alias-colors-text-disabled,
-  rgba(0, 0, 0, 0.25)
-);
+@button-dangerous-color: var(--action-inverted-normal);
+@button-dangerous-color-hover: var(--action-inverted-normal);
+@button-dangerous-color-active: var(--action-inverted-normal);
+@button-dangerous-color-disable: var(--action-inverted-normal);
 // border color
-@button-dangerous-border-color: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-dangerous-border-color-hover: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-dangerous-border-color-active: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-dangerous-border-color-disable: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
+@button-dangerous-border-color: var(--action-destructive-normal);
+@button-dangerous-border-color-hover: var(--action-destructive-hover);
+@button-dangerous-border-color-active: var(--action-destructive-active);
+@button-dangerous-border-color-disable: var(--action-destructive-normal);
 
 /*********** text按钮 ***********/
 // bg color
-@button-text-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
-@button-text-bg-color-hover: var(
-  --alias-colors-bg-accent-blue-subtler-hover,
-  #d4e7fd
-);
-@button-text-bg-color-active: var(
-  --alias-colors-bg-brand-subtlest-press,
-  #a9cffb
-);
-@button-text-bg-color-disable: var(--alias-colors-bg-skeleton-subtler, #fff);
+@button-text-bg-color: var(--action-ghost-normal);
+@button-text-bg-color-hover: var(--action-ghost-hover);
+@button-text-bg-color-active: var(--action-ghost-active);
+@button-text-bg-color-disable: var(--action-ghost-normal);
 // text color
-@button-text-color: var(--alias-colors-text-default, #1f2937);
-@button-text-color-hover: var(--alias-colors-text-brand, #126fdd);
-@button-text-color-active: var(--alias-colors-text-brand, #126fdd);
-@button-text-color-disable: var(
-  --alias-colors-text-disabled,
-  rgba(0, 0, 0, 0.25)
-);
+@button-text-color: var(--action-neutral-normal);
+@button-text-color-hover: var(--action-neutral-hover);
+@button-text-color-active: var(--action-neutral-active);
+@button-text-color-disable: var(--action-neutral-normal);
 // border color
-@button-text-border-color: var(--alias-colors-border-transp, rgba(0, 0, 0, 0));
-@button-text-border-color-hover: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-text-border-color-active: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-text-border-color-disable: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
+@button-text-border-color: var(--alias-colors-border-transp);
+@button-text-border-color-hover: var(--alias-colors-border-transp);
+@button-text-border-color-active: var(--alias-colors-border-transp);
+@button-text-border-color-disable: var(--alias-colors-border-transp);
 
 /*********** inverse按钮 ***********/
 // bg color
-@button-inverse-bg-color: var(
-  --component-button-background-secondary-inverse-default,
-  rgba(255, 255, 255, 0.1)
-);
-@button-inverse-bg-color-hover: var(
-  --alias-colors-bg-skeleton-inverse-stronger,
-  rgba(255, 255, 255, 0.15)
-);
+@button-inverse-bg-color: var(--alias-colors-bg-skeleton-inverse-subtle);
+@button-inverse-bg-color-hover: var(--alias-colors-bg-skeleton-inverse-strong);
 @button-inverse-bg-color-active: var(
-  --alias-colors-bg-skeleton-inverse-strongest,
-  rgba(255, 255, 255, 0.25)
-);
-@button-inverse-bg-color-disable: var(
-  --alias-colors-bg-inverse-disabled,
-  rgba(255, 255, 255, 0.1)
+  --alias-colors-bg-skeleton-inverse-stronger
 );
+@button-inverse-bg-color-disable: var(--alias-colors-bg-inverse-disabled);
 // text color
-@button-inverse-color: var(
-  --alias-colors-text-inverse-default,
-  rgba(255, 255, 255, 0.9)
-);
-@button-inverse-color-hover: var(
-  --alias-colors-text-inverse-default,
-  rgba(255, 255, 255, 0.9)
-);
-@button-inverse-color-active: var(
-  --alias-colors-text-inverse-default,
-  rgba(255, 255, 255, 0.9)
-);
-@button-inverse-color-disable: var(
-  --alias-colors-text-inverse-disabled,
-  rgba(255, 255, 255, 0.25)
-);
+@button-inverse-color: var(--alias-colors-text-inverse-default);
+@button-inverse-color-hover: var(--alias-colors-text-inverse-default);
+@button-inverse-color-active: var(--alias-colors-text-inverse-default);
+@button-inverse-color-disable: var(--alias-colors-text-inverse-disabled);
 // border color
-@button-inverse-border-color: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-inverse-border-color-hover: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-inverse-border-color-active: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
-@button-inverse-border-color-disable: var(
-  --alias-colors-border-transp,
-  rgba(0, 0, 0, 0)
-);
+@button-inverse-border-color: var(--alias-colors-border-transp);
+@button-inverse-border-color-hover: var(--alias-colors-border-transp);
+@button-inverse-border-color-active: var(--alias-colors-border-transp);
+@button-inverse-border-color-disable: var(--alias-colors-border-transp);