@zohodesk/dot 1.0.0-temp-55 → 1.0.0-temp-59

package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -18,7 +18,7 @@
 [dir=rtl] .container {
   transform-origin: left center;
 }
-.globalNotify { 
+.globalNotify {
   max-width: var(--zd_size490);
   min-width: var(--zd_size394);
 }
@@ -62,12 +62,12 @@
 /* Container Style */
 .message {
   position: relative;
-  color: var(--zd_text_smoke18);
+  color: var(--zd_smoke18);
   font-size: var(--zd_font_size11);
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
   height: var(--zd_size33);
   transition: padding var(--zd_transition3), height var(--zd_transition3);
-  border-top: 1px solid var(--zd_border_smoke1);
+  border-top: 1px solid var(--zd_smoke1);
   cursor: pointer;
 }
 [dir=ltr] .message {
@@ -77,7 +77,7 @@
   padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
 }
 .message:hover {
-  background: var(--zd_bg_alabaster);
+  background: var(--zd_alabaster);
 }
 /* Section */
 .section {
@@ -104,4 +104,3 @@
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
 }
-  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-55",
+  "version": "1.0.0-temp-59",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -31,21 +31,21 @@
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "1.0.0-beta.25",
+    "@zohodesk/variables": "1.0.0-beta.26",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-temp-41",
+    "@zohodesk/components": "1.0.0-alpha-223",
     "@zohodesk/icons": "1.0.0-beta.85",
-    "@zohodesk/svg": "1.0.0-beta.37",
+    "@zohodesk/svg": "1.0.0-beta.38",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3"
   },
   "peerDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "^1.0.0-beta.25",
+    "@zohodesk/variables": "^1.0.0-beta.26",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-221",
+    "@zohodesk/components": "1.0.0-alpha-223",
     "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/svg": "^1.0.0-beta.37"
+    "@zohodesk/svg": "^1.0.0-beta.38"
   },
   "react-cli": {
     "preprocessor": {

package/preprocess/dotAppearanceColors.js

@@ -0,0 +1,71 @@
+var { dotAppearanceVariables } = require('./json/dotAppearanceVariableJson');
+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/dot${
+      capitalizeFirstLetter(mode)
+    }Mode.module.css`;
+    modeFiles.push(path.join(__dirname, modeFilesString));
+});
+let files = modeFiles;
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function generate(mode) {
+  let exportVariables = [];
+  let counter = 0;
+  let newLine = '';
+  dotAppearanceVariables.map(dotVariable => {
+    let commentName = dotVariable[3];
+    counting = counter++;
+    if (counting != 0) {
+      newLine = `\n\t`;
+    }
+    if (mode == 'default') {
+      let dotDefaultColors = dotVariable[1][1];
+
+      colorsResult = [
+        `\n\t--zdt_${dotVariable[0]}: ${dotDefaultColors};`
+      ];
+      exportVariables.push(
+        commentName ? `${newLine}\n\t/* ${commentName} */` : '',
+        colorsResult
+      );
+    } else if (mode == 'dark') {
+      let dotDarkColors = dotVariable[2][1];
+
+      colorsResult = [
+        `\n\t--zdt_${dotVariable[0]}: ${dotDarkColors};`
+      ];
+      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 = ', :global(.blueDarkTheme) [data-desk-theme="blue"]';
+    }
+    fs.writeFileSync(
+      fileString,
+      `[data-mode='${getMode}']${blueSelector} {${generate(
+        getMode
+      )}\n}`
+    );
+    arrayIndexCounter++;
+});

package/preprocess/dotThemeColors.js

@@ -1,4 +1,4 @@
-var { dotThemeVariables } = require('./json/dotVariableJson');
+var { dotThemeVariables } = require('./json/dotThemeVariableJson');
 let fs = require('fs');
 let path = require('path');
 let baseFolder = 'Appearance';

package/preprocess/index.js

@@ -1 +1,2 @@
 require('./dotThemeColors');
+require('./dotAppearanceColors');