@zohodesk/components 1.0.0-temp-155 → 1.0.0-temp-157

package/es/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* avatar default variables */
   --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
   --avatar_bg_color: var(--zdt_avatar_default_bg);
   --avatar_border_radius: 50%;
   --avatar_border_width: 0;
@@ -141,31 +141,31 @@
 }
 
 .xxsmall {
-  --avatar_font_size: 8px;
+  --avatar_font_size: var(--zd_font_size8);
 }
 
 .small {
-  --avatar_font_size: 9px;
+  --avatar_font_size: var(--zd_font_size9);
 }
 
 .xsmall {
-  --avatar_font_size: 12px;
+  --avatar_font_size: var(--zd_font_size12);
 }
 
 .medium {
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
 }
 
 .xmedium {
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
 }
 
 .large {
-  --avatar_font_size: 18px;
+  --avatar_font_size: var(--zd_font_size18);
 }
 
 .xlarge {
-  --avatar_font_size: 28px;
+  --avatar_font_size: var(--zd_font_size28);
 }
 
 .white {

package/es/AvatarTeam/AvatarTeam.module.css

@@ -1,19 +1,19 @@
 .varClass {
   /* avatar team default variables */
-  --avatarteam_border_width: 1px;
+  --avatarteam_border_width: var(--zd_size1);
   --avatarteam_border_style: solid;
   --avatarteam_border_color: var(--zdt_avatarteam_default_border);
-  --avatarteam_outline_width: 1px;
+  --avatarteam_outline_width: var(--zd_size1);
   --avatarteam_outline_style: solid;
   --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
-  --avatarteam_width: 5px;
-  --avatarteam_height: 5px;
+  --avatarteam_width: var(--zd_size5);
+  --avatarteam_height: var(--zd_size5);
   --avatarteam_border_radius: 50%;
   --avatarteam_bottom_top: initial;
   --avatarteam_bottom_left: initial;
   --avatarteam_bottom_right: initial;
-  --avatarteam_top_top: 1px;
+  --avatarteam_top_top: var(--zd_size1);
 }
 .container {
   position: relative;
@@ -92,98 +92,97 @@
 .smallteam,
 .xsmallteam,
 .xxsmallteam {
-  --avatarteam_height: 3px;
-  --avatarteam_width: 3px;
+  --avatarteam_height: var(--zd_size3);
+  --avatarteam_width: var(--zd_size3);
 }
 .mediumteam,
 .xmediumteam {
-  --avatarteam_height: 5px;
-  --avatarteam_width: 5px;
+  --avatarteam_height: var(--zd_size5);
+  --avatarteam_width: var(--zd_size5);
 }
 .largeteam,
 .xlargeteam {
-  --avatarteam_height: 7px;
-  --avatarteam_width: 7px;
+  --avatarteam_height: var(--zd_size7);
+  --avatarteam_width: var(--zd_size7);
 }
 
 .xxsmallteam {
-  /*  Variable:Ignore  */
   --avatarteam_top_top: 0px;
 }
 .xxsmallteam::after,
 .xxsmallteam:before {
-  --avatarteam_bottom_top: 13px;
+  --avatarteam_bottom_top: var(--zd_size13);
 }
 .xxsmallteam:after {
-  --avatarteam_bottom_left: calc(8px * -1);
+  --avatarteam_bottom_left: calc(var(--zd_size8) * -1);
 }
 .xxsmallteam:before {
-  --avatarteam_bottom_right: calc(8px * -1);
+  --avatarteam_bottom_right: calc(var(--zd_size8) * -1);
 }
 
 
 .smallteam::after,
 .smallteam:before {
-  --avatarteam_bottom_top: 17px;
+  --avatarteam_bottom_top: var(--zd_size17);
 }
 .smallteam:after {
-  --avatarteam_bottom_left: calc(8px * -1);
+  --avatarteam_bottom_left: calc(var(--zd_size8) * -1);
 }
 .smallteam:before {
-  --avatarteam_bottom_right: calc(8px * -1);
+  --avatarteam_bottom_right: calc(var(--zd_size8) * -1);
 }
 
 .xsmallteam::after,
 .xsmallteam:before {
-  --avatarteam_bottom_top: 24px;
+  --avatarteam_bottom_top: var(--zd_size24);
 }
 .xsmallteam:after {
-  --avatarteam_bottom_left: calc(10px * -1);;
+  --avatarteam_bottom_left: calc(var(--zd_size10) * -1);
 }
 .xsmallteam:before {
-  --avatarteam_bottom_right: calc(10px * -1);;
+  --avatarteam_bottom_right: calc(var(--zd_size10) * -1);
 }
 
 .mediumteam::after,
 .mediumteam:before {
-  --avatarteam_bottom_top: 26px;
+  --avatarteam_bottom_top: var(--zd_size26);
 }
 .mediumteam:after {
-  --avatarteam_bottom_left: calc(13px * -1);
+  --avatarteam_bottom_left: calc(var(--zd_size13) * -1);
 }
 .mediumteam:before {
-  --avatarteam_bottom_right: calc(13px * -1);
+  --avatarteam_bottom_right: calc(var(--zd_size13) * -1);
 }
 
 .xmediumteam::after,
 .xmediumteam:before {
-  --avatarteam_bottom_top: 30px;
+  --avatarteam_bottom_top: var(--zd_size30);
 }
 .xmediumteam:after {
-  --avatarteam_bottom_left: calc(16px * -1);
+  --avatarteam_bottom_left: calc(var(--zd_size16) * -1);
 }
 .xmediumteam:before {
-  --avatarteam_bottom_right: calc(16px * -1);
+  --avatarteam_bottom_right: calc(var(--zd_size16) * -1);
 }
 
 .largeteam::after,
 .largeteam:before {
-  --avatarteam_bottom_top: 46px;
+  --avatarteam_bottom_top: var(--zd_size46);
 }
 .largeteam:after {
-  --avatarteam_bottom_left: calc(24px * -1);
+  --avatarteam_bottom_left: calc(var(--zd_size24) * -1);
 }
 .largeteam:before {
-  --avatarteam_bottom_right: calc(24px * -1);
+  --avatarteam_bottom_right: calc(var(--zd_size24) * -1);
 }
 
 .xlargeteam::after,
 .xlargeteam:before {
-  --avatarteam_bottom_top: 65px;
+  --avatarteam_bottom_top: var(--zd_size65);
 }
 .xlargeteam:after {
-  --avatarteam_bottom_left: calc(29px * -1);
+  --avatarteam_bottom_left: calc(var(--zd_size29) * -1);
 }
 .xlargeteam:before {
-  --avatarteam_bottom_right: calc(29px * -1);
+  --avatarteam_bottom_right: calc(var(--zd_size29) * -1);
 }

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

@@ -1,15 +1,14 @@
 .varClass {
   /* button default variables */
-  /*  Variable:Ignore  */
   --button_letter_spacing: 0.2px;
   --button_cursor: pointer;
-  --button_font_size: 13px;
+  --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
   --button_font_family: var(--zd_regular);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
-  --button_min_width: 90px;
+  --button_min_width: var(--zd_size90);
   --button_height: auto;
   --button_border_width: 0;
   --button_border_style: solid;
@@ -72,38 +71,38 @@
 }
 
 .small {
-  --button_padding: 4px 7px;
-  --button_min_width: 50px;
-  --button_font_size: 10px;
+  --button_padding: var(--zd_size4) var(--zd_size7);
+  --button_min_width: var(--zd_size50);
+  --button_font_size: var(--zd_font_size10);
 }
 
 .medium {
-  --button_padding: 6px 15px;
+  --button_padding: var(--zd_size6) var(--zd_size15);
 }
 
 .large {
-  --button_padding: 9px 14px;
-  --button_min_width: 80px;
-  --button_font_size: 12px;
+  --button_padding: var(--zd_size9) var(--zd_size14);
+  --button_min_width: var(--zd_size80);
+  --button_font_size: var(--zd_font_size12);
 }
 
 .xlarge {
-  --button_padding: 12px 25px;
-  --button_min_width: 90px;
-  --button_font_size: 13px;
+  --button_padding: var(--zd_size12) var(--zd_size25);
+  --button_min_width: var(--zd_size90);
+  --button_font_size: var(--zd_font_size13);
 }
 
 .mediumBtn {
-  --button_height: 42px;
-  --button_min_width: 42px;
-  --button_font_size: 10px;
+  --button_height: var(--zd_size42);
+  --button_min_width: var(--zd_size42);
+  --button_font_size: var(--zd_font_size10);
   text-align: center;
 }
 
 .smallBtn {
-  --button_height: 22px;
-  --button_min_width: 22px;
-  --button_font_size: 13px;
+  --button_height: var(--zd_size22);
+  --button_min_width: var(--zd_size22);
+  --button_font_size: var(--zd_font_size13);
   text-align: center;
 }
 
@@ -132,7 +131,7 @@
 
 .plainprimary {
   --button_text_color: var(--zdt_button_default_text);
-  --button_padding: 5px;
+  --button_padding: var(--zd_size5);
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
@@ -142,7 +141,7 @@
 
 .plainsecondary {
   --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: 5px;
+  --button_padding: var(--zd_size5);
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
@@ -252,8 +251,8 @@
 .loading {
   position: absolute;
   top: 50%;
-  width: 20px;
-  height: 20px;
+  width: var(--zd_size20);
+  height: var(--zd_size20);
 }
 
 [dir=ltr] .loading {
@@ -304,23 +303,23 @@
 
 .smallloading,
 .mediumloading {
-  height: 10px;
-  width: 10px;
+  height: var(--zd_size10);
+  width: var(--zd_size10);
 }
 
 .loadingelement:after {
-  top: 1px;
-  bottom: 1px;
+  top: var(--zd_size1);
+  bottom: var(--zd_size1);
 }
 
 [dir=ltr] .loadingelement:after {
-  left: 1px;
-  right: 1px;
+  left: var(--zd_size1);
+  right: var(--zd_size1);
 }
 
 [dir=rtl] .loadingelement:after {
-  right: 1px;
-  left: 1px;
+  right: var(--zd_size1);
+  left: var(--zd_size1);
 }
 
 .loadingelement {
@@ -347,21 +346,21 @@
 }
 
 .loadingelement:before {
-  top: -1px;
-  bottom: -1px;
+  top: calc(var(--zd_size1) * -1);
+  bottom: calc(var(--zd_size1) * -1);
   background: var(--zdt_button_loading_linear_gradient);
   background-repeat: no-repeat;
   background-size: 50% 50%;
 }
 
 [dir=ltr] .loadingelement:before {
-  left: -1px;
-  right: -1px;
+  left: calc(var(--zd_size1) * -1);
+  right: calc(var(--zd_size1) * -1);
 }
 
 [dir=rtl] .loadingelement:before {
-  right: -1px;
-  left: -1px;
+  right: calc(var(--zd_size1) * -1);
+  left: calc(var(--zd_size1) * -1);
 }
 
 .primaryelement:before {
@@ -458,10 +457,10 @@
 }
 
 .successelement {
-  height: 15px;
+  height: var(--zd_size15);
   position: relative;
-  top: -2px;
-  width: 6px;
+  top: calc(var(--zd_size2) * -1);
+  width: var(--zd_size6);
   transform: scaleX(-1) rotate(135deg);
   -moz-transform: scaleX(-1) rotate(135deg);
   -webkit-transform: scaleX(-1) rotate(135deg);
@@ -480,12 +479,12 @@
 
   50% {
     height: 0;
-    width: 6px;
+    width: var(--zd_size6);
   }
 
   100% {
-    height: 15px;
-    width: 6px;
+    height: var(--zd_size15);
+    width: var(--zd_size6);
   }
 }
 
@@ -497,12 +496,12 @@
 
   50% {
     height: 0;
-    width: 6px;
+    width: var(--zd_size6);
   }
 
   100% {
-    height: 15px;
-    width: 6px;
+    height: var(--zd_size15);
+    width: var(--zd_size6);
   }
 }
 
@@ -514,12 +513,12 @@
 
   50% {
     height: 0;
-    width: 6px;
+    width: var(--zd_size6);
   }
 
   100% {
-    height: 15px;
-    width: 6px;
+    height: var(--zd_size15);
+    width: var(--zd_size6);
   }
 }
 

package/es/Buttongroup/Buttongroup.module.css

@@ -24,17 +24,17 @@
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: 20px 0 20px 60px
-    /*rtl: 20px 60px 20px 0*/
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)
+    /*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/
   ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: 20px 0 20px 60px  ;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)  ;
 }
 
 .header {
-  --buttongroup_padding: 12px 20px;
+  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
   --buttongroup_border_width: 0 0 1px 0;
 }
 
@@ -75,11 +75,11 @@
 }
 
 [dir=ltr] .alignleft>button {
-  margin-left: 15px;
+  margin-left: var(--zd_size15);
 }
 
 [dir=rtl] .alignleft>button {
-  margin-right: 15px;
+  margin-right: var(--zd_size15);
 }
 
 [dir=ltr] .alignright>button:last-child {
@@ -91,17 +91,17 @@
 }
 
 [dir=ltr] .alignright>button {
-  margin-right: 15px;
+  margin-right: var(--zd_size15);
 }
 
 [dir=rtl] .alignright>button {
-  margin-left: 15px;
+  margin-left: var(--zd_size15);
 }
 
 [dir=ltr] .aligncenter>button {
-  margin-right: 15px;
+  margin-right: var(--zd_size15);
 }
 
 [dir=rtl] .aligncenter>button {
-  margin-left: 15px;
+  margin-left: var(--zd_size15);
 }

package/es/CheckBox/CheckBox.module.css

@@ -2,7 +2,7 @@
   /* checkbox default variables */
   --checkbox_bg_color: var(--zdt_checkbox_default_bg);
   --checkbox_cursor: auto;
-  --checkbox_stroke_width: 2px;
+  --checkbox_stroke_width: var(--zd_size2);
   --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
 
   /* checkbox checked state default variables */
@@ -41,12 +41,12 @@
   --checkbox_bg_color: inherit;
 }
 .medium {
-  width: 16px;
-  height: 16px;
+  width: var(--zd_size16);
+  height: var(--zd_size16);
 }
 .small {
-  width: 13px;
-  height: 13px;
+  width: var(--zd_size13);
+  height: var(--zd_size13);
 }
 
 .checkbox {
@@ -59,15 +59,15 @@
   left: 0;
 }
 .mediumtick {
-  top: -2px;
-  height: 20px;
-  width: 20px;
+  top: calc(var(--zd_size2) * -1);
+  height: var(--zd_size20);
+  width: var(--zd_size20);
 }
 .smalltick {
-  top: -3px;
-  height: 18px;
-  width: 18px;
-  left: -1px;
+  top: calc(var(--zd_size3) * -1);
+  height: var(--zd_size18);
+  width: var(--zd_size18);
+  left: calc(var(--zd_size1) * -1);
 }
 
 .checkedtickPath {
@@ -91,10 +91,10 @@
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
 [dir=ltr] .text {
-  margin-left: 6px;
+  margin-left: var(--zd_size6);
 }
 [dir=rtl] .text {
-  margin-right: 6px;
+  margin-right: var(--zd_size6);
 }
 
 .checkedprimary,