@zohodesk/dot 1.0.0-temp-51 → 1.0.0-temp-55

package/lib/version2/notification/DesktopNotification/DesktopNotification.js

@@ -85,7 +85,8 @@ function DesktopNotificationUI(props) {
       _props$customClass = props.customClass,
       customClass = _props$customClass === void 0 ? {} : _props$customClass,
       _props$i18nKeys = props.i18nKeys,
-      i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys;
+      i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
+      customProps = props.customProps;
   var _i18nKeys$closeTitle = i18nKeys.closeTitle,
       closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
   var containerClass = customClass.containerClass;
@@ -94,6 +95,9 @@ function DesktopNotificationUI(props) {
       _ref$buttonPalette = _ref.buttonPalette,
       buttonPalette = _ref$buttonPalette === void 0 ? 'dangerFilled' : _ref$buttonPalette;
 
+  var _customProps$ExtraPro = customProps.ExtraProps,
+      ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
+
   function onClickSubmit(e) {
     onSubmit && onSubmit();
   }
@@ -113,12 +117,12 @@ function DesktopNotificationUI(props) {
     style: needAutoZindex && isAnimate ? {
       zIndex: "".concat(Zindex)
     } : {}
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, " ").concat(_DesktopNotificationModule["default"]["".concat(size)] ? _DesktopNotificationModule["default"]["".concat(size)] : '', " ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass),
     isCover: false,
     dataId: dataId,
     isInline: uiVariantTwo
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
     type: type,
     title: title,
     variant: titleVariant,
@@ -204,7 +208,10 @@ DesktopNotification.propTypes = {
   submitText: _propTypes["default"].string,
   submitType: _propTypes["default"].oneOf(['primary', 'danger', 'success']),
   titleVariant: _propTypes["default"].oneOf(['primary', 'secondary']),
-  type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm'])
+  type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  customProps: _propTypes["default"].shape({
+    ExtraProps: _propTypes["default"].object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -217,7 +224,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (false) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-51",
+  "version": "1.0.0-temp-55",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -17,7 +17,8 @@
     "build:dev": "npm run clean && npm run build:es --module:mode=dev -- -w",
     "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
     "prepare": "npm run init && npm run build && npm run build:es && npm run rtl",
-    "init": "npm run clean",
+    "init": "npm run clean && npm run build:variables",
+    "build:variables": "node ./preprocess/index",
     "lint": "react-cli lint",
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
@@ -32,7 +33,7 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-219",
+    "@zohodesk/components": "1.0.0-temp-41",
     "@zohodesk/icons": "1.0.0-beta.85",
     "@zohodesk/svg": "1.0.0-beta.37",
     "@zohodesk/virtualizer": "1.0.3",
@@ -42,11 +43,14 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "^1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-219",
+    "@zohodesk/components": "1.0.0-alpha-221",
     "@zohodesk/icons": "^1.0.0-beta.85",
     "@zohodesk/svg": "^1.0.0-beta.37"
   },
   "react-cli": {
+    "preprocessor": {
+      "runner": "preprocess/index.js"
+    },
     "app": {
       "removePropTypes": {
         "removeImport": true

package/preprocess/dotThemeColors.js

@@ -0,0 +1,98 @@
+var { dotThemeVariables } = require('./json/dotVariableJson');
+let fs = require('fs');
+let path = require('path');
+let baseFolder = 'Appearance';
+let mode = ['default', 'dark'];
+let themes = ['blue', 'green', 'orange', 'red', 'yellow'];
+let themeFiles = [];
+mode.forEach(mode => {
+  themes.forEach(theme => {
+    let themeFilesString = `../src/${baseFolder}/${mode}/themes/${theme}/${
+      theme + capitalizeFirstLetter(mode)
+    }DotTheme.module.css`;
+    themeFiles.push(path.join(__dirname, themeFilesString));
+  });
+});
+let files = themeFiles;
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function generate(mode, theme) {
+  let exportVariables = [];
+  let counter = 0;
+  let newLine = '';
+  dotThemeVariables.map(dotVariable => {
+    let commentName = dotVariable[3];
+    counting = counter++;
+    if (counting != 0) {
+      newLine = `\n\t`;
+    }
+    if (mode == 'default') {
+      let dotDefaultColors = dotVariable[1][1];
+      let colorsResult = '';
+      if (theme == 'blue') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDefaultColors[0]};`];
+      } else if (theme == 'green') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDefaultColors[1]};`];
+      } else if (theme == 'orange') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDefaultColors[2]};`];
+      } else if (theme == 'red') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDefaultColors[3]};`];
+      } else if (theme == 'yellow') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDefaultColors[4]};`];
+      }
+      exportVariables.push(
+        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
+        colorsResult
+      );
+    } else if (mode == 'dark') {
+      let dotDarkColors = dotVariable[2][1];
+      let colorsResult = '';
+      if (theme == 'blue') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDarkColors[0]};`];
+      } else if (theme == 'green') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDarkColors[1]};`];
+      } else if (theme == 'orange') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDarkColors[2]};`];
+      } else if (theme == 'red') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDarkColors[3]};`];
+      } else if (theme == 'yellow') {
+        colorsResult = [`\n\t--zdt_${dotVariable[0]}: ${dotDarkColors[4]};`];
+      }
+      exportVariables.push(
+        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
+        colorsResult
+      );
+    }
+  });
+  return exportVariables.join('');
+}
+
+let arrayIndexCounter = 0;
+mode.forEach(mode => {
+  themes.forEach(theme => {
+    let fileString = files[arrayIndexCounter];
+    // let splitPath = fileString.split(/\\/g);
+    let getMode = mode;
+    let getTheme = theme;
+    if (theme == 'blue') {
+      if (mode == 'default') {
+        blueSelector = ', :global(.blueDefaultTheme) [data-desk-theme="blue"]';
+      } else if (mode == 'dark') {
+        blueSelector = ', :global(.blueDarkTheme) [data-desk-theme="blue"]';
+      }
+    } else {
+      blueSelector = '';
+    }
+    fs.writeFileSync(
+      fileString,
+      `[data-mode='${getMode}'][data-theme='${getTheme}']${blueSelector} {${generate(
+        getMode,
+        getTheme
+      )}\n}`
+    );
+    arrayIndexCounter++;
+  });
+});

package/preprocess/index.js

@@ -0,0 +1 @@
+require('./dotThemeColors');

package/preprocess/json/dotVariableJson.js

@@ -0,0 +1,90 @@
+/* sample color order => 
+--zdt_cta_variable_name, 
+[['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow']], 
+[['darkMode'], ['blue', 'green', 'orange', 'red', 'yellow']], ['css comment name'] */
+
+const dotThemeVariables = [
+  [
+    'freezelayer_darklight_bg',
+    [
+      ['default'],
+      [
+        'rgba(44, 51, 77, 0.94)',
+        'rgba(15, 34, 38, 0.94)',
+        'rgba(36, 30, 19, 0.94)',
+        'rgba(34, 15, 27, 0.94)',
+        'rgba(34, 36, 18, 0.94)'
+      ]
+    ],
+    [
+      ['dark'],
+      [
+        'rgba(27, 33, 43, 0.9)',
+        'rgba(27, 33, 43, 0.9)',
+        'rgba(27, 33, 43, 0.9)',
+        'rgba(27, 33, 43, 0.9)',
+        'rgba(27, 33, 43, 0.9)'
+      ]
+    ],
+    ['freezelayer']
+  ],
+  [
+    'commonEmptyState_dark_title',
+    [
+      ['default'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    [
+      ['dark'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    ['common empty state']
+  ],
+  [
+    'commonEmptyState_dark_description',
+    [
+      ['default'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    [
+      ['dark'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ]
+  ],
+  [
+    'commonEmptyState_dark_link',
+    [['default'], ['#6cbbfc', '#4ac064', '#e57717', '#ff6363', '#e8b923']],
+    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
+  ],
+  [
+    'commonEmptyState_dark_link_hover',
+    [['default'], ['#2469ff', '#0e7526', '#b25900', '#ab1a18', '#b59100']],
+    [['dark'], ['#2469ff', '#0e7c1c', '#a85100', '#a81111', '#9b6808']]
+  ]
+];
+
+module.exports = { dotThemeVariables: dotThemeVariables };

package/src/Appearance/dark/mode/dotDarkMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'] {
+[data-mode='dark'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: #583a45;
   --zdt_commonalert_success_hover_bg: #2c4e42;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: #262f3d;
   --zdt_commonalert_danger_hover_bg: #583a45;
   --zdt_commonalert_error_hover_bg: #583a45;
   --zdt_commonalert_warning_hover_bg: #583c2c;

package/src/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -1,10 +1,10 @@
-[data-mode='dark'][data-theme='blue'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #479dff;
-    --zdt_commonEmptyState_dark_link_hover: #2469ff;
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #479dff;
+	--zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/src/Appearance/dark/themes/green/greenDarkDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='dark'][data-theme='green'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #45a159;
-    --zdt_commonEmptyState_dark_link_hover: #0e7c1c;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #45a159;
+	--zdt_commonEmptyState_dark_link_hover: #0e7c1c;
 }

package/src/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='dark'][data-theme='orange'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #ff801f;
-    --zdt_commonEmptyState_dark_link_hover: #a85100;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #ff801f;
+	--zdt_commonEmptyState_dark_link_hover: #a85100;
 }

package/src/Appearance/dark/themes/red/redDarkDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='dark'][data-theme='red'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #e94f4f;
-    --zdt_commonEmptyState_dark_link_hover: #a81111;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #e94f4f;
+	--zdt_commonEmptyState_dark_link_hover: #a81111;
 }

package/src/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='dark'][data-theme='yellow'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #d79835;
-    --zdt_commonEmptyState_dark_link_hover: #9b6808;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #d79835;
+	--zdt_commonEmptyState_dark_link_hover: #9b6808;
 }

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

@@ -1,4 +1,4 @@
-[data-mode='default'] {
+[data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_success_hover_bg: #e9f7ef;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: var(--dot_bg_lavender);
   --zdt_commonalert_danger_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_error_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_warning_hover_bg: #fff1e6;

package/src/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
-[data-mode='default'][data-theme='blue'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #6cbbfc;
-    --zdt_commonEmptyState_dark_link_hover: #2469ff;
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #6cbbfc;
+	--zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/src/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='green'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #4ac064;
-    --zdt_commonEmptyState_dark_link_hover: #0e7526;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #4ac064;
+	--zdt_commonEmptyState_dark_link_hover: #0e7526;
 }

package/src/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='orange'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #e57717;
-    --zdt_commonEmptyState_dark_link_hover: #b25900;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #e57717;
+	--zdt_commonEmptyState_dark_link_hover: #b25900;
 }

package/src/Appearance/default/themes/red/redDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='red'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
-    
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #ff6363;
-    --zdt_commonEmptyState_dark_link_hover: #ab1a18;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #ff6363;
+	--zdt_commonEmptyState_dark_link_hover: #ab1a18;
 }

package/src/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='yellow'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #e8b923;
-    --zdt_commonEmptyState_dark_link_hover: #b59100;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #e8b923;
+	--zdt_commonEmptyState_dark_link_hover: #b59100;
 }

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

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

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

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

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

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

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

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

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

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