@zohodesk/components 1.0.0-alpha-213 → 1.0.0-alpha-217

package/lib/Appearance/dark/mode/darkMode.module.css

@@ -17,7 +17,6 @@
   --zdt_avatar_default_border: var(--zdt_cta_grey_40_border);
   --zdt_avatar_default_borderHover: #828994;
   --zdt_avatar_default_boxshadow: rgba(255, 255, 255, 0.14);
-  --zdt_avatar_white_text: var(--dot_text_white);
   --zdt_avatar_white_borderHover: var(--zdt_cta_grey_40_border);
   --zdt_avatar_white_boxshadow: rgba(0, 0, 0, 0.11);
   --zdt_avatar_secondary_bg: #e2e4e6;
@@ -118,7 +117,6 @@
   --zdt_label_danger_text: var(--dot_text_brightOrange);
   --zdt_label_mandatory_text: #ff6b6b;
   --zdt_label_disable_text: var(--dot_inputDisable);
-  --zdt_label_dark_text: #d0d0d4;
 
   /* tag */
   --zdt_tag_default_text: #e2e4e6;
@@ -143,9 +141,6 @@
   --zdt_tag_pure_border: var(--zd_border_smoke91);
   --zdt_tag_pure_hover_bg: var(--zd_bg_smoke6);
   --zdt_tag_pure_hover_border: var(--zd_border_dark6);
-  --zdt_tag_dark_text: #d0d0d4;
-  --zdt_tag_dark_close_bg: #864654;
-  --zdt_tag_dark_close_text: #de3535;
   --zdt_tag_dark_close_hover_bg: #de3535;
 
   /* textbox */
@@ -158,13 +153,11 @@
   --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
   --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
   --zdt_textbox_secondary_text: #a8b0bd;
-  --zdt_textbox_light_text: var(--dot_text_white);
 
   /* dropdown */
   --zdt_dropdown_default_text: #e2e4e6;
   --zdt_dropdown_default_border: var(--dot_border_mirror);
   --zdt_dropdown_default_bg: #a8b0bd;
-  --zdt_dropdown_darkheading_text: #a8b0bd;
   --zdt_dropdown_darkheading_bg: #383f57;
   --zdt_dropdown_darkheading_underline_bg: #828994;
   --zdt_dropdown_mirror_bg: var(--dot_bg_mirror);
@@ -193,7 +186,6 @@
   --zdt_listitem_primary_bg: var(--dot_listItemActive);
   --zdt_listitem_secondary_bg: var(--zdt_cta_primary_bg);
   --zdt_listitem_secondary_text: #232b38;
-  --zdt_listitem_dark_text: #e2e4e6;
 
   /* ribbon */
   --zdt_ribbon_default_text: #e2e4e6;
@@ -299,11 +291,9 @@
   --zdt_multiselect_delete_bg: var(--dot_bg_mirror);
   --zdt_multiselect_delete_hover_text: #e2e4e6;
   --zdt_multiselect_darkdelete_text: #9c9fab;
-  --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
   --zdt_multiselect_box_bg: #232b38;
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: #828994;
-  --zdt_multiselect_darkmsg_text: #d0d0d4;
 
   /* advanced multiselect */
   --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
@@ -390,14 +380,14 @@
   --zdt_tabs_alpha_box_shadow: var(--zd_shadow_dark10);
   --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
   --zdt_tabs_highlight_border: #e2e4e6;
- 
+
   /* custom scroll */
   --zdt_customscroll_default_bg: rgba(225, 225, 225, 0.06);
   --zdt_customscroll_thump_bg: rgba(225, 225, 225, 0.12);
-  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
   --zdt_customscroll_thump_hover_bg: rgba(168, 176, 189, 0.3);
-  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
   --zdt_customscroll_border: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
   --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
   --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
 }

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

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --zdt_listitem_dark_active_bg: #3b4d6d;
     --zdt_listitem_dark_tickicon: #479dff;
 
     /* tag */
+    --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_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

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

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #0e7c1c;
     --zdt_cta_alpha_border: #45a159;
     --zdt_cta_alpha_hover_border: #0e7c1c;
-    --zdt_cta_alpha_bg: #2A433F;
+    --zdt_cta_alpha_bg: #2a433f;
     --zdt_cta_beta_border: #45a159;
     --zdt_cta_grey_10_bg: #262f3d;
     --zdt_cta_grey_10_border: #262f3d;

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

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --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: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

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

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --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: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

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

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #a81111;
     --zdt_cta_alpha_border: #e94f4f;
     --zdt_cta_alpha_hover_border: #a81111;
-    --zdt_cta_alpha_bg: #372F3A;
+    --zdt_cta_alpha_bg: #372f3a;
     --zdt_cta_beta_border: #e94f4f;
     --zdt_cta_grey_10_bg: #262f3d;
     --zdt_cta_grey_10_border: #262f3d;

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

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --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: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

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

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --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: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
     
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/default/mode/defaultMode.module.css

@@ -17,7 +17,6 @@
   --zdt_avatar_default_border: var(--zdt_cta_grey_40_border);
   --zdt_avatar_default_borderHover: var(--dot_border_slateGrey);
   --zdt_avatar_default_boxshadow: rgba(0, 0, 0, 0.11);
-  --zdt_avatar_white_text: var(--dot_text_white);
   --zdt_avatar_white_borderHover: var(--zdt_cta_grey_40_border);
   --zdt_avatar_white_boxshadow: rgba(255, 255, 255, 0.14);
   --zdt_avatar_secondary_bg: var(--dot_bg_black);
@@ -118,7 +117,6 @@
   --zdt_label_danger_text: var(--dot_text_brightOrange);
   --zdt_label_mandatory_text: var(--dot_text_brightRed);
   --zdt_label_disable_text: var(--dot_inputDisable);
-  --zdt_label_dark_text: #d0d0d4;
 
   /* tag */
   --zdt_tag_default_text: var(--dot_text_black);
@@ -143,7 +141,6 @@
   --zdt_tag_pure_border: var(--zd_border_smoke91);
   --zdt_tag_pure_hover_bg: var(--zd_bg_smoke6);
   --zdt_tag_pure_hover_border: var(--zd_border_dark6);
-  --zdt_tag_dark_text: #d0d0d4;
   --zdt_tag_dark_close_bg: #864654;
   --zdt_tag_dark_close_text: #de3535;
   --zdt_tag_dark_close_hover_bg: #de3535;
@@ -158,13 +155,11 @@
   --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
   --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
   --zdt_textbox_secondary_text: var(--dot_text_shuttleGrey);
-  --zdt_textbox_light_text: var(--dot_text_white);
 
   /* dropdown */
   --zdt_dropdown_default_text: var(--dot_text_black);
   --zdt_dropdown_default_border: var(--dot_border_mirror);
   --zdt_dropdown_default_bg: var(--dot_bg_shuttleGrey);
-  --zdt_dropdown_darkheading_text: var(--dot_text_white);
   --zdt_dropdown_darkheading_bg: #383f57;
   --zdt_dropdown_darkheading_underline_bg: #565e72;
   --zdt_dropdown_mirror_bg: var(--dot_bg_mirror);
@@ -193,7 +188,6 @@
   --zdt_listitem_primary_bg: var(--dot_listItemActive);
   --zdt_listitem_secondary_bg: var(--zdt_cta_primary_bg);
   --zdt_listitem_secondary_text: var(--dot_text_white);
-  --zdt_listitem_dark_text: #d0d0d4;
 
   /* ribbon */
   --zdt_ribbon_default_text: var(--dot_text_black);
@@ -299,11 +293,9 @@
   --zdt_multiselect_delete_bg: var(--dot_bg_mirror);
   --zdt_multiselect_delete_hover_text: var(--dot_text_black);
   --zdt_multiselect_darkdelete_text: #9c9fab;
-  --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
   --zdt_multiselect_box_bg: var(--dot_bg_white);
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: var(--dot_text_slateGrey);
-  --zdt_multiselect_darkmsg_text: #d0d0d4;
 
   /* advanced multiselect */
   --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
@@ -391,13 +383,13 @@
   --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
   --zdt_tabs_highlight_border: var(--dot_border_black);
 
-   /* custom scroll */
-   --zdt_customscroll_default_bg: rgba(0, 0, 0, 0.02);
-   --zdt_customscroll_thump_bg: rgba(0, 0, 0, 0.12);
-   --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.15);
-   --zdt_customscroll_thump_hover_bg: rgba(0, 0, 0, 0.16);
-   --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.17);
-   --zdt_customscroll_border: rgba(44, 51, 77, 0.1);
-   --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
-   --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
+  /* custom scroll */
+  --zdt_customscroll_default_bg: rgba(0, 0, 0, 0.02);
+  --zdt_customscroll_thump_bg: rgba(0, 0, 0, 0.12);
+  --zdt_customscroll_thump_hover_bg: rgba(0, 0, 0, 0.16);
+  --zdt_customscroll_border: rgba(44, 51, 77, 0.1);
+  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.15);
+  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.17);
+  --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
 }

package/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #383f57;
+    --zdt_listitem_dark_text: #d0d0d4;
     --zdt_listitem_dark_effect_bg: #444a61;
     --zdt_listitem_dark_active_bg: #3b4d6d;
     --zdt_listitem_dark_tickicon: #6cbbfc;
 
     /* tag */
+    --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_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #383f57;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: var(--dot_border_shuttleGrey);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #0e7526;
     --zdt_cta_alpha_border: #26a942;
     --zdt_cta_alpha_hover_border: #0e7526;
-    --zdt_cta_alpha_bg: #D4EED9;
+    --zdt_cta_alpha_bg: #d4eed9;
     --zdt_cta_beta_border: #26a942;
     --zdt_cta_grey_10_bg: #f6faf9;
     --zdt_cta_grey_10_border: #f6faf9;

package/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #1d2f33;
+    --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;
 
     /* 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_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #b25900;
     --zdt_cta_alpha_border: #e57717;
     --zdt_cta_alpha_hover_border: #b25900;
-    --zdt_cta_alpha_bg: #FAE4D1;
+    --zdt_cta_alpha_bg: #fae4d1;
     --zdt_cta_beta_border: #e57717;
     --zdt_cta_grey_10_bg: #f9f7f6;
     --zdt_cta_grey_10_border: #f9f7f6;

package/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #332e24;
+    --zdt_listitem_dark_text: #d0d0d4;
     --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
     --zdt_listitem_dark_active_bg: #4b4335;
     --zdt_listitem_dark_tickicon: #ff6363;
 
     /* 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_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #ab1a18;
     --zdt_cta_alpha_border: #de3535;
     --zdt_cta_alpha_hover_border: #ab1a18;
-    --zdt_cta_alpha_bg: #F8D7D7;
+    --zdt_cta_alpha_bg: #f8d7d7;
     --zdt_cta_beta_border: #de3535;
     --zdt_cta_grey_10_bg: #f9f6f7;
     --zdt_cta_grey_10_border: #f9f6f7;

package/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #34222d;
+    --zdt_listitem_dark_text: #d0d0d4;
     --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
     --zdt_listitem_dark_active_bg: #4d3243;
     --zdt_listitem_dark_tickicon: #e57717;
 
     /* 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_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css

@@ -14,18 +14,35 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #313323;
+    --zdt_listitem_dark_text: #d0d0d4;
     --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
     --zdt_listitem_dark_active_bg: #494c34;
     --zdt_listitem_dark_tickicon: #e8b923;
 
     /* 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_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -121,7 +121,10 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           needAvatarTitle = _this$props4.needAvatarTitle,
           avatarPalette = _this$props4.avatarPalette,
           a11y = _this$props4.a11y,
-          customClass = _this$props4.customClass;
+          customClass = _this$props4.customClass,
+          customProps = _this$props4.customProps;
+      var _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       var _customClass$customLi = customClass.customListItem,
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customAv = customClass.customAvatar,
@@ -157,7 +160,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         tagName: "li",
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         "data-title": isDisabled ? disableTitle : null
-      }, options), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, options, ListItemProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].leftAvatar
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
         name: name,
@@ -212,7 +215,8 @@ ListItemWithAvatar.defaultProps = {
   needBorder: true,
   needAvatarTitle: true,
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithAvatar.propTypes = (_ListItemWithAvatar$p = {
   active: _propTypes["default"].bool,
@@ -226,6 +230,8 @@ ListItemWithAvatar.propTypes = (_ListItemWithAvatar$p = {
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string
+})), _defineProperty(_ListItemWithAvatar$p, "customProps", _propTypes["default"].shape({
+  ListItemProps: _propTypes["default"].object
 })), _ListItemWithAvatar$p);
 
 if (false) {

package/lib/ListItem/ListItemWithIcon.js

@@ -110,7 +110,10 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           isDisabled = _this$props4.isDisabled,
           disableTitle = _this$props4.disableTitle,
           a11y = _this$props4.a11y,
-          customClass = _this$props4.customClass;
+          customClass = _this$props4.customClass,
+          customProps = _this$props4.customProps;
+      var _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       var role = a11y.role,
           ariaSelected = a11y.ariaSelected,
           _a11y$ariaHidden = a11y.ariaHidden,
@@ -139,7 +142,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         eleRef: this.getRef,
         tagName: "li",
         "data-title": isDisabled ? disableTitle : null
-      }, options), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, options, ListItemProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "aria-hidden": true,
         className: _ListItemModule["default"].iconBox,
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
@@ -182,7 +185,8 @@ ListItemWithIcon.defaultProps = {
   value: 'List',
   needBorder: true,
   a11y: {},
-  customClass: ''
+  customClass: '',
+  customProps: {}
 };
 ListItemWithIcon.propTypes = {
   active: _propTypes["default"].bool,
@@ -210,7 +214,10 @@ ListItemWithIcon.propTypes = {
     ariaSelected: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool
   }),
-  customClass: _propTypes["default"].string
+  customClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    ListItemProps: _propTypes["default"].object
+  })
 };
 
 if (false) {