@zohodesk/components 1.6.15 → 1.6.17

package/README.md

@@ -2,6 +2,15 @@
 
 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.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
 
@@ -41,7 +50,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. 
@@ -67,7 +75,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**.
@@ -161,7 +168,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/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/utils/datetime/common.js

@@ -14,7 +14,10 @@ export function getTimeOffset() {
   const matchingOffset = Object.keys(offsetMap).find(offset => GMT.getTimezoneOffset() === Number(offset));
   return matchingOffset ? offsetMap[matchingOffset].toString().split(' ') : ['', ''];
 }
-export function formatDate(dateMill, mask) {
+export function formatDate(dateMill, mask, {
+  i18nShortMonths,
+  i18nMonths
+} = {}) {
   let date = new Date(dateMill);
   let O = getTimeOffset()[0];
   let Z = getTimeOffset()[1];
@@ -26,6 +29,10 @@ export function formatDate(dateMill, mask) {
   let M = date.getMinutes();
   let s = date.getSeconds();
   let L = date.getMilliseconds();
+  const defaultShortMonths = dateFormat.monthNames.slice(0, 12);
+  const defaultMonths = dateFormat.monthNames.slice(12);
+  const resolvedShortMonths = Array.isArray(i18nShortMonths) ? i18nShortMonths : defaultShortMonths;
+  const resolvedMonths = Array.isArray(i18nMonths) ? i18nMonths : defaultMonths;
   let flags = {
     d: d,
     O: O,
@@ -38,8 +45,8 @@ export function formatDate(dateMill, mask) {
     DDDD: dateFormat.dayNames[D + 7],
     M: m + 1,
     MM: pad(m + 1, 2),
-    MMM: dateFormat.monthNames[m],
-    MMMM: dateFormat.monthNames[m + 12],
+    MMM: resolvedShortMonths[m],
+    MMMM: resolvedMonths[m],
     yy: String(y).slice(2),
     YY: String(y).slice(2),
     yyyy: y,

package/lib/DateTime/DateWidget.js

@@ -102,6 +102,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     _this.handleDateIconClick = _this.handleDateIconClick.bind(_assertThisInitialized(_this));
     _this.handleSelectionRangeDetails = _this.handleSelectionRangeDetails.bind(_assertThisInitialized(_this));
     _this.handleBlurSelectionRange = _this.handleBlurSelectionRange.bind(_assertThisInitialized(_this));
+    _this.getI18nMonthLabels = _this.getI18nMonthLabels.bind(_assertThisInitialized(_this));
     _this.state = {
       selected: '',
       displayText: '',
@@ -313,6 +314,15 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
 
       !isOpenOnly && togglePopup(e, "".concat(defaultPosition, "Right"));
     }
+  }, {
+    key: "getI18nMonthLabels",
+    value: function getI18nMonthLabels() {
+      var i18nKeys = this.props.i18nKeys;
+      return {
+        i18nShortMonths: i18nKeys.monthNamesShort || _constants.i18nShortMonths,
+        i18nMonths: i18nKeys.monthNames || _constants.i18nMonths
+      };
+    }
   }, {
     key: "handleSelectionRangeDetails",
     value: function handleSelectionRangeDetails(props) {
@@ -328,7 +338,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           hour = _this$state2.hour,
           minute = _this$state2.minute,
           noon = _this$state2.noon;
-      var selected = value === _constants.INVALID_DATE ? '' : value; //New UI Changes
+      var selected = value === _constants.INVALID_DATE ? '' : value;
+
+      var _this$getI18nMonthLab = this.getI18nMonthLabels(),
+          localizedShortMonths = _this$getI18nMonthLab.i18nShortMonths,
+          localizedMonths = _this$getI18nMonthLab.i18nMonths; //New UI Changes
+
 
       var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
         isHideCurrentYear: false,
@@ -337,8 +352,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         isDateTime: isDateTime
       });
       var dateFormatSelection = (0, _dateFormat.getDateFormatSelection)(dateFormatDetails, isDateTime, {
-        i18nShortMonths: _constants.i18nShortMonths,
-        i18nMonths: _constants.i18nMonths,
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths,
         selectedValue: selected,
         day: day,
         month: month,
@@ -365,6 +380,11 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           value = props.value,
           is24Hour = props.is24Hour,
           isHideCurrentYear = props.isHideCurrentYear;
+
+      var _this$getI18nMonthLab2 = this.getI18nMonthLabels(),
+          localizedShortMonths = _this$getI18nMonthLab2.i18nShortMonths,
+          localizedMonths = _this$getI18nMonthLab2.i18nMonths;
+
       var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
         isHideCurrentYear: isHideCurrentYear,
         value: value,
@@ -383,7 +403,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           format = "".concat(newDateFormat, " ").concat(is24Hour ? 'HH:mm' : 'hh:mm A');
         }
 
-        displayText = (0, _common.formatDate)(convertedValue, format);
+        displayText = (0, _common.formatDate)(convertedValue, format, {
+          i18nShortMonths: localizedShortMonths,
+          i18nMonths: localizedMonths
+        });
       }
 
       return {
@@ -849,6 +872,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props9.isPopupOpen;
 
       if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
+        var _this$getI18nMonthLab3 = this.getI18nMonthLabels(),
+            localizedShortMonths = _this$getI18nMonthLab3.i18nShortMonths,
+            localizedMonths = _this$getI18nMonthLab3.i18nMonths;
+
         var _getDateDetails2 = (0, _dateFormat.getDateDetails)(selected, {
           day: day,
           month: month,
@@ -880,8 +907,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           minute: selectedMinute,
           noon: selectedNoon
         }, dateFormatDetails, isDateTime, {
-          i18nShortMonths: _constants.i18nShortMonths,
-          i18nMonths: _constants.i18nMonths,
+          i18nShortMonths: localizedShortMonths,
+          i18nMonths: localizedMonths,
           is24Hour: is24Hour
         });
         return dateTimeString;

package/lib/utils/datetime/common.js

@@ -46,6 +46,10 @@ function getTimeOffset() {
 }
 
 function formatDate(dateMill, mask) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      i18nShortMonths = _ref.i18nShortMonths,
+      i18nMonths = _ref.i18nMonths;
+
   var date = new Date(dateMill);
   var O = getTimeOffset()[0];
   var Z = getTimeOffset()[1];
@@ -57,6 +61,10 @@ function formatDate(dateMill, mask) {
   var M = date.getMinutes();
   var s = date.getSeconds();
   var L = date.getMilliseconds();
+  var defaultShortMonths = dateFormat.monthNames.slice(0, 12);
+  var defaultMonths = dateFormat.monthNames.slice(12);
+  var resolvedShortMonths = Array.isArray(i18nShortMonths) ? i18nShortMonths : defaultShortMonths;
+  var resolvedMonths = Array.isArray(i18nMonths) ? i18nMonths : defaultMonths;
   var flags = {
     d: d,
     O: O,
@@ -69,8 +77,8 @@ function formatDate(dateMill, mask) {
     DDDD: dateFormat.dayNames[D + 7],
     M: m + 1,
     MM: pad(m + 1, 2),
-    MMM: dateFormat.monthNames[m],
-    MMMM: dateFormat.monthNames[m + 12],
+    MMM: resolvedShortMonths[m],
+    MMMM: resolvedMonths[m],
     yy: String(y).slice(2),
     YY: String(y).slice(2),
     yyyy: y,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.15",
+  "version": "1.6.17",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -74,7 +74,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@dot-system/css-audit-tool": "1.0.0",
-    "@zohodesk-private/color-variable-preprocessor": "1.3.1",
+    "@zohodesk-private/color-variable-preprocessor": "1.3.3",
     "@zohodesk-private/css-variable-migrator": "1.0.11",
     "@zohodesk-private/node-plugins": "1.1.14",
     "@zohodesk-private/react-prop-validator": "1.2.3",
@@ -83,16 +83,17 @@
     "@zohodesk/dotkit": "1.0.9",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/icons": "1.3.3",
-    "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.3.5",
+    "@zohodesk/layout": "3.2.0",
+    "@zohodesk/svg": "1.3.6",
     "@zohodesk/utils": "1.3.16",
-    "@zohodesk/variables": "1.3.1",
+    "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
     "@zohodesk/react-cli": "1.1.27",
     "@zohodesk/client_build_tool": "0.0.23",
     "color": "4.2.3",
+    "@zohodesk/jsx_attribute_wrapper": "1.0.0",
     "@dot-system/css-utility": "0.1.1"
   },
   "dependencies": {
@@ -103,15 +104,15 @@
   },
   "peerDependencies": {
     "@zohodesk/icons": "1.3.3",
-    "@zohodesk/variables": "1.3.1",
-    "@zohodesk/svg": "1.3.5",
+    "@zohodesk/variables": "1.3.2",
+    "@zohodesk/svg": "1.3.6",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
-    "@zohodesk/layout": "3.1.0",
+    "@zohodesk/layout": "3.2.0",
     "@zohodesk/dotkit": "1.0.9",
     "color": "4.2.3",
     "@dot-system/css-utility": "0.1.1"