@zohodesk/components 1.0.0-alpha-224 → 1.0.0-alpha-227

package/README.md

@@ -32,6 +32,27 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-227
+
+- isReadOnly and needEffect prop added in Tag Component for read-only case
+- needEffect prop added for the below components: ( This props has been added for read-only case )
+  => Advanced Group Multi Select
+  => Advanced Multi Select
+  => Multi Select
+  => Multi Select With Avatar
+  => Select With Avatar
+- isReadonly prop added for SelectedOption component
+- Read-only class added for TextBoxIcon component
+- Removed click action in tag multi select component for read-only case
+- Changed the cursor default to not-allowed in Radio component for read-only case
+# 1.0.0-alpha-226
+
+- ListContainer Implemented in => ListItem,ListItemWithAvatar,ListItemWithIcon,ListItemWithRadio,ListItemWithCheckBox
+
+# 1.0.0-alpha-225
+
+- Appearance css moved to assets
+
 # 1.0.0-alpha-224
 
 - css color variable updation

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

@@ -204,9 +204,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/{es → assets}/Appearance/dark/themes/green/greenDarkCTATheme.module.css

@@ -20,15 +20,15 @@
 	--zdt_cta_alpha_hover_border: #0e7c1c;
 	--zdt_cta_alpha_bg: #2a433f;
 	--zdt_cta_beta_border: #45a159;
-	--zdt_cta_grey_10_bg: #262f3d;
-	--zdt_cta_grey_10_border: #262f3d;
-	--zdt_cta_grey_15_bg: #2d3748;
-	--zdt_cta_grey_15_border: #2d3748;
+	--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: #384157;
-	--zdt_cta_grey_35_text: #384157;
-	--zdt_cta_grey_35_border: #384157;
-	--zdt_cta_grey_40_bg: #3e4d63;
-	--zdt_cta_grey_40_text: #3e4d63;
-	--zdt_cta_grey_40_border: #3e4d63
+	--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/{lib → assets}/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css

@@ -20,15 +20,15 @@
 	--zdt_cta_alpha_hover_border: #a85100;
 	--zdt_cta_alpha_bg: #393335;
 	--zdt_cta_beta_border: #ff801f;
-	--zdt_cta_grey_10_bg: #262f3d;
-	--zdt_cta_grey_10_border: #262f3d;
-	--zdt_cta_grey_15_bg: #2d3748;
-	--zdt_cta_grey_15_border: #2d3748;
+	--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: #384157;
-	--zdt_cta_grey_35_text: #384157;
-	--zdt_cta_grey_35_border: #384157;
-	--zdt_cta_grey_40_bg: #3e4d63;
-	--zdt_cta_grey_40_text: #3e4d63;
-	--zdt_cta_grey_40_border: #3e4d63
+	--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/{lib → assets}/Appearance/dark/themes/red/redDarkCTATheme.module.css

@@ -20,15 +20,15 @@
 	--zdt_cta_alpha_hover_border: #a81111;
 	--zdt_cta_alpha_bg: #372f3a;
 	--zdt_cta_beta_border: #e94f4f;
-	--zdt_cta_grey_10_bg: #262f3d;
-	--zdt_cta_grey_10_border: #262f3d;
-	--zdt_cta_grey_15_bg: #2d3748;
-	--zdt_cta_grey_15_border: #2d3748;
+	--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: #384157;
-	--zdt_cta_grey_35_text: #384157;
-	--zdt_cta_grey_35_border: #384157;
-	--zdt_cta_grey_40_bg: #3e4d63;
-	--zdt_cta_grey_40_text: #3e4d63;
-	--zdt_cta_grey_40_border: #3e4d63
+	--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/{es → assets}/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css

@@ -20,15 +20,15 @@
 	--zdt_cta_alpha_hover_border: #9b6808;
 	--zdt_cta_alpha_bg: #353638;
 	--zdt_cta_beta_border: #d79835;
-	--zdt_cta_grey_10_bg: #262f3d;
-	--zdt_cta_grey_10_border: #262f3d;
-	--zdt_cta_grey_15_bg: #2d3748;
-	--zdt_cta_grey_15_border: #2d3748;
+	--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: #384157;
-	--zdt_cta_grey_35_text: #384157;
-	--zdt_cta_grey_35_border: #384157;
-	--zdt_cta_grey_40_bg: #3e4d63;
-	--zdt_cta_grey_40_text: #3e4d63;
-	--zdt_cta_grey_40_border: #3e4d63
+	--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

@@ -204,9 +204,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/{lib → 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/{lib → 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/{lib → 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);

package/es/AppContainer/AppContainer.js

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
 import { Container, Box } from '../Layout';
 import Tooltip from '../Tooltip/Tooltip';
 import '../common/basic.module.css';
-import '@zohodesk/variables/lib/colorVariables.module.css';
-import '@zohodesk/variables/lib/dotVariables.module.css';
-import '@zohodesk/variables/lib/sizeVariables.module.css';
-import '@zohodesk/variables/lib/fontsizeVariables.module.css';
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
-import '@zohodesk/variables/lib/transitionVariables.module.css';
-import '@zohodesk/variables/lib/no_transitionVariables.module.css';
+import '@zohodesk/variables/assets/transitionVariables.module.css';
+import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import style from './AppContainer.module.css';
 import { getLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {

package/es/DateTime/DateWidget.module.css

@@ -6,10 +6,6 @@
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }
-.readOnly,
-.disabled {
-  composes: readonly from '../common/common.module.css';
-}
 .enabled {
   cursor: pointer;
 }