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

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++;
+  });
+});

package/preprocess/index.js

@@ -0,0 +1,3 @@
+require('./ctaThemeColors');
+require('./componentThemeColors');
+require('./componentAppearanceColors');