@zohodesk/components 1.0.0-temp-40 → 1.0.0-temp-41

package/es/Tag/Tag.module.css

@@ -50,9 +50,12 @@
 }
 .disabled {
   pointer-events: none;
-  --tag_cursor: not-allowed;
   --tag_text_color: var(--zdt_tag_disabled_text);
 }
+.readonly,
+.disabled {
+  --tag_cursor: not-allowed;
+}
 .pointer {
   --tag_cursor: pointer;
 }
@@ -158,11 +161,11 @@
 .danger {
   --tag_bg_color: var(--zdt_tag_default_danger_bg);
 }
-.default:hover {
+.effect.default:hover {
   --tag_bg_color: var(--zdt_tag_default_hover_bg);
 }
 .activedefault,
-.activedefault:hover {
+.effect.activedefault:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 .activeprimaryClose,
@@ -170,11 +173,11 @@
   --tag_closeicon_bg_color: var(--zdt_tag_primary_bg);
 }
 
-.danger:hover {
+.effect.danger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedanger,
-.activedanger:hover {
+.effect.activedanger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedangerClose,
@@ -187,7 +190,7 @@
   --tag_text_color: var(--zdt_tag_secondary_text);
 }
 .activesecondary,
-.secondary:hover {
+.effect.secondary:hover {
   --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
 }
 
@@ -196,12 +199,12 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_pure_border);
 }
-.pureDotted:hover {
+.effect.pureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_hover_bg);
   --tag_border_color: var(--zdt_tag_pure_hover_border);
 }
 .activepureDotted,
-.activepureDotted:hover {
+.effect.activepureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_bg);
 }
 
@@ -210,10 +213,10 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_primary_border);
 }
-.primaryDotted:hover,
+.effect.primaryDotted:hover,
 .activeprimaryDotted,
 .primary,
-.primary:hover {
+.effect.primary:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 
@@ -228,7 +231,7 @@
   --tag_bg_color: var(--zdt_tag_dark_bg);
   --tag_text_color: var(--zdt_tag_dark_text);
 }
-.dark:hover {
+.effect.dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
   --tag_text_color: var(--zdt_tag_dark_hover_text);
 }

package/es/Tag/docs/Tag__default.docs.js

@@ -135,6 +135,76 @@ export default class Tag__default extends Component {
     }, /*#__PURE__*/React.createElement(Tag, {
       text: "Bharathi",
       palette: "primaryDotted"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "dark"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "pureDarkDotted"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "darkPrimaryDotted"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Palette with Read-only"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      imageURL: "https://iz.zohostatic.com/sites/default/files/styles/product-home-page/public/Desk-logo.png?itok=NW1geavh",
+      hasAvatar: true,
+      palette: "default",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      rounded: false,
+      initial: "TT",
+      hasAvatar: true,
+      palette: "danger",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "secondary",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "pureDotted",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "primaryDotted",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "dark",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "pureDarkDotted",
+      isReadOnly: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Tag, {
+      text: "Bharathi",
+      palette: "darkPrimaryDotted",
+      isReadOnly: true
     })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       style: titleStyle
     }, "Rounded"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {

package/es/TextBox/__tests__/TextBox.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import TextBox from '../TextBox';
 import renderer from 'react-test-renderer';

package/es/TextBoxIcon/TextBoxIcon.js

@@ -100,7 +100,7 @@ export default class TextBoxIcon extends React.Component {
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : '' : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -12,8 +12,11 @@
   composes: varClass;
   position: relative;
 }
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled,.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+.disabled, .readonly {
+  cursor: not-allowed;
 }
 .icon {
   composes: offSelection from '../common/common.module.css';

package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import TextBoxIcon from '../TextBoxIcon';
 import renderer from 'react-test-renderer'; // children: PropTypes.node,

package/es/Textarea/__tests__/Textarea.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import Textarea from '../Textarea';
 import renderer from 'react-test-renderer';

package/es/Tooltip/Tooltip.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.string.replace";
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Tooltip.module.css';

package/es/a11y/FocusScope/FocusScope.js

@@ -225,9 +225,7 @@ function useFocusContainment(scopeRef, contain) {
   }, [raf]);
 }
 
-function isElementInAnyScope(element) {
-  let scopes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
+function isElementInAnyScope(element, scopes = []) {
   for (let scope of scopes.values()) {
     if (isElementInScope(element, scope.current)) {
       return true;
@@ -237,14 +235,11 @@ function isElementInAnyScope(element) {
   return false;
 }
 
-function isElementInScope(element) {
-  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+function isElementInScope(element, scope = []) {
   return scope.some(node => node.contains(element));
 }
 
-function focusElement() {
-  let element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
+function focusElement(element = null) {
   if (element != null) {
     element.focus();
   }
@@ -264,8 +259,7 @@ function findElement(elements) {
   return ele.length ? ele[0] : null;
 }
 
-function focusFirstInScope() {
-  let scope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function focusFirstInScope(scope = []) {
   let elements = getFocusableElementsInScope(scope, {
     tabbable: true
   });

package/es/beta/FocusRing/FocusRing.js

@@ -16,10 +16,7 @@ const FOCUS_VISIBLE_INPUT_KEYS = {
   Escape: false
 };
 
-function triggerChangeHandlers() {
-  let evType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : eventFrom;
-  let e = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : eventType;
-
+function triggerChangeHandlers(evType = eventFrom, e = eventType) {
   for (let handler of changeHandlers) {
     handler(evType, e);
   }

package/es/utils/Common.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.string.replace";
 //$Id$//
 import viewPort from '../Popup/viewPort';
 const {
@@ -38,14 +39,11 @@ export function encodeForHtml(str) {
 
   return str;
 }
-export function getListOfDetails() {
-  let Obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let fn = arguments.length > 1 ? arguments[1] : undefined;
+export function getListOfDetails(Obj = {}, fn) {
   const ids = Object.keys(Obj) || [];
   return ids.map(id => fn(Obj[id]));
 }
-export function capitalize() {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+export function capitalize(value = '') {
   let newValue = '';
 
   for (let i = 0; i < value.length; i++) {
@@ -58,18 +56,12 @@ export function capitalize() {
 
   return newValue;
 }
-export function bind() {
-  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
-    handlers[_key] = arguments[_key];
-  }
-
+export function bind(...handlers) {
   handlers.forEach(handler => {
     this[handler] = this[handler].bind(this);
   });
 }
-export function getFullName() {
-  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getFullName(firstName = '', lastName = '') {
   let fullName = '';
 
   if (firstName !== null && firstName !== '') {
@@ -82,8 +74,7 @@ export function getFullName() {
 
   return fullName;
 }
-export function getStringifiedOutputForJson() {
-  let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export function getStringifiedOutputForJson(input = {}) {
   const keys = Object.keys(input);
   const modifiedInput = keys.reduce((curr, next) => {
     const values = input[next] || [];
@@ -119,19 +110,14 @@ export function filterValue(obj, val) {
   });
   return result;
 }
-export function merge() {
-  let oldObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let newObj = arguments.length > 1 ? arguments[1] : undefined;
+export function merge(oldObj = {}, newObj) {
   const copyOfOld = Object.assign({}, oldObj);
   return Object.keys(newObj).reduce((res, key) => {
     res[key] = Object.assign({}, res[key] || {}, newObj[key]);
     return res;
   }, copyOfOld);
 }
-export function formatValue() {
-  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
-  let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
+export function formatValue(values = [], valueField = 'id', textField = 'name') {
   return values && values.map(value => {
     let formattedValue = value;
 
@@ -155,8 +141,7 @@ export function bytesToSize(bytes) {
   const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
   return `${Math.round(bytes / Math.pow(1024, i), 2)} ${sizes[i]}`;
 }
-export function getMemSize(bytes) {
-  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+export function getMemSize(bytes, size = !0) {
   const thresh = size ? 1000 : 1024;
 
   if (Math.abs(bytes) < thresh) {
@@ -289,11 +274,7 @@ export const debounce = function (func, wait) {
   };
 };
 let timerId;
-export const throttle = function (func, wait) {
-  for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-    args[_key2 - 2] = arguments[_key2];
-  }
-
+export const throttle = (func, wait, ...args) => {
   if (timerId) {
     return;
   }
@@ -363,7 +344,6 @@ export function getElementSpace(elementRef) {
     availableInsideSpace: availableInsideSpace
   };
 }
-export function getSearchString() {
-  let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+export function getSearchString(charachers = '') {
   return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
 }

package/es/utils/datetime/common.js

@@ -1,11 +1,10 @@
+import "core-js/modules/es.string.replace";
 let dateFormat = {
   dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   timeNames: ['a', 'p', 'am', 'pm', 'A', 'P', 'AM', 'PM']
 };
-export function pad(n) {
-  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  let z = arguments.length > 2 ? arguments[2] : undefined;
+export function pad(n, width = 1, z) {
   z = z || '0';
   n = `${n}`;
   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
@@ -77,9 +76,7 @@ export function replaceI18NValuesWithRegex(i18nStr, values) {
 export function unescapeUnicode(str) {
   return str.replace(/\\u([a-fA-F0-9]{4})/g, (g, m1) => String.fromCharCode(parseInt(m1, 16)));
 }
-export function getValues() {
-  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let diff = arguments.length > 1 ? arguments[1] : undefined;
+export function getValues(params = [], diff) {
   return params.map(param => diff[param]);
 }
 export function getI18NValue(i18n) {

package/es/utils/dropDownUtils.js

@@ -377,12 +377,11 @@ export const makeGetOptionIdChange = () => createSelector([getOptions, getValueF
     return changedOptions;
   }, newOptions);
 });
-export const filterSelectedOptions = function () {
-  let {
-    selectedOptions = dummyArray,
-    propSelectedOptions = dummyArray,
-    disabledOptions = dummyArray
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export const filterSelectedOptions = ({
+  selectedOptions = dummyArray,
+  propSelectedOptions = dummyArray,
+  disabledOptions = dummyArray
+} = {}) => {
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
 

package/es/utils/getInitial.js

@@ -1,6 +1,4 @@
-export function getInitial() {
-  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getInitial(firstName = '', lastName = '') {
   let initial = '';
 
   if (firstName) {

package/lib/AppContainer/AppContainer.js

@@ -33,6 +33,8 @@ require("@zohodesk/variables/lib/no_transitionVariables.module.css");
 
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
 
+var _Config = require("../Provider/Config");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -74,6 +76,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
     _this.removeTimeout = _this.removeTimeout.bind(_assertThisInitialized(_this));
     _this.getContainerRef = _this.getContainerRef.bind(_assertThisInitialized(_this));
     _this.timer = null;
+    _this.tooltipDebounce = (0, _Config.getLibraryConfig)('tooltipDebounce');
     return _this;
   }
 
@@ -99,14 +102,10 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
       if (this.timer) {
         this.timer = clearTimeout(this.timer);
       }
-      /** Adding timeout before showing tooltip */
-
-      /**Remove this tooltip debounce */
-
 
       this.timer = setTimeout(function () {
         return _this2.mouseOverDispatch(e);
-      }, window.tooltipDebounce || 500);
+      }, this.tooltipDebounce);
     }
   }, {
     key: "getContainerRef",
@@ -144,7 +143,6 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
           children = _this$props.children,
           tagName = _this$props.tagName,
           dataId = _this$props.dataId,
-          eleRef = _this$props.eleRef,
           tooltipClass = _this$props.tooltipClass,
           tooltipParentClass = _this$props.tooltipParentClass,
           customProps = _this$props.customProps;

package/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css

@@ -1,34 +1,34 @@
-[data-mode='dark'][data-theme='blue'] {
-    --zdt_cta_primary_text: #479dff;
-    --zdt_cta_primary_hover_text: #6eb2ff;
-    --zdt_cta_primary_bg: #479dff;
-    --zdt_cta_primary_hover_bg: #1065cc;
-    --zdt_cta_primary_border: #479dff;
-    --zdt_cta_primary_hover_border: #1065cc;
-    --zdt_cta_primary_box_shadow: rgb(10, 115, 235, 0.2);
-    --zdt_cta_primary_hover_box_shadow: rgb(0, 83, 184, 0.25);
-    --zdt_cta_primary_light_bg: #2c3b4d;
-    --zdt_cta_primary_light_hover_bg: #262f3d;
-    --zdt_cta_primary_light_border: var(--zd_border_primary13);
-    --zdt_cta_secondary_bg: #479dff;
-    --zdt_cta_secondary_text: var(--dot_text_white);
-    --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
-    --zdt_cta_secondary_light_border: #3f536b;
-    --zdt_cta_alpha_text: #479dff;
-    --zdt_cta_alpha_hover_text: #6eb2ff;
-    --zdt_cta_alpha_border: #479dff;
-    --zdt_cta_alpha_hover_border: #1065cc;
-    --zdt_cta_alpha_bg: #253142;
-    --zdt_cta_beta_border: #479dff;
-    --zdt_cta_grey_10_bg: #262f3d;
-    --zdt_cta_grey_10_border: #262f3d;
-    --zdt_cta_grey_15_bg: #2d3748;
-    --zdt_cta_grey_15_border: #2d3748;
-    --zdt_cta_grey_20_bg: #161b23;
-    --zdt_cta_grey_35_bg: #384157;
-    --zdt_cta_grey_35_text: #384157;
-    --zdt_cta_grey_35_border: #384157;
-    --zdt_cta_grey_40_bg: #3e4d63;
-    --zdt_cta_grey_40_text: #3e4d63;
-    --zdt_cta_grey_40_border: #3e4d63;
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
+	--zdt_cta_primary_text: #479dff;
+	--zdt_cta_primary_hover_text: #6eb2ff;
+	--zdt_cta_primary_bg: #479dff;
+	--zdt_cta_primary_hover_bg: #1065cc;
+	--zdt_cta_primary_border: #479dff;
+	--zdt_cta_primary_hover_border: #1065cc;
+	--zdt_cta_primary_box_shadow: rgba(10, 115, 235, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(0, 83, 184, 0.25);
+	--zdt_cta_primary_light_bg: #2c3b4d;
+	--zdt_cta_primary_light_hover_bg: #262f3d;
+	--zdt_cta_primary_light_border: var(--zd_border_primary13);
+	--zdt_cta_secondary_bg: #479dff;
+	--zdt_cta_secondary_text: var(--dot_text_white);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
+	--zdt_cta_secondary_light_border: #3f536b;
+	--zdt_cta_alpha_text: #479dff;
+	--zdt_cta_alpha_hover_text: #6eb2ff;
+	--zdt_cta_alpha_border: #479dff;
+	--zdt_cta_alpha_hover_border: #1065cc;
+	--zdt_cta_alpha_bg: #253142;
+	--zdt_cta_beta_border: #479dff;
+	--zdt_cta_grey_10_bg: #262f3d;
+	--zdt_cta_grey_10_border: #262f3d;
+	--zdt_cta_grey_15_bg: #2d3748;
+	--zdt_cta_grey_15_border: #2d3748;
+	--zdt_cta_grey_20_bg: #161b23;
+	--zdt_cta_grey_35_bg: #384157;
+	--zdt_cta_grey_35_text: #384157;
+	--zdt_cta_grey_35_border: #384157;
+	--zdt_cta_grey_40_bg: #3e4d63;
+	--zdt_cta_grey_40_text: #3e4d63;
+	--zdt_cta_grey_40_border: #3e4d63
 }

package/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css

@@ -1,48 +1,42 @@
-[data-mode='dark'][data-theme='blue'] {
-    /* stencil */
-    --zdt_stencil_dark_bg: #383f55;
-    --zdt_stencil_dark_gradient_bg: linear-gradient(
-        left,
-        #383f55 0,
-        #414963 33.33%,
-        #414961 66.66%,
-        #383f55 100%
-    );
-
-    /* dropbox */
-    --zdt_dropbox_dark_bg: #232b38;
-
-    /* listitem */
-    --zdt_listitem_dark_bg: #232b38;
-    --zdt_listitem_dark_text: #e2e4e6;
-    --zdt_listitem_dark_effect_bg: #262f3d;
-    --zdt_listitem_dark_active_bg: #3b4d6d;
-    --zdt_listitem_dark_tickicon: #479dff;
-
-    /* tag */
-    --zdt_tag_dark_text: #d0d0d4;
-    --zdt_tag_dark_bg: #42485f;
-    --zdt_tag_dark_hover_text: #d0d0d4;
-    --zdt_tag_dark_hover_bg: #503348;
-    --zdt_tag_dark_close_bg: #864654;
-    --zdt_tag_dark_close_text: #de3535;
-
-    /* multiselect */
-    --zdt_multiselect_dark_border: #4b5168;
-    --zdt_multiselect_darkmsg_bg: #232b38;
-    --zdt_multiselect_darkmsg_text: #d0d0d4;
-    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
-
-    /* avatar */
-    --zdt_avatar_white_border: #a8b0bd;
-    --zdt_avatar_white_text: var(--dot_text_white);
-
-    /* label */
-    --zdt_label_dark_text: #d0d0d4;
-
-    /* textbox */
-    --zdt_textbox_light_text: var(--dot_text_white);
-
-    /* dropdown */
-    --zdt_dropdown_darkheading_text: #a8b0bd;
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
+	/* stencil */
+	--zdt_stencil_dark_bg: #383f55;
+	--zdt_stencil_dark_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: #232b38;
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: #232b38;
+	--zdt_listitem_dark_text: #e2e4e6;
+	--zdt_listitem_dark_effect_bg: #262f3d;
+	--zdt_listitem_dark_active_bg: #3b4d6d;
+	--zdt_listitem_dark_tickicon: #479dff;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: #503348;
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: #de3535;
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: #4b5168;
+	--zdt_multiselect_darkmsg_bg: #232b38;
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: #e2e4e6;
+	
+	/* avatar */
+	--zdt_avatar_white_border: #a8b0bd;
+	--zdt_avatar_white_text: var(--dot_text_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_text_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: #a8b0bd;
 }