@txdfe/at-theme 1.1.7 → 2.0.1-0

package/package.json

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

package/teambition/css/index.css

@@ -151,71 +151,160 @@
 --S52: 52px;
 --S56: 56px;
 --S80: 80px;
---highlight-brand: #f2fbff;
---bright-brand: #ccecff;
---border-brand: #87d2ff;
---primary-brand: #1b9aee;
---hover-brand: #0171c2;
---click-brand: #004f8a;
---heavy-brand: #002e52;
---highlight-danger: #ffeded;
---bright-danger: #ffcccc;
---border-danger: #f87872;
---primary-danger: #e62412;
---hover-danger: #c21c07;
---click-danger: #9a1604;
---heavy-danger: #800f00;
---highlight-warning: #fff7e6;
---bright-warning: #ffd591;
---border-warning: #ffa941;
---primary-warning: #fa8c15;
---hover-warning: #d46b08;
---click-warning: #ad4e01;
---heavy-warning: #8f4000;
---highlight-alert: #ffffe3;
---bright-alert: #fff88f;
---border-alert: #ffe53e;
---primary-alert: #fad414;
---hover-alert: #d4ab06;
---click-alert: #ad8500;
---heavy-alert: #946c00;
---highlight-success: #edffed;
---bright-success: #cafac8;
---border-success: #64d16d;
---primary-success: #15ad31;
---hover-success: #038a24;
---click-success: #006d1f;
---heavy-success: #00591c;
---snow: #ffffff;
---gray-01: #f7f7f7;
---gray-02: #f0f0f0;
---gray-03: #e5e5e5;
---gray-04: #d9d9d9;
---gray-05: #bfbfbf;
---gray-06: #8c8c8c;
---gray-07: #595959;
---gray-08: #262626;
---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: #f7f7f7;
---background-section: #ffffff;
---background-layout: #f7f7f7;
---background-overlay: #f0f0f0;
---background-switch-trigger: #ffffff;
+--background-nav-search: rgba(0, 0, 0, 0);
+--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(--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);
+--nav-primary-text-color: var(--XDS_fg_color);
+--nav-primary-sub-nav-text-color: var(--XDS_fg_color);
+--nav-primary-group-text-color: var(--XDS_fg_color);
+--nav-primary-item-hover-text-color: var(--XDS_fg_color);
+--nav-primary-sub-nav-hover-text-color: var(--XDS_fg_color);
+--nav-primary-item-selected-text-color: var(--XDS_fg_color);
+--nav-primary-sub-nav-selected-text-color: var(--XDS_fg_color);
+--nav-primary-item-opened-text-color: var(--XDS_fg_color);
+--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(--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(--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(--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(--CDS_gray_04);
+--balloon-tooltip-color-primary-bg: rgba(0, 0, 0, 0.9) !important;
+--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(--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(--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(--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;
@@ -241,10 +330,10 @@
 --shape-radius: 4px;
 --shape-checkbox: 2px;
 --shape-circular: 50%;
---shadow-01: 0 1px 3px 0 rgba(38, 38, 38, 0.1);
---shadow-02: 0 4px 16px 0 rgba(38, 38, 38, 0.12);
---shadow-03: 0 12px 32px 0 rgba(38, 38, 38, 0.16);
---shadow-04: 0 18px 42px 0 rgba(38, 38, 38, 0.2);
+--shadow-01: var(--XDS_shadow_small);
+--shadow-02: var(--XDS_shadow_card);
+--shadow-03: var(--XDS_shadow_bold_card);
+--shadow-04: var(--XDS_shadow_bold_card);
 --AT_THEME: teambition;
 --AT_THEME_TYPE: light;
 }

package/teambition/js/index.js

@@ -153,71 +153,160 @@ module.exports = {
   S52: "52px",
   S56: "56px",
   S80: "80px",
-  "highlight-brand": "#f2fbff",
-  "bright-brand": "#ccecff",
-  "border-brand": "#87d2ff",
-  "primary-brand": "#1b9aee",
-  "hover-brand": "#0171c2",
-  "click-brand": "#004f8a",
-  "heavy-brand": "#002e52",
-  "highlight-danger": "#ffeded",
-  "bright-danger": "#ffcccc",
-  "border-danger": "#f87872",
-  "primary-danger": "#e62412",
-  "hover-danger": "#c21c07",
-  "click-danger": "#9a1604",
-  "heavy-danger": "#800f00",
-  "highlight-warning": "#fff7e6",
-  "bright-warning": "#ffd591",
-  "border-warning": "#ffa941",
-  "primary-warning": "#fa8c15",
-  "hover-warning": "#d46b08",
-  "click-warning": "#ad4e01",
-  "heavy-warning": "#8f4000",
-  "highlight-alert": "#ffffe3",
-  "bright-alert": "#fff88f",
-  "border-alert": "#ffe53e",
-  "primary-alert": "#fad414",
-  "hover-alert": "#d4ab06",
-  "click-alert": "#ad8500",
-  "heavy-alert": "#946c00",
-  "highlight-success": "#edffed",
-  "bright-success": "#cafac8",
-  "border-success": "#64d16d",
-  "primary-success": "#15ad31",
-  "hover-success": "#038a24",
-  "click-success": "#006d1f",
-  "heavy-success": "#00591c",
-  snow: "#ffffff",
-  "gray-01": "#f7f7f7",
-  "gray-02": "#f0f0f0",
-  "gray-03": "#e5e5e5",
-  "gray-04": "#d9d9d9",
-  "gray-05": "#bfbfbf",
-  "gray-06": "#8c8c8c",
-  "gray-07": "#595959",
-  "gray-08": "#262626",
-  "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": "#f7f7f7",
-  "background-section": "#ffffff",
-  "background-layout": "#f7f7f7",
-  "background-overlay": "#f0f0f0",
-  "background-switch-trigger": "#ffffff",
+  "background-nav-search": "rgba(0, 0, 0, 0)",
+  "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(--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)",
+  "nav-primary-text-color": "var(--XDS_fg_color)",
+  "nav-primary-sub-nav-text-color": "var(--XDS_fg_color)",
+  "nav-primary-group-text-color": "var(--XDS_fg_color)",
+  "nav-primary-item-hover-text-color": "var(--XDS_fg_color)",
+  "nav-primary-sub-nav-hover-text-color": "var(--XDS_fg_color)",
+  "nav-primary-item-selected-text-color": "var(--XDS_fg_color)",
+  "nav-primary-sub-nav-selected-text-color": "var(--XDS_fg_color)",
+  "nav-primary-item-opened-text-color": "var(--XDS_fg_color)",
+  "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(--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(--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(--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(--CDS_gray_04)",
+  "balloon-tooltip-color-primary-bg": "rgba(0, 0, 0, 0.9) !important",
+  "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(--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(--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(--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",
@@ -243,10 +332,10 @@ module.exports = {
   "shape-radius": "4px",
   "shape-checkbox": "2px",
   "shape-circular": "50%",
-  "shadow-01": "0 1px 3px 0 rgba(38, 38, 38, 0.1)",
-  "shadow-02": "0 4px 16px 0 rgba(38, 38, 38, 0.12)",
-  "shadow-03": "0 12px 32px 0 rgba(38, 38, 38, 0.16)",
-  "shadow-04": "0 18px 42px 0 rgba(38, 38, 38, 0.2)",
+  "shadow-01": "var(--XDS_shadow_small)",
+  "shadow-02": "var(--XDS_shadow_card)",
+  "shadow-03": "var(--XDS_shadow_bold_card)",
+  "shadow-04": "var(--XDS_shadow_bold_card)",
   AT_THEME: "teambition",
   AT_THEME_TYPE: "light"
 };

package/teambition/less/index.less

@@ -150,71 +150,160 @@
 @S52: 52px;
 @S56: 56px;
 @S80: 80px;
-@highlight-brand: #f2fbff;
-@bright-brand: #ccecff;
-@border-brand: #87d2ff;
-@primary-brand: #1b9aee;
-@hover-brand: #0171c2;
-@click-brand: #004f8a;
-@heavy-brand: #002e52;
-@highlight-danger: #ffeded;
-@bright-danger: #ffcccc;
-@border-danger: #f87872;
-@primary-danger: #e62412;
-@hover-danger: #c21c07;
-@click-danger: #9a1604;
-@heavy-danger: #800f00;
-@highlight-warning: #fff7e6;
-@bright-warning: #ffd591;
-@border-warning: #ffa941;
-@primary-warning: #fa8c15;
-@hover-warning: #d46b08;
-@click-warning: #ad4e01;
-@heavy-warning: #8f4000;
-@highlight-alert: #ffffe3;
-@bright-alert: #fff88f;
-@border-alert: #ffe53e;
-@primary-alert: #fad414;
-@hover-alert: #d4ab06;
-@click-alert: #ad8500;
-@heavy-alert: #946c00;
-@highlight-success: #edffed;
-@bright-success: #cafac8;
-@border-success: #64d16d;
-@primary-success: #15ad31;
-@hover-success: #038a24;
-@click-success: #006d1f;
-@heavy-success: #00591c;
-@snow: #ffffff;
-@gray-01: #f7f7f7;
-@gray-02: #f0f0f0;
-@gray-03: #e5e5e5;
-@gray-04: #d9d9d9;
-@gray-05: #bfbfbf;
-@gray-06: #8c8c8c;
-@gray-07: #595959;
-@gray-08: #262626;
-@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: #f7f7f7;
-@background-section: #ffffff;
-@background-layout: #f7f7f7;
-@background-overlay: #f0f0f0;
-@background-switch-trigger: #ffffff;
+@background-nav-search: rgba(0, 0, 0, 0);
+@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(--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);
+@nav-primary-text-color: var(--XDS_fg_color);
+@nav-primary-sub-nav-text-color: var(--XDS_fg_color);
+@nav-primary-group-text-color: var(--XDS_fg_color);
+@nav-primary-item-hover-text-color: var(--XDS_fg_color);
+@nav-primary-sub-nav-hover-text-color: var(--XDS_fg_color);
+@nav-primary-item-selected-text-color: var(--XDS_fg_color);
+@nav-primary-sub-nav-selected-text-color: var(--XDS_fg_color);
+@nav-primary-item-opened-text-color: var(--XDS_fg_color);
+@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(--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(--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(--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(--CDS_gray_04);
+@balloon-tooltip-color-primary-bg: rgba(0, 0, 0, 0.9) !important;
+@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(--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(--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(--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;
@@ -240,9 +329,9 @@
 @shape-radius: 4px;
 @shape-checkbox: 2px;
 @shape-circular: 50%;
-@shadow-01: 0 1px 3px 0 rgba(38, 38, 38, 0.1);
-@shadow-02: 0 4px 16px 0 rgba(38, 38, 38, 0.12);
-@shadow-03: 0 12px 32px 0 rgba(38, 38, 38, 0.16);
-@shadow-04: 0 18px 42px 0 rgba(38, 38, 38, 0.2);
+@shadow-01: var(--XDS_shadow_small);
+@shadow-02: var(--XDS_shadow_card);
+@shadow-03: var(--XDS_shadow_bold_card);
+@shadow-04: var(--XDS_shadow_bold_card);
 @AT_THEME: teambition;
 @AT_THEME_TYPE: light;

package/teambition/scss/variables/color.scss

@@ -1,68 +1,207 @@
 // 颜色变量
 @import '../../../common/variables/color.scss';
 
-$highlight-brand: $B20 !default;
-$bright-brand: $B30 !default;
-$border-brand: $B40 !default;
-$primary-brand: $B50 !default;
-$hover-brand: $B60 !default;
-$click-brand: $B70 !default;
-$heavy-brand: $B80 !default;
-$highlight-danger: $R20 !default;
-$bright-danger: $R30 !default;
-$border-danger: $R40 !default;
-$primary-danger: $R50 !default;
-$hover-danger: $R60 !default;
-$click-danger: $R70 !default;
-$heavy-danger: $R80 !default;
-$highlight-warning: $O20 !default;
-$bright-warning: $O30 !default;
-$border-warning: $O40 !default;
-$primary-warning: $O50 !default;
-$hover-warning: $O60 !default;
-$click-warning: $O70 !default;
-$heavy-warning: $O80 !default;
-$highlight-alert: $A20 !default;
-$bright-alert: $A30 !default;
-$border-alert: $A40 !default;
-$primary-alert: $A50 !default;
-$hover-alert: $A60 !default;
-$click-alert: $A70 !default;
-$heavy-alert: $A80 !default;
-$highlight-success: $GN20 !default;
-$bright-success: $GN30 !default;
-$border-success: $GN40 !default;
-$primary-success: $GN50 !default;
-$hover-success: $GN60 !default;
-$click-success: $GN70 !default;
-$heavy-success: $GN80 !default;
-$snow: $G0 !default;
-$gray-01: $G10 !default;
-$gray-02: $G20 !default;
-$gray-03: $G30 !default;
-$gray-04: $G40 !default;
-$gray-05: $G50 !default;
-$gray-06: $G60 !default;
-$gray-07: $G70 !default;
-$gray-08: $G80 !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: $G10 !default;
-$background-section: $G0 !default;
-$background-layout: $G10 !default;
-$background-overlay: $G20 !default;
-$background-switch-trigger: $G0 !default;
+$background-nav-search: transparent !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(--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(--CDS_gray_basic);
+
+// step
+$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 mark
+$nav-normal-bg-color: transparent !default;
+$nav-normal-sub-nav-bg-color: transparent !default;
+$nav-primary-text-color: var(--XDS_fg_color) !default;
+$nav-primary-sub-nav-text-color: var(--XDS_fg_color) !default;
+$nav-primary-group-text-color: var(--XDS_fg_color) !default;
+$nav-primary-item-hover-text-color: var(--XDS_fg_color) !default;
+$nav-primary-sub-nav-hover-text-color: var(--XDS_fg_color) !default;
+$nav-primary-item-selected-text-color: var(--XDS_fg_color) !default;
+$nav-primary-sub-nav-selected-text-color: var(--XDS_fg_color) !default;
+$nav-primary-item-opened-text-color: var(--XDS_fg_color) !default;
+$nav-primary-item-opened-bg-color: var(--XDS_line_hover_color) !default;
+$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(--CDS_gray_fill) !default;
+
+// menu
+$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(--CDS_gray_fill) !default;
+$input-addon-bg-color: var(--CDS_gray_fill) !default;
+
+// tag
+$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(--CDS_gray_basic) !default;
+
+// switch
+$switch-disabled-on-bg-color: var(--CDS_gray_03) !default;
+
+// searcher
+$search-nav-search-bg-color: var(--CDS_gray_fill) !default;
+
+// range
+$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(--CDS_gray_04) !default;
+
+// calendar
+$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(--CDS_gray_04) !default;
+
+// ballon
+$balloon-tooltip-color-primary-bg: rgba(0, 0, 0, .9) !important !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(--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(--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(--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(--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;

package/teambition/scss/variables/shadow.scss

@@ -1,6 +1,6 @@
 @import '../../../common/variables/shadow.scss';
 
-$shadow-01: $SH1 !default;
-$shadow-02: $SH2 !default;
-$shadow-03: $SH3 !default;
-$shadow-04: $SH4 !default;
+$shadow-01: var(--XDS_shadow_small) !default;
+$shadow-02: var(--XDS_shadow_card) !default;
+$shadow-03: var(--XDS_shadow_bold_card) !default;
+$shadow-04: var(--XDS_shadow_bold_card) !default;