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

package/es/deprecated/Theme/palette/defaultPalette.module.css

@@ -0,0 +1,155 @@
+[data-theme='default'][data-palette='blue'] {
+    /* stencil */
+    --zdt_stencil_dark_bg: #383f55;
+    --zdt_stencil_dark_gradient_bg: -webkit-linear-gradient(
+        left,
+        #383f55 0,
+        #414963 33.33%,
+        #414961 66.66%,
+        #383f55 100%
+    );
+
+    /* dropbox */
+    --zdt_dropbox_dark_bg: #383f57;
+
+    /* listitem */
+    --zdt_listitem_dark_bg: #383f57;
+    --zdt_listitem_dark_effect_bg: #444a61;
+    --zdt_listitem_dark_active_bg: #3b4d6d;
+    --zdt_listitem_dark_tickicon: #6cbbfc;
+
+    /* tag */
+    --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_bg: #503348;
+
+    /* multiselect */
+    --zdt_multiselect_dark_border: #4b5168;
+    --zdt_multiselect_darkmsg_bg: #383f57;
+
+    /* avatar */
+    --zdt_avatar_white_border: var(--dot_border_shuttleGrey);
+}
+[data-theme='default'][data-palette='green'] {
+    /* stencil */
+    --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_stencil_dark_gradient_bg: -webkit-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%
+    );
+
+    /* dropbox */
+    --zdt_dropbox_dark_bg: #1d2f33;
+
+    /* listitem */
+    --zdt_listitem_dark_bg: #1d2f33;
+    --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+    --zdt_listitem_dark_active_bg: #2d484e;
+    --zdt_listitem_dark_tickicon: #4ac064;
+
+    /* tag */
+    --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_bg: #503348;
+
+    /* multiselect */
+    --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+    --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+
+    /* avatar */
+    --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+}
+[data-theme='default'][data-palette='red'] {
+    /* stencil */
+    --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_stencil_dark_gradient_bg: -webkit-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%
+    );
+
+    /* dropbox */
+    --zdt_dropbox_dark_bg: #34222d;
+
+    /* listitem */
+    --zdt_listitem_dark_bg: #34222d;
+    --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+    --zdt_listitem_dark_active_bg: #4d3243;
+    --zdt_listitem_dark_tickicon: #ff6363;
+
+    /* tag */
+    --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_bg: #503348;
+
+    /* multiselect */
+    --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+    --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+
+    /* avatar */
+    --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+}
+[data-theme='default'][data-palette='orange'] {
+    /* stencil */
+    --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_stencil_dark_gradient_bg: -webkit-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%
+    );
+
+    /* dropbox */
+    --zdt_dropbox_dark_bg: #332e24;
+
+    /* listitem */
+    --zdt_listitem_dark_bg: #332e24;
+    --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+    --zdt_listitem_dark_active_bg: #4b4335;
+    --zdt_listitem_dark_tickicon: #e57717;
+
+    /* tag */
+    --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_bg: #503348;
+
+    /* multiselect */
+    --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+    --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+
+    /* avatar */
+    --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+}
+[data-theme='default'][data-palette='yellow'] {
+    /* stencil */
+    --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_stencil_dark_gradient_bg: -webkit-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%
+    );
+
+    /* dropbox */
+    --zdt_dropbox_dark_bg: #313323;
+
+    /* listitem */
+    --zdt_listitem_dark_bg: #313323;
+    --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+    --zdt_listitem_dark_active_bg: #494c34;
+    --zdt_listitem_dark_tickicon: #e8b923;
+
+    /* tag */
+    --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_bg: #503348;
+
+    /* multiselect */
+    --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+    --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+
+    /* avatar */
+    --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+}

package/es/deprecated/customscroll_Old.module.css

@@ -0,0 +1,46 @@
+.customscroll ::-webkit-scrollbar {
+  height: var(--zd_size12);
+  overflow: visible;
+  width: var(--zd_size12);
+  background-color: var(--dot_bg_white);
+  box-shadow: inset var(--zd_size1) 0 0 rgba(0, 0, 0, 0.1);
+}
+
+.customscroll ::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+  display: none;
+}
+
+.customscroll ::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.04);
+  background-clip: padding-box;
+}
+
+.customscroll ::-webkit-scrollbar-track:horizontal {
+  box-shadow: inset 0 var(--zd_size1) 0 rgba(0, 0, 0, 0.1);
+}
+
+.customscroll ::-webkit-scrollbar-track:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.customscroll ::-webkit-scrollbar-track:active {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.customscroll ::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  background-clip: padding-box;
+  border: solid transparent;
+  min-height: var(--zd_size28);
+  border-radius: var(--zd_size10);
+}
+
+.customscroll ::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.customscroll ::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, 0.5);
+}

package/es/semantic/Button/semanticButton.module.css

@@ -1,9 +1,9 @@
 .buttonReset {
-  outline: 0;
-  font: inherit;
-  color: inherit;
   border: inherit;
+  outline: 0;
   background-color: inherit;
+  font: inherit;
   padding: 0;
+  color: inherit;
   text-align: inherit;
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-40",
+  "version": "1.0.0-temp-44",
   "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/componentAppearanceColors.js

@@ -0,0 +1,65 @@
+var { componentAppearanceVariables } = require('./json/componentAppearanceVariableJson');
+let fs = require('fs');
+let path = require('path');
+let baseFolder = 'Appearance';
+let mode = ['default', 'dark'];
+let modeFiles = [];
+mode.forEach(mode => {
+    let modeFilesString = `../src/${baseFolder}/${mode}/mode/${mode}Mode.module.css`;
+    modeFiles.push(path.join(__dirname, modeFilesString));
+});
+let files = modeFiles;
+
+function generate(mode) {
+  let exportVariables = [];
+  let counter = 0;
+  let newLine = '';
+  componentAppearanceVariables.map(componentVariable => {
+    let commentName = componentVariable[3];
+    counting = counter++;
+    if (counting != 0) {
+      newLine = `\n\t`;
+    }
+    if (mode == 'default') {
+      let componentDefaultColors = componentVariable[1][1];
+
+      colorsResult = [
+        `\n\t--${componentVariable[0]}: ${componentDefaultColors};`
+      ];
+      exportVariables.push(
+        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
+        colorsResult
+      );
+    } else if (mode == 'dark') {
+      let componentDarkColors = componentVariable[2][1];
+
+      colorsResult = [
+        `\n\t--${componentVariable[0]}: ${componentDarkColors};`
+      ];
+      exportVariables.push(
+        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
+        colorsResult
+      );
+    }
+  });
+  return exportVariables.join('');
+}
+
+let arrayIndexCounter = 0;
+mode.forEach(mode => {
+    let fileString = files[arrayIndexCounter];
+    // let splitPath = fileString.split(/\\/g);
+    let getMode = mode;
+    if (mode == 'default') {
+      blueSelector = ', :global(.blueDefaultTheme) [data-desk-theme="blue"]';
+    } else if (mode == 'dark') {
+      blueSelector = '';
+    }
+    fs.writeFileSync(
+      fileString,
+      `[data-mode='${getMode}']${blueSelector} {${generate(
+        getMode
+      )}\n}`
+    );
+    arrayIndexCounter++;
+});

package/preprocess/componentThemeColors.js

@@ -0,0 +1,119 @@
+var { componentThemeVariables } = require('./json/componentThemeVariableJson');
+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/ctaThemeVariableJson');
+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++;
+  });
+});