@zohodesk/components 1.6.8 → 1.6.11

package/es/v1/helpers/colorHelpers/text/textColor.module.css

@@ -0,0 +1,368 @@
+/* Theme-aware Brand Palette (changes with CTA theme selection) */
+.text-brand-80 {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.hover\:text-brand-80:hover {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.focus\:text-brand-80:focus {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.active\:text-brand-80:active {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.selected\:text-brand-80 {
+    color: var(--zdt_v1_palette_brand_text);
+}
+
+.text-brand-100 {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+.hover\:text-brand-100:hover {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+.focus\:text-brand-100:focus {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+.active\:text-brand-100:active {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+.selected\:text-brand-100 {
+    color: var(--zdt_v1_palette_brand_hover_text);
+}
+
+/* Static Grey Palette */
+.text-grey-65 {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.hover\:text-grey-65:hover {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.focus\:text-grey-65:focus {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.active\:text-grey-65:active {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.selected\:text-grey-65 {
+    color: var(--zdt_v1_palette_grey_text);
+}
+
+.text-grey-100 {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+.hover\:text-grey-100:hover {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+.focus\:text-grey-100:focus {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+.active\:text-grey-100:active {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+.selected\:text-grey-100 {
+    color: var(--zdt_v1_palette_grey_hover_text);
+}
+
+/* Static Blue Palette */
+.text-blue-80 {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.hover\:text-blue-80:hover {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.focus\:text-blue-80:focus {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.active\:text-blue-80:active {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.selected\:text-blue-80 {
+    color: var(--zdt_v1_palette_blue_text);
+}
+
+.text-blue-100 {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+.hover\:text-blue-100:hover {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+.focus\:text-blue-100:focus {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+.active\:text-blue-100:active {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+.selected\:text-blue-100 {
+    color: var(--zdt_v1_palette_blue_hover_text);
+}
+
+/* Static Green Palette */
+.text-green-80 {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.hover\:text-green-80:hover {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.focus\:text-green-80:focus {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.active\:text-green-80:active {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.selected\:text-green-80 {
+    color: var(--zdt_v1_palette_green_text);
+}
+
+.text-green-100 {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+.hover\:text-green-100:hover {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+.focus\:text-green-100:focus {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+.active\:text-green-100:active {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+.selected\:text-green-100 {
+    color: var(--zdt_v1_palette_green_hover_text);
+}
+
+/* Static Orange Palette */
+.text-orange-80 {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.hover\:text-orange-80:hover {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.focus\:text-orange-80:focus {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.active\:text-orange-80:active {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.selected\:text-orange-80 {
+    color: var(--zdt_v1_palette_orange_text);
+}
+
+.text-orange-100 {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+.hover\:text-orange-100:hover {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+.focus\:text-orange-100:focus {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+.active\:text-orange-100:active {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+.selected\:text-orange-100 {
+    color: var(--zdt_v1_palette_orange_hover_text);
+}
+
+/* Static Red Palette */
+.text-red-70 {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.hover\:text-red-70:hover {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.focus\:text-red-70:focus {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.active\:text-red-70:active {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.selected\:text-red-70 {
+    color: var(--zdt_v1_palette_red_text);
+}
+
+.text-red-100 {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+.hover\:text-red-100:hover {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+.focus\:text-red-100:focus {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+.active\:text-red-100:active {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+.selected\:text-red-100 {
+    color: var(--zdt_v1_palette_red_hover_text);
+}
+
+/* Static Yellow Palette */
+.text-yellow-80 {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.hover\:text-yellow-80:hover {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.focus\:text-yellow-80:focus {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.active\:text-yellow-80:active {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.selected\:text-yellow-80 {
+    color: var(--zdt_v1_palette_yellow_text);
+}
+
+.text-yellow-100 {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+.hover\:text-yellow-100:hover {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+.focus\:text-yellow-100:focus {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+.active\:text-yellow-100:active {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+.selected\:text-yellow-100 {
+    color: var(--zdt_v1_palette_yellow_hover_text);
+}
+
+/* Utility Colors */
+.text-transparent {
+    color: var(--dot_mirror);
+}
+
+.hover\:text-transparent:hover {
+    color: var(--dot_mirror);
+}
+
+.focus\:text-transparent:focus {
+    color: var(--dot_mirror);
+}
+
+.active\:text-transparent:active {
+    color: var(--dot_mirror);
+}
+
+.selected\:text-transparent {
+    color: var(--dot_mirror);
+}
+
+.text-white {
+    color: var(--zdt_v1_palette_white);
+}
+
+.hover\:text-white:hover {
+    color: var(--zdt_v1_palette_white);
+}
+
+.focus\:text-white:focus {
+    color: var(--zdt_v1_palette_white);
+}
+
+.active\:text-white:active {
+    color: var(--zdt_v1_palette_white);
+}
+
+.selected\:text-white {
+    color: var(--zdt_v1_palette_white);
+}
+
+.text-black {
+    color: var(--zdt_v1_palette_black);
+}
+
+.hover\:text-black:hover {
+    color: var(--zdt_v1_palette_black);
+}
+
+.focus\:text-black:focus {
+    color: var(--zdt_v1_palette_black);
+}
+
+.active\:text-black:active {
+    color: var(--zdt_v1_palette_black);
+}
+
+.selected\:text-black {
+    color: var(--zdt_v1_palette_black);
+}
+
+/* CTA-aware filled text — adapts to CTA theme */
+.text-brand-filled {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}
+
+.hover\:text-brand-filled:hover {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}
+
+.focus\:text-brand-filled:focus {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}
+
+.active\:text-brand-filled:active {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}
+
+.selected\:text-brand-filled {
+    color: var(--zdt_v1_palette_brand_filled_text);
+}

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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 ;
 }