@zohodesk/components 1.0.0-alpha-224 → 1.0.0-alpha-225

package/es/Provider.js

@@ -4,30 +4,30 @@ import { Container } from './Layout';
 import Switch from './Switch/Switch';
 /* default mode & theme css */
 
-import './Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import './Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import './Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import './Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import './Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import './Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import './Appearance/default/mode/defaultMode.module.css';
+import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/mode/defaultMode.module.css';
 /* dark mode & theme css */
 
-import './Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import './Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import './Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import './Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import './Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import './Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import './Appearance/dark/mode/darkMode.module.css';
+import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/mode/darkMode.module.css';
 import LibraryContext from './Provider/LibraryContextInit';
 import { setGlobalIdPrefix } from './Provider/IdProvider';
 export default class Provider extends React.Component {

package/es/Stencils/Stencils.module.css

@@ -14,28 +14,18 @@
   background-size: 800px 1px;
 }
 [dir=ltr] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-ltr ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-ltr ;
-  -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-rtl ;
-  -webkit-animation-timing-function: linear;
 }
 @keyframes placeHolderShimmer-ltr {
   0% {

package/lib/AppContainer/AppContainer.js

@@ -17,19 +17,19 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
 require("../common/basic.module.css");
 
-require("@zohodesk/variables/lib/colorVariables.module.css");
+require("@zohodesk/variables/assets/colorVariables.module.css");
 
-require("@zohodesk/variables/lib/dotVariables.module.css");
+require("@zohodesk/variables/assets/dotVariables.module.css");
 
-require("@zohodesk/variables/lib/sizeVariables.module.css");
+require("@zohodesk/variables/assets/sizeVariables.module.css");
 
-require("@zohodesk/variables/lib/fontsizeVariables.module.css");
+require("@zohodesk/variables/assets/fontsizeVariables.module.css");
 
 require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
 
-require("@zohodesk/variables/lib/transitionVariables.module.css");
+require("@zohodesk/variables/assets/transitionVariables.module.css");
 
-require("@zohodesk/variables/lib/no_transitionVariables.module.css");
+require("@zohodesk/variables/assets/no_transitionVariables.module.css");
 
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
 

package/lib/Provider.js

@@ -15,49 +15,49 @@ var _Layout = require("./Layout");
 
 var _Switch = _interopRequireDefault(require("./Switch/Switch"));
 
-require("./Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/red/redDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
 
-require("./Appearance/default/mode/defaultMode.module.css");
+require("../assets/Appearance/default/mode/defaultMode.module.css");
 
-require("./Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/red/redDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
 
-require("./Appearance/dark/mode/darkMode.module.css");
+require("../assets/Appearance/dark/mode/darkMode.module.css");
 
 var _LibraryContextInit = _interopRequireDefault(require("./Provider/LibraryContextInit"));
 

package/lib/Stencils/Stencils.module.css

@@ -14,28 +14,18 @@
   background-size: 800px 1px;
 }
 [dir=ltr] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-ltr ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-ltr ;
-  -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-rtl ;
-  -webkit-animation-timing-function: linear;
 }
 @keyframes placeHolderShimmer-ltr {
   0% {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-224",
+  "version": "1.0.0-alpha-225",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -34,12 +34,12 @@
   },
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/variables": "1.0.0-beta.28",
-    "@zohodesk/icons": "1.0.0-beta.85",
+    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/icons": "1.0.0-beta.92",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "^1.4.1",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.38"
+    "@zohodesk/svg": "1.0.0-beta.39"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -48,9 +48,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/variables": "^1.0.0-beta.28",
-    "@zohodesk/svg": "^1.0.0-beta.37",
+    "@zohodesk/icons": "1.0.0-beta.92",
+    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/svg": "1.0.0-beta.39",
     "@zohodesk/virtualizer": "^1.0.3",
     "velocity-react": "^1.4.1",
     "react-sortable-hoc": "^0.8.3"

package/preprocess/componentAppearanceColors.js

@@ -1,11 +1,12 @@
 var { componentAppearanceVariables } = require('./json/componentAppearanceVariableJson');
+var { ensureDirectoryExistence } = require('../../common/pre_utils');
 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`;
+    let modeFilesString = `../assets/${baseFolder}/${mode}/mode/${mode}Mode.module.css`;
     modeFiles.push(path.join(__dirname, modeFilesString));
 });
 let files = modeFiles;
@@ -14,33 +15,33 @@ function generate(mode) {
   let exportVariables = [];
   let counter = 0;
   let newLine = '';
-  componentAppearanceVariables.map(componentVariable => {
-    let commentName = componentVariable[3];
+
+  componentAppearanceVariables.forEach((element) => {
+    let commentName = element.comment;
     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];
+    exportVariables.push(commentName ? `${newLine}\n\t/* ${commentName} */` : '');
 
-      colorsResult = [
-        `\n\t--${componentVariable[0]}: ${componentDarkColors};`
-      ];
-      exportVariables.push(
-        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
-        colorsResult
-      );
-    }
+    Object.entries(element.data).map(([key, value]) => {
+      if (mode == 'default') {
+        let componentDefaultColors = value.light[0];
+
+        colorsResult = [
+          `\n\t--${key}: ${componentDefaultColors};`
+        ];
+        exportVariables.push(colorsResult);
+      } else if (mode == 'dark') {
+        let componentDarkColors = value.dark[0];
+
+        colorsResult = [
+          `\n\t--${key}: ${componentDarkColors};`
+        ];
+        exportVariables.push(colorsResult);
+      }
+    });
   });
   return exportVariables.join('');
 }
@@ -55,6 +56,7 @@ mode.forEach(mode => {
     } else if (mode == 'dark') {
       blueSelector = '';
     }
+    ensureDirectoryExistence(fileString);
     fs.writeFileSync(
       fileString,
       `[data-mode='${getMode}']${blueSelector} {${generate(

package/preprocess/componentThemeColors.js

@@ -1,13 +1,15 @@
 var { componentThemeVariables } = require('./json/componentThemeVariableJson');
+var { ensureDirectoryExistence } = require('../../common/pre_utils');
 let fs = require('fs');
 let path = require('path');
 let baseFolder = 'Appearance';
 let mode = ['default', 'dark'];
 let themes = ['blue', 'green', 'orange', 'red', 'yellow'];
 let themeFiles = [];
+let prefix=`\n\t--zdt_`;
 mode.forEach(mode => {
   themes.forEach(theme => {
-    let themeFilesString = `../src/${baseFolder}/${mode}/themes/${theme}/${
+    let themeFilesString = `../assets/${baseFolder}/${mode}/themes/${theme}/${
       theme + capitalizeFirstLetter(mode)
     }ComponentTheme.module.css`;
     themeFiles.push(path.join(__dirname, themeFilesString));
@@ -23,70 +25,71 @@ function generate(mode, theme) {
   let exportVariables = [];
   let counter = 0;
   let newLine = '';
-  componentThemeVariables.map(componentVariable => {
-    let commentName = componentVariable[3];
+
+  componentThemeVariables.forEach((element) => {
+    let commentName = element.comment;
     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} */` : '');
+
+    Object.entries(element.data).map(([key, value]) => {
+      if (mode == 'default') {
+        let componentDefaultColors = value.light;
+        let colorsResult = '';
+
+        if (theme == 'blue') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDefaultColors[0]};`
+          ];
+        } else if (theme == 'green') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDefaultColors[1]};`
+          ];
+        } else if (theme == 'orange') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDefaultColors[2]};`
+          ];
+        } else if (theme == 'red') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDefaultColors[3]};`
+          ];
+        } else if (theme == 'yellow') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDefaultColors[4]};`
+          ];
+        }
+        exportVariables.push(colorsResult);
+      } else if (mode == 'dark') {
+        let componentDarkColors = value.dark;
+        let colorsResult = '';
+        
+        if (theme == 'blue') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDarkColors[0]};`
+          ];
+        } else if (theme == 'green') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDarkColors[1]};`
+          ];
+        } else if (theme == 'orange') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDarkColors[2]};`
+          ];
+        } else if (theme == 'red') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDarkColors[3]};`
+          ];
+        } else if (theme == 'yellow') {
+          colorsResult = [
+            `${prefix}${key}: ${componentDarkColors[4]};`
+          ];
+        }
+        exportVariables.push(colorsResult);
       }
-      exportVariables.push(
-        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
-        colorsResult
-      );
-    }
+    });
   });
   return exportVariables.join('');
 }
@@ -107,6 +110,7 @@ mode.forEach(mode => {
     } else {
       blueSelector = '';
     }
+    ensureDirectoryExistence(fileString);
     fs.writeFileSync(
       fileString,
       `[data-mode='${getMode}'][data-theme='${getTheme}']${blueSelector} {${generate(

package/preprocess/ctaThemeColors.js

@@ -1,13 +1,15 @@
 var { ctaThemeVariables } = require('./json/ctaThemeVariableJson');
+var { ensureDirectoryExistence } = require('../../common/pre_utils');
 let fs = require('fs');
 let path = require('path');
 let baseFolder = 'Appearance';
 let mode = ['default', 'dark'];
 let themes = ['blue', 'green', 'orange', 'red', 'yellow'];
 let themeFiles = [];
+let prefix=`\n\t--zdt_cta_`;
 mode.forEach(mode => {
   themes.forEach(theme => {
-    let themeFilesString = `../src/${baseFolder}/${mode}/themes/${theme}/${
+    let themeFilesString = `../assets/${baseFolder}/${mode}/themes/${theme}/${
       theme + capitalizeFirstLetter(mode)
     }CTATheme.module.css`;
     themeFiles.push(path.join(__dirname, themeFilesString));
@@ -21,48 +23,51 @@ function capitalizeFirstLetter(string) {
 
 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]}`];
+
+  ctaThemeVariables.forEach((element) => {
+    Object.entries(element).map(([key, value]) => {
+      if (mode == 'default') {
+        let ctaDefaultColors = value.light;
+        let colorsResult = '';
+        if (theme == 'blue') {
+          colorsResult = [
+            `${prefix}${key}: ${ctaDefaultColors[0]}`
+          ];
+        } else if (theme == 'green') {
+          colorsResult = [
+            `${prefix}${key}: ${ctaDefaultColors[1]}`
+          ];
+        } else if (theme == 'orange') {
+          colorsResult = [
+            `${prefix}${key}: ${ctaDefaultColors[2]}`
+          ];
+        } else if (theme == 'red') {
+          colorsResult = [
+            `${prefix}${key}: ${ctaDefaultColors[3]}`
+          ];
+        } else if (theme == 'yellow') {
+          colorsResult = [
+            `${prefix}${key}: ${ctaDefaultColors[4]}`
+          ];
+        }
+        exportVariables.push(colorsResult);
+      } else if (mode == 'dark') {
+        let ctaDarkColors = value.dark;
+        let colorsResult = '';
+        if (theme == 'blue') {
+          colorsResult = [`${prefix}${key}: ${ctaDarkColors[0]}`];
+        } else if (theme == 'green') {
+          colorsResult = [`${prefix}${key}: ${ctaDarkColors[1]}`];
+        } else if (theme == 'orange') {
+          colorsResult = [`${prefix}${key}: ${ctaDarkColors[2]}`];
+        } else if (theme == 'red') {
+          colorsResult = [`${prefix}${key}: ${ctaDarkColors[3]}`];
+        } else if (theme == 'yellow') {
+          colorsResult = [`${prefix}${key}: ${ctaDarkColors[4]}`];
+        }
+        exportVariables.push(colorsResult);
       }
-      exportVariables.push(colorsResult);
-    }
+    });
   });
   return exportVariables.join(';');
 }
@@ -83,6 +88,7 @@ mode.forEach(mode => {
     } else {
       blueSelector = '';
     }
+    ensureDirectoryExistence(fileString);
     fs.writeFileSync(
       fileString,
       `[data-mode='${getMode}'][data-theme='${getTheme}']${blueSelector} {${generate(