@zohodesk/dot 1.0.0-temp-187.22 → 1.0.0-temp-187.24

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

@@ -1,26 +1,26 @@
 [data-mode='pureDark'][data-theme='blue'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(221, 100.00%, calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(221, calc(var(--zd-saturation, 1) * 100.00%), calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
-	--zdt_onboarding_primary_button_shadow: rgba(10, 115, 235, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(220, calc(var(--zd-saturation, 1) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(220, calc(var(--zd-saturation, 1) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_button_shadow: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), 48.04%,  0.25);
+	--zdt_onboarding_gradient_bg: hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
-	--zdt_loader_bg: rgb(71,157,255);
+	--zdt_loader_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), 63.92%, 1);
 }

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

@@ -1,26 +1,26 @@
 [data-mode='pureDark'][data-theme='green'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
-	--zdt_onboarding_primary_button_shadow: rgba(39, 170, 67, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_button_shadow: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), 40.98%,  0.25);
+	--zdt_onboarding_gradient_bg: hsla(133, calc(var(--zd-saturation, 1) * 10.84%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
-	--zdt_loader_bg: rgb(69,161,89);
+	--zdt_loader_bg: hsla(133, calc(var(--zd-saturation, 1) * 40.00%), 45.10%, 1);
 }

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

@@ -1,26 +1,26 @@
 [data-mode='pureDark'][data-theme='orange'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
-	--zdt_onboarding_primary_button_shadow: rgba(229, 119, 23, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_button_shadow: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), 49.41%,  0.25);
+	--zdt_onboarding_gradient_bg: hsla(26, calc(var(--zd-saturation, 1) * 19.51%), calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
-	--zdt_loader_bg: rgb(255,128,31);
+	--zdt_loader_bg: hsla(26, calc(var(--zd-saturation, 1) * 100.00%), 56.08%, 1);
 }

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

@@ -1,26 +1,26 @@
 [data-mode='pureDark'][data-theme='red'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
-	--zdt_onboarding_primary_button_shadow: rgba(219, 33, 33, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_button_shadow: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), 49.41%,  0.25);
+	--zdt_onboarding_gradient_bg: hsla(0, calc(var(--zd-saturation, 1) * 13.25%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
-	--zdt_loader_bg: rgb(233,79,79);
+	--zdt_loader_bg: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), 61.18%, 1);
 }

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

@@ -1,26 +1,26 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_commonEmptyState_dark_link: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_commonEmptyState_dark_link_hover: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* onboarding */
-	--zdt_onboarding_primary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_onboarding_secondary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
-	--zdt_onboarding_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
-	--zdt_onboarding_primary_button_shadow: rgba(218, 160, 11, 0.25);
-	--zdt_onboarding_gradient_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_gradient_border: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
+	--zdt_onboarding_secondary_gradient_border: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
+	--zdt_onboarding_gradient_border: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
+	--zdt_onboarding_primary_button_shadow: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), 44.90%,  0.25);
+	--zdt_onboarding_gradient_bg: hsla(35, calc(var(--zd-saturation, 1) * 15.00%), calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
 	
 	/* loader */
-	--zdt_loader_bg: rgb(215,152,53);
+	--zdt_loader_bg: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
 }

package/cbt.config.js

@@ -0,0 +1,41 @@
+
+const path = require('path');
+
+exports.config = {
+  preProcess: {
+    enable: true,
+    runner: './preprocess/index.js'
+  },
+  css: {
+    plugins: {
+      rtl: {
+        enable: true,
+        patterns: [
+          '**/src/**/*.css',
+          '!**/node_modules/**',
+          '**/assets/**/*.css'
+        ]
+      },
+      cssVariableReplacement: {
+        enable: true,
+        configFile:
+          './node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json',
+        patterns: [
+          "**/src/**",
+          "!**/node_modules/**"
+        ]
+      }
+    },
+     customPlugins: [
+      {
+        plugin: (options) =>
+          require('postcss-discard-comments')({
+            remove: (c) => { return c.includes('rtl:') }
+          }), 
+        patterns: ['**/assets/**/*.css'],
+        enable: true
+      }
+    ]
+  }
+ 
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-187.22",
+  "version": "1.0.0-temp-187.24",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -19,16 +19,11 @@
   "scripts": {
     "clean": "react-cli clean lib es coverage assets && mkdir assets",
     "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/components/es node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es node_modules/@zohodesk/svg/es",
-    "build:lib": "react-cli build:component:cmjs",
-    "build:es": "react-cli build:library:es",
+    "build:lib": "cbt build:lib src,assets lib,assets",
+    "build:es": "cbt build:es src,assets es,assets",
     "build": "npm run theme:validate && npm run build:lib && npm run build:es",
-    "build:local": " npm run build && npm run rtl && npm run cssVariableConvert ",
-    "build:watch": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
-    "rtl:watch": "react-cli rtl ./src ./es -w",
-    "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
-    "prepare": "react-cli clean assets &&  npm run init && npm run css:build ",
-    "init": "npm run clean && npm run build:variables",
-    "build:variables": "react-cli clean ./assets && node ./preprocess/index",
+    "build:watch": "npm run build:es --module:mode=dev -- -w",
+    "prepare": "npm run clean && npm run css:build",
     "lint": "react-cli lint",
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
@@ -38,15 +33,13 @@
     "snap-update": "npm run test-clean && npm run test -- -u",
     "sstest": "react-cli sstest",
     "common_package_build": "cd ../common && npm run build && cd ../dot",
-    "docs": "npm run css:review && review:props && react-cli docs",
-    "prepublishOnly": "node prePublish.js && npm run css:review  && npm run review:props",
+    "prepublishOnly": "node prePublish.js",
     "postpublish": "node postPublish.js",
     "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json",
     "download": "npm run downloadOnly  && cd ../ && npm run download",
     "downloadOnly": "react-cli clean ./node_modules ./package-lock.json && npm install --legacy-peer-deps",
     "expublish": "npm publish --tag experimental-version",
     "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
-    "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
     "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
     "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
     "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
@@ -60,10 +53,11 @@
     "css:layer_wrap_lib": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./lib ./assets css_layer_config.json --rewrite=src=lib  --rewrite=assets=assets --skip-existing-layer",
     "css:layer_generate_order": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/generate_layer_order.js  css_layer_config.json ./src/dot_layer.module.css",
     "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js  css_layer_config.json ./src/ ./assets",
-    "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build && npm run rtl && npm run cssVariableConvert  ",
+    "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build",
     "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets"
   },
   "devDependencies": {
+    "postcss-discard-comments": "^7.0.5",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
@@ -75,23 +69,24 @@
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/components": "../components",
     "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/icons": "1.1.7",
+    "@zohodesk/icons": "1.2.1",
     "@zohodesk/layout": "^3.1.0",
-    "@zohodesk/svg": "1.3.1",
+    "@zohodesk/svg": "1.3.2",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
     "@zohodesk/dotkit": "1.0.7",
-    "@zohodesk/react-cli": "1.1.27"
+    "@zohodesk/react-cli": "1.1.27",
+    "@zohodesk/client_build_tool": "0.0.20"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/components": "1.6.1",
-    "@zohodesk/icons": "1.1.7",
-    "@zohodesk/svg": "1.3.1",
+    "@zohodesk/icons": "1.2.1",
+    "@zohodesk/svg": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.6",

package/es/ActionButton/ActionButton.js

@@ -1,166 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import Popup from '@zohodesk/components/es/Popup/Popup';
-import { Icon } from '@zohodesk/icons';
-import Button from '@zohodesk/components/es/Button/Button';
-import { Container, Box } from '@zohodesk/components/es/Layout';
-import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
-import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
-import style from "./ActionButton.module.css";
-import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
-export class ActionButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleTogglePopup = this.handleTogglePopup.bind(this);
-    this.handlePopupOpen = this.handlePopupOpen.bind(this);
-  }
-
-  handlePopupOpen(e) {
-    let {
-      openPopupOnly,
-      defaultPosition
-    } = this.props;
-    openPopupOnly(e, defaultPosition);
-  }
-
-  handleTogglePopup(e) {
-    let {
-      togglePopup,
-      defaultPosition
-    } = this.props;
-    togglePopup(e, defaultPosition);
-  }
-
-  render() {
-    let {
-      isLoading,
-      onClick,
-      size,
-      dataId,
-      dataSelectorId,
-      isArrow,
-      text,
-      subText,
-      arrowBoxSize,
-      palette,
-      onHover,
-      position,
-      className,
-      iconName,
-      iconSize,
-      dataTitle,
-      isDisabled,
-      isPopupOpen,
-      removeClose,
-      children,
-      dropBoxClass,
-      isBoxPaddingNeed,
-      getContainerRef,
-      getTargetRef,
-      removeChildrenTooltip,
-      innerClassName,
-      popupGroup,
-      isAbsolutePositioningNeeded,
-      isRestrictScroll,
-      positionsOffset,
-      targetOffset
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      isCover: false,
-      className: ` ${style.container} ${style[palette + 'Box']} ${style[size]} ${className} ${isDisabled ? CssProvider('isDisabled') : ''} ${!onClick ? style.wholeDiv : ''} `,
-      onClick: onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined,
-      onMouseEnter: !onClick ? onHover && this.handleTogglePopup : undefined,
-      onMouseLeave: !onClick ? onHover && this.handleTogglePopup : undefined,
-      eleRef: getTargetRef,
-      dataSelectorId: dataSelectorId,
-      dataId: `${dataId}_actionButton`
-    }, isLoading ? /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Button, {
-      status: "loading",
-      palette: palette,
-      size: "medium",
-      customClass: {
-        customButton: style.btn
-      },
-      text: text
-    })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      onClick: onClick,
-      dataId: dataId,
-      className: `${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
-      "data-title": dataTitle,
-      tagName: "button",
-      tabIndex: "0"
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.contentwrapper
-    }, /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      align: "vertical"
-    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
-      name: iconName,
-      size: iconSize,
-      iconClass: `${style.iconClr} ${text ? style.iconMrgn : ''}`
-    }) : null, text ? /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
-      className: style.txt,
-      "data-title": removeChildrenTooltip ? null : text
-    }, text) : null)), subText ? /*#__PURE__*/React.createElement(Box, {
-      "data-title": removeChildrenTooltip ? null : subText,
-      className: style.subTxt
-    }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
-      onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
-      onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
-      onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
-      className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
-      dataId: `${dataId}_arrowButton`,
-      tabIndex: "0",
-      tagName: "button",
-      dataSelectorId: `${dataSelectorId}_arrowButton`
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-down",
-      size: "6",
-      iconClass: style.arrow
-    })), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-      size: "small",
-      isActive: isPopupOpen,
-      boxPosition: position,
-      isAnimate: true,
-      isArrow: isArrow,
-      customClass: {
-        customDropBoxWrap: dropBoxClass
-      },
-      isBoxPaddingNeed: isBoxPaddingNeed,
-      getRef: getContainerRef,
-      popupGroup: popupGroup,
-      needFocusScope: true,
-      onClose: this.handleTogglePopup,
-      dataId: `${dataId}_dropbox`,
-      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-      isRestrictScroll: isRestrictScroll,
-      positionsOffset: positionsOffset,
-      targetOffset: targetOffset
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      shrink: true,
-      scroll: "vertical"
-    }, children)) : null) : null));
-  }
-
-}
-ActionButton.defaultProps = defaultProps;
-ActionButton.propTypes = propTypes;
-const ActionButtonComponent = Popup(ActionButton);
-ActionButtonComponent.defaultProps = ActionButton.defaultProps;
-ActionButtonComponent.propTypes = ActionButton.propTypes; // ActionButton.docs = {
-//   componentGroup: 'Atom'
-// };
-
-export default ActionButtonComponent;