@zohodesk/dot 1.0.0-temp-56 → 1.0.0-temp-60

package/src/Appearance/default/mode/dotDefaultMode.module.css

@@ -142,7 +142,7 @@
 	--zdt_fields_lockicon_icon: var(--dot_shuttleGrey);
 	--zdt_fields_lockicon_hover_icon: var(--dot_brightRed);
 	--zdt_fields_phitag_text: var(--dot_camarone);
-	--zdt_fields_phitag_bg: #f2faf5;
+	--zdt_fields_phitag_bg: var(--dot_blacksqueeze);
 	--zdt_fields_phitag_border: rgba(38, 169, 66, 0.2);
 	--zdt_fields_newtabicon_icon: var(--dot_black);
 	--zdt_fields_newtabicon_hover_icon: var(--zdt_cta_primary_text);
@@ -214,8 +214,8 @@
 	--zdt_gridstencils_default_bg: var(--dot_white);
 	--zdt_gridstencils_default_border: var(--zd_gallery1);
 	--zdt_gridstencils_after_bg: var(--zd_smoke4);
-	--zdt_gridstencils_listbar_bg: #f6f7f8;
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(left, #f6f7f8 0, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+	--zdt_gridstencils_listbar_bg: var(--zd_smoke78);
+	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
 	
 	/* icons */
 	--zdt_icons_default: var(--dot_shuttleGrey);
@@ -349,18 +349,18 @@
 	--zdt_headerlink_hover_text: var(--zdt_cta_primary_border);
 	
 	/* search */
-	--zdt_search_input_border: #999;
-	--zdt_search_input_text: #333;
+	--zdt_search_input_border: var(--zd_dark6);
+	--zdt_search_input_text: var(--zd_dark4);
 	--zdt_search_input_bg: var(--dot_white);
 	--zdt_search_input_focus_border: var(--zdt_cta_primary_border);
-	--zdt_search_icon: #999;
-	--zdt_search_hover_icon: #666;
+	--zdt_search_icon: var(--zd_dark6);
+	--zdt_search_hover_icon: var(--zd_dark5);
 	--zdt_search_placeholder_text: var(--zd_smoke12);
 	
 	/* views */
-	--zdt_views_icon: #999;
-	--zdt_views_border: #e1e1e1;
-	--zdt_views_hover_icon: #666;
+	--zdt_views_icon: var(--zd_dark6);
+	--zdt_views_border: var(--zd_smoke29);
+	--zdt_views_hover_icon: var(--zd_dark5);
 	--zdt_views_active_icon: var(--zdt_cta_primary_text);
 	
 	/* help tips description */
@@ -463,7 +463,7 @@
 	/* global notification */
 	--zdt_globalnotification_default_bg: var(--dot_whiteSmoke);
 	--zdt_globalnotification_default_text: var(--dot_black);
-	--zdt_globalnotification_success_bg: #f2faf5;
+	--zdt_globalnotification_success_bg: var(--dot_blacksqueeze);
 	--zdt_globalnotification_success_text: var(--dot_black);
 	--zdt_globalnotification_info_bg: var(--zdt_cta_primary_light_bg);
 	--zdt_globalnotification_info_text: var(--dot_black);
@@ -487,13 +487,13 @@
 	--zdt_tagsmultiselect_labelt_text: var(--dot_shuttleGrey);
 	--zdt_tagsmultiselect_default_border: var(--dot_inputLine);
 	--zdt_tagsmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_tagsmultiselect_dark_border: #4b5168;
+	--zdt_tagsmultiselect_dark_border: var(--dot_mulledwine);
 	--zdt_tagsmultiselect_default_hover_border: var(--dot_inputLineHover);
 	--zdt_tagsmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_tagsmultiselect_dark_hover_border: #9699a6;
+	--zdt_tagsmultiselect_dark_hover_border: var(--dot_stardust);
 	--zdt_tagsmultiselect_default_active_border: var(--dot_inputLineFocus);
 	--zdt_tagsmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_tagsmultiselect_dark_active_border: #9699a6;
+	--zdt_tagsmultiselect_dark_active_border: var(--dot_stardust);
 	--zdt_tagsmultiselect_more_text: var(--zdt_cta_primary_text);
 	--zdt_tagsmultiselect_more_hover_text: var(--zdt_cta_primary_hover_text);
 	

package/src/Attachment/Attachment.module.css

@@ -58,11 +58,11 @@
 }
 .medium .atatchName {
   font-size: var(--zd_font_size14);
-  line-height: var(--zd_size20);
+  line-height: 1.42;
 }
 .small .atatchName {
   font-size: var(--zd_font_size12);
-  line-height: var(--zd_size15);
+  line-height: 1.25;
 }
 
 .attachSize {
@@ -90,12 +90,12 @@
 .medium .attachDownload {
   height: var(--zd_size25);
   width: var(--zd_size25);
-  line-height: var(--zd_size23);
+  line-height: 1.4375;
 }
 .small .attachDownload {
   height: var(--zd_size20);
   width: var(--zd_size20);
-  line-height: var(--zd_size18);
+  line-height: 1.125;
 }
 .attachDownload:hover {
   background-color: var(--zdt_attachment_download_hover_bg);

package/src/ImportantNotes/ImportantNotes.module.css

@@ -4,7 +4,7 @@
 }
 .title {
   font-size: var(--zd_font_size13);
-  line-height: var(--zd_font_size18);
+  line-height: 1.38;
   color: var(--zdt_importantnotes_title_text);
 }
 .icon {

package/src/ToastMessage/ToastMessage.module.css

@@ -139,14 +139,14 @@
   font-size: var(--zd_font_size12);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   margin-top: var(--zd_size5);
-  line-height: var(--zd_size16);
+  line-height: 1.33;
   color: var(--zdt_toastmessage_alert_text);
 }
 
 .buttonText {
   font-size: inherit;
   text-align: center;
-  line-height: var(--zd_size14);
+  line-height: 0.875;
   padding: 0 var(--zd_size7);
   cursor: pointer;
 }
@@ -221,7 +221,7 @@
 .fill {
   width: var(--zd_size29);
   height: var(--zd_size29);
-  line-height: var(--zd_size29);
+  line-height: 1.8125;
   text-align: center;
   composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
 }

package/src/Upload/Upload.module.css

@@ -76,7 +76,7 @@
   right: 0;
   position: absolute;
   text-align: center;
-  line-height: var(--zd_size10);
+  line-height: 0.83;
   font-size: var(--zd_font_size12);
 }
 .light .uploadclose {

package/src/alert/AlertLookup/AlertLookup.module.css

@@ -4,7 +4,7 @@
 
 .innerSection {
   padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
-  line-height: var(--zd_size25);
+  line-height: 1.6;
   color: var(--zdt_alertlookup_innersection_text);
   font-size: var(--zd_font_size15);
   word-break: break-word;

package/src/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -48,8 +48,11 @@
 .desc {
   margin-right: var(--zd_size4);
 }
-.desc {
-  line-height: var(--zd_size19);
+.small .desc {
+  line-height: 1.58;
+}
+.medium .desc {
+  line-height: 1.35;
 }
 .link {
   cursor: pointer;

package/src/errorstate/EmptyStates.module.css

@@ -27,15 +27,15 @@
 }
 .title {
   font-size: var(--zd_font_size50);
-  line-height: var(--zd_size70);
+  line-height: 1.4;
 }
 .tabletTitle {
   font-size: var(--zd_font_size24);
-  line-height: var(--zd_size50);
+  line-height: 2.08;
 }
 .mobileTitle {
   font-size: var(--zd_font_size22);
-  line-height: var(--zd_size30);
+  line-height: 1.36;
 }
 .subtitle {
   font-size: var(--zd_font_size30);

package/src/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -14,7 +14,7 @@
 }
 .lastBox {
   margin: 0 auto;
-  line-height: var(--zd_size24);
+  line-height: 1.71;
   font-size: var(--zd_font_size14);
   margin-bottom: var(--zd_size20);
 }

package/src/form/fields/CheckBoxField/CheckBoxField.js

@@ -118,13 +118,7 @@ export default class CheckBoxField extends PureComponent {
     );
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-            }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {isDirectCol && labelElement}

package/src/form/fields/CurrencyField/CurrencyField.js

@@ -101,13 +101,7 @@ export default class CurrencyField extends PureComponent {
 
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-            }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -122,7 +116,7 @@ export default class CurrencyField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/DateField/DateField.js

@@ -106,13 +106,7 @@ export default class DateField extends PureComponent {
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -129,7 +123,7 @@ export default class DateField extends PureComponent {
                   : labelPalette
               }
               onClick={isDisabled || isReadOnly ? null : this.handleLabelClick}
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               dataId={

package/src/form/fields/Fields.module.css

@@ -38,17 +38,14 @@
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
+.cbTextReadonly {
+  cursor: not-allowed;
+}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled,
-.readonly {
-  cursor: not-allowed;
-}
-.cbTextReadonly,
-.disabled .fieldLabel,
-.readonly .fieldLabel {
-  --label_cursor: not-allowed;
+.disabled {
+  composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
 }
 .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
@@ -144,5 +141,5 @@
   border-radius: var(--zd_size3);
   margin-left: var(--zd_size8);
   height: var(--zd_size18);
-  line-height: var(--zd_size18);
+  line-height: 1.5;
 }

package/src/form/fields/MultiSelectField/MultiSelectField.js

@@ -118,13 +118,7 @@ export default class MultiSelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -143,7 +137,7 @@ export default class MultiSelectField extends PureComponent {
                   : labelPalette
               }
               // onClick={this.handleLabelClick}
-              customClass={`${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`}
+              customClass={`${isMandatory ? style.labelMandatory : ''}`}
               dataId={
                 isDisabled
                   ? `${dataId}_label_disabled`

package/src/form/fields/RadioField/RadioField.js

@@ -52,13 +52,7 @@ export default class RadioField extends PureComponent {
     } = customProps;
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -69,7 +63,7 @@ export default class RadioField extends PureComponent {
             palette={
               isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default'
             }
-            customClass={`${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`}
+            customClass={`${isMandatory ? style.labelMandatory : ''}`}
             dataId={
               isDisabled
                 ? `${dataId}_label_disabled`

package/src/form/fields/SelectField/SelectField.js

@@ -100,13 +100,7 @@ export default class SelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -121,7 +115,7 @@ export default class SelectField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -141,10 +141,10 @@ export default class TagsMultiSelect extends React.Component {
                   <Box className={style.tag} key={index}>
                     <Tag
                       text={name}
-                      onRemove={isReadOnly ? null : deleteTag.bind(this, name)}
+                      onRemove={deleteTag.bind(this, name)}
                       closeTitle={i18nKeys.deleteText}
                       palette={tagType === 'SYSTEM' ? 'primary' : 'default'}
-                      isReadOnly={isReadOnly}
+                      disabled={isReadOnly}
                     />
                   </Box>
                 ) : null;

package/src/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -168,15 +168,7 @@ const TagsMultiSelectField = props => {
   }, []);
 
   return (
-    <div 
-      className={`${style.container} ${
-          isDisabled
-            ? fieldStyle.disabled
-            : isReadOnly
-            ? fieldStyle.readonly
-            : ''
-        }`}
-    >
+    <div className={style.container}>
       <Container alignBox='row' align='baseline' isCover={false}>
         {labelName && (
           <Label
@@ -187,7 +179,7 @@ const TagsMultiSelectField = props => {
             palette={
               isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette
             }
-            customClass={`${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${
+            customClass={`${isMandatory ? fieldStyle.labelMandatory : ''} ${
               labelClass ? labelClass : ''
             }`}
             dataId={

package/src/form/fields/TextBoxField/TextBoxField.js

@@ -88,13 +88,7 @@ export default class TextBoxField extends PureComponent {
 
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -109,7 +103,7 @@ export default class TextBoxField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/TextEditorField/TextEditorField.js

@@ -98,15 +98,7 @@ export default class TextEditorField extends PureComponent {
     } = customProps;
     let { ePhiTitle = '', ePhiText = '', ePhiStatus = false } = ePhiData;
     return (
-      <div 
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        } ${className || ''}`}
-      >
+      <div className={`${style.container} ${className}`}>
         <Container isCover={false} alignBox='row' align='vertical'>
           {labelName && (
             <Box>
@@ -122,7 +114,7 @@ export default class TextEditorField extends PureComponent {
                     : labelPalette
                 }
                 onClick={this.handleLabelClick}
-                customClass={`${style.fieldLabel} ${labelCustomClass} ${
+                customClass={`${labelCustomClass} ${
                   isMandatory ? style.labelMandatory : ''
                 }`}
                 dataId={

package/src/form/fields/TextareaField/TextareaField.js

@@ -87,13 +87,7 @@ export default class TextareaField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -109,7 +103,7 @@ export default class TextareaField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -15,7 +15,7 @@
   color: var(--zdt_setupdetail_backicon);
   margin-left: var(--zd_size19);
   border-radius: 50%;
-  line-height: var(--zd_size30);
+  line-height: 2.5;
   cursor: pointer;
 }
 
@@ -24,7 +24,7 @@
 }
 .title {
   font-size: var(--zd_font_size16);
-  line-height: var(--zd_size16);
+  line-height: 1;
   padding-right: var(--zd_size12);
   font-family: var(--zd_semibold);
   color: var(--zdt_setupdetail_backicon);
@@ -43,7 +43,7 @@
 .helpInfo {
   border: 1px solid var(--zdt_setupdetail_helpinfo);
   border-radius: 2px;
-  line-height: var(--zd_size26);
+  line-height: 2.36;
   height: var(--zd_size28);
   width: var(--zd_size28);
   color: var(--zdt_setupdetail_helpinfo_text);
@@ -95,7 +95,7 @@
   text-align: center;
   border: 1px solid var(--zdt_setupdetail_infoicon_border);
   border-radius: 2px;
-  line-height: var(--zd_size24);
+  line-height: 2;
 }
 
 .infoText {

package/src/list/listCommon.module.css

@@ -13,7 +13,7 @@
   font-size: var(--zd_font_size16);
 }
 .secondaryPanel {
-  line-height: var(--zd_size18);
+  line-height: 1.125;
   composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
 }
 .statusColumn {

package/src/lookup/header/Close/LookupClose.module.css

@@ -2,7 +2,7 @@
   text-align: center;
   width: var(--zd_size25);
   height: var(--zd_size25);
-  line-height: var(--zd_size25);
+  line-height: 2.7;
   cursor: pointer;
   border-radius: 50%;
   color: var(--zdt_lookupclose_default_text);

package/src/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -27,7 +27,7 @@
 .labelCnt {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   padding: 0 var(--zd_size12);
-  line-height: var(--zd_size20);
+  line-height: 1.25;
   cursor: pointer;
   color: var(--zdt_viewdropdown_label_text);
 }

package/src/setup/header/Search/Search.module.css

@@ -17,7 +17,7 @@
   right: 0;
   bottom: 0;
   color: var(--zdt_search_icon);
-  line-height: var(--zd_size26);
+  line-height: 1.625;
   cursor: pointer;
 }
 .icon:hover {

package/src/setup/header/Views/Views.module.css

@@ -10,7 +10,7 @@
   border: 1px solid var(--zdt_views_border);
   height: var(--zd_size28);
   width: var(--zd_size28);
-  line-height: var(--zd_size26);
+  line-height: 1.625;
 }
 .first {
   border-radius: 2px 0 0 2px;

package/src/setup/helptips/Description/HelpTipsDescription.module.css

@@ -1,6 +1,6 @@
 .text {
   font-size: var(--zd_font_size14);
   color: var(--zdt_helptips_text);
-  line-height: var(--zd_size24);
+  line-height: 1.7;
   margin: var(--zd_size10) 0;
 }

package/src/version2/GlobalNotification/GlobalNotification.module.css

@@ -77,7 +77,7 @@
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
   text-align: left;
-  line-height: var(--zd_size20);
+  line-height:1.42;
 }
 
 .close {

package/src/version2/errorstate/V2_ErrorStates.module.css

@@ -8,7 +8,7 @@
   font-family: var(--zd_bold);
 }
 .desc {
-  line-height: var(--zd_size22);
+  line-height: 1.69;
 }
 .large .errorState {
   width: var(--zd_size450);
@@ -31,7 +31,8 @@
 }
 .medium .desc,
 .small .desc {
-  font-size: var(--zd_font_size13)
+  font-size: var(--zd_font_size13);
+  line-height: 1.69;
 }
 .small .errorState {
   width: var(--zd_size230);

package/src/version2/lookup/AlertHeader/AlertHeaderNew.module.css

@@ -47,7 +47,7 @@
   color: var(--zdt_alertlookupnew_text);
   margin: 0 var(--zd_size5) 0 var(--zd_size10);
   font-size: var(--zd_font_size18);
-  line-height: var(--zd_size22);
+  line-height: 1.2;
   font-family: var(--zd_bold);
   composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;

package/src/version2/lookup/AlertLookup/AlertLookupNew.module.css

@@ -6,7 +6,7 @@
   padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size14);
-  line-height: var(--zd_size18);
+  line-height: 1.28;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 

package/src/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -69,7 +69,7 @@
 }
 .subTitle {
   font-size: var(--zd_font_size15);
-  line-height: var(--zd_size20);
+  line-height: 1.3;
   font-family: var(--zd_semibold);
   composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -78,7 +78,7 @@
 }
 .infoText {
   font-size: var(--zd_font_size14);
-  line-height: var(--zd_size18);
+  line-height: 1.28;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 .secondaryInfo {