@zohodesk/components 1.4.23 → 1.5.2

package/README.md

@@ -2,6 +2,15 @@
 
 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.5.2
+
+- **TextBoxIcon**
+  - Removed `--textboxicon_line_height` and `--textboxicon_line_color` to avoid overriding the InputFieldLine border properties.
+
+# 1.5.1
+
+- Font Family Migrated to Font-weight across all css  (Impacted)
+
 # 1.4.23
 
 - **Typography**

package/es/AppContainer/AppContainer.js

@@ -9,6 +9,7 @@ import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import "../common/a11y.module.css";

package/es/AppContainer/AppContainer.module.css

@@ -8,8 +8,9 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container {
-  font-family: var(--zd_regular);
+.container, .container button, .container input, .container textarea ,.container select {
+  /* font-family: var(--zd_regular); */
+  font-family: var(--zd-font-family), var(--zd_fallback_font, ZDLato);
 }
 .tooltip {
   height: 0 ;

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

@@ -5,7 +5,7 @@
   --button_cursor: pointer;
   --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
-  --button_font_family: var(--zd_regular);
+  --button_font_weight: var(--zd-fw-normal);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
@@ -49,7 +49,7 @@
   position: relative;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
-  font-family: var(--button_font_family);
+  font-weight: var(--button_font_weight);
   text-transform: var(--button_text_transform);
   min-width: var(--button_min_width);
   height: var(--button_height);
@@ -63,7 +63,7 @@
 }
 
 .bold {
-  --button_font_family: var(--zd_semibold);
+  --button_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
@@ -623,7 +623,7 @@
 }
 
 .loader {
-  color: var(--dot_mirror)
+  color: var(--dot_mirror);
 }
 
 [dir=ltr] .strike {
@@ -633,34 +633,43 @@
 [dir=rtl] .strike {
   background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
 }
+
 .primaryStrike {
   --button_strike_color: var(--zdt_button_primary_strike);
 }
+
 .primaryfilledStrike {
   --button_strike_color: var(--zdt_button_primaryFilled_strike);
   --button_border_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerStrike {
   --button_strike_color: var(--zdt_button_danger_strike);
 }
+
 .dangerfilledStrike {
   --button_strike_color: var(--zdt_button_dangerFilled_strike);
   --button_border_color: var(--zdt_button_dangerfill_bg);
 }
+
 .secondaryStrike {
   --button_strike_color: var(--zdt_button_secondary_border);
 }
+
 .secondaryfilledStrike {
   --button_strike_color: var(--zdt_button_secondaryFilled_strike);
   --button_border_color: var(--zdt_button_secondaryfill_bg);
 }
+
 .tertiaryfilledStrike {
   --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
   --button_border_color: var(--zdt_button_tertiaryfill_bg);
 }
+
 .successStrike {
   --button_strike_color: var(--zdt_button_success_strike);
 }
+
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
   --button_border_color: var(--zdt_button_successfill_border);

package/es/ColorSelect/ColorSingleSelect.js

@@ -24,7 +24,6 @@ function ColorSingleSelect(props) {
     customClass,
     customProps,
     borderColor,
-    children,
     dataId,
     renderRightPlaceholderNode,
     placeholder,

package/es/DateTime/DateTime.module.css

@@ -1,5 +1,5 @@
 .semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 
 [dir=ltr] .boxPadding {
@@ -29,7 +29,7 @@
 }
 
 .datesStr {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .grid {
@@ -122,7 +122,8 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.holiday,.inActiveDate.holiday:hover {
+.invalidDate.holiday,
+.inActiveDate.holiday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -147,15 +148,17 @@
   background-color: var(--zdt_datetime_selected_bg);
   border-radius: 50%;
 }
-.inActiveDate{
-color: var(--zdt_datetime_invalid_text);
-cursor: no-drop;
+
+.inActiveDate {
+  color: var(--zdt_datetime_invalid_text);
+  cursor: no-drop;
 }
-.inActiveDate:hover
-{
+
+.inActiveDate:hover {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.holiday:hover{
+
+.inActiveDate:hover, .inActiveDate.holiday:hover {
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }

package/es/DateTime/YearView.module.css

@@ -61,7 +61,7 @@
 }
 
 .isActive .yearText {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--zdt_yearview_year_hover_text);
   font-size: var(--zd_font_size11) ;
 }

package/es/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
   font-size: inherit ;
-  font-weight: initial;
+  font-weight: var(--zd-fw-semibold);
   margin: initial ;
 }

package/es/Label/Label.module.css

@@ -2,7 +2,7 @@
   /* label default variables */
   --label_font_size: var(--zd_font_size14);
   --label_text_color: var(--zdt_label_default_text);
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
   --label_cursor: default;
   --label_line_height: 1.286;
 }
@@ -13,24 +13,24 @@
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
   color: var(--label_text_color);
-  font-family: var(--label_font_family);
+  font-weight: var(--label_font_weight);
   cursor: var(--label_cursor);
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
-  --label_line_height:1.5;
+  --label_line_height: 1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
-  --label_line_height:1.385;
+  --label_line_height: 1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
-  --label_line_height:1.286;
+  --label_line_height: 1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
-  --label_line_height:0.6923;
+  --label_line_height: 0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {
@@ -46,10 +46,10 @@
   display: inline-block;
 }
 .font_default {
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
 }
 .font_primary {
-  --label_font_family: var(--zd_semibold);
+  --label_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 .dotted {

package/es/MultiSelect/MultiSelect.module.css

@@ -196,7 +196,7 @@
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  font-family: inherit;
+  font-weight: var(--zd-fw-normal);
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);

package/es/Tab/Tabs.module.css

@@ -145,7 +145,7 @@
 }
 
 .emptyStateTitle {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;

package/es/TextBox/TextBox.module.css

@@ -9,7 +9,7 @@
   --textbox_width: 100%;
   --textbox_height: var(--zd_size35);
   --textbox_border_radius: none;
-  --textbox_font_family: var(--zd_regular);
+  --textbox_font_weight: var(--zd-fw-normal);
   /*  Variable:Ignore  */
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
@@ -166,18 +166,18 @@
 .primary,
 .secondary,
 .light {
-  font-family: var(--textbox_font_family);
+  font-weight: var(--textbox_font_weight);
 }
 
 .primary {
   --textbox_text_color: var(--zdt_textbox_default_text);
-  --textbox_font_family: var(--zd_semibold);
+  --textbox_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 
 .secondary {
   --textbox_text_color: var(--zdt_textbox_secondary_text);
-  --textbox_font_family: var(--zd_light);
+  --textbox_font_weight: var(--zd-fw-light);
 }
 
 .light {

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -1,8 +1,4 @@
 .varClass {
-  /* textboxicon default variables */
-  --textboxicon_line_height: 1px;
-  --textboxicon_line_color: var(--zdt_textboxicon_default_line_bg);
-
   /* textboxicon icon default variables */
   --textboxicon_icon_margin: 0 var(--zd_size5);
   --textboxicon_icon_cursor: pointer;
@@ -11,8 +7,6 @@
 .container {
   composes: varClass;
   position: relative;
-  --local_inputFieldLine_border_width: var(--textboxicon_line_height);
-  --local_inputFieldLine_border_color: var(--textboxicon_line_color);
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;

package/es/Textarea/Textarea.module.css

@@ -139,7 +139,7 @@
   --textarea_height: var(--zd_size184);
 }
 .default {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
 .primary {

package/es/Tooltip/Tooltip.module.css

@@ -14,7 +14,7 @@
 .tooltipcont {
   color: var(--zdt_tooltip_default_text);
   font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-break: break-word;
   max-width: var(--zd_size420) ;
   line-height: 1.5385;

package/es/Typography/css/Typography.module.css

@@ -25,20 +25,20 @@
 }
 
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .font_light {
-  font-family: var(--zd_light);
+  font-weight: var(--zd-fw-light);
 }
 
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 

package/es/common/basic.module.css

@@ -1,15 +1,15 @@
 @font-face {
-  font-family: Regular;
-  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
-  font-weight: 400;
+  font-family: Light;
+  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
+  font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: Light;
-  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
-  font-weight: 300;
+  font-family: Regular;
+  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
+  font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
@@ -29,3 +29,36 @@
   font-style: normal;
   font-display: swap;
 }
+
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
+  font-weight: 100 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2semibold/font.woff2') format('woff2');
+  font-weight: 500 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2bold/font.woff2') format('woff2');
+  font-weight: 700 900;
+  font-style: normal;
+  font-display: swap;
+}

package/es/common/basicReset.module.css

@@ -27,7 +27,7 @@ html {
 }
 
 textarea {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 label, input[type='button'], input[type='submit'], input[type='file'], button {
@@ -37,4 +37,4 @@ label, input[type='button'], input[type='submit'], input[type='file'], button {
 /*Moz Required Box shadow Isssue*/
 input[required]:-moz-ui-invalid {
   box-shadow: none;
-}
+}

package/es/common/common.module.css

@@ -303,22 +303,22 @@
   resize: vertical;
 }
 
-/*font-family*/
+/*font-weight*/
 .regular {
-  font-family: var(--zd_regular, Regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .light {
-  font-family: var(--zd_light, Light);
+  font-weight: var(--zd-fw-light);
 }
 
 .semibold {
-  font-family: var(--zd_semibold, Semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth;
 }
 
 .bold {
-  font-family: var(--zd_bold, Bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth;
 }
 

package/es/shared/InputFieldLine/InputFieldLine.module.css

@@ -1,7 +1,7 @@
 .varClass {
     --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
     --local_inputFieldLine_border_width: 1px;
-    --local_padding: var(--zd_size0);
+    --local_padding: 0;
     --local_cursor: pointer;
 }
 

package/es/v1/Tab/v1Tabs.module.css

@@ -145,7 +145,7 @@
 }
 
 .emptyStateTitle {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;

package/es/v1/Typography/css/v1_Typography.module.css

@@ -19,17 +19,17 @@
   display: initial;
 }
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 .font_light {
-  font-family: var(--zd_light);
+  font-weight: var(--zd-fw-light);
 }
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../../common/common.module.css';
 }
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth from '../../../common/common.module.css';
 }
 .fontStyles_normal{

package/lib/AppContainer/AppContainer.js

@@ -29,6 +29,8 @@ require("@zohodesk/variables/assets/fontsizeVariables.module.css");
 
 require("@zohodesk/variables/es/fontFamilyVariables.module.css");
 
+require("@zohodesk/variables/es/fontWeightVariables.module.css");
+
 require("@zohodesk/variables/assets/transitionVariables.module.css");
 
 require("@zohodesk/variables/assets/no_transitionVariables.module.css");

package/lib/AppContainer/AppContainer.module.css

@@ -8,8 +8,9 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container {
-  font-family: var(--zd_regular);
+.container, .container button, .container input, .container textarea ,.container select {
+  /* font-family: var(--zd_regular); */
+  font-family: var(--zd-font-family), var(--zd_fallback_font, ZDLato);
 }
 .tooltip {
   height: 0 ;

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

@@ -5,7 +5,7 @@
   --button_cursor: pointer;
   --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
-  --button_font_family: var(--zd_regular);
+  --button_font_weight: var(--zd-fw-normal);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
@@ -49,7 +49,7 @@
   position: relative;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
-  font-family: var(--button_font_family);
+  font-weight: var(--button_font_weight);
   text-transform: var(--button_text_transform);
   min-width: var(--button_min_width);
   height: var(--button_height);
@@ -63,7 +63,7 @@
 }
 
 .bold {
-  --button_font_family: var(--zd_semibold);
+  --button_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
@@ -623,7 +623,7 @@
 }
 
 .loader {
-  color: var(--dot_mirror)
+  color: var(--dot_mirror);
 }
 
 [dir=ltr] .strike {
@@ -633,34 +633,43 @@
 [dir=rtl] .strike {
   background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
 }
+
 .primaryStrike {
   --button_strike_color: var(--zdt_button_primary_strike);
 }
+
 .primaryfilledStrike {
   --button_strike_color: var(--zdt_button_primaryFilled_strike);
   --button_border_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerStrike {
   --button_strike_color: var(--zdt_button_danger_strike);
 }
+
 .dangerfilledStrike {
   --button_strike_color: var(--zdt_button_dangerFilled_strike);
   --button_border_color: var(--zdt_button_dangerfill_bg);
 }
+
 .secondaryStrike {
   --button_strike_color: var(--zdt_button_secondary_border);
 }
+
 .secondaryfilledStrike {
   --button_strike_color: var(--zdt_button_secondaryFilled_strike);
   --button_border_color: var(--zdt_button_secondaryfill_bg);
 }
+
 .tertiaryfilledStrike {
   --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
   --button_border_color: var(--zdt_button_tertiaryfill_bg);
 }
+
 .successStrike {
   --button_strike_color: var(--zdt_button_success_strike);
 }
+
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
   --button_border_color: var(--zdt_button_successfill_border);

package/lib/ColorSelect/ColorSingleSelect.js

@@ -27,7 +27,7 @@ var _ArrowIconModule = _interopRequireDefault(require("../shared/ArrowIcon/Arrow
 
 var _ColorSelectModule = _interopRequireDefault(require("./ColorSelect.module.css"));
 
-var _excluded = ["options", "renderCustomColorIndicator", "renderCustomSelectedValue", "customClass", "customProps", "borderColor", "children", "dataId", "renderRightPlaceholderNode", "placeholder", "renderCustomToggleIndicator"];
+var _excluded = ["options", "renderCustomColorIndicator", "renderCustomSelectedValue", "customClass", "customProps", "borderColor", "dataId", "renderRightPlaceholderNode", "placeholder", "renderCustomToggleIndicator"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -57,7 +57,6 @@ function ColorSingleSelect(props) {
       customClass = props.customClass,
       customProps = props.customProps,
       borderColor = props.borderColor,
-      children = props.children,
       dataId = props.dataId,
       renderRightPlaceholderNode = props.renderRightPlaceholderNode,
       placeholder = props.placeholder,

package/lib/DateTime/DateTime.module.css

@@ -1,5 +1,5 @@
 .semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 
 [dir=ltr] .boxPadding {
@@ -29,7 +29,7 @@
 }
 
 .datesStr {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .grid {
@@ -122,7 +122,8 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.holiday,.inActiveDate.holiday:hover {
+.invalidDate.holiday,
+.inActiveDate.holiday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -147,15 +148,17 @@
   background-color: var(--zdt_datetime_selected_bg);
   border-radius: 50%;
 }
-.inActiveDate{
-color: var(--zdt_datetime_invalid_text);
-cursor: no-drop;
+
+.inActiveDate {
+  color: var(--zdt_datetime_invalid_text);
+  cursor: no-drop;
 }
-.inActiveDate:hover
-{
+
+.inActiveDate:hover {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.holiday:hover{
+
+.inActiveDate:hover, .inActiveDate.holiday:hover {
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }

package/lib/DateTime/YearView.module.css

@@ -61,7 +61,7 @@
 }
 
 .isActive .yearText {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--zdt_yearview_year_hover_text);
   font-size: var(--zd_font_size11) ;
 }

package/lib/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
   font-size: inherit ;
-  font-weight: initial;
+  font-weight: var(--zd-fw-semibold);
   margin: initial ;
 }

package/lib/Label/Label.module.css

@@ -2,7 +2,7 @@
   /* label default variables */
   --label_font_size: var(--zd_font_size14);
   --label_text_color: var(--zdt_label_default_text);
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
   --label_cursor: default;
   --label_line_height: 1.286;
 }
@@ -13,24 +13,24 @@
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
   color: var(--label_text_color);
-  font-family: var(--label_font_family);
+  font-weight: var(--label_font_weight);
   cursor: var(--label_cursor);
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
-  --label_line_height:1.5;
+  --label_line_height: 1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
-  --label_line_height:1.385;
+  --label_line_height: 1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
-  --label_line_height:1.286;
+  --label_line_height: 1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
-  --label_line_height:0.6923;
+  --label_line_height: 0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {
@@ -46,10 +46,10 @@
   display: inline-block;
 }
 .font_default {
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
 }
 .font_primary {
-  --label_font_family: var(--zd_semibold);
+  --label_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 .dotted {

package/lib/MultiSelect/MultiSelect.module.css

@@ -196,7 +196,7 @@
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  font-family: inherit;
+  font-weight: var(--zd-fw-normal);
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);

package/lib/Tab/Tabs.module.css

@@ -145,7 +145,7 @@
 }
 
 .emptyStateTitle {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;

package/lib/TextBox/TextBox.module.css

@@ -9,7 +9,7 @@
   --textbox_width: 100%;
   --textbox_height: var(--zd_size35);
   --textbox_border_radius: none;
-  --textbox_font_family: var(--zd_regular);
+  --textbox_font_weight: var(--zd-fw-normal);
   /*  Variable:Ignore  */
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
@@ -166,18 +166,18 @@
 .primary,
 .secondary,
 .light {
-  font-family: var(--textbox_font_family);
+  font-weight: var(--textbox_font_weight);
 }
 
 .primary {
   --textbox_text_color: var(--zdt_textbox_default_text);
-  --textbox_font_family: var(--zd_semibold);
+  --textbox_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 
 .secondary {
   --textbox_text_color: var(--zdt_textbox_secondary_text);
-  --textbox_font_family: var(--zd_light);
+  --textbox_font_weight: var(--zd-fw-light);
 }
 
 .light {

package/lib/TextBoxIcon/TextBoxIcon.module.css

@@ -1,8 +1,4 @@
 .varClass {
-  /* textboxicon default variables */
-  --textboxicon_line_height: 1px;
-  --textboxicon_line_color: var(--zdt_textboxicon_default_line_bg);
-
   /* textboxicon icon default variables */
   --textboxicon_icon_margin: 0 var(--zd_size5);
   --textboxicon_icon_cursor: pointer;
@@ -11,8 +7,6 @@
 .container {
   composes: varClass;
   position: relative;
-  --local_inputFieldLine_border_width: var(--textboxicon_line_height);
-  --local_inputFieldLine_border_color: var(--textboxicon_line_color);
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;

package/lib/Textarea/Textarea.module.css

@@ -139,7 +139,7 @@
   --textarea_height: var(--zd_size184);
 }
 .default {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
 .primary {

package/lib/Tooltip/Tooltip.module.css

@@ -14,7 +14,7 @@
 .tooltipcont {
   color: var(--zdt_tooltip_default_text);
   font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-break: break-word;
   max-width: var(--zd_size420) ;
   line-height: 1.5385;

package/lib/Typography/css/Typography.module.css

@@ -25,20 +25,20 @@
 }
 
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .font_light {
-  font-family: var(--zd_light);
+  font-weight: var(--zd-fw-light);
 }
 
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 

package/lib/common/basic.module.css

@@ -1,15 +1,15 @@
 @font-face {
-  font-family: Regular;
-  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
-  font-weight: 400;
+  font-family: Light;
+  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
+  font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: Light;
-  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
-  font-weight: 300;
+  font-family: Regular;
+  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
+  font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
@@ -29,3 +29,36 @@
   font-style: normal;
   font-display: swap;
 }
+
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
+  font-weight: 100 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2semibold/font.woff2') format('woff2');
+  font-weight: 500 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2bold/font.woff2') format('woff2');
+  font-weight: 700 900;
+  font-style: normal;
+  font-display: swap;
+}

package/lib/common/basicReset.module.css

@@ -27,7 +27,7 @@ html {
 }
 
 textarea {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 label, input[type='button'], input[type='submit'], input[type='file'], button {
@@ -37,4 +37,4 @@ label, input[type='button'], input[type='submit'], input[type='file'], button {
 /*Moz Required Box shadow Isssue*/
 input[required]:-moz-ui-invalid {
   box-shadow: none;
-}
+}

package/lib/common/common.module.css

@@ -303,22 +303,22 @@
   resize: vertical;
 }
 
-/*font-family*/
+/*font-weight*/
 .regular {
-  font-family: var(--zd_regular, Regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .light {
-  font-family: var(--zd_light, Light);
+  font-weight: var(--zd-fw-light);
 }
 
 .semibold {
-  font-family: var(--zd_semibold, Semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth;
 }
 
 .bold {
-  font-family: var(--zd_bold, Bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth;
 }
 

package/lib/shared/InputFieldLine/InputFieldLine.module.css

@@ -1,7 +1,7 @@
 .varClass {
     --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
     --local_inputFieldLine_border_width: 1px;
-    --local_padding: var(--zd_size0);
+    --local_padding: 0;
     --local_cursor: pointer;
 }
 

package/lib/v1/Tab/v1Tabs.module.css

@@ -145,7 +145,7 @@
 }
 
 .emptyStateTitle {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;

package/lib/v1/Typography/css/v1_Typography.module.css

@@ -19,17 +19,17 @@
   display: initial;
 }
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 .font_light {
-  font-family: var(--zd_light);
+  font-weight: var(--zd-fw-light);
 }
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../../common/common.module.css';
 }
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth from '../../../common/common.module.css';
 }
 .fontStyles_normal{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.23",
+  "version": "1.5.2",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -86,7 +86,7 @@
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.2.3",
     "@zohodesk/utils": "1.3.15",
-    "@zohodesk/variables": "1.1.0",
+    "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
@@ -101,7 +101,7 @@
   },
   "peerDependencies": {
     "@zohodesk/icons": "1.1.3",
-    "@zohodesk/variables": "1.1.0",
+    "@zohodesk/variables": "1.2.0",
     "@zohodesk/svg": "1.2.3",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",