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

package/lib/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -3,8 +3,8 @@
 	--zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #6cbbfc;
 	--zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/lib/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -3,8 +3,8 @@
 	--zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #4ac064;
 	--zdt_commonEmptyState_dark_link_hover: #0e7526;
 }

package/lib/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css

@@ -3,8 +3,8 @@
 	--zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #e57717;
 	--zdt_commonEmptyState_dark_link_hover: #b25900;
 }

package/lib/Appearance/default/themes/red/redDefaultDotTheme.module.css

@@ -3,8 +3,8 @@
 	--zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #ff6363;
 	--zdt_commonEmptyState_dark_link_hover: #ab1a18;
 }

package/lib/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css

@@ -3,8 +3,8 @@
 	--zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #e8b923;
 	--zdt_commonEmptyState_dark_link_hover: #b59100;
 }

package/lib/FreezeLayer/docs/FreezeLayer__dark.docs.js

@@ -82,10 +82,10 @@ var FreezeLayer__dark = /*#__PURE__*/function (_Component) {
         needAutoZindex: true
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          color: 'var(--dot_text_black)',
+          color: 'var(--dot_black)',
           fontSize: '40px',
           padding: '100px',
-          background: 'var(--dot_bg_white)'
+          background: 'var(--dot_white)'
         }
       }, "Im children")));
     }

package/lib/FreezeLayer/docs/FreezeLayer__default.docs.js

@@ -79,10 +79,10 @@ var FreezeLayer__default = /*#__PURE__*/function (_Component) {
         animationName: "expand"
       }, /*#__PURE__*/_react["default"].createElement("span", {
         style: {
-          color: 'var(--dot_text_black)',
+          color: 'var(--dot_black)',
           fontSize: '40px',
           padding: '100px',
-          background: 'var(--dot_bg_white)'
+          background: 'var(--dot_white)'
         }
       }, "Im children")));
     }

package/lib/Loader/docs/Loader__default.docs.js

@@ -49,7 +49,7 @@ var Loader__default = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          background: 'var(--dot_bg_black)',
+          background: 'var(--dot_black)',
           height: '40px'
         }
       }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));

package/lib/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -43,13 +43,13 @@
 /* select dropdown */
 
 [data-mode='dark'] {
-  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
-  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
-  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
 }
 
 [data-mode='default'] {
-  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
-  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
-  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
 }

package/lib/form/fields/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js

@@ -81,7 +81,7 @@ var TagsMultiSelectField__default = function TagsMultiSelectField__default() {
     style: {
       fontSize: '13px',
       marginLeft: '5px',
-      color: 'var(--dot_text_shuttleGrey)'
+      color: 'var(--dot_shuttleGrey)'
     }
   }, "shift+t")));
 };

package/lib/form/fields/TextEditor/TextEditor.js

@@ -279,7 +279,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
 
         if (isCustomScroll) {
           var link = document.createElement('style');
-          link.innerText = ".scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
+          link.innerText = "body{font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 0}.scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
           iframeHead.appendChild(link);
           iframe.classList.add('scroll');
         }

package/lib/form/fields/TextEditorField/docs/TextEditorField__default.docs.js

@@ -69,7 +69,7 @@ var TextEditorField__default = /*#__PURE__*/function (_Component) {
         flexible: true,
         style: {
           fontSize: '12px',
-          color: 'var(--dot_text_primary)',
+          color: 'var(--dot_primary)',
           textAlign: 'right'
         }
       }, "Placeholders")), /*#__PURE__*/_react["default"].createElement(_TextEditorField["default"], {

package/lib/list/BluePrintStatus/BluePrintStatus.module.css

@@ -6,10 +6,10 @@
   padding-left: var(--zd_size5);
 }
 /* .danger {
-  color: var(--dot_text_brightRed);
+  color: var(--dot_brightRed);
 }
 .default {
-  color: var(--dot_text_shuttleGrey);
+  color: var(--dot_shuttleGrey);
 } */
 .iconStyle {
   display: block;

package/lib/list/DotNew/DotNew.module.css

@@ -1,15 +1,15 @@
 .medium {
   width: var(--zd_size6);
-  height: var(--zd_size6); 
+  height: var(--zd_size6);
 }
 .small{
   width: var(--zd_size5);
-  height: var(--zd_size5); 
+  height: var(--zd_size5);
 }
 .container{
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1); 
-  box-shadow: 0 0 0 0 var(--dot_bg_catskillWhite),
+   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
+  box-shadow: 0 0 0 0 var(--dot_catskillWhite),
     0 0 0 0 rgba(10, 115, 235, 0.6); */
   border-radius: 50%;
   background-color: var(--zdt_dotnew_default_bg);

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-56",
   "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');