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

package/lib/utils/Common.js

@@ -3,33 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.encodeForHtml = encodeForHtml;
+exports.getListOfDetails = getListOfDetails;
+exports.capitalize = capitalize;
 exports.bind = bind;
+exports.getFullName = getFullName;
+exports.getStringifiedOutputForJson = getStringifiedOutputForJson;
+exports.mapValues = mapValues;
+exports.filterValue = filterValue;
+exports.merge = merge;
+exports.formatValue = formatValue;
 exports.bytesToSize = bytesToSize;
-exports.capitalize = capitalize;
+exports.getMemSize = getMemSize;
 exports.checkIsImageFile = checkIsImageFile;
-exports.debounce = exports.cs = void 0;
-exports.doAfterScrollEnd = doAfterScrollEnd;
-exports.encodeForHtml = encodeForHtml;
-exports.filterValue = filterValue;
+exports.getPortalName = getPortalName;
+exports.getFullDateString = getFullDateString;
 exports.format12Hour = format12Hour;
-exports.formatValue = formatValue;
 exports.getDateOnly = getDateOnly;
+exports.doAfterScrollEnd = doAfterScrollEnd;
+exports.remConvert = remConvert;
+exports.isDescendant = isDescendant;
 exports.getElementSpace = getElementSpace;
-exports.getFullDateString = getFullDateString;
-exports.getFullName = getFullName;
-exports.getIsEmptyValue = void 0;
-exports.getListOfDetails = getListOfDetails;
-exports.getMemSize = getMemSize;
-exports.getPortalName = getPortalName;
 exports.getSearchString = getSearchString;
-exports.getStringifiedOutputForJson = getStringifiedOutputForJson;
-exports.getTotalDimension = void 0;
-exports.isDescendant = isDescendant;
-exports.mapValues = mapValues;
-exports.merge = merge;
-exports.parseDecimal = void 0;
-exports.remConvert = remConvert;
-exports.throttle = exports.stopAllEventPropagation = exports.scrollTo = void 0;
+exports.getIsEmptyValue = exports.scrollTo = exports.throttle = exports.debounce = exports.stopAllEventPropagation = exports.getTotalDimension = exports.parseDecimal = exports.cs = void 0;
 
 var _viewPort = _interopRequireDefault(require("../Popup/viewPort"));
 

package/lib/utils/datetime/common.js

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.pad = pad;
 exports.formatDate = formatDate;
-exports.getDiffObj = getDiffObj;
-exports.getI18NInfo = getI18NInfo;
-exports.getI18NValue = getI18NValue;
-exports.getMonthEnd = getMonthEnd;
+exports.replaceI18NValuesWithRegex = replaceI18NValuesWithRegex;
+exports.unescapeUnicode = unescapeUnicode;
 exports.getValues = getValues;
+exports.getI18NValue = getI18NValue;
+exports.getI18NInfo = getI18NInfo;
 exports.isToday = isToday;
+exports.isYesterday = isYesterday;
 exports.isTomorrow = isTomorrow;
-exports.isTwoWeeksOrMore = isTwoWeeksOrMore;
 exports.isWithinAWeek = isWithinAWeek;
-exports.isYesterday = isYesterday;
-exports.pad = pad;
-exports.replaceI18NValuesWithRegex = replaceI18NValuesWithRegex;
-exports.unescapeUnicode = unescapeUnicode;
+exports.isTwoWeeksOrMore = isTwoWeeksOrMore;
+exports.getDiffObj = getDiffObj;
+exports.getMonthEnd = getMonthEnd;
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 

package/lib/utils/dropDownUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionIdGrouping = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetOptionIdChange = exports.makeGetMultiSelectSelectedOptions = exports.makeGetMultiSelectFilterSuggestions = exports.makeGetGroupSelectOptions = exports.makeGetGroupSelectFilterSuggestions = exports.makeFormatOptions = exports.getValueField = exports.getTextField = exports.getPrefixText = exports.getOptions = exports.getOptionType = exports.getImageField = exports.getIconSize = exports.getIconName = exports.filterSelectedOptions = exports.extractOptionId = exports.dummyObj = exports.dummyArray = void 0;
+exports.filterSelectedOptions = exports.makeGetOptionIdChange = exports.makeGetGroupSelectFilterSuggestions = exports.makeGetGroupSelectOptions = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetMultiSelectSelectedOptions = exports.makeFormatOptions = exports.extractOptionId = exports.optionIdGrouping = exports.makeGetMultiSelectFilterSuggestions = exports.getPrefixText = exports.getOptionType = exports.getIconSize = exports.getIconName = exports.getImageField = exports.getTextField = exports.getValueField = exports.getOptions = exports.dummyObj = exports.dummyArray = void 0;
 
 var _reselect = require("reselect");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-40",
+  "version": "1.0.0-temp-41",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -13,7 +13,8 @@
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
     "dubCheck": "node dubFinder  node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
-    "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components",
+    "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
+    "build:variables": "node ./preprocess/index",
     "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
     "start": "react-cli start",
     "docs": "npm run dubCheck && react-cli docs",
@@ -55,6 +56,9 @@
     "react-sortable-hoc": "^0.8.3"
   },
   "react-cli": {
+    "preprocessor": {
+      "runner": "preprocess/index.js"
+    },
     "docs": {
       "componentFolder": "./src",
       "cssUniqueness": "false",
@@ -65,4 +69,4 @@
       "hasRTL": true
     }
   }
-}
+}

package/preprocess/componentThemeColors.js

@@ -0,0 +1,119 @@
+var { componentThemeVariables } = require('./json/componentVariableJson');
+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)
+    }ComponentTheme.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 = '';
+  componentThemeVariables.map(componentVariable => {
+    let commentName = componentVariable[3];
+    counting = counter++;
+    if (counting != 0) {
+      newLine = `\n\t`;
+    }
+    if (mode == 'default') {
+      let componentDefaultColors = componentVariable[1][1];
+
+      let colorsResult = '';
+      if (theme == 'blue') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDefaultColors[0]};`
+        ];
+      } else if (theme == 'green') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDefaultColors[1]};`
+        ];
+      } else if (theme == 'orange') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDefaultColors[2]};`
+        ];
+      } else if (theme == 'red') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDefaultColors[3]};`
+        ];
+      } else if (theme == 'yellow') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDefaultColors[4]};`
+        ];
+      }
+      exportVariables.push(
+        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
+        colorsResult
+      );
+    } else if (mode == 'dark') {
+      let componentDarkColors = componentVariable[2][1];
+      let colorsResult = '';
+      if (theme == 'blue') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDarkColors[0]};`
+        ];
+      } else if (theme == 'green') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDarkColors[1]};`
+        ];
+      } else if (theme == 'orange') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDarkColors[2]};`
+        ];
+      } else if (theme == 'red') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDarkColors[3]};`
+        ];
+      } else if (theme == 'yellow') {
+        colorsResult = [
+          `\n\t--zdt_${componentVariable[0]}: ${componentDarkColors[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/ctaThemeColors.js

@@ -0,0 +1,95 @@
+var { ctaThemeVariables } = require('./json/ctaVariableJson');
+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)
+    }CTATheme.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 = [];
+  ctaThemeVariables.map(ctaVariable => {
+    if (mode == 'default') {
+      let ctaDefaultColors = ctaVariable[1][1];
+      let colorsResult = '';
+      if (theme == 'blue') {
+        colorsResult = [
+          `\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDefaultColors[0]}`
+        ];
+      } else if (theme == 'green') {
+        colorsResult = [
+          `\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDefaultColors[1]}`
+        ];
+      } else if (theme == 'orange') {
+        colorsResult = [
+          `\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDefaultColors[2]}`
+        ];
+      } else if (theme == 'red') {
+        colorsResult = [
+          `\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDefaultColors[3]}`
+        ];
+      } else if (theme == 'yellow') {
+        colorsResult = [
+          `\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDefaultColors[4]}`
+        ];
+      }
+      exportVariables.push(colorsResult);
+    } else if (mode == 'dark') {
+      let ctaDarkColors = ctaVariable[2][1];
+      let colorsResult = '';
+      if (theme == 'blue') {
+        colorsResult = [`\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDarkColors[0]}`];
+      } else if (theme == 'green') {
+        colorsResult = [`\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDarkColors[1]}`];
+      } else if (theme == 'orange') {
+        colorsResult = [`\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDarkColors[2]}`];
+      } else if (theme == 'red') {
+        colorsResult = [`\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDarkColors[3]}`];
+      } else if (theme == 'yellow') {
+        colorsResult = [`\n\t--zdt_cta_${ctaVariable[0]}: ${ctaDarkColors[4]}`];
+      }
+      exportVariables.push(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,2 @@
+require('./ctaThemeColors');
+require('./componentThemeColors');

package/preprocess/json/componentVariableJson.js

@@ -0,0 +1,259 @@
+/* sample color order => 
+--zdt_cta_variable_name, 
+[['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow']], 
+[['darkMode'], ['blue', 'green', 'orange', 'red', 'yellow']], ['css comment name'] */
+
+const componentThemeVariables = [
+  [
+    'stencil_dark_bg',
+    [
+      ['default'],
+      [
+        '#383f55',
+        'rgba(255, 255, 255, 0.07)',
+        'rgba(255, 255, 255, 0.07)',
+        'rgba(255, 255, 255, 0.07)',
+        'rgba(255, 255, 255, 0.07)'
+      ]
+    ],
+    [['dark'], ['#383f55', '#383f55', '#383f55', '#383f55', '#383f55']],
+    ['stencil']
+  ],
+  [
+    'stencil_dark_gradient_bg',
+    [
+      ['default'],
+      [
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
+        'linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
+        'linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
+        'linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)'
+      ]
+    ],
+    [
+      ['dark'],
+      [
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
+        'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)'
+      ]
+    ]
+  ],
+  [
+    'dropbox_dark_bg',
+    [['default'], ['#383f57', '#1d2f33', '#332e24', '#34222d', '#313323']],
+    [['dark'], ['#232b38', '#232b38', '#232b38', '#232b38', '#232b38']],
+    ['dropbox']
+  ],
+  [
+    'listitem_dark_bg',
+    [['default'], ['#383f57', '#1d2f33', '#332e24', '#34222d', '#313323']],
+    [['dark'], ['#232b38', '#232b38', '#232b38', '#232b38', '#232b38']],
+    ['listitem']
+  ],
+  [
+    'listitem_dark_text',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6']]
+  ],
+  [
+    'listitem_dark_effect_bg',
+    [
+      ['default'],
+      [
+        '#444a61',
+        'rgba(255, 255, 255, 0.12)',
+        'rgba(255, 255, 255, 0.12)',
+        'rgba(255, 255, 255, 0.12)',
+        'rgba(255, 255, 255, 0.12)'
+      ]
+    ],
+    [['dark'], ['#262f3d', '#262f3d', '#262f3d', '#262f3d', '#262f3d']]
+  ],
+  [
+    'listitem_dark_active_bg',
+    [['default'], ['#3b4d6d', '#2d484e', '#4b4335', '#4d3243', '#494c34']],
+    [['dark'], ['#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d']]
+  ],
+  [
+    'listitem_dark_tickicon',
+    [['default'], ['#6cbbfc', '#4ac064', '#ff6363', '#e57717', '#e8b923']],
+    [['dark'], ['#479dff', '#45a159', '#e94f4f', '#ff801f', '#d79835']]
+  ],
+  [
+    'tag_dark_text',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    ['tag']
+  ],
+  [
+    'tag_dark_bg',
+    [
+      ['default'],
+      [
+        '#42485f',
+        'rgba(255, 255, 255, 0.07)',
+        'rgba(255, 255, 255, 0.07)',
+        'rgba(255, 255, 255, 0.07)',
+        'rgba(255, 255, 255, 0.07)'
+      ]
+    ],
+    [['dark'], ['#42485f', '#42485f', '#42485f', '#42485f', '#42485f']]
+  ],
+  [
+    'tag_dark_hover_text',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']]
+  ],
+  [
+    'tag_dark_hover_bg',
+    [['default'], ['#503348', '#503348', '#503348', '#503348', '#503348']],
+    [['dark'], ['#503348', '#503348', '#503348', '#503348', '#503348']]
+  ],
+  [
+    'tag_dark_close_bg',
+    [['default'], ['#864654', '#864654', '#864654', '#864654', '#864654']],
+    [['dark'], ['#864654', '#864654', '#864654', '#864654', '#864654']]
+  ],
+  [
+    'tag_dark_close_text',
+    [['default'], ['#de3535', '#de3535', '#de3535', '#de3535', '#de3535']],
+    [['dark'], ['#de3535', '#de3535', '#de3535', '#de3535', '#de3535']]
+  ],
+  [
+    'multiselect_dark_border',
+    [
+      ['default'],
+      [
+        '#4b5168',
+        'rgba(255, 255, 255, 0.2)',
+        'rgba(255, 255, 255, 0.2)',
+        'rgba(255, 255, 255, 0.2)',
+        'rgba(255, 255, 255, 0.2)'
+      ]
+    ],
+    [['dark'], ['#4b5168', '#4b5168', '#4b5168', '#4b5168', '#4b5168']],
+    ['multiselect']
+  ],
+  [
+    'multiselect_darkmsg_bg',
+    [
+      ['default'],
+      [
+        '#383f57',
+        'rgba(255, 255, 255, 0.02)',
+        'rgba(255, 255, 255, 0.02)',
+        'rgba(255, 255, 255, 0.02)',
+        'rgba(255, 255, 255, 0.02)'
+      ]
+    ],
+    [['dark'], ['#232b38', '#232b38', '#232b38', '#232b38', '#232b38']]
+  ],
+  [
+    'multiselect_darkmsg_text',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']]
+  ],
+  [
+    'multiselect_darkdelete_hover_text',
+    [
+      ['default'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    [['dark'], ['#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6']]
+  ],
+  [
+    'avatar_white_border',
+    [
+      ['default'],
+      [
+        'var(--dot_border_shuttleGrey)',
+        'rgba(255, 255, 255, 0.2)',
+        'rgba(255, 255, 255, 0.2)',
+        'rgba(255, 255, 255, 0.2)',
+        'rgba(255, 255, 255, 0.2)'
+      ]
+    ],
+    [['dark'], ['#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd']],
+    ['avatar']
+  ],
+  [
+    'avatar_white_text',
+    [
+      ['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)'
+      ]
+    ]
+  ],
+  [
+    'label_dark_text',
+    [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
+    ['label']
+  ],
+  [
+    'textbox_light_text',
+    [
+      ['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)'
+      ]
+    ],
+    ['textbox']
+  ],
+  [
+    'dropdown_darkheading_text',
+    [
+      ['default'],
+      [
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)',
+        'var(--dot_text_white)'
+      ]
+    ],
+    [['dark'], ['#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd']],
+    ['dropdown']
+  ]
+];
+
+module.exports = { componentThemeVariables: componentThemeVariables };