@zohodesk/components 1.0.0-alpha-214 → 1.0.0-alpha-218

package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js

@@ -9,10 +9,20 @@ export default class AdvancedMultiSelect__default extends Component {
     this.state = {
       options: [{
         id: 2,
-        text: 'text2'
+        text: 'text2',
+        listItemProps: {
+          style: {
+            color: 'red'
+          }
+        }
       }, {
         id: 3,
-        text: 'text3'
+        text: 'text3',
+        listItemProps: {
+          style: {
+            color: 'blue'
+          }
+        }
       }, {
         id: 4,
         text: 'text4'
@@ -85,7 +95,12 @@ export default class AdvancedMultiSelect__default extends Component {
         noMoreText: 'No More Options .',
         searchEmptyText: 'No Matches Found .'
       },
-      getFooter: this.getFooter
+      getFooter: this.getFooter,
+      customProps: {
+        SuggestionsProps: {
+          needBorder: false
+        }
+      }
     });
   }
 

package/es/Select/GroupSelect.js

@@ -18,7 +18,7 @@ import style from './Select.module.css';
 /**** Methods ****/
 
 import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId } from '../utils/dropDownUtils';
-import { getIsEmptyValue, scrollTo, debounce } from '../utils/Common';
+import { getIsEmptyValue, scrollTo, debounce, getSearchString } from '../utils/Common';
 /* eslint-disable react/no-unused-prop-types */
 
 /* eslint-disable react/sort-prop-types */
@@ -214,7 +214,7 @@ export class GroupSelectComponent extends PureComponent {
     } = this.state;
 
     if (needSearch && searchStr && searchStr.trim().length) {
-      searchStr = searchStr.toLowerCase().replace(/\s+/g, '');
+      searchStr = getSearchString(searchStr);
       let {
         suggestionGroups,
         suggestionOptionIds
@@ -253,8 +253,8 @@ export class GroupSelectComponent extends PureComponent {
     let {
       onSearch
     } = this.props;
-    let searchStrRegex = searchStr.toLowerCase().replace(/\s+/g, '');
-    let valueStrRegex = value.toLowerCase().replace(/\s+/g, '');
+    let searchStrRegex = getSearchString(searchStr);
+    let valueStrRegex = getSearchString(value);
     let isSearch = searchStrRegex !== valueStrRegex ? true : false;
     this.setState({
       searchStr: value,

package/es/Select/Select.js

@@ -1,3 +1,5 @@
+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); }
+
 /**** Libraries ****/
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -246,12 +248,17 @@ export class SelectComponent extends Component {
     let {
       options,
       valueField,
-      textField
+      textField,
+      customProps = {}
     } = props;
+    let {
+      listItemProps = {}
+    } = customProps;
     return this.formatOptions({
       options,
       valueField,
-      textField
+      textField,
+      listItemProps
     });
   }
 
@@ -693,7 +700,8 @@ export class SelectComponent extends Component {
       i18nKeys,
       htmlId,
       children,
-      iconOnHover
+      iconOnHover,
+      customProps
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -714,6 +722,11 @@ export class SelectComponent extends Component {
     let suggestions = this.handleFilterSuggestions();
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxProps = {},
+      DropdownSearchTextBoxProps = {},
+      SuggestionsProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-title": isDisabled ? title : ''
@@ -756,7 +769,10 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: TextBoxProps
+      }
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "both"
@@ -801,7 +817,8 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       autoComplete: false,
-      isFocus: isPopupReady
+      isFocus: isPopupReady,
+      customProps: TextBoxProps
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
       animationStyle: animationStyle,
       boxPosition: position || `${defaultDropBoxPosition}Center`,
@@ -834,11 +851,14 @@ export class SelectComponent extends Component {
       onClear: this.handleClearSearch,
       dataId: `${dataId}_search`,
       i18nKeys: TextBoxIcon_i18n,
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: DropdownSearchTextBoxProps
+      }
     }))) : null, /*#__PURE__*/React.createElement(CardContent, {
       customClass: dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
-    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       activeId: selectedId,
       suggestions: suggestions,
       getRef: this.suggestionItemRef,
@@ -856,7 +876,7 @@ export class SelectComponent extends Component {
         ariaParentRole: 'listbox',
         role: 'option'
       }
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,
@@ -946,7 +966,13 @@ SelectComponent.propTypes = {
   htmlId: PropTypes.string,
   children: PropTypes.node,
   onFocus: PropTypes.func,
-  iconOnHover: PropTypes.bool
+  iconOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    DropdownSearchTextBoxProps: PropTypes.object,
+    listItemProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
+  })
 };
 SelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -978,7 +1004,8 @@ SelectComponent.defaultProps = {
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
-  iconOnHover: false
+  iconOnHover: false,
+  customProps: {}
 };
 SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);

package/es/Select/docs/Select__default.docs.js

@@ -37,6 +37,40 @@ let option = [{
   text: 'Pineapple',
   id: '10'
 }];
+let customOption = [{
+  text: 'Apple',
+  id: 0,
+  listItemProps: {
+    style: {
+      'color': 'red'
+    }
+  }
+}, {
+  text: 'Banana',
+  id: '1',
+  listItemProps: {
+    style: {
+      'color': 'orange'
+    }
+  }
+}, {
+  text: 'Blackberries',
+  id: '2',
+  listItemProps: {
+    style: {
+      'color': 'blue'
+    }
+  }
+}, {
+  text: 'Guava',
+  id: '3'
+}, {
+  text: 'Grapes',
+  id: '4'
+}, {
+  text: 'Jackfruit',
+  id: '5'
+}];
 export default class Select__default extends React.Component {
   constructor(props) {
     super(props);
@@ -94,6 +128,51 @@ export default class Select__default extends React.Component {
       searchBoxPlaceHolder: "Search",
       isDefaultSelectValue: false,
       isDisabled: true
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Props"), /*#__PURE__*/React.createElement(Select, {
+      options: customOption,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      i18nKeys: {
+        loadingText: 'Loading',
+        emptyText: 'emptyText',
+        noMoreText: 'noMoreText',
+        searchEmptyText: 'searchEmptyText',
+        TextBoxIcon_i18n: {
+          clearText: 'Clear Data'
+        }
+      },
+      customProps: {
+        listItemProps: {
+          style: {
+            'color': 'green'
+          }
+        },
+        TextBoxProps: {
+          style: {
+            'color': 'brown'
+          }
+        },
+        DropdownSearchTextBoxProps: {
+          style: {
+            'color': 'purple'
+          }
+        }
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isDisabled",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isDisabled: true
     }), /*#__PURE__*/React.createElement("div", null, "Readonly"), /*#__PURE__*/React.createElement(Select, {
       options: option,
       onChange: this.handleChange,

package/es/Tag/Tag.module.css

@@ -230,6 +230,7 @@
 }
 .dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
+  --tag_text_color: var(--zdt_tag_dark_hover_text);
 }
 .darkTagClose {
   --tag_closeicon_bg_color: var(--zdt_tag_dark_close_bg);

package/es/TextBox/TextBox.js

@@ -92,7 +92,8 @@ export default class Textbox extends React.PureComponent {
       htmlId,
       a11y,
       customClass,
-      isFocus
+      isFocus,
+      customProps
     } = this.props;
     let {
       ariaLabel,
@@ -162,7 +163,7 @@ export default class Textbox extends React.PureComponent {
       value: value,
       onKeyPress: onKeyPress,
       onMouseDown: onMouseDown
-    }, options));
+    }, options, customProps));
   }
 
 }
@@ -182,7 +183,8 @@ Textbox.defaultProps = {
   autoComplete: true,
   borderColor: 'default',
   a11y: {},
-  isFocus: false
+  isFocus: false,
+  customProps: {}
 };
 Textbox.propTypes = {
   autofocus: PropTypes.bool,
@@ -233,7 +235,8 @@ Textbox.propTypes = {
     ariaReadonly: PropTypes.bool,
     ariaMultiselectable: PropTypes.bool
   }),
-  isFocus: PropTypes.bool
+  isFocus: PropTypes.bool,
+  customProps: PropTypes.object
 };
 
 if (false) {

package/es/TextBoxIcon/TextBoxIcon.js

@@ -79,7 +79,8 @@ export default class TextBoxIcon extends React.Component {
       customClass,
       iconOnHover,
       isFocus,
-      onClearMouseDown
+      onClearMouseDown,
+      customProps
     } = this.props;
     const {
       isActive
@@ -93,6 +94,9 @@ export default class TextBoxIcon extends React.Component {
     const {
       clearText = 'Clear'
     } = i18nKeys;
+    let {
+      TextBoxProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
@@ -125,7 +129,8 @@ export default class TextBoxIcon extends React.Component {
       onKeyPress: onKeyPress,
       onMouseDown: onMouseDown,
       needBorder: false,
-      customClass: customTextBox
+      customClass: customTextBox,
+      customProps: TextBoxProps
     }))), /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconContainer} ${customTBoxIcon}`
     }, /*#__PURE__*/React.createElement(Container, {
@@ -169,7 +174,8 @@ TextBoxIcon.defaultProps = {
   i18nKeys: {},
   customClass: {},
   iconOnHover: false,
-  isFocus: false
+  isFocus: false,
+  customProps: {}
 };
 TextBoxIcon.propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
@@ -214,7 +220,10 @@ TextBoxIcon.propTypes = {
   }),
   iconOnHover: PropTypes.bool,
   isFocus: PropTypes.bool,
-  onClearMouseDown: PropTypes.func
+  onClearMouseDown: PropTypes.func,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object
+  })
 };
 
 if (false) {

package/es/utils/Common.js

@@ -365,5 +365,5 @@ export function getElementSpace(elementRef) {
 }
 export function getSearchString() {
   let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return charachers.toLowerCase(); //.replace(/\s+/g, '');
+  return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
 }

package/es/utils/dropDownUtils.js

@@ -1,6 +1,6 @@
 /***** Libraries *****/
 import { createSelector } from 'reselect';
-import { getIsEmptyValue } from './Common';
+import { getIsEmptyValue, getSearchString } from './Common';
 export const dummyArray = [];
 export const dummyObj = {};
 export const getOptions = props => props.options || dummyArray;
@@ -36,6 +36,8 @@ const getIsStartWithSearch = props => props.isStartsWithSearch;
 
 const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
+const getListItemProps = props => props.listItemProps || '';
+
 export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch) => {
   const suggestions = [];
   const suggestionIds = [];
@@ -44,8 +46,8 @@ export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOpti
       id,
       value = ''
     } = option;
-    const valueString = value.toLowerCase();
-    const searchString = searchStr.toLowerCase();
+    const valueString = getSearchString(value);
+    const searchString = getSearchString(searchStr);
     const isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
 
     if (selectedOptions.indexOf(id) === -1 && isMatch) {
@@ -100,7 +102,7 @@ export const extractOptionId = id => {
     };
   }
 };
-export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions) => {
+export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -114,7 +116,8 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         imageField: impImageField,
         optionType: impOptionType,
         iconName: impIconName,
-        iconSize: impIconSize
+        iconSize: impIconSize,
+        listItemProps: listStyle
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
       const value = typeof option === 'object' ? option[impTextField || textField] : option;
@@ -146,6 +149,10 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
           optionDetails.isDisabled = disabledOptions.indexOf(id) >= 0;
         }
 
+        if (listStyle || listItemProps) {
+          optionDetails.listItemProps = listStyle || listItemProps;
+        }
+
         normalizedFormatOptions[id] = optionDetails;
         normalizedAllOptions[id] = option;
         revampOptions.push(optionDetails);

package/lib/Appearance/dark/mode/darkMode.module.css

@@ -153,7 +153,6 @@
   --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
   --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
   --zdt_textbox_secondary_text: #a8b0bd;
-  --zdt_textbox_light_text: var(--dot_text_white);
 
   /* dropdown */
   --zdt_dropdown_default_text: #e2e4e6;
@@ -295,7 +294,6 @@
   --zdt_multiselect_box_bg: #232b38;
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: #828994;
-  --zdt_multiselect_darkmsg_text: #d0d0d4;
 
   /* advanced multiselect */
   --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
@@ -382,14 +380,14 @@
   --zdt_tabs_alpha_box_shadow: var(--zd_shadow_dark10);
   --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
   --zdt_tabs_highlight_border: #e2e4e6;
- 
+
   /* custom scroll */
   --zdt_customscroll_default_bg: rgba(225, 225, 225, 0.06);
   --zdt_customscroll_thump_bg: rgba(225, 225, 225, 0.12);
-  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
   --zdt_customscroll_thump_hover_bg: rgba(168, 176, 189, 0.3);
-  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
   --zdt_customscroll_border: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
   --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
   --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
 }

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

@@ -22,6 +22,7 @@
     /* 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;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #0e7c1c;
     --zdt_cta_alpha_border: #45a159;
     --zdt_cta_alpha_hover_border: #0e7c1c;
-    --zdt_cta_alpha_bg: #2A433F;
+    --zdt_cta_alpha_bg: #2a433f;
     --zdt_cta_beta_border: #45a159;
     --zdt_cta_grey_10_bg: #262f3d;
     --zdt_cta_grey_10_border: #262f3d;

package/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* 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;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* 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;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #a81111;
     --zdt_cta_alpha_border: #e94f4f;
     --zdt_cta_alpha_hover_border: #a81111;
-    --zdt_cta_alpha_bg: #372F3A;
+    --zdt_cta_alpha_bg: #372f3a;
     --zdt_cta_beta_border: #e94f4f;
     --zdt_cta_grey_10_bg: #262f3d;
     --zdt_cta_grey_10_border: #262f3d;

package/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* 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;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* 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;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/lib/Appearance/default/mode/defaultMode.module.css

@@ -141,6 +141,8 @@
   --zdt_tag_pure_border: var(--zd_border_smoke91);
   --zdt_tag_pure_hover_bg: var(--zd_bg_smoke6);
   --zdt_tag_pure_hover_border: var(--zd_border_dark6);
+  --zdt_tag_dark_close_bg: #864654;
+  --zdt_tag_dark_close_text: #de3535;
   --zdt_tag_dark_close_hover_bg: #de3535;
 
   /* textbox */
@@ -153,7 +155,6 @@
   --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
   --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
   --zdt_textbox_secondary_text: var(--dot_text_shuttleGrey);
-  --zdt_textbox_light_text: var(--dot_text_white);
 
   /* dropdown */
   --zdt_dropdown_default_text: var(--dot_text_black);
@@ -295,7 +296,6 @@
   --zdt_multiselect_box_bg: var(--dot_bg_white);
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: var(--dot_text_slateGrey);
-  --zdt_multiselect_darkmsg_text: #d0d0d4;
 
   /* advanced multiselect */
   --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
@@ -383,13 +383,13 @@
   --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
   --zdt_tabs_highlight_border: var(--dot_border_black);
 
-   /* custom scroll */
-   --zdt_customscroll_default_bg: rgba(0, 0, 0, 0.02);
-   --zdt_customscroll_thump_bg: rgba(0, 0, 0, 0.12);
-   --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.15);
-   --zdt_customscroll_thump_hover_bg: rgba(0, 0, 0, 0.16);
-   --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.17);
-   --zdt_customscroll_border: rgba(44, 51, 77, 0.1);
-   --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
-   --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
+  /* custom scroll */
+  --zdt_customscroll_default_bg: rgba(0, 0, 0, 0.02);
+  --zdt_customscroll_thump_bg: rgba(0, 0, 0, 0.12);
+  --zdt_customscroll_thump_hover_bg: rgba(0, 0, 0, 0.16);
+  --zdt_customscroll_border: rgba(44, 51, 77, 0.1);
+  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.15);
+  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.17);
+  --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
 }