amis-ui 6.9.0-rc.2 → 6.9.0-rc.3

package/lib/themes/default.css

@@ -4593,9 +4593,9 @@
   --conditionBuilder-body-paddingLeft: var(--sizes-base-14);
   --table-border-width: var(--borders-width-2);
   --table-border-color: var(--colors-neutral-line-8);
-  --table-paddingTop: var(--sizes-size-3);
+  --table-paddingTop: var(--sizes-size-6);
   --table-paddingRight: var(--sizes-size-6);
-  --table-paddingBottom: var(--sizes-size-3);
+  --table-paddingBottom: var(--sizes-size-6);
   --table-paddingLeft: var(--sizes-size-6);
   --table-paddingX: var(--sizes-size-7);
   --table-header-color: var(--colors-neutral-text-2);
@@ -24096,10 +24096,10 @@ input[type=button].cxd-Button--block {
   color: #a0a0a0;
 }
 .cxd-Table-table > tbody > tr.bg-dark.lt, .cxd-Table-table > tbody > tr.bg-dark .lt {
-  background: #41474c;
+  background: #3e4750;
 }
 .cxd-Table-table > tbody > tr.bg-dark.lter, .cxd-Table-table > tbody > tr.bg-dark .lter {
-  background: #4f5458;
+  background: #475460;
 }
 .cxd-Table-table > tbody > tr.bg-dark.dk, .cxd-Table-table > tbody > tr.bg-dark .dk {
   background: #272d33;
@@ -24130,10 +24130,10 @@ input[type=button].cxd-Button--block {
   color: #666666;
 }
 .cxd-Table-table > tbody > tr.bg-black.lt, .cxd-Table-table > tbody > tr.bg-black .lt {
-  background: #0d0d0d;
+  background: #0d0c0c;
 }
 .cxd-Table-table > tbody > tr.bg-black.lter, .cxd-Table-table > tbody > tr.bg-black .lter {
-  background: #1a1a1a;
+  background: #1b1818;
 }
 .cxd-Table-table > tbody > tr.bg-black.dk, .cxd-Table-table > tbody > tr.bg-black .dk {
   background: black;
@@ -24164,10 +24164,10 @@ input[type=button].cxd-Button--block {
   color: #cfe5fc;
 }
 .cxd-Table-table > tbody > tr.bg-primary.lt, .cxd-Table-table > tbody > tr.bg-primary .lt {
-  background: #1c88fc;
+  background: #1a88ff;
 }
 .cxd-Table-table > tbody > tr.bg-primary.lter, .cxd-Table-table > tbody > tr.bg-primary .lter {
-  background: #3896fa;
+  background: #3395ff;
 }
 .cxd-Table-table > tbody > tr.bg-primary.dk, .cxd-Table-table > tbody > tr.bg-primary .dk {
   background: #006fe6;
@@ -24198,10 +24198,10 @@ input[type=button].cxd-Button--block {
   color: #b4e7c0;
 }
 .cxd-Table-table > tbody > tr.bg-success.lt, .cxd-Table-table > tbody > tr.bg-success .lt {
-  background: #30b94f;
+  background: #2abe4c;
 }
 .cxd-Table-table > tbody > tr.bg-success.lter, .cxd-Table-table > tbody > tr.bg-success .lter {
-  background: #3ac85a;
+  background: #2dd554;
 }
 .cxd-Table-table > tbody > tr.bg-success.dk, .cxd-Table-table > tbody > tr.bg-success .dk {
   background: #21953b;
@@ -24232,10 +24232,10 @@ input[type=button].cxd-Button--block {
   color: #cfe5fc;
 }
 .cxd-Table-table > tbody > tr.bg-info.lt, .cxd-Table-table > tbody > tr.bg-info .lt {
-  background: #1c88fc;
+  background: #1a88ff;
 }
 .cxd-Table-table > tbody > tr.bg-info.lter, .cxd-Table-table > tbody > tr.bg-info .lter {
-  background: #3896fa;
+  background: #3395ff;
 }
 .cxd-Table-table > tbody > tr.bg-info.dk, .cxd-Table-table > tbody > tr.bg-info .dk {
   background: #006fe6;
@@ -24266,10 +24266,10 @@ input[type=button].cxd-Button--block {
   color: #fffefa;
 }
 .cxd-Table-table > tbody > tr.bg-warning.lt, .cxd-Table-table > tbody > tr.bg-warning .lt {
-  background: #f8da4e;
+  background: #fddd4a;
 }
 .cxd-Table-table > tbody > tr.bg-warning.lter, .cxd-Table-table > tbody > tr.bg-warning .lter {
-  background: #f7de69;
+  background: #ffe361;
 }
 .cxd-Table-table > tbody > tr.bg-warning.dk, .cxd-Table-table > tbody > tr.bg-warning .dk {
   background: #fcd417;
@@ -24300,10 +24300,10 @@ input[type=button].cxd-Button--block {
   color: #f8e5e6;
 }
 .cxd-Table-table > tbody > tr.bg-danger.lt, .cxd-Table-table > tbody > tr.bg-danger .lt {
-  background: #dd4d5b;
+  background: #e24857;
 }
 .cxd-Table-table > tbody > tr.bg-danger.lter, .cxd-Table-table > tbody > tr.bg-danger .lter {
-  background: #df6571;
+  background: #e85c69;
 }
 .cxd-Table-table > tbody > tr.bg-danger.dk, .cxd-Table-table > tbody > tr.bg-danger .dk {
   background: #d62133;
@@ -25097,10 +25097,10 @@ input[type=button].cxd-Button--block {
   color: #a0a0a0;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .lt {
-  background: #41474c;
+  background: #3e4750;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .lter {
-  background: #4f5458;
+  background: #475460;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .dk {
   background: #272d33;
@@ -25131,10 +25131,10 @@ input[type=button].cxd-Button--block {
   color: #666666;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .lt {
-  background: #0d0d0d;
+  background: #0d0c0c;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .lter {
-  background: #1a1a1a;
+  background: #1b1818;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .dk {
   background: black;
@@ -25165,10 +25165,10 @@ input[type=button].cxd-Button--block {
   color: #cfe5fc;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .lt {
-  background: #1c88fc;
+  background: #1a88ff;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .lter {
-  background: #3896fa;
+  background: #3395ff;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .dk {
   background: #006fe6;
@@ -25199,10 +25199,10 @@ input[type=button].cxd-Button--block {
   color: #b4e7c0;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .lt {
-  background: #30b94f;
+  background: #2abe4c;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .lter {
-  background: #3ac85a;
+  background: #2dd554;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .dk {
   background: #21953b;
@@ -25233,10 +25233,10 @@ input[type=button].cxd-Button--block {
   color: #cfe5fc;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .lt {
-  background: #1c88fc;
+  background: #1a88ff;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .lter {
-  background: #3896fa;
+  background: #3395ff;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .dk {
   background: #006fe6;
@@ -25267,10 +25267,10 @@ input[type=button].cxd-Button--block {
   color: #fffefa;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .lt {
-  background: #f8da4e;
+  background: #fddd4a;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .lter {
-  background: #f7de69;
+  background: #ffe361;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .dk {
   background: #fcd417;
@@ -25301,10 +25301,10 @@ input[type=button].cxd-Button--block {
   color: #f8e5e6;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .lt {
-  background: #dd4d5b;
+  background: #e24857;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .lter {
-  background: #df6571;
+  background: #e85c69;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .dk {
   background: #d62133;
@@ -28408,6 +28408,7 @@ input[type=button].cxd-Button--block {
   content: var(--image-image-normal-icon);
 }
 .cxd-InputBox {
+  height: var(--input-size-default-height);
   display: flex;
   background: var(--Form-input-bg);
   border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
@@ -28417,7 +28418,6 @@ input[type=button].cxd-Button--block {
   font-size: var(--Form-input-fontSize);
   flex-wrap: wrap;
   justify-content: flex-start;
-  height: var(--input-size-default-height);
 }
 .cxd-InputBox input {
   flex-basis: 1.875rem;
@@ -28810,6 +28810,11 @@ input[type=button].cxd-Button--block {
 .cxd-SchemaEditor-info {
   min-width: 0;
   min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
   display: flex;
   background: var(--Form-input-bg);
   border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
@@ -28819,11 +28824,6 @@ input[type=button].cxd-Button--block {
   font-size: var(--Form-input-fontSize);
   flex-wrap: wrap;
   justify-content: flex-start;
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
 }
 .cxd-SchemaEditor-info input {
   flex-basis: 1.875rem;
@@ -28860,15 +28860,6 @@ input[type=button].cxd-Button--block {
   color: var(--Form-input-placeholderColor);
 }
 .cxd-ResultBox {
-  display: flex;
-  background: var(--Form-input-bg);
-  border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
-  border-radius: var(--Form-input-borderRadius);
-  line-height: var(--Form-input-lineHeight);
-  padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
-  font-size: var(--Form-input-fontSize);
-  flex-wrap: wrap;
-  justify-content: flex-start;
   flex-wrap: nowrap;
   padding: 0 0.75rem;
   min-height: var(--Form-input-height);
@@ -28885,6 +28876,15 @@ input[type=button].cxd-Button--block {
   border-radius: var(--Form-select-borderRadius);
   min-height: var(--Form-selectOption-height);
   padding: var(--select-base-default-paddingTop) var(--select-base-default-paddingRight) var(--select-base-default-paddingBottom) var(--select-base-default-paddingLeft);
+  display: flex;
+  background: var(--Form-input-bg);
+  border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+  border-radius: var(--Form-input-borderRadius);
+  line-height: var(--Form-input-lineHeight);
+  padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+  font-size: var(--Form-input-fontSize);
+  flex-wrap: wrap;
+  justify-content: flex-start;
 }
 .cxd-ResultBox input {
   flex-basis: 1.875rem;
@@ -30992,10 +30992,10 @@ input.cxd-TextControl-input-password {
   color: var(--Form-input-onDisabled-color);
 }
 .cxd-TextareaControl {
-  position: relative;
-  max-width: 100%;
   --Form-input-clearBtn-padding: 0.125rem;
   position: relative;
+  position: relative;
+  max-width: 100%;
 }
 .cxd-TextareaControl.is-inline {
   display: inline-block;
@@ -34957,18 +34957,6 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-style: var(--inputImage-base-default-top-border-style) var(--inputImage-base-default-right-border-style) var(--inputImage-base-default-bottom-border-style) var(--inputImage-base-default-left-border-style);
   box-shadow: var(--shadows-shadow-none);
 }
-.cxd-ImageControl-addBtn-bg {
-  position: absolute;
-  z-index: 0;
-  overflow: hidden;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.cxd-ImageControl-addBtn-bg .cxd-Image {
-  border: 0;
-}
 .cxd-ImageControl-addBtn:not(:disabled):not(.is-disabled):hover {
   color: var(--ImageControl-addBtn-onHover-color);
   background: var(--ImageControl-addBtn-onHover-bg);
@@ -35009,6 +34997,18 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-style: var(--inputImage-base-disabled-top-border-style) var(--inputImage-base-disabled-right-border-style) var(--inputImage-base-disabled-bottom-border-style) var(--inputImage-base-disabled-left-border-style);
   box-shadow: var(--shadows-shadow-none);
 }
+.cxd-ImageControl-addBtn-bg {
+  position: absolute;
+  z-index: 0;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.cxd-ImageControl-addBtn-bg .cxd-Image {
+  border: 0;
+}
 .cxd-ImageControl-addBtn svg {
   top: 0;
   margin-bottom: var(--inputImage-base-default-icon-margin);
@@ -36351,9 +36351,9 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border: var(--Form-select-outer-borderWidth) solid var(--Form-select-outer-borderColor);
 }
 .cxd-TreeSelect {
+  outline: none;
   position: relative;
   max-width: 100%;
-  outline: none;
 }
 .cxd-TreeSelect.is-inline {
   display: inline-block;
@@ -36864,9 +36864,9 @@ td.rdtQuarter.rdtDisabled:hover > span {
   vertical-align: middle;
 }
 .cxd-Picker {
+  outline: none;
   position: relative;
   max-width: 100%;
-  outline: none;
   /* tag 样式 */
 }
 .cxd-Picker.is-inline {

package/lib/withRemoteConfig.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.9.0-rc.2
+ * amis-ui v6.9.0-rc.3
  * Copyright 2018-2024 fex
  */
 

package/lib/withStore.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.9.0-rc.2
+ * amis-ui v6.9.0-rc.3
  * Copyright 2018-2024 fex
  */
 

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "6.9.0-rc.2",
+  "version": "6.9.0-rc.3",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^6.9.0-rc.2",
-    "amis-formula": "^6.9.0-rc.2",
+    "amis-core": "^6.9.0-rc.3",
+    "amis-formula": "^6.9.0-rc.3",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",

package/scss/_components.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 :root,
 .AMISCSSWrapper {
   --button-default-default-top-border-color: var(--colors-neutral-line-8);
@@ -2893,18 +2894,21 @@
   );
   --Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
   --Form-selectOption-height: var(--Form-select-height);
-  --Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
+  --Form-selectValue-bg: #{color.adjust(
+      color.adjust($info, $lightness: 40%),
+      $saturation: 2.5%
+    )};
   --Form-selectValue-onHover-bgColor: var(--select-multiple-hover-bg-color);
   --Form-selectValue-borderColor: var(--colors-brand-7);
   --Form-selectValue-color: var(--colors-brand-5);
   --Form-selectValue-fontSize: var(--select-multiple-fontSize);
-  --Form-selectValue-onDisable-bg: #{lighten(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
+  --Form-selectValue-onDisable-bg: #{color.adjust(
+      color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
+      $lightness: 5%
     )};
-  --Form-selectValue-onHover-bg: #{darken(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
+  --Form-selectValue-onHover-bg: #{color.adjust(
+      color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
+      $lightness: -5%
     )};
   --Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
   --Form-selectValue-onInvalid-color: var(--danger);
@@ -3932,9 +3936,9 @@
 
   --table-border-width: var(--borders-width-2);
   --table-border-color: var(--colors-neutral-line-8);
-  --table-paddingTop: var(--sizes-size-3);
+  --table-paddingTop: var(--sizes-size-6);
   --table-paddingRight: var(--sizes-size-6);
-  --table-paddingBottom: var(--sizes-size-3);
+  --table-paddingBottom: var(--sizes-size-6);
   --table-paddingLeft: var(--sizes-size-6);
   --table-paddingX: var(--sizes-size-7);
   --table-header-color: var(--colors-neutral-text-2);
@@ -4020,7 +4024,7 @@
   --Table-onHover-boxShadow: var(--shadows-shadow-normal);
   --Table-onHover-color: var(--table-body-hover-color);
   --Table-onModified-bg: #e8f0fe;
-  --Table-onModified-borderColor: #{darken(#e8f0fe, 5%)};
+  --Table-onModified-borderColor: #{color.adjust(#e8f0fe, $lightness: -5%)};
   --Table-onModified-color: #4285f4;
   --Table-placeholder-height: #{px2rem(200px)};
   --Table-strip-bg: transparent;

package/scss/_mixins.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 // 媒体查询最小阈值
 @mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
@@ -53,14 +54,16 @@
   }
 }
 
-// @deprecated 不建议用了
 @mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
-  background: saturate(darken($bg-color, $percent), $sat-percent);
+  background: color.adjust(
+    color.adjust($bg-color, $lightness: -$percent),
+    $saturation: $sat-percent
+  );
 }
 
-// @deprecated 不建议用了
 @mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
-  background: desaturate(lighten($bg-color, $percent), $sat-percent);
+  $lightened-color: color.adjust($bg-color, $lightness: $percent);
+  background: color.adjust($lightened-color, $saturation: $sat-percent);
 }
 
 // @deprecated 不建议用了
@@ -101,8 +104,14 @@
 
 // @deprecated 不建议用了
 @mixin font-variant($bg-color) {
-  $font-color: desaturate(lighten($bg-color, 40%), 10%);
-  $link-color: desaturate(lighten($bg-color, 50%), 10%);
+  $font-color: color.adjust(
+    color.adjust($bg-color, $lightness: 40%),
+    $saturation: -10%
+  );
+  $link-color: color.adjust(
+    color.adjust($bg-color, $lightness: 50%),
+    $saturation: -10%
+  );
   $hover-color: #fff;
   color: $font-color;
 
@@ -124,11 +133,11 @@
   }
 
   & .text-muted {
-    color: darken($text-color, 10%) !important;
+    color: color.adjust($text-color, $lightness: -10%) !important;
   }
 
   & .text-lt {
-    color: lighten($text-color, 25%) !important;
+    color: color.adjust($text-color, $lightness: 25%) !important;
   }
 
   // &.auto,
@@ -150,11 +159,11 @@
 // @deprecated 不建议用了
 @mixin text-wariant($bg-color, $name) {
   a.bg-#{'' + $name}:hover {
-    background: darken($bg-color, 5%);
+    background: color.adjust($bg-color, $lightness: -5%);
   }
 
   a.text-#{'' + $name}:hover {
-    color: darken($bg-color, 5%);
+    color: color.adjust($bg-color, $lightness: -5%);
   }
 
   .text-#{'' + $name} {
@@ -162,19 +171,19 @@
   }
 
   .text-#{'' + $name}-lt {
-    color: darken($bg-color, 5%);
+    color: color.adjust($bg-color, $lightness: -5%);
   }
 
   .text-#{'' + $name}-lter {
-    color: darken($bg-color, 10%);
+    color: color.adjust($bg-color, $lightness: -10%);
   }
 
   .text-#{'' + $name}-dk {
-    color: darken($bg-color, 5%);
+    color: color.adjust($bg-color, $lightness: -5%);
   }
 
   .text-#{'' + $name}-dker {
-    color: darken($bg-color, 10%);
+    color: color.adjust($bg-color, $lightness: -10%);
   }
 }
 

package/scss/_properties.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import './functions';
 @import './variables';
 $remFactor: 16px;
@@ -209,14 +210,17 @@ $Table-strip-bg: transparent;
   --Card-onChecked-bg: var(--colors-neutral-fill-11);
   --Card-onChecked-borderColor: var(--colors-brand-5);
   --Card-onChecked-color: var(--colors-brand-5);
-  --Card-onChecked-fieldLabel-color: #{lighten(darken(#d9f3fb, 40%), 20%)};
+  --Card-onChecked-fieldLabel-color: #{color.adjust(
+      color.adjust(#d9f3fb, $lightness: -40%),
+      $lightness: 20%
+    )};
   --Card-onDragging-opacity: 0.1;
   --Card-onModified-bg: var(--colors-neutral-fill-8);
   --Card-onModified-borderColor: var(--colors-brand-5);
   --Card-onModified-color: var(--colors-brand-6);
   --Card-onModified-fieldLabel-color: var(--colors-brand-8);
-  --Card-onModified-onHover-bg: #{darken(#e8f0fe, 5%)};
-  --Card-onModified-onHover-color: #{darken(#4285f4, 10%)};
+  --Card-onModified-onHover-bg: #{color.adjust(#e8f0fe, $lightness: -5%)};
+  --Card-onModified-onHover-color: #{color.adjust(#4285f4, $lightness: -10%)};
   --Cards--unsaved-heading-bg: #e8f0fe;
   --Cards--unsaved-heading-color: #4285f4;
   --Cards-fixedTop-boxShadow: var(--shadows-shadow-normal);
@@ -405,16 +409,28 @@ $Table-strip-bg: transparent;
   --Layout-aside--md-width: #{px2rem(250px)};
   --Layout-aside--sm-width: #{px2rem(150px)};
   --Layout-aside-bg: var(--colors-neutral-fill-2);
-  --Layout-aside-color: #{desaturate(lighten($dark, 40%), 10%)};
-  --Layout-aside-onAcitve-bg: #{saturate(darken($dark, 5%), 2.5%)};
-  --Layout-aside-onHover-bg: #{saturate(darken($dark, 3%), 2.5%)};
+  --Layout-aside-color: #{color.adjust(
+      color.adjust($dark, $lightness: 40%),
+      $saturation: -10%
+    )};
+  --Layout-aside-onAcitve-bg: #{color.adjust(
+      color.adjust($dark, $lightness: -5%),
+      $saturation: 2.5%
+    )};
+  --Layout-aside-onHover-bg: #{color.adjust(
+      color.adjust($dark, $lightness: -3%),
+      $saturation: 2.5%
+    )};
   --Layout-aside-subList-bg: var(--colors-neutral-fill-2);
   --Layout-aside-onAcitve-onHover-bg: var(--Layout-aside-onAcitve-bg);
   --Layout-aside-width: #{px2rem(180px)};
   --Layout-aside-width-collapsed: #{px2rem(60px)};
   --Layout-asideDivider-bg: var(--colors-neutral-line-3);
   --Layout-asideDivider-margin: 0 var(--sizes-size-6);
-  --Layout-asideLabel-color: #{darken(desaturate(lighten($dark, 40%), 10%), 10%)};
+  --Layout-asideLabel-color: #{color.adjust(
+      color.adjust(color.adjust($dark, $lightness: 40%), $saturation: -10%),
+      $lightness: -10%
+    )};
   --Layout-asideLink-color: var(--colors-neutral-text-11);
   --Layout-asideLink-fontSize: var(--fonts-size-8);
   --Layout-asideLink-arrowFontSize: var(--fonts-size-8);
@@ -430,7 +446,10 @@ $Table-strip-bg: transparent;
   --Layout-asideLink-onHover-arrowColor: var(--colors-neutral-text-11);
   --Layout-brand-bg: var(--colors-neutral-fill-2);
   --Layout-brand-color: var(--colors-neutral-text-11);
-  --Layout-brandBar-color: #{desaturate(lighten($dark, 40%), 10%)};
+  --Layout-brandBar-color: #{color.adjust(
+      color.adjust($dark, $lightness: 40%),
+      $saturation: -10%
+    )};
   --Layout-header-bg: var(--colors-neutral-fill-10);
   --Layout-header-boxShadow: none;
   --Layout-header-height: #{px2rem(50px)};
@@ -498,9 +517,12 @@ $Table-strip-bg: transparent;
   --ListItem-onChecked-fieldLabel-color: var(--colors-brand-4);
   --ListItem-onDragging-opacity: 0.1;
   --ListItem-onModified-bg: #e8f0fe;
-  --ListItem-onModified-borderColor: #{darken(#e8f0fe, 10%)};
+  --ListItem-onModified-borderColor: #{color.adjust(#e8f0fe, $lightness: -10%)};
   --ListItem-onModified-color: #4285f4;
-  --ListItem-onModified-fieldLabel-color: #{lighten(#4285f4, 20%)};
+  --ListItem-onModified-fieldLabel-color: #{color.adjust(
+      #4285f4,
+      $lightness: 20%
+    )};
   --ListItem-paddingX: var(--gap-base);
   --ListItem-paddingY: var(--gap-sm);
   --ListItem--onHover-bg: rgba(0, 126, 255, 0.08);
@@ -705,7 +727,7 @@ $Table-strip-bg: transparent;
   --Tooltip-arrow-color: var(--Tooltip-bg);
   --Tooltip-arrow-color--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-arrow-height: #{px2rem(4px)};
-  --Tooltip-arrow-outerColor: #{fade-in($borderColor, 0.05)};
+  --Tooltip-arrow-outerColor: #{color.adjust($borderColor, $alpha: 0.05)};
   --Tooltip-arrow-width: #{px2rem(8px)};
   --Tooltip-bg: var(--background);
   --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
@@ -723,8 +745,11 @@ $Table-strip-bg: transparent;
   --Tooltip-maxWidth: #{px2rem(240px)};
   --Tooltip-minWidth: auto;
   --Tooltip-title-fontWeight: bold;
-  --Tooltip-title-bg: #{darken($white, 3%)};
-  --Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)};
+  --Tooltip-title-bg: #{color.adjust($white, $lightness: -3%)};
+  --Tooltip-title-borderBottom-color: #{color.adjust(
+      color.adjust($white, $lightness: -3%),
+      $lightness: -5%
+    )};
   --Tooltip-title-color: var(--text--loud-color);
   --Tooltip-title-color--dark: #fff;
   --Tooltip-title-paddingX: var(--gap-base);

package/scss/_variables.scss

@@ -1,5 +1,6 @@
 // 这里只放 sass 里的变量，因为有很多颜色计算，为了保持和之前的兼容性所以还保留这些变量，但后续会通过新增 css 自定义属性的方式逐渐替换
 // 类名前缀
+@use 'sass:color';
 $ns: '' !default;
 $remFactor: 16px !default;
 
@@ -433,6 +434,6 @@ $zindex-debug: 4000 !default;
 $zindex-spinner-overlay: 11 !default;
 
 $Form--horizontal-columns: 12;
-$Table-strip-bg: lighten(#f6f8f8, 1%) !default;
+$Table-strip-bg: color.adjust(#f6f8f8, $lightness: 1%) !default;
 $Number-handler-mode: 'vertical';
 $Wizard-steps-liAfterBorder: px2rem(18px) solid transparent !default;

package/scss/components/_array-input.scss

@@ -48,13 +48,13 @@
   &-toolbar {
     margin-top: var(--gap-sm);
 
-    &--dnd {
-      padding-left: 29px;
-    }
-
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+
+    &--dnd {
+      padding-left: 29px;
+    }
   }
 
   &-sortTip {

package/scss/components/_input-box.scss

@@ -1,7 +1,8 @@
 .#{$ns}InputBox {
+  height: var(--input-size-default-height);
+
   @include input-input();
   @include input-border();
-  height: var(--input-size-default-height);
 
   &--inline {
     display: inline-flex;