@zohodesk/components 1.0.0-temp-219.2 → 1.0.0-temp-226

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -58,22 +58,26 @@
 	--zdt_button_primaryfill_bg: var(--zdt_cta_primary_bg);
 	--zdt_button_primaryfill_border: var(--dot_mirror);
 	--zdt_button_primaryfill_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_default);
+	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_darker_lower);
 	--zdt_button_dangerfill_bg: hsla(0, 100.00%, calc(70.98% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_dangerfill_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_dangerfill_hover_bg: hsla(1, 63.86%, calc(48.82% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_border: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_button_successfill_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_bg: hsla(217, 13.73%, calc(70.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_hover_bg: hsla(217, 7.76%, calc(54.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_successfill_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryfill_bg: hsla(217, 13.73%, calc(70.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryfill_hover_bg: hsla(217, 7.76%, calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
+	--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_danger_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -58,22 +58,26 @@
 	--zdt_button_primaryfill_bg: var(--zdt_cta_primary_bg);
 	--zdt_button_primaryfill_border: var(--dot_mirror);
 	--zdt_button_primaryfill_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_default);
+	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_darker_lower);
 	--zdt_button_dangerfill_bg: hsla(0, 71.91%, calc(53.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_dangerfill_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_dangerfill_hover_bg: hsla(1, 75.38%, calc(38.24% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_border: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_button_successfill_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_successfill_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_border: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_button_successfill_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_bg: hsla(220, 10.45%, calc(39.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_hover_bg: hsla(218, 9.76%, calc(51.76% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_successfill_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryfill_bg: hsla(220, 10.45%, calc(39.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryfill_hover_bg: hsla(218, 9.76%, calc(51.76% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
+	--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_danger_strike: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(10,115,235);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(231, 22.22%, calc(82.35% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(38,169,66);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(135, 7.41%, calc(78.82% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(229,119,23);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(27, 10.68%, calc(79.80% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(222,53,53);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(343, 4.76%, calc(71.18% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(232,185,35);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(45, 28.17%, calc(72.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -58,22 +58,26 @@
 	--zdt_button_primaryfill_bg: var(--zdt_cta_primary_bg);
 	--zdt_button_primaryfill_border: var(--dot_mirror);
 	--zdt_button_primaryfill_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_default);
+	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_darker_lower);
 	--zdt_button_dangerfill_bg: hsla(0, 100.00%, calc(70.98% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_dangerfill_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_dangerfill_hover_bg: hsla(1, 63.86%, calc(48.82% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_border: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_button_successfill_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_bg: hsla(0, 0.00%, calc(60.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_hover_bg: hsla(217, 7.76%, calc(54.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_successfill_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryfill_bg: hsla(0, 0.00%, calc(60.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryfill_hover_bg: hsla(217, 7.76%, calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
+	--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_danger_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	
+	/* button */
+	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

package/es/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Accordion_defaultProps } from "./props/defaultProps";
-import { Accordion_propTypes } from "./props/propTypes";
+import { Accordion_defaultProps } from './props/defaultProps';
+import { Accordion_propTypes } from './props/propTypes';
 export default class Accordion extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/AccordionItem.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from "./props/defaultProps";
-import { AccordionItem_propTypes } from "./props/propTypes";
-import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
-import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
+import { AccordionItem_defaultProps } from './props/defaultProps';
+import { AccordionItem_propTypes } from './props/propTypes';
+import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
+import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 export default class AccordionItem extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/__tests__/Accordion.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Accordion from "../Accordion";
+import Accordion from '../Accordion';
 describe('Accordion', () => {
   test('rendering the defult props', () => {
     const {

package/es/Accordion/__tests__/AccordionItem.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AccordionItem from "../AccordionItem";
+import AccordionItem from '../AccordionItem';
 describe('AccordionItem', () => {
   test('rendering the defult props', () => {
     const mockOnClick = jest.fn();

package/es/Accordion/index.js

@@ -1,2 +1,2 @@
-export { default as Accordion } from "./Accordion";
-export { default as AccordionItem } from "./AccordionItem";
+export { default as Accordion } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';

package/es/Animation/Animation.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
-import { animationStyle } from "./utils";
+import { animationStyle } from './utils';
 export default class Animation extends React.Component {
   constructor(props) {
     super(props);

package/es/Animation/__tests__/Animation.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Animation from "../Animation";
+import Animation from '../Animation';
 describe('Animation', () => {
   test('rendering the defult props', () => {
     const {

package/es/Animation/utils.js

@@ -1,4 +1,4 @@
-import style from "../common/transition.module.css";
+import style from '../common/transition.module.css';
 export const animationStyle = {
   zoomIn: {
     enter: style.zoomInEnter,

package/es/AppContainer/AppContainer.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Tooltip from "../Tooltip/Tooltip";
-import "../common/basic.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Tooltip from '../Tooltip/Tooltip';
+import '../common/basic.module.css';
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
@@ -11,10 +11,10 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../common/a11y.module.css";
-import "../common/boxShadow.module.css";
-import style from "./AppContainer.module.css";
-import { getLibraryConfig, setLibraryConfig } from "../Provider/Config";
+import '../common/a11y.module.css';
+import '../common/boxShadow.module.css';
+import style from './AppContainer.module.css';
+import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);

package/es/AppContainer/__tests__/AppContainer.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AppContainer from "../AppContainer.js";
+import AppContainer from '../AppContainer.js';
 describe('AppContainer', () => {
   test('rendering the defult props', () => {
     const {

package/es/Avatar/Avatar.js

@@ -1,9 +1,9 @@
 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";
+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

package/es/Avatar/__tests__/Avatar.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Avatar from "../Avatar.js";
+import Avatar from '../Avatar.js';
 describe('Avatar', () => {
   test('rendering the defult props', () => {
     const {

package/es/AvatarTeam/AvatarTeam.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import Avatar from "../Avatar/Avatar";
-import style from "./AvatarTeam.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import Avatar from '../Avatar/Avatar';
+import style from './AvatarTeam.module.css';
 /* once avatar support firstname lastname and pattern
 pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
 

package/es/AvatarTeam/__tests__/AvatarTeam.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AvatarTeam from "../AvatarTeam.js";
+import AvatarTeam from '../AvatarTeam.js';
 describe('AvatarTeam', () => {
   test('rendering the defult props', () => {
     const {

package/es/AvatarTeam/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as AvatarProps } from "../../Avatar/props/propTypes";
+import { propTypes as AvatarProps } from '../../Avatar/props/propTypes';
 export const propTypes = {
   dataId: PropTypes.string,
   dataSelectorId: PropTypes.string,

package/es/Button/Button.js

@@ -1,17 +1,15 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import style from "./css/Button.module.css";
+import style from './css/Button.module.css';
 /*
 Button text and children props?
 use children for both cases
 toLowerCase check needed?
 */
 
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
-
 export default function Button(props) {
   let {
     text,

package/es/Button/__tests__/Button.spec.js

@@ -1,6 +1,11 @@
 import React from 'react';
-import Button from "../Button";
-import { render } from "@testing-library/react";
+import Button from '../Button';
+import { render, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+afterEach(() => {
+  cleanup();
+});
 describe('Button component', () => {
   test('Should be render with the basic set of default props', () => {
     const {
@@ -106,4 +111,132 @@ describe('Button component', () => {
   //     const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
   //     expect(asFragment()).toMatchSnapshot();
   // });
+});
+describe('Button - Unit Testing', () => {
+  test('Should render with text prop', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      text: "Click Me"
+    }));
+    expect(getByText('Click Me')).toBeInTheDocument();
+  });
+  test('Should render with children prop', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Button, null, "Click Me"));
+    expect(getByText('Click Me')).toBeInTheDocument();
+  });
+  test('Should apply custom styles from customStyle prop', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customStyle: {
+        bold: 'customBoldClass'
+      }
+    })); // expect(getByRole('button').getAttribute('class')).toContain('customBoldClass');
+
+    expect(getByRole('button')).toHaveClass('customBoldClass');
+  });
+  test('Should apply custom classes from customClass prop', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customClass: {
+        customButton: 'customButtonClass'
+      }
+    }));
+    expect(getByRole('button')).toHaveClass('customButtonClass');
+  });
+  test('Should be disabled when disabled prop is true', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true
+    }));
+    expect(getByRole('button')).toBeDisabled();
+  });
+  test('Should expose element with getRef prop', () => {
+    const getRef = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      getRef: getRef
+    }));
+    expect(getRef).toHaveBeenCalledWith(getByRole('button'));
+  });
+  test('Should trigger onClick function', () => {
+    const onClick = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      onClick: onClick
+    })); // fireEvent.click(getByRole('button'));
+
+    userEvent.click(getByRole('button'));
+    expect(onClick).toHaveBeenCalled();
+  });
+  test('Should not trigger onClick when disabled', () => {
+    const onClick = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true,
+      onClick: onClick
+    }));
+    userEvent.click(getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  test('Should render with correct data-id attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      dataId: "testButton"
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-id', 'testButton');
+  });
+  test('Should render with correct data-selector-id attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      dataSelectorId: "testSelector"
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-selector-id', 'testSelector');
+  });
+  test('Should render with correct title attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      title: "Test Title"
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-title', 'Test Title');
+  });
+  test('Should render with correct id attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      id: "buttonElement"
+    }));
+    expect(getByRole('button')).toHaveAttribute('id', 'buttonElement');
+  });
+  test('Should apply a11y props correctly', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      a11y: {
+        'aria-label': 'test'
+      }
+    }));
+    expect(getByRole('button')).toHaveAttribute('aria-label', 'test');
+  });
+  test('Should apply customProps correctly', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customProps: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-custom-attr', 'true');
+  });
 });