@zohodesk/components 1.0.0-temp-162 → 1.0.0-temp-164

package/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css

@@ -0,0 +1,35 @@
+[data-mode='light'][data-theme='yellow'] {
+	/* CTA variables */
+	--zdt_cta_primary_text: hsla(46, 93%, calc(37% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(48, 100%, calc(25% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_bg: hsla(46, 81%, calc(52% + var(--zd_light_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_hover_bg: hsla(48, 100%, calc(35% + var(--zd_light_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_border: hsla(46, 81%, calc(52% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(48, 100%, calc(35% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--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: hsla(45, 83%, calc(95% + var(--zd_light_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_primary_light_hover_bg: hsla(46, 81%, calc(86% + var(--zd_light_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_primary_light_border: hsla(46, 81%, calc(86% + var(--zd_light_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_secondary_bg: hsla(46, 81%, calc(52% + var(--zd_light_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_secondary_text: hsla(0, calc(0 * 1%), calc(0% + var(--zd_light_lighter_high_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_secondary_border: hsla(46, 81%, calc(67% + var(--zd_light_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_secondary_light_border: hsla(46, 81%, calc(81% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_text: hsla(46, 93%, calc(37% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(48, 100%, calc(25% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_border: hsla(46, 93%, calc(37% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(48, 100%, calc(25% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_bg: hsla(46, 81%, calc(86% + var(--zd_light_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_beta_border: hsla(46, 93%, calc(37% + var(--zd_light_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(60, 12%, calc(97% + var(--zd_light_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_10_border: hsla(60, 12%, calc(97% + var(--zd_light_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(60, 22%, calc(91% + var(--zd_light_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_15_border: hsla(60, 22%, calc(91% + var(--zd_light_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_20_bg: hsla(60, 9%, calc(93% + var(--zd_light_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_35_bg: hsla(45, 24%, calc(84% + var(--zd_light_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_35_text: hsla(45, 24%, calc(84% + var(--zd_light_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_35_border: hsla(45, 24%, calc(84% + var(--zd_light_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(45, 28%, calc(72% + var(--zd_light_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_40_text: hsla(45, 28%, calc(72% + var(--zd_light_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_40_border: hsla(45, 28%, calc(72% + var(--zd_light_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+}

package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css

@@ -0,0 +1,45 @@
+[data-mode='light'][data-theme='yellow'] {
+	/* stencil */
+	--stencil_dark_bg: rgba(255, 255, 255, 0.07);
+	--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 */
+	--dropbox_dark_bg: rgb(49,51,35);
+	
+	/* listitem */
+	--listitem_dark_bg: rgb(49,51,35);
+	--listitem_dark_text: rgb(208,208,212);
+	--listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+	--listitem_dark_active_bg: rgb(73,76,52);
+	--listitem_dark_tickicon: rgb(232,185,35);
+	
+	/* tag */
+	--tag_dark_text: rgb(208,208,212);
+	--tag_dark_bg: rgba(255, 255, 255, 0.07);
+	--tag_dark_hover_text: rgb(208,208,212);
+	--tag_dark_hover_bg: rgb(80,51,72);
+	--tag_dark_close_bg: rgb(134,70,84);
+	--tag_dark_close_text: rgb(222,53,53);
+	
+	/* multiselect */
+	--multiselect_dark_border: rgba(255, 255, 255, 0.2);
+	--multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+	--multiselect_darkmsg_text: rgb(208,208,212);
+	--multiselect_darkdelete_hover_text: rgb(255,255,255);
+	
+	/* avatar */
+	--avatar_white_border: rgba(255, 255, 255, 0.2);
+	--avatar_white_text: rgb(255,255,255);
+	
+	/* label */
+	--label_dark_text: rgb(208,208,212);
+	
+	/* textbox */
+	--textbox_light_text: rgb(255,255,255);
+	
+	/* dropdown */
+	--dropdown_darkheading_text: rgb(255,255,255);
+	
+	/* focusscope */
+	--a11y_focusScope_focus_border: rgb(232,185,35);
+}

package/assets/Appearance/pureDark/mode/{pureDarkMode.module.css → Component_PureDarkMode.module.css}

@@ -114,7 +114,7 @@
 	--zdt_tag_danger_hover_bg: hsla(317, 22%, calc(26% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_tag_primary_bg: var(--zdt_m_cta_primary_bg_default_inverse);
 	--zdt_tag_primary_hover_bg: var(--zdt_m_cta_primary_hover_bg_default_inverse);
-	--zdt_tag_primary_border: var(--zdt_cta_primary_light_border);
+	--zdt_tag_primary_border: var(--zdt_m_cta_primary_light_border_default_inverse_medium);
 	--zdt_tag_closeprimary_bg: var(--zdt_m_cta_primary_bg_default_inverse);
 	--zdt_tag_default_danger_bg: hsla(0, calc(0 * 1%), calc(18% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_tag_active_default_bg: var(--zdt_cta_primary_light_bg);
@@ -296,7 +296,7 @@
 	--zdt_datetime_invalid_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_datetime_invalid_hover_text: hsla(0, 100%, calc(71% + var(--zd_pureDark_default_inverse_lower_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_datetime_invaliddate_text: hsla(0, 72%, calc(54% + var(--zd_pureDark_default_inverse_lower_lValue)), calc( 0.3 + var(--zd_alpha_low)));
-	--zdt_datetime_selected_bg: var(--zdt_cta_primary_bg);
+	--zdt_datetime_selected_bg: var(--zdt_m_cta_primary_bg_darker_low);
 	--zdt_datetime_today_border: var(--zdt_cta_primary_border);
 	--zdt_datetime_today_text: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_lighter_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_datetime_text: hsla(220, 10%, calc(39% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
@@ -329,7 +329,7 @@
 	
 	/* tabs */
 	--zdt_tabs_alpha_bg: hsla(0, calc(0 * 1%), calc(13% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_tabs_alpha_border: var(--zdt_cta_grey_15_border);
+	--zdt_tabs_alpha_border: var(--zdt_m_cta_grey_15_border_default_inverse_medium);
 	--zdt_tabs_alpha_box_shadow: rgba(0, 0, 0, 0.3);
 	--zdt_tabs_delta_border: var(--zdt_cta_primary_border);
 	--zdt_tabs_highlight_border: hsla(210, 7%, calc(89% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));

package/assets/Appearance/pureDark/themes/blue/{bluePureDarkCTAModifyCategory.module.css → blue_CTA_PureDarkModifyCategory.module.css}

@@ -1,4 +1,4 @@
-[data-mode='pureDark'][data-theme='blue'], :global(.bluePureDarkTheme) [data-theme="blue"] {
+[data-mode='pureDark'][data-theme='blue'], :global(.zd-bluePureDarkTheme) [data-theme="blue"] {
 	--zdt_m_cta_primary_text_default: hsla(212, 100%, calc(64% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_m_cta_primary_text_default_low: hsla(212, 100%, calc(64% + var(--zd_pureDark_default_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_m_cta_primary_text_default_inverse: hsla(212, 100%, calc(64% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));

package/assets/Appearance/pureDark/themes/blue/{bluePureDarkCTATheme.module.css → blue_CTA_PureDarkTheme.module.css}

@@ -1,4 +1,5 @@
-[data-mode='pureDark'][data-theme='blue'], :global(.bluePureDarkTheme) [data-theme="blue"] {
+[data-mode='pureDark'][data-theme='blue'], :global(.zd-bluePureDarkTheme) [data-theme="blue"] {
+	/* CTA variables */
 	--zdt_cta_primary_text: hsla(212, 100%, calc(64% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_hover_text: hsla(212, 100%, calc(72% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_bg: hsla(212, 100%, calc(64% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
@@ -30,5 +31,5 @@
 	--zdt_cta_grey_35_border: hsla(0, calc(0 * 1%), calc(22% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_grey_40_bg: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_cta_grey_40_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)))
+	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css

@@ -0,0 +1,45 @@
+[data-mode='pureDark'][data-theme='blue'] {
+	/* stencil */
+	--stencil_dark_bg: rgb(33,33,33);
+	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	
+	/* dropbox */
+	--dropbox_dark_bg: rgb(33,33,33);
+	
+	/* listitem */
+	--listitem_dark_bg: rgb(33,33,33);
+	--listitem_dark_text: rgb(226,228,230);
+	--listitem_dark_effect_bg: rgb(43,43,43);
+	--listitem_dark_active_bg: rgb(59,77,109);
+	--listitem_dark_tickicon: rgb(71,157,255);
+	
+	/* tag */
+	--tag_dark_text: rgb(208,208,212);
+	--tag_dark_bg: rgb(38,38,38);
+	--tag_dark_hover_text: rgb(208,208,212);
+	--tag_dark_hover_bg: rgb(80,51,72);
+	--tag_dark_close_bg: rgb(134,70,84);
+	--tag_dark_close_text: rgb(222,53,53);
+	
+	/* multiselect */
+	--multiselect_dark_border: rgb(88,88,88);
+	--multiselect_darkmsg_bg: rgb(33,33,33);
+	--multiselect_darkmsg_text: rgb(208,208,212);
+	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	
+	/* avatar */
+	--avatar_white_border: rgb(153,153,153);
+	--avatar_white_text: rgb(255,255,255);
+	
+	/* label */
+	--label_dark_text: rgb(208,208,212);
+	
+	/* textbox */
+	--textbox_light_text: rgb(255,255,255);
+	
+	/* dropdown */
+	--dropdown_darkheading_text: rgb(153,153,153);
+	
+	/* focusscope */
+	--a11y_focusScope_focus_border: rgb(71,157,255);
+}

package/assets/Appearance/pureDark/themes/green/{greenPureDarkCTATheme.module.css → green_CTA_PureDarkTheme.module.css}

@@ -1,4 +1,5 @@
 [data-mode='pureDark'][data-theme='green'] {
+	/* CTA variables */
 	--zdt_cta_primary_text: hsla(133, 40%, calc(45% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_hover_text: hsla(133, 40%, calc(55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_bg: hsla(133, 40%, calc(45% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
@@ -30,5 +31,5 @@
 	--zdt_cta_grey_35_border: hsla(0, calc(0 * 1%), calc(22% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_grey_40_bg: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_cta_grey_40_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)))
+	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css

@@ -0,0 +1,45 @@
+[data-mode='pureDark'][data-theme='green'] {
+	/* stencil */
+	--stencil_dark_bg: rgb(33,33,33);
+	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	
+	/* dropbox */
+	--dropbox_dark_bg: rgb(33,33,33);
+	
+	/* listitem */
+	--listitem_dark_bg: rgb(33,33,33);
+	--listitem_dark_text: rgb(226,228,230);
+	--listitem_dark_effect_bg: rgb(43,43,43);
+	--listitem_dark_active_bg: rgb(59,77,109);
+	--listitem_dark_tickicon: rgb(69,161,89);
+	
+	/* tag */
+	--tag_dark_text: rgb(208,208,212);
+	--tag_dark_bg: rgb(38,38,38);
+	--tag_dark_hover_text: rgb(208,208,212);
+	--tag_dark_hover_bg: rgb(80,51,72);
+	--tag_dark_close_bg: rgb(134,70,84);
+	--tag_dark_close_text: rgb(222,53,53);
+	
+	/* multiselect */
+	--multiselect_dark_border: rgb(88,88,88);
+	--multiselect_darkmsg_bg: rgb(33,33,33);
+	--multiselect_darkmsg_text: rgb(208,208,212);
+	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	
+	/* avatar */
+	--avatar_white_border: rgb(153,153,153);
+	--avatar_white_text: rgb(255,255,255);
+	
+	/* label */
+	--label_dark_text: rgb(208,208,212);
+	
+	/* textbox */
+	--textbox_light_text: rgb(255,255,255);
+	
+	/* dropdown */
+	--dropdown_darkheading_text: rgb(153,153,153);
+	
+	/* focusscope */
+	--a11y_focusScope_focus_border: rgb(69,161,89);
+}

package/assets/Appearance/pureDark/themes/orange/{orangePureDarkCTATheme.module.css → orange_CTA_PureDarkTheme.module.css}

@@ -1,4 +1,5 @@
 [data-mode='pureDark'][data-theme='orange'] {
+	/* CTA variables */
 	--zdt_cta_primary_text: hsla(26, 100%, calc(56% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_hover_text: hsla(26, 100%, calc(70% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_bg: hsla(26, 100%, calc(56% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
@@ -30,5 +31,5 @@
 	--zdt_cta_grey_35_border: hsla(0, calc(0 * 1%), calc(22% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_grey_40_bg: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_cta_grey_40_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)))
+	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css

@@ -0,0 +1,45 @@
+[data-mode='pureDark'][data-theme='orange'] {
+	/* stencil */
+	--stencil_dark_bg: rgb(33,33,33);
+	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	
+	/* dropbox */
+	--dropbox_dark_bg: rgb(33,33,33);
+	
+	/* listitem */
+	--listitem_dark_bg: rgb(33,33,33);
+	--listitem_dark_text: rgb(226,228,230);
+	--listitem_dark_effect_bg: rgb(43,43,43);
+	--listitem_dark_active_bg: rgb(59,77,109);
+	--listitem_dark_tickicon: rgb(233,79,79);
+	
+	/* tag */
+	--tag_dark_text: rgb(208,208,212);
+	--tag_dark_bg: rgb(38,38,38);
+	--tag_dark_hover_text: rgb(208,208,212);
+	--tag_dark_hover_bg: rgb(80,51,72);
+	--tag_dark_close_bg: rgb(134,70,84);
+	--tag_dark_close_text: rgb(222,53,53);
+	
+	/* multiselect */
+	--multiselect_dark_border: rgb(88,88,88);
+	--multiselect_darkmsg_bg: rgb(33,33,33);
+	--multiselect_darkmsg_text: rgb(208,208,212);
+	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	
+	/* avatar */
+	--avatar_white_border: rgb(153,153,153);
+	--avatar_white_text: rgb(255,255,255);
+	
+	/* label */
+	--label_dark_text: rgb(208,208,212);
+	
+	/* textbox */
+	--textbox_light_text: rgb(255,255,255);
+	
+	/* dropdown */
+	--dropdown_darkheading_text: rgb(153,153,153);
+	
+	/* focusscope */
+	--a11y_focusScope_focus_border: rgb(255,128,31);
+}

package/assets/Appearance/pureDark/themes/red/{redPureDarkCTATheme.module.css → red_CTA_PureDarkTheme.module.css}

@@ -1,4 +1,5 @@
 [data-mode='pureDark'][data-theme='red'] {
+	/* CTA variables */
 	--zdt_cta_primary_text: hsla(0, 78%, calc(61% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_hover_text: hsla(0, 77%, calc(71% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_bg: hsla(0, 78%, calc(61% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
@@ -30,5 +31,5 @@
 	--zdt_cta_grey_35_border: hsla(0, calc(0 * 1%), calc(22% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_grey_40_bg: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_cta_grey_40_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)))
+	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css

@@ -0,0 +1,45 @@
+[data-mode='pureDark'][data-theme='red'] {
+	/* stencil */
+	--stencil_dark_bg: rgb(33,33,33);
+	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	
+	/* dropbox */
+	--dropbox_dark_bg: rgb(33,33,33);
+	
+	/* listitem */
+	--listitem_dark_bg: rgb(33,33,33);
+	--listitem_dark_text: rgb(226,228,230);
+	--listitem_dark_effect_bg: rgb(43,43,43);
+	--listitem_dark_active_bg: rgb(59,77,109);
+	--listitem_dark_tickicon: rgb(255,128,31);
+	
+	/* tag */
+	--tag_dark_text: rgb(208,208,212);
+	--tag_dark_bg: rgb(38,38,38);
+	--tag_dark_hover_text: rgb(208,208,212);
+	--tag_dark_hover_bg: rgb(80,51,72);
+	--tag_dark_close_bg: rgb(134,70,84);
+	--tag_dark_close_text: rgb(222,53,53);
+	
+	/* multiselect */
+	--multiselect_dark_border: rgb(88,88,88);
+	--multiselect_darkmsg_bg: rgb(33,33,33);
+	--multiselect_darkmsg_text: rgb(208,208,212);
+	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	
+	/* avatar */
+	--avatar_white_border: rgb(153,153,153);
+	--avatar_white_text: rgb(255,255,255);
+	
+	/* label */
+	--label_dark_text: rgb(208,208,212);
+	
+	/* textbox */
+	--textbox_light_text: rgb(255,255,255);
+	
+	/* dropdown */
+	--dropdown_darkheading_text: rgb(153,153,153);
+	
+	/* focusscope */
+	--a11y_focusScope_focus_border: rgb(233,79,79);
+}

package/assets/Appearance/pureDark/themes/yellow/{yellowPureDarkCTATheme.module.css → yellow_CTA_PureDarkTheme.module.css}

@@ -1,4 +1,5 @@
 [data-mode='pureDark'][data-theme='yellow'] {
+	/* CTA variables */
 	--zdt_cta_primary_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_hover_text: hsla(37, 66%, calc(65% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
@@ -30,5 +31,5 @@
 	--zdt_cta_grey_35_border: hsla(0, calc(0 * 1%), calc(22% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_grey_40_bg: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_cta_grey_40_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)))
+	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -0,0 +1,45 @@
+[data-mode='pureDark'][data-theme='yellow'] {
+	/* stencil */
+	--stencil_dark_bg: rgb(33,33,33);
+	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	
+	/* dropbox */
+	--dropbox_dark_bg: rgb(33,33,33);
+	
+	/* listitem */
+	--listitem_dark_bg: rgb(33,33,33);
+	--listitem_dark_text: rgb(226,228,230);
+	--listitem_dark_effect_bg: rgb(43,43,43);
+	--listitem_dark_active_bg: rgb(59,77,109);
+	--listitem_dark_tickicon: rgb(215,152,53);
+	
+	/* tag */
+	--tag_dark_text: rgb(208,208,212);
+	--tag_dark_bg: rgb(38,38,38);
+	--tag_dark_hover_text: rgb(208,208,212);
+	--tag_dark_hover_bg: rgb(80,51,72);
+	--tag_dark_close_bg: rgb(134,70,84);
+	--tag_dark_close_text: rgb(222,53,53);
+	
+	/* multiselect */
+	--multiselect_dark_border: rgb(88,88,88);
+	--multiselect_darkmsg_bg: rgb(33,33,33);
+	--multiselect_darkmsg_text: rgb(208,208,212);
+	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	
+	/* avatar */
+	--avatar_white_border: rgb(153,153,153);
+	--avatar_white_text: rgb(255,255,255);
+	
+	/* label */
+	--label_dark_text: rgb(208,208,212);
+	
+	/* textbox */
+	--textbox_light_text: rgb(255,255,255);
+	
+	/* dropdown */
+	--dropdown_darkheading_text: rgb(153,153,153);
+	
+	/* focusscope */
+	--a11y_focusScope_focus_border: rgb(215,152,53);
+}

package/assets/Contrast/lightContrastLightness.module.css

@@ -0,0 +1,39 @@
+[data-mode='light']:global:not(.zd-contrast) {
+   --zd_light_default_lValue: calc(0 * 1%);
+   --zd_light_default_low_lValue: calc(0 * 1%);
+   --zd_light_default_inverse_lValue: calc(0 * 1%);
+   --zd_light_default_inverse_low_lValue: calc(0 * 1%);
+   --zd_light_default_inverse_lower_lValue: calc(0 * 1%);
+   --zd_light_default_inverse_medium_lValue: calc(0 * 1%);
+   --zd_light_darker_lValue: calc(0 * 1%);
+   --zd_light_darker_low_lValue: calc(0 * 1%);
+   --zd_light_darker_lower_lValue: calc(0 * 1%);
+   --zd_light_darker_lowest_lValue: calc(0 * 1%);
+   --zd_light_lighter_lValue: calc(0 * 1%);
+   --zd_light_lighter_low_lValue: calc(0 * 1%);
+   --zd_light_lighter_lower_lValue: calc(0 * 1%);
+   --zd_light_lighter_medium_lValue: calc(0 * 1%);
+   --zd_light_lighter_high_lValue: calc(0 * 1%);
+   --zd_alpha_high: 0;
+   --zd_alpha_low: 0;
+}
+
+[data-mode='light']:global(.zd-contrast) {
+   --zd_light_default_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_light_default_low_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_light_default_inverse_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_light_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * -0.25%);
+   --zd_light_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * -0.10%);
+   --zd_light_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * -1.5%);
+   --zd_light_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_light_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
+   --zd_light_darker_lower_lValue: calc(var(--zd_contrastLevel) * -0.25%);
+   --zd_light_darker_lowest_lValue: calc(var(--zd_contrastLevel) * var(--zd_lightmode_grey_bg));
+   --zd_light_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_light_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
+   --zd_light_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
+   --zd_light_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
+   --zd_light_lighter_high_lValue: calc(var(--zd_contrastLevel) * 20%);
+   --zd_alpha_high: 1;
+   --zd_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
+}

package/es/AppContainer/AppContainer.module.css

@@ -1,18 +1,18 @@
-.container,
-.container *,
-.container ::after,
-.container ::before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-.container {
-  font-family: var(--zd_regular);
-}
-.tooltip {
-  height: 0;
-  font-size: 0;
-  /* contain:strict */
-}
+.container,
+.container *,
+.container ::after,
+.container ::before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+.container {
+  font-family: var(--zd_regular);
+}
+.tooltip {
+  height: 0;
+  font-size: 0;
+  /* contain:strict */
+}

package/es/Avatar/Avatar.js

@@ -4,19 +4,18 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { getInitial } from '../utils/getInitial';
 import AvatarSize from '../Provider/AvatarSize';
-import Typography from '../Typography/Typography';
 import style from './Avatar.module.css';
-/*
-1. need to change name into firstName lastName
-2. pattern support via context as well as props
-3. prop high priority to arrange firstName lastName
-4. team pass name as lastName and pass pattern via prop
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
 */
 
-/*
-eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
-'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
-"info","default"] }]
+/*
+eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
+'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
+"info","default"] }]
 */
 export default class Avatar extends React.Component {
   constructor(props) {
@@ -151,13 +150,10 @@ export default class Avatar extends React.Component {
       "data-id": dataId,
       onClick: onClick,
       "data-selector-id": dataSelectorId
-    }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement(Typography, {
+    }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
-      dataId: `${dataId}_AvatarInitial`,
-      customProps: {
-        'data-selector-id': `${dataSelectorId}_AvatarInitial`
-      },
-      tagName: "span"
+      "data-id": `${dataId}_AvatarInitial`,
+      "data-selector-id": `${dataSelectorId}_AvatarInitial`
     }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
       className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
       "data-id": `${dataId}_AvatarImg`,