@zohodesk/dot 1.0.0-beta.253 → 1.0.0-beta.255

package/lib/TagWithIcon/TagWithIcon.module.css

@@ -0,0 +1,56 @@
+.varClass {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
+}
+.wrapper {
+  composes: varClass;
+  color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
+}
+.small,
+.large {
+  max-width: 100%;
+  height: var(--zd_size18);
+}
+.small, .large {
+  border: 1px solid;
+  border-color: var(--tag_border_color);
+  border-radius: var(--zd_size4);
+  padding: 0 var(--zd_size6);
+}
+.bold {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+.small_text {
+  font-size: var(--tag_small_fontSize);
+}
+.large_text {
+  font-size: var(--tag_large_fontSize);
+}
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .iconSpace{
+  margin-right: var(--zd_size4);
+}
+[dir=rtl] .iconSpace{
+  margin-left: var(--zd_size4);
+}
+.yellow {
+  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
+  --tag_text_color: var(--zdt_tagWithIconYellow_text);
+  --tag_border_color: var(--zdt_tagWithIconYellow_border);
+}
+.grey {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+}
+.blue {
+  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
+  --tag_text_color: var(--zdt_tagWithIconBlue_text);
+  --tag_border_color: var(--zdt_tagWithIconBlue_border);
+}

package/lib/TagWithIcon/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  iconSize: '9',
+  size: 'large',
+  iconClass: '',
+  isBold: true,
+  palette: 'grey',
+  className: ''
+};
+exports.defaultProps = defaultProps;

package/lib/TagWithIcon/props/propTypes.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var propTypes = {
+  iconClass: _propTypes["default"].string,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  isBold: _propTypes["default"].bool,
+  palette: _propTypes["default"].oneOf(['yellow', 'blue', 'grey']),
+  size: _propTypes["default"].oneOf('small', 'large'),
+  className: _propTypes["default"].string,
+  text: _propTypes["default"].string
+};
+exports.propTypes = propTypes;

package/lib/ToastMessage/ToastMessage.module.css

@@ -3,7 +3,7 @@
   position: relative;
   max-height: 100%;
   border-radius: 5px;
-  box-shadow: 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow);
+  box-shadow: var(--zd_bs_toastmessage_container);
   background-color: var(--zdt_toastmessage_default_bg);
   margin-bottom: var(--zd_size7);
 }[dir=ltr] .container {
@@ -149,6 +149,7 @@
 .alertleft {
   padding: var(--zd_size15) var(--zd_size25);
 }
+
 .alertico {
   min-width: var(--zd_size50);
 }
@@ -232,17 +233,17 @@
   background: var(--zdt_toastmessage_dropdown_bg);
 }
 
-.dropdown > i {
+.dropdown>i {
   position: absolute;
   top: 50%;
 }
 
-[dir=ltr] .dropdown > i {
+[dir=ltr] .dropdown>i {
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
-[dir=rtl] .dropdown > i {
+[dir=rtl] .dropdown>i {
   right: 50%;
   transform: translate(50%, -50%);
 }
@@ -260,7 +261,7 @@
   transition: padding var(--zd_transition3), height var(--zd_transition3);
   border-top: 1px solid var(--zdt_toastmessage_message_border);
   cursor: pointer;
-  margin:0;
+  margin: 0;
 }
 
 [dir=ltr] .message {
@@ -325,4 +326,4 @@
 
 .primaryPlain {
   color: var(--zdt_toastmessage_primary_text);
-}
+}

package/lib/common/dot_boxShadow.module.css

@@ -0,0 +1,38 @@
+:root {
+    /* attachment viewer */
+    --zd_bs_attachmentviewer_selected: var(--zd_bs_contrast_outline, 0 0 4px 2px var(--zdt_attachmentviewer_selected_box_shadow) inset);
+
+    /* texteditor */
+    --zd_bs_texteditor_menu: var(--zd_bs_contrast_outline, -1px 1px 2px 0 var(--zdt_texteditor_menu_after_box_shadow));
+    --zd_bs_texteditor_ul: var(--zd_bs_contrast_outline, 0 1px 32px 0 var(--zdt_texteditor_dropdown_box_shadow));
+
+    /* subtab layout */
+    --zd_bs_subtablayout_shadow: var(--zd_bs_contrast_outline, 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow));
+
+    /* drawer */
+    --zd_bs_drawer_shadow: var(--zd_bs_contrast_outline, 0 6px 12px var(--zdt_drawer_default_box_shadow));
+
+    /* dot new */
+    --zd_bs_dotnew_shadow: var(--zd_bs_contrast_outline, 0 0 15px 1px var(--zdt_dotnew_default_box_shadow));
+
+    /* tag new */
+    --zd_bs_tagnew_shadow: var(--zd_bs_contrast_outline, 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow));
+
+    /* lookup section */
+    --zd_bs_lookupsection_shadow: var(--zd_bs_contrast_outline, 0px 4px 20px var(--zdt_lookupsection_box_shadow));
+
+    /* message */
+    --zd_bs_message_container: var(--zd_bs_contrast_outline, 0 0 19px 1px var(--zdt_message_default_box_shadow));
+
+    /* plus icon */
+    --zd_bs_plusicon_container: var(--zd_bs_contrast_outline, 0 2px 3px 0 var(--zdt_plusicon_box_shadow));
+
+    /* toast message */
+    --zd_bs_toastmessage_container: var(--zd_bs_contrast_outline, 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow));
+
+    /* global notification */
+    --zd_bs_globalnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--globalnotification_box_shadow));
+
+    /* desktop notification */
+    --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
+}

package/lib/common/dot_docStyle.module.css

@@ -0,0 +1,35 @@
+[data-mode='default']:global(.zd-contrast) {
+  color: #000;
+  background: #fff;
+  border-color: #000;
+}
+
+[data-mode='dark']:global(.zd-contrast) {
+  color: #fff;
+  background-color: #101319;
+  border-color: #fff;
+}
+
+[data-mode='pureDark']:global(.zd-contrast) {
+  color: #fff;
+  background-color: #080808;
+  border-color: #fff;
+}
+
+:global(.zd-contrast) {
+  --zd_bs_contrast_outline: 0 0 2px var(--zdt_contrast_shadow);
+  --zd_bs_contrast_none: 0 0 0 transparent;
+  --zd_lightmode_grey_bg: -0%;
+}
+
+:global(.zd-contrast-level1) {
+  --zd_contrastLevel: 10;
+}
+
+:global(.zd-contrast-level2) {
+  --zd_contrastLevel: 20;
+}
+
+:global(.zd-contrast-level3) {
+  --zd_contrastLevel: 40;
+}