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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +2 -0
  2. package/es/Appearance/dark/mode/dotDarkMode.module.css +520 -536
  3. package/es/Appearance/dark/themes/blue/blueDarkDotTheme.module.css +2 -2
  4. package/es/Appearance/dark/themes/green/greenDarkDotTheme.module.css +2 -2
  5. package/es/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css +2 -2
  6. package/es/Appearance/dark/themes/red/redDarkDotTheme.module.css +2 -2
  7. package/es/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css +2 -2
  8. package/es/Appearance/default/mode/dotDefaultMode.module.css +520 -536
  9. package/es/Appearance/default/themes/blue/blueDefaultDotTheme.module.css +2 -2
  10. package/es/Appearance/default/themes/green/greenDefaultDotTheme.module.css +2 -2
  11. package/es/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css +2 -2
  12. package/es/Appearance/default/themes/red/redDefaultDotTheme.module.css +2 -2
  13. package/es/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css +2 -2
  14. package/es/FreezeLayer/docs/FreezeLayer__dark.docs.js +2 -2
  15. package/es/FreezeLayer/docs/FreezeLayer__default.docs.js +2 -2
  16. package/es/Loader/docs/Loader__default.docs.js +1 -1
  17. package/es/deprecated/SelectDropdown/SelectDropdown.module.css +6 -6
  18. package/es/form/fields/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js +1 -1
  19. package/es/form/fields/TextEditor/TextEditor.js +1 -1
  20. package/es/form/fields/TextEditorField/docs/TextEditorField__default.docs.js +1 -1
  21. package/es/list/BluePrintStatus/BluePrintStatus.module.css +2 -2
  22. package/es/list/DotNew/DotNew.module.css +4 -4
  23. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +4 -5
  24. package/lib/Appearance/dark/mode/dotDarkMode.module.css +520 -536
  25. package/lib/Appearance/dark/themes/blue/blueDarkDotTheme.module.css +2 -2
  26. package/lib/Appearance/dark/themes/green/greenDarkDotTheme.module.css +2 -2
  27. package/lib/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css +2 -2
  28. package/lib/Appearance/dark/themes/red/redDarkDotTheme.module.css +2 -2
  29. package/lib/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css +2 -2
  30. package/lib/Appearance/default/mode/dotDefaultMode.module.css +520 -536
  31. package/lib/Appearance/default/themes/blue/blueDefaultDotTheme.module.css +2 -2
  32. package/lib/Appearance/default/themes/green/greenDefaultDotTheme.module.css +2 -2
  33. package/lib/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css +2 -2
  34. package/lib/Appearance/default/themes/red/redDefaultDotTheme.module.css +2 -2
  35. package/lib/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css +2 -2
  36. package/lib/FreezeLayer/docs/FreezeLayer__dark.docs.js +2 -2
  37. package/lib/FreezeLayer/docs/FreezeLayer__default.docs.js +2 -2
  38. package/lib/Loader/docs/Loader__default.docs.js +1 -1
  39. package/lib/deprecated/SelectDropdown/SelectDropdown.module.css +6 -6
  40. package/lib/form/fields/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js +1 -1
  41. package/lib/form/fields/TextEditor/TextEditor.js +1 -1
  42. package/lib/form/fields/TextEditorField/docs/TextEditorField__default.docs.js +1 -1
  43. package/lib/list/BluePrintStatus/BluePrintStatus.module.css +2 -2
  44. package/lib/list/DotNew/DotNew.module.css +4 -4
  45. package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css +4 -5
  46. package/package.json +7 -7
  47. package/preprocess/dotAppearanceColors.js +71 -0
  48. package/preprocess/dotThemeColors.js +1 -1
  49. package/preprocess/index.js +1 -0
  50. package/preprocess/json/dotAppearanceVariableJson.js +1908 -0
  51. package/preprocess/json/{dotVariableJson.js → dotThemeVariableJson.js} +20 -20
  52. package/src/Appearance/dark/mode/dotDarkMode.module.css +520 -536
  53. package/src/Appearance/dark/themes/blue/blueDarkDotTheme.module.css +2 -2
  54. package/src/Appearance/dark/themes/green/greenDarkDotTheme.module.css +2 -2
  55. package/src/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css +2 -2
  56. package/src/Appearance/dark/themes/red/redDarkDotTheme.module.css +2 -2
  57. package/src/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css +2 -2
  58. package/src/Appearance/default/mode/dotDefaultMode.module.css +520 -536
  59. package/src/Appearance/default/themes/blue/blueDefaultDotTheme.module.css +2 -2
  60. package/src/Appearance/default/themes/green/greenDefaultDotTheme.module.css +2 -2
  61. package/src/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css +2 -2
  62. package/src/Appearance/default/themes/red/redDefaultDotTheme.module.css +2 -2
  63. package/src/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css +2 -2
  64. package/src/FreezeLayer/docs/FreezeLayer__dark.docs.js +2 -2
  65. package/src/FreezeLayer/docs/FreezeLayer__default.docs.js +2 -2
  66. package/src/Loader/docs/Loader__default.docs.js +1 -1
  67. package/src/deprecated/SelectDropdown/SelectDropdown.module.css +6 -6
  68. package/src/form/fields/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js +1 -1
  69. package/src/form/fields/TextEditor/TextEditor.js +1 -1
  70. package/src/form/fields/TextEditorField/docs/TextEditorField__default.docs.js +1 -1
  71. package/src/list/BluePrintStatus/BluePrintStatus.module.css +2 -2
  72. package/src/list/DotNew/DotNew.module.css +4 -4
  73. package/src/version2/notification/DesktopNotification/DesktopNotification.module.css +4 -5
@@ -3,8 +3,8 @@
3
3
  --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: var(--dot_text_white);
7
- --zdt_commonEmptyState_dark_description: var(--dot_text_white);
6
+ --zdt_commonEmptyState_dark_title: var(--dot_white);
7
+ --zdt_commonEmptyState_dark_description: var(--dot_white);
8
8
  --zdt_commonEmptyState_dark_link: #6cbbfc;
9
9
  --zdt_commonEmptyState_dark_link_hover: #2469ff;
10
10
  }
@@ -3,8 +3,8 @@
3
3
  --zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: var(--dot_text_white);
7
- --zdt_commonEmptyState_dark_description: var(--dot_text_white);
6
+ --zdt_commonEmptyState_dark_title: var(--dot_white);
7
+ --zdt_commonEmptyState_dark_description: var(--dot_white);
8
8
  --zdt_commonEmptyState_dark_link: #4ac064;
9
9
  --zdt_commonEmptyState_dark_link_hover: #0e7526;
10
10
  }
@@ -3,8 +3,8 @@
3
3
  --zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: var(--dot_text_white);
7
- --zdt_commonEmptyState_dark_description: var(--dot_text_white);
6
+ --zdt_commonEmptyState_dark_title: var(--dot_white);
7
+ --zdt_commonEmptyState_dark_description: var(--dot_white);
8
8
  --zdt_commonEmptyState_dark_link: #e57717;
9
9
  --zdt_commonEmptyState_dark_link_hover: #b25900;
10
10
  }
@@ -3,8 +3,8 @@
3
3
  --zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: var(--dot_text_white);
7
- --zdt_commonEmptyState_dark_description: var(--dot_text_white);
6
+ --zdt_commonEmptyState_dark_title: var(--dot_white);
7
+ --zdt_commonEmptyState_dark_description: var(--dot_white);
8
8
  --zdt_commonEmptyState_dark_link: #ff6363;
9
9
  --zdt_commonEmptyState_dark_link_hover: #ab1a18;
10
10
  }
@@ -3,8 +3,8 @@
3
3
  --zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: var(--dot_text_white);
7
- --zdt_commonEmptyState_dark_description: var(--dot_text_white);
6
+ --zdt_commonEmptyState_dark_title: var(--dot_white);
7
+ --zdt_commonEmptyState_dark_description: var(--dot_white);
8
8
  --zdt_commonEmptyState_dark_link: #e8b923;
9
9
  --zdt_commonEmptyState_dark_link_hover: #b59100;
10
10
  }
@@ -34,10 +34,10 @@ export default class FreezeLayer__dark extends Component {
34
34
  needAutoZindex: true
35
35
  }, /*#__PURE__*/React.createElement("div", {
36
36
  style: {
37
- color: 'var(--dot_text_black)',
37
+ color: 'var(--dot_black)',
38
38
  fontSize: '40px',
39
39
  padding: '100px',
40
- background: 'var(--dot_bg_white)'
40
+ background: 'var(--dot_white)'
41
41
  }
42
42
  }, "Im children")));
43
43
  }
@@ -31,10 +31,10 @@ export default class FreezeLayer__default extends Component {
31
31
  animationName: "expand"
32
32
  }, /*#__PURE__*/React.createElement("span", {
33
33
  style: {
34
- color: 'var(--dot_text_black)',
34
+ color: 'var(--dot_black)',
35
35
  fontSize: '40px',
36
36
  padding: '100px',
37
- background: 'var(--dot_bg_white)'
37
+ background: 'var(--dot_white)'
38
38
  }
39
39
  }, "Im children")));
40
40
  }
@@ -8,7 +8,7 @@ export default class Loader__default extends React.Component {
8
8
  render() {
9
9
  return /*#__PURE__*/React.createElement("div", {
10
10
  style: {
11
- background: 'var(--dot_bg_black)',
11
+ background: 'var(--dot_black)',
12
12
  height: '40px'
13
13
  }
14
14
  }, /*#__PURE__*/React.createElement(Loader, null));
@@ -43,13 +43,13 @@
43
43
  /* select dropdown */
44
44
 
45
45
  [data-mode='dark'] {
46
- --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
47
- --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
48
- --zdt_selectdropdown_departicon: var(--zd_text_dark5);
46
+ --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
47
+ --zdt_selectdropdown_departname_text: var(--zd_dark4);
48
+ --zdt_selectdropdown_departicon: var(--zd_dark5);
49
49
  }
50
50
 
51
51
  [data-mode='default'] {
52
- --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
53
- --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
54
- --zdt_selectdropdown_departicon: var(--zd_text_dark5);
52
+ --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
53
+ --zdt_selectdropdown_departname_text: var(--zd_dark4);
54
+ --zdt_selectdropdown_departicon: var(--zd_dark5);
55
55
  }
@@ -68,7 +68,7 @@ const TagsMultiSelectField__default = () => {
68
68
  style: {
69
69
  fontSize: '13px',
70
70
  marginLeft: '5px',
71
- color: 'var(--dot_text_shuttleGrey)'
71
+ color: 'var(--dot_shuttleGrey)'
72
72
  }
73
73
  }, "shift+t")));
74
74
  };
@@ -232,7 +232,7 @@ export default class TextEditor extends Component {
232
232
 
233
233
  if (isCustomScroll) {
234
234
  let link = document.createElement('style');
235
- 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}";
235
+ 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}";
236
236
  iframeHead.appendChild(link);
237
237
  iframe.classList.add('scroll');
238
238
  }
@@ -22,7 +22,7 @@ export default class TextEditorField__default extends Component {
22
22
  flexible: true,
23
23
  style: {
24
24
  fontSize: '12px',
25
- color: 'var(--dot_text_primary)',
25
+ color: 'var(--dot_primary)',
26
26
  textAlign: 'right'
27
27
  }
28
28
  }, "Placeholders")), /*#__PURE__*/React.createElement(TextEditorField, {
@@ -6,10 +6,10 @@
6
6
  padding-left: var(--zd_size5);
7
7
  }
8
8
  /* .danger {
9
- color: var(--dot_text_brightRed);
9
+ color: var(--dot_brightRed);
10
10
  }
11
11
  .default {
12
- color: var(--dot_text_shuttleGrey);
12
+ color: var(--dot_shuttleGrey);
13
13
  } */
14
14
  .iconStyle {
15
15
  display: block;
@@ -1,15 +1,15 @@
1
1
  .medium {
2
2
  width: var(--zd_size6);
3
- height: var(--zd_size6);
3
+ height: var(--zd_size6);
4
4
  }
5
5
  .small{
6
6
  width: var(--zd_size5);
7
- height: var(--zd_size5);
7
+ height: var(--zd_size5);
8
8
  }
9
9
  .container{
10
10
  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
11
- /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
12
- box-shadow: 0 0 0 0 var(--dot_bg_catskillWhite),
11
+ /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
12
+ box-shadow: 0 0 0 0 var(--dot_catskillWhite),
13
13
  0 0 0 0 rgba(10, 115, 235, 0.6); */
14
14
  border-radius: 50%;
15
15
  background-color: var(--zdt_dotnew_default_bg);
@@ -18,7 +18,7 @@
18
18
  [dir=rtl] .container {
19
19
  transform-origin: left center;
20
20
  }
21
- .globalNotify {
21
+ .globalNotify {
22
22
  max-width: var(--zd_size490);
23
23
  min-width: var(--zd_size394);
24
24
  }
@@ -62,12 +62,12 @@
62
62
  /* Container Style */
63
63
  .message {
64
64
  position: relative;
65
- color: var(--zd_text_smoke18);
65
+ color: var(--zd_smoke18);
66
66
  font-size: var(--zd_font_size11);
67
67
  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
68
68
  height: var(--zd_size33);
69
69
  transition: padding var(--zd_transition3), height var(--zd_transition3);
70
- border-top: 1px solid var(--zd_border_smoke1);
70
+ border-top: 1px solid var(--zd_smoke1);
71
71
  cursor: pointer;
72
72
  }
73
73
  [dir=ltr] .message {
@@ -77,7 +77,7 @@
77
77
  padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
78
78
  }
79
79
  .message:hover {
80
- background: var(--zd_bg_alabaster);
80
+ background: var(--zd_alabaster);
81
81
  }
82
82
  /* Section */
83
83
  .section {
@@ -104,4 +104,3 @@
104
104
  overflow: hidden;
105
105
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
106
106
  }
107
-