@zohodesk/dot 1.0.0-temp-76 → 1.0.0-temp-79

package/lib/NewStar/NewStar.module.css

@@ -1,110 +1,110 @@
-.star {
-  position: absolute;
-
-  height: var(--zd_size20);
-  width: var(--zd_size21);
-}
-.topLeft {
-  top: 0;
-}
-[dir=ltr] .topLeft {
-  transform: translate(-45%, -45%);
-  left: 0;
-}
-[dir=rtl] .topLeft {
-  transform: translate(45%, -45%);
-  right: 0;
-}
-.topRight {
-  top: 0;
-}
-[dir=ltr] .topRight {
-  transform: translate(45%, -45%);
-  right: 0;
-}
-[dir=rtl] .topRight {
-  transform: translate(-45%, -45%);
-  left: 0;
-}
-.bottomLeft {
-  bottom: 0;
-}
-[dir=ltr] .bottomLeft {
-  transform: translate(-45%, 45%);
-  left: 0;
-}
-[dir=rtl] .bottomLeft {
-  transform: translate(45%, 45%);
-  right: 0;
-}
-.bottomRight {
-  bottom: 0;
-}
-[dir=ltr] .bottomRight {
-  transform: translate(45%, 45%);
-  right: 0;
-}
-[dir=rtl] .bottomRight {
-  transform: translate(-45%, 45%);
-  left: 0;
-}
-[dir=ltr] .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
-}
-[dir=rtl] .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
-}
-.green::before {
-  color: var(--zdt_newstar_green_text);
-}
-.yellow::before {
-  color: var(--zdt_newstar_yellow_text);
-}
-.blue::before {
-  color: var(--zdt_newstar_blue_text);
-}
-.starOne {
-  composes: stars;
-}
-.starTwo {
-  composes: stars;
-}
-[dir=ltr] .starTwo {
-  animation-delay: 0.5s;
-}
-[dir=rtl] .starTwo {
-  animation-delay: 0.5s;
-}
-.starThree {
-  composes: stars;
-}
-[dir=ltr] .starThree {
-  animation-delay: 1s;
-}
-[dir=rtl] .starThree {
-  animation-delay: 1s;
-}
-
-@keyframes twinkle {
-  0% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.6;
-  }
-}
-
-@keyframes star-scale {
-  0% {
-    transform: perspective(1px) scale(0.7);
-  }
-  50% {
-    transform: perspective(1px) scale(1, 1);
-  }
-  100% {
-    transform: perspective(1px) scale(0.7);
-  }
-}
+.star {
+  position: absolute;
+
+  height: var(--zd_size20);
+  width: var(--zd_size21);
+}
+.topLeft {
+  top: 0;
+}
+[dir=ltr] .topLeft {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
+[dir=rtl] .topLeft {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+.topRight {
+  top: 0;
+}
+[dir=ltr] .topRight {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+[dir=rtl] .topRight {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
+.bottomLeft {
+  bottom: 0;
+}
+[dir=ltr] .bottomLeft {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
+[dir=rtl] .bottomLeft {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+.bottomRight {
+  bottom: 0;
+}
+[dir=ltr] .bottomRight {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+[dir=rtl] .bottomRight {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
+[dir=ltr] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+[dir=rtl] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+.green::before {
+  color: var(--zdt_newstar_green_text);
+}
+.yellow::before {
+  color: var(--zdt_newstar_yellow_text);
+}
+.blue::before {
+  color: var(--zdt_newstar_blue_text);
+}
+.starOne {
+  composes: stars;
+}
+.starTwo {
+  composes: stars;
+}
+[dir=ltr] .starTwo {
+  animation-delay: 0.5s;
+}
+[dir=rtl] .starTwo {
+  animation-delay: 0.5s;
+}
+.starThree {
+  composes: stars;
+}
+[dir=ltr] .starThree {
+  animation-delay: 1s;
+}
+[dir=rtl] .starThree {
+  animation-delay: 1s;
+}
+
+@keyframes twinkle {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes star-scale {
+  0% {
+    transform: perspective(1px) scale(0.7);
+  }
+  50% {
+    transform: perspective(1px) scale(1, 1);
+  }
+  100% {
+    transform: perspective(1px) scale(0.7);
+  }
+}

package/lib/PlusIcon/PlusIcon.module.css

@@ -1,16 +1,16 @@
-.container {
-  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
-  border-radius: 50%;
-  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
-  cursor: pointer;
-  background-color: var(--zdt_plusicon_bg);
-}
-.plusIcon {
-  border: 1px solid var(--zdt_plusicon_border);
-}
-.icon {
-  color: var(--zdt_plusicon_text);
-}
-.plusIcon:hover {
-  border-color: var(--zdt_plusicon_hover_border);
-}
+.container {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+  border-radius: 50%;
+  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
+  cursor: pointer;
+  background-color: var(--zdt_plusicon_bg);
+}
+.plusIcon {
+  border: 1px solid var(--zdt_plusicon_border);
+}
+.icon {
+  color: var(--zdt_plusicon_text);
+}
+.plusIcon:hover {
+  border-color: var(--zdt_plusicon_hover_border);
+}

package/lib/Provider.js

@@ -65,6 +65,28 @@ require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCom
 
 require("@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css");
 
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/mode/pureDarkMode.module.css");
+
 require("@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
 require("@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
@@ -89,12 +111,22 @@ require("@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.m
 
 require("@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css");
 
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css");
+
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
 var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
 
-var _Switch = _interopRequireDefault(require("@zohodesk/components/lib/Switch/Switch"));
-
 require("../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css");
 
 require("../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css");
@@ -141,6 +173,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+/* dot pkg - pure dark mode & themes */
+// import '../assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
+// import '../assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css';
+// import '../assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
+// import '../assets/Appearance/dark/themes/red/redDarkDotTheme.module.css';
+// import '../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
+// import '../assets/Appearance/dark/mode/dotDarkMode.module.css';
 _datetimejs["default"].tz.set({
   timezone: 'Asia/Kolkata',
   _packed: '-5R.s -5R.k -5l.a -5u -6u|01234343|-4Fg5R.s BKo0.8 1rDcw.a 1r2LP.a 1un0 HB0 7zX0|15e6',
@@ -164,25 +203,16 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       appearanceName: 'default',
       themeName: 'blue'
     };
-    _this.switchMode = _this.switchMode.bind(_assertThisInitialized(_this));
     _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Provider, [{
-    key: "switchMode",
-    value: function switchMode() {
-      var appearanceName = this.state.appearanceName;
-
-      if (appearanceName == 'default') {
-        this.setState({
-          appearanceName: 'dark'
-        });
-      } else {
-        this.setState({
-          appearanceName: 'default'
-        });
-      }
+    key: "setAppearance",
+    value: function setAppearance(mode) {
+      this.setState({
+        appearanceName: mode
+      });
     }
   }, {
     key: "setTheme",
@@ -221,6 +251,29 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       var yellow = {
         backgroundColor: '#e8b923'
       };
+      var light = {
+        backgroundColor: '#fff'
+      };
+      var night = {
+        backgroundColor: '#232b38'
+      };
+      var dark = {
+        backgroundColor: '#212121'
+      };
+      var fixedPosition = {
+        position: 'fixed',
+        bottom: '0',
+        backgroundColor: '#272727',
+        padding: '10px',
+        borderRadius: '15px 15px 0 0',
+        minWidth: '100px',
+        textAlign: 'center',
+        boxShadow: '0 0 3px #000',
+        fontSize: '12px',
+        zIndex: '3',
+        display: 'flex',
+        alignItems: 'center'
+      };
       return /*#__PURE__*/_react["default"].createElement(_i18n.I18NProvider, {
         i18n: _i18n2["default"],
         timeZone: "Asia/Kolkata",
@@ -243,29 +296,46 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         scroll: "vertical"
       }, this.props.children), /*#__PURE__*/_react["default"].createElement("div", {
+        style: Object.assign({}, fixedPosition, {
+          left: '20%',
+          transform: 'translate(-20%)'
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          color: '#fff'
+        }
+      }, "Appearance:"), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Light Mode",
+        style: Object.assign({}, themeClass, light),
+        onClick: function onClick() {
+          return _this2.setAppearance('default');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Night Mode",
+        style: Object.assign({}, themeClass, night),
+        onClick: function onClick() {
+          return _this2.setAppearance('dark');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Dark Mode",
+        style: Object.assign({}, themeClass, dark),
+        onClick: function onClick() {
+          return _this2.setAppearance('pureDark');
+        }
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        style: Object.assign({}, fixedPosition, {
+          left: '80%',
+          transform: 'translate(-80%)'
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          position: 'fixed',
-          bottom: '0',
-          backgroundColor: '#272727',
-          padding: '10px',
-          borderRadius: '15px 15px 0 0',
-          minWidth: '100px',
-          textAlign: 'center',
-          left: '50%',
-          transform: 'translate(-50%)',
-          boxShadow: '0 0 3px #000',
-          fontSize: '12px',
-          zIndex: '1000',
-          display: 'flex',
-          alignItems: 'center'
+          color: '#fff'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-        id: "switchMode",
-        text: "Light/Night Mode",
-        labelSize: "small",
-        onChange: this.switchMode,
-        checked: appearanceName == 'dark'
-      })), /*#__PURE__*/_react["default"].createElement("div", {
+      }, "Themes:"), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           display: 'flex'
         }