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

package/lib/form/fields/TextEditorField/TextEditorField.js

@@ -156,7 +156,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
           _ePhiData$ePhiStatus = ePhiData.ePhiStatus,
           ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(className)
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(className || '')
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         alignBox: "row",
@@ -167,7 +167,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: !isReadOnly && !isDisabled ? id : undefined,
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
         onClick: this.handleLabelClick,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-info",

package/lib/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -119,7 +119,7 @@ var TextEditorWrapper = /*#__PURE__*/function (_Component) {
           isEditorShow: true
         });
       } else {
-        if (!this.state.isEditorFocus) {
+        if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
           this.setState({
             isEditorShow: false
           });

package/lib/form/fields/TextareaField/TextareaField.js

@@ -142,7 +142,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -151,7 +151,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         id: id,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/form/layout/Field/Field.js

@@ -62,7 +62,7 @@ var Field = /*#__PURE__*/function (_Component) {
           containerClass = _this$props.containerClass,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width]), " ", "formFieldLi_".concat(width), " ").concat(containerClass ? containerClass : '', " "),
+        className: "".concat(containerClass ? containerClass : '', " ").concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width], " ")),
         "data-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : '', " ", "fieldWidth_".concat(width))

package/lib/form/layout/Section/Section.js

@@ -60,19 +60,16 @@ var Section = /*#__PURE__*/function (_Component) {
           titleClass = _this$props.titleClass,
           className = _this$props.className,
           column = _this$props.column,
-          formName = _this$props.formName,
-          innerContainerClass = _this$props.innerContainerClass;
+          formName = _this$props.formName;
       return /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": dataId,
         className: containerClass ? containerClass : ''
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: innerContainerClass ? innerContainerClass : ''
       }, title && /*#__PURE__*/_react["default"].createElement("div", {
         className: titleClass ? titleClass : ''
       }, title), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : '', " ").concat(column == 'single' ? _ModuleFormSectionModule["default"].singleColumn : ''),
         "data-id": formName && formName
-      }, this.props.children)));
+      }, this.props.children));
     }
   }]);
 
@@ -86,8 +83,7 @@ Section.propTypes = {
   containerClass: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   title: _propTypes["default"].string,
-  titleClass: _propTypes["default"].string,
-  innerContainerClass: _propTypes["default"].string
+  titleClass: _propTypes["default"].string
 };
 
 if (false) {

package/lib/lookup/header/ModuleHeader/ModuleHeader.js

@@ -80,12 +80,11 @@ var ModuleHeader = /*#__PURE__*/function (_PureComponent) {
           miniDescription = _this$props.miniDescription,
           dataId = _this$props.dataId,
           closeTitle = _this$props.closeTitle,
-          onSearchKeyDown = _this$props.onSearchKeyDown,
-          palette = _this$props.palette;
+          onSearchKeyDown = _this$props.onSearchKeyDown;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)]),
+        className: "".concat(_lookupHeaderCommonModule["default"].container),
         isCover: false,
         wrap: "wrap",
         dataId: dataId
@@ -135,11 +134,7 @@ ModuleHeader.propTypes = {
   title: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   closeTitle: _propTypes["default"].string,
-  onSearchKeyDown: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'white'])
-};
-ModuleHeader.defaultProps = {
-  palette: 'default'
+  onSearchKeyDown: _propTypes["default"].func
 };
 
 if (false) {

package/lib/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js

@@ -66,24 +66,14 @@ var ModuleHeader__default = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var searchStr = this.state.searchStr;
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], {
         title: "Find Duplicate",
         needSearch: true,
         searchStr: searchStr,
         onSearchChange: this.handleSearch,
         searchPlaceHolder: "Search",
-        miniDescription: "Select a field to search for duplicate records",
-        onLookupClose: function onLookupClose() {}
-      }), /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], {
-        title: "Find Duplicate",
-        needSearch: true,
-        searchStr: searchStr,
-        onSearchChange: this.handleSearch,
-        searchPlaceHolder: "Search",
-        miniDescription: "Select a field to search for duplicate records",
-        onLookupClose: function onLookupClose() {},
-        palette: "white"
-      }));
+        miniDescription: "Select a field to search for duplicate records"
+      });
     }
   }]);
 

package/lib/lookup/header/TicketHeader/TicketHeader.js

@@ -82,14 +82,13 @@ var TicketHeader = /*#__PURE__*/function (_Component) {
           needOnTypeSearch = _this$props.needOnTypeSearch,
           getSearchBoxRef = _this$props.getSearchBoxRef,
           needViewsList = _this$props.needViewsList,
-          i18nKeys = _this$props.i18nKeys,
-          palette = _this$props.palette;
+          i18nKeys = _this$props.i18nKeys;
       var _i18nKeys$menuEmptyMe = i18nKeys.menuEmptyMessage,
           menuEmptyMessage = _i18nKeys$menuEmptyMe === void 0 ? 'No matches found' : _i18nKeys$menuEmptyMe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)], " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
+        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
         isCover: false,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -155,12 +154,10 @@ TicketHeader.propTypes = {
   title: _propTypes["default"].string,
   i18nKeys: _propTypes["default"].shape({
     menuEmptyMessage: _propTypes["default"].string
-  }),
-  palette: _propTypes["default"].oneOf(['default', 'white'])
+  })
 };
 TicketHeader.defaultProps = {
-  i18nKeys: {},
-  palette: 'default'
+  i18nKeys: {}
 };
 
 if (false) {

package/lib/lookup/header/lookupHeaderCommon.module.css

@@ -1,19 +1,13 @@
 .container {
   min-height: var(--zd_size51);
   position: relative;
+  background-color: var(--zdt_lookupheader_default_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
 }[dir=ltr] .container {
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
 }[dir=rtl] .container {
   padding: 0 var(--zd_size10) 0 var(--zd_size52);
 }
-.default {
-  background-color: var(--zdt_lookupheader_default_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
-}
-.white {
-  background-color: var(--zdt_lookupheader_white_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_white_border);
-}
 .searchContainer, .title {
   margin: 0 var(--zd_size20);
 }

package/lib/version2/GlobalNotification/GlobalNotification.js

@@ -102,7 +102,8 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
           hideMessage = _this$props3.hideMessage,
           onClick = _this$props3.onClick,
           _this$props3$i18nKeys = _this$props3.i18nKeys,
-          i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys;
+          i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys,
+          customProps = _this$props3.customProps;
       var _i18nKeys$closeTitle = i18nKeys.closeTitle,
           closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
       return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
@@ -110,7 +111,8 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
         message: message,
         hideMessage: hideMessage,
         onClick: onClick,
-        closeTitle: closeTitle
+        closeTitle: closeTitle,
+        customProps: customProps
       });
     }
   }]);
@@ -126,7 +128,13 @@ GlobalNotification.propTypes = {
   onClick: _propTypes["default"].func,
   showMessage: _propTypes["default"].bool,
   type: _propTypes["default"].oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: _propTypes["default"].object
+  i18nKeys: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    ExtraProps: _propTypes["default"].object
+  })
+};
+GlobalNotification.defaultProps = {
+  customProps: {}
 };
 
 if (false) {
@@ -149,11 +157,15 @@ function GlobalNotificationUI(props) {
       message = props.message,
       onClick = props.onClick,
       _props$closeTitle = props.closeTitle,
-      closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle,
+      _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? {} : _props$customProps;
+  var _customProps$ExtraPro = customProps.ExtraProps,
+      ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "".concat(_GlobalNotificationModule["default"].message, " ").concat(type ? _GlobalNotificationModule["default"][type] : ''),
     "data-id": "show_".concat(type, "_message")
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     className: "".concat(_GlobalNotificationModule["default"].container),
     alignBox: "row",
     isCover: false,

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-54",
+  "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);
@@ -296,9 +296,7 @@
 
   /* lookup header common */
   --zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
-  --zdt_lookupheader_white_bg: #262f3d;
   --zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
-  --zdt_lookupheader_white_border: #384157;
   --zdt_lookupheader_para_text: #a8b0bd;
   --zdt_lookupheader_input_border: var(--zd_border_smoke33);
 
@@ -459,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;
 }