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

package/README.md

@@ -32,12 +32,32 @@ In this Package we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-217
+
+- TextBox, Multiselect, Tag missing dark palette variables moved under Themes folder file
+
+# 1.0.0-alpha-216
+
+- Select component -> customProps added -> TextBoxProps ,DropdownSearchTextBoxProps, listItemProps added
+- Suggestions component -> customProps added -> listItemProps
+- TextBox component -> customProps added
+- TextBoxIcon component -> customProps added -> TextBoxProps
+
+# 1.0.0-alpha-215
+
+- Select Search Regex Changed to Lowercase
+
+# 1.0.0-alpha-214
+
+- Avatar, Label, Tag, Dropdown, ListItem, Multiselect missing dark palette variables moved under Themes folder files
+
 # 1.0.0-alpha-213
 
 - AnimationVariable File import removed
+
 # 1.0.0-alpha-212
 
-- Stencils =>  Converted to Pure Component
+- Stencils => Converted to Pure Component
 
 # 1.0.0-alpha-211
 

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/ListItem/ListItemWithAvatar.js

@@ -72,8 +72,12 @@ export default class ListItemWithAvatar extends React.PureComponent {
       needAvatarTitle,
       avatarPalette,
       a11y,
-      customClass
+      customClass,
+      customProps
     } = this.props;
+    let {
+      ListItemProps = {}
+    } = customProps;
     let {
       customListItem = '',
       customAvatar = '',
@@ -109,7 +113,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       tagName: "li",
       dataId: `${dataIdString}_ListItemWithAvatar`,
       "data-title": isDisabled ? disableTitle : null
-    }, options), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
+    }, options, ListItemProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
@@ -160,7 +164,8 @@ ListItemWithAvatar.defaultProps = {
   needBorder: true,
   needAvatarTitle: true,
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithAvatar.propTypes = {
   active: PropTypes.bool,
@@ -196,6 +201,9 @@ ListItemWithAvatar.propTypes = {
     customListItem: PropTypes.string,
     customAvatar: PropTypes.string,
     customAvatarTeam: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    ListItemProps: PropTypes.object
   })
 };