@zohodesk/components 1.6.28 → 1.6.30

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.6.30
+
+- Updated the semibold font-weight CSS variable from 600 to 500 to avoid font-family conflicts across applications in Lato @font-face.
+
+## 1.6.29
+
+- Static CSS utility classes have been adopted across all CSS files using global composes.
+
 ## 1.6.28
 
 - **DividerLine** - New component introduced

package/es/Avatar/Avatar.module.css

@@ -14,9 +14,8 @@
 
 .avatar {
   composes: varClass;
-  position: relative;
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
-  vertical-align: middle;
+  composes: d-relative d-align-middle from global;
   font-size: var(--avatar_font_size);
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
@@ -36,11 +35,8 @@
 }
 
 .shadow {
-  position: absolute;
-  height: 100% ;
-  width: 100% ;
+  composes: d-absolute d-size-full d-pointer-events-none from global;
   top: 0 ;
-  pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
 
@@ -69,9 +65,7 @@
 }
 
 .image {
-  width: 100% ;
-  height: 100% ;
-  position: absolute;
+  composes: d-absolute d-size-full from global;
   top: 0 ;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
@@ -120,7 +114,7 @@
 }
 
 .none {
-  display: none;
+  composes: d-hidden from global;
 }
 
 .default {
@@ -136,8 +130,8 @@
 }
 
 .initial {
+  composes: d-inline-block from global;
   text-transform: var(--avatar_text_transform);
-  display: inline-block;
 }
 
 .xxsmall {

package/es/AvatarTeam/AvatarTeam.module.css

@@ -16,10 +16,8 @@
   --avatarteam_top_top: var(--zd_size1);
 }
 .container {
-  position: relative;
-  display: inline-block;
+  composes: d-inline-block d-relative d-align-middle from global;
   font-size: 0 ;
-  vertical-align: middle;
 }
 .team {
   composes: varClass;

package/es/Button/css/Button.module.css

@@ -46,7 +46,7 @@
 .container {
   composes: native;
   composes: dotted from '../../common/common.module.css';
-  position: relative;
+  composes: d-relative from global;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
   font-weight: var(--button_font_weight);
@@ -94,17 +94,17 @@
 }
 
 .mediumBtn {
+  composes: d-text-center from global;
   --button_height: var(--zd_size42);
   --button_min_width: var(--zd_size42);
   --button_font_size: var(--zd_font_size10);
-  text-align: center;
 }
 
 .smallBtn {
+  composes: d-text-center from global;
   --button_height: var(--zd_size22);
   --button_min_width: var(--zd_size22);
   --button_font_size: var(--zd_font_size13);
-  text-align: center;
 }
 
 .smallBtnprimary,
@@ -272,10 +272,10 @@
 }
 
 .overlay {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
-  background: inherit;
+  background-color: inherit;
   border-radius: inherit;
 }
 
@@ -290,7 +290,7 @@
 }
 
 .loading {
-  position: absolute;
+  composes: d-absolute from global;
   top: 50% ;
   width: var(--zd_size20) ;
   height: var(--zd_size20) ;
@@ -311,12 +311,10 @@
 }
 
 .loadingelement {
+  composes: d-inline-block d-relative d-origin-center from global;
   height: inherit ;
   width: inherit ;
-  position: relative;
-  display: inline-block;
   border-radius: 50%;
-  transform-origin: 50%;
 }
 
 [dir=ltr] .loadingelement {

package/es/Card/Card.module.css

@@ -1,9 +1,9 @@
 .notScroll {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .scroll {
-  /* background: var(--dot_white);
+  /* background-color: var(--dot_white);
   position: relative; */
 }
 

package/es/CheckBox/CheckBox.module.css

@@ -23,10 +23,9 @@
   --checkbox_cursor: default;
 }
 .cbBox {
-  fill: none;
+  composes: d-fill-none d-stroke-inherit from global;
   stroke-width: var(--checkbox_stroke_width);
   stroke-linecap: round;
-  stroke: inherit;
 }
 .tickPath {
   composes: cbBox;
@@ -50,12 +49,11 @@
 }
 
 .checkbox {
-  position: relative;
+  composes: d-block d-relative from global;
   font-size: 0 ;
-  display: block;
 }
 .tick {
-  position: absolute;
+  composes: d-absolute from global;
   left: 0 ;
 }
 .mediumtick {

package/es/DateTime/DateTime.module.css

@@ -16,7 +16,7 @@
 .header {
   min-height: var(--zd_size36) ;
   composes: boxPadding;
-  text-align: center;
+  composes: d-text-center from global;
   background-color: var(--zdt_datetime_header_bg);
   border-radius: 0 0 2px 2px;
   border-bottom: 1px solid var(--zdt_datetime_header_border);
@@ -27,10 +27,10 @@
 }
 
 .grid {
+  composes: d-text-center from global;
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
   line-height: 1.3846;
-  text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;
   border: 1px solid transparent;
@@ -38,21 +38,18 @@
 
 .thArrow,
 .datesStr {
+  composes: d-cursor-pointer from global;
   font-size: var(--zd_font_size13) ;
   color: var(--zdt_datetime_datestr_text);
 }
 
-.thArrow, .datesStr {
-  cursor: pointer;
-}
-
 .thArrow:hover,
 .datesStr:hover {
   color: var(--zdt_datetime_datestr_text);
 }
 
 .thArrow:hover, .datesStr:hover {
-  background: var(--zdt_datetime_datestr_hover_bg);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
 }
 
 .navigation {
@@ -89,8 +86,8 @@
   composes: dotted from '../common/common.module.css';
   font-size: var(--zd_font_size10) ;
   color: var(--zdt_datetime_daystr_text);
-  text-transform: uppercase;
   composes: semibold;
+  composes: d-uppercase from global;
   width: var(--zd_size31) ;
 }
 
@@ -143,8 +140,8 @@
 }
 
 .inActiveDate {
+  composes: d-cursor-no-drop from global;
   color: var(--zdt_datetime_invalid_text);
-  cursor: no-drop;
 }
 
 .inActiveDate:hover {
@@ -167,11 +164,10 @@
 }
 
 .dropDown {
+  composes: d-inline-block d-relative from global;
   width: var(--zd_size60) ;
-  display: inline-block;
   margin-inline: var(--zd_size4) ;
   margin-block:0 ;
-  position: relative;
 }
 
 .footer {
@@ -185,7 +181,7 @@
 }
 
 .space {
-  display: inline-block;
+  composes: d-inline-block from global;
   width: var(--zd_size15) ;
 }
 
@@ -195,7 +191,7 @@
 }
 
 .dateText {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .dateText:hover .downArrow {
@@ -205,18 +201,15 @@
 .text {
   composes: boxPadding;
   font-size: var(--zd_font_size11) ;
-  text-transform: uppercase;
   color: var(--zdt_datetime_text);
   margin-block-start: var(--zd_size14) ;
   composes: semibold;
-  display: block;
+  composes: d-block d-uppercase from global;
 }
 
 .yearContainer {
-  position: absolute;
+  composes: d-absolute d-size-full from global;
   top: 0 ;
-  width: 100% ;
-  height: 100% ;
 }
 
 [dir=ltr] .yearContainer {
@@ -228,11 +221,11 @@
 }
 
 .subContainer {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .dropBox {
-  width: 100% ;
+  composes: d-w-full from global;
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);

package/es/DateTime/DateWidget.module.css

@@ -1,20 +1,22 @@
 /* $Id */
 .container {
-  position: relative;
   composes: offSelection from '../common/common.module.css';
+  composes: d-relative from global;
+}
+.datePickIcon {
+  composes: d-h-full from global;
 }
-.datePickIcon{height:100%  }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }
 .enabled {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 .textBox {
-  position: relative;
+  composes: d-relative from global;
 }
 .inputLine {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: 0 ;
   transition: border var(--zd_transition2) linear 0s;
   border-bottom: 1px solid var(--zdt_datewidget_input_border);

package/es/DateTime/YearView.module.css

@@ -3,6 +3,7 @@
 }
 
 .month {
+  composes: d-text-center d-cursor-pointer from global;
   width: 30.333%;
   margin-block:0 var(--zd_size1) ;
   margin-inline:0 ;
@@ -10,8 +11,6 @@
   line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
-  text-align: center;
-  cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
 }
@@ -34,9 +33,9 @@
 }
 
 .year {
+  composes: d-cursor-pointer from global;
   padding-block: var(--zd_size7) ;
   padding-inline:0 ;
-  cursor: pointer;
 }
 
 .year:hover .yearText,
@@ -55,7 +54,7 @@
 }
 
 .isActive {
-  cursor: default;
+  composes: d-cursor-default from global;
 }
 
 .isActive .yearText {
@@ -77,21 +76,19 @@
 }
 
 .container {
-  height: 100% ;
-  overflow-y: auto;
-  overflow-x: hidden;
   composes: boxPadding;
+  composes: d-overflow-x-hidden d-overflow-y-auto d-h-full from global;
   background-color: var(--zdt_yearview_default_bg);
 }
 
 .yearContainer {
+  composes: d-overflow-hidden from global;
   height: var(--zd_size135) ;
-  overflow: hidden;
   transition: height var(--zd_transition1);
   padding-block-end: var(--zd_size5) ;
 }
 
 .toggleYear {
+  composes: d-p-0 from global;
   height: 0 ;
-  padding: 0 ;
 }

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

@@ -4,15 +4,15 @@
 }
 
 .container {
-    position: absolute;
+    composes: d-absolute from global;
 }
 
 .fixedContainer {
-    position: fixed;
+    composes: d-fixed from global;
 }
 
 .subContainer {
-    position: relative;
+    composes: d-relative from global;
     border-radius: var(--dropbox_border_radius);
     padding: var(--dropbox_padding);
     box-shadow: var(--dropbox_box_shadow);
@@ -74,7 +74,7 @@
 }
 
 .default {
-    width: 100% ;
+    composes: d-w-full from global;
 }
 
 /* shadow */
@@ -411,9 +411,8 @@
 }
 
 .responsive {
-    position: absolute;
+    composes: d-absolute d-w-full from global;
     bottom: 0 ;
-    width: 100% ;
     max-height: 90% ;
 }
 
@@ -426,6 +425,7 @@
 }
 
 .closeBar {
+    composes: d-cursor-pointer from global;
     /*  Variable:Ignore  */
     height: 6px;
     /*css:theme-validation:ignore*/
@@ -434,7 +434,6 @@
     margin-inline:auto ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
-    cursor: pointer;
 }
 
 .boxPadding {

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

@@ -15,7 +15,7 @@
 
 .activateInDelay {
   composes: modeForward from '../../common/animation.module.css';
-  pointer-events: none;
+  composes: d-pointer-events-none from global;
 }
 
 [dir=ltr] .activateInDelay {
@@ -31,10 +31,10 @@
 }
 
 .freezeLayer {
-  position: absolute;
   top: 0 ;
   bottom: 0 ;
   composes: activateInDelay;
+  composes: d-absolute from global;
 }
 
 [dir=ltr] .freezeLayer {
@@ -49,7 +49,7 @@
 
 .freeze {
   composes: varClass;
-  background: var(--dropbox_mob_bg_color);
+  background-color: var(--dropbox_mob_bg_color);
 }
 
 @keyframes activateInDelay {

package/es/DropDown/DropDownHeading.module.css

@@ -14,7 +14,7 @@
 .default {
   composes: dotted semibold from '../common/common.module.css';
   composes: varClass;
-  position: relative;
+  composes: d-relative from global;
   font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);

package/es/DropDown/DropDownItem.module.css

@@ -17,13 +17,11 @@
 .list {
   composes: varClass;
   composes: dflex alignVertical from '../common/common.module.css';
-  position: relative;
+  composes: d-relative d-border-solid d-cursor-pointer from global;
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13) ;
   padding: var(--dropdownitem-padding);
-  border-style: solid;
   border-color: var(--dropdownitem-border-color);
-  cursor: pointer;
   background-color: var(--dropdownitem-bg-color);
 }
 [dir=ltr] .list {
@@ -50,8 +48,8 @@
 }
 
 .children {
+  composes: d-inline-block from global;
   margin-inline-end: var(--zd_size10) ;
-  display: inline-block;
   font-size: 0 ;
 }
 
@@ -61,11 +59,9 @@
 
 .user {
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
-  position: absolute;
+  composes: d-absolute d-invisible d-opacity-0 from global;
   top: 0 ;
   bottom: 0 ;
-  opacity: 0;
-  visibility: hidden;
   width: var(--dropdownitem-user-width);
   border-width: var(--dropdownitem-user-border-width);
   border-style: var(--dropdownitem-user-border-style);

package/es/Label/Label.module.css

@@ -9,7 +9,7 @@
 /* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
-  vertical-align: middle;
+  composes: d-align-middle from global;
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
   color: var(--label_text_color);
@@ -40,10 +40,10 @@
   --label_cursor: default;
 }
 .title {
-  display: block;
+  composes: d-block from global;
 }
 .subtitle {
-  display: inline-block;
+  composes: d-inline-block from global;
 }
 .font_default {
   --label_font_weight: var(--zd-fw-normal);

package/es/ListItem/ListItem.module.css

@@ -28,7 +28,7 @@
 }
 .list {
   composes: varClass;
-  position: relative;
+  composes: d-relative d-border-solid d-cursor-pointer from global;
   list-style: none;
   color: var(--listitem_text_color);
   font-size: var(--listitem_font_size);
@@ -37,9 +37,7 @@
   text-decoration: none;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
-  border-style: solid;
   border-color: var(--listitem_border_color);
-  cursor: pointer;
 }
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
@@ -93,9 +91,9 @@
   composes: dflex from '../common/common.module.css';
 }
 .iconBox {
+  composes: d-text-center from global;
   width: var(--zd_size20) ;
   margin-inline-end: var(--zd_size10) ;
-  text-align: center;
 }
 .iconBox,
 .leftAvatar {
@@ -126,22 +124,21 @@
   composes: justifyFend from '../common/common.module.css';
 }
 .selfAlign_center{
-  align-self: center;
+  composes: d-self-center from global;
 }
 
 .contentWrapper {
   composes: dflex flexrow from '../common/common.module.css';
-  align-items: stretch;
-  width: 100% ;
+  composes: d-items-stretch d-w-full from global;
 }
 .alignLhsBox_end {
-  align-items: flex-end;
+  composes: d-items-end from global;
 }
 .alignLhsBox_center {
-  align-items: center;
+  composes: d-items-center from global;
 }
 .lhsBoxInner{
-  height: 100% ;
+  composes: d-h-full from global;
   max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
 }
 .defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
@@ -225,7 +222,7 @@
 .tickIcon,
 .defaultTick,
 .darkTick {
-  position: absolute;
+  composes: d-absolute from global;
   color: var(--listitem_tickicon_color);
   top:50% ;
   font-size: 0 ;
@@ -281,5 +278,5 @@
 }
 
 .titleBox {
-  align-items: stretch;
+  composes: d-items-stretch from global;
 }

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

@@ -13,5 +13,5 @@
   .buttonText{
     font-size: var(--zd_font_size15) ;
     composes: dotted from '../../common/common.module.css';
-    padding: 0  
+    composes: d-p-0 from global;
   }