@zohodesk/components 1.0.0-temp-255 → 1.0.0-temp-256

package/README.md

@@ -2,6 +2,26 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.6.18
+
+- buttonComponentVersion temproary support given in LibraryContext , will remove once app is migrated
+
+# 1.6.17
+
+- Updated `@zohodesk-private/color-variable-preprocessor@1.3.3` package version - CTA category overridden variables are now generated only for the necessary CTA variables using the `buildOverriddenCTACategories` function.
+
+# 1.6.16
+
+- **DateWidget**
+  - Fixed i18n key handling issue to ensure localized labels/messages are resolved consistently.
+  
+
+# 1.6.15
+
+- **Select**
+  - Added `closePopup` callback support to `getFooter` prop, allowing footer actions to close the popup programmatically.
+
+
 # 1.6.14
 
 - **v1/Button**
@@ -34,7 +54,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
   - Prefixless prop fallbacks are supported
   - `tagName` config in **highlightText** has been renamed to `as`. (fallback supported)
 
-
 # 1.6.7
 
 - PX to variable conversion was not applied due to the CBT migration. The issue has now been fixed. 
@@ -60,7 +79,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
     ### 🔒 Compatibility
     - Requires `@zohodesk/dotkit` version `1.0.8` or above.
 
-
 # 1.6.3
 
 - Added customProps support to **AdvancedMultiSelect**.
@@ -154,7 +172,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 - Font Family Migrated to Font-weight across all css  (Impacted)
 
-
 # 1.4.23
 
 - **Typography**

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

@@ -111,7 +111,7 @@
 	--zdt_tag_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tag_default_bg:var(--zdt_cta_grey_20_bg);
 	--zdt_tag_default_border:var(--dot_mirror);
-	--zdt_tag_default_hover_bg:var(--zdtm_cta_grey_35_bg_darker_lowest);
+	--zdt_tag_default_hover_bg:var(--zdt_cta_grey_35_bg);
 	--zdt_tag_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tag_secondary_bg:hsla(217, calc(var(--zd-saturation, 1) * 12.16%), calc(29.02% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tag_secondary_hover_bg:hsla(216, calc(var(--zd-saturation, 1) * 9.93%), calc(29.61% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -122,7 +122,7 @@
 	--zdt_tag_danger_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
 	--zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
-	--zdt_tag_primary_border:var(--zdtm_cta_primary_light_border_default_inverse_medium);
+	--zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
 	--zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
 	--zdt_tag_default_danger_bg:var(--zdtm_cta_grey_15_bg_default_inverse_low);
 	--zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
@@ -311,7 +311,7 @@
 	--zdt_datetime_invalid_text:hsla(216, calc(var(--zd-saturation, 1) * 22.98%), calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_datetime_selected_bg:var(--zdtm_cta_primary_bg_darker_low);
+	--zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
 	--zdt_datetime_today_border:var(--zdt_cta_primary_border);
 	--zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -345,7 +345,7 @@
 	
 	/* tabs */
 	--zdt_tabs_alpha_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_tabs_alpha_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
+	--zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
 	--zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.3);
 	--zdt_tabs_delta_border:var(--zdt_cta_primary_border);
 	--zdt_tabs_highlight_border:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

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

@@ -0,0 +1,14 @@
+[data-mode='dark'][data-theme='blue'], :global(.zd-blueDarkTheme) [data-theme="blue"]{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(213, 27.27%, calc(23.73% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(213, 85.45%, calc(43.14% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(215, 28.16%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(212, 100.00%, calc(63.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default:hsla(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='dark'][data-theme='green']{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(191, 21.65%, calc(19.02% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(170, 22.94%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default:hsla(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='dark'][data-theme='orange']{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(252, 4.85%, calc(20.20% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(340, 5.56%, calc(21.18% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(26, 100.00%, calc(56.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default:hsla(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='dark'][data-theme='red']{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(258, 12.62%, calc(20.20% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + 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(218, 23.08%, calc(22.94% + 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(216, 22.98%, calc(31.57% + 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)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='dark'][data-theme='yellow']{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(218, 7.69%, calc(20.39% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + 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(218, 23.08%, calc(22.94% + 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(216, 22.98%, calc(31.57% + 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)));
+}

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

@@ -1,6 +1,6 @@
 [data-mode='light']{
 	/* list common */
-	--dot_inputPlaceholder:var(--zdtm_cta_grey_40_text_default_inverse);
+	--dot_inputPlaceholder:var(--zdt_cta_grey_40_text);
 	--dot_inputDisable:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--dot_inputLine:var(--zdt_cta_grey_35_border);
 	--dot_inputLineHover:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -111,7 +111,7 @@
 	--zdt_tag_default_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tag_default_bg:var(--zdt_cta_grey_20_bg);
 	--zdt_tag_default_border:var(--dot_mirror);
-	--zdt_tag_default_hover_bg:var(--zdtm_cta_grey_35_bg_darker_lowest);
+	--zdt_tag_default_hover_bg:var(--zdt_cta_grey_35_bg);
 	--zdt_tag_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tag_secondary_bg:hsla(217, calc(var(--zd-saturation, 1) * 12.16%), calc(29.02% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_tag_secondary_hover_bg:hsla(216, calc(var(--zd-saturation, 1) * 9.93%), calc(29.61% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -122,7 +122,7 @@
 	--zdt_tag_danger_hover_bg:hsla(7, calc(var(--zd-saturation, 1) * 70.21%), calc(90.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
 	--zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
-	--zdt_tag_primary_border:var(--zdtm_cta_primary_light_border_default_inverse_medium);
+	--zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
 	--zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
 	--zdt_tag_default_danger_bg:var(--zdtm_cta_grey_15_bg_default_inverse_low);
 	--zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
@@ -152,7 +152,7 @@
 	--zdt_dropdown_darkheading_bg:hsla(226, calc(var(--zd-saturation, 1) * 21.68%), calc(28.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_dropdown_darkheading_underline_bg:hsla(223, calc(var(--zd-saturation, 1) * 14.00%), calc(39.22% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_dropdown_mirror_bg:var(--dot_mirror);
-	--zdt_dropdown_user_default_border:var(--zdtm_cta_grey_35_border_default_inverse_medium);
+	--zdt_dropdown_user_default_border:var(--zdt_cta_grey_35_border);
 	--zdt_dropdown_listactive_border:var(--zdt_cta_primary_border);
 	--zdt_dropdown_listactive_bg:hsla(212, calc(var(--zd-saturation, 1) * 86.67%), calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_dropdown_listhover_bg:var(--zdt_cta_grey_10_bg);
@@ -311,7 +311,7 @@
 	--zdt_datetime_invalid_text:hsla(231, calc(var(--zd-saturation, 1) * 22.22%), calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_datetime_selected_bg:var(--zdtm_cta_primary_bg_darker_low);
+	--zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
 	--zdt_datetime_today_border:var(--zdt_cta_primary_border);
 	--zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -345,7 +345,7 @@
 	
 	/* tabs */
 	--zdt_tabs_alpha_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_tabs_alpha_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
+	--zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
 	--zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.3);
 	--zdt_tabs_delta_border:var(--zdt_cta_primary_border);
 	--zdt_tabs_highlight_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

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

@@ -0,0 +1,14 @@
+[data-mode='light'][data-theme='blue'], :global(.zd-blueLightTheme) [data-theme="blue"]{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(216, 38.46%, calc(97.45% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(212, 86.67%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(231, 22.22%, calc(82.35% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(216, 38.46%, calc(97.45% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse:hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(213, 100.00%, calc(36.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(213, 84.62%, calc(94.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(212, 91.84%, calc(48.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default:hsla(213, 100.00%, calc(36.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='light'][data-theme='green']{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(165, 28.57%, calc(97.25% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(143, 44.44%, calc(96.47% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(135, 7.41%, calc(78.82% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(165, 28.57%, calc(97.25% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse:hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(135, 13.33%, calc(94.12% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(132, 43.33%, calc(88.24% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(133, 63.29%, calc(40.59% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(135, 7.41%, calc(78.82% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default:hsla(134, 78.63%, calc(25.69% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='light'][data-theme='orange']{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(20, 20.00%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(26, 77.78%, calc(96.47% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(27, 10.68%, calc(79.80% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(20, 20.00%, calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse:hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(30, 100.00%, calc(34.90% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(24, 27.78%, calc(92.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(28, 80.39%, calc(90.00% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(28, 81.75%, calc(49.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(27, 10.68%, calc(79.80% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default:hsla(30, 100.00%, calc(34.90% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='light'][data-theme='red']{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(340, 20.00%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(0, 71.43%, calc(97.25% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(343, 4.76%, calc(71.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(340, 20.00%, calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse:hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(1, 75.38%, calc(38.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 12.20%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(0, 70.21%, calc(90.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(0, 71.91%, calc(53.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(343, 4.76%, calc(71.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default:hsla(1, 75.38%, calc(38.24% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='light'][data-theme='yellow']{
+	--zdtm_cta_grey_10_bg_default_inverse_low:hsla(60, 12.50%, calc(96.86% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_light_bg_default_inverse_low:hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_grey_40_bg_default:hsla(45, 28.17%, calc(72.16% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_10_bg_default_inverse_lower:hsla(60, 12.50%, calc(96.86% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse:hsla(46, 81.07%, calc(52.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(48, 100.00%, calc(35.49% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_15_bg_default_inverse_low:hsla(60, 21.74%, calc(90.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_alpha_bg_default_inverse_lower:hsla(46, 80.82%, calc(85.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(46, 81.07%, calc(52.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(46, 81.07%, calc(52.35% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_grey_40_bg_default_inverse_low:hsla(45, 28.17%, calc(72.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_hover_bg_default:hsla(48, 100.00%, calc(35.49% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -122,7 +122,7 @@
 	--zdt_tag_danger_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
 	--zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
-	--zdt_tag_primary_border:var(--zdtm_cta_primary_light_border_default_inverse_medium);
+	--zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
 	--zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
 	--zdt_tag_default_danger_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(18.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
@@ -311,7 +311,7 @@
 	--zdt_datetime_invalid_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
-	--zdt_datetime_selected_bg:var(--zdtm_cta_primary_bg_darker_low);
+	--zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
 	--zdt_datetime_today_border:var(--zdt_cta_primary_border);
 	--zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -345,7 +345,7 @@
 	
 	/* tabs */
 	--zdt_tabs_alpha_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_tabs_alpha_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
+	--zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
 	--zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.3);
 	--zdt_tabs_delta_border:var(--zdt_cta_primary_border);
 	--zdt_tabs_highlight_border:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

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

@@ -0,0 +1,14 @@
+[data-mode='pureDark'][data-theme='blue'], :global(.zd-bluePureDarkTheme) [data-theme="blue"]{
+	--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(213, 19.57%, calc(18.04% + 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(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(213, 85.45%, calc(43.14% + 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(215, 28.16%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(212, 100.00%, calc(63.92% + 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(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='pureDark'][data-theme='green']{
+	--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(133, 10.84%, 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(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(128, 79.71%, calc(27.06% + 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(170, 22.94%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(133, 40.00%, calc(45.10% + 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(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +1,14 @@
+[data-mode='pureDark'][data-theme='orange']{
+	--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(26, 19.51%, calc(16.08% + 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(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdtm_cta_primary_hover_bg_default_inverse:hsla(29, 100.00%, calc(32.94% + 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(340, 5.56%, calc(21.18% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default_inverse_low:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdtm_cta_primary_bg_default:hsla(26, 100.00%, calc(56.08% + 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(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+}

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

@@ -0,0 +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)));
+}

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

@@ -0,0 +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)));
+}

package/cbt.config.js

@@ -1,11 +1,20 @@
 
 const path = require('path');
+const jsx_attribute_wrapper = require('@zohodesk/jsx_attribute_wrapper');
+const {
+  getJsxAttributeWrapperPlugins
+} = require('../common_cbt.config');
 
 exports.config = {
   preProcess: {
     enable: true,
     runner: './preprocess/index.js'
   },
+  babelCustomizations: {
+    plugins: [
+      ...getJsxAttributeWrapperPlugins(jsx_attribute_wrapper)
+    ]
+  },
   css: {
     plugins: {
       rtl: {
@@ -26,16 +35,16 @@ exports.config = {
         ]
       }
     },
-     customPlugins: [
+    customPlugins: [
       {
         plugin: (options) =>
           require('postcss-discard-comments')({
             remove: (c) => { return c.includes('rtl:') }
-          }), 
+          }),
         patterns: ['**/assets/**/*.css'],
         enable: true
       }
     ]
   }
- 
+
 };

package/es/AppContainer/AppContainer.js

@@ -8,6 +8,8 @@ import Tooltip from "../Tooltip/Tooltip";
 import "../common/basic.module.css";
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
 import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';

package/es/DateTime/DateWidget.js

@@ -54,6 +54,7 @@ class DateWidgetComponent extends React.Component {
     this.handleDateIconClick = this.handleDateIconClick.bind(this);
     this.handleSelectionRangeDetails = this.handleSelectionRangeDetails.bind(this);
     this.handleBlurSelectionRange = this.handleBlurSelectionRange.bind(this);
+    this.getI18nMonthLabels = this.getI18nMonthLabels.bind(this);
     this.state = {
       selected: '',
       displayText: '',
@@ -264,6 +265,16 @@ class DateWidgetComponent extends React.Component {
     !isOpenOnly && togglePopup(e, `${defaultPosition}Right`);
   }
 
+  getI18nMonthLabels() {
+    const {
+      i18nKeys
+    } = this.props;
+    return {
+      i18nShortMonths: i18nKeys.monthNamesShort || i18nShortMonths,
+      i18nMonths: i18nKeys.monthNames || i18nMonths
+    };
+  }
+
   handleSelectionRangeDetails(props) {
     const {
       timeZone,
@@ -280,7 +291,11 @@ class DateWidgetComponent extends React.Component {
       minute,
       noon
     } = this.state;
-    const selected = value === INVALID_DATE ? '' : value; //New UI Changes
+    const selected = value === INVALID_DATE ? '' : value;
+    const {
+      i18nShortMonths: localizedShortMonths,
+      i18nMonths: localizedMonths
+    } = this.getI18nMonthLabels(); //New UI Changes
 
     const dateFormatDetails = getDateFormatDetails(dateFormat, {
       isHideCurrentYear: false,
@@ -289,8 +304,8 @@ class DateWidgetComponent extends React.Component {
       isDateTime
     });
     const dateFormatSelection = getDateFormatSelection(dateFormatDetails, isDateTime, {
-      i18nShortMonths,
-      i18nMonths,
+      i18nShortMonths: localizedShortMonths,
+      i18nMonths: localizedMonths,
       selectedValue: selected,
       day,
       month,
@@ -320,6 +335,10 @@ class DateWidgetComponent extends React.Component {
       is24Hour,
       isHideCurrentYear
     } = props;
+    const {
+      i18nShortMonths: localizedShortMonths,
+      i18nMonths: localizedMonths
+    } = this.getI18nMonthLabels();
     const dateFormatDetails = getDateFormatDetails(dateFormat, {
       isHideCurrentYear,
       value,
@@ -340,7 +359,10 @@ class DateWidgetComponent extends React.Component {
         format = `${newDateFormat} ${is24Hour ? 'HH:mm' : 'hh:mm A'}`;
       }
 
-      displayText = formatDate(convertedValue, format);
+      displayText = formatDate(convertedValue, format, {
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths
+      });
     }
 
     return {
@@ -828,6 +850,10 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
 
     if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
+      const {
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths
+      } = this.getI18nMonthLabels();
       const {
         day: selectedDay = '',
         month: selectedMonth = '',
@@ -853,8 +879,8 @@ class DateWidgetComponent extends React.Component {
         minute: selectedMinute,
         noon: selectedNoon
       }, dateFormatDetails, isDateTime, {
-        i18nShortMonths,
-        i18nMonths,
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths,
         is24Hour
       });
       return dateTimeString;

package/es/Provider/LibraryContext.js

@@ -12,7 +12,8 @@ const LibraryContextProvider = ({
   shouldStrikeThroughDisabledButton,
   labelRequiredType,
   shouldHighlightRequiredLabel,
-  children
+  children,
+  buttonComponentVersion
 }) => {
   const [value, setValue] = useState({
     isReducedMotion,
@@ -21,6 +22,7 @@ const LibraryContextProvider = ({
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
     shouldStrikeThroughDisabledButton,
+    buttonComponentVersion,
     labelRequiredType,
     shouldHighlightRequiredLabel
   });
@@ -48,6 +50,7 @@ LibraryContextProvider.propTypes = {
   direction: PropTypes.string,
   shouldIndicateSwitchState: PropTypes.bool,
   shouldStrikeThroughDisabledButton: PropTypes.bool,
+  buttonComponentVersion: PropTypes.oneOf(['default', 'v1']),
   labelRequiredType: PropTypes.oneOf(['asterisk', 'text']),
   shouldHighlightRequiredLabel: PropTypes.bool
 };
@@ -58,6 +61,7 @@ LibraryContextProvider.defaultProps = {
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
   shouldStrikeThroughDisabledButton: false,
+  buttonComponentVersion: 'v1',
   labelRequiredType: 'asterisk',
   shouldHighlightRequiredLabel: true
 };

package/es/Select/Select.js

@@ -1088,7 +1088,9 @@ export class SelectComponent extends Component {
     }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
-    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
+    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter({
+      closePopup: this.handlePopupClose
+    })) : null)) : /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, getChildren())))) : null);
   }