@zohodesk/components 1.6.7 → 1.6.11-exp-6

package/README.md

@@ -2,6 +2,21 @@
 
 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.9, 1.6.10 , 1.6.11
+
+- padding, margin based css properties migrated to padding-inline,padding-block, margin-inline, margin-block 
+- Introduced a new **Button** component in V1.
+- Added a new **helpers** folder in V1 to organize reusable utility functions.
+- Created a **colorHelper** utility inside the helpers folder.
+
+# 1.6.8
+
+- **Typography**
+  - `breakSpaces` value supported for the **$ui_whiteSpace** prop.
+  - 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. 

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

@@ -14,4 +14,72 @@
 	--zdt_v1_label_required_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_label_disabled_text:var(--dot_inputDisable);
 	--zdt_v1_label_secondary_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* palette - universal color tokens */
+	--zdt_v1_palette_brand_filled_text:var(--zdt_cta_secondary_text);
+	--zdt_v1_palette_brand_bg:var(--zdt_cta_primary_bg);
+	--zdt_v1_palette_brand_text:var(--zdt_cta_primary_text);
+	--zdt_v1_palette_brand_border:var(--zdt_cta_primary_border);
+	--zdt_v1_palette_brand_hover_bg:var(--zdt_cta_primary_hover_bg);
+	--zdt_v1_palette_brand_hover_text:var(--zdt_cta_primary_hover_text);
+	--zdt_v1_palette_brand_hover_border:var(--zdt_cta_primary_hover_border);
+	--zdt_v1_palette_brand_light_bg:var(--zdt_cta_primary_light_bg);
+	--zdt_v1_palette_brand_light_hover_bg:var(--zdt_cta_primary_light_hover_bg);
+	--zdt_v1_palette_brand_light_border:var(--zdt_cta_primary_light_border);
+	--zdt_v1_palette_grey_light_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.23%), calc(19.41% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_light_border:hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_light_hover_bg:hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_bg:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_border:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_hover_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_bg:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_border:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_bg:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_light_bg:hsla(213, calc(var(--zd-saturation, 1) * 27.27%), calc(23.73% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_light_border:hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_light_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.23%), calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_bg:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_border:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_hover_bg:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_hover_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(54.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_hover_border:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_light_bg:hsla(191, calc(var(--zd-saturation, 1) * 21.65%), calc(19.02% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_light_border:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_light_hover_bg:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_bg:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_border:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_hover_bg:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_hover_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_hover_border:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_light_bg:hsla(252, calc(var(--zd-saturation, 1) * 4.85%), calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_light_border:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_light_hover_bg:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_bg:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_text:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_border:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 77.03%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_hover_border:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_light_bg:hsla(258, calc(var(--zd-saturation, 1) * 12.62%), calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_light_border:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_light_hover_bg:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_bg:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_text:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_border:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_hover_bg:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_hover_text:hsla(37, calc(var(--zd-saturation, 1) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_hover_border:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_light_bg:hsla(218, calc(var(--zd-saturation, 1) * 7.69%), calc(20.39% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_light_border:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_light_hover_bg:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_white:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 1);
+	--zdt_v1_palette_black:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 }

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

@@ -14,4 +14,72 @@
 	--zdt_v1_label_required_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_label_disabled_text:var(--dot_inputDisable);
 	--zdt_v1_label_secondary_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* palette - universal color tokens */
+	--zdt_v1_palette_brand_filled_text:var(--zdt_cta_secondary_text);
+	--zdt_v1_palette_brand_bg:var(--zdt_cta_primary_bg);
+	--zdt_v1_palette_brand_text:var(--zdt_cta_primary_text);
+	--zdt_v1_palette_brand_border:var(--zdt_cta_primary_border);
+	--zdt_v1_palette_brand_hover_bg:var(--zdt_cta_primary_hover_bg);
+	--zdt_v1_palette_brand_hover_text:var(--zdt_cta_primary_hover_text);
+	--zdt_v1_palette_brand_hover_border:var(--zdt_cta_primary_hover_border);
+	--zdt_v1_palette_brand_light_bg:var(--zdt_cta_primary_light_bg);
+	--zdt_v1_palette_brand_light_hover_bg:var(--zdt_cta_primary_light_hover_bg);
+	--zdt_v1_palette_brand_light_border:var(--zdt_cta_primary_light_border);
+	--zdt_v1_palette_grey_light_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_light_border:hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_light_hover_bg:hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_bg:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_border:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_hover_bg:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_hover_border:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_bg:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_text:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_border:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_bg:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_text:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_light_bg:hsla(212, calc(var(--zd-saturation, 1) * 86.67%), calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_light_border:hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_light_hover_bg:hsla(212, calc(var(--zd-saturation, 1) * 80.95%), calc(95.88% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_bg:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_text:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_border:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_hover_bg:hsla(134, calc(var(--zd-saturation, 1) * 78.63%), calc(25.69% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_hover_text:hsla(134, calc(var(--zd-saturation, 1) * 78.63%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_hover_border:hsla(134, calc(var(--zd-saturation, 1) * 78.63%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_light_bg:hsla(143, calc(var(--zd-saturation, 1) * 44.44%), calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_light_border:hsla(132, calc(var(--zd-saturation, 1) * 43.33%), calc(88.24% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_light_hover_bg:hsla(132, calc(var(--zd-saturation, 1) * 43.33%), calc(88.24% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_bg:hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_text:hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_border:hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_hover_bg:hsla(30, calc(var(--zd-saturation, 1) * 100.00%), calc(34.90% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_hover_text:hsla(30, calc(var(--zd-saturation, 1) * 100.00%), calc(34.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_hover_border:hsla(30, calc(var(--zd-saturation, 1) * 100.00%), calc(34.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_light_bg:hsla(26, calc(var(--zd-saturation, 1) * 77.78%), calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_light_border:hsla(28, calc(var(--zd-saturation, 1) * 80.39%), calc(90.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_light_hover_bg:hsla(28, calc(var(--zd-saturation, 1) * 80.39%), calc(90.00% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_bg:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_border:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_hover_bg:hsla(1, calc(var(--zd-saturation, 1) * 75.38%), calc(38.24% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_hover_text:hsla(1, calc(var(--zd-saturation, 1) * 75.38%), calc(38.24% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_hover_border:hsla(1, calc(var(--zd-saturation, 1) * 75.38%), calc(38.24% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_light_bg:hsla(0, calc(var(--zd-saturation, 1) * 71.43%), calc(97.25% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_light_border:hsla(0, calc(var(--zd-saturation, 1) * 70.21%), calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_light_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 70.21%), calc(90.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_bg:hsla(46, calc(var(--zd-saturation, 1) * 81.07%), calc(52.35% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_text:hsla(46, calc(var(--zd-saturation, 1) * 92.59%), calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_border:hsla(46, calc(var(--zd-saturation, 1) * 81.07%), calc(52.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_hover_bg:hsla(48, calc(var(--zd-saturation, 1) * 100.00%), calc(35.49% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_hover_text:hsla(48, calc(var(--zd-saturation, 1) * 100.00%), calc(25.49% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_hover_border:hsla(48, calc(var(--zd-saturation, 1) * 100.00%), calc(35.49% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_light_bg:hsla(45, calc(var(--zd-saturation, 1) * 83.33%), calc(95.29% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_light_border:hsla(46, calc(var(--zd-saturation, 1) * 80.82%), calc(85.69% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_light_hover_bg:hsla(46, calc(var(--zd-saturation, 1) * 80.82%), calc(85.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_white:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
+	--zdt_v1_palette_black:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 1);
 }

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

@@ -14,4 +14,72 @@
 	--zdt_v1_label_required_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_label_disabled_text:var(--dot_inputDisable);
 	--zdt_v1_label_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* palette - universal color tokens */
+	--zdt_v1_palette_brand_filled_text:var(--zdt_cta_secondary_text);
+	--zdt_v1_palette_brand_bg:var(--zdt_cta_primary_bg);
+	--zdt_v1_palette_brand_text:var(--zdt_cta_primary_text);
+	--zdt_v1_palette_brand_border:var(--zdt_cta_primary_border);
+	--zdt_v1_palette_brand_hover_bg:var(--zdt_cta_primary_hover_bg);
+	--zdt_v1_palette_brand_hover_text:var(--zdt_cta_primary_hover_text);
+	--zdt_v1_palette_brand_hover_border:var(--zdt_cta_primary_hover_border);
+	--zdt_v1_palette_brand_light_bg:var(--zdt_cta_primary_light_bg);
+	--zdt_v1_palette_brand_light_hover_bg:var(--zdt_cta_primary_light_hover_bg);
+	--zdt_v1_palette_brand_light_border:var(--zdt_cta_primary_light_border);
+	--zdt_v1_palette_grey_light_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_light_border:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_light_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_bg:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_border:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_bg:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_light_bg:hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_light_border:hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_light_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(16.86% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_bg:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_border:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_hover_bg:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_hover_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(54.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_hover_border:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_light_bg:hsla(133, calc(var(--zd-saturation, 1) * 10.84%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_light_border:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_green_light_hover_bg:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_bg:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_border:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_hover_bg:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_hover_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_hover_border:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_light_bg:hsla(26, calc(var(--zd-saturation, 1) * 19.51%), calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_light_border:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_orange_light_hover_bg:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_bg:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_text:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_border:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 77.03%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_hover_border:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_light_bg:hsla(0, calc(var(--zd-saturation, 1) * 13.25%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_light_border:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_red_light_hover_bg:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_bg:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_text:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_border:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_hover_bg:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_hover_text:hsla(37, calc(var(--zd-saturation, 1) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_hover_border:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_light_bg:hsla(35, calc(var(--zd-saturation, 1) * 15.00%), calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_light_border:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_yellow_light_hover_bg:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_white:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 1);
+	--zdt_v1_palette_black:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
 }

package/es/Buttongroup/Buttongroup.module.css

@@ -64,42 +64,22 @@
   composes: tcenter from '../common/common.module.css';
 }
 
-[dir=ltr] .alignleft>button:first-child {
-  margin-left: 0 ;
+.alignleft>button:first-child {
+  margin-inline-start:0 ;
 }
 
-[dir=rtl] .alignleft>button:first-child {
-  margin-right: 0 ;
+.alignleft>button {
+  margin-inline-start:var(--zd_size15) ;
 }
 
-[dir=ltr] .alignleft>button {
-  margin-left: var(--zd_size15) ;
+.alignright>button:last-child {
+  margin-inline-end:0 ;
 }
 
-[dir=rtl] .alignleft>button {
-  margin-right: var(--zd_size15) ;
+.alignright>button {
+  margin-inline-end:var(--zd_size15) ;
 }
 
-[dir=ltr] .alignright>button:last-child {
-  margin-right: 0 ;
+.aligncenter>button {
+  margin-inline-end:var(--zd_size15) ;
 }
-
-[dir=rtl] .alignright>button:last-child {
-  margin-left: 0 ;
-}
-
-[dir=ltr] .alignright>button {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .alignright>button {
-  margin-left: var(--zd_size15) ;
-}
-
-[dir=ltr] .aligncenter>button {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .aligncenter>button {
-  margin-left: var(--zd_size15) ;
-}

package/es/CheckBox/CheckBox.module.css

@@ -94,7 +94,7 @@
  .checkedprimary,
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
-} 
+}
 .primary:hover
 /* .primary:focus  */
 {
@@ -137,7 +137,7 @@
 }
 
 .withSecondaryText {
-  margin-top: var(--zd_size1) ;
+  margin-block-start: var(--zd_size1) ;
 }
 
 .secondaryText {
@@ -147,14 +147,7 @@
 .labelContainer {
   composes: dflex flexcolumn from '../common/common.module.css';
   gap: var(--zd_size4) ;
-}
-
-[dir=ltr] .labelContainer {
-  margin-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .labelContainer {
-  margin-right: var(--zd_size6) ;
+  margin-inline-start:var(--zd_size6) ;
 }
 @keyframes tickAnimate {
   0% {

package/es/DateTime/DateTime.module.css

@@ -2,14 +2,8 @@
   font-weight: var(--zd-fw-semibold);
 }
 
-[dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19) ;
-  padding-left: var(--zd_size19) ;
-}
-
-[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19) ;
-  padding-right: var(--zd_size19) ;
+.boxPadding {
+  padding-inline: var(--zd_size19) ;
 }
 
 .container {
@@ -61,12 +55,8 @@
   background: var(--zdt_datetime_datestr_hover_bg);
 }
 
-[dir=ltr] .navigation {
-  margin-left: var(--zd_size2) ;
-}
-
-[dir=rtl] .navigation {
-  margin-right: var(--zd_size2) ;
+.navigation {
+  margin-inline-start: var(--zd_size2) ;
 }
 
 .thMonYear {
@@ -78,8 +68,10 @@
 }
 
 .dateContainer {
-  margin: 0 var(--zd_size19) 0 var(--zd_size19) ;
-  padding: var(--zd_size6) 0 var(--zd_size10) 0 ;
+  margin-block:0 ;
+  margin-inline: var(--zd_size19) ;
+  padding-block: var(--zd_size6) var(--zd_size10) ;
+  padding-inline:0 ;
 }
 
 .separator {
@@ -88,9 +80,9 @@
 
 .days {
   min-height: var(--zd_size36) ;
+  padding-block-start: var(--zd_size7) ;
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7) ;
 }
 
 .daysStr {
@@ -104,12 +96,13 @@
 
 .dateRow {
   height: var(--zd_size28) ;
+  margin-block: var(--zd_size1) var(--zd_size5) ;
+  margin-inline:0 ;
   composes: alignBetween from '../common/common.module.css';
-  margin: var(--zd_size1) 0 var(--zd_size5) ;
 }
 
 .dateRow:last-child {
-  margin-bottom: 0 ;
+  margin-block-end: 0 ;
 }
 
 .holiday,
@@ -165,24 +158,25 @@
 
 
 .timesection {
-  padding-top: var(--zd_size5) ;
-  padding-bottom: var(--zd_size10) ;
+  padding-block: var(--zd_size5) var(--zd_size10) ;
 }
 
 .dropDownContainer {
-  padding: 0 var(--zd_size5) ;
+  padding-inline: var(--zd_size5) ;
+  padding-block:0 ;
 }
 
 .dropDown {
   width: var(--zd_size60) ;
   display: inline-block;
+  margin-inline: var(--zd_size4) ;
+  margin-block:0 ;
   position: relative;
-  margin: 0 var(--zd_size4) ;
 }
 
 .footer {
-  margin-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size12) ;
+  margin-block-start: var(--zd_size10) ;
+  padding-block-end: var(--zd_size12) ;
 }
 
 .timesection,
@@ -196,17 +190,10 @@
 }
 
 .downArrow {
+  margin-inline-start: var(--zd_size2) ;
   color: var(--zdt_datetime_daystr_text);
 }
 
-[dir=ltr] .downArrow {
-  margin-left: var(--zd_size2) ;
-}
-
-[dir=rtl] .downArrow {
-  margin-right: var(--zd_size2) ;
-}
-
 .dateText {
   cursor: pointer;
 }
@@ -220,9 +207,9 @@
   font-size: var(--zd_font_size11) ;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
+  margin-block-start: var(--zd_size14) ;
   composes: semibold;
   display: block;
-  margin-top: var(--zd_size14) ;
 }
 
 .yearContainer {
@@ -249,4 +236,4 @@
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
-}
+}

package/es/DateTime/YearView.module.css

@@ -1,19 +1,16 @@
-[dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19) ;
-  padding-left: var(--zd_size19) ;
-}[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19) ;
-  padding-right: var(--zd_size19) ;
+.boxPadding {
+  padding-inline: var(--zd_size19) ;
 }
 
 .month {
   width: 30.333%;
+  margin-block:0 var(--zd_size1) ;
+  margin-inline:0 ;
   font-size: var(--zd_font_size12) ;
   line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
   text-align: center;
-  margin: 0 0 var(--zd_size1) ;
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
@@ -37,7 +34,8 @@
 }
 
 .year {
-  padding: var(--zd_size7) 0 ;
+  padding-block: var(--zd_size7) ;
+  padding-inline:0 ;
   cursor: pointer;
 }
 
@@ -90,10 +88,10 @@
   height: var(--zd_size135) ;
   overflow: hidden;
   transition: height var(--zd_transition1);
-  padding-bottom: var(--zd_size5) ;
+  padding-block-end: var(--zd_size5) ;
 }
 
 .toggleYear {
   height: 0 ;
   padding: 0 ;
-}
+}

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -430,10 +430,11 @@
     height: 6px;
     /*css:theme-validation:ignore*/
     width: 20% ;
+    margin-block:0 var(--zd_size10) ;
+    margin-inline:auto ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
     cursor: pointer;
-    margin: 0 auto var(--zd_size10) ;
 }
 
 .boxPadding {
@@ -442,4 +443,4 @@
 
 .darkPalette {
     --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
-}
+}

package/es/DropDown/DropDown.module.css

@@ -1,5 +1,6 @@
 .listGroup {
   max-height: var(--zd_size220) ;
   composes: oflowy from '../common/common.module.css';
-  margin: var(--zd_size8) 0 var(--zd_size4) ;
+  margin-block:var(--zd_size8) var(--zd_size4) ;
+  margin-inline:0 ;
 }

package/es/DropDown/DropDownItem.module.css

@@ -50,18 +50,11 @@
 }
 
 .children {
+  margin-inline-end: var(--zd_size10) ;
   display: inline-block;
   font-size: 0 ;
 }
 
-[dir=ltr] .children {
-  margin-right: var(--zd_size10) ;
-}
-
-[dir=rtl] .children {
-  margin-left: var(--zd_size10) ;
-}
-
 .value {
   composes: dotted flexgrow from '../common/common.module.css';
 }

package/es/DropDown/DropDownSeparator.module.css

@@ -1,7 +1,8 @@
 .separator {
   height: var(--zd_size1) ;
+  margin-block: var(--zd_size5) ;
+  margin-inline: 0 ;
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: var(--zdt_dropdown_user_default_border);
-  margin: var(--zd_size5) 0 ;
 }

package/es/ListItem/ListItem.module.css

@@ -77,13 +77,8 @@
   composes: dotted from '../common/common.module.css';
 }
 .beforeChild{
+  margin-inline-end: var(--zd_size10) ;
   height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
-}
-[dir=ltr] .beforeChild{
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .beforeChild{
-  margin-left: var(--zd_size10) ;
 }
   /* css:lineheight-validation:ignore */
 .value, .multiLineValue {
@@ -99,14 +94,9 @@
 }
 .iconBox {
   width: var(--zd_size20) ;
+  margin-inline-end: var(--zd_size10) ;
   text-align: center;
 }
-[dir=ltr] .iconBox {
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size10) ;
-}
 .iconBox,
 .leftAvatar {
   font-size: 0 ;
@@ -281,9 +271,8 @@
 }
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
+  padding-block: var(--zd_size10) ;
   --listitem_font_size: var(--zd_font_size15);
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
 }
 
 
@@ -293,4 +282,4 @@
 
 .titleBox {
   align-items: stretch;
-}
+}

package/es/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -1,8 +1,9 @@
 .container{
-    padding: 0 var(--zd_size20) var(--zd_size12) var(--zd_size20) ;
+    padding-block: 0 var(--zd_size12) ;
+    padding-inline:var(--zd_size20) ;
   }
   .header{
-    padding-bottom: var(--zd_size4) ;
+    padding-block-end: var(--zd_size4) ;
   }
   .cardHeading{
     font-size: var(--zd_font_size16) ;