@zohodesk/components 1.1.1 → 1.2.0-temp-195

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

@@ -1,35 +1,36 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* CTA variables */
-	--zdt_cta_primary_text: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_border: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_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(35, 15.00%, calc(15.69% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zd_pureDark_lighter_high_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zd_pureDark_default_inverse_medium_lValue)), calc( 0.15 + var(--zd_alpha_low)));
-	--zdt_cta_secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_beta_border: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_light_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_bg: hsla(38, 30.19%, calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_beta_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Contrast/darkContrastLightness.module.css

@@ -1,39 +1,39 @@
 [data-mode='dark']:global:not(.zd-contrast) {
-   --zd_dark_default_lValue: calc(0 * 1%);
-   --zd_dark_default_low_lValue: calc(0 * 1%);
-   --zd_dark_default_inverse_lValue: calc(0 * 1%);
-   --zd_dark_default_inverse_low_lValue: calc(0 * 1%);
-   --zd_dark_default_inverse_lower_lValue: calc(0 * 1%);
-   --zd_dark_default_inverse_medium_lValue: calc(0 * 1%);
-   --zd_dark_darker_lValue: calc(0 * 1%);
-   --zd_dark_darker_low_lValue: calc(0 * 1%);
-   --zd_dark_darker_lower_lValue: calc(0 * 1%);
-   --zd_dark_darker_lowest_lValue: calc(0 * 1%);
-   --zd_dark_lighter_lValue: calc(0 * 1%);
-   --zd_dark_lighter_low_lValue: calc(0 * 1%);
-   --zd_dark_lighter_lower_lValue: calc(0 * 1%);
-   --zd_dark_lighter_medium_lValue: calc(0 * 1%);
-   --zd_dark_lighter_high_lValue: calc(0 * 1%);
-   --zd_alpha_high: 0;
-   --zd_alpha_low: 0;
+   --zdc_default: calc(0 * 1%);
+   --zdc_default_low: calc(0 * 1%);
+   --zdc_default_inverse: calc(0 * 1%);
+   --zdc_default_inverse_low: calc(0 * 1%);
+   --zdc_default_inverse_lower: calc(0 * 1%);
+   --zdc_default_inverse_medium: calc(0 * 1%);
+   --zdc_darker: calc(0 * 1%);
+   --zdc_darker_low: calc(0 * 1%);
+   --zdc_darker_lower: calc(0 * 1%);
+   --zdc_darker_lowest: calc(0 * 1%);
+   --zdc_lighter: calc(0 * 1%);
+   --zdc_lighter_low: calc(0 * 1%);
+   --zdc_lighter_lower: calc(0 * 1%);
+   --zdc_lighter_medium: calc(0 * 1%);
+   --zdc_lighter_high: calc(0 * 1%);
+   --zdc_alpha_high: 0;
+   --zdc_alpha_low: 0;
 }
 
 [data-mode='dark']:global(.zd-contrast) {
-   --zd_dark_default_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_dark_default_low_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_dark_default_inverse_lValue: calc(var(--zd_contrastLevel) * 1%);
-   --zd_dark_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * 0.25%);
-   --zd_dark_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * 0.10%);
-   --zd_dark_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
-   --zd_dark_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_dark_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
-   --zd_dark_darker_lower_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_dark_darker_lowest_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_dark_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
-   --zd_dark_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
-   --zd_dark_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
-   --zd_dark_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
-   --zd_dark_lighter_high_lValue: calc(var(--zd_contrastLevel) * 1%);
-   --zd_alpha_high: 1;
-   --zd_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
+   --zdc_default: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_default_low: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_default_inverse: calc(var(--zd_contrastLevel) * 1%);
+   --zdc_default_inverse_low: calc(var(--zd_contrastLevel) * 0.25%);
+   --zdc_default_inverse_lower: calc(var(--zd_contrastLevel) * 0.10%);
+   --zdc_default_inverse_medium: calc(var(--zd_contrastLevel) * 1.5%);
+   --zdc_darker: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_darker_low: calc(var(--zd_contrastLevel) * -0.50%);
+   --zdc_darker_lower: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_darker_lowest: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_lighter: calc(var(--zd_contrastLevel) * 1%);
+   --zdc_lighter_low: calc(var(--zd_contrastLevel) * 0.50%);
+   --zdc_lighter_lower: calc(var(--zd_contrastLevel) * 0.25%);
+   --zdc_lighter_medium: calc(var(--zd_contrastLevel) * 1.5%);
+   --zdc_lighter_high: calc(var(--zd_contrastLevel) * 1%);
+   --zdc_alpha_high: 1;
+   --zdc_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
 }

package/assets/Contrast/lightContrastLightness.module.css

@@ -1,39 +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;
+   --zdc_default: calc(0 * 1%);
+   --zdc_default_low: calc(0 * 1%);
+   --zdc_default_inverse: calc(0 * 1%);
+   --zdc_default_inverse_low: calc(0 * 1%);
+   --zdc_default_inverse_lower: calc(0 * 1%);
+   --zdc_default_inverse_medium: calc(0 * 1%);
+   --zdc_darker: calc(0 * 1%);
+   --zdc_darker_low: calc(0 * 1%);
+   --zdc_darker_lower: calc(0 * 1%);
+   --zdc_darker_lowest: calc(0 * 1%);
+   --zdc_lighter: calc(0 * 1%);
+   --zdc_lighter_low: calc(0 * 1%);
+   --zdc_lighter_lower: calc(0 * 1%);
+   --zdc_lighter_medium: calc(0 * 1%);
+   --zdc_lighter_high: calc(0 * 1%);
+   --zdc_alpha_high: 0;
+   --zdc_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);
+   --zdc_default: calc(var(--zd_contrastLevel) * 1%);
+   --zdc_default_low: calc(var(--zd_contrastLevel) * 1%);
+   --zdc_default_inverse: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_default_inverse_low: calc(var(--zd_contrastLevel) * -0.25%);
+   --zdc_default_inverse_lower: calc(var(--zd_contrastLevel) * -0.10%);
+   --zdc_default_inverse_medium: calc(var(--zd_contrastLevel) * -1.5%);
+   --zdc_darker: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_darker_low: calc(var(--zd_contrastLevel) * -0.50%);
+   --zdc_darker_lower: calc(var(--zd_contrastLevel) * -0.25%);
+   --zdc_darker_lowest: calc(var(--zd_contrastLevel) * var(--zd_lightmode_grey_bg));
+   --zdc_lighter: calc(var(--zd_contrastLevel) * 1%);
+   --zdc_lighter_low: calc(var(--zd_contrastLevel) * 0.50%);
+   --zdc_lighter_lower: calc(var(--zd_contrastLevel) * 0.25%);
+   --zdc_lighter_medium: calc(var(--zd_contrastLevel) * 1.5%);
+   --zdc_lighter_high: calc(var(--zd_contrastLevel) * 20%);
+   --zdc_alpha_high: 1;
+   --zdc_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
 }

package/assets/Contrast/pureDarkContrastLightness.module.css

@@ -1,39 +1,39 @@
 [data-mode='pureDark']:global:not(.zd-contrast) {
-   --zd_pureDark_default_lValue: calc(0 * 1%);
-   --zd_pureDark_default_low_lValue: calc(0 * 1%);
-   --zd_pureDark_default_inverse_lValue: calc(0 * 1%);
-   --zd_pureDark_default_inverse_low_lValue: calc(0 * 1%);
-   --zd_pureDark_default_inverse_lower_lValue: calc(0 * 1%);
-   --zd_pureDark_default_inverse_medium_lValue: calc(0 * 1%);
-   --zd_pureDark_darker_lValue: calc(0 * 1%);
-   --zd_pureDark_darker_low_lValue: calc(0 * 1%);
-   --zd_pureDark_darker_lower_lValue: calc(0 * 1%);
-   --zd_pureDark_darker_lowest_lValue: calc(0 * 1%);
-   --zd_pureDark_lighter_lValue: calc(0 * 1%);
-   --zd_pureDark_lighter_low_lValue: calc(0 * 1%);
-   --zd_pureDark_lighter_lower_lValue: calc(0 * 1%);
-   --zd_pureDark_lighter_medium_lValue: calc(0 * 1%);
-   --zd_pureDark_lighter_high_lValue: calc(0 * 1%);
-   --zd_alpha_high: 0;
-   --zd_alpha_low: 0;
+   --zdc_default: calc(0 * 1%);
+   --zdc_default_low: calc(0 * 1%);
+   --zdc_default_inverse: calc(0 * 1%);
+   --zdc_default_inverse_low: calc(0 * 1%);
+   --zdc_default_inverse_lower: calc(0 * 1%);
+   --zdc_default_inverse_medium: calc(0 * 1%);
+   --zdc_darker: calc(0 * 1%);
+   --zdc_darker_low: calc(0 * 1%);
+   --zdc_darker_lower: calc(0 * 1%);
+   --zdc_darker_lowest: calc(0 * 1%);
+   --zdc_lighter: calc(0 * 1%);
+   --zdc_lighter_low: calc(0 * 1%);
+   --zdc_lighter_lower: calc(0 * 1%);
+   --zdc_lighter_medium: calc(0 * 1%);
+   --zdc_lighter_high: calc(0 * 1%);
+   --zdc_alpha_high: 0;
+   --zdc_alpha_low: 0;
 }
 
 [data-mode='pureDark']:global(.zd-contrast) {
-   --zd_pureDark_default_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_pureDark_default_low_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_pureDark_default_inverse_lValue: calc(var(--zd_contrastLevel) * 1%);
-   --zd_pureDark_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * 0.25%);
-   --zd_pureDark_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * 0.10%);
-   --zd_pureDark_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
-   --zd_pureDark_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_pureDark_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
-   --zd_pureDark_darker_lower_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_pureDark_darker_lowest_lValue: calc(var(--zd_contrastLevel) * -1%);
-   --zd_pureDark_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
-   --zd_pureDark_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
-   --zd_pureDark_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
-   --zd_pureDark_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
-   --zd_pureDark_lighter_high_lValue: calc(var(--zd_contrastLevel) * 1%);
-   --zd_alpha_high: 1;
-   --zd_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
+   --zdc_default: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_default_low: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_default_inverse: calc(var(--zd_contrastLevel) * 1%);
+   --zdc_default_inverse_low: calc(var(--zd_contrastLevel) * 0.25%);
+   --zdc_default_inverse_lower: calc(var(--zd_contrastLevel) * 0.10%);
+   --zdc_default_inverse_medium: calc(var(--zd_contrastLevel) * 1.5%);
+   --zdc_darker: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_darker_low: calc(var(--zd_contrastLevel) * -0.50%);
+   --zdc_darker_lower: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_darker_lowest: calc(var(--zd_contrastLevel) * -1%);
+   --zdc_lighter: calc(var(--zd_contrastLevel) * 1%);
+   --zdc_lighter_low: calc(var(--zd_contrastLevel) * 0.50%);
+   --zdc_lighter_lower: calc(var(--zd_contrastLevel) * 0.25%);
+   --zdc_lighter_medium: calc(var(--zd_contrastLevel) * 1.5%);
+   --zdc_lighter_high: calc(var(--zd_contrastLevel) * 1%);
+   --zdc_alpha_high: 1;
+   --zdc_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
 }

package/es/Animation/Animation.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
-import style from '../common/transition.module.css';
+import { animationStyle } from './utils';
 export default class Animation extends React.Component {
   constructor(props) {
     super(props);
@@ -20,91 +20,9 @@ export default class Animation extends React.Component {
       onExit = () => {},
       delayClassName = null
     } = this.props;
-    const animation = {
-      zoomIn: {
-        enter: style.zoomInEnter,
-        enterActive: style.zoomInEnterActive,
-        enterDone: style.zoomInEnterActive,
-        exit: style.zoomInLeave,
-        exitActive: style.zoomInLeaveActive,
-        exitDone: style.zoomInLeaveActive,
-        appear: style.zoomInEnter,
-        appearActive: style.zoomInEnterActive
-      },
-      scaleIn: {
-        enter: style.scaleInEnter,
-        enterActive: style.scaleInEnterActive,
-        enterDone: style.scaleInEnterActive,
-        exit: style.scaleInLeave,
-        exitActive: style.scaleInLeaveActive,
-        exitDone: style.scaleInLeaveActive,
-        appear: style.scaleInEnter,
-        appearActive: style.scaleInEnterActive
-      },
-      fadeIn: {
-        enter: style.fadeInEnter,
-        enterActive: style.fadeInEnterActive,
-        enterDone: style.fadeInEnterActive,
-        exit: style.fadeInLeave,
-        exitActive: style.fadeInLeaveActive,
-        exitDone: style.fadeInLeaveActive,
-        appear: style.fadeInEnter,
-        appearActive: style.fadeInEnterActive
-      },
-      slideLeft: {
-        enter: style.slideLeftEnter,
-        enterActive: style.slideLeftEnterActive,
-        enterDone: style.slideLeftEnterActive,
-        exit: style.slideLeftLeave,
-        exitActive: style.slideLeftLeaveActive,
-        exitDone: style.slideLeftLeaveActive,
-        appear: style.slideLeftEnter,
-        appearActive: style.slideLeftEnterActive
-      },
-      slideDown: {
-        enter: style.slideDownEnter,
-        enterActive: style.slideDownEnterActive,
-        enterDone: style.slideDownEnterActive,
-        exit: style.slideDownLeave,
-        exitActive: style.slideDownLeaveActive,
-        exitDone: style.slideDownLeaveActive,
-        appear: style.slideDownEnter,
-        appearActive: style.slideDownEnterActive
-      },
-      skewIn: {
-        enter: style.skewInEnter,
-        enterActive: style.skewInEnterActive,
-        enterDone: style.skewInEnterActive,
-        exit: style.skewInLeave,
-        exitActive: style.skewInLeaveActive,
-        exitDone: style.skewInLeaveActive,
-        appear: style.skewInEnter,
-        appearActive: style.skewInEnterActive
-      },
-      none: {
-        enter: style.noneEnter,
-        enterActive: style.noneEnterActive,
-        enterDone: style.noneEnterActive,
-        exit: style.noneLeave,
-        exitActive: style.noneLeaveActive,
-        exitDone: style.noneLeaveActive,
-        appear: style.noneEnter,
-        appearActive: style.noneEnterActive
-      },
-      default: {
-        enter: style.defaultEnter,
-        enterActive: style.defaultEnterActive,
-        enterDone: style.defaultEnterActive,
-        exit: style.defaultLeave,
-        exitActive: style.defaultLeaveActive,
-        exitDone: style.defaultLeaveActive,
-        appear: style.defaultEnter,
-        appearActive: style.defaultEnterActive
-      }
-    };
-    let newClassNames = delayClassName ? Object.assign({}, animation[name], {
-      exit: `${delayClassName} ${animation[name].exit}`
-    }) : animation[name];
+    let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
+      exit: `${delayClassName} ${animationStyle[name].exit}`
+    }) : animationStyle[name];
     return /*#__PURE__*/React.createElement(CSSTransition, {
       classNames: newClassNames && newClassNames,
       in: isActive,

package/es/Animation/utils.js

@@ -0,0 +1,83 @@
+import style from '../common/transition.module.css';
+export const animationStyle = {
+  zoomIn: {
+    enter: style.zoomInEnter,
+    enterActive: style.zoomInEnterActive,
+    enterDone: style.zoomInEnterActive,
+    exit: style.zoomInLeave,
+    exitActive: style.zoomInLeaveActive,
+    exitDone: style.zoomInLeaveActive,
+    appear: style.zoomInEnter,
+    appearActive: style.zoomInEnterActive
+  },
+  scaleIn: {
+    enter: style.scaleInEnter,
+    enterActive: style.scaleInEnterActive,
+    enterDone: style.scaleInEnterActive,
+    exit: style.scaleInLeave,
+    exitActive: style.scaleInLeaveActive,
+    exitDone: style.scaleInLeaveActive,
+    appear: style.scaleInEnter,
+    appearActive: style.scaleInEnterActive
+  },
+  fadeIn: {
+    enter: style.fadeInEnter,
+    enterActive: style.fadeInEnterActive,
+    enterDone: style.fadeInEnterActive,
+    exit: style.fadeInLeave,
+    exitActive: style.fadeInLeaveActive,
+    exitDone: style.fadeInLeaveActive,
+    appear: style.fadeInEnter,
+    appearActive: style.fadeInEnterActive
+  },
+  slideLeft: {
+    enter: style.slideLeftEnter,
+    enterActive: style.slideLeftEnterActive,
+    enterDone: style.slideLeftEnterActive,
+    exit: style.slideLeftLeave,
+    exitActive: style.slideLeftLeaveActive,
+    exitDone: style.slideLeftLeaveActive,
+    appear: style.slideLeftEnter,
+    appearActive: style.slideLeftEnterActive
+  },
+  slideDown: {
+    enter: style.slideDownEnter,
+    enterActive: style.slideDownEnterActive,
+    enterDone: style.slideDownEnterActive,
+    exit: style.slideDownLeave,
+    exitActive: style.slideDownLeaveActive,
+    exitDone: style.slideDownLeaveActive,
+    appear: style.slideDownEnter,
+    appearActive: style.slideDownEnterActive
+  },
+  skewIn: {
+    enter: style.skewInEnter,
+    enterActive: style.skewInEnterActive,
+    enterDone: style.skewInEnterActive,
+    exit: style.skewInLeave,
+    exitActive: style.skewInLeaveActive,
+    exitDone: style.skewInLeaveActive,
+    appear: style.skewInEnter,
+    appearActive: style.skewInEnterActive
+  },
+  none: {
+    enter: style.noneEnter,
+    enterActive: style.noneEnterActive,
+    enterDone: style.noneEnterActive,
+    exit: style.noneLeave,
+    exitActive: style.noneLeaveActive,
+    exitDone: style.noneLeaveActive,
+    appear: style.noneEnter,
+    appearActive: style.noneEnterActive
+  },
+  default: {
+    enter: style.defaultEnter,
+    enterActive: style.defaultEnterActive,
+    enterDone: style.defaultEnterActive,
+    exit: style.defaultLeave,
+    exitActive: style.defaultLeaveActive,
+    exitDone: style.defaultLeaveActive,
+    appear: style.defaultEnter,
+    appearActive: style.defaultEnterActive
+  }
+};

package/es/AppContainer/AppContainer.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -85,6 +83,9 @@ export default class AppContainer extends React.Component {
       this.containerElement.removeEventListener('mouseover', this.handleOver, false);
       this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.unObserveElement();
+      setLibraryConfig({
+        getTooltipContainer: () => null
+      });
     }
   }
 
@@ -105,23 +106,26 @@ export default class AppContainer extends React.Component {
       TooltipProps = {},
       ExtraProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
       className: `${style.container} ${className}`,
       dataId: dataId,
       dataSelectorId: dataSelectorId,
       tagName: tagName,
-      eleRef: this.getContainerRef
-    }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
+      eleRef: this.getContainerRef,
+      ...ContainerProps,
+      ...ExtraProps
+    }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
+    }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", { ...ExtraProps,
       className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
       "data-id": `${dataId}_tooltip`,
       "data-test-id": `${dataId}_tooltip`,
       "data-selector-id": `${dataSelectorId}_tooltip`
-    }), /*#__PURE__*/React.createElement(Tooltip, _extends({
+    }, /*#__PURE__*/React.createElement(Tooltip, {
       ref: this.setTooltipRef,
-      customClass: tooltipClass
-    }, TooltipProps))) : null);
+      customClass: tooltipClass,
+      ...TooltipProps
+    })) : null);
   }
 
 }

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

@@ -1,22 +1,20 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { getInitial } from '../utils/getInitial';
 import AvatarSize from '../Provider/AvatarSize';
 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 {
@@ -156,14 +154,16 @@ export default class Avatar extends React.Component {
     let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
     let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
     borderStyle = showAlternateAvatar ? '' : borderStyle;
-    return /*#__PURE__*/React.createElement("div", _extends({
+    return /*#__PURE__*/React.createElement("div", {
       className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
       "data-title": needTitle ? title ? title : name : null,
       "data-id": dataId,
       "data-test-id": dataId,
       onClick: onClick,
-      "data-selector-id": dataSelectorId
-    }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
+      "data-selector-id": dataSelectorId,
+      tabIndex: onClick ? 0 : null,
+      ...AvatarProps
+    }, showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
       "data-id": `${dataId}_AvatarInitial`,
       "data-test-id": `${dataId}_AvatarInitial`,