@rainbow-oh/yee-c 0.11.0 → 0.12.1

package/src/style/color.blue.css

@@ -1,39 +1,39 @@
 [data-theme='blue'] {
-  --yee-primary-color: #777af2;
-  --yee-primary-color-hover: #39364e;
-  --yee-primary-color-active: #39364e;
-  --yee-link-color: #777af2;
-  --yee-link-color-hover: #39364e;
-  --yee-link-color-active: #39364e;
-  --yee-info-color: #31708f;
-  --yee-info-color-hover: #295d78;
-  --yee-info-color-active: #295d78;
-  --yee-info-color-bg: #eff4f6;
-  --yee-info-color-border: #cedde4;
-  --yee-success-color: #52c41a;
-  --yee-success-color-hover: #009e8a;
-  --yee-success-color-active: #009e8a;
-  --yee-success-color-bg: #ebfaf8;
-  --yee-success-color-border: #c2efea;
-  --yee-warning-color: #faad14;
-  --yee-warning-color-hover: #d69b00;
-  --yee-warning-color-active: #d69b00;
-  --yee-warning-color-bg: #fffaeb;
-  --yee-warning-color-border: #ffeec2;
-  --yee-error-color: #f2545b;
-  --yee-error-color-hover: #cb464c;
-  --yee-error-color-active: #cb464c;
-  --yee-error-color-bg: #fef2f2;
-  --yee-error-color-border: #fcd6d8;
-  --yee-text-color: #39364e;
-  --yee-text-color-secondary: #696969;
-  --yee-text-color-description: #7c7c7c;
-  --yee-text-color-disabled: #bfbfbf;
-  --yee-text-color-highlight: #f58220;
-  --yee-text-color-auxiliary: #f5f5f5;
+  --yee-color-primary: #777af2;
+  --yee-color-primary-hover: #655ee0;
+  --yee-color-primary-active: #5a54d6;
+  --yee-color-link: #777af2;
+  --yee-color-link-hover: #655ee0;
+  --yee-color-link-active: #5a54d6;
+  --yee-color-info: #31708f;
+  --yee-color-info-hover: #295d78;
+  --yee-color-info-active: #295d78;
+  --yee-color-info-bg: #eff4f6;
+  --yee-color-info-border: #cedde4;
+  --yee-color-success: #52c41a;
+  --yee-color-success-hover: #009e8a;
+  --yee-color-success-active: #009e8a;
+  --yee-color-success-bg: #ebfaf8;
+  --yee-color-success-border: #c2efea;
+  --yee-color-warning: #faad14;
+  --yee-color-warning-hover: #d69b00;
+  --yee-color-warning-active: #d69b00;
+  --yee-color-warning-bg: #fffaeb;
+  --yee-color-warning-border: #ffeec2;
+  --yee-color-error: #f2545b;
+  --yee-color-error-hover: #cb464c;
+  --yee-color-error-active: #cb464c;
+  --yee-color-error-bg: #fef2f2;
+  --yee-color-error-border: #fcd6d8;
+  --yee-color-text: #39364e;
+  --yee-color-text-secondary: #696969;
+  --yee-color-text-description: #7c7c7c;
+  --yee-color-text-disabled: #bfbfbf;
+  --yee-color-text-highlight: #f58220;
+  --yee-color-text-auxiliary: #f5f5f5;
   --yee-color-split: #e7e7e7;
-  --yee-border-color: #cbd6e2;
-  --yee-border-color-hover-focus: #75b9f0;
+  --yee-color-border: #cbd6e2;
+  --yee-color-border-hover-focus: #75b9f0;
   --yee-color-bg-highlight: rgba(245, 130, 32, 16%);
   --yee-color-bg-disabled: #f5f8fa;
   --yee-color-bg-head: #f8f8f8;
@@ -55,12 +55,14 @@
 
   /* --font-family-- */
 
-  --global-font-family: 'system-ui, -apple-system, BlinkMacSystemFont, Albert Sans,思源黑体,SourceHanSansSC,Roboto-Regular​';
+  --global-font-family:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Albert Sans', 思源黑体,
+    SourceHanSansSC, Roboto-Regular;
 
   /* --global-- */
 
   --yee-global-font-color: var(--yee-primary3-color);
-  --yee-placeholder-color: var(--yee-neutral3-color);
+  --yee-color-placeholder: var(--yee-neutral3-color);
   --yee-title-prefix-bg-color: var(--yee-primary1-color);
   --yee-remove-icon: var(--yee-neutral3-color);
   --yee-remove-icon-hover: var(--yee-neutral3-color);
@@ -74,30 +76,14 @@
 
   /* --Button-- */
 
-  --yee-btn-primary-color: #ffffff;
   --yee-btn-primary-bg-color: var(--yee-primary1-color);
-  --yee-btn-primary-border-color: var(--yee-primary1-color);
-  --yee-btn-primary-hover-color: #ffffff;
-  --yee-btn-primary-hover-bg-color: var(--yee-primary3-color);
-  --yee-btn-primary-hover-border-color: var(--yee-primary3-color);
-  --yee-btn-primary-active-color: #ffffff;
-  --yee-btn-primary-active-bg-color: var(--yee-primary3-color);
-  --yee-btn-primary-active-border-color: var(--yee-primary3-color);
   --yee-btn-primary-disabled-color: var(--yee-neutral3-color);
   --yee-btn-primary-disabled-bg-color: var(--yee-disabled-bg-color);
-  --yee-btn-primary-disabled-border-color: var(--yee-border-color);
-  --yee-btn-default-color: var(--yee-primary1-color);
+  --yee-btn-primary-disabled-border-color: var(--yee-color-border);
   --yee-btn-default-bg-color: #ffffff;
-  --yee-btn-default-border-color: var(--yee-primary1-color);
-  --yee-btn-default-hover-color: var(--yee-primary3-color);
-  --yee-btn-default-hover-bg-color: #ffffff;
-  --yee-btn-default-hover-border-color: var(--yee-primary3-color);
-  --yee-btn-default-active-color: var(--yee-primary3-color);
-  --yee-btn-default-active-bg-color: #ffffff;
-  --yee-btn-default-active-border-color: var(--yee-primary3-color);
   --yee-btn-default-disabled-color: var(--yee-neutral3-color);
   --yee-btn-default-disabled-bg-color: var(--yee-disabled-bg-color);
-  --yee-btn-default-disabled-border-color: var(--yee-border-color);
+  --yee-btn-default-disabled-border-color: var(--yee-color-border);
   --yee-btn-text-color: var(--yee-primary1-color);
   --yee-btn-text-hover-color: var(--yee-primary3-color);
   --yee-btn-text-active-color: var(--yee-primary3-color);
@@ -107,60 +93,36 @@
   --yee-btn-link-active-color: var(--yee-primary3-color);
   --yee-btn-link-disabled-color: var(--yee-neutral3-color);
   --yee-btn-info-color: #ffffff;
-  --yee-btn-info-bg-color: var(--yee-info-color);
-  --yee-btn-info-border-color: var(--yee-info-color);
+  --yee-btn-info-bg-color: var(--yee-color-info);
+  --yee-btn-info-border-color: var(--yee-color-info);
   --yee-btn-info-hover-color: var(--yee-info-hover-color);
   --yee-btn-info-hover-bg-color: var(--yee-info-hover-color);
   --yee-btn-info-hover-border-color: var(--yee-info-hover-color);
   --yee-btn-info-active-color: var(--yee-info-active-color);
   --yee-btn-info-active-bg-color: var(--yee-info-active-color);
   --yee-btn-info-active-border-color: var(--yee-info-active-color);
-  --yee-btn-info-not-primary-color: var(--yee-info-color);
+  --yee-btn-info-not-primary-color: var(--yee-color-info);
   --yee-btn-info-not-primary-bg-color: #ffffff;
   --yee-btn-info-not-primary-hover-color: var(--yee-info-hover-color);
   --yee-btn-info-not-primary-hover-bg-color: #ffffff;
   --yee-btn-info-not-primary-active-color: var(--yee-info-active-color);
   --yee-btn-info-not-primary-active-bg-color: #ffffff;
-  --yee-btn-success-color: #ffffff;
-  --yee-btn-success-bg-color: var(--yee-success-color);
-  --yee-btn-success-border-color: var(--yee-success-color);
-  --yee-btn-success-hover-color: var(--yee-success-hover-color);
-  --yee-btn-success-hover-bg-color: var(--yee-success-hover-color);
-  --yee-btn-success-hover-border-color: var(--yee-success-hover-color);
-  --yee-btn-success-active-color: var(--yee-success-active-color);
-  --yee-btn-success-active-bg-color: var(--yee-success-active-color);
-  --yee-btn-success-active-border-color: var(--yee-success-active-color);
-  --yee-btn-success-not-primary-color: var(--yee-success-color);
+  --yee-btn-success-bg-color: var(--yee-color-success);
+  --yee-btn-success-not-primary-color: var(--yee-color-success);
   --yee-btn-success-not-primary-bg-color: #ffffff;
   --yee-btn-success-not-primary-hover-color: var(--yee-success-hover-color);
   --yee-btn-success-not-primary-hover-bg-color: #ffffff;
   --yee-btn-success-not-primary-active-color: var(--yee-success-active-color);
   --yee-btn-success-not-primary-active-bg-color: #ffffff;
-  --yee-btn-warning-color: #ffffff;
-  --yee-btn-warning-bg-color: var(--yee-warning-color);
-  --yee-btn-warning-border-color: var(--yee-warning-color);
-  --yee-btn-warning-hover-color: var(--yee-warning-hover-color);
-  --yee-btn-warning-hover-bg-color: var(--yee-warning-hover-color);
-  --yee-btn-warning-hover-border-color: var(--yee-warning-hover-color);
-  --yee-btn-warning-active-color: var(--yee-warning-active-color);
-  --yee-btn-warning-active-bg-color: var(--yee-warning-active-color);
-  --yee-btn-warning-active-border-color: var(--yee-warning-active-color);
-  --yee-btn-warning-not-primary-color: var(--yee-warning-color);
+  --yee-btn-warning-bg-color: var(--yee-color-warning);
+  --yee-btn-warning-not-primary-color: var(--yee-color-warning);
   --yee-btn-warning-not-primary-bg-color: #ffffff;
   --yee-btn-warning-not-primary-hover-color: var(--yee-warning-hover-color);
   --yee-btn-warning-not-primary-hover-bg-color: #ffffff;
   --yee-btn-warning-not-primary-active-color: var(--yee-warning-active-color);
   --yee-btn-warning-not-primary-active-bg-color: #ffffff;
-  --yee-btn-danger-color: #ffffff;
-  --yee-btn-danger-bg-color: var(--yee-error-color);
-  --yee-btn-danger-border-color: var(--yee-error-color);
-  --yee-btn-danger-hover-color: var(--yee-error-hover-color);
-  --yee-btn-danger-hover-bg-color: var(--yee-error-hover-color);
-  --yee-btn-danger-hover-border-color: var(--yee-error-hover-color);
-  --yee-btn-danger-active-color: var(--yee-error-active-color);
-  --yee-btn-danger-active-bg-color: var(--yee-error-active-color);
-  --yee-btn-danger-active-border-color: var(--yee-error-active-color);
-  --yee-btn-danger-not-primary-color: var(--yee-error-color);
+  --yee-btn-danger-bg-color: var(--yee-color-error);
+  --yee-btn-danger-not-primary-color: var(--yee-color-error);
   --yee-btn-danger-not-primary-bg-color: #ffffff;
   --yee-btn-danger-not-primary-hover-color: var(--yee-error-hover-color);
   --yee-btn-danger-not-primary-hover-bg-color: #ffffff;
@@ -170,7 +132,7 @@
   /* ghost */
 
   --yee-btn-ghost-disabled-color: var(--yee-neutral3-color);
-  --yee-btn-ghost-disabled-border-color: var(--yee-border-color);
+  --yee-btn-ghost-disabled-border-color: var(--yee-color-border);
   --yee-btn-primary-ghost-disabled-bg-color: rgba(245, 248, 250, 0.08);
   --yee-btn-default-ghost-disabled-bg-color: var(
     --yee-btn-primary-ghost-disabled-bg-color
@@ -217,56 +179,56 @@
   --yee-btn-link-ghost-color: var(--yee-primary1-color);
   --yee-btn-link-ghost-hover-color: var(--yee-primary1-color);
   --yee-btn-link-ghost-active-color: var(--yee-primary1-color);
-  --yee-btn-info-ghost-color: var(--yee-info-color);
+  --yee-btn-info-ghost-color: var(--yee-color-info);
   --yee-btn-info-ghost-bg-color: rgba(49, 112, 143, 0);
-  --yee-btn-info-ghost-border-color: var(--yee-info-color);
+  --yee-btn-info-ghost-border-color: var(--yee-color-info);
   --yee-btn-info-ghost-hover-color: #5286a1;
   --yee-btn-info-ghost-hover-bg-color: rgba(82, 134, 161, 0.08);
-  --yee-btn-info-ghost-hover-border-color: var(--yee-info-color-hover);
+  --yee-btn-info-ghost-hover-border-color: var(--yee-color-info-hover);
 
   --yee-btn-info-ghost-active-color: #5286a1;
   --yee-btn-info-ghost-active-bg-color: rgba(82, 134, 161, 0.08);
-  --yee-btn-info-ghost-active-border-color: var(--yee-info-color-active);
+  --yee-btn-info-ghost-active-border-color: var(--yee-color-info-active);
 
-  --yee-btn-success-ghost-color: var(--yee-success-color);
+  --yee-btn-success-ghost-color: var(--yee-color-success);
   --yee-btn-success-ghost-bg-color: rgba(0, 189, 165, 0);
-  --yee-btn-success-ghost-border-color: var(--yee-success-color);
+  --yee-btn-success-ghost-border-color: var(--yee-color-success);
   --yee-btn-success-ghost-hover-color: #29c7b3;
   --yee-btn-success-ghost-hover-bg-color: rgba(41, 199, 179, 0.08);
-  --yee-btn-success-ghost-hover-border-color: var(--yee-success-color-hover);
+  --yee-btn-success-ghost-hover-border-color: var(--yee-color-success-hover);
 
   --yee-btn-success-ghost-active-color: #29c7b3;
   --yee-btn-success-ghost-active-bg-color: rgba(41, 199, 179, 0.08);
-  --yee-btn-success-ghost-active-border-color: var(--yee-success-color-active);
+  --yee-btn-success-ghost-active-border-color: var(--yee-color-success-active);
 
-  --yee-btn-warning-ghost-color: var(--yee-warning-color);
+  --yee-btn-warning-ghost-color: var(--yee-color-warning);
   --yee-btn-warning-ghost-bg-color: rgba(255, 185, 0, 0);
-  --yee-btn-warning-ghost-border-color: var(--yee-warning-color);
+  --yee-btn-warning-ghost-border-color: var(--yee-color-warning);
   --yee-btn-warning-ghost-hover-color: #ffc429;
   --yee-btn-warning-ghost-hover-bg-color: rgba(255, 196, 41, 0.08);
-  --yee-btn-warning-ghost-hover-border-color: var(--yee-warning-color-hover);
+  --yee-btn-warning-ghost-hover-border-color: var(--yee-color-warning-hover);
 
   --yee-btn-warning-ghost-active-color: #ffc429;
   --yee-btn-warning-ghost-active-bg-color: rgba(255, 196, 41, 0.08);
-  --yee-btn-warning-ghost-active-border-color: var(--yee-warning-color-active);
+  --yee-btn-warning-ghost-active-border-color: var(--yee-color-warning-active);
 
-  --yee-btn-danger-ghost-color: var(--yee-error-color);
+  --yee-btn-danger-ghost-color: var(--yee-color-error);
   --yee-btn-danger-ghost-bg-color: rgba(242, 84, 91, 0);
-  --yee-btn-danger-ghost-border-color: var(--yee-error-color);
+  --yee-btn-danger-ghost-border-color: var(--yee-color-error);
   --yee-btn-danger-ghost-hover-color: #f46f75;
   --yee-btn-danger-ghost-hover-bg-color: rgba(244, 111, 117, 0.08);
-  --yee-btn-danger-ghost-hover-border-color: var(--yee-error-color-hover);
+  --yee-btn-danger-ghost-hover-border-color: var(--yee-color-error-hover);
 
   --yee-btn-danger-ghost-active-color: #f46f75;
   --yee-btn-danger-ghost-active-bg-color: rgba(244, 111, 117, 0.08);
-  --yee-btn-danger-ghost-active-border-color: var(--yee-error-color-active);
+  --yee-btn-danger-ghost-active-border-color: var(--yee-color-error-active);
 
   --yee-btn-loading-spinner-color: var(--yee-neutral3-color);
   --yee-btn-primary-loading-spinner-color: #ffffff;
 
   /* --FloatButton-- */
 
-  --yee-float-button-menu-bg-color: var(--yee-color-bg-elevated);
+  --yee-float-btn-menu-bg-color: var(--yee-color-bg-elevated);
 
   --yee-float-btn-color: #ffffff;
   --yee-float-btn-default-bg-color: #425b76;
@@ -282,9 +244,9 @@
 
   /* --Field-- */
 
-  --yee-field-required-color: var(--yee-error-color);
+  --yee-field-required-color: var(--yee-color-error);
 
-  --yee-field-error-message-color: var(--yee-error-color);
+  --yee-field-error-message-color: var(--yee-color-error);
 
   /* --Menu-- */
 
@@ -293,11 +255,11 @@
   --yee-menu-item-hover-color: var(--yee-option-hover-color);
   --yee-menu-item-selected-color: var(--yee-option-active-color);
   --yee-menu-item-selected-bg-color: var(--yee-option-active-bg-color);
-  --yee-menu-item-arrow-color: var(--yee-text-color-auxiliary);
+  --yee-menu-item-arrow-color: var(--yee-color-text-auxiliary);
 
-  --yee-menu-item-arrow-hover-color: var(--yee-text-color-auxiliary);
+  --yee-menu-item-arrow-hover-color: var(--yee-color-text-auxiliary);
 
-  --yee-menu-item-arrow-selected-color: var(--yee-primary-color);
+  --yee-menu-item-arrow-selected-color: var(--yee-color-primary);
 
   --yee-menu-item-bg-color: #fff;
 
@@ -307,17 +269,17 @@
 
   --yee-menu-item-focused-bg-color: #f0f0f0;
 
-  --yee-menu-submenu-selected-color: var(--yee-primary-color);
+  --yee-menu-submenu-selected-color: var(--yee-color-primary);
 
   /* 暂时无用 */
 
   --yee-menu-submenu-inline-open-color: var(--yee-primary1-color);
   --yee-menu-submenu-inline-open-bg-color: var(--yee-option-active-bg-color);
-  --yee-menu-vertical-border-color: var(--yee-border-color);
-  --yee-icon-success-color: var(--yee-success-color);
-  --yee-icon-info-color: var(--yee-info-color);
-  --yee-icon-warning-color: var(--yee-warning-color);
-  --yee-icon-danger-color: var(--yee-error-color);
+  --yee-menu-vertical-border-color: var(--yee-color-border);
+  --yee-icon-success-color: var(--yee-color-success);
+  --yee-icon-info-color: var(--yee-color-info);
+  --yee-icon-warning-color: var(--yee-color-warning);
+  --yee-icon-danger-color: var(--yee-color-error);
 
   /* --Divider-- */
 
@@ -336,7 +298,7 @@
 
   --yee-splitter-handler-drag-color: rgba(119, 122, 242, 48%);
 
-  --yee-splitter-arrow-color: var(--yee-text-color);
+  --yee-splitter-arrow-color: var(--yee-color-text);
 
   --yee-splitter-arrow-bg-color: rgba(0, 0, 0, 4%);
 
@@ -368,7 +330,7 @@
   --yee-anchor-nav-line-bg-color: var(--yee-neutral6-color);
   --yee-anchor-static-nav-line-bg-color: var(--yee-color-split);
 
-  --yee-anchor-item-font-color: var(--yee-text-color);
+  --yee-anchor-item-font-color: var(--yee-color-text);
 
   --yee-anchor-item-hover-font-color: var(--yee-primary1-color);
   --yee-anchor-item-before-bg-color: #f5f5f5;
@@ -381,7 +343,7 @@
 
   --yee-breadcrumb-font-color: var(--yee-primary3-color);
   --yee-breadcrumb-previous-font-color: var(--yee-neutral3-color);
-  --yee-breadcrumb-separator-color: var(--yee-text-color-description);
+  --yee-breadcrumb-separator-color: var(--yee-color-text-description);
 
   --yee-breadcrumb-item-link-hover-font-color: var(--yee-primary1-color);
   --yee-breadcrumb-item-link-active-font-color: var(--yee-primary1-color);
@@ -409,16 +371,16 @@
 
   /* --Pagination-- */
 
-  --yee-pagination-item-border-color: var(--yee-border-color);
+  --yee-pagination-item-border-color: var(--yee-color-border);
   --yee-pagination-item-bg-color: var(--yee-color-bg-container);
 
-  --yee-pagination-item-color: var(--yee-text-color);
+  --yee-pagination-item-color: var(--yee-color-text);
 
-  --yee-pagination-itemnot-border-color: var(--yee-border-color);
+  --yee-pagination-itemnot-border-color: var(--yee-color-border);
   --yee-pagination-itemnot-bg-color: var(--yee-color-bg-container);
 
   --yee-pagination-itemnot-color: var(--yee-neutral3-color);
-  --yee-pagination-item-hover-border-color: var(--yee-border-color);
+  --yee-pagination-item-hover-border-color: var(--yee-color-border);
   --yee-pagination-item-hover-bg-color: var(--yee-color-bg-container);
 
   --yee-pagination-item-hover-color: var(--yee-primary1-color);
@@ -427,14 +389,14 @@
 
   --yee-pagination-item-active-color: var(--yee-primary1-color);
   --yee-pagination-disabled-color: var(--yee-neutral3-color);
-  --yee-pagination-disabled-border-color: var(--yee-border-color);
+  --yee-pagination-disabled-border-color: var(--yee-color-border);
   --yee-pagination-disabled-bg-color: var(--yee-color-bg-container);
 
-  --yee-pagination-active-disabled-border-color: var(--yee-border-color);
+  --yee-pagination-active-disabled-border-color: var(--yee-color-border);
   --yee-pagination-active-disabled-bg-color: var(--yee-disabled-bg-color);
-  --yee-pagination-active-disabled-color: var(--yee-text-color-disabled);
+  --yee-pagination-active-disabled-color: var(--yee-color-text-disabled);
 
-  --yee-pagination-turn-page-color: var(--yee-text-color);
+  --yee-pagination-turn-page-color: var(--yee-color-text);
 
   /* --Steps-- */
 
@@ -455,14 +417,14 @@
   --yee-steps-step-icon-done-color: var(--yee-steps-serial-doing-bg-color);
 
   --yee-steps-step-doing-icon-color: var(--yee-primary1-color);
-  --yee-steps-step-icon-undo-color: var(--yee-text-color-disabled);
+  --yee-steps-step-icon-undo-color: var(--yee-color-text-disabled);
 
   --yee-steps-step-done-dot-color: var(--yee-primary1-color);
   --yee-steps-step-doing-dot-color: var(--yee-primary1-color);
   --yee-steps-step-undo-dot-color: var(--yee-neutral6-color);
   --yee-steps-done-line-bg-color: var(--yee-primary1-color);
   --yee-steps-line-bg-color: #e7e7e7;
-  --yee-steps-step-error-color: var(--yee-error-color);
+  --yee-steps-step-error-color: var(--yee-color-error);
   --yee-steps-step-error-border-color: #fef2f2;
   --yee-steps-step-error-bg-color: #fef2f2;
   --yee-steps-step-nav-arrow-color: var(--yee-neutral3-color);
@@ -527,7 +489,7 @@
 
   --yee-checkbox-bg-color: var(--yee-color-bg-container);
 
-  --yee-checkbox-border-color: var(--yee-border-color);
+  --yee-checkbox-border-color: var(--yee-color-border);
   --yee-checkbox-hover-border-color: var(
     --yee-input-content-hover-border-color
   );
@@ -536,9 +498,9 @@
   --yee-checkbox-checked-after-border-color: #ffffff;
   --yee-checkbox-disabled-unchecked-bg-color: var(--yee-disabled-bg-color);
   --yee-checkbox-disabled-checked-bg-color: var(--yee-disabled-bg-color);
-  --yee-checkbox-disabled-checked-border-color: var(--yee-border-color);
+  --yee-checkbox-disabled-checked-border-color: var(--yee-color-border);
   --yee-checkbox-disabled-checked-after-border-color: var(
-    --yee-text-color-disabled
+    --yee-color-text-disabled
   );
 
   --yee-checkbox-border-indeterminate-color: var(--yee-primary1-color);
@@ -550,11 +512,11 @@
   --yee-date-picker-panel-bg-color: #ffffff;
   --yee-date-picker-header-color: var(--yee-global-font-color);
   --yee-date-picker-header-font-color: #323232;
-  --yee-picker-header-button-color: var(--yee-text-color-description);
+  --yee-picker-header-button-color: var(--yee-color-text-description);
 
-  --yee-date-picker-header-font-hover-color: var(--yee-primary-color);
+  --yee-date-picker-header-font-hover-color: var(--yee-color-primary);
 
-  --yee-picker-header-button-hover-color: var(--yee-text-color);
+  --yee-picker-header-button-hover-color: var(--yee-color-text);
 
   --yee-date-picker-header-bg-color: #ffffff;
   --yee-date-picker-thead-color: var(--yee-global-font-color);
@@ -570,7 +532,7 @@
 
   --yee-date-picker-weekend-font-color: var(--yee-date-picker-panel-color);
 
-  --yee-date-picker-week-count-color: var(--yee-text-color-auxiliary);
+  --yee-date-picker-week-count-color: var(--yee-color-text-auxiliary);
 
   --yee-date-picker-time-hover-color: var(--yee-option-hover-color);
   --yee-date-picker-time-hover-bg-color: var(--yee-option-hover-bg-color);
@@ -582,18 +544,18 @@
   --yee-date-picker-time-disabled-color: var(--yee-neutral3-color);
   --yee-date-picker-time-disabled-bg-color: var(--yee-disabled-bg-color);
 
-  --yee-rangepicker-trigger-border-color: var(--yee-border-color);
-  --yee-rangepicker-trigger-hover-border-color: var(
-    --yee-border-color-hover-focus
+  --yee-range-picker-trigger-border-color: var(--yee-color-border);
+  --yee-range-picker-trigger-hover-border-color: var(
+    --yee-color-border-hover-focus
   );
 
-  --yee-rangepicker-checked-bg-color: var(--yee-option-active-bg-color);
-  --yee-rangepicker-hover-border-color: var(--yee-primary1-color);
-  --yee-rangepicker-panel-bg-color: #fff;
+  --yee-range-picker-checked-bg-color: var(--yee-option-active-bg-color);
+  --yee-range-picker-hover-border-color: var(--yee-primary1-color);
+  --yee-range-picker-panel-bg-color: #fff;
 
   /* --Timepicker-- */
 
-  --yee-timepicker-bg-color: #ffffff;
+  --yee-time-picker-bg-color: #ffffff;
   --yee-time-picker-header-color: var(--yee-global-font-color);
   --yee-time-picker-header-bg-color: var(--yee-neutral7-color);
   --yee-time-picker-container-hour-apm-active-bg-color: var(
@@ -609,23 +571,23 @@
   --yee-input-hover-border-color: #75b9f0;
   --yee-input-content-focus-border-color: #75b9f0;
   --yee-input-focus-bs-color: rgba(117, 185, 240, 0.24);
-  --yee-input-border-color: var(--yee-border-color);
+  --yee-input-border-color: var(--yee-color-border);
   --yee-input-content-bg-color: var(--yee-color-bg-container);
 
   --yee-input-disabled-bg-color: var(--yee-disabled-bg-color);
   --yee-input-fix-icon-color: var(--yee-neutral3-color);
   --yee-input-fix-icon-click-color: var(--yee-primary1-color);
-  --yee-input-fix-icon-click-hover-color: var(--yee-primary-color);
+  --yee-input-fix-icon-click-hover-color: var(--yee-color-primary);
 
-  --yee-input-fix-icon-click-active-color: var(--yee-primary-color);
+  --yee-input-fix-icon-click-active-color: var(--yee-color-primary);
 
   --yee-suffix-counter: var(--yee-neutral2-color);
   --yee-input-required-font-color: #ff0000;
-  --yee-input-helpfill-font-color: var(--yee-warning-color);
+  --yee-input-helpfill-font-color: var(--yee-color-warning);
   --yee-input-content-error-focus-bs-color: rgba(242, 84, 91, 0.24);
   --yee-input-content-warning-focus-bs-color: rgba(255, 185, 0, 24%);
 
-  --yee-input-error-border-color: var(--yee-error-color);
+  --yee-input-error-border-color: var(--yee-color-error);
   --yee-input-clear-color: #fff;
 
   --yee-input-clear-bg-color: #bfbfbf;
@@ -650,29 +612,29 @@
 
   --yee-input-number-icon-color: var(--yee-global-font-color);
   --yee-input-number-icon-hover-color: var(--yee-primary1-color);
-  --yee-inputnumber-disabled-font-color: var(--yee-neutral3-color);
-  --yee-inputnumber-controls-border-color: var(--yee-border-color);
-  --yee-inputnumber-handler-wrap-bg-color: #fafafa;
-  --yee-inputnumber-handler-hover-bg-color: #f0f0f0;
-  --yee-inputnumber-handler-active-bg-color: #e6e6e6;
+  --yee-input-number-disabled-font-color: var(--yee-neutral3-color);
+  --yee-input-number-controls-border-color: var(--yee-color-border);
+  --yee-input-number-handler-wrap-bg-color: #fafafa;
+  --yee-input-number-handler-hover-bg-color: #f0f0f0;
+  --yee-input-number-handler-active-bg-color: #e6e6e6;
 
   /* --Radio-- */
 
-  --yee-radio-inner-border-color: var(--yee-border-color);
+  --yee-radio-inner-border-color: var(--yee-color-border);
   --yee-radio-inner-bg-color: var(--yee-color-bg-container);
 
   --yee-radio-inner-checked-border-color: var(--yee-primary1-color);
   --yee-radio-inner-after-checked-bg-color: var(--yee-primary1-color);
-  --yee-radio-inner-disabled-border-color: var(--yee-border-color);
+  --yee-radio-inner-disabled-border-color: var(--yee-color-border);
   --yee-radio-inner-disabled-after-checked-bg-color: var(
-    --yee-text-color-disabled
+    --yee-color-text-disabled
   );
 
-  --yee-radio-inner-hover-border-color: var(--yee-border-color-hover-focus);
-  --yee-radio-label-button-border-color: var(--yee-border-color);
+  --yee-radio-inner-hover-border-color: var(--yee-color-border-hover-focus);
+  --yee-radio-label-button-border-color: var(--yee-color-border);
   --yee-radio-label-button-bg-color: var(--yee-color-bg-container);
   --yee-radio-label-button-hover-color: var(--yee-primary1-color);
-  --yee-radio-label-button-hover-border-color: var(--yee-border-color);
+  --yee-radio-label-button-hover-border-color: var(--yee-color-border);
   --yee-radio-label-button-hover-bg-color: var(--yee-color-bg-container);
   --yee-radio-input-checked-button-color: var(--yee-primary1-color);
   --yee-radio-input-checked-button-border-color: var(--yee-primary1-color);
@@ -682,15 +644,15 @@
   --yee-radio-label-disabled-color: var(--yee-neutral3-color);
   --yee-radio-label-disabled-bg-color: var(--yee-disabled-bg-color);
   --yee-radio-label-disabled-active-color: #ffffff;
-  --yee-radio-label-disabled-active-bg-color: var(--yee-border-color);
-  --yee-radio-label-button-disabled-border-color: var(--yee-border-color);
-  --yee-radio-button-disabled-arrow-color: var(--yee-border-color);
+  --yee-radio-label-disabled-active-bg-color: var(--yee-color-border);
+  --yee-radio-label-button-disabled-border-color: var(--yee-color-border);
+  --yee-radio-button-disabled-arrow-color: var(--yee-color-border);
   --yee-radio-button-disabled-arrow-border-color: #fff;
   --yee-radio-group-solid-checked-color: #fff;
 
   /* --Rate-- */
 
-  --yee-star-icon-color: var(--yee-neutral6-color);
+  --yee-rate-star-icon-color: var(--yee-neutral6-color);
   --yee-rate-star-full-icon-color: var(--yee-secondary2-color);
 
   /* --Select-- */
@@ -714,7 +676,7 @@
   /* --Slider-- */
 
   --yee-slider-track-bg-color: var(--yee-primary1-color);
-  --yee-slider-track-bg-hover-color: var(--yee-primary-color-hover);
+  --yee-slider-track-bg-hover-color: var(--yee-color-primary-hover);
 
   --yee-slider-handle-border-color: var(--yee-primary1-color);
   --yee-slider-handle-bg-color: var(--yee-color-bg-container);
@@ -751,7 +713,7 @@
   /* --Switch-- */
 
   --yee-switchbox-switch-color: #ffffff;
-  --yee-switchbox-switch-bg-color: var(--yee-border-color);
+  --yee-switchbox-switch-bg-color: var(--yee-color-border);
   --yee-switchbox-switch-border-color: var(--yee-switchbox-switch-bg-color);
 
   --yee-switchbox-switch-bg-hover-color: #bfbfbf;
@@ -772,12 +734,12 @@
 
   --yee-switchbox-switch-checked-color: #ffffff;
   --yee-switchbox-switch-checked-bg-color: var(--yee-primary1-color);
-  --yee-switchbox-switch-checked-border-color: var(--yee-primary-color);
+  --yee-switchbox-switch-checked-border-color: var(--yee-color-primary);
 
-  --yee-switchbox-switch-checked-bg-hover-color: var(--yee-primary-color-hover);
+  --yee-switchbox-switch-checked-bg-hover-color: var(--yee-color-primary-hover);
 
   --yee-switchbox-switch-checked-border-hover-color: var(
-    --yee-primary-color-hover
+    --yee-color-primary-hover
   );
 
   --yee-switchbox-switch-checked-handle-bg-color: #fff;
@@ -797,7 +759,7 @@
   /* --Transfer-- */
 
   --yee-transfer-bg-color: #ffffff;
-  --yee-transfer-list-border-color: var(--yee-border-color);
+  --yee-transfer-list-border-color: var(--yee-color-border);
   --yee-transfer-list-bg-color: var(--yee-color-bg-container);
 
   --yee-transfer-list-header-bg-color: var(--yee-color-bg-container);
@@ -812,26 +774,26 @@
   --yee-transfer-list-delete-font-color: var(--yee-neutral3-color);
   --yee-transfer-list-delete-hover-font-color: var(--yee-primary1-color);
   --yee-transfer-operation-disabled-color: var(--yee-neutral3-color);
-  --yee-transfer-operation-disabled-border-color: var(--yee-border-color);
+  --yee-transfer-operation-disabled-border-color: var(--yee-color-border);
   --yee-transfer-operation-disabled-bg-color: var(--yee-disabled-bg-color);
 
   /* --TreeSelect-- */
 
-  --yee-treeselect-dropdown-bg-color: #ffffff;
+  --yee-tree-select-dropdown-bg-color: #ffffff;
 
   /* --Upload-- */
 
-  --yee-upload-dragger-trigger-icon-color: var(--yee-text-color);
+  --yee-upload-dragger-trigger-icon-color: var(--yee-color-text);
 
   --yee-upload-dragger-trigger-color: var(--yee-btn-text-color);
-  --yee-upload-dragger-trigger-border-color: var(--yee-border-color);
+  --yee-upload-dragger-trigger-border-color: var(--yee-color-border);
 
   --yee-upload-dragger-trigger-hover-color: var(--yee-btn-text-hover-color);
   --yee-upload-dragger-trigger-des-color: var(--yee-neutral3-color);
   --yee-upload-dragger-trigger-disabled-color: var(--yee-neutral3-color);
   --yee-upload-dragger-trigger-disabled-bg-color: var(--yee-disabled-bg-color);
-  --yee-upload-dragger-trigger-disabled-border-color: var(--yee-border-color);
-  --yee-upload-error-color: var(--yee-error-color);
+  --yee-upload-dragger-trigger-disabled-border-color: var(--yee-color-border);
+  --yee-upload-error-color: var(--yee-color-error);
   --yee-upload-error-hover-color: var(--yee-error-hover-color);
   --yee-upload-list-item-color: var(--yee-primary1-color);
   --yee-upload-list-item-icon-color: var(--yee-neutral3-color);
@@ -839,17 +801,17 @@
   --yee-upload-list-item-hover-color: var(--yee-global-font-color);
   --yee-upload-list-item-hover-bg-color: var(--yee-option-hover-bg-color);
   --yee-upload-list-item-custom-btn-text-color: var(
-    --yee-text-color-description
+    --yee-color-text-description
   );
 
-  --yee-upload-list-item-custom-btn-text-hover-color: var(--yee-text-color);
+  --yee-upload-list-item-custom-btn-text-hover-color: var(--yee-color-text);
 
-  --yee-upload-list-item-custom-btn-text-active-color: var(--yee-text-color);
+  --yee-upload-list-item-custom-btn-text-active-color: var(--yee-color-text);
 
   --yee-upload-picture-list-item-border-color: var(--yee-neutral4-color);
-  --yee-upload-picture-wall-item-border-color: var(--yee-border-color);
+  --yee-upload-picture-wall-item-border-color: var(--yee-color-border);
 
-  --yee-upload-picture-list-item-border-error-color: var(--yee-error-color);
+  --yee-upload-picture-list-item-border-error-color: var(--yee-color-error);
 
   --yee-upload-state-error-border-color: #fcd6d8;
   --yee-upload-state-error-bg-color: #fef2f2;
@@ -859,17 +821,17 @@
   /* --Search-- */
 
   --yee-search-result-bg-color: #ffffff;
-  --yee-search-no-result-color: var(--yee-text-color-description);
+  --yee-search-no-result-color: var(--yee-color-text-description);
 
   /* --Badge-- */
 
   --yee-badge-default-color: #e67e22;
   --yee-badge-default-font-color: #fff;
 
-  --yee-badge-state-info-color: var(--yee-info-color);
-  --yee-badge-state-success-color: var(--yee-success-color);
-  --yee-badge-state-warning-color: var(--yee-warning-color);
-  --yee-badge-state-error-color: var(--yee-error-color);
+  --yee-badge-state-info-color: var(--yee-color-info);
+  --yee-badge-state-success-color: var(--yee-color-success);
+  --yee-badge-state-warning-color: var(--yee-color-warning);
+  --yee-badge-state-error-color: var(--yee-color-error);
   --yee-badge-state-disabled-color: var(--yee-neutral3-color);
   --yee-badge-state-default-color: var(--yee-neutral6-color);
   --yee-ribbon-content-color: #ffffff;
@@ -887,7 +849,7 @@
 
   /* --Calendar-- */
 
-  --yee-calendar-thead-color: var(--yee-text-color);
+  --yee-calendar-thead-color: var(--yee-color-text);
 
   --yee-calendar-cell-bg-color: var(--yee-color-bg-container);
 
@@ -903,7 +865,7 @@
 
   --yee-calendar-cell-current-bg-color: var(--yee-color-option-active-bg);
 
-  --yee-calendar-cell-current-border-color: var(--yee-primary-color);
+  --yee-calendar-cell-current-border-color: var(--yee-color-primary);
 
   --yee-calendar-cell-selected-color: var(--yee-color-option-active);
 
@@ -916,19 +878,19 @@
   --yee-card-bg-color: #ffffff;
   --yee-card-border-color: var(--yee-neutral4-color);
   --yee-card-header-title-font-color: var(--yee-global-font-color);
-  --yee-card-title-prefix-color: var(--yee-primary-color);
+  --yee-card-title-prefix-color: var(--yee-color-primary);
 
   --yee-card-group-bg-color: transparent;
   --yee-card-header-custom-btn-text-color: var(--yee-global-font-color);
-  --yee-card-header-custom-btn-text-hover-color: var(--yee-link-color-hover);
+  --yee-card-header-custom-btn-text-hover-color: var(--yee-color-link-hover);
 
-  --yee-card-header-custom-btn-text-active-color: var(--yee-link-color-active);
+  --yee-card-header-custom-btn-text-active-color: var(--yee-color-link-active);
 
-  --yee-card-header-expand-icon-color: var(--yee-text-color);
+  --yee-card-header-expand-icon-color: var(--yee-color-text);
 
-  --yee-card-header-expand-icon-hover-color: var(--yee-text-color);
+  --yee-card-header-expand-icon-hover-color: var(--yee-color-text);
 
-  --yee-card-header-expand-icon-active-color: var(--yee-text-color);
+  --yee-card-header-expand-icon-active-color: var(--yee-color-text);
 
   --yee-card-group-inner-bg-color: #ffffff;
   --yee-card-header-clickable-bg-color: #efefef;
@@ -936,9 +898,9 @@
   /* --Carousel-- */
 
   --yee-carousel-bar-bg-color: #ffffff;
-  --yee-carousel-bar-hover-active-bg-color: var(--yee-primary-color);
+  --yee-carousel-bar-hover-active-bg-color: var(--yee-color-primary);
 
-  --yee-carousel-arrow-color: var(--yee-primary-color);
+  --yee-carousel-arrow-color: var(--yee-color-primary);
 
   --yee-carousel-arrow-bg-color: rgba(119, 122, 242, 7%);
 
@@ -946,9 +908,9 @@
 
   --yee-carousel-arrow-hover-color: #fff;
 
-  --yee-carousel-arrow-hover-bg-color: var(--yee-primary-color);
+  --yee-carousel-arrow-hover-bg-color: var(--yee-color-primary);
 
-  --yee-carousel-arrow-hover-border-color: var(--yee-primary-color);
+  --yee-carousel-arrow-hover-border-color: var(--yee-color-primary);
 
   /* --Collapse-- */
 
@@ -956,19 +918,19 @@
   --yee-collapse-item-bg-color: #ffffff;
   --yee-collapse-header-bg-color: var(--yee-neutral7-color);
   --yee-collapse-border-color: var(--yee-neutral4-color);
-  --yee-collapse-info-color: var(--yee-info-color);
-  --yee-collapse-success-color: var(--yee-success-color);
-  --yee-collapse-warning-color: var(--yee-warning-color);
-  --yee-collapse-error-color: var(--yee-error-color);
-  --yee-collapse-header-custom-btn-text-color: var(--yee-text-color);
+  --yee-collapse-info-color: var(--yee-color-info);
+  --yee-collapse-success-color: var(--yee-color-success);
+  --yee-collapse-warning-color: var(--yee-color-warning);
+  --yee-collapse-error-color: var(--yee-color-error);
+  --yee-collapse-header-custom-btn-text-color: var(--yee-color-text);
 
-  --yee-collapse-header-custom-btn-text-hover-color: var(--yee-primary-color);
+  --yee-collapse-header-custom-btn-text-hover-color: var(--yee-color-primary);
 
-  --yee-collapse-header-custom-btn-text-active-color: var(--yee-primary-color);
+  --yee-collapse-header-custom-btn-text-active-color: var(--yee-color-primary);
 
   /* --Highlight-- */
 
-  --yee-highlight-color: var(--yee-primary-color);
+  --yee-highlight-color: var(--yee-color-primary);
 
   --yee-highlight-hover-color: #39364e;
 
@@ -976,53 +938,53 @@
 
   /* --ImagePreview-- */
 
-  --yee-image-preview-image-mask-bg-color: var(--yee-mask-bg-color);
+  --yee-image-viewer-image-mask-bg-color: var(--yee-mask-bg-color);
 
-  --yee-image-preview-mask-color: #fff;
+  --yee-image-viewer-mask-color: #fff;
 
-  --yee-image-preview-mask-bg-color: var(--yee-mask-bg-color);
+  --yee-image-viewer-mask-bg-color: var(--yee-mask-bg-color);
 
-  --yee-image-preview-close-icon-color: rgba(255, 255, 255, 88%);
+  --yee-image-viewer-close-icon-color: rgba(255, 255, 255, 88%);
 
-  --yee-image-preview-close-icon-bg-color: rgba(0, 0, 0, 16%);
+  --yee-image-viewer-close-icon-bg-color: rgba(0, 0, 0, 16%);
 
-  --yee-image-preview-close-icon-hover-color: #fff;
+  --yee-image-viewer-close-icon-hover-color: #fff;
 
-  --yee-image-preview-toolbar-bg-color: rgba(0, 0, 0, 32%);
+  --yee-image-viewer-toolbar-bg-color: rgba(0, 0, 0, 32%);
 
-  --yee-image-preview-toolbar-color: rgba(255, 255, 255, 72%);
+  --yee-image-viewer-toolbar-color: rgba(255, 255, 255, 72%);
 
-  --yee-image-preview-toolbar-hover-color: #fff;
+  --yee-image-viewer-toolbar-hover-color: #fff;
 
-  --yee-image-preview-toolbar-disabled-color: rgba(255, 255, 255, 32%);
+  --yee-image-viewer-toolbar-disabled-color: rgba(255, 255, 255, 32%);
 
-  --yee-image-preview-toolbar-zoom-color: #fff;
+  --yee-image-viewer-toolbar-zoom-color: #fff;
 
-  --yee-image-preview-toolbar-split-color: rgba(255, 255, 255, 16%);
+  --yee-image-viewer-toolbar-split-color: rgba(255, 255, 255, 16%);
 
-  --yee-image-preview-split-color: rgba(255, 255, 255, 8%);
+  --yee-image-viewer-split-color: rgba(255, 255, 255, 8%);
 
-  --yee-image-preview-selected-border-color: rgba(0, 0, 0, 32%);
+  --yee-image-viewer-selected-border-color: rgba(0, 0, 0, 32%);
 
-  --yee-image-preview-arrow-color: #fff;
+  --yee-image-viewer-arrow-color: #fff;
 
-  --yee-image-preview-arrow-hover-color: #fff;
+  --yee-image-viewer-arrow-hover-color: #fff;
 
-  --yee-image-preview-arrow-bg-color: rgba(255, 255, 255, 8%);
+  --yee-image-viewer-arrow-bg-color: rgba(255, 255, 255, 8%);
 
-  --yee-image-preview-arrow-bg-hover-color: rgba(255, 255, 255, 16%);
+  --yee-image-viewer-arrow-bg-hover-color: rgba(255, 255, 255, 16%);
 
-  --yee-image-preview-viewer-bg-color: var(--yee-color-bg-layout);
+  --yee-image-viewer-viewer-bg-color: var(--yee-color-bg-layout);
 
   /* --Popover-- */
 
   --yee-popover-bg-color: #ffffff;
   --yee-popover-header-bg-color: #ffffff;
-  --yee-popover-confirm-icon-color: var(--yee-warning-color);
+  --yee-popover-confirm-icon-color: var(--yee-color-warning);
 
   /* --QRCode-- */
 
-  --yee-qrcode-fill-color: var(--yee-text-color);
+  --yee-qrcode-fill-color: var(--yee-color-text);
 
   --yee-qrcode-border-color: var(--yee-color-split);
 
@@ -1030,12 +992,12 @@
 
   --yee-qrcode-mask-bg-color: rgba(255, 255, 255, 96%);
 
-  --yee-qrcode-mask-font-color: var(--yee-text-color);
+  --yee-qrcode-mask-font-color: var(--yee-color-text);
 
   /* --Table-- */
 
   --yee-table-color: var(--yee-global-font-color);
-  --yee-table-thead-color: var(--yee-text-color-secondary);
+  --yee-table-thead-color: var(--yee-color-text-secondary);
 
   --yee-table-bg-color: #ffffff;
   --yee-table-elevated-bg-color: var(--yee-table-bg-color);
@@ -1077,20 +1039,20 @@
     --yee-table-tbody-tr-hover-bg-color
   );
 
-  --yee-table-head-action-search-color: var(--yee-text-color-auxiliary);
+  --yee-table-head-action-search-color: var(--yee-color-text-auxiliary);
 
-  --yee-table-head-action-filter-color: var(--yee-text-color-auxiliary);
+  --yee-table-head-action-filter-color: var(--yee-color-text-auxiliary);
 
-  --yee-table-head-action-sort-color: var(--yee-text-color-auxiliary);
+  --yee-table-head-action-sort-color: var(--yee-color-text-auxiliary);
 
-  --yee-table-head-action-hover-color: var(--yee-text-color-description);
+  --yee-table-head-action-hover-color: var(--yee-color-text-description);
 
   --yee-table-head-action-active-color: var(--yee-primary1-color);
-  --yee-table-head-filter-color: var(--yee-text-color);
+  --yee-table-head-filter-color: var(--yee-color-text);
 
-  --yee-table-head-filter-hover-color: var(--yee-primary-color);
+  --yee-table-head-filter-hover-color: var(--yee-color-primary);
 
-  --yee-table-head-filter-active-color: var(--yee-primary-color);
+  --yee-table-head-filter-active-color: var(--yee-color-primary);
 
   --yee-table-fixed-left-after-bs-color: var(--yee-box-shadow-color);
   --yee-table-fixed-right-after-bs-color: var(--yee-box-shadow-color);
@@ -1102,7 +1064,7 @@
 
   --yee-table-summary-bg-color: var(--yee-color-bg-container);
 
-  --yee-table-no-record-color: var(--yee-text-color-description);
+  --yee-table-no-record-color: var(--yee-color-text-description);
 
   /* --Tabs-- */
 
@@ -1111,21 +1073,23 @@
 
   --yee-tabs-fixed-bg-color: var(--yee-global-body-bg-color);
   --yee-tabs-before-border-color: var(--yee-neutral4-color);
-  --yee-tabitem-title-active-hover-color: var(--yee-primary1-color);
-  --yee-tabitem-title-disabled-color: var(--yee-neutral3-color);
+  --yee-tabs-tab-title-active-hover-color: var(--yee-primary1-color);
+  --yee-tabs-tab-title-disabled-color: var(--yee-neutral3-color);
   --yee-tabs-active-border-color: var(--yee-primary1-color);
   --yee-tabs-border-color: var(--yee-neutral4-color);
   --yee-tabs-badge-bg-color: var(--yee-neutral6-color);
   --yee-tabs-badge-font-color: var(--yee-global-font-color);
-  --yee-tabs-pills-border-color: var(--yee-border-color);
-  --yee-tabitem-active-hover-pills-color: var(--yee-primary1-color);
-  --yee-tabitem-active-pills-border-color: var(--yee-primary1-color);
-  --yee-tabitem-dropdown-title-hover-color: var(--yee-color-option-hover);
+  --yee-tabs-pills-border-color: var(--yee-color-border);
+  --yee-tabs-tab-active-hover-pills-color: var(--yee-primary1-color);
+  --yee-tabs-tab-active-pills-border-color: var(--yee-primary1-color);
+  --yee-tabs-tab-dropdown-title-hover-color: var(--yee-color-option-hover);
 
-  --yee-tabitem-dropdown-title-hover-bg-color: var(--yee-option-hover-bg-color);
-  --yee-tabitem-dropdown-title-active-color: var(--yee-color-option-active);
+  --yee-tabs-tab-dropdown-title-hover-bg-color: var(
+    --yee-option-hover-bg-color
+  );
+  --yee-tabs-tab-dropdown-title-active-color: var(--yee-color-option-active);
 
-  --yee-tabitem-dropdown-title-active-bg-color: var(
+  --yee-tabs-tab-dropdown-title-active-bg-color: var(
     --yee-color-option-active-bg
   );
 
@@ -1137,11 +1101,11 @@
 
   --yee-tabs-card-active-bg-color: #ffffff;
   --yee-tabs-card-bg-color: transparent;
-  --yee-tabs-header-custom-btn-text-color: var(--yee-text-color);
+  --yee-tabs-header-custom-btn-text-color: var(--yee-color-text);
 
-  --yee-tabs-header-custom-btn-text-hover-color: var(--yee-primary-color);
+  --yee-tabs-header-custom-btn-text-hover-color: var(--yee-color-primary);
 
-  --yee-tabs-header-custom-btn-text-active-color: var(--yee-primary-color);
+  --yee-tabs-header-custom-btn-text-active-color: var(--yee-color-primary);
 
   /* --Tag-- */
 
@@ -1150,7 +1114,7 @@
   --yee-tag-item-bg-color: var(--yee-neutral7-color);
   --yee-tag-hover-color: var(--yee-global-font-color);
   --yee-tag-item-dashed-bg-color: #ffffff;
-  --yee-tag-item-title-color: var(--yee-text-color-description);
+  --yee-tag-item-title-color: var(--yee-color-text-description);
 
   --yee-tag-item-not-check-color: var(--yee-global-font-color);
   --yee-tag-item-not-check-bg-color: #ffffff;
@@ -1161,16 +1125,16 @@
   --yee-tag-item-check-active-color: #ffffff;
   --yee-tag-item-check-active-bg-color: var(--yee-primary1-color);
   --yee-tag-item-check-active-border-color: var(--yee-primary1-color);
-  --yee-tag-info-color: var(--yee-info-color);
+  --yee-tag-info-color: var(--yee-color-info);
   --yee-tag-info-border-color: #cedde4;
   --yee-tag-info-bg-color: #eff4f6;
-  --yee-tag-success-color: var(--yee-success-color);
+  --yee-tag-success-color: var(--yee-color-success);
   --yee-tag-success-border-color: #c2efea;
   --yee-tag-success-bg-color: #ebfaf8;
-  --yee-tag-warning-color: var(--yee-warning-color);
+  --yee-tag-warning-color: var(--yee-color-warning);
   --yee-tag-warning-border-color: #ffeec2;
   --yee-tag-warning-bg-color: #fffaeb;
-  --yee-tag-error-color: var(--yee-error-color);
+  --yee-tag-error-color: var(--yee-color-error);
   --yee-tag-error-border-color: #fcd6d8;
   --yee-tag-error-bg-color: #fef2f2;
   --yee-tag-disabled-color: var(--yee-neutral3-color);
@@ -1185,24 +1149,24 @@
 
   --yee-timeline-item-title-color: var(--yee-global-font-color);
   --yee-timeline-item-content-color: var(--yee-neutral3-color);
-  --yee-timeline-item-info: var(--yee-info-color);
-  --yee-timeline-item-success: var(--yee-success-color);
-  --yee-timeline-item-warning: var(--yee-warning-color);
-  --yee-timeline-item-error: var(--yee-error-color);
-  --yee-timeline-item-disabled: var(--yee-text-color-disabled);
+  --yee-timeline-item-info: var(--yee-color-info);
+  --yee-timeline-item-success: var(--yee-color-success);
+  --yee-timeline-item-warning: var(--yee-color-warning);
+  --yee-timeline-item-error: var(--yee-color-error);
+  --yee-timeline-item-disabled: var(--yee-color-text-disabled);
 
   /* --Tooltip-- */
 
   --yee-tooltip-font-color: #ffffff;
   --yee-tooltip-bg-color: rgba(0, 0, 0, 0.88);
   --yee-tooltip-info-color: #ffffff;
-  --yee-tooltip-info-bg-color: var(--yee-info-color);
+  --yee-tooltip-info-bg-color: var(--yee-color-info);
   --yee-tooltip-success-color: #ffffff;
-  --yee-tooltip-success-bg-color: var(--yee-success-color);
+  --yee-tooltip-success-bg-color: var(--yee-color-success);
   --yee-tooltip-warning-color: #ffffff;
-  --yee-tooltip-warning-bg-color: var(--yee-warning-color);
+  --yee-tooltip-warning-bg-color: var(--yee-color-warning);
   --yee-tooltip-error-color: #ffffff;
-  --yee-tooltip-error-bg-color: var(--yee-error-color);
+  --yee-tooltip-error-bg-color: var(--yee-color-error);
 
   /* --Tree-- */
 
@@ -1219,11 +1183,11 @@
   --yee-tree-directory-node-active-bg-color: var(--yee-option-active-bg-color);
   --yee-tree-node-line-color: var(--yee-neutral4-color);
   --yee-tree-node-high-light-color: var(--yee-primary1-color);
-  --yee-tree-header-custom-btn-text-color: var(--yee-text-color-description);
+  --yee-tree-header-custom-btn-text-color: var(--yee-color-text-description);
 
-  --yee-tree-header-custom-btn-text-hover-color: var(--yee-primary-color);
+  --yee-tree-header-custom-btn-text-hover-color: var(--yee-color-primary);
 
-  --yee-tree-header-custom-btn-text-active-color: var(--yee-primary-color);
+  --yee-tree-header-custom-btn-text-active-color: var(--yee-color-primary);
 
   /* --Alert-- */
 
@@ -1248,10 +1212,10 @@
   --yee-dialog-body-bg-color: #ffffff;
   --yee-dialog-title-color: var(--yee-global-font-color);
   --yee-dialog-title-before-bg-color: var(--yee-primary1-color);
-  --yee-dialog-confirm-info-color: var(--yee-info-color);
-  --yee-dialog-confirm-success-color: var(--yee-success-color);
-  --yee-dialog-confirm-warning-color: var(--yee-warning-color);
-  --yee-dialog-confirm-error-color: var(--yee-error-color);
+  --yee-dialog-confirm-info-color: var(--yee-color-info);
+  --yee-dialog-confirm-success-color: var(--yee-color-success);
+  --yee-dialog-confirm-warning-color: var(--yee-color-warning);
+  --yee-dialog-confirm-error-color: var(--yee-color-error);
   --yee-dialog-content-bg-color: var(--yee-color-bg-elevated);
 
   --yee-dialog-content-box-shadow-color: rgba(15, 15, 15, 8%);
@@ -1267,10 +1231,10 @@
   /* --Message-- */
 
   --yee-message-bg-color: #ffffff;
-  --yee-message-info-color: var(--yee-info-color);
-  --yee-message-success-color: var(--yee-success-color);
-  --yee-message-warning-color: var(--yee-warning-color);
-  --yee-message-error-color: var(--yee-error-color);
+  --yee-message-info-color: var(--yee-color-info);
+  --yee-message-success-color: var(--yee-color-success);
+  --yee-message-warning-color: var(--yee-color-warning);
+  --yee-message-error-color: var(--yee-color-error);
 
   /* --Notification-- */
 
@@ -1318,10 +1282,10 @@
   --yee-progress-not-bg-color: var(--yee-neutral6-color);
   --yee-progress-done-color: var(--yee-primary2-color);
   --yee-progress-default-bg-color: var(--yee-primary1-color);
-  --yee-progress-info-color: var(--yee-info-color);
-  --yee-progress-success-color: var(--yee-success-color);
-  --yee-progress-warning-color: var(--yee-warning-color);
-  --yee-progress-error-color: var(--yee-error-color);
+  --yee-progress-info-color: var(--yee-color-info);
+  --yee-progress-success-color: var(--yee-color-success);
+  --yee-progress-warning-color: var(--yee-color-warning);
+  --yee-progress-error-color: var(--yee-color-error);
   --yee-progress-circle-bg-color: #ffffff;
   --yee-progress-circle-segment-progress-color: var(--yee-primary1-color);
   --yee-progress-circle-segment-done-color: var(--yee-primary2-color);
@@ -1335,32 +1299,32 @@
   /* --Spin-- */
 
   --yee-spin-default-color: var(--yee-primary1-color);
-  --yee-spin-info-color: var(--yee-info-color);
-  --yee-spin-success-color: var(--yee-success-color);
-  --yee-spin-warning-color: var(--yee-warning-color);
-  --yee-spin-danger-color: var(--yee-error-color);
+  --yee-spin-info-color: var(--yee-color-info);
+  --yee-spin-success-color: var(--yee-color-success);
+  --yee-spin-warning-color: var(--yee-color-warning);
+  --yee-spin-danger-color: var(--yee-color-error);
   --yee-full-loading-color: var(--yee-primary1-color);
   --yee-full-loading-item-bg-color: #ffffff;
   --yee-full-loading-mask-bg-color: rgba(255, 255, 255, 0.4);
 
   /* --Selector-- */
 
-  --yee-selector-border-color: var(--yee-border-color);
-  --yee-selector-hover-border-color: var(--yee-border-color-hover-focus);
-  --yee-selector-focus-border-color: var(--yee-primary-color);
+  --yee-selector-border-color: var(--yee-color-border);
+  --yee-selector-hover-border-color: var(--yee-color-border-hover-focus);
+  --yee-selector-focus-border-color: var(--yee-color-primary);
   --yee-selector-disabled-bg-color: var(--yee-input-disabled-bg-color);
 
   /* --Watermark-- */
 
-  --yee-watermark-color: var(--yee-text-color);
+  --yee-watermark-color: var(--yee-color-text);
 
   /* --Descriptions-- */
 
-  --yee-descriptions-color: var(--yee-text-color);
-  --yee-descriptions-title-color: var(--yee-text-color);
-  --yee-descriptions-extra-color: var(--yee-text-color);
-  --yee-descriptions-label-color: var(--yee-text-color-description);
-  --yee-descriptions-content-color: var(--yee-text-color);
+  --yee-descriptions-color: var(--yee-color-text);
+  --yee-descriptions-title-color: var(--yee-color-text);
+  --yee-descriptions-extra-color: var(--yee-color-text);
+  --yee-descriptions-label-color: var(--yee-color-text-description);
+  --yee-descriptions-content-color: var(--yee-color-text);
   --yee-descriptions-border-color: var(--yee-color-split);
   --yee-descriptions-bordered-label-bg: var(--yee-color-fill-quaternary);
 }