@zohodesk/components 1.0.0-temp-52 → 1.0.0-temp-55

package/{es → assets}/Appearance/dark/mode/darkMode.module.css

@@ -66,6 +66,8 @@
 	--zdt_button_tick_primary_border: var(--zdt_cta_secondary_text);
 	--zdt_button_loading_default_bg: var(--dot_ebonyclay);
 	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: var(--dot_ebonyclay);
@@ -162,7 +164,7 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdt_cta_primary_bg);
-	--zdt_listitem_secondary_text: var(--dot_ebonyclay);
+	--zdt_listitem_secondary_text: #212121;
 	
 	/* ribbon */
 	--zdt_ribbon_default_text: var(--dot_platinum);
@@ -204,9 +206,9 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-	--zdt_stencil_secondary_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* switch */
 	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);

package/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css

@@ -0,0 +1,34 @@
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
+	--zdt_cta_primary_text: var(--dot_butterflyblue);
+	--zdt_cta_primary_hover_text: #6eb2ff;
+	--zdt_cta_primary_bg: var(--dot_butterflyblue);
+	--zdt_cta_primary_hover_bg: #1065cc;
+	--zdt_cta_primary_border: var(--dot_butterflyblue);
+	--zdt_cta_primary_hover_border: #1065cc;
+	--zdt_cta_primary_box_shadow: rgba(10, 115, 235, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(0, 83, 184, 0.25);
+	--zdt_cta_primary_light_bg: var(--dot_darkbluegrey);
+	--zdt_cta_primary_light_hover_bg: var(--dot_unknown1);
+	--zdt_cta_primary_light_border: var(--zd_primary13);
+	--zdt_cta_secondary_bg: var(--dot_butterflyblue);
+	--zdt_cta_secondary_text: var(--dot_white);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
+	--zdt_cta_secondary_light_border: #3f536b;
+	--zdt_cta_alpha_text: var(--dot_butterflyblue);
+	--zdt_cta_alpha_hover_text: #6eb2ff;
+	--zdt_cta_alpha_border: var(--dot_butterflyblue);
+	--zdt_cta_alpha_hover_border: #1065cc;
+	--zdt_cta_alpha_bg: #253142;
+	--zdt_cta_beta_border: var(--dot_butterflyblue);
+	--zdt_cta_grey_10_bg: var(--dot_unknown1);
+	--zdt_cta_grey_10_border: var(--dot_unknown1);
+	--zdt_cta_grey_15_bg: var(--dot_tuna);
+	--zdt_cta_grey_15_border: var(--dot_tuna);
+	--zdt_cta_grey_20_bg: #161b23;
+	--zdt_cta_grey_35_bg: var(--dot_brightgrey);
+	--zdt_cta_grey_35_text: var(--dot_brightgrey);
+	--zdt_cta_grey_35_border: var(--dot_brightgrey);
+	--zdt_cta_grey_40_bg: var(--dot_riverbed);
+	--zdt_cta_grey_40_text: var(--dot_riverbed);
+	--zdt_cta_grey_40_border: var(--dot_riverbed)
+}

package/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css

@@ -0,0 +1,42 @@
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
+	/* stencil */
+	--zdt_stencil_dark_bg: #383f55;
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: var(--dot_ebonyclay);
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: var(--dot_ebonyclay);
+	--zdt_listitem_dark_text: var(--dot_platinum);
+	--zdt_listitem_dark_effect_bg: var(--dot_unknown1);
+	--zdt_listitem_dark_active_bg: #3b4d6d;
+	--zdt_listitem_dark_tickicon: var(--dot_butterflyblue);
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_darkmsg_bg: var(--dot_ebonyclay);
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
+	
+	/* avatar */
+	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_text: var(--dot_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+}

package/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css

@@ -0,0 +1,34 @@
+[data-mode='dark'][data-theme='green'] {
+	--zdt_cta_primary_text: #45a159;
+	--zdt_cta_primary_hover_text: #5eba72;
+	--zdt_cta_primary_bg: #45a159;
+	--zdt_cta_primary_hover_bg: #0e7c1c;
+	--zdt_cta_primary_border: #45a159;
+	--zdt_cta_primary_hover_border: #0e7c1c;
+	--zdt_cta_primary_box_shadow: rgba(38, 169, 66, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(14, 117, 38, 0.25);
+	--zdt_cta_primary_light_bg: #26373b;
+	--zdt_cta_primary_light_hover_bg: #2d4e42;
+	--zdt_cta_primary_light_border: #2d4e42;
+	--zdt_cta_secondary_bg: #45a159;
+	--zdt_cta_secondary_text: var(--dot_white);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
+	--zdt_cta_secondary_light_border: #2d4e42;
+	--zdt_cta_alpha_text: #45a159;
+	--zdt_cta_alpha_hover_text: #0e7c1c;
+	--zdt_cta_alpha_border: #45a159;
+	--zdt_cta_alpha_hover_border: #0e7c1c;
+	--zdt_cta_alpha_bg: #2a433f;
+	--zdt_cta_beta_border: #45a159;
+	--zdt_cta_grey_10_bg: var(--dot_unknown1);
+	--zdt_cta_grey_10_border: var(--dot_unknown1);
+	--zdt_cta_grey_15_bg: var(--dot_tuna);
+	--zdt_cta_grey_15_border: var(--dot_tuna);
+	--zdt_cta_grey_20_bg: #161b23;
+	--zdt_cta_grey_35_bg: var(--dot_brightgrey);
+	--zdt_cta_grey_35_text: var(--dot_brightgrey);
+	--zdt_cta_grey_35_border: var(--dot_brightgrey);
+	--zdt_cta_grey_40_bg: var(--dot_riverbed);
+	--zdt_cta_grey_40_text: var(--dot_riverbed);
+	--zdt_cta_grey_40_border: var(--dot_riverbed)
+}

package/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css

@@ -0,0 +1,42 @@
+[data-mode='dark'][data-theme='green'] {
+	/* stencil */
+	--zdt_stencil_dark_bg: #383f55;
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: var(--dot_ebonyclay);
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: var(--dot_ebonyclay);
+	--zdt_listitem_dark_text: var(--dot_platinum);
+	--zdt_listitem_dark_effect_bg: var(--dot_unknown1);
+	--zdt_listitem_dark_active_bg: #3b4d6d;
+	--zdt_listitem_dark_tickicon: #45a159;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_darkmsg_bg: var(--dot_ebonyclay);
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
+	
+	/* avatar */
+	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_text: var(--dot_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+}

package/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css

@@ -0,0 +1,34 @@
+[data-mode='dark'][data-theme='orange'] {
+	--zdt_cta_primary_text: #ff801f;
+	--zdt_cta_primary_hover_text: #ffa866;
+	--zdt_cta_primary_bg: #ff801f;
+	--zdt_cta_primary_hover_bg: #a85100;
+	--zdt_cta_primary_border: #ff801f;
+	--zdt_cta_primary_hover_border: #a85100;
+	--zdt_cta_primary_box_shadow: rgba(229, 119, 23, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(178, 89, 0, 0.25);
+	--zdt_cta_primary_light_bg: #323136;
+	--zdt_cta_primary_light_hover_bg: #4f3c33;
+	--zdt_cta_primary_light_border: #4f3c33;
+	--zdt_cta_secondary_bg: #ff801f;
+	--zdt_cta_secondary_text: var(--dot_white);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
+	--zdt_cta_secondary_light_border: #4f3c33;
+	--zdt_cta_alpha_text: #ff801f;
+	--zdt_cta_alpha_hover_text: #a85100;
+	--zdt_cta_alpha_border: #ff801f;
+	--zdt_cta_alpha_hover_border: #a85100;
+	--zdt_cta_alpha_bg: #393335;
+	--zdt_cta_beta_border: #ff801f;
+	--zdt_cta_grey_10_bg: var(--dot_unknown1);
+	--zdt_cta_grey_10_border: var(--dot_unknown1);
+	--zdt_cta_grey_15_bg: var(--dot_tuna);
+	--zdt_cta_grey_15_border: var(--dot_tuna);
+	--zdt_cta_grey_20_bg: #161b23;
+	--zdt_cta_grey_35_bg: var(--dot_brightgrey);
+	--zdt_cta_grey_35_text: var(--dot_brightgrey);
+	--zdt_cta_grey_35_border: var(--dot_brightgrey);
+	--zdt_cta_grey_40_bg: var(--dot_riverbed);
+	--zdt_cta_grey_40_text: var(--dot_riverbed);
+	--zdt_cta_grey_40_border: var(--dot_riverbed)
+}

package/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css

@@ -0,0 +1,42 @@
+[data-mode='dark'][data-theme='orange'] {
+	/* stencil */
+	--zdt_stencil_dark_bg: #383f55;
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: var(--dot_ebonyclay);
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: var(--dot_ebonyclay);
+	--zdt_listitem_dark_text: var(--dot_platinum);
+	--zdt_listitem_dark_effect_bg: var(--dot_unknown1);
+	--zdt_listitem_dark_active_bg: #3b4d6d;
+	--zdt_listitem_dark_tickicon: #e94f4f;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_darkmsg_bg: var(--dot_ebonyclay);
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
+	
+	/* avatar */
+	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_text: var(--dot_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+}

package/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css

@@ -0,0 +1,34 @@
+[data-mode='dark'][data-theme='red'] {
+	--zdt_cta_primary_text: #e94f4f;
+	--zdt_cta_primary_hover_text: #ee7c7c;
+	--zdt_cta_primary_bg: #e94f4f;
+	--zdt_cta_primary_hover_bg: #a81111;
+	--zdt_cta_primary_border: #e94f4f;
+	--zdt_cta_primary_hover_border: #a81111;
+	--zdt_cta_primary_box_shadow: rgba(222, 53, 53, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(171, 26, 24, 0.25);
+	--zdt_cta_primary_light_bg: #312d3a;
+	--zdt_cta_primary_light_hover_bg: #4b323d;
+	--zdt_cta_primary_light_border: #4b323d;
+	--zdt_cta_secondary_bg: #e94f4f;
+	--zdt_cta_secondary_text: var(--dot_white);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
+	--zdt_cta_secondary_light_border: #4b323d;
+	--zdt_cta_alpha_text: #e94f4f;
+	--zdt_cta_alpha_hover_text: #a81111;
+	--zdt_cta_alpha_border: #e94f4f;
+	--zdt_cta_alpha_hover_border: #a81111;
+	--zdt_cta_alpha_bg: #372f3a;
+	--zdt_cta_beta_border: #e94f4f;
+	--zdt_cta_grey_10_bg: var(--dot_unknown1);
+	--zdt_cta_grey_10_border: var(--dot_unknown1);
+	--zdt_cta_grey_15_bg: var(--dot_tuna);
+	--zdt_cta_grey_15_border: var(--dot_tuna);
+	--zdt_cta_grey_20_bg: #161b23;
+	--zdt_cta_grey_35_bg: var(--dot_brightgrey);
+	--zdt_cta_grey_35_text: var(--dot_brightgrey);
+	--zdt_cta_grey_35_border: var(--dot_brightgrey);
+	--zdt_cta_grey_40_bg: var(--dot_riverbed);
+	--zdt_cta_grey_40_text: var(--dot_riverbed);
+	--zdt_cta_grey_40_border: var(--dot_riverbed)
+}

package/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css

@@ -0,0 +1,42 @@
+[data-mode='dark'][data-theme='red'] {
+	/* stencil */
+	--zdt_stencil_dark_bg: #383f55;
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: var(--dot_ebonyclay);
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: var(--dot_ebonyclay);
+	--zdt_listitem_dark_text: var(--dot_platinum);
+	--zdt_listitem_dark_effect_bg: var(--dot_unknown1);
+	--zdt_listitem_dark_active_bg: #3b4d6d;
+	--zdt_listitem_dark_tickicon: #ff801f;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_darkmsg_bg: var(--dot_ebonyclay);
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
+	
+	/* avatar */
+	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_text: var(--dot_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+}

package/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css

@@ -0,0 +1,34 @@
+[data-mode='dark'][data-theme='yellow'] {
+	--zdt_cta_primary_text: #d79835;
+	--zdt_cta_primary_hover_text: #e1b36a;
+	--zdt_cta_primary_bg: #d79835;
+	--zdt_cta_primary_hover_bg: #9b6808;
+	--zdt_cta_primary_border: #d79835;
+	--zdt_cta_primary_hover_border: #9b6808;
+	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
+	--zdt_cta_primary_light_bg: #303338;
+	--zdt_cta_primary_light_hover_bg: #474137;
+	--zdt_cta_primary_light_border: #474137;
+	--zdt_cta_secondary_bg: #d79835;
+	--zdt_cta_secondary_text: var(--dot_white);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
+	--zdt_cta_secondary_light_border: #474137;
+	--zdt_cta_alpha_text: #d79835;
+	--zdt_cta_alpha_hover_text: #9b6808;
+	--zdt_cta_alpha_border: #d79835;
+	--zdt_cta_alpha_hover_border: #9b6808;
+	--zdt_cta_alpha_bg: #353638;
+	--zdt_cta_beta_border: #d79835;
+	--zdt_cta_grey_10_bg: var(--dot_unknown1);
+	--zdt_cta_grey_10_border: var(--dot_unknown1);
+	--zdt_cta_grey_15_bg: var(--dot_tuna);
+	--zdt_cta_grey_15_border: var(--dot_tuna);
+	--zdt_cta_grey_20_bg: #161b23;
+	--zdt_cta_grey_35_bg: var(--dot_brightgrey);
+	--zdt_cta_grey_35_text: var(--dot_brightgrey);
+	--zdt_cta_grey_35_border: var(--dot_brightgrey);
+	--zdt_cta_grey_40_bg: var(--dot_riverbed);
+	--zdt_cta_grey_40_text: var(--dot_riverbed);
+	--zdt_cta_grey_40_border: var(--dot_riverbed)
+}

package/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css

@@ -0,0 +1,42 @@
+[data-mode='dark'][data-theme='yellow'] {
+	/* stencil */
+	--zdt_stencil_dark_bg: #383f55;
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: var(--dot_ebonyclay);
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: var(--dot_ebonyclay);
+	--zdt_listitem_dark_text: var(--dot_platinum);
+	--zdt_listitem_dark_effect_bg: var(--dot_unknown1);
+	--zdt_listitem_dark_active_bg: #3b4d6d;
+	--zdt_listitem_dark_tickicon: #d79835;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_darkmsg_bg: var(--dot_ebonyclay);
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
+	
+	/* avatar */
+	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_text: var(--dot_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+}

package/{es → assets}/Appearance/default/mode/defaultMode.module.css

@@ -66,6 +66,8 @@
 	--zdt_button_tick_primary_border: var(--zdt_cta_secondary_text);
 	--zdt_button_loading_default_bg: var(--dot_white);
 	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
+	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: var(--dot_white);
@@ -204,9 +206,9 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(left, var(--dot_catskillWhite) 0, var(--dot_hawkesBlue) 33.33%, var(--dot_catskillWhite) 66.66%, var(--dot_catskillWhite) 100%);
+	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, var(--dot_catskillWhite) 0%, var(--dot_hawkesBlue) 33.33%, var(--dot_catskillWhite) 66.66%, var(--dot_catskillWhite) 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-	--zdt_stencil_secondary_gradient_bg: linear-gradient(left, var(--dot_solitude) 0, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
+	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
 	
 	/* switch */
 	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);

package/{es → assets}/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css

@@ -1,13 +1,13 @@
 [data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
 	/* stencil */
 	--zdt_stencil_dark_bg: #383f55;
-	--zdt_stencil_dark_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
-	--zdt_dropbox_dark_bg: #383f57;
+	--zdt_dropbox_dark_bg: var(--dot_unknown2);
 	
 	/* listitem */
-	--zdt_listitem_dark_bg: #383f57;
+	--zdt_listitem_dark_bg: var(--dot_unknown2);
 	--zdt_listitem_dark_text: #d0d0d4;
 	--zdt_listitem_dark_effect_bg: #444a61;
 	--zdt_listitem_dark_active_bg: #3b4d6d;
@@ -17,13 +17,13 @@
 	--zdt_tag_dark_text: #d0d0d4;
 	--zdt_tag_dark_bg: #42485f;
 	--zdt_tag_dark_hover_text: #d0d0d4;
-	--zdt_tag_dark_hover_bg: #503348;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
-	--zdt_tag_dark_close_text: #de3535;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border: #4b5168;
-	--zdt_multiselect_darkmsg_bg: #383f57;
+	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_darkmsg_bg: var(--dot_unknown2);
 	--zdt_multiselect_darkmsg_text: #d0d0d4;
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_white);
 	

package/{es → assets}/Appearance/default/themes/green/greenDefaultCTATheme.module.css

@@ -7,12 +7,12 @@
 	--zdt_cta_primary_hover_border: #0e7526;
 	--zdt_cta_primary_box_shadow: rgba(38, 169, 66, 0.2);
 	--zdt_cta_primary_hover_box_shadow: rgba(14, 117, 38, 0.25);
-	--zdt_cta_primary_light_bg: #f2faf5;
+	--zdt_cta_primary_light_bg: var(--dot_blacksqueeze);
 	--zdt_cta_primary_light_hover_bg: #d4eed9;
 	--zdt_cta_primary_light_border: #d4eed9;
 	--zdt_cta_secondary_bg: #26a942;
 	--zdt_cta_secondary_text: var(--dot_white);
-	--zdt_cta_secondary_border: #4ac064;
+	--zdt_cta_secondary_border: var(--dot_darkmint);
 	--zdt_cta_secondary_light_border: #bee5c6;
 	--zdt_cta_alpha_text: #26a942;
 	--zdt_cta_alpha_hover_text: #0e7526;

package/{es → assets}/Appearance/default/themes/green/greenDefaultComponentTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='default'][data-theme='green'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: #1d2f33;
@@ -11,15 +11,15 @@
 	--zdt_listitem_dark_text: #d0d0d4;
 	--zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
 	--zdt_listitem_dark_active_bg: #2d484e;
-	--zdt_listitem_dark_tickicon: #4ac064;
+	--zdt_listitem_dark_tickicon: var(--dot_darkmint);
 	
 	/* tag */
 	--zdt_tag_dark_text: #d0d0d4;
 	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
 	--zdt_tag_dark_hover_text: #d0d0d4;
-	--zdt_tag_dark_hover_bg: #503348;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
-	--zdt_tag_dark_close_text: #de3535;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
 	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);

package/{es → assets}/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='default'][data-theme='orange'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: #332e24;
@@ -17,9 +17,9 @@
 	--zdt_tag_dark_text: #d0d0d4;
 	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
 	--zdt_tag_dark_hover_text: #d0d0d4;
-	--zdt_tag_dark_hover_bg: #503348;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
-	--zdt_tag_dark_close_text: #de3535;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
 	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);

package/{es → assets}/Appearance/default/themes/red/redDefaultCTATheme.module.css

@@ -1,25 +1,25 @@
 [data-mode='default'][data-theme='red'] {
-	--zdt_cta_primary_text: #de3535;
+	--zdt_cta_primary_text: var(--dot_brightRed);
 	--zdt_cta_primary_hover_text: #ab1a18;
-	--zdt_cta_primary_bg: #de3535;
+	--zdt_cta_primary_bg: var(--dot_brightRed);
 	--zdt_cta_primary_hover_bg: #ab1a18;
-	--zdt_cta_primary_border: #de3535;
+	--zdt_cta_primary_border: var(--dot_brightRed);
 	--zdt_cta_primary_hover_border: #ab1a18;
 	--zdt_cta_primary_box_shadow: rgba(222, 53, 53, 0.2);
 	--zdt_cta_primary_hover_box_shadow: rgba(171, 26, 24, 0.25);
 	--zdt_cta_primary_light_bg: #fdf3f3;
 	--zdt_cta_primary_light_hover_bg: #f8d7d7;
 	--zdt_cta_primary_light_border: #f8d7d7;
-	--zdt_cta_secondary_bg: #de3535;
+	--zdt_cta_secondary_bg: var(--dot_brightRed);
 	--zdt_cta_secondary_text: var(--dot_white);
 	--zdt_cta_secondary_border: #e55d5d;
 	--zdt_cta_secondary_light_border: #f8d7d7;
-	--zdt_cta_alpha_text: #de3535;
+	--zdt_cta_alpha_text: var(--dot_brightRed);
 	--zdt_cta_alpha_hover_text: #ab1a18;
-	--zdt_cta_alpha_border: #de3535;
+	--zdt_cta_alpha_border: var(--dot_brightRed);
 	--zdt_cta_alpha_hover_border: #ab1a18;
 	--zdt_cta_alpha_bg: #f8d7d7;
-	--zdt_cta_beta_border: #de3535;
+	--zdt_cta_beta_border: var(--dot_brightRed);
 	--zdt_cta_grey_10_bg: #f9f6f7;
 	--zdt_cta_grey_10_border: #f9f6f7;
 	--zdt_cta_grey_15_bg: #ede8e8;

package/{es → assets}/Appearance/default/themes/red/redDefaultComponentTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='default'][data-theme='red'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: #34222d;
@@ -17,9 +17,9 @@
 	--zdt_tag_dark_text: #d0d0d4;
 	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
 	--zdt_tag_dark_hover_text: #d0d0d4;
-	--zdt_tag_dark_hover_bg: #503348;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
-	--zdt_tag_dark_close_text: #de3535;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
 	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);

package/{es → assets}/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='default'][data-theme='yellow'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: #313323;
@@ -17,9 +17,9 @@
 	--zdt_tag_dark_text: #d0d0d4;
 	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
 	--zdt_tag_dark_hover_text: #d0d0d4;
-	--zdt_tag_dark_hover_bg: #503348;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
-	--zdt_tag_dark_close_text: #de3535;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
 	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);