@zohodesk/components 1.6.24 → 1.6.25

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

@@ -1,57 +1,53 @@
-[data-mode='pureDark'][data-theme='red']{
+[data-mode='pureDark'][data-theme='red'] {
 	/* stencil */
-	--zdt_stencil_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_stencil_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
 	
 	/* dropbox */
-	--zdt_dropbox_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_dropbox_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
 	
 	/* listitem */
-	--zdt_listitem_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
-	--zdt_listitem_dark_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
-	--zdt_listitem_dark_effect_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 16.86%, 1);
-	--zdt_listitem_dark_active_bg:hsla(218, calc(var(--zd-saturation, 1) * 29.76%), 32.94%, 1);
-	--zdt_listitem_dark_tickicon:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), 56.08%, 1);
+	--zdt_listitem_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
+	--zdt_listitem_dark_effect_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 16.86%, 1);
+	--zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation, 1) * 29.76%), 32.94%, 1);
+	--zdt_listitem_dark_tickicon: hsla(26, calc(var(--zd-saturation, 1) * 100.00%), 56.08%, 1);
 	
 	/* tag */
-	--zdt_tag_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_tag_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 14.90%, 1);
-	--zdt_tag_dark_hover_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_tag_dark_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
-	--zdt_tag_dark_close_bg:hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
-	--zdt_tag_dark_close_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
+	--zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 14.90%, 1);
+	--zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
+	--zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
+	--zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
-	--zdt_multiselect_darkmsg_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
-	--zdt_multiselect_darkmsg_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_multiselect_darkdelete_hover_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
+	--zdt_multiselect_dark_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
+	--zdt_multiselect_darkmsg_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
 	
 	/* avatar */
-	--zdt_avatar_white_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
-	--zdt_avatar_white_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
+	--zdt_avatar_white_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
+	--zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* label */
-	--zdt_label_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_label_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
 	
 	/* textbox */
-	--zdt_textbox_light_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
+	--zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
+	--zdt_dropdown_darkheading_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
 	
 	/* focusscope */
-	--zdt_a11y_focusScope_focus_border:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), 61.18%, 1);
+	--zdt_a11y_focusScope_focus_border: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), 61.18%, 1);
 	
 	/* button */
-	--zdt_button_primary_strike:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
-	--zdt_button_primaryFilled_strike:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
-	--zdt_button_secondaryFilled_strike:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	--zdt_button_primary_strike: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
 	
 	/* buttonloading */
-}[dir=ltr] [data-mode='pureDark'][data-theme='red']{
-	--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
-	--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%);
-}[dir=rtl] [data-mode='pureDark'][data-theme='red']{
-	--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to right, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
-	--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(-90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(-180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(-360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%);
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: var(--zd-gradient-saturation, linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%);
 }

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

@@ -1,14 +1,14 @@
-[data-mode='pureDark'][data-theme='red']{
-	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default_inverse:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_primary_hover_bg_default_inverse:hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(284, 10.48%, calc(20.59% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default_inverse_low:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default:hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_hover_bg_default:hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+[data-mode='pureDark'][data-theme='red'] {
+	--zdtm_cta_grey_10_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 13.25%), calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse: hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower: hsla(284, calc(var(--zd-saturation, 1) * 10.48%), calc(20.59% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default: hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

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

@@ -1,57 +1,53 @@
-[data-mode='pureDark'][data-theme='yellow']{
+[data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
-	--zdt_stencil_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_stencil_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
 	
 	/* dropbox */
-	--zdt_dropbox_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_dropbox_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
 	
 	/* listitem */
-	--zdt_listitem_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
-	--zdt_listitem_dark_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
-	--zdt_listitem_dark_effect_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 16.86%, 1);
-	--zdt_listitem_dark_active_bg:hsla(218, calc(var(--zd-saturation, 1) * 29.76%), 32.94%, 1);
-	--zdt_listitem_dark_tickicon:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
+	--zdt_listitem_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
+	--zdt_listitem_dark_effect_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 16.86%, 1);
+	--zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation, 1) * 29.76%), 32.94%, 1);
+	--zdt_listitem_dark_tickicon: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
 	
 	/* tag */
-	--zdt_tag_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_tag_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 14.90%, 1);
-	--zdt_tag_dark_hover_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_tag_dark_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
-	--zdt_tag_dark_close_bg:hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
-	--zdt_tag_dark_close_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
+	--zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 14.90%, 1);
+	--zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
+	--zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
+	--zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
-	--zdt_multiselect_darkmsg_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
-	--zdt_multiselect_darkmsg_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
-	--zdt_multiselect_darkdelete_hover_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
+	--zdt_multiselect_dark_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 34.51%, 1);
+	--zdt_multiselect_darkmsg_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 12.94%, 1);
+	--zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), 89.41%, 1);
 	
 	/* avatar */
-	--zdt_avatar_white_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
-	--zdt_avatar_white_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
+	--zdt_avatar_white_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
+	--zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* label */
-	--zdt_label_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
+	--zdt_label_dark_text: hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
 	
 	/* textbox */
-	--zdt_textbox_light_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
+	--zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
+	--zdt_dropdown_darkheading_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 60.00%, 1);
 	
 	/* focusscope */
-	--zdt_a11y_focusScope_focus_border:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
+	--zdt_a11y_focusScope_focus_border: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
 	
 	/* button */
-	--zdt_button_primary_strike:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
-	--zdt_button_primaryFilled_strike:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
-	--zdt_button_secondaryFilled_strike:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	--zdt_button_primary_strike: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
 	
 	/* buttonloading */
-}[dir=ltr] [data-mode='pureDark'][data-theme='yellow']{
-	--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
-	--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%);
-}[dir=rtl] [data-mode='pureDark'][data-theme='yellow']{
-	--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to right, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
-	--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(-90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(-180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(-360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%);
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: var(--zd-gradient-saturation, linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%);
 }

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

@@ -1,14 +1,14 @@
-[data-mode='pureDark'][data-theme='yellow']{
-	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default_inverse:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_primary_hover_bg_default_inverse:hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(220, 2.75%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default_inverse_low:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_bg_default:hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdtm_cta_primary_hover_bg_default:hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+[data-mode='pureDark'][data-theme='yellow'] {
+	--zdtm_cta_grey_10_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low: hsla(35, calc(var(--zd-saturation, 1) * 15.00%), calc(15.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower: hsla(220, calc(var(--zd-saturation, 1) * 2.75%), calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 }

package/es/v1/Button/Button.js

@@ -13,7 +13,7 @@ import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { ICON_PLACEMENT, LOADER_PLACEMENT, STATUS, TYPOGRAPHY_SIZE_MAP, VARIANT } from "./constants";
-import Loader from "../shared/Loader/Loader";
+import Spinner from "../shared/Spinner/Spinner";
 import SuccessTick from "../shared/SuccessTick/SuccessTick";
 import cssJSLogic from "./css/cssJSLogic";
 
@@ -103,7 +103,7 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
       $ui_justifyContent: "center",
       $ui_className: loaderClassName,
       testId: testId ? `${testId}_loader` : undefined
-    }, /*#__PURE__*/React.createElement(Loader, null));
+    }, /*#__PURE__*/React.createElement(Spinner, null));
   };
 
   const _renderSuccess = () => {

package/es/v1/shared/{Loader/Loader.js → Spinner/Spinner.js}

@@ -2,9 +2,9 @@ import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
 import { cn } from "@dot-system/css-utility";
-import style from "./Loader_v1.module.css";
+import style from "./Spinner_v1.module.css";
 
-const Loader = props => {
+const Spinner = props => {
   const {
     customClass
   } = props;
@@ -29,6 +29,6 @@ const Loader = props => {
   }));
 };
 
-Loader.propTypes = propTypes;
-Loader.defaultProps = defaultProps;
-export default Loader;
+Spinner.propTypes = propTypes;
+Spinner.defaultProps = defaultProps;
+export default Spinner;

package/es/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js}

@@ -1,17 +1,17 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Loader from "../Loader";
-describe('Loader', () => {
+import Spinner from "../Spinner";
+describe('Spinner', () => {
   test('renders default snapshot', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Loader, null));
+    } = render( /*#__PURE__*/React.createElement(Spinner, null));
     expect(asFragment()).toMatchSnapshot();
   });
   test('renders with customClass', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Loader, {
+    } = render( /*#__PURE__*/React.createElement(Spinner, {
       customClass: {
         wrapper: 'my-custom-class'
       }

package/{lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → es/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Loader renders default snapshot 1`] = `
+exports[`Spinner renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
@@ -24,7 +24,7 @@ exports[`Loader renders default snapshot 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Loader renders with customClass 1`] = `
+exports[`Spinner renders with customClass 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"

package/lib/v1/Button/Button.js

@@ -29,7 +29,7 @@ var _constants = require("@zohodesk/dotkit/es/utils/constants");
 
 var _constants2 = require("./constants");
 
-var _Loader = _interopRequireDefault(require("../shared/Loader/Loader"));
+var _Spinner = _interopRequireDefault(require("../shared/Spinner/Spinner"));
 
 var _SuccessTick = _interopRequireDefault(require("../shared/SuccessTick/SuccessTick"));
 
@@ -137,7 +137,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
       $ui_justifyContent: "center",
       $ui_className: loaderClassName,
       testId: testId ? "".concat(testId, "_loader") : undefined
-    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));
+    }, /*#__PURE__*/_react["default"].createElement(_Spinner["default"], null));
   };
 
   var _renderSuccess = function _renderSuccess() {

package/lib/v1/shared/{Loader/Loader.js → Spinner/Spinner.js}

@@ -13,33 +13,33 @@ var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
 var _cssUtility = require("@dot-system/css-utility");
 
-var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
+var _Spinner_v1Module = _interopRequireDefault(require("./Spinner_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var Loader = function Loader(props) {
+var Spinner = function Spinner(props) {
   var customClass = props.customClass;
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: (0, _cssUtility.cn)("".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper)),
+    className: (0, _cssUtility.cn)("".concat(_Spinner_v1Module["default"].spinner, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
-    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerTrack),
+    className: (0, _cssUtility.cn)(_Spinner_v1Module["default"].spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/_react["default"].createElement("circle", {
-    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerHead),
+    className: (0, _cssUtility.cn)(_Spinner_v1Module["default"].spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"
   }));
 };
 
-Loader.propTypes = _propTypes["default"];
-Loader.defaultProps = _defaultProps["default"];
-var _default = Loader;
+Spinner.propTypes = _propTypes["default"];
+Spinner.defaultProps = _defaultProps["default"];
+var _default = Spinner;
 exports["default"] = _default;

package/lib/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js}

@@ -4,19 +4,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Loader = _interopRequireDefault(require("../Loader"));
+var _Spinner = _interopRequireDefault(require("../Spinner"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Loader', function () {
+describe('Spinner', function () {
   test('renders default snapshot', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)),
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('renders with customClass', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
       customClass: {
         wrapper: 'my-custom-class'
       }

package/{es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → lib/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Loader renders default snapshot 1`] = `
+exports[`Spinner renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
@@ -24,7 +24,7 @@ exports[`Loader renders default snapshot 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Loader renders with customClass 1`] = `
+exports[`Spinner renders with customClass 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.24",
+  "version": "1.6.25",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -23,8 +23,8 @@
     "dubCheck": "npx z-node-plugins dub:check node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es ../dot/src ../internal/desk-components/src",
     "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components",
     "common_package_build": "cd ../common && npm run build && cd ../components",
-    "build:lib": "cbt build:lib src,assets lib,assets",
-    "build:es": "cbt build:es src,assets es,assets",
+    "build:lib": "cbt build:lib src lib",
+    "build:es": "cbt build:es src es",
     "build:es:watch": "cbt build:es src es",
     "build": "npm run theme:validate && npm run build:lib && npm run build:es && npm run cssVariableConvert ",
     "build:local": "npm run build",
@@ -73,7 +73,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@dot-system/css-audit-tool": "1.0.1",
-    "@zohodesk-private/color-variable-preprocessor": "1.3.3",
+    "@zohodesk-private/color-variable-preprocessor": "1.3.4",
     "@zohodesk-private/css-variable-migrator": "1.0.11",
     "@zohodesk-private/node-plugins": "1.1.15",
     "@zohodesk-private/react-prop-validator": "1.2.3",
@@ -81,9 +81,9 @@
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/icons": "1.3.14",
     "@zohodesk/layout": "3.2.1",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/svg": "1.3.12",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
@@ -105,9 +105,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/icons": "1.3.14",
     "@zohodesk/variables": "1.3.2",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/svg": "1.3.12",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",