npm - @txdfe/at-theme - Versions diffs - 2.0.1-17 → 2.0.1-18 - Mend

@txdfe/at-theme 2.0.1-17 → 2.0.1-18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +1 -1
package/teambition/css/index.css +67 -49
package/teambition/js/index.js +79 -49
package/teambition/less/index.less +67 -49
package/teambition/scss/variables/color.scss +69 -48

package/package.json CHANGED Viewed

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

package/teambition/css/index.css CHANGED Viewed

@@ -151,22 +151,25 @@
 --S52: 52px;
 --S56: 56px;
 --S80: 80px;
---pale-brand: var(--CDS_pale_brand, rgba(27, 154, 238, 0.04));
---highlight-brand: var(--CDS_highlight_brand, rgba(27, 154, 238, 0.08));
---bright-brand: var(--CDS_bright_brand, rgba(27, 154, 238, 0.2));
---border-brand: var(--CDS_border_brand, rgba(27, 154, 238, 0.4));
---primary-brand: var(--CDS_primary_brand, #1b9aee);
---hover-brand: var(--CDS_hover_brand, #1287d9);
---click-brand: var(--CDS_click_brand, #0776c7);
---heavy-brand: var(--CDS_heavy_brand, #0068ba);
---pale-danger: var(--CDS_pale_danger, rgba(217, 68, 47, 0.04));
---highlight-danger: var(--CDS_highlight_danger, rgba(217, 68, 47, 0.08));
---bright-danger: var(--CDS_bright_danger, rgba(217, 68, 47, 0.2));
---border-danger: var(--CDS_border_danger, rgba(217, 68, 47, 0.4));
---primary-danger: var(--CDS_primary_danger, #d9442f);
---hover-danger: var(--CDS_hover_danger, #c23828);
---click-danger: var(--CDS_click_danger, #b03021);
---heavy-danger: var(--CDS_heavy_danger, #a12817);
+--pale-brand: var(--CDS_pale_brand, rgba(0, 145, 255, 0.06));
+--highlight-brand: var(--CDS_highlight_brand, rgba(0, 145, 255, 0.1));
+--bright-brand: var(--CDS_bright_brand, rgba(0, 145, 255, 0.16));
+--border-brand: var(--CDS_border_brand, rgba(0, 145, 255, 0.4));
+--primary-brand: var(--CDS_primary_brand, #0091ff);
+--hover-brand: var(--CDS_hover_brand, #0082e5);
+--click-brand: var(--CDS_click_brand, #0074cc);
+--heavy-brand: var(--CDS_heavy_brand, #0065b2);
+--deco-brand: var(--CDS_deco_brand, #4db2ff);
+--text-brand: var(--CDS_text_brand, #0074cc);
+--pale-danger: var(--CDS_pale_danger, rgba(208, 73, 52, 0.06));
+--highlight-danger: var(--CDS_highlight_danger, rgba(208, 73, 52, 0.1));
+--bright-danger: var(--CDS_bright_danger, rgba(208, 73, 52, 0.16));
+--border-danger: var(--CDS_border_danger, rgba(208, 73, 52, 0.4));
+--primary-danger: var(--CDS_primary_danger, #d04934);
+--hover-danger: var(--CDS_hover_danger, #ae311f);
+--click-danger: var(--CDS_click_danger, #8c1809);
+--heavy-danger: var(--CDS_heavy_danger, #670600);
+--text-danger: var(--CDS_text_danger, #d04934);
 --pale-warning: var(--CDS_pale_warning, rgba(255, 154, 33, 0.04));
 --highlight-warning: var(--CDS_highlight_warning, rgba(255, 154, 33, 0.08));
 --bright-warning: var(--CDS_bright_warning, rgba(255, 154, 33, 0.2));
@@ -183,14 +186,15 @@
 --hover-alert: var(--CDS_hover_alert, #ebb800);
 --click-alert: var(--CDS_click_alert, #e0a900);
 --heavy-alert: var(--CDS_heavy_alert, #cf9600);
---pale-success: var(--CDS_pale_success, rgba(42, 168, 78, 0.04));
---highlight-success: var(--CDS_highlight_success, rgba(42, 168, 78, 0.04));
---bright-success: var(--CDS_bright_success, rgba(42, 168, 78, 0.2));
---border-success: var(--CDS_border_success, rgba(42, 168, 78, 0.4));
---primary-success: var(--CDS_primary_success, #2aa84e);
---hover-success: var(--CDS_hover_success, #1e9441);
---click-success: var(--CDS_click_success, #108035);
---heavy-success: var(--CDS_heavy_success, #006e26);
+--pale-success: var(--CDS_pale_success, rgba(0, 136, 91, 0.06));
+--highlight-success: var(--CDS_highlight_success, rgba(0, 136, 91, 0.1));
+--bright-success: var(--CDS_bright_success, rgba(0, 136, 91, 0.16));
+--border-success: var(--CDS_border_success, rgba(0, 136, 91, 0.4));
+--primary-success: var(--CDS_primary_success, #00885b);
+--hover-success: var(--CDS_hover_success, #006c48);
+--click-success: var(--CDS_click_success, #005235);
+--heavy-success: var(--CDS_heavy_success, #003823);
+--text-success: var(--CDS_text_success, #00885b);
 --pale-turquoise: var(--CDS_pale_turquoise, rgba(0, 156, 149, 0.04));
 --highlight-turquoise: var(--CDS_highlight_turquoise, rgba(0, 156, 149, 0.08));
 --bright-turquoise: var(--CDS_bright_turquoise, rgba(0, 156, 149, 0.2));
@@ -212,14 +216,16 @@
 --white: var(--CDS_white_01, white);
 --abs-white: var(--CDS_white_01, white);
 --white-01: var(--CDS_white_01, white);
---white-02: var(--CDS_white_02, rgba(255, 255, 255, 0.72));
---white-03: var(--CDS_white_03, rgba(255, 255, 255, 0.36));
---white-04: var(--CDS_white_04, rgba(255, 255, 255, 0.18));
---white-05: var(--CDS_white_05, rgba(255, 255, 255, 0.08));
+--white-02: var(--CDS_white_02, rgba(255, 255, 255, 0.8));
+--white-03: var(--CDS_white_03, rgba(255, 255, 255, 0.6));
+--white-04: var(--CDS_white_04, rgba(255, 255, 255, 0.36));
+--white-05: var(--CDS_white_05, rgba(255, 255, 255, 0.16));
+--white-06: var(--CDS_white_06, rgba(255, 255, 255, 0.08));
 --black-01: var(--CDS_black_01, black);
 --black-02: var(--CDS_black_02, #44474b);
 --gray-fill: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
 --line-hover: var(--CDS_gray_hover, rgba(38, 38, 38, 0.05));
+--gray-fillover: var(--CDS_gray_fillover, rgba(38, 38, 38, 0.08));
 --gray-filled: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
 --line-actived: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
 --line-select: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
@@ -233,17 +239,19 @@
 --line-color: var(--CDS_gray_basic, white);
 --gray-modal: var(--CDS_gray_modal, white);
 --modal-color: var(--CDS_gray_modal, white);
---gray-popover: var(--CDS_gray_popover, white);
---popover-color: var(--CDS_gray_popover, white);
+--gray-popover: var(--CDS_gray_popover, linear-gradient(104deg, rgba(250, 250, 250, 0.9) 6%, rgba(244, 244, 244, 0.9) 95%));
+--popover-color: var(--CDS_gray_popover, linear-gradient(104deg, rgba(250, 250, 250, 0.9) 6%, rgba(244, 244, 244, 0.9) 95%));
 --gray-00: var(--CDS_gray_00, white);
---gray-01: var(--CDS_gray_01, #f7f7f7);
---gray-02: var(--CDS_gray_02, rgba(38, 38, 38, 0.08));
---gray-03: var(--CDS_gray_03, rgba(38, 38, 38, 0.12));
---gray-04: var(--CDS_gray_04, rgba(38, 38, 38, 0.18));
---gray-05: var(--CDS_gray_05, rgba(38, 38, 38, 0.3));
---gray-06: var(--CDS_gray_06, rgba(38, 38, 38, 0.52));
+--gray-01: var(--CDS_gray_01, #f9f9f9);
+--gray-02: var(--CDS_gray_02, rgba(38, 38, 38, 0.06));
+--gray-03: var(--CDS_gray_03, rgba(38, 38, 38, 0.1));
+--gray-04: var(--CDS_gray_04, rgba(38, 38, 38, 0.22));
+--gray-05: var(--CDS_gray_05, rgba(38, 38, 38, 0.4));
+--gray-06: var(--CDS_gray_06, rgba(38, 38, 38, 0.6));
 --gray-07: var(--CDS_gray_07, rgba(38, 38, 38, 0.76));
 --gray-08: var(--CDS_gray_08, #262626);
+--gray-pale: var(--CDS_gray_pale, rgba(38, 38, 38, 0.03));
+--gray-page: var(--CDS_gray_page, #fbfbfb);
 --shadow-color: var(--CDS_shadow_color, black);
 --dashboard-01: var(--CDS_data_orange, #ffaf38);
 --dashboard-02: var(--CDS_data_red, #ff656b);
@@ -292,12 +300,17 @@
 --background-base: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
 --mask: var(--CDS_black_overlay, rgba(0, 0, 0, 0.2));
 --overlay: var(--CDS_black_overlay, rgba(0, 0, 0, 0.2));
---shadow-00: var(--CDS_shadow_00);
---shadow-01: var(--CDS_shadow_01);
---shadow-02: var(--CDS_shadow_02);
---shadow-03: var(--CDS_shadow_03);
---shadow-04: var(--CDS_shadow_04);
---shadow-color-00: var(--CDS_shadow_color_00, rgba(38, 38, 38, 0.4));
+--shadow-00: var(--CDS_shadow_00, 0px 1px 4px 0px rgba(38, 38, 38, 0.04));
+--shadow-01: var(--CDS_shadow_01, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 1px 4px 0px rgba(0, 0, 0, 0.04));
+--shadow-02: var(--CDS_shadow_02, 0px 2px 4px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px -2px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(31, 34, 37, 0.09));
+--shadow-02-flat: var(--CDS_shadow_02_flat, 0px 2px 4px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px -2px rgba(0, 0, 0, 0.04));
+--shadow-03: var(--CDS_shadow_03, 0px 0px 0px 1px rgba(31, 34, 47, 0.09), 0px 24px 48px 0px rgba(0, 0, 0, 0.04), 0px 4px 16px 0px rgba(0, 0, 0, 0.02));
+--shadow-04: var(--CDS_shadow_04, 0px 8px 16px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(31, 34, 37, 0.09));
+--shadow-popover: var(--CDS_shadow_popover, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 12px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.04));
+--shadow-popover-flat: var(--CDS_shadow_popover_flat, 0px 12px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.04));
+--shadow-modal: var(--CDS_shadow_modal, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 16px 40px -6px rgba(0, 0, 0, 0.16), 0px 12px 24px -6px rgba(0, 0, 0, 0.04));
+--shadow-input: var(--CDS_shadow_input, 0px 0px 0px 2px rgba(0, 145, 255, 0.1));
+--shadow-color-00: var(--CDS_shadow_color_00, rgba(38, 38, 38, 0.04));
 --shadow-color-01: var(--CDS_shadow_color_01, rgba(38, 38, 38, 0.1));
 --shadow-color-02: var(--CDS_shadow_color_02, rgba(38, 38, 38, 0.14));
 --shadow-color-03: var(--CDS_shadow_color_03, rgba(38, 38, 38, 0.18));
@@ -359,12 +372,12 @@
 --balloon-tooltip-color-normal-bg: 'var(--CDS_gray_popover, white)', '!important';
 --balloon-tooltip-color-normal: var(--CDS_gray_08, #262626);
 --balloon-tooltip-color-primary: var(--CDS_white_01, white);
---btn-warning-primary-bg-disabled: var(--CDS_gray_05);
---btn-warning-primary-color-disabled: var(--CDS_white_01);
+--btn-warning-primary-bg-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.4));
+--btn-warning-primary-color-disabled: var(--CDS_white_01, white);
 --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-pure-color-disabled: var(--CDS_white_01, white);
+--btn-pure-bg-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.4));
+--btn-pure-border-color-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.4));
 --btn-ghost-dark-bg-normal: rgba(0, 0, 0, 0);
 --btn-ghost-dark-color: var(--CDS_gray_08, #262626);
 --btn-ghost-dark-color-hover: var(--CDS_gray_08, #262626);
@@ -387,6 +400,13 @@
 --btn-ghost-light-bg-active: var(--CDS_gray_03, rgba(38, 38, 38, 0.12));
 --btn-ghost-light-color-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.3));
 --btn-ghost-light-border-color-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.3));
+--lake-subtle: var(--CDS_ct_lake_subtle, #d9f6f5);
+--lake-soft: var(--CDS_ct_lake_soft, #b2f0ed);
+--lake-medium: var(--CDS_ct_lake_medium, #70e0dc);
+--lake-hard: var(--CDS_ct_lake_hard, #00c2b9);
+--sea-medium: var(--CDS_ct_sea_medium, #6adbfb);
+--violet-hard: var(--CDS_ct_violet_hard, #9787ff);
+--mango-hard: var(--CDS_ct_mango_hard, #ffca49);
 --font-size-caption: 12px;
 --font-size-body: 14px;
 --font-size-subhead: 14px;
@@ -414,8 +434,6 @@
 --shape-circular: 50%;
 --shadow-card: var(--CDS_shadow_01);
 --shadow-card-hover: var(--CDS_shadow_01);
---shadow-popover: var(--CDS_shadow_03);
---shadow-modal: var(--CDS_shadow_04);
 --AT_THEME: teambition;
 --AT_THEME_TYPE: light;
 }

package/teambition/js/index.js CHANGED Viewed

@@ -153,22 +153,25 @@ module.exports = {
   S52: "52px",
   S56: "56px",
   S80: "80px",
-  "pale-brand": "var(--CDS_pale_brand, rgba(27, 154, 238, 0.04))",
-  "highlight-brand": "var(--CDS_highlight_brand, rgba(27, 154, 238, 0.08))",
-  "bright-brand": "var(--CDS_bright_brand, rgba(27, 154, 238, 0.2))",
-  "border-brand": "var(--CDS_border_brand, rgba(27, 154, 238, 0.4))",
-  "primary-brand": "var(--CDS_primary_brand, #1b9aee)",
-  "hover-brand": "var(--CDS_hover_brand, #1287d9)",
-  "click-brand": "var(--CDS_click_brand, #0776c7)",
-  "heavy-brand": "var(--CDS_heavy_brand, #0068ba)",
-  "pale-danger": "var(--CDS_pale_danger, rgba(217, 68, 47, 0.04))",
-  "highlight-danger": "var(--CDS_highlight_danger, rgba(217, 68, 47, 0.08))",
-  "bright-danger": "var(--CDS_bright_danger, rgba(217, 68, 47, 0.2))",
-  "border-danger": "var(--CDS_border_danger, rgba(217, 68, 47, 0.4))",
-  "primary-danger": "var(--CDS_primary_danger, #d9442f)",
-  "hover-danger": "var(--CDS_hover_danger, #c23828)",
-  "click-danger": "var(--CDS_click_danger, #b03021)",
-  "heavy-danger": "var(--CDS_heavy_danger, #a12817)",
+  "pale-brand": "var(--CDS_pale_brand, rgba(0, 145, 255, 0.06))",
+  "highlight-brand": "var(--CDS_highlight_brand, rgba(0, 145, 255, 0.1))",
+  "bright-brand": "var(--CDS_bright_brand, rgba(0, 145, 255, 0.16))",
+  "border-brand": "var(--CDS_border_brand, rgba(0, 145, 255, 0.4))",
+  "primary-brand": "var(--CDS_primary_brand, #0091ff)",
+  "hover-brand": "var(--CDS_hover_brand, #0082e5)",
+  "click-brand": "var(--CDS_click_brand, #0074cc)",
+  "heavy-brand": "var(--CDS_heavy_brand, #0065b2)",
+  "deco-brand": "var(--CDS_deco_brand, #4db2ff)",
+  "text-brand": "var(--CDS_text_brand, #0074cc)",
+  "pale-danger": "var(--CDS_pale_danger, rgba(208, 73, 52, 0.06))",
+  "highlight-danger": "var(--CDS_highlight_danger, rgba(208, 73, 52, 0.1))",
+  "bright-danger": "var(--CDS_bright_danger, rgba(208, 73, 52, 0.16))",
+  "border-danger": "var(--CDS_border_danger, rgba(208, 73, 52, 0.4))",
+  "primary-danger": "var(--CDS_primary_danger, #d04934)",
+  "hover-danger": "var(--CDS_hover_danger, #ae311f)",
+  "click-danger": "var(--CDS_click_danger, #8c1809)",
+  "heavy-danger": "var(--CDS_heavy_danger, #670600)",
+  "text-danger": "var(--CDS_text_danger, #d04934)",
   "pale-warning": "var(--CDS_pale_warning, rgba(255, 154, 33, 0.04))",
   "highlight-warning": "var(--CDS_highlight_warning, rgba(255, 154, 33, 0.08))",
   "bright-warning": "var(--CDS_bright_warning, rgba(255, 154, 33, 0.2))",
@@ -185,14 +188,15 @@ module.exports = {
   "hover-alert": "var(--CDS_hover_alert, #ebb800)",
   "click-alert": "var(--CDS_click_alert, #e0a900)",
   "heavy-alert": "var(--CDS_heavy_alert, #cf9600)",
-  "pale-success": "var(--CDS_pale_success, rgba(42, 168, 78, 0.04))",
-  "highlight-success": "var(--CDS_highlight_success, rgba(42, 168, 78, 0.04))",
-  "bright-success": "var(--CDS_bright_success, rgba(42, 168, 78, 0.2))",
-  "border-success": "var(--CDS_border_success, rgba(42, 168, 78, 0.4))",
-  "primary-success": "var(--CDS_primary_success, #2aa84e)",
-  "hover-success": "var(--CDS_hover_success, #1e9441)",
-  "click-success": "var(--CDS_click_success, #108035)",
-  "heavy-success": "var(--CDS_heavy_success, #006e26)",
+  "pale-success": "var(--CDS_pale_success, rgba(0, 136, 91, 0.06))",
+  "highlight-success": "var(--CDS_highlight_success, rgba(0, 136, 91, 0.1))",
+  "bright-success": "var(--CDS_bright_success, rgba(0, 136, 91, 0.16))",
+  "border-success": "var(--CDS_border_success, rgba(0, 136, 91, 0.4))",
+  "primary-success": "var(--CDS_primary_success, #00885b)",
+  "hover-success": "var(--CDS_hover_success, #006c48)",
+  "click-success": "var(--CDS_click_success, #005235)",
+  "heavy-success": "var(--CDS_heavy_success, #003823)",
+  "text-success": "var(--CDS_text_success, #00885b)",
   "pale-turquoise": "var(--CDS_pale_turquoise, rgba(0, 156, 149, 0.04))",
   "highlight-turquoise":
     "var(--CDS_highlight_turquoise, rgba(0, 156, 149, 0.08))",
@@ -215,14 +219,16 @@ module.exports = {
   white: "var(--CDS_white_01, white)",
   "abs-white": "var(--CDS_white_01, white)",
   "white-01": "var(--CDS_white_01, white)",
-  "white-02": "var(--CDS_white_02, rgba(255, 255, 255, 0.72))",
-  "white-03": "var(--CDS_white_03, rgba(255, 255, 255, 0.36))",
-  "white-04": "var(--CDS_white_04, rgba(255, 255, 255, 0.18))",
-  "white-05": "var(--CDS_white_05, rgba(255, 255, 255, 0.08))",
+  "white-02": "var(--CDS_white_02, rgba(255, 255, 255, 0.8))",
+  "white-03": "var(--CDS_white_03, rgba(255, 255, 255, 0.6))",
+  "white-04": "var(--CDS_white_04, rgba(255, 255, 255, 0.36))",
+  "white-05": "var(--CDS_white_05, rgba(255, 255, 255, 0.16))",
+  "white-06": "var(--CDS_white_06, rgba(255, 255, 255, 0.08))",
   "black-01": "var(--CDS_black_01, black)",
   "black-02": "var(--CDS_black_02, #44474b)",
   "gray-fill": "var(--CDS_gray_fill, rgba(38, 38, 38, 0.06))",
   "line-hover": "var(--CDS_gray_hover, rgba(38, 38, 38, 0.05))",
+  "gray-fillover": "var(--CDS_gray_fillover, rgba(38, 38, 38, 0.08))",
   "gray-filled": "var(--CDS_gray_fill, rgba(38, 38, 38, 0.06))",
   "line-actived": "var(--CDS_gray_fill, rgba(38, 38, 38, 0.06))",
   "line-select": "var(--CDS_gray_fill, rgba(38, 38, 38, 0.06))",
@@ -236,17 +242,21 @@ module.exports = {
   "line-color": "var(--CDS_gray_basic, white)",
   "gray-modal": "var(--CDS_gray_modal, white)",
   "modal-color": "var(--CDS_gray_modal, white)",
-  "gray-popover": "var(--CDS_gray_popover, white)",
-  "popover-color": "var(--CDS_gray_popover, white)",
+  "gray-popover":
+    "var(--CDS_gray_popover, linear-gradient(104deg, rgba(250, 250, 250, 0.9) 6%, rgba(244, 244, 244, 0.9) 95%))",
+  "popover-color":
+    "var(--CDS_gray_popover, linear-gradient(104deg, rgba(250, 250, 250, 0.9) 6%, rgba(244, 244, 244, 0.9) 95%))",
   "gray-00": "var(--CDS_gray_00, white)",
-  "gray-01": "var(--CDS_gray_01, #f7f7f7)",
-  "gray-02": "var(--CDS_gray_02, rgba(38, 38, 38, 0.08))",
-  "gray-03": "var(--CDS_gray_03, rgba(38, 38, 38, 0.12))",
-  "gray-04": "var(--CDS_gray_04, rgba(38, 38, 38, 0.18))",
-  "gray-05": "var(--CDS_gray_05, rgba(38, 38, 38, 0.3))",
-  "gray-06": "var(--CDS_gray_06, rgba(38, 38, 38, 0.52))",
+  "gray-01": "var(--CDS_gray_01, #f9f9f9)",
+  "gray-02": "var(--CDS_gray_02, rgba(38, 38, 38, 0.06))",
+  "gray-03": "var(--CDS_gray_03, rgba(38, 38, 38, 0.1))",
+  "gray-04": "var(--CDS_gray_04, rgba(38, 38, 38, 0.22))",
+  "gray-05": "var(--CDS_gray_05, rgba(38, 38, 38, 0.4))",
+  "gray-06": "var(--CDS_gray_06, rgba(38, 38, 38, 0.6))",
   "gray-07": "var(--CDS_gray_07, rgba(38, 38, 38, 0.76))",
   "gray-08": "var(--CDS_gray_08, #262626)",
+  "gray-pale": "var(--CDS_gray_pale, rgba(38, 38, 38, 0.03))",
+  "gray-page": "var(--CDS_gray_page, #fbfbfb)",
   "shadow-color": "var(--CDS_shadow_color, black)",
   "dashboard-01": "var(--CDS_data_orange, #ffaf38)",
   "dashboard-02": "var(--CDS_data_red, #ff656b)",
@@ -295,12 +305,26 @@ module.exports = {
   "background-base": "var(--CDS_gray_fill, rgba(38, 38, 38, 0.06))",
   mask: "var(--CDS_black_overlay, rgba(0, 0, 0, 0.2))",
   overlay: "var(--CDS_black_overlay, rgba(0, 0, 0, 0.2))",
-  "shadow-00": "var(--CDS_shadow_00)",
-  "shadow-01": "var(--CDS_shadow_01)",
-  "shadow-02": "var(--CDS_shadow_02)",
-  "shadow-03": "var(--CDS_shadow_03)",
-  "shadow-04": "var(--CDS_shadow_04)",
-  "shadow-color-00": "var(--CDS_shadow_color_00, rgba(38, 38, 38, 0.4))",
+  "shadow-00": "var(--CDS_shadow_00, 0px 1px 4px 0px rgba(38, 38, 38, 0.04))",
+  "shadow-01":
+    "var(--CDS_shadow_01, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 1px 4px 0px rgba(0, 0, 0, 0.04))",
+  "shadow-02":
+    "var(--CDS_shadow_02, 0px 2px 4px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px -2px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(31, 34, 37, 0.09))",
+  "shadow-02-flat":
+    "var(--CDS_shadow_02_flat, 0px 2px 4px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px -2px rgba(0, 0, 0, 0.04))",
+  "shadow-03":
+    "var(--CDS_shadow_03, 0px 0px 0px 1px rgba(31, 34, 47, 0.09), 0px 24px 48px 0px rgba(0, 0, 0, 0.04), 0px 4px 16px 0px rgba(0, 0, 0, 0.02))",
+  "shadow-04":
+    "var(--CDS_shadow_04, 0px 8px 16px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(31, 34, 37, 0.09))",
+  "shadow-popover":
+    "var(--CDS_shadow_popover, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 12px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.04))",
+  "shadow-popover-flat":
+    "var(--CDS_shadow_popover_flat, 0px 12px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.04))",
+  "shadow-modal":
+    "var(--CDS_shadow_modal, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 16px 40px -6px rgba(0, 0, 0, 0.16), 0px 12px 24px -6px rgba(0, 0, 0, 0.04))",
+  "shadow-input":
+    "var(--CDS_shadow_input, 0px 0px 0px 2px rgba(0, 145, 255, 0.1))",
+  "shadow-color-00": "var(--CDS_shadow_color_00, rgba(38, 38, 38, 0.04))",
   "shadow-color-01": "var(--CDS_shadow_color_01, rgba(38, 38, 38, 0.1))",
   "shadow-color-02": "var(--CDS_shadow_color_02, rgba(38, 38, 38, 0.14))",
   "shadow-color-03": "var(--CDS_shadow_color_03, rgba(38, 38, 38, 0.18))",
@@ -376,12 +400,13 @@ module.exports = {
     "'var(--CDS_gray_popover, white)', '!important'",
   "balloon-tooltip-color-normal": "var(--CDS_gray_08, #262626)",
   "balloon-tooltip-color-primary": "var(--CDS_white_01, white)",
-  "btn-warning-primary-bg-disabled": "var(--CDS_gray_05)",
-  "btn-warning-primary-color-disabled": "var(--CDS_white_01)",
+  "btn-warning-primary-bg-disabled":
+    "var(--CDS_gray_05, rgba(38, 38, 38, 0.4))",
+  "btn-warning-primary-color-disabled": "var(--CDS_white_01, white)",
   "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-pure-color-disabled": "var(--CDS_white_01, white)",
+  "btn-pure-bg-disabled": "var(--CDS_gray_05, rgba(38, 38, 38, 0.4))",
+  "btn-pure-border-color-disabled": "var(--CDS_gray_05, rgba(38, 38, 38, 0.4))",
   "btn-ghost-dark-bg-normal": "rgba(0, 0, 0, 0)",
   "btn-ghost-dark-color": "var(--CDS_gray_08, #262626)",
   "btn-ghost-dark-color-hover": "var(--CDS_gray_08, #262626)",
@@ -406,6 +431,13 @@ module.exports = {
   "btn-ghost-light-color-disabled": "var(--CDS_gray_05, rgba(38, 38, 38, 0.3))",
   "btn-ghost-light-border-color-disabled":
     "var(--CDS_gray_05, rgba(38, 38, 38, 0.3))",
+  "lake-subtle": "var(--CDS_ct_lake_subtle, #d9f6f5)",
+  "lake-soft": "var(--CDS_ct_lake_soft, #b2f0ed)",
+  "lake-medium": "var(--CDS_ct_lake_medium, #70e0dc)",
+  "lake-hard": "var(--CDS_ct_lake_hard, #00c2b9)",
+  "sea-medium": "var(--CDS_ct_sea_medium, #6adbfb)",
+  "violet-hard": "var(--CDS_ct_violet_hard, #9787ff)",
+  "mango-hard": "var(--CDS_ct_mango_hard, #ffca49)",
   "font-size-caption": "12px",
   "font-size-body": "14px",
   "font-size-subhead": "14px",
@@ -433,8 +465,6 @@ module.exports = {
   "shape-circular": "50%",
   "shadow-card": "var(--CDS_shadow_01)",
   "shadow-card-hover": "var(--CDS_shadow_01)",
-  "shadow-popover": "var(--CDS_shadow_03)",
-  "shadow-modal": "var(--CDS_shadow_04)",
   AT_THEME: "teambition",
   AT_THEME_TYPE: "light"
 };

package/teambition/less/index.less CHANGED Viewed

@@ -150,22 +150,25 @@
 @S52: 52px;
 @S56: 56px;
 @S80: 80px;
-@pale-brand: var(--CDS_pale_brand, rgba(27, 154, 238, 0.04));
-@highlight-brand: var(--CDS_highlight_brand, rgba(27, 154, 238, 0.08));
-@bright-brand: var(--CDS_bright_brand, rgba(27, 154, 238, 0.2));
-@border-brand: var(--CDS_border_brand, rgba(27, 154, 238, 0.4));
-@primary-brand: var(--CDS_primary_brand, #1b9aee);
-@hover-brand: var(--CDS_hover_brand, #1287d9);
-@click-brand: var(--CDS_click_brand, #0776c7);
-@heavy-brand: var(--CDS_heavy_brand, #0068ba);
-@pale-danger: var(--CDS_pale_danger, rgba(217, 68, 47, 0.04));
-@highlight-danger: var(--CDS_highlight_danger, rgba(217, 68, 47, 0.08));
-@bright-danger: var(--CDS_bright_danger, rgba(217, 68, 47, 0.2));
-@border-danger: var(--CDS_border_danger, rgba(217, 68, 47, 0.4));
-@primary-danger: var(--CDS_primary_danger, #d9442f);
-@hover-danger: var(--CDS_hover_danger, #c23828);
-@click-danger: var(--CDS_click_danger, #b03021);
-@heavy-danger: var(--CDS_heavy_danger, #a12817);
+@pale-brand: var(--CDS_pale_brand, rgba(0, 145, 255, 0.06));
+@highlight-brand: var(--CDS_highlight_brand, rgba(0, 145, 255, 0.1));
+@bright-brand: var(--CDS_bright_brand, rgba(0, 145, 255, 0.16));
+@border-brand: var(--CDS_border_brand, rgba(0, 145, 255, 0.4));
+@primary-brand: var(--CDS_primary_brand, #0091ff);
+@hover-brand: var(--CDS_hover_brand, #0082e5);
+@click-brand: var(--CDS_click_brand, #0074cc);
+@heavy-brand: var(--CDS_heavy_brand, #0065b2);
+@deco-brand: var(--CDS_deco_brand, #4db2ff);
+@text-brand: var(--CDS_text_brand, #0074cc);
+@pale-danger: var(--CDS_pale_danger, rgba(208, 73, 52, 0.06));
+@highlight-danger: var(--CDS_highlight_danger, rgba(208, 73, 52, 0.1));
+@bright-danger: var(--CDS_bright_danger, rgba(208, 73, 52, 0.16));
+@border-danger: var(--CDS_border_danger, rgba(208, 73, 52, 0.4));
+@primary-danger: var(--CDS_primary_danger, #d04934);
+@hover-danger: var(--CDS_hover_danger, #ae311f);
+@click-danger: var(--CDS_click_danger, #8c1809);
+@heavy-danger: var(--CDS_heavy_danger, #670600);
+@text-danger: var(--CDS_text_danger, #d04934);
 @pale-warning: var(--CDS_pale_warning, rgba(255, 154, 33, 0.04));
 @highlight-warning: var(--CDS_highlight_warning, rgba(255, 154, 33, 0.08));
 @bright-warning: var(--CDS_bright_warning, rgba(255, 154, 33, 0.2));
@@ -182,14 +185,15 @@
 @hover-alert: var(--CDS_hover_alert, #ebb800);
 @click-alert: var(--CDS_click_alert, #e0a900);
 @heavy-alert: var(--CDS_heavy_alert, #cf9600);
-@pale-success: var(--CDS_pale_success, rgba(42, 168, 78, 0.04));
-@highlight-success: var(--CDS_highlight_success, rgba(42, 168, 78, 0.04));
-@bright-success: var(--CDS_bright_success, rgba(42, 168, 78, 0.2));
-@border-success: var(--CDS_border_success, rgba(42, 168, 78, 0.4));
-@primary-success: var(--CDS_primary_success, #2aa84e);
-@hover-success: var(--CDS_hover_success, #1e9441);
-@click-success: var(--CDS_click_success, #108035);
-@heavy-success: var(--CDS_heavy_success, #006e26);
+@pale-success: var(--CDS_pale_success, rgba(0, 136, 91, 0.06));
+@highlight-success: var(--CDS_highlight_success, rgba(0, 136, 91, 0.1));
+@bright-success: var(--CDS_bright_success, rgba(0, 136, 91, 0.16));
+@border-success: var(--CDS_border_success, rgba(0, 136, 91, 0.4));
+@primary-success: var(--CDS_primary_success, #00885b);
+@hover-success: var(--CDS_hover_success, #006c48);
+@click-success: var(--CDS_click_success, #005235);
+@heavy-success: var(--CDS_heavy_success, #003823);
+@text-success: var(--CDS_text_success, #00885b);
 @pale-turquoise: var(--CDS_pale_turquoise, rgba(0, 156, 149, 0.04));
 @highlight-turquoise: var(--CDS_highlight_turquoise, rgba(0, 156, 149, 0.08));
 @bright-turquoise: var(--CDS_bright_turquoise, rgba(0, 156, 149, 0.2));
@@ -211,14 +215,16 @@
 @white: var(--CDS_white_01, white);
 @abs-white: var(--CDS_white_01, white);
 @white-01: var(--CDS_white_01, white);
-@white-02: var(--CDS_white_02, rgba(255, 255, 255, 0.72));
-@white-03: var(--CDS_white_03, rgba(255, 255, 255, 0.36));
-@white-04: var(--CDS_white_04, rgba(255, 255, 255, 0.18));
-@white-05: var(--CDS_white_05, rgba(255, 255, 255, 0.08));
+@white-02: var(--CDS_white_02, rgba(255, 255, 255, 0.8));
+@white-03: var(--CDS_white_03, rgba(255, 255, 255, 0.6));
+@white-04: var(--CDS_white_04, rgba(255, 255, 255, 0.36));
+@white-05: var(--CDS_white_05, rgba(255, 255, 255, 0.16));
+@white-06: var(--CDS_white_06, rgba(255, 255, 255, 0.08));
 @black-01: var(--CDS_black_01, black);
 @black-02: var(--CDS_black_02, #44474b);
 @gray-fill: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
 @line-hover: var(--CDS_gray_hover, rgba(38, 38, 38, 0.05));
+@gray-fillover: var(--CDS_gray_fillover, rgba(38, 38, 38, 0.08));
 @gray-filled: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
 @line-actived: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
 @line-select: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
@@ -232,17 +238,19 @@
 @line-color: var(--CDS_gray_basic, white);
 @gray-modal: var(--CDS_gray_modal, white);
 @modal-color: var(--CDS_gray_modal, white);
-@gray-popover: var(--CDS_gray_popover, white);
-@popover-color: var(--CDS_gray_popover, white);
+@gray-popover: var(--CDS_gray_popover, linear-gradient(104deg, rgba(250, 250, 250, 0.9) 6%, rgba(244, 244, 244, 0.9) 95%));
+@popover-color: var(--CDS_gray_popover, linear-gradient(104deg, rgba(250, 250, 250, 0.9) 6%, rgba(244, 244, 244, 0.9) 95%));
 @gray-00: var(--CDS_gray_00, white);
-@gray-01: var(--CDS_gray_01, #f7f7f7);
-@gray-02: var(--CDS_gray_02, rgba(38, 38, 38, 0.08));
-@gray-03: var(--CDS_gray_03, rgba(38, 38, 38, 0.12));
-@gray-04: var(--CDS_gray_04, rgba(38, 38, 38, 0.18));
-@gray-05: var(--CDS_gray_05, rgba(38, 38, 38, 0.3));
-@gray-06: var(--CDS_gray_06, rgba(38, 38, 38, 0.52));
+@gray-01: var(--CDS_gray_01, #f9f9f9);
+@gray-02: var(--CDS_gray_02, rgba(38, 38, 38, 0.06));
+@gray-03: var(--CDS_gray_03, rgba(38, 38, 38, 0.1));
+@gray-04: var(--CDS_gray_04, rgba(38, 38, 38, 0.22));
+@gray-05: var(--CDS_gray_05, rgba(38, 38, 38, 0.4));
+@gray-06: var(--CDS_gray_06, rgba(38, 38, 38, 0.6));
 @gray-07: var(--CDS_gray_07, rgba(38, 38, 38, 0.76));
 @gray-08: var(--CDS_gray_08, #262626);
+@gray-pale: var(--CDS_gray_pale, rgba(38, 38, 38, 0.03));
+@gray-page: var(--CDS_gray_page, #fbfbfb);
 @shadow-color: var(--CDS_shadow_color, black);
 @dashboard-01: var(--CDS_data_orange, #ffaf38);
 @dashboard-02: var(--CDS_data_red, #ff656b);
@@ -291,12 +299,17 @@
 @background-base: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06));
 @mask: var(--CDS_black_overlay, rgba(0, 0, 0, 0.2));
 @overlay: var(--CDS_black_overlay, rgba(0, 0, 0, 0.2));
-@shadow-00: var(--CDS_shadow_00);
-@shadow-01: var(--CDS_shadow_01);
-@shadow-02: var(--CDS_shadow_02);
-@shadow-03: var(--CDS_shadow_03);
-@shadow-04: var(--CDS_shadow_04);
-@shadow-color-00: var(--CDS_shadow_color_00, rgba(38, 38, 38, 0.4));
+@shadow-00: var(--CDS_shadow_00, 0px 1px 4px 0px rgba(38, 38, 38, 0.04));
+@shadow-01: var(--CDS_shadow_01, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 1px 4px 0px rgba(0, 0, 0, 0.04));
+@shadow-02: var(--CDS_shadow_02, 0px 2px 4px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px -2px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(31, 34, 37, 0.09));
+@shadow-02-flat: var(--CDS_shadow_02_flat, 0px 2px 4px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px -2px rgba(0, 0, 0, 0.04));
+@shadow-03: var(--CDS_shadow_03, 0px 0px 0px 1px rgba(31, 34, 47, 0.09), 0px 24px 48px 0px rgba(0, 0, 0, 0.04), 0px 4px 16px 0px rgba(0, 0, 0, 0.02));
+@shadow-04: var(--CDS_shadow_04, 0px 8px 16px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(31, 34, 37, 0.09));
+@shadow-popover: var(--CDS_shadow_popover, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 12px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.04));
+@shadow-popover-flat: var(--CDS_shadow_popover_flat, 0px 12px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.04));
+@shadow-modal: var(--CDS_shadow_modal, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 16px 40px -6px rgba(0, 0, 0, 0.16), 0px 12px 24px -6px rgba(0, 0, 0, 0.04));
+@shadow-input: var(--CDS_shadow_input, 0px 0px 0px 2px rgba(0, 145, 255, 0.1));
+@shadow-color-00: var(--CDS_shadow_color_00, rgba(38, 38, 38, 0.04));
 @shadow-color-01: var(--CDS_shadow_color_01, rgba(38, 38, 38, 0.1));
 @shadow-color-02: var(--CDS_shadow_color_02, rgba(38, 38, 38, 0.14));
 @shadow-color-03: var(--CDS_shadow_color_03, rgba(38, 38, 38, 0.18));
@@ -358,12 +371,12 @@
 @balloon-tooltip-color-normal-bg: 'var(--CDS_gray_popover, white)', '!important';
 @balloon-tooltip-color-normal: var(--CDS_gray_08, #262626);
 @balloon-tooltip-color-primary: var(--CDS_white_01, white);
-@btn-warning-primary-bg-disabled: var(--CDS_gray_05);
-@btn-warning-primary-color-disabled: var(--CDS_white_01);
+@btn-warning-primary-bg-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.4));
+@btn-warning-primary-color-disabled: var(--CDS_white_01, white);
 @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-pure-color-disabled: var(--CDS_white_01, white);
+@btn-pure-bg-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.4));
+@btn-pure-border-color-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.4));
 @btn-ghost-dark-bg-normal: rgba(0, 0, 0, 0);
 @btn-ghost-dark-color: var(--CDS_gray_08, #262626);
 @btn-ghost-dark-color-hover: var(--CDS_gray_08, #262626);
@@ -386,6 +399,13 @@
 @btn-ghost-light-bg-active: var(--CDS_gray_03, rgba(38, 38, 38, 0.12));
 @btn-ghost-light-color-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.3));
 @btn-ghost-light-border-color-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.3));
+@lake-subtle: var(--CDS_ct_lake_subtle, #d9f6f5);
+@lake-soft: var(--CDS_ct_lake_soft, #b2f0ed);
+@lake-medium: var(--CDS_ct_lake_medium, #70e0dc);
+@lake-hard: var(--CDS_ct_lake_hard, #00c2b9);
+@sea-medium: var(--CDS_ct_sea_medium, #6adbfb);
+@violet-hard: var(--CDS_ct_violet_hard, #9787ff);
+@mango-hard: var(--CDS_ct_mango_hard, #ffca49);
 @font-size-caption: 12px;
 @font-size-body: 14px;
 @font-size-subhead: 14px;
@@ -413,7 +433,5 @@
 @shape-circular: 50%;
 @shadow-card: var(--CDS_shadow_01);
 @shadow-card-hover: var(--CDS_shadow_01);
-@shadow-popover: var(--CDS_shadow_03);
-@shadow-modal: var(--CDS_shadow_04);
 @AT_THEME: teambition;
 @AT_THEME_TYPE: light;

package/teambition/scss/variables/color.scss CHANGED Viewed

@@ -1,23 +1,26 @@
 // 颜色变量
 @import '../../../common/variables/color.scss';
-$pale-brand: var(--CDS_pale_brand, rgba(27, 154, 238, 0.04)) !default;
-$highlight-brand: var(--CDS_highlight_brand, rgba(27, 154, 238, 0.08)) !default;
-$bright-brand: var(--CDS_bright_brand, rgba(27, 154, 238, 0.2)) !default;
-$border-brand: var(--CDS_border_brand, rgba(27, 154, 238, 0.4)) !default;
-$primary-brand: var(--CDS_primary_brand, rgba(27, 154, 238, 1)) !default;
-$hover-brand: var(--CDS_hover_brand, rgba(18, 135, 217, 1)) !default;
-$click-brand: var(--CDS_click_brand, rgba(7, 118, 199, 1)) !default;
-$heavy-brand: var(--CDS_heavy_brand, rgba(0, 104, 186, 1)) !default;
-$pale-danger: var(--CDS_pale_danger, rgba(217, 68, 47, 0.04)) !default;
-$highlight-danger: var(--CDS_highlight_danger, rgba(217, 68, 47, 0.08)) !default;
-$bright-danger: var(--CDS_bright_danger, rgba(217, 68, 47, 0.2)) !default;
-$border-danger: var(--CDS_border_danger, rgba(217, 68, 47, 0.4)) !default;
-$primary-danger: var(--CDS_primary_danger, rgba(217, 68, 47, 1)) !default;
-$hover-danger: var(--CDS_hover_danger, rgba(194, 56, 40, 1)) !default;
-$click-danger: var(--CDS_click_danger, rgba(176, 48, 33, 1)) !default;
-$heavy-danger: var(--CDS_heavy_danger, rgba(161, 40, 23, 1)) !default;
+$pale-brand: var(--CDS_pale_brand, rgba(0, 145, 255, 0.06)) !default;
+$highlight-brand: var(--CDS_highlight_brand, rgba(0, 145, 255, 0.1)) !default;
+$bright-brand: var(--CDS_bright_brand, rgba(0, 145, 255, 0.16)) !default;
+$border-brand: var(--CDS_border_brand, rgba(0, 145, 255, 0.4)) !default;
+$primary-brand: var(--CDS_primary_brand, rgba(0, 145, 255, 1)) !default;
+$hover-brand: var(--CDS_hover_brand, rgba(0, 130, 229, 1)) !default;
+$click-brand: var(--CDS_click_brand, rgba(0, 116, 204, 1)) !default;
+$heavy-brand: var(--CDS_heavy_brand, rgba(0, 101, 178, 1)) !default;
+$deco-brand: var(--CDS_deco_brand, rgba(77, 178, 255, 1)) !default;
+$text-brand: var(--CDS_text_brand, rgba(0, 116, 204, 1)) !default;
+$pale-danger: var(--CDS_pale_danger, rgba(208, 73, 52, 0.06)) !default;
+$highlight-danger: var(--CDS_highlight_danger, rgba(208, 73, 52, 0.1)) !default;
+$bright-danger: var(--CDS_bright_danger, rgba(208, 73, 52, 0.16)) !default;
+$border-danger: var(--CDS_border_danger, rgba(208, 73, 52, 0.4)) !default;
+$primary-danger: var(--CDS_primary_danger, rgba(208, 73, 52, 1)) !default;
+$hover-danger: var(--CDS_hover_danger, rgba(174, 49, 31, 1)) !default;
+$click-danger: var(--CDS_click_danger, rgba(140, 24, 9, 1)) !default;
+$heavy-danger: var(--CDS_heavy_danger, rgba(103, 6, 0, 1)) !default;
+$text-danger: var(--CDS_text_danger, rgba(208, 73, 52, 1)) !default;
 $pale-warning: var(--CDS_pale_warning, rgba(255, 154, 33, 0.04)) !default;
 $highlight-warning: var(--CDS_highlight_warning, rgba(255, 154, 33, 0.08)) !default;
@@ -37,14 +40,15 @@ $hover-alert: var(--CDS_hover_alert, rgba(235, 184, 0, 1)) !default;
 $click-alert: var(--CDS_click_alert, rgba(224, 169, 0, 1)) !default;
 $heavy-alert: var(--CDS_heavy_alert, rgba(207, 150, 0, 1)) !default;
-$pale-success: var(--CDS_pale_success, rgba(42, 168, 78, 0.04)) !default;
-$highlight-success: var(--CDS_highlight_success, rgba(42, 168, 78, 0.04)) !default;
-$bright-success: var(--CDS_bright_success, rgba(42, 168, 78, 0.2)) !default;
-$border-success: var(--CDS_border_success, rgba(42, 168, 78, 0.4)) !default;
-$primary-success: var(--CDS_primary_success, rgba(42, 168, 78, 1)) !default;
-$hover-success: var(--CDS_hover_success, rgba(30, 148, 65, 1)) !default;
-$click-success: var(--CDS_click_success, rgba(16, 128, 53, 1)) !default;
-$heavy-success: var(--CDS_heavy_success, rgba(0, 110, 38, 1)) !default;
+$pale-success: var(--CDS_pale_success, rgba(0, 136, 91, 0.06)) !default;
+$highlight-success: var(--CDS_highlight_success, rgba(0, 136, 91, 0.1)) !default;
+$bright-success: var(--CDS_bright_success, rgba(0, 136, 91, 0.16)) !default;
+$border-success: var(--CDS_border_success, rgba(0, 136, 91, 0.4)) !default;
+$primary-success: var(--CDS_primary_success, rgba(0, 136, 91, 1)) !default;
+$hover-success: var(--CDS_hover_success, rgba(0, 108, 72, 1)) !default;
+$click-success: var(--CDS_click_success, rgba(0, 82, 53, 1)) !default;
+$heavy-success: var(--CDS_heavy_success, rgba(0, 56, 35, 1)) !default;
+$text-success: var(--CDS_text_success, rgba(0, 136, 91, 1)) !default;
 $pale-turquoise: var(--CDS_pale_turquoise, rgba(0, 156, 149, 0.04)) !default;
 $highlight-turquoise: var(--CDS_highlight_turquoise, rgba(0, 156, 149, 0.08)) !default;
@@ -71,16 +75,18 @@ $white: var(--CDS_white_01, rgba(255, 255, 255, 1)) !default;
 $abs-white: var(--CDS_white_01, rgba(255, 255, 255, 1)) !default;
 $white-01: var(--CDS_white_01, rgba(255, 255, 255, 1)) !default;
-$white-02: var(--CDS_white_02, rgba(255, 255, 255, 0.72)) !default;
-$white-03: var(--CDS_white_03, rgba(255, 255, 255, 0.36)) !default;
-$white-04: var(--CDS_white_04, rgba(255, 255, 255, 0.18)) !default;
-$white-05: var(--CDS_white_05, rgba(255, 255, 255, 0.08)) !default;
+$white-02: var(--CDS_white_02, rgba(255, 255, 255, 0.8)) !default;
+$white-03: var(--CDS_white_03, rgba(255, 255, 255, 0.6)) !default;
+$white-04: var(--CDS_white_04, rgba(255, 255, 255, 0.36)) !default;
+$white-05: var(--CDS_white_05, rgba(255, 255, 255, 0.16)) !default;
+$white-06: var(--CDS_white_06, rgba(255, 255, 255, 0.08)) !default;
 $black-01: var(--CDS_black_01, rgba(0, 0, 0, 1)) !default;
 $black-02: var(--CDS_black_02, rgba(68, 71, 75, 1)) !default;
 $gray-fill: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06)) !default;
 $line-hover: var(--CDS_gray_hover, rgba(38, 38, 38, 0.05)) !default;
+$gray-fillover: var(--CDS_gray_fillover, rgba(38, 38, 38, 0.08)) !default;
 $gray-filled: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06)) !default;
 $line-actived: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06)) !default;
@@ -99,18 +105,20 @@ $line-color: var(--CDS_gray_basic, rgba(255, 255, 255, 1)) !default;
 $gray-modal: var(--CDS_gray_modal, rgba(255, 255, 255, 1)) !default;
 $modal-color: var(--CDS_gray_modal, rgba(255, 255, 255, 1)) !default;
-$gray-popover: var(--CDS_gray_popover, rgba(255, 255, 255, 1)) !default;
-$popover-color: var(--CDS_gray_popover, rgba(255, 255, 255, 1)) !default;
+$gray-popover: var(--CDS_gray_popover, linear-gradient(104deg, rgba(250, 250, 250, 0.9) 6%, rgba(244, 244, 244, 0.9) 95%)) !default;
+$popover-color: var(--CDS_gray_popover, linear-gradient(104deg, rgba(250, 250, 250, 0.9) 6%, rgba(244, 244, 244, 0.9) 95%)) !default;
 $gray-00: var(--CDS_gray_00, rgba(255, 255, 255, 1)) !default;
-$gray-01: var(--CDS_gray_01, rgba(247, 247, 247, 1)) !default;
-$gray-02: var(--CDS_gray_02, rgba(38, 38, 38, 0.08)) !default;
-$gray-03: var(--CDS_gray_03, rgba(38, 38, 38, 0.12)) !default;
-$gray-04: var(--CDS_gray_04, rgba(38, 38, 38, 0.18)) !default;
-$gray-05: var(--CDS_gray_05, rgba(38, 38, 38, 0.3)) !default;
-$gray-06: var(--CDS_gray_06, rgba(38, 38, 38, 0.52)) !default;
+$gray-01: var(--CDS_gray_01, rgba(249, 249, 249, 1)) !default;
+$gray-02: var(--CDS_gray_02, rgba(38, 38, 38, 0.06)) !default;
+$gray-03: var(--CDS_gray_03, rgba(38, 38, 38, 0.1)) !default;
+$gray-04: var(--CDS_gray_04, rgba(38, 38, 38, 0.22)) !default;
+$gray-05: var(--CDS_gray_05, rgba(38, 38, 38, 0.4)) !default;
+$gray-06: var(--CDS_gray_06, rgba(38, 38, 38, 0.6)) !default;
 $gray-07: var(--CDS_gray_07, rgba(38, 38, 38, 0.76)) !default;
 $gray-08: var(--CDS_gray_08, rgba(38, 38, 38, 1)) !default;
+$gray-pale: var(--CDS_gray_pale, rgba(38, 38, 38, 0.03)) !default;
+$gray-page: var(--CDS_gray_page, rgba(251, 251, 251, 1)) !default;
 $shadow-color: var(--CDS_shadow_color, rgba(0, 0, 0, 1)) !default;
@@ -173,12 +181,17 @@ $background-base: var(--CDS_gray_fill, rgba(38, 38, 38, 0.06)) !default;
 $mask: var(--CDS_black_overlay, rgba(0, 0, 0, 0.2)) !default;
 $overlay: var(--CDS_black_overlay, rgba(0, 0, 0, 0.2)) !default;
-$shadow-00: var(--CDS_shadow_00) !default;
-$shadow-01: var(--CDS_shadow_01) !default;
-$shadow-02: var(--CDS_shadow_02) !default;
-$shadow-03: var(--CDS_shadow_03) !default;
-$shadow-04: var(--CDS_shadow_04) !default;
-$shadow-color-00: var(--CDS_shadow_color_00, rgba(38, 38, 38, 0.4)) !default;
+$shadow-00: var(--CDS_shadow_00, 0px 1px 4px 0px rgba(38, 38, 38, 0.04)) !default;
+$shadow-01: var(--CDS_shadow_01, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 1px 4px 0px rgba(0, 0, 0, 0.04)) !default;
+$shadow-02: var(--CDS_shadow_02, 0px 2px 4px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px -2px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(31, 34, 37, 0.09)) !default;
+$shadow-02-flat: var(--CDS_shadow_02_flat, 0px 2px 4px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px -2px rgba(0, 0, 0, 0.04)) !default;
+$shadow-03: var(--CDS_shadow_03, 0px 0px 0px 1px rgba(31, 34, 47, 0.09), 0px 24px 48px 0px rgba(0, 0, 0, 0.04), 0px 4px 16px 0px rgba(0, 0, 0, 0.02)) !default;
+$shadow-04: var(--CDS_shadow_04, 0px 8px 16px -2px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(31, 34, 37, 0.09)) !default;
+$shadow-popover: var(--CDS_shadow_popover, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 12px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.04)) !default;
+$shadow-popover-flat: var(--CDS_shadow_popover_flat, 0px 12px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.04)) !default;
+$shadow-modal: var(--CDS_shadow_modal, 0px 0px 0px 1px rgba(31, 34, 37, 0.09), 0px 16px 40px -6px rgba(0, 0, 0, 0.16), 0px 12px 24px -6px rgba(0, 0, 0, 0.04)) !default;
+$shadow-input: var(--CDS_shadow_input, 0px 0px 0px 2px rgba(0, 145, 255, 0.1)) !default;
+$shadow-color-00: var(--CDS_shadow_color_00, rgba(38, 38, 38, 0.04)) !default;
 $shadow-color-01: var(--CDS_shadow_color_01, rgba(38, 38, 38, 0.1)) !default;
 $shadow-color-02: var(--CDS_shadow_color_02, rgba(38, 38, 38, 0.14)) !default;
 $shadow-color-03: var(--CDS_shadow_color_03, rgba(38, 38, 38, 0.18)) !default;
@@ -277,12 +290,12 @@ $balloon-tooltip-color-normal: var(--CDS_gray_08, rgba(38, 38, 38, 1)) !default;
 $balloon-tooltip-color-primary: var(--CDS_white_01, rgba(255, 255, 255, 1)) !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-bg-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.4)) !default;
+$btn-warning-primary-color-disabled: var(--CDS_white_01, rgba(255, 255, 255, 1)) !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;
+$btn-pure-color-disabled: var(--CDS_white_01, rgba(255, 255, 255, 1)) !default;
+$btn-pure-bg-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.4)) !default;
+$btn-pure-border-color-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.4)) !default;
 // button ghost dark
 $btn-ghost-dark-bg-normal: transparent !default;
 $btn-ghost-dark-color: var(--CDS_gray_08, rgba(38, 38, 38, 1)) !default;
@@ -307,3 +320,11 @@ $btn-ghost-light-bg-hover: var(--CDS_gray_02, rgba(38, 38, 38, 0.08)) !default;
 $btn-ghost-light-bg-active: var(--CDS_gray_03, rgba(38, 38, 38, 0.12)) !default;
 $btn-ghost-light-color-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.3)) !default;
 $btn-ghost-light-border-color-disabled: var(--CDS_gray_05, rgba(38, 38, 38, 0.3)) !default;
+$lake-subtle: var(--CDS_ct_lake_subtle, rgba(217, 246, 245, 1)) !default;
+$lake-soft: var(--CDS_ct_lake_soft, rgba(178, 240, 237, 1)) !default;
+$lake-medium: var(--CDS_ct_lake_medium, rgba(112, 224, 220, 1)) !default;
+$lake-hard: var(--CDS_ct_lake_hard, rgba(0, 194, 185, 1)) !default;
+$sea-medium: var(--CDS_ct_sea_medium, rgba(106, 219, 251, 1)) !default;
+$violet-hard: var(--CDS_ct_violet_hard, rgba(151, 135, 255, 1)) !default;
+$mango-hard: var(--CDS_ct_mango_hard, rgba(255, 202, 73, 1)) !default;