@txdfe/at-theme 1.1.6 → 2.0.1-0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txdfe/at-theme",
-  "version": "1.1.6",
+  "version": "2.0.1-0",
   "description": "at主题包",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/teambition/css/index.css

@@ -151,83 +151,87 @@
 --S52: 52px;
 --S56: 56px;
 --S80: 80px;
---highlight-brand: var(--XDS_blue4_color);
---bright-brand: var(--XDS_blue3_color);
---border-brand: var(--XDS_blue2_color);
---primary-brand: var(--XDS_blue1_color);
---hover-brand: var(--XDS_blue1_hover_color);
---click-brand: var(--XDS_blue1_active_color);
---heavy-brand: var(--XDS_blue1_click_color);
---highlight-danger: var(--XDS_red4_color);
---bright-danger: var(--XDS_red3_color);
---border-danger: var(--XDS_red2_color);
---primary-danger: var(--XDS_red1_color);
---hover-danger: var(--XDS_red1_hover_color);
---click-danger: var(--XDS_red1_active_color);
---heavy-danger: var(--XDS_red1_click_color);
---highlight-warning: var(--XDS_orange4_color);
---bright-warning: var(--XDS_orange3_color);
---border-warning: var(--XDS_orange2_color);
---primary-warning: var(--XDS_orange1_color);
---hover-warning: var(--XDS_orange1_hover_color);
---click-warning: var(--XDS_orange1_active_color);
---heavy-warning: var(--XDS_orange1_click_color);
---highlight-alert: var(--XDS_yellow4_color);
---bright-alert: var(--XDS_yellow3_color);
---border-alert: var(--XDS_yellow2_color);
---primary-alert: var(--XDS_yellow1_color);
---hover-alert: var(--XDS_yellow1_hover_color);
---click-alert: var(--XDS_yellow1_active_color);
---heavy-alert: var(--XDS_yellow1_click_color);
---highlight-success: var(--XDS_green4_color);
---bright-success: var(--XDS_green3_color);
---border-success: var(--XDS_green2_color);
---primary-success: var(--XDS_green1_color);
---hover-success: var(--XDS_green1_hover_color);
---click-success: var(--XDS_green1_active_color);
---heavy-success: var(--XDS_green1_click_color);
---snow: #ffffff;
---gray-01: var(--XDS_bg_color);
---gray-02: var(--XDS_line_light_color);
---gray-03: var(--XDS_line_hard_color);
---gray-04: var(--XDS_line_hard_color);
---gray-05: var(--XDS_level4_base_color);
---gray-06: var(--XDS_level3_base_color);
---gray-07: var(--XDS_level2_base_color);
---gray-08: var(--XDS_level1_base_color);
---shadow-color: #000000;
---dashboard-01: #fab34f;
---dashboard-02: #ff656b;
---dashboard-03: #4ad051;
---dashboard-04: #9979f2;
---dashboard-05: #006cd9;
---dashboard-06: #5ccdbb;
---dashboard-07: #5c60e6;
---placeholder-01: #bc61cf;
---placeholder-02: #f26666;
---placeholder-03: #f29a52;
---placeholder-04: #f4c329;
---placeholder-05: #cbd057;
---placeholder-06: #29b3f0;
---placeholder-07: #3885ea;
+--highlight-brand: var(--CDS_highlight_brand);
+--bright-brand: var(--CDS_bright_brand);
+--border-brand: var(--CDS_border_brand);
+--primary-brand: var(--CDS_primary_brand);
+--hover-brand: var(--CDS_hover_brand);
+--click-brand: var(--CDS_click_brand);
+--heavy-brand: var(--CDS_heavy_brand);
+--highlight-danger: var(--CDS_highlight_danger);
+--bright-danger: var(--CDS_bright_danger);
+--border-danger: var(--CDS_border_danger);
+--primary-danger: var(--CDS_primary_danger);
+--hover-danger: var(--CDS_hover_danger);
+--click-danger: var(--CDS_click_danger);
+--heavy-danger: var(--CDS_heavy_danger);
+--highlight-warning: var(--CDS_highlight_warning);
+--bright-warning: var(--CDS_bright_warning);
+--border-warning: var(--CDS_border_warning);
+--primary-warning: var(--CDS_primary_warning);
+--hover-warning: var(---CDS_hover_warning);
+--click-warning: var(--CDS_click_warning);
+--heavy-warning: var(--CDS_heavy_warning);
+--highlight-alert: var(--CDS_highlight_alert);
+--bright-alert: var(--CDS_bright_alert);
+--border-alert: var(--CDS_border_alert);
+--primary-alert: var(--CDS_primary_alert);
+--hover-alert: var(--CDS_hover_alert);
+--click-alert: var(--CDS_click_alert);
+--heavy-alert: var(--CDS_heavy_alert);
+--highlight-success: var(--CDS_highlight_success);
+--bright-success: var(--CDS_bright_success);
+--border-success: var(--CDS_border_success);
+--primary-success: var(--CDS_primary_success);
+--hover-success: var(--CDS_hover_success);
+--click-success: var(--CDS_click_success);
+--heavy-success: var(--CDS_heavy_success);
+--snow: var(--CDS_snow);
+--gray-fill: var(--CDS_gray_fill);
+--gray-modal: var(--CDS_gray_modal);
+--gray-popover: var(--CDS_gray_popover);
+--gray-basic: var(--CDS_gray_basic);
+--gray-01: var(--CDS_gray_01);
+--gray-02: var(--CDS_gray_02);
+--gray-03: var(--CDS_gray_03);
+--gray-04: var(--CDS_gray_04);
+--gray-05: var(--CDS_gray_05);
+--gray-06: var(--CDS_gray_06);
+--gray-07: var(--CDS_gray_07);
+--gray-08: var(--CDS_gray_08);
+--shadow-color: var(--CDS_shadow_color);
+--dashboard-01: var(--CDS_data_orange);
+--dashboard-02: var(--CDS_data_red);
+--dashboard-03: var(--CDS_data_green);
+--dashboard-04: var(--CDS_data_purple);
+--dashboard-05: var(--CDS_data_blue);
+--dashboard-06: var(--CDS_data_cyan);
+--dashboard-07: var(--CDS_data_violet);
+--placeholder-01: var(--CDS_ph_plum);
+--placeholder-02: var(--CDS_ph_red);
+--placeholder-03: var(--CDS_ph_orange);
+--placeholder-04: var(--CDS_ph_amber);
+--placeholder-05: var(--CDS_ph_olive);
+--placeholder-06: var(--CDS_ph_sky);
+--placeholder-07: var(--CDS_ph_blue);
 --background-fill: #ffffff;
 --background-nav-search: rgba(0, 0, 0, 0);
---background-section: var(--XDS_fg_z1_color);
---background-layout: var(--XDS_fg_color);
---background-overlay: var(--XDS_fg_z1_color);
---background-switch-trigger: #ffffff;
---background-base: var(--XDS_bg_base);
---cell-line-hover: var(--XDS_line_hover_color);
---cell-line-active: var(--XDS_line_hard_color);
+--background-section: var(--CDS_gray_modal);
+--background-layout: var(--CDS_snow);
+--background-overlay: var(--CDS_gray_modal);
+--background-switch-trigger: var(--CDS_white_01);
+--background-base: var(--CDS_gray_fill);
+--cell-line-hover: var(--CDS_gray_fill);
+--cell-line-active: var(--CDS_gray_02);
 --tab-wrapped-bg-color-hover: rgba(0, 0, 0, 0);
 --tab-wrapped-bg-color: rgba(0, 0, 0, 0);
---tab-wrapped-bg-color-selected: var(--XDS_fg_color);
---step-dot-item-tail-wait-color: var(--XDS_line_hard_color);
---step-dot-item-tail-process-color: var(--XDS_line_hard_color);
---step-dot-item-tail-disabled-color: var(--XDS_line_hard_color);
---step-circle-item-tail-wait-color: var(--XDS_line_hard_color);
---step-circle-item-tail-process-color: var(--XDS_line_hard_color);
---step-circle-item-tail-disabled-color: var(--XDS_line_hard_color);
+--tab-wrapped-bg-color-selected: var(--CDS_gray_basic);
+--step-dot-item-tail-wait-color: var(--CDS_gray_05);
+--step-dot-item-tail-process-color: var(--CDS_gray_05);
+--step-dot-item-tail-disabled-color: var(--CDS_gray_05);
+--step-circle-item-tail-wait-color: var(--CDS_gray_05);
+--step-circle-item-tail-process-color: var(--CDS_gray_05);
+--step-circle-item-tail-disabled-color: var(--CDS_gray_05);
 --pagination-item-bg: rgba(0, 0, 0, 0);
 --nav-normal-bg-color: rgba(0, 0, 0, 0);
 --nav-normal-sub-nav-bg-color: rgba(0, 0, 0, 0);
@@ -242,65 +246,65 @@
 --nav-primary-item-opened-bg-color: var(--XDS_line_hover_color);
 --nav-primary-sub-nav-selected-bg-color: var(--XDS_line_hard_color);
 --nav-primary-sub-nav-bg-color: rgba(0, 0, 0, 0);
---table-row-hover-bg: var(--XDS_line_hover_color);
---menu-background-hover: var(--XDS_line_hover_color);
---menu-background-selected: var(--XDS_line_hard_color);
---menu-background-focus: var(--XDS_line_hard_color);
---menu-divider-color: var(--XDS_line_hard_color);
+--table-row-hover-bg: var(--CDS_gray_fill);
+--menu-background-hover: var(--CDS_gray_fill);
+--menu-background-selected: var(--CDS_gray_02);
+--menu-background-focus: var(--CDS_gray_02);
+--menu-divider-color: var(--CDS_gray_03);
 --input-bg-color: rgba(0, 0, 0, 0);
 --input-focus-bg-color: rgba(0, 0, 0, 0);
 --input-hover-bg-color: rgba(0, 0, 0, 0);
---input-disabled-bg-color: var(--XDS_line_hard_color);
---input-addon-bg-color: var(--XDS_line_hover_color);
---tag-closable-primary-fill-bg-color: var(--XDS_line_hard_color);
---tag-closable-primary-fill-bg-color-hover: var(--XDS_line_hard_color);
---tag-closable-primary-fill-bg-color-disabled: var(--XDS_line_hard_color);
---tag-closable-primary-fill-border-color-hover: var(--XDS_line_hover_color);
---tag-closable-primary-fill-border-color-disabled: var(--XDS_line_hover_color);
---tag-closable-primary-fill-text-color-disabled: var(--XDS_level4_base_color);
---transfer-panel-header-background-color: var(--XDS_line_hover_color);
---switch-disabled-on-bg-color: var(--XDS_line_hard_color);
---search-nav-search-bg-color: var(--XDS_line_hover_color);
---range-normal-slider-bg-color: #ffffff;
---range-normal-slider-bg-color-hover: #ffffff;
+--input-disabled-bg-color: var(--CDS_gray_fill);
+--input-addon-bg-color: var(--CDS_gray_fill);
+--tag-closable-primary-fill-bg-color: var(--CDS_gray_02);
+--tag-closable-primary-fill-bg-color-hover: var(--CDS_gray_03);
+--tag-closable-primary-fill-bg-color-disabled: var(--CDS_gray_02);
+--tag-closable-primary-fill-border-color-hover: var(--CDS_gray_04);
+--tag-closable-primary-fill-border-color-disabled: var(--CDS_gray_03);
+--tag-closable-primary-fill-text-color-disabled: var(--CDS_gray_05);
+--transfer-panel-header-background-color: var(--CDS_gray_basic);
+--switch-disabled-on-bg-color: var(--CDS_gray_03);
+--search-nav-search-bg-color: var(--CDS_gray_fill);
+--range-normal-slider-bg-color: var(--CDS_white_01);
+--range-normal-slider-bg-color-hover: var(--CDS_white_01);
 --radio-bg-color: rgba(0, 0, 0, 0);
---radio-disabled-bg-color: var(--XDS_line_hard_color);
---calendar-card-table-cell-disabled-background: var(--XDS_line_hover_color);
---calendar-fullscreen-table-cell-disabled-background: var(--XDS_line_hover_color);
+--radio-disabled-bg-color: var(--CDS_gray_04);
+--calendar-card-table-cell-disabled-background: var(--CDS_gray_fill);
+--calendar-fullscreen-table-cell-disabled-background: var(--CDS_gray_fill);
 --checkbox-bg-color: rgba(0, 0, 0, 0);
---checkbox-disabled-bg-color: var(--XDS_line_hard_color);
+--checkbox-disabled-bg-color: var(--CDS_gray_04);
 --balloon-tooltip-color-primary-bg: rgba(0, 0, 0, 0.9) !important;
---balloon-tooltip-color-normal-bg: 'var(--XDS_fg_z1_color)', '!important';
---balloon-tooltip-color-normal: var(--XDS_level1_base_color);
---balloon-tooltip-color-primary: #ffffff;
---btn-warning-primary-bg-disabled: var(--XDS_line_hard_color);
---btn-warning-primary-color-disabled: var(--XDS_level4_base_color);
+--balloon-tooltip-color-normal-bg: 'var(--CDS_gray_popover)', '!important';
+--balloon-tooltip-color-normal: var(--CDS_gray_08);
+--balloon-tooltip-color-primary: var(--CDS_white_01);
+--btn-warning-primary-bg-disabled: var(--CDS_gray_05);
+--btn-warning-primary-color-disabled: var(--CDS_white_01);
 --btn-warning-primary-border-color-disabled: rgba(0, 0, 0, 0);
---btn-pure-color-disabled: var(--XDS_level4_base_color);
---btn-pure-bg-disabled: var(--XDS_line_hard_color);
---btn-pure-border-color-disabled: var(--XDS_line_hard_color);
+--btn-pure-color-disabled: var(--CDS_white_01);
+--btn-pure-bg-disabled: var(--CDS_gray_05);
+--btn-pure-border-color-disabled: var(--CDS_gray_05);
 --btn-ghost-dark-bg-normal: rgba(0, 0, 0, 0);
---btn-ghost-dark-color: var(--XDS_level1_base_color);
---btn-ghost-dark-color-hover: var(--XDS_level1_base_color);
---btn-ghost-dark-color-active: var(--XDS_level1_base_color);
---btn-ghost-dark-border-color-active: var(--XDS_level1_base_color);
---btn-ghost-dark-border-color-hover: var(--XDS_level1_base_color);
---btn-ghost-dark-border-color: var(--XDS_level1_base_color);
---btn-ghost-dark-bg-hover: var(--XDS_line_hover_color);
---btn-ghost-dark-bg-active: var(--XDS_line_hard_color);
---btn-ghost-dark-color-disabled: var(--XDS_level4_base_color);
---btn-ghost-dark-border-color-disabled: var(--XDS_level4_base_color);
+--btn-ghost-dark-color: var(--CDS_gray_08);
+--btn-ghost-dark-color-hover: var(--CDS_gray_08);
+--btn-ghost-dark-color-active: var(--CDS_gray_08);
+--btn-ghost-dark-border-color-active: var(--CDS_gray_08);
+--btn-ghost-dark-border-color-hover: var(--CDS_gray_08);
+--btn-ghost-dark-border-color: var(--CDS_gray_08);
+--btn-ghost-dark-bg-hover: var(--CDS_gray_fill);
+--btn-ghost-dark-bg-active: var(--CDS_gray_03);
+--btn-ghost-dark-color-disabled: var(--CDS_gray_05);
+--btn-ghost-dark-border-color-disabled: var(--CDS_gray_05);
 --btn-ghost-light-bg-normal: rgba(0, 0, 0, 0);
---btn-ghost-light-border-color: var(--XDS_fg_z1_color);
---btn-ghost-light-color: var(--XDS_fg_z1_color);
---btn-ghost-light-color-active: var(--XDS_fg_z1_color);
---btn-ghost-light-color-hover: var(--XDS_fg_z1_color);
---btn-ghost-light-border-color-active: var(--XDS_fg_z1_color);
---btn-ghost-light-border-color-hover: var(--XDS_fg_z1_color);
---btn-ghost-light-bg-hover: var(--XDS_line_hover_color);
---btn-ghost-light-bg-active: var(--XDS_line_hard_color);
---btn-ghost-light-color-disabled: var(--XDS_level4_base_color);
---btn-ghost-light-border-color-disabled: var(--XDS_level4_base_color);
+--btn-ghost-light-border-color: var(--CDS_gray_08);
+--btn-ghost-light-color: var(--CDS_gray_08);
+--btn-ghost-light-color-active: var(--CDS_gray_08);
+--btn-ghost-light-color-hover: var(--CDS_gray_08);
+--btn-ghost-light-border-color-active: var(--CDS_gray_08);
+--btn-ghost-light-border-color-hover: var(--CDS_gray_08);
+--btn-ghost-light-bg-hover: var(--CDS_gray_02);
+--btn-ghost-light-bg-active: var(--CDS_gray_03);
+--btn-ghost-light-color-disabled: var(--CDS_gray_05);
+--btn-ghost-light-border-color-disabled: var(--CDS_gray_05);
 --font-size-caption: 12px;
 --font-size-body: 14px;
 --font-size-subhead: 14px;

package/teambition/js/index.js

@@ -153,83 +153,87 @@ module.exports = {
   S52: "52px",
   S56: "56px",
   S80: "80px",
-  "highlight-brand": "var(--XDS_blue4_color)",
-  "bright-brand": "var(--XDS_blue3_color)",
-  "border-brand": "var(--XDS_blue2_color)",
-  "primary-brand": "var(--XDS_blue1_color)",
-  "hover-brand": "var(--XDS_blue1_hover_color)",
-  "click-brand": "var(--XDS_blue1_active_color)",
-  "heavy-brand": "var(--XDS_blue1_click_color)",
-  "highlight-danger": "var(--XDS_red4_color)",
-  "bright-danger": "var(--XDS_red3_color)",
-  "border-danger": "var(--XDS_red2_color)",
-  "primary-danger": "var(--XDS_red1_color)",
-  "hover-danger": "var(--XDS_red1_hover_color)",
-  "click-danger": "var(--XDS_red1_active_color)",
-  "heavy-danger": "var(--XDS_red1_click_color)",
-  "highlight-warning": "var(--XDS_orange4_color)",
-  "bright-warning": "var(--XDS_orange3_color)",
-  "border-warning": "var(--XDS_orange2_color)",
-  "primary-warning": "var(--XDS_orange1_color)",
-  "hover-warning": "var(--XDS_orange1_hover_color)",
-  "click-warning": "var(--XDS_orange1_active_color)",
-  "heavy-warning": "var(--XDS_orange1_click_color)",
-  "highlight-alert": "var(--XDS_yellow4_color)",
-  "bright-alert": "var(--XDS_yellow3_color)",
-  "border-alert": "var(--XDS_yellow2_color)",
-  "primary-alert": "var(--XDS_yellow1_color)",
-  "hover-alert": "var(--XDS_yellow1_hover_color)",
-  "click-alert": "var(--XDS_yellow1_active_color)",
-  "heavy-alert": "var(--XDS_yellow1_click_color)",
-  "highlight-success": "var(--XDS_green4_color)",
-  "bright-success": "var(--XDS_green3_color)",
-  "border-success": "var(--XDS_green2_color)",
-  "primary-success": "var(--XDS_green1_color)",
-  "hover-success": "var(--XDS_green1_hover_color)",
-  "click-success": "var(--XDS_green1_active_color)",
-  "heavy-success": "var(--XDS_green1_click_color)",
-  snow: "#ffffff",
-  "gray-01": "var(--XDS_bg_color)",
-  "gray-02": "var(--XDS_line_light_color)",
-  "gray-03": "var(--XDS_line_hard_color)",
-  "gray-04": "var(--XDS_line_hard_color)",
-  "gray-05": "var(--XDS_level4_base_color)",
-  "gray-06": "var(--XDS_level3_base_color)",
-  "gray-07": "var(--XDS_level2_base_color)",
-  "gray-08": "var(--XDS_level1_base_color)",
-  "shadow-color": "#000000",
-  "dashboard-01": "#fab34f",
-  "dashboard-02": "#ff656b",
-  "dashboard-03": "#4ad051",
-  "dashboard-04": "#9979f2",
-  "dashboard-05": "#006cd9",
-  "dashboard-06": "#5ccdbb",
-  "dashboard-07": "#5c60e6",
-  "placeholder-01": "#bc61cf",
-  "placeholder-02": "#f26666",
-  "placeholder-03": "#f29a52",
-  "placeholder-04": "#f4c329",
-  "placeholder-05": "#cbd057",
-  "placeholder-06": "#29b3f0",
-  "placeholder-07": "#3885ea",
+  "highlight-brand": "var(--CDS_highlight_brand)",
+  "bright-brand": "var(--CDS_bright_brand)",
+  "border-brand": "var(--CDS_border_brand)",
+  "primary-brand": "var(--CDS_primary_brand)",
+  "hover-brand": "var(--CDS_hover_brand)",
+  "click-brand": "var(--CDS_click_brand)",
+  "heavy-brand": "var(--CDS_heavy_brand)",
+  "highlight-danger": "var(--CDS_highlight_danger)",
+  "bright-danger": "var(--CDS_bright_danger)",
+  "border-danger": "var(--CDS_border_danger)",
+  "primary-danger": "var(--CDS_primary_danger)",
+  "hover-danger": "var(--CDS_hover_danger)",
+  "click-danger": "var(--CDS_click_danger)",
+  "heavy-danger": "var(--CDS_heavy_danger)",
+  "highlight-warning": "var(--CDS_highlight_warning)",
+  "bright-warning": "var(--CDS_bright_warning)",
+  "border-warning": "var(--CDS_border_warning)",
+  "primary-warning": "var(--CDS_primary_warning)",
+  "hover-warning": "var(---CDS_hover_warning)",
+  "click-warning": "var(--CDS_click_warning)",
+  "heavy-warning": "var(--CDS_heavy_warning)",
+  "highlight-alert": "var(--CDS_highlight_alert)",
+  "bright-alert": "var(--CDS_bright_alert)",
+  "border-alert": "var(--CDS_border_alert)",
+  "primary-alert": "var(--CDS_primary_alert)",
+  "hover-alert": "var(--CDS_hover_alert)",
+  "click-alert": "var(--CDS_click_alert)",
+  "heavy-alert": "var(--CDS_heavy_alert)",
+  "highlight-success": "var(--CDS_highlight_success)",
+  "bright-success": "var(--CDS_bright_success)",
+  "border-success": "var(--CDS_border_success)",
+  "primary-success": "var(--CDS_primary_success)",
+  "hover-success": "var(--CDS_hover_success)",
+  "click-success": "var(--CDS_click_success)",
+  "heavy-success": "var(--CDS_heavy_success)",
+  snow: "var(--CDS_snow)",
+  "gray-fill": "var(--CDS_gray_fill)",
+  "gray-modal": "var(--CDS_gray_modal)",
+  "gray-popover": "var(--CDS_gray_popover)",
+  "gray-basic": "var(--CDS_gray_basic)",
+  "gray-01": "var(--CDS_gray_01)",
+  "gray-02": "var(--CDS_gray_02)",
+  "gray-03": "var(--CDS_gray_03)",
+  "gray-04": "var(--CDS_gray_04)",
+  "gray-05": "var(--CDS_gray_05)",
+  "gray-06": "var(--CDS_gray_06)",
+  "gray-07": "var(--CDS_gray_07)",
+  "gray-08": "var(--CDS_gray_08)",
+  "shadow-color": "var(--CDS_shadow_color)",
+  "dashboard-01": "var(--CDS_data_orange)",
+  "dashboard-02": "var(--CDS_data_red)",
+  "dashboard-03": "var(--CDS_data_green)",
+  "dashboard-04": "var(--CDS_data_purple)",
+  "dashboard-05": "var(--CDS_data_blue)",
+  "dashboard-06": "var(--CDS_data_cyan)",
+  "dashboard-07": "var(--CDS_data_violet)",
+  "placeholder-01": "var(--CDS_ph_plum)",
+  "placeholder-02": "var(--CDS_ph_red)",
+  "placeholder-03": "var(--CDS_ph_orange)",
+  "placeholder-04": "var(--CDS_ph_amber)",
+  "placeholder-05": "var(--CDS_ph_olive)",
+  "placeholder-06": "var(--CDS_ph_sky)",
+  "placeholder-07": "var(--CDS_ph_blue)",
   "background-fill": "#ffffff",
   "background-nav-search": "rgba(0, 0, 0, 0)",
-  "background-section": "var(--XDS_fg_z1_color)",
-  "background-layout": "var(--XDS_fg_color)",
-  "background-overlay": "var(--XDS_fg_z1_color)",
-  "background-switch-trigger": "#ffffff",
-  "background-base": "var(--XDS_bg_base)",
-  "cell-line-hover": "var(--XDS_line_hover_color)",
-  "cell-line-active": "var(--XDS_line_hard_color)",
+  "background-section": "var(--CDS_gray_modal)",
+  "background-layout": "var(--CDS_snow)",
+  "background-overlay": "var(--CDS_gray_modal)",
+  "background-switch-trigger": "var(--CDS_white_01)",
+  "background-base": "var(--CDS_gray_fill)",
+  "cell-line-hover": "var(--CDS_gray_fill)",
+  "cell-line-active": "var(--CDS_gray_02)",
   "tab-wrapped-bg-color-hover": "rgba(0, 0, 0, 0)",
   "tab-wrapped-bg-color": "rgba(0, 0, 0, 0)",
-  "tab-wrapped-bg-color-selected": "var(--XDS_fg_color)",
-  "step-dot-item-tail-wait-color": "var(--XDS_line_hard_color)",
-  "step-dot-item-tail-process-color": "var(--XDS_line_hard_color)",
-  "step-dot-item-tail-disabled-color": "var(--XDS_line_hard_color)",
-  "step-circle-item-tail-wait-color": "var(--XDS_line_hard_color)",
-  "step-circle-item-tail-process-color": "var(--XDS_line_hard_color)",
-  "step-circle-item-tail-disabled-color": "var(--XDS_line_hard_color)",
+  "tab-wrapped-bg-color-selected": "var(--CDS_gray_basic)",
+  "step-dot-item-tail-wait-color": "var(--CDS_gray_05)",
+  "step-dot-item-tail-process-color": "var(--CDS_gray_05)",
+  "step-dot-item-tail-disabled-color": "var(--CDS_gray_05)",
+  "step-circle-item-tail-wait-color": "var(--CDS_gray_05)",
+  "step-circle-item-tail-process-color": "var(--CDS_gray_05)",
+  "step-circle-item-tail-disabled-color": "var(--CDS_gray_05)",
   "pagination-item-bg": "rgba(0, 0, 0, 0)",
   "nav-normal-bg-color": "rgba(0, 0, 0, 0)",
   "nav-normal-sub-nav-bg-color": "rgba(0, 0, 0, 0)",
@@ -244,68 +248,65 @@ module.exports = {
   "nav-primary-item-opened-bg-color": "var(--XDS_line_hover_color)",
   "nav-primary-sub-nav-selected-bg-color": "var(--XDS_line_hard_color)",
   "nav-primary-sub-nav-bg-color": "rgba(0, 0, 0, 0)",
-  "table-row-hover-bg": "var(--XDS_line_hover_color)",
-  "menu-background-hover": "var(--XDS_line_hover_color)",
-  "menu-background-selected": "var(--XDS_line_hard_color)",
-  "menu-background-focus": "var(--XDS_line_hard_color)",
-  "menu-divider-color": "var(--XDS_line_hard_color)",
+  "table-row-hover-bg": "var(--CDS_gray_fill)",
+  "menu-background-hover": "var(--CDS_gray_fill)",
+  "menu-background-selected": "var(--CDS_gray_02)",
+  "menu-background-focus": "var(--CDS_gray_02)",
+  "menu-divider-color": "var(--CDS_gray_03)",
   "input-bg-color": "rgba(0, 0, 0, 0)",
   "input-focus-bg-color": "rgba(0, 0, 0, 0)",
   "input-hover-bg-color": "rgba(0, 0, 0, 0)",
-  "input-disabled-bg-color": "var(--XDS_line_hard_color)",
-  "input-addon-bg-color": "var(--XDS_line_hover_color)",
-  "tag-closable-primary-fill-bg-color": "var(--XDS_line_hard_color)",
-  "tag-closable-primary-fill-bg-color-hover": "var(--XDS_line_hard_color)",
-  "tag-closable-primary-fill-bg-color-disabled": "var(--XDS_line_hard_color)",
-  "tag-closable-primary-fill-border-color-hover": "var(--XDS_line_hover_color)",
-  "tag-closable-primary-fill-border-color-disabled":
-    "var(--XDS_line_hover_color)",
-  "tag-closable-primary-fill-text-color-disabled":
-    "var(--XDS_level4_base_color)",
-  "transfer-panel-header-background-color": "var(--XDS_line_hover_color)",
-  "switch-disabled-on-bg-color": "var(--XDS_line_hard_color)",
-  "search-nav-search-bg-color": "var(--XDS_line_hover_color)",
-  "range-normal-slider-bg-color": "#ffffff",
-  "range-normal-slider-bg-color-hover": "#ffffff",
+  "input-disabled-bg-color": "var(--CDS_gray_fill)",
+  "input-addon-bg-color": "var(--CDS_gray_fill)",
+  "tag-closable-primary-fill-bg-color": "var(--CDS_gray_02)",
+  "tag-closable-primary-fill-bg-color-hover": "var(--CDS_gray_03)",
+  "tag-closable-primary-fill-bg-color-disabled": "var(--CDS_gray_02)",
+  "tag-closable-primary-fill-border-color-hover": "var(--CDS_gray_04)",
+  "tag-closable-primary-fill-border-color-disabled": "var(--CDS_gray_03)",
+  "tag-closable-primary-fill-text-color-disabled": "var(--CDS_gray_05)",
+  "transfer-panel-header-background-color": "var(--CDS_gray_basic)",
+  "switch-disabled-on-bg-color": "var(--CDS_gray_03)",
+  "search-nav-search-bg-color": "var(--CDS_gray_fill)",
+  "range-normal-slider-bg-color": "var(--CDS_white_01)",
+  "range-normal-slider-bg-color-hover": "var(--CDS_white_01)",
   "radio-bg-color": "rgba(0, 0, 0, 0)",
-  "radio-disabled-bg-color": "var(--XDS_line_hard_color)",
-  "calendar-card-table-cell-disabled-background": "var(--XDS_line_hover_color)",
-  "calendar-fullscreen-table-cell-disabled-background":
-    "var(--XDS_line_hover_color)",
+  "radio-disabled-bg-color": "var(--CDS_gray_04)",
+  "calendar-card-table-cell-disabled-background": "var(--CDS_gray_fill)",
+  "calendar-fullscreen-table-cell-disabled-background": "var(--CDS_gray_fill)",
   "checkbox-bg-color": "rgba(0, 0, 0, 0)",
-  "checkbox-disabled-bg-color": "var(--XDS_line_hard_color)",
+  "checkbox-disabled-bg-color": "var(--CDS_gray_04)",
   "balloon-tooltip-color-primary-bg": "rgba(0, 0, 0, 0.9) !important",
-  "balloon-tooltip-color-normal-bg": "'var(--XDS_fg_z1_color)', '!important'",
-  "balloon-tooltip-color-normal": "var(--XDS_level1_base_color)",
-  "balloon-tooltip-color-primary": "#ffffff",
-  "btn-warning-primary-bg-disabled": "var(--XDS_line_hard_color)",
-  "btn-warning-primary-color-disabled": "var(--XDS_level4_base_color)",
+  "balloon-tooltip-color-normal-bg": "'var(--CDS_gray_popover)', '!important'",
+  "balloon-tooltip-color-normal": "var(--CDS_gray_08)",
+  "balloon-tooltip-color-primary": "var(--CDS_white_01)",
+  "btn-warning-primary-bg-disabled": "var(--CDS_gray_05)",
+  "btn-warning-primary-color-disabled": "var(--CDS_white_01)",
   "btn-warning-primary-border-color-disabled": "rgba(0, 0, 0, 0)",
-  "btn-pure-color-disabled": "var(--XDS_level4_base_color)",
-  "btn-pure-bg-disabled": "var(--XDS_line_hard_color)",
-  "btn-pure-border-color-disabled": "var(--XDS_line_hard_color)",
+  "btn-pure-color-disabled": "var(--CDS_white_01)",
+  "btn-pure-bg-disabled": "var(--CDS_gray_05)",
+  "btn-pure-border-color-disabled": "var(--CDS_gray_05)",
   "btn-ghost-dark-bg-normal": "rgba(0, 0, 0, 0)",
-  "btn-ghost-dark-color": "var(--XDS_level1_base_color)",
-  "btn-ghost-dark-color-hover": "var(--XDS_level1_base_color)",
-  "btn-ghost-dark-color-active": "var(--XDS_level1_base_color)",
-  "btn-ghost-dark-border-color-active": "var(--XDS_level1_base_color)",
-  "btn-ghost-dark-border-color-hover": "var(--XDS_level1_base_color)",
-  "btn-ghost-dark-border-color": "var(--XDS_level1_base_color)",
-  "btn-ghost-dark-bg-hover": "var(--XDS_line_hover_color)",
-  "btn-ghost-dark-bg-active": "var(--XDS_line_hard_color)",
-  "btn-ghost-dark-color-disabled": "var(--XDS_level4_base_color)",
-  "btn-ghost-dark-border-color-disabled": "var(--XDS_level4_base_color)",
+  "btn-ghost-dark-color": "var(--CDS_gray_08)",
+  "btn-ghost-dark-color-hover": "var(--CDS_gray_08)",
+  "btn-ghost-dark-color-active": "var(--CDS_gray_08)",
+  "btn-ghost-dark-border-color-active": "var(--CDS_gray_08)",
+  "btn-ghost-dark-border-color-hover": "var(--CDS_gray_08)",
+  "btn-ghost-dark-border-color": "var(--CDS_gray_08)",
+  "btn-ghost-dark-bg-hover": "var(--CDS_gray_fill)",
+  "btn-ghost-dark-bg-active": "var(--CDS_gray_03)",
+  "btn-ghost-dark-color-disabled": "var(--CDS_gray_05)",
+  "btn-ghost-dark-border-color-disabled": "var(--CDS_gray_05)",
   "btn-ghost-light-bg-normal": "rgba(0, 0, 0, 0)",
-  "btn-ghost-light-border-color": "var(--XDS_fg_z1_color)",
-  "btn-ghost-light-color": "var(--XDS_fg_z1_color)",
-  "btn-ghost-light-color-active": "var(--XDS_fg_z1_color)",
-  "btn-ghost-light-color-hover": "var(--XDS_fg_z1_color)",
-  "btn-ghost-light-border-color-active": "var(--XDS_fg_z1_color)",
-  "btn-ghost-light-border-color-hover": "var(--XDS_fg_z1_color)",
-  "btn-ghost-light-bg-hover": "var(--XDS_line_hover_color)",
-  "btn-ghost-light-bg-active": "var(--XDS_line_hard_color)",
-  "btn-ghost-light-color-disabled": "var(--XDS_level4_base_color)",
-  "btn-ghost-light-border-color-disabled": "var(--XDS_level4_base_color)",
+  "btn-ghost-light-border-color": "var(--CDS_gray_08)",
+  "btn-ghost-light-color": "var(--CDS_gray_08)",
+  "btn-ghost-light-color-active": "var(--CDS_gray_08)",
+  "btn-ghost-light-color-hover": "var(--CDS_gray_08)",
+  "btn-ghost-light-border-color-active": "var(--CDS_gray_08)",
+  "btn-ghost-light-border-color-hover": "var(--CDS_gray_08)",
+  "btn-ghost-light-bg-hover": "var(--CDS_gray_02)",
+  "btn-ghost-light-bg-active": "var(--CDS_gray_03)",
+  "btn-ghost-light-color-disabled": "var(--CDS_gray_05)",
+  "btn-ghost-light-border-color-disabled": "var(--CDS_gray_05)",
   "font-size-caption": "12px",
   "font-size-body": "14px",
   "font-size-subhead": "14px",

package/teambition/less/index.less

@@ -150,83 +150,87 @@
 @S52: 52px;
 @S56: 56px;
 @S80: 80px;
-@highlight-brand: var(--XDS_blue4_color);
-@bright-brand: var(--XDS_blue3_color);
-@border-brand: var(--XDS_blue2_color);
-@primary-brand: var(--XDS_blue1_color);
-@hover-brand: var(--XDS_blue1_hover_color);
-@click-brand: var(--XDS_blue1_active_color);
-@heavy-brand: var(--XDS_blue1_click_color);
-@highlight-danger: var(--XDS_red4_color);
-@bright-danger: var(--XDS_red3_color);
-@border-danger: var(--XDS_red2_color);
-@primary-danger: var(--XDS_red1_color);
-@hover-danger: var(--XDS_red1_hover_color);
-@click-danger: var(--XDS_red1_active_color);
-@heavy-danger: var(--XDS_red1_click_color);
-@highlight-warning: var(--XDS_orange4_color);
-@bright-warning: var(--XDS_orange3_color);
-@border-warning: var(--XDS_orange2_color);
-@primary-warning: var(--XDS_orange1_color);
-@hover-warning: var(--XDS_orange1_hover_color);
-@click-warning: var(--XDS_orange1_active_color);
-@heavy-warning: var(--XDS_orange1_click_color);
-@highlight-alert: var(--XDS_yellow4_color);
-@bright-alert: var(--XDS_yellow3_color);
-@border-alert: var(--XDS_yellow2_color);
-@primary-alert: var(--XDS_yellow1_color);
-@hover-alert: var(--XDS_yellow1_hover_color);
-@click-alert: var(--XDS_yellow1_active_color);
-@heavy-alert: var(--XDS_yellow1_click_color);
-@highlight-success: var(--XDS_green4_color);
-@bright-success: var(--XDS_green3_color);
-@border-success: var(--XDS_green2_color);
-@primary-success: var(--XDS_green1_color);
-@hover-success: var(--XDS_green1_hover_color);
-@click-success: var(--XDS_green1_active_color);
-@heavy-success: var(--XDS_green1_click_color);
-@snow: #ffffff;
-@gray-01: var(--XDS_bg_color);
-@gray-02: var(--XDS_line_light_color);
-@gray-03: var(--XDS_line_hard_color);
-@gray-04: var(--XDS_line_hard_color);
-@gray-05: var(--XDS_level4_base_color);
-@gray-06: var(--XDS_level3_base_color);
-@gray-07: var(--XDS_level2_base_color);
-@gray-08: var(--XDS_level1_base_color);
-@shadow-color: #000000;
-@dashboard-01: #fab34f;
-@dashboard-02: #ff656b;
-@dashboard-03: #4ad051;
-@dashboard-04: #9979f2;
-@dashboard-05: #006cd9;
-@dashboard-06: #5ccdbb;
-@dashboard-07: #5c60e6;
-@placeholder-01: #bc61cf;
-@placeholder-02: #f26666;
-@placeholder-03: #f29a52;
-@placeholder-04: #f4c329;
-@placeholder-05: #cbd057;
-@placeholder-06: #29b3f0;
-@placeholder-07: #3885ea;
+@highlight-brand: var(--CDS_highlight_brand);
+@bright-brand: var(--CDS_bright_brand);
+@border-brand: var(--CDS_border_brand);
+@primary-brand: var(--CDS_primary_brand);
+@hover-brand: var(--CDS_hover_brand);
+@click-brand: var(--CDS_click_brand);
+@heavy-brand: var(--CDS_heavy_brand);
+@highlight-danger: var(--CDS_highlight_danger);
+@bright-danger: var(--CDS_bright_danger);
+@border-danger: var(--CDS_border_danger);
+@primary-danger: var(--CDS_primary_danger);
+@hover-danger: var(--CDS_hover_danger);
+@click-danger: var(--CDS_click_danger);
+@heavy-danger: var(--CDS_heavy_danger);
+@highlight-warning: var(--CDS_highlight_warning);
+@bright-warning: var(--CDS_bright_warning);
+@border-warning: var(--CDS_border_warning);
+@primary-warning: var(--CDS_primary_warning);
+@hover-warning: var(---CDS_hover_warning);
+@click-warning: var(--CDS_click_warning);
+@heavy-warning: var(--CDS_heavy_warning);
+@highlight-alert: var(--CDS_highlight_alert);
+@bright-alert: var(--CDS_bright_alert);
+@border-alert: var(--CDS_border_alert);
+@primary-alert: var(--CDS_primary_alert);
+@hover-alert: var(--CDS_hover_alert);
+@click-alert: var(--CDS_click_alert);
+@heavy-alert: var(--CDS_heavy_alert);
+@highlight-success: var(--CDS_highlight_success);
+@bright-success: var(--CDS_bright_success);
+@border-success: var(--CDS_border_success);
+@primary-success: var(--CDS_primary_success);
+@hover-success: var(--CDS_hover_success);
+@click-success: var(--CDS_click_success);
+@heavy-success: var(--CDS_heavy_success);
+@snow: var(--CDS_snow);
+@gray-fill: var(--CDS_gray_fill);
+@gray-modal: var(--CDS_gray_modal);
+@gray-popover: var(--CDS_gray_popover);
+@gray-basic: var(--CDS_gray_basic);
+@gray-01: var(--CDS_gray_01);
+@gray-02: var(--CDS_gray_02);
+@gray-03: var(--CDS_gray_03);
+@gray-04: var(--CDS_gray_04);
+@gray-05: var(--CDS_gray_05);
+@gray-06: var(--CDS_gray_06);
+@gray-07: var(--CDS_gray_07);
+@gray-08: var(--CDS_gray_08);
+@shadow-color: var(--CDS_shadow_color);
+@dashboard-01: var(--CDS_data_orange);
+@dashboard-02: var(--CDS_data_red);
+@dashboard-03: var(--CDS_data_green);
+@dashboard-04: var(--CDS_data_purple);
+@dashboard-05: var(--CDS_data_blue);
+@dashboard-06: var(--CDS_data_cyan);
+@dashboard-07: var(--CDS_data_violet);
+@placeholder-01: var(--CDS_ph_plum);
+@placeholder-02: var(--CDS_ph_red);
+@placeholder-03: var(--CDS_ph_orange);
+@placeholder-04: var(--CDS_ph_amber);
+@placeholder-05: var(--CDS_ph_olive);
+@placeholder-06: var(--CDS_ph_sky);
+@placeholder-07: var(--CDS_ph_blue);
 @background-fill: #ffffff;
 @background-nav-search: rgba(0, 0, 0, 0);
-@background-section: var(--XDS_fg_z1_color);
-@background-layout: var(--XDS_fg_color);
-@background-overlay: var(--XDS_fg_z1_color);
-@background-switch-trigger: #ffffff;
-@background-base: var(--XDS_bg_base);
-@cell-line-hover: var(--XDS_line_hover_color);
-@cell-line-active: var(--XDS_line_hard_color);
+@background-section: var(--CDS_gray_modal);
+@background-layout: var(--CDS_snow);
+@background-overlay: var(--CDS_gray_modal);
+@background-switch-trigger: var(--CDS_white_01);
+@background-base: var(--CDS_gray_fill);
+@cell-line-hover: var(--CDS_gray_fill);
+@cell-line-active: var(--CDS_gray_02);
 @tab-wrapped-bg-color-hover: rgba(0, 0, 0, 0);
 @tab-wrapped-bg-color: rgba(0, 0, 0, 0);
-@tab-wrapped-bg-color-selected: var(--XDS_fg_color);
-@step-dot-item-tail-wait-color: var(--XDS_line_hard_color);
-@step-dot-item-tail-process-color: var(--XDS_line_hard_color);
-@step-dot-item-tail-disabled-color: var(--XDS_line_hard_color);
-@step-circle-item-tail-wait-color: var(--XDS_line_hard_color);
-@step-circle-item-tail-process-color: var(--XDS_line_hard_color);
-@step-circle-item-tail-disabled-color: var(--XDS_line_hard_color);
+@tab-wrapped-bg-color-selected: var(--CDS_gray_basic);
+@step-dot-item-tail-wait-color: var(--CDS_gray_05);
+@step-dot-item-tail-process-color: var(--CDS_gray_05);
+@step-dot-item-tail-disabled-color: var(--CDS_gray_05);
+@step-circle-item-tail-wait-color: var(--CDS_gray_05);
+@step-circle-item-tail-process-color: var(--CDS_gray_05);
+@step-circle-item-tail-disabled-color: var(--CDS_gray_05);
 @pagination-item-bg: rgba(0, 0, 0, 0);
 @nav-normal-bg-color: rgba(0, 0, 0, 0);
 @nav-normal-sub-nav-bg-color: rgba(0, 0, 0, 0);
@@ -241,65 +245,65 @@
 @nav-primary-item-opened-bg-color: var(--XDS_line_hover_color);
 @nav-primary-sub-nav-selected-bg-color: var(--XDS_line_hard_color);
 @nav-primary-sub-nav-bg-color: rgba(0, 0, 0, 0);
-@table-row-hover-bg: var(--XDS_line_hover_color);
-@menu-background-hover: var(--XDS_line_hover_color);
-@menu-background-selected: var(--XDS_line_hard_color);
-@menu-background-focus: var(--XDS_line_hard_color);
-@menu-divider-color: var(--XDS_line_hard_color);
+@table-row-hover-bg: var(--CDS_gray_fill);
+@menu-background-hover: var(--CDS_gray_fill);
+@menu-background-selected: var(--CDS_gray_02);
+@menu-background-focus: var(--CDS_gray_02);
+@menu-divider-color: var(--CDS_gray_03);
 @input-bg-color: rgba(0, 0, 0, 0);
 @input-focus-bg-color: rgba(0, 0, 0, 0);
 @input-hover-bg-color: rgba(0, 0, 0, 0);
-@input-disabled-bg-color: var(--XDS_line_hard_color);
-@input-addon-bg-color: var(--XDS_line_hover_color);
-@tag-closable-primary-fill-bg-color: var(--XDS_line_hard_color);
-@tag-closable-primary-fill-bg-color-hover: var(--XDS_line_hard_color);
-@tag-closable-primary-fill-bg-color-disabled: var(--XDS_line_hard_color);
-@tag-closable-primary-fill-border-color-hover: var(--XDS_line_hover_color);
-@tag-closable-primary-fill-border-color-disabled: var(--XDS_line_hover_color);
-@tag-closable-primary-fill-text-color-disabled: var(--XDS_level4_base_color);
-@transfer-panel-header-background-color: var(--XDS_line_hover_color);
-@switch-disabled-on-bg-color: var(--XDS_line_hard_color);
-@search-nav-search-bg-color: var(--XDS_line_hover_color);
-@range-normal-slider-bg-color: #ffffff;
-@range-normal-slider-bg-color-hover: #ffffff;
+@input-disabled-bg-color: var(--CDS_gray_fill);
+@input-addon-bg-color: var(--CDS_gray_fill);
+@tag-closable-primary-fill-bg-color: var(--CDS_gray_02);
+@tag-closable-primary-fill-bg-color-hover: var(--CDS_gray_03);
+@tag-closable-primary-fill-bg-color-disabled: var(--CDS_gray_02);
+@tag-closable-primary-fill-border-color-hover: var(--CDS_gray_04);
+@tag-closable-primary-fill-border-color-disabled: var(--CDS_gray_03);
+@tag-closable-primary-fill-text-color-disabled: var(--CDS_gray_05);
+@transfer-panel-header-background-color: var(--CDS_gray_basic);
+@switch-disabled-on-bg-color: var(--CDS_gray_03);
+@search-nav-search-bg-color: var(--CDS_gray_fill);
+@range-normal-slider-bg-color: var(--CDS_white_01);
+@range-normal-slider-bg-color-hover: var(--CDS_white_01);
 @radio-bg-color: rgba(0, 0, 0, 0);
-@radio-disabled-bg-color: var(--XDS_line_hard_color);
-@calendar-card-table-cell-disabled-background: var(--XDS_line_hover_color);
-@calendar-fullscreen-table-cell-disabled-background: var(--XDS_line_hover_color);
+@radio-disabled-bg-color: var(--CDS_gray_04);
+@calendar-card-table-cell-disabled-background: var(--CDS_gray_fill);
+@calendar-fullscreen-table-cell-disabled-background: var(--CDS_gray_fill);
 @checkbox-bg-color: rgba(0, 0, 0, 0);
-@checkbox-disabled-bg-color: var(--XDS_line_hard_color);
+@checkbox-disabled-bg-color: var(--CDS_gray_04);
 @balloon-tooltip-color-primary-bg: rgba(0, 0, 0, 0.9) !important;
-@balloon-tooltip-color-normal-bg: 'var(--XDS_fg_z1_color)', '!important';
-@balloon-tooltip-color-normal: var(--XDS_level1_base_color);
-@balloon-tooltip-color-primary: #ffffff;
-@btn-warning-primary-bg-disabled: var(--XDS_line_hard_color);
-@btn-warning-primary-color-disabled: var(--XDS_level4_base_color);
+@balloon-tooltip-color-normal-bg: 'var(--CDS_gray_popover)', '!important';
+@balloon-tooltip-color-normal: var(--CDS_gray_08);
+@balloon-tooltip-color-primary: var(--CDS_white_01);
+@btn-warning-primary-bg-disabled: var(--CDS_gray_05);
+@btn-warning-primary-color-disabled: var(--CDS_white_01);
 @btn-warning-primary-border-color-disabled: rgba(0, 0, 0, 0);
-@btn-pure-color-disabled: var(--XDS_level4_base_color);
-@btn-pure-bg-disabled: var(--XDS_line_hard_color);
-@btn-pure-border-color-disabled: var(--XDS_line_hard_color);
+@btn-pure-color-disabled: var(--CDS_white_01);
+@btn-pure-bg-disabled: var(--CDS_gray_05);
+@btn-pure-border-color-disabled: var(--CDS_gray_05);
 @btn-ghost-dark-bg-normal: rgba(0, 0, 0, 0);
-@btn-ghost-dark-color: var(--XDS_level1_base_color);
-@btn-ghost-dark-color-hover: var(--XDS_level1_base_color);
-@btn-ghost-dark-color-active: var(--XDS_level1_base_color);
-@btn-ghost-dark-border-color-active: var(--XDS_level1_base_color);
-@btn-ghost-dark-border-color-hover: var(--XDS_level1_base_color);
-@btn-ghost-dark-border-color: var(--XDS_level1_base_color);
-@btn-ghost-dark-bg-hover: var(--XDS_line_hover_color);
-@btn-ghost-dark-bg-active: var(--XDS_line_hard_color);
-@btn-ghost-dark-color-disabled: var(--XDS_level4_base_color);
-@btn-ghost-dark-border-color-disabled: var(--XDS_level4_base_color);
+@btn-ghost-dark-color: var(--CDS_gray_08);
+@btn-ghost-dark-color-hover: var(--CDS_gray_08);
+@btn-ghost-dark-color-active: var(--CDS_gray_08);
+@btn-ghost-dark-border-color-active: var(--CDS_gray_08);
+@btn-ghost-dark-border-color-hover: var(--CDS_gray_08);
+@btn-ghost-dark-border-color: var(--CDS_gray_08);
+@btn-ghost-dark-bg-hover: var(--CDS_gray_fill);
+@btn-ghost-dark-bg-active: var(--CDS_gray_03);
+@btn-ghost-dark-color-disabled: var(--CDS_gray_05);
+@btn-ghost-dark-border-color-disabled: var(--CDS_gray_05);
 @btn-ghost-light-bg-normal: rgba(0, 0, 0, 0);
-@btn-ghost-light-border-color: var(--XDS_fg_z1_color);
-@btn-ghost-light-color: var(--XDS_fg_z1_color);
-@btn-ghost-light-color-active: var(--XDS_fg_z1_color);
-@btn-ghost-light-color-hover: var(--XDS_fg_z1_color);
-@btn-ghost-light-border-color-active: var(--XDS_fg_z1_color);
-@btn-ghost-light-border-color-hover: var(--XDS_fg_z1_color);
-@btn-ghost-light-bg-hover: var(--XDS_line_hover_color);
-@btn-ghost-light-bg-active: var(--XDS_line_hard_color);
-@btn-ghost-light-color-disabled: var(--XDS_level4_base_color);
-@btn-ghost-light-border-color-disabled: var(--XDS_level4_base_color);
+@btn-ghost-light-border-color: var(--CDS_gray_08);
+@btn-ghost-light-color: var(--CDS_gray_08);
+@btn-ghost-light-color-active: var(--CDS_gray_08);
+@btn-ghost-light-color-hover: var(--CDS_gray_08);
+@btn-ghost-light-border-color-active: var(--CDS_gray_08);
+@btn-ghost-light-border-color-hover: var(--CDS_gray_08);
+@btn-ghost-light-bg-hover: var(--CDS_gray_02);
+@btn-ghost-light-bg-active: var(--CDS_gray_03);
+@btn-ghost-light-color-disabled: var(--CDS_gray_05);
+@btn-ghost-light-border-color-disabled: var(--CDS_gray_05);
 @font-size-caption: 12px;
 @font-size-body: 14px;
 @font-size-subhead: 14px;

package/teambition/scss/variables/color.scss

@@ -1,103 +1,109 @@
 // 颜色变量
 @import '../../../common/variables/color.scss';
 
-$highlight-brand: var(--XDS_blue4_color) !default;
-$bright-brand: var(--XDS_blue3_color) !default;
-$border-brand: var(--XDS_blue2_color) !default;
-$primary-brand: var(--XDS_blue1_color) !default;
-$hover-brand: var(--XDS_blue1_hover_color) !default;
-$click-brand: var(--XDS_blue1_active_color) !default;
-$heavy-brand: var(--XDS_blue1_click_color) !default;
-
-$highlight-danger: var(--XDS_red4_color) !default;
-$bright-danger: var(--XDS_red3_color) !default;
-$border-danger: var(--XDS_red2_color) !default;
-$primary-danger: var(--XDS_red1_color) !default;
-$hover-danger: var(--XDS_red1_hover_color) !default;
-$click-danger: var(--XDS_red1_active_color) !default;
-$heavy-danger: var(--XDS_red1_click_color) !default;
-
-$highlight-warning: var(--XDS_orange4_color) !default;
-$bright-warning: var(--XDS_orange3_color) !default;
-$border-warning: var(--XDS_orange2_color) !default;
-$primary-warning: var(--XDS_orange1_color) !default;
-$hover-warning: var(--XDS_orange1_hover_color) !default;
-$click-warning: var(--XDS_orange1_active_color) !default;
-$heavy-warning: var(--XDS_orange1_click_color) !default;
-
-$highlight-alert: var(--XDS_yellow4_color) !default;
-$bright-alert: var(--XDS_yellow3_color) !default;
-$border-alert: var(--XDS_yellow2_color) !default;
-$primary-alert: var(--XDS_yellow1_color) !default;
-$hover-alert: var(--XDS_yellow1_hover_color) !default;
-$click-alert: var(--XDS_yellow1_active_color) !default;
-$heavy-alert: var(--XDS_yellow1_click_color) !default;
-
-$highlight-success: var(--XDS_green4_color) !default;
-$bright-success: var(--XDS_green3_color) !default;
-$border-success: var(--XDS_green2_color) !default;
-$primary-success: var(--XDS_green1_color) !default;
-$hover-success: var(--XDS_green1_hover_color) !default;
-$click-success: var(--XDS_green1_active_color) !default;
-$heavy-success: var(--XDS_green1_click_color) !default;
-
-$snow: $G0 !default;
-$gray-01: var(--XDS_bg_color) !default;
-$gray-02: var(--XDS_line_light_color) !default;
-$gray-03: var(--XDS_line_hard_color) !default;
-$gray-04: var(--XDS_line_hard_color) !default;
-$gray-05: var(--XDS_level4_base_color) !default;
-$gray-06: var(--XDS_level3_base_color) !default;
-$gray-07: var(--XDS_level2_base_color) !default;
-$gray-08: var(--XDS_level1_base_color) !default;
-
-$shadow-color: $G100 !default;
-
-$dashboard-01: $DT10 !default;
-$dashboard-02: $DT20 !default;
-$dashboard-03: $DT30 !default;
-$dashboard-04: $DT40 !default;
-$dashboard-05: $DT50 !default;
-$dashboard-06: $DT60 !default;
-$dashboard-07: $DT70 !default;
-$placeholder-01: $PH10 !default;
-$placeholder-02: $PH20 !default;
-$placeholder-03: $PH30 !default;
-$placeholder-04: $PH40 !default;
-$placeholder-05: $PH50 !default;
-$placeholder-06: $PH60 !default;
-$placeholder-07: $PH70 !default;
+$highlight-brand: var(--CDS_highlight_brand) !default;
+$bright-brand: var(--CDS_bright_brand) !default;
+$border-brand: var(--CDS_border_brand) !default;
+$primary-brand: var(--CDS_primary_brand) !default;
+$hover-brand: var(--CDS_hover_brand) !default;
+$click-brand: var(--CDS_click_brand) !default;
+$heavy-brand: var(--CDS_heavy_brand) !default;
+
+$highlight-danger: var(--CDS_highlight_danger) !default;
+$bright-danger: var(--CDS_bright_danger) !default;
+$border-danger: var(--CDS_border_danger) !default;
+$primary-danger: var(--CDS_primary_danger) !default;
+$hover-danger: var(--CDS_hover_danger) !default;
+$click-danger: var(--CDS_click_danger) !default;
+$heavy-danger: var(--CDS_heavy_danger) !default;
+
+$highlight-warning: var(--CDS_highlight_warning) !default;
+$bright-warning: var(--CDS_bright_warning) !default;
+$border-warning: var(--CDS_border_warning) !default;
+$primary-warning: var(--CDS_primary_warning) !default;
+$hover-warning: var(---CDS_hover_warning) !default;
+$click-warning: var(--CDS_click_warning) !default;
+$heavy-warning: var(--CDS_heavy_warning) !default;
+
+$highlight-alert: var(--CDS_highlight_alert) !default;
+$bright-alert: var(--CDS_bright_alert) !default;
+$border-alert: var(--CDS_border_alert) !default;
+$primary-alert: var(--CDS_primary_alert) !default;
+$hover-alert: var(--CDS_hover_alert) !default;
+$click-alert: var(--CDS_click_alert) !default;
+$heavy-alert: var(--CDS_heavy_alert) !default;
+
+$highlight-success: var(--CDS_highlight_success) !default;
+$bright-success: var(--CDS_bright_success) !default;
+$border-success: var(--CDS_border_success) !default;
+$primary-success: var(--CDS_primary_success) !default;
+$hover-success: var(--CDS_hover_success) !default;
+$click-success: var(--CDS_click_success) !default;
+$heavy-success: var(--CDS_heavy_success) !default;
+
+$snow: var(--CDS_snow) !default;
+$gray-fill: var(--CDS_gray_fill) !default;
+$gray-modal: var(--CDS_gray_modal) !default;
+$gray-popover: var(--CDS_gray_popover) !default;
+$gray-basic: var(--CDS_gray_basic) !default;
+
+$gray-01: var(--CDS_gray_01) !default;
+$gray-02: var(--CDS_gray_02) !default;
+$gray-03: var(--CDS_gray_03) !default;
+$gray-04: var(--CDS_gray_04) !default;
+$gray-05: var(--CDS_gray_05) !default;
+$gray-06: var(--CDS_gray_06) !default;
+$gray-07: var(--CDS_gray_07) !default;
+$gray-08: var(--CDS_gray_08) !default;
+
+$shadow-color: var(--CDS_shadow_color) !default;
+
+$dashboard-01: var(--CDS_data_orange) !default;
+$dashboard-02: var(--CDS_data_red) !default;
+$dashboard-03: var(--CDS_data_green) !default;
+$dashboard-04: var(--CDS_data_purple) !default;
+$dashboard-05: var(--CDS_data_blue) !default;
+$dashboard-06: var(--CDS_data_cyan) !default;
+$dashboard-07: var(--CDS_data_violet) !default;
+$placeholder-01: var(--CDS_ph_plum) !default;
+$placeholder-02: var(--CDS_ph_red) !default;
+$placeholder-03: var(--CDS_ph_orange) !default;
+$placeholder-04: var(--CDS_ph_amber) !default;
+$placeholder-05: var(--CDS_ph_olive) !default;
+$placeholder-06: var(--CDS_ph_sky) !default;
+$placeholder-07: var(--CDS_ph_blue) !default;
+
 $background-fill: $G0 !default;
 $background-nav-search: transparent !default;
 
-$background-section: var(--XDS_fg_z1_color) !default;
-$background-layout: var(--XDS_fg_color) !default;
-$background-overlay: var(--XDS_fg_z1_color) !default;
-$background-switch-trigger: $G0 !default;
-$background-base: var(--XDS_bg_base) !default;
+$background-section: var(--CDS_gray_modal) !default;
+$background-layout: var(--CDS_snow) !default;
+$background-overlay: var(--CDS_gray_modal) !default; // mark ！！
+$background-switch-trigger: var(--CDS_white_01) !default;
+$background-base: var(--CDS_gray_fill) !default;
 
-$cell-line-hover: var(--XDS_line_hover_color) !default;
-$cell-line-active: var(--XDS_line_hard_color) !default;
+$cell-line-hover: var(--CDS_gray_fill) !default;
+$cell-line-active: var(--CDS_gray_02) !default;
 
 // custom-override-color
 
 // tab 组件
 $tab-wrapped-bg-color-hover: transparent;
 $tab-wrapped-bg-color: transparent;
-$tab-wrapped-bg-color-selected: var(--XDS_fg_color);
+$tab-wrapped-bg-color-selected: var(--CDS_gray_basic);
 
 // step
-$step-dot-item-tail-wait-color: var(--XDS_line_hard_color) !default;
-$step-dot-item-tail-process-color: var(--XDS_line_hard_color) !default;
-$step-dot-item-tail-disabled-color: var(--XDS_line_hard_color) !default;
-$step-circle-item-tail-wait-color: var(--XDS_line_hard_color) !default;
-$step-circle-item-tail-process-color: var(--XDS_line_hard_color) !default;
-$step-circle-item-tail-disabled-color: var(--XDS_line_hard_color) !default;
+$step-dot-item-tail-wait-color: var(--CDS_gray_05) !default;
+$step-dot-item-tail-process-color: var(--CDS_gray_05) !default;
+$step-dot-item-tail-disabled-color: var(--CDS_gray_05) !default;
+$step-circle-item-tail-wait-color: var(--CDS_gray_05) !default;
+$step-circle-item-tail-process-color: var(--CDS_gray_05) !default;
+$step-circle-item-tail-disabled-color: var(--CDS_gray_05) !default;
 
 // pagination
 $pagination-item-bg: transparent;
 
-// nav
+// nav mark
 $nav-normal-bg-color: transparent !default;
 $nav-normal-sub-nav-bg-color: transparent !default;
 $nav-primary-text-color: var(--XDS_fg_color) !default;
@@ -113,89 +119,89 @@ $nav-primary-sub-nav-selected-bg-color: var(--XDS_line_hard_color) !default;
 $nav-primary-sub-nav-bg-color: transparent !default;
 
 // table
-$table-row-hover-bg: var(--XDS_line_hover_color) !default;
+$table-row-hover-bg: var(--CDS_gray_fill) !default;
 
 // menu
-$menu-background-hover: var(--XDS_line_hover_color) !default;
-$menu-background-selected: var(--XDS_line_hard_color) !default;
-$menu-background-focus: var(--XDS_line_hard_color) !default;
-$menu-divider-color: var(--XDS_line_hard_color) !default;
+$menu-background-hover: var(--CDS_gray_fill) !default;
+$menu-background-selected: var(--CDS_gray_02) !default;
+$menu-background-focus: var(--CDS_gray_02) !default;
+$menu-divider-color: var(--CDS_gray_03) !default;
 
 
 // input
 $input-bg-color: transparent !default;
 $input-focus-bg-color: transparent !default;
 $input-hover-bg-color: transparent !default;
-$input-disabled-bg-color: var(--XDS_line_hard_color) !default;
-$input-addon-bg-color: var(--XDS_line_hover_color) !default;
+$input-disabled-bg-color: var(--CDS_gray_fill) !default;
+$input-addon-bg-color: var(--CDS_gray_fill) !default;
 
 // tag
-$tag-closable-primary-fill-bg-color: var(--XDS_line_hard_color) !default;
-$tag-closable-primary-fill-bg-color-hover: var(--XDS_line_hard_color) !default;
-$tag-closable-primary-fill-bg-color-disabled: var(--XDS_line_hard_color) !default;
-$tag-closable-primary-fill-border-color-hover: var(--XDS_line_hover_color) !default;
-$tag-closable-primary-fill-border-color-disabled: var(--XDS_line_hover_color) !default;
-$tag-closable-primary-fill-text-color-disabled: var(--XDS_level4_base_color) !default;
+$tag-closable-primary-fill-bg-color: var(--CDS_gray_02) !default;
+$tag-closable-primary-fill-bg-color-hover: var(--CDS_gray_03) !default;
+$tag-closable-primary-fill-bg-color-disabled: var(--CDS_gray_02) !default;
+$tag-closable-primary-fill-border-color-hover: var(--CDS_gray_04) !default;
+$tag-closable-primary-fill-border-color-disabled: var(--CDS_gray_03) !default;
+$tag-closable-primary-fill-text-color-disabled: var(--CDS_gray_05) !default;
 
 // transfer
-$transfer-panel-header-background-color: var(--XDS_line_hover_color) !default;
+$transfer-panel-header-background-color: var(--CDS_gray_basic) !default;
 
 // switch
-$switch-disabled-on-bg-color: var(--XDS_line_hard_color) !default;
+$switch-disabled-on-bg-color: var(--CDS_gray_03) !default;
 
 // searcher
-$search-nav-search-bg-color: var(--XDS_line_hover_color) !default;
+$search-nav-search-bg-color: var(--CDS_gray_fill) !default;
 
 // range
-$range-normal-slider-bg-color: white !default;
-$range-normal-slider-bg-color-hover: white !default;
+$range-normal-slider-bg-color: var(--CDS_white_01) !default;
+$range-normal-slider-bg-color-hover: var(--CDS_white_01) !default;
 
 // radio
 $radio-bg-color: transparent !default;
-$radio-disabled-bg-color: var(--XDS_line_hard_color) !default;
+$radio-disabled-bg-color: var(--CDS_gray_04) !default;
 
 // calendar
-$calendar-card-table-cell-disabled-background: var(--XDS_line_hover_color) !default;
-$calendar-fullscreen-table-cell-disabled-background: var(--XDS_line_hover_color) !default;
+$calendar-card-table-cell-disabled-background: var(--CDS_gray_fill) !default;
+$calendar-fullscreen-table-cell-disabled-background: var(--CDS_gray_fill) !default;
 
 // checkbox
 $checkbox-bg-color: transparent !default;
-$checkbox-disabled-bg-color: var(--XDS_line_hard_color) !default;
+$checkbox-disabled-bg-color: var(--CDS_gray_04) !default;
 
 // ballon
 $balloon-tooltip-color-primary-bg: rgba(0, 0, 0, .9) !important !default;
-$balloon-tooltip-color-normal-bg: var(--XDS_fg_z1_color) !important !default;
-$balloon-tooltip-color-normal: var(--XDS_level1_base_color) !default;
-$balloon-tooltip-color-primary: white !default;
+$balloon-tooltip-color-normal-bg: var(--CDS_gray_popover) !important !default;
+$balloon-tooltip-color-normal: var(--CDS_gray_08) !default;
+$balloon-tooltip-color-primary: var(--CDS_white_01) !default;
 
 // button
-$btn-warning-primary-bg-disabled: var(--XDS_line_hard_color) !default;
-$btn-warning-primary-color-disabled: var(--XDS_level4_base_color) !default;
+$btn-warning-primary-bg-disabled: var(--CDS_gray_05) !default;
+$btn-warning-primary-color-disabled: var(--CDS_white_01) !default;
 $btn-warning-primary-border-color-disabled: transparent !default;
-$btn-pure-color-disabled: var(--XDS_level4_base_color) !default;
-$btn-pure-bg-disabled: var(--XDS_line_hard_color) !default;
-$btn-pure-border-color-disabled: var(--XDS_line_hard_color) !default;
+$btn-pure-color-disabled: var(--CDS_white_01) !default;
+$btn-pure-bg-disabled: var(--CDS_gray_05) !default;
+$btn-pure-border-color-disabled: var(--CDS_gray_05) !default;
 // button ghost dark
 $btn-ghost-dark-bg-normal: transparent !default;
-$btn-ghost-dark-color: var(--XDS_level1_base_color) !default;
-$btn-ghost-dark-color-hover: var(--XDS_level1_base_color) !default;
-$btn-ghost-dark-color-active: var(--XDS_level1_base_color) !default;
-$btn-ghost-dark-border-color-active: var(--XDS_level1_base_color) !default;
-$btn-ghost-dark-border-color-hover: var(--XDS_level1_base_color) !default;
-$btn-ghost-dark-border-color: var(--XDS_level1_base_color) !default;
-$btn-ghost-dark-bg-hover: var(--XDS_line_hover_color) !default;
-$btn-ghost-dark-bg-active: var(--XDS_line_hard_color) !default;
-$btn-ghost-dark-color-disabled: var(--XDS_level4_base_color) !default;
-$btn-ghost-dark-border-color-disabled: var(--XDS_level4_base_color) !default;
+$btn-ghost-dark-color: var(--CDS_gray_08) !default;
+$btn-ghost-dark-color-hover: var(--CDS_gray_08) !default;
+$btn-ghost-dark-color-active: var(--CDS_gray_08) !default;
+$btn-ghost-dark-border-color-active: var(--CDS_gray_08) !default;
+$btn-ghost-dark-border-color-hover: var(--CDS_gray_08) !default;
+$btn-ghost-dark-border-color: var(--CDS_gray_08) !default;
+$btn-ghost-dark-bg-hover: var(--CDS_gray_fill) !default;
+$btn-ghost-dark-bg-active: var(--CDS_gray_03) !default;
+$btn-ghost-dark-color-disabled: var(--CDS_gray_05) !default;
+$btn-ghost-dark-border-color-disabled: var(--CDS_gray_05) !default;
 // button ghost light
 $btn-ghost-light-bg-normal: transparent !default;
-$btn-ghost-light-border-color: var(--XDS_fg_z1_color) !default;
-$btn-ghost-light-color: var(--XDS_fg_z1_color) !default;
-$btn-ghost-light-color-active: var(--XDS_fg_z1_color) !default;
-$btn-ghost-light-color-hover: var(--XDS_fg_z1_color) !default;
-$btn-ghost-light-border-color-active: var(--XDS_fg_z1_color) !default;
-$btn-ghost-light-border-color-hover: var(--XDS_fg_z1_color) !default;
-$btn-ghost-light-bg-hover: var(--XDS_line_hover_color) !default;
-$btn-ghost-light-bg-active: var(--XDS_line_hard_color) !default;
-$btn-ghost-light-color-disabled: var(--XDS_level4_base_color) !default;
-$btn-ghost-light-border-color-disabled: var(--XDS_level4_base_color) !default;
+$btn-ghost-light-border-color: var(--CDS_gray_08) !default;
+$btn-ghost-light-color: var(--CDS_gray_08) !default;
+$btn-ghost-light-color-active: var(--CDS_gray_08) !default;
+$btn-ghost-light-color-hover: var(--CDS_gray_08) !default;
+$btn-ghost-light-border-color-active: var(--CDS_gray_08) !default;
+$btn-ghost-light-border-color-hover: var(--CDS_gray_08) !default;
+$btn-ghost-light-bg-hover: var(--CDS_gray_02) !default;
+$btn-ghost-light-bg-active: var(--CDS_gray_03) !default;
+$btn-ghost-light-color-disabled: var(--CDS_gray_05) !default;
+$btn-ghost-light-border-color-disabled: var(--CDS_gray_05) !default;