@zohodesk/components 1.6.1 → 1.6.2

package/es/v1/Switch/css/Switch_v1.module.css

@@ -4,47 +4,47 @@
     gap: var(--zd_size6) ;
 }
 .small {
-    --local-switch-track-width: var(--zd_size22);
-    --local-switch-track-height: var(--zd_size12);
+    --local-switch-track-width: 22px;
+    --local-switch-track-height: 12px;
     --local-switch-track-border-radius: 8px;
-    --local-switch-thumb-size: var(--zd_size10);
-    --local-switch-onLabel-height: var(--zd_size6);
-    --local-switch-onLabel-left: var(--zd_size5);
-    --local-switch-offLabel-size: var(--zd_size7);
-    --local-switch-offLabel-right: var(--zd_size2);
+    --local-switch-thumb-size: 10px;
+    --local-switch-onLabel-height: 6px;
+    --local-switch-onLabel-left: 5px;
+    --local-switch-offLabel-size: 7px;
+    --local-switch-offLabel-right: 2px;
     --local-switch-onLabel-scaleX: 1.2;
 }
 .medium {
-    --local-switch-track-width: var(--zd_size28);
-    --local-switch-track-height: var(--zd_size16);
+    --local-switch-track-width: 28px;
+    --local-switch-track-height: 16px;
     --local-switch-track-border-radius: 16px;
-    --local-switch-thumb-size: var(--zd_size14);
-    --local-switch-onLabel-height: var(--zd_size8);
-    --local-switch-onLabel-left: var(--zd_size6);
-    --local-switch-offLabel-size: var(--zd_size8);
-    --local-switch-offLabel-right: var(--zd_size3);
+    --local-switch-thumb-size: 14px;
+    --local-switch-onLabel-height: 8px;
+    --local-switch-onLabel-left: 6px;
+    --local-switch-offLabel-size: 8px;
+    --local-switch-offLabel-right: 3px;
     --local-switch-onLabel-scaleX: 1.4;
 }
 .large {
-    --local-switch-track-width: var(--zd_size34);
-    --local-switch-track-height: var(--zd_size20);
+    --local-switch-track-width: 34px;
+    --local-switch-track-height: 20px;
     --local-switch-track-border-radius: 10px;
-    --local-switch-thumb-size: var(--zd_size18);
-    --local-switch-onLabel-height: var(--zd_size10);
-    --local-switch-onLabel-left: var(--zd_size7);
-    --local-switch-offLabel-size: var(--zd_size9);
-    --local-switch-offLabel-right: var(--zd_size4);
+    --local-switch-thumb-size: 18px;
+    --local-switch-onLabel-height: 10px;
+    --local-switch-onLabel-left: 7px;
+    --local-switch-offLabel-size: 9px;
+    --local-switch-offLabel-right: 4px;
     --local-switch-onLabel-scaleX: 1.6;
 }
 .xlarge {
-    --local-switch-track-width: var(--zd_size40);
-    --local-switch-track-height: var(--zd_size24);
+    --local-switch-track-width: 40px;
+    --local-switch-track-height: 24px;
     --local-switch-track-border-radius: 12px;
-    --local-switch-thumb-size: var(--zd_size22);
-    --local-switch-onLabel-height: var(--zd_size12);
-    --local-switch-onLabel-left: var(--zd_size8);
-    --local-switch-offLabel-size: var(--zd_size10);
-    --local-switch-offLabel-right: var(--zd_size5);
+    --local-switch-thumb-size: 22px;
+    --local-switch-onLabel-height: 12px;
+    --local-switch-onLabel-left: 8px;
+    --local-switch-offLabel-size: 10px;
+    --local-switch-offLabel-right: 5px;
     --local-switch-onLabel-scaleX: 1.8;
 }
 .disabled, .readonly {

package/lib/Avatar/Avatar.module.css

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

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -7,13 +7,13 @@
   --avatarteam_outline_style: solid;
   --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
-  --avatarteam_width: var(--zd_size5);
-  --avatarteam_height: var(--zd_size5);
+  --avatarteam_width: 5px;
+  --avatarteam_height: 5px;
   --avatarteam_border_radius: 50%;
   --avatarteam_bottom_top: initial;
   --avatarteam_bottom_left: initial;
   --avatarteam_bottom_right: initial;
-  --avatarteam_top_top: var(--zd_size1);
+  --avatarteam_top_top: 1px;
 }
 .container {
   position: relative;
@@ -92,18 +92,18 @@
 .smallteam,
 .xsmallteam,
 .xxsmallteam {
-  --avatarteam_height: var(--zd_size3);
-  --avatarteam_width: var(--zd_size3);
+  --avatarteam_height: 3px;
+  --avatarteam_width: 3px;
 }
 .mediumteam,
 .xmediumteam {
-  --avatarteam_height: var(--zd_size5);
-  --avatarteam_width: var(--zd_size5);
+  --avatarteam_height: 5px;
+  --avatarteam_width: 5px;
 }
 .largeteam,
 .xlargeteam {
-  --avatarteam_height: var(--zd_size7);
-  --avatarteam_width: var(--zd_size7);
+  --avatarteam_height: 7px;
+  --avatarteam_width: 7px;
 }
 
 .xxsmallteam {
@@ -112,78 +112,78 @@
 }
 .xxsmallteam::after,
 .xxsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size13);
+  --avatarteam_bottom_top: 13px;
 }
 .xxsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
 .xxsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 
 .smallteam::after,
 .smallteam:before {
-  --avatarteam_bottom_top: var(--zd_size17);
+  --avatarteam_bottom_top: 17px;
 }
 .smallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
 .smallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 .xsmallteam::after,
 .xsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size24);
+  --avatarteam_bottom_top: 24px;
 }
 .xsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_left: -10px;
 }
 .xsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_right: -10px;
 }
 
 .mediumteam::after,
 .mediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size26);
+  --avatarteam_bottom_top: 26px;
 }
 .mediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_left: -13px;
 }
 .mediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_right: -13px;
 }
 
 .xmediumteam::after,
 .xmediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size30);
+  --avatarteam_bottom_top: 30px;
 }
 .xmediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_left: -16px;
 }
 .xmediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_right: -16px;
 }
 
 .largeteam::after,
 .largeteam:before {
-  --avatarteam_bottom_top: var(--zd_size46);
+  --avatarteam_bottom_top: 46px;
 }
 .largeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_left: -24px;
 }
 .largeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_right: -24px;
 }
 
 .xlargeteam::after,
 .xlargeteam:before {
-  --avatarteam_bottom_top: var(--zd_size65);
+  --avatarteam_bottom_top: 65px;
 }
 .xlargeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size29) * -1 );
+  --avatarteam_bottom_left: -29px;
 }
 .xlargeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size29) * -1 );
+  --avatarteam_bottom_right: -29px;
 }

package/lib/Button/css/Button.module.css

@@ -3,13 +3,13 @@
   /*  Variable:Ignore  */
   --button_letter_spacing: 0.2px;
   --button_cursor: pointer;
-  --button_font_size: var(--zd_font_size13);
+  --button_font_size: 13px;
   --button_text_color: var(--zdt_button_default_text);
   --button_font_weight: var(--zd-fw-normal);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
-  --button_min_width: var(--zd_size90);
+  --button_min_width: 90px;
   --button_height: auto;
   --button_border_width: 0;
   --button_border_style: solid;
@@ -72,38 +72,38 @@
 }
 
 .small {
-  --button_padding: var(--zd_size4) var(--zd_size7);
-  --button_min_width: var(--zd_size50);
-  --button_font_size: var(--zd_font_size10);
+  --button_padding: 4px 7px;
+  --button_min_width: 50px;
+  --button_font_size: 10px;
 }
 
 .medium {
-  --button_padding: var(--zd_size6) var(--zd_size15);
+  --button_padding: 6px 15px;
 }
 
 .large {
-  --button_padding: var(--zd_size9) var(--zd_size14);
-  --button_min_width: var(--zd_size80);
-  --button_font_size: var(--zd_font_size12);
+  --button_padding: 9px 14px;
+  --button_min_width: 80px;
+  --button_font_size: 12px;
 }
 
 .xlarge {
-  --button_padding: var(--zd_size12) var(--zd_size25);
-  --button_min_width: var(--zd_size90);
-  --button_font_size: var(--zd_font_size13);
+  --button_padding: 12px 25px;
+  --button_min_width: 90px;
+  --button_font_size: 13px;
 }
 
 .mediumBtn {
-  --button_height: var(--zd_size42);
-  --button_min_width: var(--zd_size42);
-  --button_font_size: var(--zd_font_size10);
+  --button_height: 42px;
+  --button_min_width: 42px;
+  --button_font_size: 10px;
   text-align: center;
 }
 
 .smallBtn {
-  --button_height: var(--zd_size22);
-  --button_min_width: var(--zd_size22);
-  --button_font_size: var(--zd_font_size13);
+  --button_height: 22px;
+  --button_min_width: 22px;
+  --button_font_size: 13px;
   text-align: center;
 }
 
@@ -134,7 +134,7 @@
 .plaindanger,
 .plainsuccess,
 .plainsecondary {
-  --button_padding: var(--zd_size5);
+  --button_padding: 5px;
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }

package/lib/Buttongroup/Buttongroup.module.css

@@ -24,15 +24,17 @@
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+  --buttongroup_padding: 20px 0 20px 60px
+    /*rtl: 20px 60px 20px 0*/
+  ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+  --buttongroup_padding: 20px 60px 20px 0;
 }
 
 .header {
-  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
+  --buttongroup_padding: 12px 20px;
   --buttongroup_border_width: 0 0 1px 0;
 }
 

package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css

@@ -1,6 +1,6 @@
 .varClass {
-    --local-colorIndicator-height: var(--zd_size10);
-    --local-colorIndicator-width: var(--zd_size10);
+    --local-colorIndicator-height: 10px;
+    --local-colorIndicator-width: 10px;
     --local-colorIndicator-border-radius: 10px;
 }
 

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -33,7 +33,7 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: var(--zd_size10) 0 0 0;
+    --dropbox_padding: 10px 0 0 0;
 }
 
 /* sizes */
@@ -201,7 +201,10 @@
     position: absolute;
     height: var(--zd_size34) ;
     width: var(--zd_size34) ;
-    clip: rect(var(--zd_size3), var(--zd_size29), var(--zd_size17), var(--zd_size8)) ;
+    clip: rect(var(--zd_size3),
+ var(--zd_size29),
+ var(--zd_size17),
+ var(--zd_size8)) ;
     padding: var(--zd_size4) ;
     display: flex;
     align-items: center;
@@ -434,7 +437,7 @@
 }
 
 .boxPadding {
-    --dropbox_padding: var(--zd_size10) 0;
+    --dropbox_padding: 10px 0;
 }
 
 .darkPalette {

package/lib/DropDown/DropDownHeading.module.css

@@ -2,14 +2,14 @@
   /* dropdownheading default variables */
   --dropdownheading_text_color: var(--zdt_dropdown_default_text);
   --dropdownheading_text_transform: uppercase;
-  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
+  --dropdownheading_padding: 10px 20px;
   --dropdownheading_bg_color: none;
 
   /* dropdownheading underline default variables */
-  --dropdownheading_underline_width: var(--zd_size20);
-  --dropdownheading_underline_height: var(--zd_size1);
+  --dropdownheading_underline_width: 20px;
+  --dropdownheading_underline_height: 1px;
   --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
-  --dropdownheading_underline_left: var(--zd_size20);
+  --dropdownheading_underline_left: 20px;
 }
 .default {
   composes: dotted semibold from '../common/common.module.css';

package/lib/DropDown/DropDownItem.module.css

@@ -1,11 +1,11 @@
 .varClass {
   /* dropdownitem default variables */
-  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
+  --dropdownitem-padding: 9px 19px;
   --dropdownitem-border-color: var(--zdt_dropdown_default_border);
   --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);
 
   /* dropdownitem user default variables */
-  --dropdownitem-user-width: var(--zd_size42);
+  --dropdownitem-user-width: 42px;
   --dropdownitem-user-border-style: solid;
   --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
   --dropdownitem-user-cursor: pointer;
@@ -42,11 +42,11 @@
 }
 
 [dir=ltr] .padding {
-  --dropdownitem-padding: 0 var(--zd_size50) 0 0;
+  --dropdownitem-padding: 0 50px 0 0/*rtl: 0 0 0 50px*/;
 }
 
 [dir=rtl] .padding {
-  --dropdownitem-padding: 0 0 0 var(--zd_size50);
+  --dropdownitem-padding: 0 0 0 50px;
 }
 
 .children {

package/lib/DropDown/DropDownSearch.module.css

@@ -1,14 +1,14 @@
 .varClass {
   /* dropdownsearch default variables */
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }
 .search {
   composes: varClass;
   padding: var(--dropdownsearch-padding);
 }
 .smallSearch {
-  --dropdownsearch-padding: 0 var(--zd_size5) 0;
+  --dropdownsearch-padding: 0 5px 0;
 }
 .mediumSearch {
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }

package/lib/Label/Label.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* label default variables */
-  --label_font_size: var(--zd_font_size14);
+  --label_font_size: 14px;
   --label_text_color: var(--zdt_label_default_text);
   --label_font_weight: var(--zd-fw-normal);
   --label_cursor: default;
@@ -17,19 +17,19 @@
   cursor: var(--label_cursor);
 }
 .xsmall {
-  --label_font_size: var(--zd_font_size12);
+  --label_font_size: 12px;
   --label_line_height: 1.5;
 }
 .small {
-  --label_font_size: var(--zd_font_size13);
+  --label_font_size: 13px;
   --label_line_height: 1.385;
 }
 .medium {
-  --label_font_size: var(--zd_font_size14);
+  --label_font_size: 14px;
   --label_line_height: 1.286;
 }
 .large {
-  --label_font_size: var(--zd_font_size26);
+  --label_font_size: 26px;
   --label_line_height: 0.6923;
   composes: semibold from '../common/common.module.css';
 }