@arco-themes/react-aiux2026 1.0.0 → 1.0.2

package/variables.less

@@ -423,7 +423,7 @@
 @dark-yellow-8: #FDFA9D;
 @dark-magenta-2: #770850;
 @dark-green-7: #50D266;
-@dark-success-1: rgb(var(~'@{arco-cssvars-prefix}-green-1'));
+@dark-success-1: rgb(0, 77, 68);
 @dark-blue-3: #134CA3;
 @dark-blue-1: #001A4D;
 @dark-pinkpurple-1: #42004D;
@@ -440,13 +440,13 @@
 @dark-pinkpurple-6: #E13DDB;
 @dark-cyan-6: #3FD4CF;
 @dark-primary-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));
-@dark-primary-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));
+@dark-primary-1: rgb(25, 26, 35);
 @dark-cyan-8: #90E9E1;
 @dark-cyan-3: #11838B;
 @danger-6: rgb(229, 46, 45);
 @dark-lime-1: #2A4D00;
 @dark-primary-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));
-@dark-success-3: rgb(var(~'@{arco-cssvars-prefix}-green-3'));
+@dark-success-3: rgb(6, 134, 110);
 @dark-orange-8: #FFCD87;
 @success-4: rgb(87, 217, 175);
 @dark-cyan-7: #66DFD7;
@@ -466,17 +466,17 @@
 @dark-purple-7: #A974E3;
 @dark-primary-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));
 @warning-4: rgb(247, 183, 106);
-@dark-success-2: rgb(var(~'@{arco-cssvars-prefix}-green-2'));
+@dark-success-2: rgb(1, 105, 90);
 @dark-lime-5: #A8DB39;
 @danger-1: rgb(255, 240, 237);
 @dark-primary-7: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-7'));
-@dark-success-5: rgb(var(~'@{arco-cssvars-prefix}-green-5'));
+@dark-success-5: rgb(12, 191, 146);
 @dark-blue-5: #469AFA;
 @dark-purple-8: #C59AED;
 @dark-arcoblue-6: #3C7EFF;
 @dark-gold-6: #F9CC44;
 @dark-gray-9: #dfdfdf;
-@dark-warning-7: rgb(var(~'@{arco-cssvars-prefix}-orange-7'));
+@dark-warning-7: rgb(255, 179, 87);
 @dark-pinkpurple-10: #FFF2FD;
 @dark-yellow-10: #FEFFF0;
 @dark-green-10: #EBFFEC;
@@ -511,7 +511,7 @@
 @dark-danger-9: rgb(var(~'@{arco-cssvars-prefix}-red-9'));
 @dark-gray-8: #c5c5c5;
 @dark-magenta-8: #FB9EC8;
-@dark-success-4: rgb(var(~'@{arco-cssvars-prefix}-green-4'));
+@dark-success-4: rgb(1, 162, 129);
 @dark-danger-7: rgb(var(~'@{arco-cssvars-prefix}-red-7'));
 @dark-lime-8: #DEF198;
 @dark-arcoblue-10: #EAF4FF;
@@ -524,7 +524,7 @@
 @link-4: rgb(106, 149, 246);
 @dark-warning-5: rgb(var(~'@{arco-cssvars-prefix}-orange-5'));
 @dark-magenta-5: #F545A6;
-@dark-success-6: rgb(var(~'@{arco-cssvars-prefix}-green-6'));
+@dark-success-6: rgb(47, 204, 159);
 @dark-lime-6: #B8E24B;
 @warning-6: rgb(241, 134, 25);
 @link-6: rgb(24, 79, 242);
@@ -540,7 +540,7 @@
 @dark-link-2: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));
 @primary-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));
 @dark-blue-2: #052F78;
-@dark-success-7: rgb(var(~'@{arco-cssvars-prefix}-green-7'));
+@dark-success-7: rgb(87, 217, 175);
 @warning-8: rgb(var(~'@{arco-cssvars-prefix}-orange-8'));
 @danger-3: rgb(245, 162, 153);
 @dark-link-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));
@@ -555,7 +555,7 @@
 @danger-7: rgb(191, 30, 34);
 @dark-warning-2: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));
 @dark-purple-3: #3E138F;
-@dark-link-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));
+@dark-link-1: rgb(25, 26, 35);
 @dark-green-6: #27C346;
 @dark-danger-4: rgb(var(~'@{arco-cssvars-prefix}-red-4'));
 @dark-link-3: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-3'));
@@ -583,41 +583,41 @@
 @dark-link-5: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-5'));
 @dark-danger-1: rgb(var(~'@{arco-cssvars-prefix}-red-1'));
 @orange-4: #FFB65D;
-@dark-color-text-1: rgba(255, 255, 255, 0.9);
+@dark-color-text-1: rgb(255, 255, 255);
 @color-text-1: rgb(15, 19, 31);
 @color-bg-white: #ffffff;
 @color-white: #ffffff;
-@dark-color-text-2: rgba(255, 255, 255, 0.7);
-@dark-color-white: rgba(255, 255, 255, 0.9);
+@dark-color-text-2: rgba(255,255,255,0.8);
+@dark-color-white: rgb(255, 255, 255);
 @color-text-3: rgb(100, 108, 133);
 @color-text-2: rgb(41, 47, 66);
 @color-text-4: rgb(156, 163, 184);
-@dark-color-text-3: rgba(255, 255, 255, 0.5);
+@dark-color-text-3: rgba(255,255,255,0.7);
 @color-border-2: rgb(223, 226, 235);
 @color-fill-4: rgb(195, 199, 212);
 @color-fill-2: rgb(245, 247, 252);
 @color-fill-3: rgb(235, 238, 245);
-@dark-color-bg-1: #17171A;
+@dark-color-bg-1: rgb(25, 26, 35);
 @dark-color-fill-4: rgba(255, 255, 255, 0.16);
-@dark-color-bg-white: #f6f6f6;
-@dark-color-border-1: @dark-gray-2;
+@dark-color-bg-white: rgba(255,255,255,0.01);
+@dark-color-border-1: rgba(255,255,255,0.04);
 @color-bg-1: #ffffff;
 @color-border-1: rgb(235, 238, 245);
-@dark-color-border-2: @dark-gray-3;
+@dark-color-border-2: rgba(255,255,255,0.08);
 @color-fill-1: rgb(250, 251, 255);
-@dark-color-border-4: @dark-gray-6;
-@dark-color-fill-1: rgba(255, 255, 255, 0.04);
+@dark-color-border-4: rgba(255,255,255,0.2);
+@dark-color-fill-1: rgba(255,255,255,0.02);
 @color-border-4: rgb(156, 163, 184);
 @dark-color-fill-2: rgba(255, 255, 255, 0.08);
-@dark-color-border-3: @dark-gray-4;
+@dark-color-border-3: rgba(255,255,255,0.12);
 @dark-color-fill-3: rgba(255, 255, 255, 0.12);
 @color-bg-3: #ffffff;
-@dark-color-bg-2: #232324;
-@dark-color-bg-4: #313132;
-@dark-color-bg-5: #373739;
+@dark-color-bg-2: rgb(26, 27, 38);
+@dark-color-bg-4: rgb(25, 26, 34);
+@dark-color-bg-5: rgb(33, 35, 46);
 @color-bg-5: #ffffff;
 @color-bg-4: #ffffff;
-@dark-color-bg-3: #2a2a2b;
+@dark-color-bg-3: rgb(29, 30, 43);
 @color-bg-2: #ffffff;
 @color-border-3: rgb(195, 199, 212);
 @textarea-prefix-cls: ~'@{prefix}-textarea';
@@ -802,118 +802,118 @@
 @color-prefix-cls: ~'@{prefix}-color';
 @btn-secondary-color-text_hover: @color-primary-5;
 @btn-secondary-color-text_active: @color-primary-7;
-@btn-secondary-color-bg: @color-bg-2;
-@btn-secondary-color-bg_disabled: @color-fill-2;
-@btn-secondary-color-bg_hover: @color-bg-2;
-@btn-secondary-color-bg_active: @color-bg-2;
-@btn-secondary-color-border: @color-border-3;
-@btn-secondary-color-border_disabled: @color-border-3;
+@btn-secondary-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-secondary-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-secondary-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-secondary-color-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-secondary-color-border: var(~'@{arco-cssvars-prefix}-color-border-3');
+@btn-secondary-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-secondary-color-border_hover: @color-primary-5;
 @btn-secondary-color-border_active: @color-primary-7;
 @btn-border-radius: @border-radius-medium;
-@btn-secondary-color-text_warning_disabled: @color-text-4;
+@btn-secondary-color-text_warning_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
 @btn-secondary-color-text_warning_hover: @color-warning-5;
 @btn-secondary-color-text_warning_active: @color-warning-7;
-@btn-secondary-color-bg_warning: @color-bg-2;
-@btn-secondary-color-bg_warning_disabled: @color-fill-2;
-@btn-secondary-color-bg_warning_hover: @color-bg-2;
-@btn-secondary-color-bg_warning_active: @color-bg-2;
+@btn-secondary-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-secondary-color-bg_warning_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-secondary-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-secondary-color-bg_warning_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @btn-secondary-color-border_warning: @color-warning-6;
-@btn-secondary-color-border_warning_disabled: @color-border-3;
+@btn-secondary-color-border_warning_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-secondary-color-border_warning_active: @color-warning-7;
 @btn-secondary-color-border_warning_hover: @color-warning-5;
-@btn-secondary-color-text_danger_disabled: @color-text-4;
+@btn-secondary-color-text_danger_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
 @btn-secondary-color-text_danger_hover: @color-danger-5;
 @btn-secondary-color-text_danger_active: @color-danger-7;
-@btn-secondary-color-bg_danger: @color-bg-white;
-@btn-secondary-color-bg_danger_disabled: @color-fill-2;
-@btn-secondary-color-bg_danger_hover: @color-bg-white;
-@btn-secondary-color-bg_danger_active: @color-bg-white;
+@btn-secondary-color-bg_danger: var(~'@{arco-cssvars-prefix}-color-bg-white');
+@btn-secondary-color-bg_danger_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-secondary-color-bg_danger_hover: var(~'@{arco-cssvars-prefix}-color-bg-white');
+@btn-secondary-color-bg_danger_active: var(~'@{arco-cssvars-prefix}-color-bg-white');
 @btn-secondary-color-border_danger: @color-danger-6;
-@btn-secondary-color-border_danger_disabled: @color-border-3;
+@btn-secondary-color-border_danger_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-secondary-color-border_danger_hover: @color-danger-5;
 @btn-secondary-color-border_danger_active: @color-danger-7;
-@btn-secondary-color-text_success_disabled: @color-text-4;
+@btn-secondary-color-text_success_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
 @btn-secondary-color-text_success_hover: @color-success-5;
 @btn-secondary-color-text_success_active: @color-success-7;
-@btn-secondary-color-bg_success: @color-bg-white;
-@btn-secondary-color-bg_success_disabled: @color-fill-2;
-@btn-secondary-color-bg_success_hover: @color-bg-white;
-@btn-secondary-color-bg_success_active: @color-bg-white;
+@btn-secondary-color-bg_success: var(~'@{arco-cssvars-prefix}-color-bg-white');
+@btn-secondary-color-bg_success_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-secondary-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-bg-white');
+@btn-secondary-color-bg_success_active: var(~'@{arco-cssvars-prefix}-color-bg-white');
 @btn-secondary-color-border_success: @color-success-6;
-@btn-secondary-color-border_success_disabled: @color-border-3;
+@btn-secondary-color-border_success_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-secondary-color-border_success_hover: @color-success-5;
 @btn-secondary-color-border_success_active: @color-success-7;
-@btn-primary-color-border_disabled: @color-border-3;
-@btn-primary-color-bg_disabled: @color-fill-2;
-@btn-primary-color-text_disabled: @color-text-4;
-@btn-primary-color-text_warning_disabled: @color-text-4;
-@btn-primary-color-bg_warning_disabled: @color-fill-2;
-@btn-primary-color-border_warning_disabled: @color-border-3;
-@btn-primary-color-text_danger_disabled: @color-text-4;
-@btn-primary-color-bg_danger_disabled: @color-fill-2;
-@btn-primary-color-border_danger_disabled: @color-border-3;
+@btn-primary-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
+@btn-primary-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-primary-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@btn-primary-color-text_warning_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@btn-primary-color-bg_warning_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-primary-color-border_warning_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
+@btn-primary-color-text_danger_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@btn-primary-color-bg_danger_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-primary-color-border_danger_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-primary-color-text_success_disabled: @color-text-4;
-@btn-primary-color-bg_success_disabled: @color-fill-2;
-@btn-primary-color-border_success_disabled: @color-border-3;
-@btn-dashed-color-bg: @color-bg-2;
-@btn-dashed-color-bg_hover: @color-bg-2;
-@btn-dashed-color-bg_active: @color-bg-2;
-@btn-dashed-color-border: @color-border-3;
-@btn-dashed-color-border_disabled: @color-border-3;
+@btn-primary-color-bg_success_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-primary-color-border_success_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
+@btn-dashed-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-dashed-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-dashed-color-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-dashed-color-border: var(~'@{arco-cssvars-prefix}-color-border-3');
+@btn-dashed-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-dashed-color-border_hover: @color-primary-5;
 @btn-dashed-color-border_active: @color-primary-7;
 @btn-dashed-color-text_hover: @color-primary-5;
 @btn-dashed-color-text_active: @color-primary-7;
-@btn-dashed-color-text_warning_disabled: @color-text-4;
-@btn-dashed-color-bg_warning: @color-bg-2;
-@btn-dashed-color-bg_warning_disabled: @color-fill-2;
-@btn-dashed-color-bg_warning_hover: @color-bg-2;
-@btn-dashed-color-bg_warning_active: @color-bg-2;
+@btn-dashed-color-text_warning_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@btn-dashed-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-dashed-color-bg_warning_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-dashed-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-dashed-color-bg_warning_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @btn-dashed-color-border_warning: @color-warning-6;
-@btn-dashed-color-border_warning_disabled: @color-border-3;
+@btn-dashed-color-border_warning_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-dashed-color-border_warning_hover: @color-warning-5;
-@btn-dashed-color-text_danger_disabled: @color-text-4;
+@btn-dashed-color-text_danger_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
 @btn-dashed-color-text_danger_hover: @color-danger-5;
 @btn-dashed-color-text_danger_active: @color-danger-7;
-@btn-dashed-color-bg_danger: @color-bg-2;
-@btn-dashed-color-bg_danger_disabled: @color-fill-2;
-@btn-dashed-color-bg_danger_hover: @color-bg-2;
-@btn-dashed-color-bg_danger_active: @color-bg-2;
+@btn-dashed-color-bg_danger: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-dashed-color-bg_danger_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-dashed-color-bg_danger_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-dashed-color-bg_danger_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @btn-dashed-color-border_danger: @color-danger-6;
-@btn-dashed-color-border_danger_disabled: @color-border-3;
+@btn-dashed-color-border_danger_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-dashed-color-border_danger_hover: @color-danger-5;
-@btn-dashed-color-text_success_disabled: @color-text-4;
+@btn-dashed-color-text_success_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
 @btn-dashed-color-text_success_hover: @color-success-5;
 @btn-dashed-color-text_success_active: @color-success-7;
-@btn-dashed-color-bg_success: @color-bg-2;
-@btn-dashed-color-bg_success_disabled: @color-fill-2;
-@btn-dashed-color-bg_success_active: @color-bg-2;
-@btn-dashed-color-bg_success_hover: @color-bg-2;
+@btn-dashed-color-bg_success: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-dashed-color-bg_success_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-dashed-color-bg_success_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@btn-dashed-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @btn-dashed-color-border_success: @color-success-6;
-@btn-dashed-color-border_success_disabled: @color-border-3;
+@btn-dashed-color-border_success_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-dashed-color-border_success_active: @color-success-7;
 @btn-outline-color-text_disabled: @color-text-4;
 @btn-outline-color-bg_disabled: @color-transparent;
 @btn-outline-color-bg_hover: @color-transparent;
 @btn-outline-color-bg: @color-transparent;
-@btn-outline-color-border_disabled: @color-border-3;
+@btn-outline-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-outline-color-text_warning_disabled: @color-text-4;
 @btn-outline-color-bg_warning: @color-transparent;
 @btn-outline-color-bg_warning_disabled: @color-transparent;
 @btn-outline-color-bg_warning_active: @color-transparent;
-@btn-outline-color-border_warning_disabled: @color-border-3;
+@btn-outline-color-border_warning_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-outline-color-text_danger_disabled: @color-text-4;
 @btn-outline-color-bg_danger: @color-transparent;
 @btn-outline-color-bg_danger_disabled: @color-transparent;
 @btn-outline-color-bg_danger_active: @color-transparent;
-@btn-outline-color-border_danger_disabled: @color-border-3;
+@btn-outline-color-border_danger_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-outline-color-text_success_disabled: @color-text-4;
 @btn-outline-color-bg_success: @color-transparent;
 @btn-outline-color-bg_success_disabled: @color-transparent;
 @btn-outline-color-bg_success_hover: @color-transparent;
 @btn-outline-color-bg_success_active: @color-transparent;
-@btn-outline-color-border_success_disabled: @color-border-3;
+@btn-outline-color-border_success_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @btn-text-color-text_disabled: @color-text-4;
 @btn-text-color-bg_hover: @color-transparent;
 @btn-text-color-bg_active: @color-transparent;
@@ -956,36 +956,36 @@
 @link-color-text_warning_active: @color-warning-7;
 @link-color-text_warning_disabled: @color-text-4;
 @link-margin-icon-right: @spacing-2;
-@divider-color-bg: @color-border-2;
+@divider-color-bg: var(~'@{arco-cssvars-prefix}-color-border-2');
 @avatar-color-bg: @color-primary-4;
 @badge-size-dot-width: @size-2;
-@card-color-border: @color-border-2;
+@card-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
 @card-border-radius: @border-radius-large;
-@collapse-color-border: @color-border-2;
-@collapse-title-color-border: @color-border-2;
-@collapse-content-color-text_disabled: @color-text-4;
-@collapse-content-color-bg: @color-bg-2;
-@collapse-item-color-border: @color-border-2;
-@collapse-color-expand-icon: @color-text-2;
+@collapse-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@collapse-title-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@collapse-content-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@collapse-content-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@collapse-item-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@collapse-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
 @collapse-expand-icon-color-bg: @color-transparent;
-@descriptions-color-text-value: @color-text-2;
-@collapse-content-color-text: @color-text-2;
-@descriptions-color-border: @color-border-2;
-@list-border-color: @color-border-2;
-@list-color-text: @color-text-2;
-@popup-color-border: @color-transparent;
-@table-color-border: @color-border-2;
-@table-color-bg-header-cell: @color-bg-2;
-@table-color-text-header-cell: @color-text-1;
-@table-color-text-body-cell: @color-text-2;
-@table-color-bg-header-sorted-cell: @color-bg-2;
-@table-color-bg-header-sorted-cell_hover: @color-bg-2;
-@table-color-bg-body-sorted-cell: @color-bg-2;
-@table-color-header-sorter-icon: @color-text-2;
+@descriptions-color-text-value: var(~'@{arco-cssvars-prefix}-color-text-2');
+@collapse-content-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@descriptions-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@list-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
+@list-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@popup-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@table-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@table-color-bg-header-cell: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@table-color-text-header-cell: var(~'@{arco-cssvars-prefix}-color-text-2');
+@table-color-text-body-cell: var(~'@{arco-cssvars-prefix}-color-text-2');
+@table-color-bg-header-sorted-cell: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@table-color-bg-header-sorted-cell_hover: @color-transparent;
+@table-color-bg-body-sorted-cell: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@table-color-header-sorter-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
 @table-color-bg-header-filters-icon_hover: @color-transparent;
 @table-color-border-filters-popup: @color-transparent;
-@table-color-expand-icon-border: @color-text-2;
-@table-color-expand-icon: @color-text-2;
+@table-color-expand-icon-border: var(~'@{arco-cssvars-prefix}-color-text-2');
+@table-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
 @table-color-expand-icon_hover: @color-primary-5;
 @table-color-bg-expand-icon: @color-transparent;
 @table-color-expand-icon-border_hover: @color-primary-5;
@@ -995,220 +995,220 @@
 @table-color-bg-expand-content_hover: @color-primary-1;
 @table-color-bg-body-row_hover: @color-primary-1;
 @tabs-line-color-title-bg_hover: @color-transparent;
-@tabs-color-title-text_disabled_active: @color-text-4;
-@tabs-line-color-header-border: @color-border-2;
-@tabs-line-color-ink-bg_disabled: @color-text-4;
-@tabs-card-color-title-border: @color-border-2;
+@tabs-color-title-text_disabled_active: var(~'@{arco-cssvars-prefix}-color-text-4');
+@tabs-line-color-header-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@tabs-line-color-ink-bg_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@tabs-card-color-title-border: var(~'@{arco-cssvars-prefix}-color-border-2');
 @tabs-card-color-title-bg_hover: @color-transparent;
 @tabs-card-color-title-bg_disabled: @color-transparent;
 @tabs-rounded-color-title-bg_hover: @color-primary-1;
 @tabs-rounded-color-title-bg_active: @color-primary-1;
-@tabs-text-color-title-bg_hover: @color-primary-1;
+@tabs-text-color-title-bg_hover: @color-transparent;
 @tabs-text-color-title-bg_disabled_active: @color-transparent;
-@tabs-capsule-color-header-bg: @color-fill-2;
+@tabs-capsule-color-header-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
 @tabs-capsule-color-title-bg_hover: @color-transparent;
 @tabs-capsule-color-separator-bg: @color-border-2;
-@tabs-text-color-separator-bg: @color-border-2;
-@tag-default-color-text: @color-text-2;
+@tabs-text-color-separator-bg: var(~'@{arco-cssvars-prefix}-color-border-2');
+@tag-default-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
 @timeline-dot-size-width: @size-2;
-@timeline-color-line-bg: @color-border-2;
+@timeline-color-line-bg: var(~'@{arco-cssvars-prefix}-color-border-2');
 @tooltip-border-radius: @border-radius-medium;
-@tooltip-color-bg: @color-bg-5;
-@tooltip-color-text: @color-text-2;
-@tree-color-title-text: @color-text-2;
-@tree-color-title-text_hover: @color-text-2;
+@tooltip-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@tooltip-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@tree-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@tree-color-title-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
 @tree-color-title-bg_hover: @color-primary-1;
 @tree-node-border-radius: @border-radius-small;
-@tree-color-title-text_active_disabled: @color-text-4;
+@tree-color-title-text_active_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
 @tree-showline-color-plus-icon-bg: @color-transparent;
-@tree-showline-color-line-bg: @color-border-2;
-@input-color-bg: @color-bg-2;
-@input-color-border: @color-border-3;
-@input-color-placeholder-text: @color-text-4;
-@input-color-border_disabled: @color-border-3;
-@input-color-bg_hover: @color-bg-2;
+@tree-showline-color-line-bg: var(~'@{arco-cssvars-prefix}-color-border-2');
+@input-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@input-color-border: var(~'@{arco-cssvars-prefix}-color-border-3');
+@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-4');
+@input-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
+@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @input-color-border_hover: @color-primary-5;
-@input-color-bg_error: @color-bg-2;
+@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @input-color-border_error: @color-danger-6;
-@input-color-bg_error_hover: @color-bg-2;
+@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @input-color-border_error_hover: @color-danger-5;
-@input-color-bg_error_focus: @color-bg-2;
+@input-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @auto-complete-popup-color-border: @color-transparent;
 @auto-complete-option-color-bg_selected: @color-transparent;
 @auto-complete-option-color-bg_hover: @color-primary-1;
 @auto-complete-option-color-text_selected: @color-primary-6;
-@select-color-border_default: @color-border-3;
-@select-color-placeholder_default: @color-text-4;
-@select-color-bg_default: @color-bg-2;
+@select-color-border_default: var(~'@{arco-cssvars-prefix}-color-border-3');
+@select-color-placeholder_default: var(~'@{arco-cssvars-prefix}-color-text-4');
+@select-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @select-color-icon-bg_hover: @color-primary-1;
-@select-color-border_disabled: @color-border-3;
+@select-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @select-color-placeholder_focused: @color-text-4;
-@select-color-bg_default_hover: @color-bg-2;
+@select-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @select-color-border_default_hover: @color-primary-5;
-@select-color-bg_error: @color-bg-2;
+@select-color-bg_error: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @select-color-border_error: @color-danger-6;
 @select-color-bg_error_hover: @color-bg-2;
 @select-color-border_error_hover: @color-danger-5;
-@select-popup-option-color-bg_selected: @color-primary-1;
-@select-popup-option-color-text_selected: @color-text-2;
+@select-popup-option-color-bg_selected: @color-transparent;
+@select-popup-option-color-text_selected: @color-primary-6;
 @select-popup-option-font-weight_selected: @font-weight-400;
 @select-popup-option-color-bg_hover: @color-primary-1;
 @cascader-color-item-bg_hover: @color-primary-1;
 @cascader-color-item-bg_active: @color-primary-1;
 @cascader-color-item-bg_disabled_active: @color-transparent;
 @checkbox-mask-border-width: @border-1;
-@checkbox-mask-color-border: @color-border-3;
+@checkbox-mask-color-border: var(~'@{arco-cssvars-prefix}-color-border-3');
 @checkbox-mask-color-border_hover: @color-primary-5;
-@checkbox-mask-color-bg_checked_disabled: @color-fill-2;
+@checkbox-mask-color-bg_checked_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
 @checkbox-mask-color-border_checked: @color-transparent;
-@checkbox-mask-color-border_checked_disabled: @color-border-3;
-@checkbox-color-check-icon_disabled: @color-text-4;
-@checkbox-mask-color-border_disabled: @color-border-3;
-@color-preview-border-color: @color-border-3;
+@checkbox-mask-color-border_checked_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
+@checkbox-color-check-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@checkbox-mask-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
+@color-preview-border-color: var(~'@{arco-cssvars-prefix}-color-border-3');
 @color-input-border-radius: @border-radius-medium;
 @color-value-font-color: @color-text-2;
-@color-input-bg-color: @color-fill-2;
+@color-input-bg-color: var(~'@{arco-cssvars-prefix}-color-fill-2');
 @color-value-font-color_disabled: @color-text-4;
-@picker-color-bg: @color-bg-2;
-@picker-color-border: @color-border-3;
-@picker-color-border_disabled: @color-border-3;
-@picker-color-bg_hover: @color-bg-2;
+@picker-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@picker-color-border: var(~'@{arco-cssvars-prefix}-color-border-3');
+@picker-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
+@picker-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @picker-color-border_hover: @color-primary-5;
 @picker-range-color-bg-input_focus: @color-transparent;
-@picker-panel-color-border: @color-border-2;
+@picker-panel-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
 @picker-panel-color-bg-cell_hover: @color-primary-1;
 @picker-color-bg-switch-icon_hover: @color-primary-1;
-@picker-color-bg-cell-disabled: @color-fill-2;
-@picker-color-text-week-list-item: @color-text-2;
-@picker-color-cell-text-in-view: @color-text-2;
+@picker-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@picker-color-text-week-list-item: var(~'@{arco-cssvars-prefix}-color-text-2');
+@picker-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-2');
 @picker-color-bg-cell-hover-in-range: @color-primary-1;
-@form-color-bg_error: @color-bg-2;
+@form-color-bg_error: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @form-color-border_error: @color-danger-6;
 @form-color-bg_error_hover: @color-bg-2;
 @form-color-border_error_hover: @color-danger-5;
 @form-color-border_error_focus: @color-danger-7;
-@form-color-bg_warning: @color-bg-2;
+@form-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @form-color-border_warning: @color-warning-6;
 @form-color-bg_warning_hover: @color-bg-2;
 @form-color-border_warning_hover: @color-warning-5;
 @form-color-border_warning_focus: @color-warning-7;
-@form-color-bg_validating: @color-bg-2;
+@form-color-bg_validating: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @form-color-border_validating: @color-primary-6;
 @form-color-bg_validating_hover: @color-bg-2;
 @form-color-border_validating_hover: @color-primary-5;
 @form-color-border_validating_focus: @color-primary-7;
-@form-color-bg_success: @color-bg-white;
+@form-color-bg_success: var(~'@{arco-cssvars-prefix}-color-bg-white');
 @form-color-border_success: @color-success-6;
 @form-color-bg_success_hover: @color-bg-white;
 @form-color-border_success_hover: @color-success-5;
-@input-tag-color-placeholder: @color-text-4;
-@input-tag-color-border_default: @color-border-3;
-@input-tag-color-bg_default: @color-bg-2;
+@input-tag-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-4');
+@input-tag-color-border_default: var(~'@{arco-cssvars-prefix}-color-border-3');
+@input-tag-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @input-tag-color-icon-clear-bg_hover: @color-transparent;
 @input-tag-color-border_default_hover: @color-primary-5;
-@input-tag-color-bg_default_hover: @color-bg-2;
-@input-tag-color-border_disabled: @color-border-3;
+@input-tag-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@input-tag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @input-tag-color-border_error: @color-danger-6;
-@input-tag-color-bg_error: @color-bg-2;
+@input-tag-color-bg_error: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @input-tag-color-border_error_hover: @color-danger-5;
-@input-tag-color-bg_error_hover: @color-bg-2;
+@input-tag-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @input-tag-color-border_error_focus: @color-danger-7;
-@input-tag-color-text_default: @color-text-2;
-@input-tag-tag-color-bg: @color-fill-3;
-@input-tag-tag-color-border: @color-transparent;
-@input-tag-tag-remove-icon-color-bg: @color-primary-1;
-@input-tag-tag-color-bg_focus: @color-fill-3;
+@input-tag-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-2');
+@input-tag-tag-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@input-tag-tag-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@input-tag-tag-remove-icon-color-bg: @color-transparent;
+@input-tag-tag-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-3');
 @input-tag-tag-color-border_focus: @color-transparent;
-@input-tag-tag-remove-icon-color-bg_focus: @color-primary-1;
+@input-tag-tag-remove-icon-color-bg_focus: @color-transparent;
 @input-tag-tag-color-border_disabled: @color-transparent;
-@input-tag-tag-color-bg_disabled: @color-fill-3;
-@input-number-step-button-color-bg_default: @color-bg-2;
+@input-tag-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@input-number-step-button-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @input-number-step-button-color-bg_default_hover: @color-primary-1;
 @input-number-step-button-color-bg_default_active: @color-primary-1;
-@rate-color-bg_default: @color-fill-3;
+@rate-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-3');
 @rate-color-bg_active: @color-badge-7;
-@radio-color-border: @color-border-3;
+@radio-color-border: var(~'@{arco-cssvars-prefix}-color-border-3');
 @radio-border-width: @border-1;
-@radio-mask-bg-color-bg: @color-bg-2;
+@radio-mask-bg-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @radio-color-border_hover: @color-primary-5;
-@radio-color-bg_checked_disabled: @color-border-2;
-@radio-color-dot-bg_checked_disabled: @color-text-4;
-@radio-color-border_disabled: @color-border-3;
+@radio-color-bg_checked_disabled: var(~'@{arco-cssvars-prefix}-color-border-2');
+@radio-color-dot-bg_checked_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@radio-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
 @radio-group-margin-right: @spacing-7;
 @radio-button-color-separator-bg: @color-border-2;
-@slider-color-road-bg_disabled: @color-fill-2;
-@slider-color-bar-bg_disabled: @color-fill-3;
-@slider-color-button-border_disabled: @color-fill-3;
-@slider-color-mark-font: @color-text-2;
-@switch-color-text_off_disabled: @color-text-4;
-@timepicker-color-border: @color-border-2;
+@slider-color-road-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@slider-color-bar-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@slider-color-button-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@slider-color-mark-font: var(~'@{arco-cssvars-prefix}-color-text-2');
+@switch-color-text_off_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@timepicker-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
 @timepicker-color-bg-cell_hover: @color-primary-1;
 @timepicker-color-bg-cell_active: @color-primary-1;
-@transfer-border-color: @color-border-2;
-@transfer-color-bg-header: @color-fill-2;
+@transfer-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
+@transfer-color-bg-header: var(~'@{arco-cssvars-prefix}-color-fill-2');
 @transfer-item-color-bg_hover: @color-primary-1;
-@transfer-color-bg-icon: @color-bg-white;
-@upload-text-item-color-bg: @color-fill-2;
+@transfer-color-bg-icon: var(~'@{arco-cssvars-prefix}-color-bg-white');
+@upload-text-item-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
 @upload-text-item-color-reupload-icon_hover: @color-primary-5;
 @upload-text-item-color-text_error: @color-danger-6;
 @upload-text-item-color-progress-bg_hover_active: @color-primary-6;
-@upload-picture-text-item-color-bg_error: @color-fill-2;
-@upload-picture-text-item-color-text_success: @color-text-1;
-@upload-picture-text-item-color-text_uploading: @color-text-1;
-@upload-picture-color-bg: @color-bg-2;
-@upload-picture-color-border: @color-border-3;
+@upload-picture-text-item-color-bg_error: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@upload-picture-text-item-color-text_success: var(~'@{arco-cssvars-prefix}-color-text-1');
+@upload-picture-text-item-color-text_uploading: var(~'@{arco-cssvars-prefix}-color-text-1');
+@upload-picture-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@upload-picture-color-border: var(~'@{arco-cssvars-prefix}-color-border-3');
 @upload-picture-color-border_hover: @color-primary-5;
-@upload-picture-color-bg_hover: @color-bg-2;
+@upload-picture-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @upload-picture-color-text_hover: @color-primary-5;
-@upload-picture-color-bg_disabled: @color-fill-2;
-@upload-picture-color-border_disabled: @color-border-3;
-@upload-picture-color-text: @color-text-2;
-@upload-drag-color-border: @color-border-3;
-@upload-drag-color-bg: @color-bg-2;
-@upload-drag-color-bg_hover: @color-bg-2;
+@upload-picture-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@upload-picture-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
+@upload-picture-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@upload-drag-color-border: var(~'@{arco-cssvars-prefix}-color-border-3');
+@upload-drag-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@upload-drag-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
 @upload-drag-color-border_hover: @color-primary-5;
 @upload-drag-color-icon_hover: @color-primary-5;
-@upload-drag-color-bg_disabled: @color-fill-2;
-@upload-drag-color-border_disabled: @color-border-3;
-@drawer-color-content-text: @color-text-2;
-@drawer-color-border: @color-border-2;
-@message-normal-color-border: @color-transparent;
-@message-info-color-border: @color-transparent;
-@message-success-color-border: @color-transparent;
-@message-warning-color-border: @color-transparent;
-@message-error-color-border: @color-transparent;
-@message-loading-color-border: @color-transparent;
-@modal-color-content-text: @color-text-2;
-@modal-color-border: @color-transparent;
+@upload-drag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@upload-drag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-border-3');
+@drawer-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@drawer-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@message-normal-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@message-info-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@message-success-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@message-warning-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@message-error-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@message-loading-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@modal-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@modal-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
 @modal-simple-align-footer: right;
 @modal-simple-align-header: left;
-@notification-normal-color-text-content: @color-text-2;
-@notification-normal-color-border: @color-transparent;
-@timeline-color-content-text: @color-text-2;
-@dropdown-color-border: @color-transparent;
-@dropdown-option-color-text_default: @color-text-2;
+@notification-normal-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-2');
+@notification-normal-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@timeline-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@dropdown-color-border: var(~'@{arco-cssvars-prefix}-color-border-1');
+@dropdown-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-2');
 @dropdown-option-color-text_selected: @color-primary-6;
 @dropdown-option-color-text_hover: @color-text-2;
 @dropdown-option-color-bg_hover: @color-primary-1;
 @dropdown-option-color-bg_selected: @color-transparent;
-@badge-color-status-text: @color-text-2;
-@input-color-text: @color-text-2;
-@cascader-color-item-text: @color-text-2;
-@checkbox-color-text: @color-text-2;
-@radio-color-text: @color-text-2;
-@select-color-text_default: @color-text-2;
-@select-popup-option-color-text_default: @color-text-2;
-@select-popup-option-color-text_hover: @color-text-2;
-@timepicker-color-text-cell: @color-text-2;
+@badge-color-status-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@cascader-color-item-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@checkbox-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@radio-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@select-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-2');
+@select-popup-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-2');
+@select-popup-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
+@timepicker-color-text-cell: var(~'@{arco-cssvars-prefix}-color-text-2');
 @timepicker-color-extra-text: @color-text-2;
-@transfer-item-color_default: @color-text-2;
+@transfer-item-color_default: var(~'@{arco-cssvars-prefix}-color-text-2');
 @transfer-item-color_hover: @color-text-2;
-@upload-text-item-color-text: @color-text-2;
+@upload-text-item-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
 @upload-drag-color-text: @color-text-1;
-@message-normal-color-content: @color-text-2;
+@message-normal-color-content: var(~'@{arco-cssvars-prefix}-color-text-2');
 @message-normal-color-icon: @color-text-2;
 @notification-normal-color-icon: @color-text-2;
-@pagination-color-text-total: @color-text-2;
+@pagination-color-text-total: var(~'@{arco-cssvars-prefix}-color-text-2');
 @pagination-color-bg-item_hover: @color-primary-1;
 @pagination-color-bg-item_active_disabled: @color-fill-2;
 @pagination-color-item-text_active_disabled: @color-text-4;
@@ -1216,73 +1216,73 @@
 @pagination-color-icon-arrow-text_hover: @color-text-2;
 @pagination-simple-color-icon-arrow-text_hover: @color-text-2;
 @pagination-simple-color-icon-arrow-bg_hover: @color-primary-1;
-@menu-light-color-bg: @color-fill-2;
-@menu-light-color-icon_default: @color-text-1;
-@menu-light-color-item_default: @color-text-1;
-@menu-light-color-bg-item_hover: @color-bg-2;
-@menu-light-color-item_hover: @color-text-1;
-@menu-light-color-icon_hover: @color-text-1;
+@menu-light-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@menu-light-color-icon_default: @color-text-2;
+@menu-light-color-item_default: @color-text-2;
+@menu-light-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@menu-light-color-item_hover: @color-text-2;
+@menu-light-color-icon_hover: @color-text-2;
 @menu-light-color-bg-item_selected: @color-bg-2;
 @menu-color-border-popup: @color-transparent;
 @slider-color-input_range_content-bg: @color-text-4;
-@breadcrumb-color-text: @color-text-3;
-@divider-color-text: @color-text-2;
+@breadcrumb-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');
+@divider-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
 @card-color-action_hover: @color-primary-5;
-@input-color-bg_focus: @color-bg-2;
-@input-color-addon-text: @color-text-2;
-@input-color-addon-bg: @color-fill-2;
+@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@input-color-addon-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
 @input-color-addon-border: @color-transparent;
-@input-group-color-separator-border: @color-transparent;
-@picker-color-placeholder: @color-text-4;
-@upload-text-item-color-file-icon: @color-text-2;
+@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-border-3');
+@picker-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-4');
+@upload-text-item-color-file-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
 @upload-text-item-color-link: @color-link-6;
-@upload-text-item-color-reupload-icon: @color-text-2;
-@upload-text-item-color-file-icon_success: @color-text-2;
+@upload-text-item-color-reupload-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@upload-text-item-color-file-icon_success: var(~'@{arco-cssvars-prefix}-color-text-2');
 @drawer-size-header-height: @size-16;
-@message-normal-color-bg: @color-bg-5;
-@message-color-close-icon: @color-text-2;
-@message-info-color-content: @color-text-2;
-@message-success-color-content: @color-text-2;
-@message-info-color-bg: @color-bg-5;
-@message-success-color-bg: @color-bg-5;
-@message-warning-color-bg: @color-bg-5;
-@message-warning-color-content: @color-text-2;
-@message-error-color-bg: @color-bg-5;
-@message-error-color-content: @color-text-2;
-@message-loading-color-bg: @color-bg-5;
-@message-loading-color-content: @color-text-2;
-@result-color-subtitle-text: @color-text-3;
+@message-normal-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@message-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@message-info-color-content: var(~'@{arco-cssvars-prefix}-color-text-2');
+@message-success-color-content: var(~'@{arco-cssvars-prefix}-color-text-2');
+@message-info-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@message-success-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@message-warning-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@message-warning-color-content: var(~'@{arco-cssvars-prefix}-color-text-2');
+@message-error-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@message-error-color-content: var(~'@{arco-cssvars-prefix}-color-text-2');
+@message-loading-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@message-loading-color-content: var(~'@{arco-cssvars-prefix}-color-text-2');
+@result-color-subtitle-text: var(~'@{arco-cssvars-prefix}-color-text-3');
 @menu-light-color-bg-button: @color-fill-2;
 @menu-light-color-bg-button_hover: @color-fill-2;
 @menu-light-color-button: @color-text-1;
-@breadcrumb-color-icon: @color-text-2;
+@breadcrumb-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
 @breadcrumb-color-separator: @color-text-3;
 @breadcrumb-color-bg_hover: @color-transparent;
 @breadcrumb-color-link-text_hover: @color-link-5;
-@steps-circle-color-item-title_finish: @color-text-2;
-@steps-circle-color-item-title_process: @color-text-2;
-@steps-circle-color-item-title_error: @color-text-2;
-@steps-circle-color-item-bg_wait: @color-fill-2;
+@steps-circle-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-2');
+@steps-circle-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-2');
+@steps-circle-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-2');
+@steps-circle-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-2');
 @steps-circle-color-item-tail_wait: @color-border-2;
-@steps-dot-color-item-title_finish: @color-text-2;
-@steps-dot-color-item-title_error: @color-text-2;
-@steps-dot-color-item-title_process: @color-text-2;
+@steps-dot-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-2');
+@steps-dot-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-2');
+@steps-dot-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-2');
 @steps-dot-color-item-tail_wait: @color-border-2;
-@resizeBox-trigger-color-icon: @color-text-2;
-@resizeBox-trigger-color-background: @color-fill-3;
-@typography-color-text: @color-text-2;
-@typography-color-blockquote-border-left: @color-text-4;
+@resizeBox-trigger-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@resizeBox-trigger-color-background: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@typography-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@typography-color-blockquote-border-left: var(~'@{arco-cssvars-prefix}-color-text-4');
 @typography-color-bg-icon-copy_hover: @color-transparent;
 @typography-color-bg-icon-edit_hover: @color-transparent;
-@btn-primary-color-text_hover: @color-white;
-@btn-primary-color-text_active: @color-white;
-@btn-primary-color-text: @color-white;
-@btn-primary-color-text_warning: @color-white;
-@btn-primary-color-text_warning_hover: @color-white;
-@btn-primary-color-text_warning_active: @color-white;
-@btn-primary-color-text_danger: @color-white;
-@btn-primary-color-text_danger_hover: @color-white;
-@btn-primary-color-text_danger_active: @color-white;
+@btn-primary-color-text_hover: var(~'@{arco-cssvars-prefix}-color-white');
+@btn-primary-color-text_active: var(~'@{arco-cssvars-prefix}-color-white');
+@btn-primary-color-text: var(~'@{arco-cssvars-prefix}-color-white');
+@btn-primary-color-text_warning: var(~'@{arco-cssvars-prefix}-color-white');
+@btn-primary-color-text_warning_hover: var(~'@{arco-cssvars-prefix}-color-white');
+@btn-primary-color-text_warning_active: var(~'@{arco-cssvars-prefix}-color-white');
+@btn-primary-color-text_danger: var(~'@{arco-cssvars-prefix}-color-white');
+@btn-primary-color-text_danger_hover: var(~'@{arco-cssvars-prefix}-color-white');
+@btn-primary-color-text_danger_active: var(~'@{arco-cssvars-prefix}-color-white');
 @btn-primary-color-text_success: @color-white;
 @btn-primary-color-text_success_active: @color-white;
 @btn-outline-color-bg_active: @color-transparent;
@@ -1290,8 +1290,8 @@
 @link-padding-horizontal: @spacing-none;
 @link-padding-vertical: @spacing-none;
 @tabs-card-gutter-color-title-bg_hover: @color-transparent;
-@tabs-card-gutter-color-title-bg_disabled: @color-fill-1;
-@tabs-card-gutter-color-title-bg: @color-fill-1;
+@tabs-card-gutter-color-title-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@tabs-card-gutter-color-title-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');
 @typography-operation-margin-left: @spacing-4;
 @typography-color-icon-copy_hover: @color-primary-5;
 @typography-text-color-code-border: @color-border-2;
@@ -1299,33 +1299,33 @@
 @typography-color-icon-edit_hover: @color-primary-5;
 @divider-margin-vertical: @spacing-8;
 @avatar-square-border-radius: @border-radius-large;
-@avatar-color-trigger-icon-button: @color-text-2;
-@avatar-color-trigger-button-bg: @color-fill-2;
+@avatar-color-trigger-icon-button: var(~'@{arco-cssvars-prefix}-color-text-2');
+@avatar-color-trigger-button-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');
 @avatar-color-trigger-button-bg_hover: @color-primary-1;
 @badge-font-status-text-size: @font-size-body-3;
 @card-size-default-height-title: @size-14;
 @card-size-default-padding-horizontal-title: @spacing-9;
 @card-size-default-padding-horizontal-body: @spacing-9;
 @card-size-default-padding-vertical-body: @spacing-9;
-@card-color-title-extra: @color-text-2;
+@card-color-title-extra: var(~'@{arco-cssvars-prefix}-color-text-2');
 @card-margin-top-meta-footer: @spacing-7;
 @card-border-radius-no-border: @border-radius-large;
 @card-size-small-padding-horizontal-title: @spacing-7;
 @card-size-small-padding-horizontal-body: @spacing-7;
-@calendar-color-border: @color-border-2;
-@calendar-color-cell-text-in-view: @color-text-1;
-@calendar-color-bg-cell-disabled: @color-fill-2;
-@calendar-color-cell-text-not-in-view: @color-text-4;
+@calendar-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@calendar-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');
+@calendar-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@calendar-color-cell-text-not-in-view: var(~'@{arco-cssvars-prefix}-color-text-4');
 @calendar-color-bg-switch-icon: @color-transparent;
 @calendar-color-bg-switch-icon_hover: @color-primary-1;
 @collapse-border-radius: @border-radius-medium;
-@collapse-title-color-text: @color-text-2;
+@collapse-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
 @collapse-title-padding-vertical: 9px;
 @collapse-title-padding-horizontal: @spacing-6;
 @collapse-expand-icon-spacing-text: @spacing-2;
-@comment-color-content-text: @color-text-2;
+@comment-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-2');
 @comment-margin-bottom: @spacing-7;
-@empty-color-text: @color-text-1;
+@empty-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
 @empty-spacing-padding: @spacing-7;
 @image-color-description_footer_outer-text: @color-text-3;
 @image-color-footer_outer-text: @color-text-2;
@@ -1348,7 +1348,7 @@
 @table-color-bg-expand-content: @color-transparent;
 @table-size-default-padding-vertical: @spacing-6;
 @tabs-color-title-text_hover: @color-primary-5;
-@tabs-line-padding-title-horizontal_vertical: @spacing-7;
+@tabs-line-padding-title-horizontal_vertical: @spacing-8;
 @tabs-line-margin-title-vertical: @spacing-6;
 @tabs-padding-header-wrapper-vertical: @spacing-3;
 @tabs-card-border-radius: @border-radius-small;
@@ -1363,7 +1363,7 @@
 @tooltip-padding-vertical: @spacing-6;
 @tooltip-mini-padding-vertical: @spacing-4;
 @tree-margin-switcher-icon-right: @spacing-5;
-@tree-color-title-text_highlight: @color-text-2;
+@tree-color-title-text_highlight: var(~'@{arco-cssvars-prefix}-color-text-2');
 @auto-complete-option-color-text_hover: @color-text-2;
 @auto-complete-option-color-text_default: @color-text-2;
 @cascader-padding-item-left: @spacing-6;
@@ -1374,32 +1374,32 @@
 @checkbox-group-size-line-height_vertical: @size-8;
 @input-border-radius: @border-radius-medium;
 @picker-input-border-radius: @border-radius-medium;
-@picker-panel-color-text-cell_hover: @color-text-2;
+@picker-panel-color-text-cell_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
 @form-margin-extra-top: @spacing-2;
 @form-margin-extra-bottom: @spacing-7;
 @input-size-icon-clear: @size-3;
 @input-color-icon-clear-bg_hover: @color-transparent;
-@input-color-addon-border_default: @color-border-3;
+@input-color-addon-border_default: var(~'@{arco-cssvars-prefix}-color-border-3');
 @input-group-border-radius_compact: @border-radius-medium;
 @search-button-padding-horizontal: @spacing-4;
 @search-size-icon: 14px;
 @input-tag-border-radius: @border-radius-medium;
-@input-tag-size-icon-clear: @size-3;
+@input-tag-size-icon-clear: @size-4;
 @input-tag-tag-font-size: @font-size-body-3;
 @input-tag-tag-margin-vertical: @spacing-2;
-@input-tag-color-addon-bg: @color-fill-2;
+@input-tag-color-addon-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
 @input-tag-size-mini-tag-height: @size-5;
 @radio-button-color-bg_hover: @color-bg-5;
 @radio-button-color-bg_checked_disabled: @color-bg-5;
 @radio-button-color-text_checked_disabled: @color-text-4;
 @radio-button-border-radius: @border-radius-medium;
 @select-border-radius: @border-radius-medium;
-@select-color-text_focused: @color-text-2;
+@select-color-text_focused: var(~'@{arco-cssvars-prefix}-color-text-2');
 @select-popup-color-border: @color-transparent;
-@select-color-addon-bg: @color-fill-2;
-@switch-color-dot-icon_off: @color-text-4;
-@switch-color-dot-icon_off_disabled: @color-text-4;
-@switch-color-dot-icon_on_disabled: @color-text-4;
+@select-color-addon-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@switch-color-dot-icon_off: var(~'@{arco-cssvars-prefix}-color-text-4');
+@switch-color-dot-icon_off_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@switch-color-dot-icon_on_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
 @transfer-border-radius: @border-radius-medium;
 @transfer-width: 204PX;
 @transfer-height: 240PX;
@@ -1446,18 +1446,18 @@
 @notification-border-radius: @border-radius-large;
 @notification-icon-margin-right: @spacing-4;
 @notification-close-icon-font-size: @size-4;
-@notification-info-color-border: @color-transparent;
-@notification-info-color-text-content: @color-text-2;
-@notification-success-color-text-content: @color-text-2;
-@notification-success-color-border: @color-transparent;
-@notification-warning-color-text-content: @color-text-2;
-@notification-warning-color-border: @color-transparent;
-@notification-error-color-border: @color-transparent;
-@notification-error-color-text-content: @color-text-2;
+@notification-info-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@notification-info-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-2');
+@notification-success-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-2');
+@notification-success-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@notification-warning-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-2');
+@notification-warning-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@notification-error-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@notification-error-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-2');
 @popconfirm-font-title-size: @font-size-title-1;
 @progress-line-margin-text-left: @spacing-4;
 @progress-line-size-small-margin-text-left: @spacing-4;
-@progress-circle-color-text: @color-text-2;
+@progress-circle-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
 @progress-circle-size-small-font-size: @font-size-body-3;
 @progress-circle-size-small-icon-size: @size-4;
 @progress-circle-size-large-font-size: @font-size-body-3;
@@ -1474,7 +1474,7 @@
 @breadcrumb-size-text-height: @size-8;
 @breadcrumb-size-font-size: @font-size-title-2;
 @breadcrumb-margin-separator-horizontal: @spacing-4;
-@breadcrumb-color-link-text: @color-text-2;
+@breadcrumb-color-link-text: var(~'@{arco-cssvars-prefix}-color-text-2');
 @dropdown-max-height: 400px;
 @dropdown-group-title-height: @size-5;
 @input-border-addon-separator-width: @border-none;
@@ -1483,14 +1483,14 @@
 @badge-1: rgb(133, 24, 242);
 @color-badge-5: rgb(var(~'@{arco-cssvars-prefix}-badge-5'));
 @color-badge-4: rgb(var(~'@{arco-cssvars-prefix}-badge-4'));
-@dark-badge-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));
+@dark-badge-1: rgb(62, 19, 143);
 @color-badge-2: rgb(var(~'@{arco-cssvars-prefix}-badge-2'));
-@dark-badge-7: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-7'));
+@dark-badge-7: rgb(247, 192, 52);
 @badge-4: rgb(22, 217, 22);
 @color-badge-6: rgb(var(~'@{arco-cssvars-prefix}-badge-6'));
 @badge-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));
-@dark-badge-5: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-5'));
-@dark-badge-2: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));
+@dark-badge-5: rgb(247, 126, 69);
+@dark-badge-2: rgb(217, 46, 217);
 @badge-6: rgb(79, 24, 242);
 @badge-2: rgb(242, 24, 133);
 @badge-3: rgb(26, 188, 242);
@@ -1500,12 +1500,12 @@
 @badge-7: rgb(242, 188, 23);
 @badge-8: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-8'));
 @color-badge-9: rgb(var(~'@{arco-cssvars-prefix}-badge-9'));
-@dark-badge-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));
+@dark-badge-4: rgb(12, 191, 146);
 @color-badge-7: rgb(var(~'@{arco-cssvars-prefix}-badge-7'));
 @color-badge-10: rgb(var(~'@{arco-cssvars-prefix}-badge-10'));
 @dark-badge-8: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-8'));
-@dark-badge-6: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));
-@dark-badge-3: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-3'));
+@dark-badge-6: rgb(142, 81, 218);
+@dark-badge-3: rgb(26, 188, 242);
 @dark-badge-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));
 @dark-badge-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));
 @badge-5: rgb(242, 79, 25);
@@ -1525,13 +1525,13 @@
 @tag-3: rgb(236, 253, 254);
 @color-tag-9: rgb(var(~'@{arco-cssvars-prefix}-tag-9'));
 @color-tag-5: rgb(var(~'@{arco-cssvars-prefix}-tag-5'));
-@dark-tag-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));
-@dark-tag-2: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));
+@dark-tag-1: rgb(249, 237, 255);
+@dark-tag-2: rgb(255, 237, 243);
 @dark-tag-8: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-8'));
 @tag-7: rgb(255, 253, 237);
-@dark-tag-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));
+@dark-tag-4: rgb(241, 255, 237);
 @color-tag-6: rgb(var(~'@{arco-cssvars-prefix}-tag-6'));
-@dark-tag-3: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-3'));
+@dark-tag-3: rgb(236, 253, 254);
 @dark-tag-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));
 @tag-6: rgb(245, 237, 255);
 @tag-4: rgb(241, 255, 237);
@@ -1545,10 +1545,10 @@
 @tag-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));
 @color-tag-1: rgb(var(~'@{arco-cssvars-prefix}-tag-1'));
 @color-tag-7: rgb(var(~'@{arco-cssvars-prefix}-tag-7'));
-@dark-tag-5: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-5'));
+@dark-tag-5: rgb(255, 245, 237);
 @dark-tag-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));
-@dark-tag-7: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-7'));
-@dark-tag-6: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));
+@dark-tag-7: rgb(255, 253, 237);
+@dark-tag-6: rgb(245, 237, 255);
 @tag-5: rgb(255, 245, 237);
 @color-tag-10: rgb(var(~'@{arco-cssvars-prefix}-tag-10'));
 @tag-orangered-color-icon: @color-badge-5;
@@ -1593,7 +1593,7 @@
 @tag-purple-bordered-color-border: @color-badge-6;
 @tag-pinkpurple-bordered-color-border: @color-badge-1;
 @tag-magenta-bordered-color-border: @color-badge-2;
-@tag-gray-bordered-color-border: @color-border-2;
+@tag-gray-bordered-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
 @pagination-simple-input-width: @size-10;
 @tabs-line-font-title-text-weight_active: @font-weight-600;
 @descriptions-font-weight-title: @font-weight-600;
@@ -1626,6 +1626,73 @@
 @select-popup-option-font-hightlight-weight: @font-weight-600;
 @avatar-font-weight-text: @font-weight-600;
 @collapse-title-font-weight_active: @font-weight-400;
-@cascader-color-item-text_active: @color-text-2;
+@cascader-color-item-text_active: var(~'@{arco-cssvars-prefix}-color-text-2');
 @picker-header-font-weight-text: @font-weight-600;
 @image-color-actions-item_footer_inner_hover-bg: @color-transparent;
+@tabs-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@tabs-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@tabs-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@select-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-2');
+@input-color-border_error_focus: @color-danger-6;
+@input-number-step-button-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@radio-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-secondary-color-text_warning: @color-warning-6;
+@tree-color-title-bg_highlight: @color-primary-1;
+@cascader-color-item-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
+@cascader-color-item-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@picker-header-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
+@picker-color-bg-cell-in-range: @color-primary-1;
+@transfer-color-text-header: var(~'@{arco-cssvars-prefix}-color-text-1');
+@upload-text-item-color-text_uploading: var(~'@{arco-cssvars-prefix}-color-text-2');
+@switch-color-dot-bg: var(~'@{arco-cssvars-prefix}-color-white');
+@switch-color-bg_off_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@btn-dashed-color-text_warning_hover: @color-warning-5;
+@btn-dashed-color-text_warning_active: @color-warning-7;
+@btn-dashed-color-border_warning_active: @color-warning-7;
+@btn-dashed-color-border_danger_active: @color-danger-7;
+@btn-dashed-color-border_success_hover: @color-success-5;
+@typography-heading-font-weight: @font-weight-500;
+@badge-gold-color-dot-bg: @color-badge-7;
+@badge-gray-color-dot-bg: @color-fill-4;
+@descriptions-border-item-size-default-padding-horizontal: @spacing-8;
+@popup-color-content-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@tag-color-bg-not-checked_hover: @color-primary-1;
+@tag-red-color-bg_hover: @color-danger-1;
+@tag-red-color-icon-bg_hover: @color-transparent;
+@tag-orangered-color-bg_hover: @color-tag-5;
+@tag-orangered-color-icon-bg_hover: @color-transparent;
+@tag-orange-color-bg_hover: @color-warning-1;
+@tag-orange-color-icon-bg_hover: @color-transparent;
+@tag-gold-color-bg_hover: @color-tag-7;
+@tag-gold-color-icon-bg_hover: @color-transparent;
+@tag-lime-color-bg_hover: @color-tag-4;
+@tag-lime-color-icon-bg_hover: @color-transparent;
+@tag-green-color-bg_hover: @color-success-1;
+@tag-green-color-icon-bg_hover: @color-transparent;
+@tag-cyan-color-icon-bg_hover: @color-transparent;
+@tag-blue-color-bg_hover: @color-tag-3;
+@tag-blue-color-icon-bg_hover: @color-transparent;
+@tag-arcoblue-color-bg_hover: @color-primary-1;
+@tag-purple-color-bg_hover: @color-tag-6;
+@tag-pinkpurple-color-bg_hover: @color-tag-1;
+@tag-pinkpurple-color-border_hover: @color-transparent;
+@tag-magenta-color-bg_hover: @color-tag-2;
+@tag-magenta-color-icon-bg_hover: @color-transparent;
+@tag-gray-color-bg_hover: @color-fill-2;
+@tag-gray-color-icon-bg_hover: @color-transparent;
+@tag-default-color-bg_hover: @color-fill-2;
+@tag-arcoblue-bordered-color-border: @color-primary-6;
+@alert-font-weight-title: @font-weight-600;
+@page-header-color-header-border: @color-border-2;
+@page-header-color-back-icon-bg_hover: @color-transparent;
+@modal-border-width: @border-1;
+@table-font-weight-header-text: @font-weight-600;
+@divider-font-weight: @font-weight-500;
+@input-size-mini-icon-suffix-size: 14PX;
+@input-size-default-icon-suffix-size: @size-4;
+@input-size-large-icon-suffix-size: @size-4;
+@input-size-mini-icon-addon-size: 14PX;
+@input-size-default-icon-addon-size: @size-4;
+@input-size-large-icon-addon-size: @size-4;
+@anchor-color-title_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
+@anchor-color-title_active: var(~'@{arco-cssvars-prefix}-color-text-1');