@zohodesk/components 1.2.13 → 1.2.15

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

@@ -1,35 +1,35 @@
 [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_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/Avatar/__tests__/Avatar.spec.js

@@ -0,0 +1,181 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Avatar from '../Avatar.js';
+describe('Avatar', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['primary', 'secondary', 'info', 'default'];
+  test.each(palette)('rendering the palette of- %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const shape = ['circle', 'square'];
+  test.each(shape)('rendering the shape of- %s', shape => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      shape: shape
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'];
+  test.each(size)('rendering the size of- %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const textPalette = ['white', 'black'];
+  test.each(textPalette)('rendering the size of- %s', textPalette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      textPalette: textPalette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering src', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      name: "AvatarName"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering Name in 2 Word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      name: "Gowtham Kathirvel"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      title: "AvatarNameTitile"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      needTitle: true,
+      title: "AvatarNameTitile"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering initial', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      initial: "AvatarTeam"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering NeedBorder false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering BorderOnActive true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      borderOnActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering borderOnHover true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      borderOnHover: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customClass true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      customClass: "customClassAvatar"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering alternateSrc', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      showAlternateAvatar: true,
+      alternateSrc: "https://www.w3schools.com/css/img_5terre.jpg"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering showAlternateAvatar is enabled border get disabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      showAlternateAvatar: true,
+      alternateSrc: "https://www.w3schools.com/css/img_5terre.jpg"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isAnimate is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      isAnimate: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needInnerBorder is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      isAnimate: false,
+      needInnerBorder: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering showDefaultBorder is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      isInvalidImageList: false,
+      needDefaultBorder: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Avatar, {
+      customProps: {
+        AvatarProps: {
+          'data-avatar': true
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});