@zohodesk/components 1.0.0-temp-217.6 → 1.0.0-temp-221.1

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

@@ -58,26 +58,22 @@
 	--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_darker_lower);
+	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_default);
 	--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_darker_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_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_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_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_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/mode/Component_v2_DarkMode.module.css

@@ -1,10 +1,4 @@
 [data-mode='dark'] {
-	/* switch */
-	--zdt_v2_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_bg: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_hover_bg: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_thumb_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_on_indication_label: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_off_indication_label: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	/* label */
+	--zdt_v2_label_mandatory_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,26 +58,22 @@
 	--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_darker_lower);
+	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_default);
 	--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_darker_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_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_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_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_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/mode/Component_v2_LightMode.module.css

@@ -1,10 +1,4 @@
 [data-mode='light'] {
-	/* switch */
-	--zdt_v2_switch_track_on_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_bg: hsla(213, 27.27%, calc(87.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_on_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_hover_bg: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_thumb_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_on_indication_label: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_off_indication_label: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	/* label */
+	--zdt_v2_label_mandatory_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,26 +58,22 @@
 	--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_darker_lower);
+	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_default);
 	--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_darker_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_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_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_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_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/mode/Component_v2_PureDarkMode.module.css

@@ -1,10 +1,4 @@
 [data-mode='pureDark'] {
-	/* switch */
-	--zdt_v2_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_bg: hsla(0, 0.00%, calc(20.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_track_off_hover_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v2_switch_thumb_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_on_indication_label: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v2_switch_off_indication_label: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	/* label */
+	--zdt_v2_label_mandatory_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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,9 +42,4 @@
 	
 	/* 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/Button/Button.js

@@ -10,6 +10,8 @@ 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/css/Button.module.css

@@ -39,6 +39,7 @@
 }
 
 .native:disabled {
+  pointer-events: none;
   --button_cursor: not-allowed;
   --button_opacity: 0.4;
 }
@@ -569,43 +570,6 @@
   }
 }
 
-.loader{
+.loader {
   color: var(--dot_mirror)
-}
-
-[dir=ltr] .strike {
-  background-image: repeating-linear-gradient(120deg, var(--button_strike_color), var(--button_strike_color) 1px, var(--button_bg_color) 0px, var(--button_bg_color) 8px);
-}
-
-[dir=rtl] .strike {
-  background-image: repeating-linear-gradient(-120deg, var(--button_strike_color), var(--button_strike_color) 1px, var(--button_bg_color) 0px, var(--button_bg_color) 8px);
-}
-.primaryStrike {
-  --button_strike_color: var(--zdt_button_primary_strike);
-}
-.primaryfilledStrike {
-  --button_strike_color: var(--zdt_button_primaryFilled_strike);
-  --button_border_color: var(--zdt_button_primaryfill_bg);
-}
-.dangerStrike {
-  --button_strike_color: var(--zdt_button_danger_strike);
-}
-.dangerfilledStrike {
-  --button_strike_color: var(--zdt_button_dangerFilled_strike);
-  --button_border_color: var(--zdt_button_dangerfill_bg);
-}
-.secondaryStrike {
-  --button_strike_color: var(--zdt_button_secondary_border);
-}
-.secondaryfilledStrike {
-  --button_strike_color: var(--zdt_button_secondaryFilled_strike);
-  --button_border_color: var(--zdt_button_secondaryfill_bg);
-}
-.tertiaryfilledStrike {
-  --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
-  --button_border_color: var(--zdt_button_tertiaryfill_bg);
-}
-.successfilledStrike {
-  --button_strike_color: var(--zdt_button_successFilled_strike);
-  --button_border_color: var(--zdt_button_successfill_bg);
 }

package/es/Button/css/cssJSLogic.js

@@ -1,6 +1,4 @@
-import { useContext } from 'react';
 import { compileClassNames } from '@zohodesk/utils';
-import LibraryContext from "../../Provider/LibraryContextInit";
 export default function cssJSLogic(_ref) {
   let {
     props,
@@ -14,21 +12,15 @@ export default function cssJSLogic(_ref) {
     size,
     children,
     palette,
-    status,
-    disabled
+    status
   } = props;
   let {
     customButton = '',
     customStatus = '',
     customStatusSize = ''
   } = customClass;
-  const {
-    shouldStrikeThroughDisabledButton
-  } = useContext(LibraryContext);
-  const strikeExcludedPalettes = ['plainprimary', 'plainsecondary'];
   let paletteLower = palette.toLowerCase();
   let statusLower = status.toLowerCase();
-  let canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
   let buttonClass = compileClassNames({
     [customButton]: !!customButton,
     [style.bold]: isBold,
@@ -38,7 +30,6 @@ export default function cssJSLogic(_ref) {
     [style[size.toLowerCase()]]: needAppearance && !children,
     [style[`${size}Btn`]]: needAppearance && children,
     [style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
-    [`${style[`${paletteLower}Strike`]} ${style.strike}`]: disabled && canStrikeThrough && shouldStrikeThroughDisabledButton,
     [style.loader]: !!needAppearance && statusLower !== 'none'
   });
   let loaderParentClass = compileClassNames({

package/es/Provider/LibraryContext.js

@@ -9,15 +9,13 @@ const LibraryContextProvider = _ref => {
     direction,
     coloredTagVariant,
     hasTagColorInheritedToText,
-    shouldStrikeThroughDisabledButton,
     children
   } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
     direction,
     coloredTagVariant,
-    hasTagColorInheritedToText,
-    shouldStrikeThroughDisabledButton
+    hasTagColorInheritedToText
   });
 
   function setGlobalContext(key, data) {

package/es/components-v2/Label/Label.js

@@ -0,0 +1,86 @@
+import React, { useContext, useEffect, useState } from 'react'; // props
+
+import defaultProps from "./props/defaultProps";
+import { propTypes } from "./props/propTypes"; // methods
+
+import cssJSLogic from "./css/cssJSLogic";
+import { mergeStyle } from '@zohodesk/utils'; // components
+
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Typography from "../../Typography/Typography"; // css
+
+import defaultStyle from "./css/Label_v2.module.css";
+import LibraryContext from "../../Provider/LibraryContextInit";
+
+const Label = props => {
+  const {
+    htmlFor,
+    onClick,
+    text,
+    customId,
+    testId,
+    customStyle,
+    tagAttributes,
+    a11yAttributes,
+    customProps,
+    isMandatory
+  } = props;
+  const {
+    labelMandatoryType,
+    shouldHighlightMandatoryLabel
+  } = useContext(LibraryContext);
+  const {
+    container: tagAttributes_container,
+    label: tagAttributes_label
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    container: customProps_container,
+    label: customProps_label
+  } = customProps;
+  const style = mergeStyle(defaultStyle, customStyle);
+  const {
+    labelClass,
+    requiredClass
+  } = cssJSLogic({
+    props: { ...props,
+      labelMandatoryType,
+      shouldHighlightMandatoryLabel,
+      isMandatory
+    },
+    style
+  });
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $tagAttributes_container: {
+      'data-selector-id': customId,
+      ...tagAttributes_container
+    },
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    ...customProps_container
+  }, /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $tagAttributes_text: {
+      htmlFor: htmlFor,
+      onClick: onClick,
+      ...tagAttributes_label
+    },
+    $a11yAttributes_text: a11yAttributes_label,
+    ...customProps_label
+  }, text), isMandatory && labelMandatoryType === 'text' ? /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "span",
+    $ui_className: requiredClass
+  }, "(Required)") : '');
+};
+
+export default Label;
+Label.defaultProps = defaultProps;
+Label.propTypes = propTypes;

package/es/components-v2/Label/css/Label_v2.module.css

@@ -0,0 +1,41 @@
+.label {
+    font-size: var(--zd_font_size14) ;
+    line-height: 1.286;
+    color: var(--zdt_v2_label_text);
+    cursor: pointer;
+}
+
+.dotted {
+    composes: dotted from '../../../common/common.module.css';
+}
+
+.mandatory {
+    color: var(--zdt_v2_label_mandatory_text);
+}
+
+.asterisk:after {
+    content: "*";
+    color: var(--zdt_v2_label_mandatory_text);
+}
+
+[dir=ltr] .asterisk:after {
+    padding-left: var(--zd_size2) ;
+}
+
+[dir=rtl] .asterisk:after {
+    padding-right: var(--zd_size2) ;
+}
+
+.requiredTxt {
+    color: var(--zdt_v2_label_mandatory_text);
+    font-size: var(--zd_font_size14) ;
+    line-height: 1.286;
+}
+
+[dir=ltr] .requiredTxt {
+    margin-left: var(--zd_size5) ;
+}
+
+[dir=rtl] .requiredTxt {
+    margin-right: var(--zd_size5) ;
+}

package/es/components-v2/Label/css/cssJSLogic.js

@@ -0,0 +1,27 @@
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  const {
+    clipped,
+    labelMandatoryType,
+    shouldHighlightMandatoryLabel,
+    isMandatory
+  } = props; // const shouldHighlightMandatory = localStorage?.getItem('mandatoryAppearance') === 'true';
+
+  let labelClass = compileClassNames({
+    [style.label]: true,
+    [style.dotted]: clipped,
+    [style.asterisk]: isMandatory && labelMandatoryType === 'asterisk',
+    [style.mandatory]: isMandatory && shouldHighlightMandatoryLabel
+  });
+  let requiredClass = compileClassNames({
+    [style.requiredTxt]: true
+  });
+  return {
+    labelClass,
+    requiredClass
+  };
+}

package/es/components-v2/Label/props/defaultProps.js

@@ -0,0 +1,8 @@
+export default {
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customStyle: {},
+  shouldHighlightMandatory: false,
+  clipped: true
+};

package/es/components-v2/Label/props/propTypes.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+export default {
+  htmlFor: PropTypes.string,
+  text: PropTypes.string,
+  onClick: PropTypes.func,
+  tabIndex: PropTypes.number,
+  a11yAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  customProps: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  customStyle: PropTypes.object,
+  mandatoryType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightMandatory: PropTypes.bool,
+  clipped: PropTypes.bool,
+  isMandatory: PropTypes.bool
+};

package/lib/Button/Button.js

@@ -26,6 +26,8 @@ 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'] }] */
 function Button(props) {
   var text = props.text,
       disabled = props.disabled,