@zohodesk/components 1.0.0-temp-61 → 1.0.0-temp-64

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 (24) hide show
  1. package/README.md +5 -0
  2. package/assets/Appearance/dark/mode/darkMode.module.css +1 -1
  3. package/es/CheckBox/CheckBox.js +2 -1
  4. package/es/ListItem/ListItem.module.css +1 -1
  5. package/es/Modal/Modal.js +3 -2
  6. package/es/Provider.js +35 -72
  7. package/es/common/docStyle.module.css +2 -6
  8. package/lib/CheckBox/CheckBox.js +2 -1
  9. package/lib/ListItem/ListItem.module.css +1 -1
  10. package/lib/Modal/Modal.js +4 -2
  11. package/lib/Provider.js +37 -88
  12. package/lib/common/docStyle.module.css +2 -6
  13. package/package.json +3 -2
  14. package/assets/Appearance/pureDark/mode/pureDarkMode.module.css +0 -358
  15. package/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css +0 -34
  16. package/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css +0 -42
  17. package/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css +0 -34
  18. package/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css +0 -42
  19. package/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css +0 -34
  20. package/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css +0 -42
  21. package/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css +0 -34
  22. package/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css +0 -42
  23. package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css +0 -34
  24. package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css +0 -42
package/README.md CHANGED
@@ -32,6 +32,11 @@ In this Package, we Provide Some Basic Components to Build Web App
32
32
  - TextBoxIcon
33
33
  - Tooltip
34
34
 
35
+ # 1.0.0-alpha-237
36
+
37
+ - ListItem Responsive Min Height Fixed
38
+ - CheckBox data-selector attribute added
39
+
35
40
  # 1.0.0-alpha-236
36
41
 
37
42
  - Input => autocomplete added in provider configuration
@@ -164,7 +164,7 @@
164
164
  --zdt_listitem_active_border: var(--zdt_cta_primary_border);
165
165
  --zdt_listitem_primary_bg: var(--dot_listItemActive);
166
166
  --zdt_listitem_secondary_bg: var(--zdt_cta_primary_bg);
167
- --zdt_listitem_secondary_text: #212121;
167
+ --zdt_listitem_secondary_text: var(--dot_ebonyclay);
168
168
 
169
169
  /* ribbon */
170
170
  --zdt_ribbon_default_text: var(--dot_platinum);
@@ -79,7 +79,8 @@ export default class CheckBox extends React.Component {
79
79
  role: role,
80
80
  "aria-label": ariaLabel,
81
81
  "aria-labelledby": ariaLabelledby,
82
- "aria-hidden": ariaHidden
82
+ "aria-hidden": ariaHidden,
83
+ "data-selector": id
83
84
  }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
84
85
  className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
85
86
  }, /*#__PURE__*/React.createElement("input", {
@@ -198,7 +198,7 @@
198
198
  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
199
199
  }
200
200
  .responsiveHeight {
201
- --listitem_height: var(--zd_size45);
201
+ --listitem_min_height: var(--zd_size45);
202
202
  font-size: var(--zd_font_size15);
203
203
  padding-top: var(--zd_size10);
204
204
  padding-bottom: var(--zd_size10);
package/es/Modal/Modal.js CHANGED
@@ -4,6 +4,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
4
4
  import React from 'react';
5
5
  import ReactDOM from 'react-dom';
6
6
  import PropTypes from 'prop-types';
7
+ import AppContainer from '../AppContainer/AppContainer';
7
8
  import style from '../AppContainer/AppContainer.module.css';
8
9
  let createdPortalIds = [];
9
10
  let newPortalPrefix = 'CPortal';
@@ -130,9 +131,9 @@ export default class Modal extends React.Component {
130
131
 
131
132
  if (isMounted) {
132
133
  if (Element) {
133
- return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
134
+ return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(Element, _extends({
134
135
  ref: this.setRef
135
- }, elementProps)), this.portalDiv);
136
+ }, elementProps))), this.portalDiv);
136
137
  }
137
138
 
138
139
  return null;
package/es/Provider.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import AppContainer from './AppContainer/AppContainer';
3
3
  import { Container } from './Layout';
4
+ import Switch from './Switch/Switch';
4
5
  /* default mode & theme css */
5
6
 
6
7
  import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
@@ -27,19 +28,6 @@ import '../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.
27
28
  import '../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
28
29
  import '../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
29
30
  import '../assets/Appearance/dark/mode/darkMode.module.css';
30
- /* pure dark mode & theme css */
31
-
32
- import '../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
33
- import '../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
34
- import '../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
35
- import '../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
36
- import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
37
- import '../assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css';
38
- import '../assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css';
39
- import '../assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css';
40
- import '../assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
41
- import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
42
- import '../assets/Appearance/pureDark/mode/pureDarkMode.module.css';
43
31
  import LibraryContext from './Provider/LibraryContextInit';
44
32
  import { setGlobalIdPrefix } from './Provider/IdProvider';
45
33
  export default class Provider extends React.Component {
@@ -50,13 +38,22 @@ export default class Provider extends React.Component {
50
38
  appearanceName: 'default',
51
39
  themeName: 'blue'
52
40
  };
41
+ this.switchMode = this.switchMode.bind(this);
53
42
  this.setTheme = this.setTheme.bind(this);
54
43
  }
55
44
 
56
- setAppearance(mode) {
57
- this.setState({
58
- appearanceName: mode
59
- });
45
+ switchMode() {
46
+ let appearanceName = this.state.appearanceName;
47
+
48
+ if (appearanceName == 'default') {
49
+ this.setState({
50
+ appearanceName: 'dark'
51
+ });
52
+ } else {
53
+ this.setState({
54
+ appearanceName: 'default'
55
+ });
56
+ }
60
57
  }
61
58
 
62
59
  setTheme(theme) {
@@ -92,29 +89,6 @@ export default class Provider extends React.Component {
92
89
  let yellow = {
93
90
  backgroundColor: '#e8b923'
94
91
  };
95
- let light = {
96
- backgroundColor: '#fff'
97
- };
98
- let night = {
99
- backgroundColor: '#232b38'
100
- };
101
- let dark = {
102
- backgroundColor: '#212121'
103
- };
104
- let fixedPosition = {
105
- position: 'fixed',
106
- bottom: '0',
107
- backgroundColor: '#272727',
108
- padding: '10px',
109
- borderRadius: '15px 15px 0 0',
110
- minWidth: '100px',
111
- textAlign: 'center',
112
- boxShadow: '0 0 3px #000',
113
- fontSize: '12px',
114
- zIndex: '3',
115
- display: 'flex',
116
- alignItems: 'center'
117
- };
118
92
  return /*#__PURE__*/React.createElement(LibraryContext.Provider, {
119
93
  value: {
120
94
  isReducedMotion: false,
@@ -130,40 +104,29 @@ export default class Provider extends React.Component {
130
104
  }, /*#__PURE__*/React.createElement(Container, {
131
105
  scroll: "vertical"
132
106
  }, this.props.children), /*#__PURE__*/React.createElement("div", {
133
- style: Object.assign({}, fixedPosition, {
134
- left: '20%',
135
- transform: 'translate(-20%)'
136
- })
137
- }, /*#__PURE__*/React.createElement("div", {
138
- style: {
139
- color: '#fff'
140
- }
141
- }, "Appearance:"), /*#__PURE__*/React.createElement("div", {
142
- style: {
143
- display: 'flex'
144
- }
145
- }, /*#__PURE__*/React.createElement("span", {
146
- title: "Light Mode",
147
- style: Object.assign({}, themeClass, light),
148
- onClick: () => this.setAppearance('default')
149
- }), /*#__PURE__*/React.createElement("span", {
150
- title: "Night Mode",
151
- style: Object.assign({}, themeClass, night),
152
- onClick: () => this.setAppearance('dark')
153
- }), /*#__PURE__*/React.createElement("span", {
154
- title: "Dark Mode",
155
- style: Object.assign({}, themeClass, dark),
156
- onClick: () => this.setAppearance('pureDark')
157
- }))), /*#__PURE__*/React.createElement("div", {
158
- style: Object.assign({}, fixedPosition, {
159
- left: '80%',
160
- transform: 'translate(-80%)'
161
- })
162
- }, /*#__PURE__*/React.createElement("div", {
163
107
  style: {
164
- color: '#fff'
108
+ position: 'fixed',
109
+ bottom: '0',
110
+ backgroundColor: '#272727',
111
+ padding: '10px',
112
+ borderRadius: '15px 15px 0 0',
113
+ minWidth: '100px',
114
+ textAlign: 'center',
115
+ left: '50%',
116
+ transform: 'translate(-50%)',
117
+ boxShadow: '0 0 3px #000',
118
+ fontSize: '12px',
119
+ zIndex: '3',
120
+ display: 'flex',
121
+ alignItems: 'center'
165
122
  }
166
- }, "Themes:"), /*#__PURE__*/React.createElement("div", {
123
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Switch, {
124
+ id: "switchMode",
125
+ text: "Light/Night Mode",
126
+ labelSize: "small",
127
+ onChange: this.switchMode,
128
+ checked: appearanceName == 'dark'
129
+ })), /*#__PURE__*/React.createElement("div", {
167
130
  style: {
168
131
  display: 'flex'
169
132
  }
@@ -260,12 +260,8 @@
260
260
  background: #fff;
261
261
  }
262
262
  [data-mode='dark'] {
263
- color: #e2e4e6;
264
- background: #232b38;
265
- }
266
- [data-mode='pureDark'] {
267
- color: #e2e4e6;
268
- background: #212121;
263
+ color: #E2E4E6;
264
+ background: #232B38;
269
265
  }
270
266
 
271
267
  .baseHue {
@@ -127,7 +127,8 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
127
127
  role: role,
128
128
  "aria-label": ariaLabel,
129
129
  "aria-labelledby": ariaLabelledby,
130
- "aria-hidden": ariaHidden
130
+ "aria-hidden": ariaHidden,
131
+ "data-selector": id
131
132
  }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
132
133
  className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '')
133
134
  }, /*#__PURE__*/_react["default"].createElement("input", {
@@ -198,7 +198,7 @@
198
198
  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
199
199
  }
200
200
  .responsiveHeight {
201
- --listitem_height: var(--zd_size45);
201
+ --listitem_min_height: var(--zd_size45);
202
202
  font-size: var(--zd_font_size15);
203
203
  padding-top: var(--zd_size10);
204
204
  padding-bottom: var(--zd_size10);
@@ -13,6 +13,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
13
13
 
14
14
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
15
 
16
+ var _AppContainer = _interopRequireDefault(require("../AppContainer/AppContainer"));
17
+
16
18
  var _AppContainerModule = _interopRequireDefault(require("../AppContainer/AppContainer.module.css"));
17
19
 
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -183,9 +185,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
183
185
 
184
186
  if (isMounted) {
185
187
  if (Element) {
186
- return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(Element, _extends({
188
+ return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], null, /*#__PURE__*/_react["default"].createElement(Element, _extends({
187
189
  ref: this.setRef
188
- }, elementProps)), this.portalDiv);
190
+ }, elementProps))), this.portalDiv);
189
191
  }
190
192
 
191
193
  return null;
package/lib/Provider.js CHANGED
@@ -13,6 +13,8 @@ var _AppContainer = _interopRequireDefault(require("./AppContainer/AppContainer"
13
13
 
14
14
  var _Layout = require("./Layout");
15
15
 
16
+ var _Switch = _interopRequireDefault(require("./Switch/Switch"));
17
+
16
18
  require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
17
19
 
18
20
  require("../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
@@ -57,28 +59,6 @@ require("../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module
57
59
 
58
60
  require("../assets/Appearance/dark/mode/darkMode.module.css");
59
61
 
60
- require("../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
61
-
62
- require("../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
63
-
64
- require("../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
65
-
66
- require("../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
67
-
68
- require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
69
-
70
- require("../assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css");
71
-
72
- require("../assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css");
73
-
74
- require("../assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css");
75
-
76
- require("../assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css");
77
-
78
- require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css");
79
-
80
- require("../assets/Appearance/pureDark/mode/pureDarkMode.module.css");
81
-
82
62
  var _LibraryContextInit = _interopRequireDefault(require("./Provider/LibraryContextInit"));
83
63
 
84
64
  var _IdProvider = require("./Provider/IdProvider");
@@ -121,16 +101,25 @@ var Provider = /*#__PURE__*/function (_React$Component) {
121
101
  appearanceName: 'default',
122
102
  themeName: 'blue'
123
103
  };
104
+ _this.switchMode = _this.switchMode.bind(_assertThisInitialized(_this));
124
105
  _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
125
106
  return _this;
126
107
  }
127
108
 
128
109
  _createClass(Provider, [{
129
- key: "setAppearance",
130
- value: function setAppearance(mode) {
131
- this.setState({
132
- appearanceName: mode
133
- });
110
+ key: "switchMode",
111
+ value: function switchMode() {
112
+ var appearanceName = this.state.appearanceName;
113
+
114
+ if (appearanceName == 'default') {
115
+ this.setState({
116
+ appearanceName: 'dark'
117
+ });
118
+ } else {
119
+ this.setState({
120
+ appearanceName: 'default'
121
+ });
122
+ }
134
123
  }
135
124
  }, {
136
125
  key: "setTheme",
@@ -169,29 +158,6 @@ var Provider = /*#__PURE__*/function (_React$Component) {
169
158
  var yellow = {
170
159
  backgroundColor: '#e8b923'
171
160
  };
172
- var light = {
173
- backgroundColor: '#fff'
174
- };
175
- var night = {
176
- backgroundColor: '#232b38'
177
- };
178
- var dark = {
179
- backgroundColor: '#212121'
180
- };
181
- var fixedPosition = {
182
- position: 'fixed',
183
- bottom: '0',
184
- backgroundColor: '#272727',
185
- padding: '10px',
186
- borderRadius: '15px 15px 0 0',
187
- minWidth: '100px',
188
- textAlign: 'center',
189
- boxShadow: '0 0 3px #000',
190
- fontSize: '12px',
191
- zIndex: '3',
192
- display: 'flex',
193
- alignItems: 'center'
194
- };
195
161
  return /*#__PURE__*/_react["default"].createElement(_LibraryContextInit["default"].Provider, {
196
162
  value: {
197
163
  isReducedMotion: false,
@@ -207,46 +173,29 @@ var Provider = /*#__PURE__*/function (_React$Component) {
207
173
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
208
174
  scroll: "vertical"
209
175
  }, this.props.children), /*#__PURE__*/_react["default"].createElement("div", {
210
- style: Object.assign({}, fixedPosition, {
211
- left: '20%',
212
- transform: 'translate(-20%)'
213
- })
214
- }, /*#__PURE__*/_react["default"].createElement("div", {
215
- style: {
216
- color: '#fff'
217
- }
218
- }, "Appearance:"), /*#__PURE__*/_react["default"].createElement("div", {
219
- style: {
220
- display: 'flex'
221
- }
222
- }, /*#__PURE__*/_react["default"].createElement("span", {
223
- title: "Light Mode",
224
- style: Object.assign({}, themeClass, light),
225
- onClick: function onClick() {
226
- return _this2.setAppearance('default');
227
- }
228
- }), /*#__PURE__*/_react["default"].createElement("span", {
229
- title: "Night Mode",
230
- style: Object.assign({}, themeClass, night),
231
- onClick: function onClick() {
232
- return _this2.setAppearance('dark');
233
- }
234
- }), /*#__PURE__*/_react["default"].createElement("span", {
235
- title: "Dark Mode",
236
- style: Object.assign({}, themeClass, dark),
237
- onClick: function onClick() {
238
- return _this2.setAppearance('pureDark');
239
- }
240
- }))), /*#__PURE__*/_react["default"].createElement("div", {
241
- style: Object.assign({}, fixedPosition, {
242
- left: '80%',
243
- transform: 'translate(-80%)'
244
- })
245
- }, /*#__PURE__*/_react["default"].createElement("div", {
246
176
  style: {
247
- color: '#fff'
177
+ position: 'fixed',
178
+ bottom: '0',
179
+ backgroundColor: '#272727',
180
+ padding: '10px',
181
+ borderRadius: '15px 15px 0 0',
182
+ minWidth: '100px',
183
+ textAlign: 'center',
184
+ left: '50%',
185
+ transform: 'translate(-50%)',
186
+ boxShadow: '0 0 3px #000',
187
+ fontSize: '12px',
188
+ zIndex: '3',
189
+ display: 'flex',
190
+ alignItems: 'center'
248
191
  }
249
- }, "Themes:"), /*#__PURE__*/_react["default"].createElement("div", {
192
+ }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
193
+ id: "switchMode",
194
+ text: "Light/Night Mode",
195
+ labelSize: "small",
196
+ onChange: this.switchMode,
197
+ checked: appearanceName == 'dark'
198
+ })), /*#__PURE__*/_react["default"].createElement("div", {
250
199
  style: {
251
200
  display: 'flex'
252
201
  }
@@ -260,12 +260,8 @@
260
260
  background: #fff;
261
261
  }
262
262
  [data-mode='dark'] {
263
- color: #e2e4e6;
264
- background: #232b38;
265
- }
266
- [data-mode='pureDark'] {
267
- color: #e2e4e6;
268
- background: #212121;
263
+ color: #E2E4E6;
264
+ background: #232B38;
269
265
  }
270
266
 
271
267
  .baseHue {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-temp-61",
3
+ "version": "1.0.0-temp-64",
4
4
  "main": "lib/index.js",
5
5
  "module": "es/index.js",
6
6
  "jsnext:main": "es/index.js",
@@ -31,7 +31,8 @@
31
31
  "test": "react-cli test",
32
32
  "sstest": "npm run init && react-cli sstest",
33
33
  "build:external": "npm run clean && npm run init && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
34
- "download": "rm package-lock.json && rm -rf node_modules/ && npm install"
34
+ "download": "rm package-lock.json && rm -rf node_modules/ && npm install",
35
+ "expublish": "npm publish --tag experimental-version"
35
36
  },
36
37
  "devDependencies": {
37
38
  "@zohodesk/docstool": "1.0.0-alpha-2",
@@ -1,358 +0,0 @@
1
- [data-mode='pureDark'] {
2
- /* list common */
3
- --dot_inputPlaceholder: var(--dot_shuttleGrey);
4
- --dot_inputDisable: var(--dot_oslogrey);
5
- --dot_inputLine: var(--zdt_cta_grey_35_border);
6
- --dot_inputLineHover: var(--dot_oslogrey);
7
- --dot_inputLineFocus: var(--zdt_cta_primary_border);
8
- --dot_listItemHover: var(--zdt_cta_grey_10_bg);
9
- --dot_listItemActive: var(--zdt_cta_primary_light_bg);
10
-
11
- /* common */
12
- --zdt_disable_bg: rgba(22, 27, 35, 0.5);
13
-
14
- /* avatar */
15
- --zdt_avatar_default_text: var(--dot_platinum);
16
- --zdt_avatar_default_bg: #212121;
17
- --zdt_avatar_default_border: var(--zdt_cta_grey_40_border);
18
- --zdt_avatar_default_borderHover: var(--dot_oslogrey);
19
- --zdt_avatar_default_boxshadow: rgba(255, 255, 255, 0.14);
20
- --zdt_avatar_white_borderHover: var(--zdt_cta_grey_40_border);
21
- --zdt_avatar_white_boxshadow: rgba(0, 0, 0, 0.11);
22
- --zdt_avatar_secondary_bg: var(--dot_platinum);
23
- --zdt_avatar_info_bg: var(--dot_mirror);
24
-
25
- /* avatar team */
26
- --zdt_avatarteam_default_bg: var(--dot_mirror);
27
- --zdt_avatarteam_default_border: var(--dot_mirror);
28
- --zdt_avatarteam_primary_bg: var(--zdt_cta_grey_40_bg);
29
- --zdt_avatarteam_primary_hover_bg: var(--dot_oslogrey);
30
- --zdt_avatarteam_secondary_bg: #212121;
31
- --zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
32
- --zdt_avatarteam_nofill_hover_border: var(--dot_oslogrey);
33
-
34
- /* button */
35
- --zdt_button_default_text: var(--zdt_cta_alpha_text);
36
- --zdt_button_default_bg: var(--dot_mirror);
37
- --zdt_button_default_border: var(--zdt_cta_alpha_border);
38
- --zdt_button_primary_hover_text: var(--zdt_cta_alpha_text);
39
- --zdt_button_primary_hover_border: var(--zdt_cta_alpha_hover_border);
40
- --zdt_button_primary_box_shadow: var(--zdt_cta_primary_box_shadow);
41
- --zdt_button_plainprimary_hover_text: var(--zdt_cta_primary_hover_text);
42
- --zdt_button_secondary_text: var(--dot_cadetblue);
43
- --zdt_button_secondary_hover_text: var(--dot_cadetblue);
44
- --zdt_button_secondary_border: var(--zdt_cta_grey_35_border);
45
- --zdt_button_secondary_hover_border: var(--dot_oslogrey);
46
- --zdt_button_danger_border: var(--dot_bittersweet);
47
- --zdt_button_danger_text: var(--dot_bittersweet);
48
- --zdt_button_danger_hover_border: #cc302d;
49
- --zdt_button_danger_hover_text: var(--dot_bittersweet);
50
- --zdt_button_danger_box_shadow: var(--zd_dangertrans6);
51
- --zdt_button_primaryfill_text: var(--zdt_cta_secondary_text);
52
- --zdt_button_primaryfill_bg: var(--zdt_cta_primary_bg);
53
- --zdt_button_primaryfill_border: var(--dot_mirror);
54
- --zdt_button_primaryfill_hover_bg: var(--zdt_cta_primary_hover_bg);
55
- --zdt_button_secondaryfill_bg: var(--zdt_cta_grey_10_bg);
56
- --zdt_button_dangerfill_bg: var(--dot_bittersweet);
57
- --zdt_button_dangerfill_text: var(--dot_white);
58
- --zdt_button_dangerfill_hover_bg: #cc302d;
59
- --zdt_button_successfill_border: var(--dot_darkmint);
60
- --zdt_button_successfill_bg: var(--dot_darkmint);
61
- --zdt_button_successfill_hover_border: var(--dot_irishgreen);
62
- --zdt_button_successfill_hover_bg: var(--dot_irishgreen);
63
- --zdt_button_tertiaryfill_bg: var(--dot_cadetblue);
64
- --zdt_button_tertiaryfill_hover_bg: var(--dot_oslogrey);
65
- --zdt_button_success_default_border: var(--dot_white);
66
- --zdt_button_tick_primary_border: var(--zdt_cta_secondary_text);
67
- --zdt_button_loading_default_bg: #212121;
68
- --zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
69
- --zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
70
- --zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
71
-
72
- /* button group */
73
- --zdt_buttongroup_default_bg: #212121;
74
- --zdt_buttongroup_default_border: var(--zd_smoke7);
75
- --zdt_buttongroup_footer_box_shadow: var(--zd_graytrans4);
76
-
77
- /* checkbox */
78
- --zdt_checkbox_default_bg: #212121;
79
- --zdt_checkbox_default_stroke_border: var(--dot_oslogrey);
80
- --zdt_checkbox_primary_stroke_border: var(--zdt_cta_beta_border);
81
- --zdt_checkbox_danger_stroke_border: var(--dot_bittersweet);
82
- --zdt_checkbox_label_primary_text: var(--zdt_cta_primary_text);
83
- --zdt_checkbox_label_danger_text: var(--dot_bittersweet);
84
-
85
- /* dropbox */
86
- --zdt_dropbox_default_bg: #212121;
87
- --zdt_dropbox_default_box_shadow: rgba(0, 0, 0, 0.5);
88
- --zdt_dropbox_arrow_shadow: var(--zd_graytrans4);
89
- --zdt_dropbox_mob_bg: rgba(0, 0, 0, 0.4);
90
- --zdt_dropbox_mob_close_bg: var(--zd_smoke53);
91
-
92
- /* label */
93
- --zdt_label_default_text: var(--dot_platinum);
94
- --zdt_label_primary_text: var(--dot_oslogrey);
95
- --zdt_label_secondary_text: var(--dot_cadetblue);
96
- --zdt_label_danger_text: var(--dot_brightOrange);
97
- --zdt_label_mandatory_text: var(--dot_bittersweet);
98
- --zdt_label_disable_text: var(--dot_inputDisable);
99
-
100
- /* tag */
101
- --zdt_tag_default_text: var(--dot_platinum);
102
- --zdt_tag_default_bg: var(--zdt_cta_grey_20_bg);
103
- --zdt_tag_default_border: var(--dot_mirror);
104
- --zdt_tag_default_hover_bg: var(--zdt_cta_grey_35_bg);
105
- --zdt_tag_secondary_text: var(--dot_white);
106
- --zdt_tag_secondary_bg: var(--zd_dark32);
107
- --zdt_tag_secondary_hover_bg: var(--zd_dark33);
108
- --zdt_tag_closedanger_bg: var(--zd_dangertrans5);
109
- --zdt_tag_icon_bg: var(--dot_mirror);
110
- --zdt_tag_disabled_text: var(--dot_inputDisable);
111
- --zdt_tag_danger_bg: var(--dot_bittersweet);
112
- --zdt_tag_danger_hover_bg: var(--dot_matterhorn);
113
- --zdt_tag_primary_bg: var(--zdt_cta_primary_bg);
114
- --zdt_tag_primary_hover_bg: var(--zdt_cta_primary_hover_bg);
115
- --zdt_tag_primary_border: var(--zdt_cta_primary_light_border);
116
- --zdt_tag_closeprimary_bg: var(--zdt_cta_primary_bg);
117
- --zdt_tag_default_danger_bg: var(--zdt_cta_grey_15_bg);
118
- --zdt_tag_active_default_bg: var(--zdt_cta_primary_light_bg);
119
- --zdt_tag_pure_bg: #212121;
120
- --zdt_tag_pure_border: var(--zd_smoke91);
121
- --zdt_tag_pure_hover_bg: var(--zd_smoke6);
122
- --zdt_tag_pure_hover_border: var(--zd_dark6);
123
- --zdt_tag_dark_close_hover_bg: var(--dot_brightRed);
124
-
125
- /* textbox */
126
- --zdt_textbox_default_text: var(--dot_platinum);
127
- --zdt_textbox_default_bg: var(--dot_mirror);
128
- --zdt_textbox_default_border: var(--dot_inputLine);
129
- --zdt_textbox_placeholder_text: var(--dot_inputPlaceholder);
130
- --zdt_textbox_disabled_text: var(--dot_inputDisable);
131
- --zdt_textbox_transparent_border: var(--dot_mirror);
132
- --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
133
- --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
134
- --zdt_textbox_secondary_text: var(--dot_cadetblue);
135
-
136
- /* dropdown */
137
- --zdt_dropdown_default_text: var(--dot_platinum);
138
- --zdt_dropdown_default_border: var(--dot_mirror);
139
- --zdt_dropdown_default_bg: var(--dot_cadetblue);
140
- --zdt_dropdown_darkheading_bg: var(--dot_unknown2);
141
- --zdt_dropdown_darkheading_underline_bg: var(--dot_oslogrey);
142
- --zdt_dropdown_mirror_bg: var(--dot_mirror);
143
- --zdt_dropdown_user_default_border: #161515;
144
- --zdt_dropdown_listactive_border: var(--zdt_cta_primary_border);
145
- --zdt_dropdown_listactive_bg: var(--dot_darkbluegrey);
146
- --zdt_dropdown_listhover_bg: var(--zdt_cta_grey_10_bg);
147
-
148
- /* radio */
149
- --zdt_radio_default_stroke: var(--dot_oslogrey);
150
- --zdt_radio_default_bg: #212121;
151
- --zdt_radio_primary_stroke: var(--zdt_cta_primary_border);
152
- --zdt_radio_primary_fill: var(--zdt_cta_primary_bg);
153
- --zdt_radio_danger_stroke: var(--dot_bittersweet);
154
- --zdt_radio_danger_fill: var(--dot_bittersweet);
155
- --zdt_radio_label_primary_text: var(--zdt_cta_primary_text);
156
- --zdt_radio_label_danger_text: var(--dot_bittersweet);
157
-
158
- /* listitem */
159
- --zdt_listitem_default_text: var(--dot_platinum);
160
- --zdt_listitem_default_border: var(--dot_mirror);
161
- --zdt_listitem_default_bg: var(--dot_mirror);
162
- --zdt_listitem_default_tickicon: var(--zdt_cta_primary_text);
163
- --zdt_listitem_highlight_bg: rgba(44, 59, 77, 0.45);
164
- --zdt_listitem_active_border: var(--zdt_cta_primary_border);
165
- --zdt_listitem_primary_bg: var(--dot_listItemActive);
166
- --zdt_listitem_secondary_bg: var(--zdt_cta_primary_bg);
167
- --zdt_listitem_secondary_text: #212121;
168
-
169
- /* ribbon */
170
- --zdt_ribbon_default_text: var(--dot_platinum);
171
- --zdt_ribbon_default_bg: var(--dot_mirror);
172
- --zdt_ribbon_default_border: var(--zd_graytrans9);
173
- --zdt_ribbon_default_tag_border: var(--zd_smoke12);
174
- --zdt_ribbon_default_shadow: var(--zd_graytrans9);
175
- --zdt_ribbon_default_stamp_bg: var(--zd_graytrans9);
176
- --zdt_ribbon_white_text: #212121;
177
- --zdt_ribbon_white_bg: #212121;
178
- --zdt_ribbon_palette_bg: var(--zd_dark5);
179
- --zdt_ribbon_danger_bg: var(--dot_bittersweet);
180
- --zdt_ribbon_danger_text: var(--dot_bittersweet);
181
- --zdt_ribbon_danger_shadow: var(--zd_dangertrans7);
182
- --zdt_ribbon_danger_border: var(--zd_dangertrans7);
183
- --zdt_ribbon_danger_stamp_bg: var(--zd_dangertrans7);
184
- --zdt_ribbon_primary_bg: var(--dot_butterflyblue);
185
- --zdt_ribbon_primary_text: var(--dot_butterflyblue);
186
- --zdt_ribbon_primary_shadow: var(--zd_primarytrans10);
187
- --zdt_ribbon_primary_border: var(--zd_primarytrans10);
188
- --zdt_ribbon_primary_stamp_bg: var(--zd_primarytrans10);
189
- --zdt_ribbon_secondary_bg: var(--zd_olive13);
190
- --zdt_ribbon_secondary_text: var(--zd_olive13);
191
- --zdt_ribbon_secondary_shadow: var(--zd_olivetrans);
192
- --zdt_ribbon_secondary_border: var(--zd_olivetrans);
193
- --zdt_ribbon_secondary_stamp_bg: var(--zd_olivetrans);
194
- --zdt_ribbon_info_bg: var(--zd_info);
195
- --zdt_ribbon_info_text: var(--zd_info);
196
- --zdt_ribbon_info_shadow: var(--zd_orangetrans);
197
- --zdt_ribbon_info_border: var(--zd_orangetrans);
198
- --zdt_ribbon_info_stamp_bg: var(--zd_orangetrans);
199
- --zdt_ribbon_dark_bg: var(--dot_platinum);
200
- --zdt_ribbon_dark_shadow: var(--zd_graytrans6);
201
- --zdt_ribbon_dark_border: var(--zd_graytrans6);
202
- --zdt_ribbon_dark_stamp_bg: var(--zd_graytrans4);
203
- --zdt_ribbon_plain_text: var(--zd_dark5);
204
- --zdt_ribbon_flag_mirror_border: var(--zd_mirror);
205
- --zdt_ribbon_flag_white_border: #212121;
206
-
207
- /* stencils */
208
- --zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
209
- --zdt_stencil_primary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
210
- --zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
211
- --zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
212
-
213
- /* switch */
214
- --zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
215
- --zdt_switch_default_on_bg: var(--dot_darkmint);
216
- --zdt_switch_circle_bg: var(--dot_white);
217
- --zdt_switch_circle_shadow: var(--zd_smoke21);
218
- --zdt_switch_effect_off_bg: var(--zdt_cta_grey_40_bg);
219
-
220
- /* textboxicon */
221
- --zdt_textboxicon_default_line_bg: var(--dot_inputLine);
222
- --zdt_textboxicon_default_icon: var(--dot_oslogrey);
223
- --zdt_textboxicon_hover_icon: var(--dot_platinum);
224
- --zdt_textboxicon_hover_line_bg: var(--dot_inputLineHover);
225
- --zdt_textboxicon_transparent_line_bg: var(--dot_mirror);
226
- --zdt_textboxicon_focus_line_bg: var(--dot_inputLineFocus);
227
- --zdt_textboxicon_error_line_bg: #cc302d;
228
-
229
- /* textarea */
230
- --zdt_textarea_default_text: var(--dot_inputDisable);
231
- --zdt_textarea_default_bg: var(--dot_mirror);
232
- --zdt_textarea_default_border: var(--dot_inputLine);
233
- --zdt_textarea_placeholder_text: var(--dot_inputPlaceholder);
234
- --zdt_textarea_transparent_border: var(--dot_mirror);
235
- --zdt_textarea_hover_border: var(--dot_inputLineHover);
236
- --zdt_textarea_focus_border: var(--dot_inputLineFocus);
237
- --zdt_textarea_black_text: var(--dot_platinum);
238
-
239
- /* tooltip */
240
- --zdt_tooltip_default_bg: #585858;
241
- --zdt_tooltip_default_text: var(--dot_white);
242
- --zdt_tooltip_default_box_shadow: rgba(0, 0, 0, 0.35);
243
-
244
- /* select */
245
- --zdt_select_emptystate_text: var(--dot_cadetblue);
246
- --zdt_select_disable_text: var(--dot_inputDisable);
247
-
248
- /* multiselect */
249
- --zdt_multiselect_default_border: var(--dot_inputLine);
250
- --zdt_multiselect_transparent_border: var(--dot_mirror);
251
- --zdt_multiselect_default_hover_border: var(--dot_inputLineHover);
252
- --zdt_multiselect_transparent_hover_border: var(--dot_inputLineHover);
253
- --zdt_multiselect_dark_hover_border: var(--dot_stardust);
254
- --zdt_multiselect_default_active_border: var(--dot_inputLineFocus);
255
- --zdt_multiselect_transparent_active_border: var(--dot_inputLineFocus);
256
- --zdt_multiselect_dark_active_border: var(--dot_stardust);
257
- --zdt_multiselect_delete_text: var(--dot_cadetblue);
258
- --zdt_multiselect_delete_bg: var(--dot_mirror);
259
- --zdt_multiselect_delete_hover_text: var(--dot_platinum);
260
- --zdt_multiselect_darkdelete_text: var(--dot_santagrey);
261
- --zdt_multiselect_box_bg: #212121;
262
- --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
263
- --zdt_multiselect_message_text: var(--dot_oslogrey);
264
-
265
- /* advanced multiselect */
266
- --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
267
- --zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
268
- --zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
269
- --zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
270
- --zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
271
- --zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
272
- --zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
273
- --zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
274
- --zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
275
- --zdt_advancedmultiselect_delete_text: var(--dot_cadetblue);
276
- --zdt_advancedmultiselect_delete_hover_text: var(--dot_platinum);
277
- --zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
278
- --zdt_advancedmultiselect_box_bg: #212121;
279
- --zdt_advancedmultiselect_droppopup_text: var(--dot_oslogrey);
280
- --zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
281
-
282
- /* ripple effect */
283
- --zdt_rippleeffect_default_border: var(--dot_mirror);
284
- --zdt_rippleeffect_hover_border: var(--zdt_cta_grey_35_border);
285
- --zdt_rippleeffect_hover_bg: var(--zdt_cta_grey_10_bg);
286
- --zdt_rippleeffect_primary_border: var(--zdt_cta_primary_hover_border);
287
- --zdt_rippleeffect_primary_bg: var(--zdt_cta_primary_bg);
288
- --zdt_rippleeffect_primary_active_border: var(--zdt_cta_primary_border);
289
- --zdt_rippleeffect_primary_light_border: var(--zdt_cta_secondary_light_border);
290
- --zdt_rippleeffect_primary_light_bg: var(--zdt_cta_primary_light_bg);
291
- --zdt_rippleeffect_primary_dark_bg: var(--zdt_cta_primary_light_hover_bg);
292
- --zdt_rippleeffect_primaryfilled_bg: var(--zdt_cta_primary_hover_bg);
293
- --zdt_rippleeffect_green_border: var(--dot_darkmint);
294
- --zdt_rippleeffect_green_bg: var(--dot_blacksqueeze);
295
- --zdt_rippleeffect_slate_border: var(--dot_oslogrey);
296
- --zdt_rippleeffect_navy_border: var(--zdt_cta_grey_40_border);
297
- --zdt_rippleeffect_danger_border: var(--dot_bittersweet);
298
- --zdt_rippleeffect_danger_bg: rgba(255, 107, 107, 0.05);
299
-
300
- /* date time */
301
- --zdt_datetime_default_bg: #212121;
302
- --zdt_datetime_header_bg: #2b2b2b;
303
- --zdt_datetime_header_border: #161515;
304
- --zdt_datetime_datestr_text: var(--dot_platinum);
305
- --zdt_datetime_datestr_hover_bg: #161515;
306
- --zdt_datetime_separator_border: #161515;
307
- --zdt_datetime_daystr_text: #828994;
308
- --zdt_datetime_invalid_text: var(--dot_paleNavy);
309
- --zdt_datetime_invalid_hover_text: var(--dot_bittersweet);
310
- --zdt_datetime_invaliddate_text: rgba(222, 53, 53, 0.3);
311
- --zdt_datetime_today_bg: var(--zdt_cta_primary_bg);
312
- --zdt_datetime_today_text: var(--dot_white);
313
- --zdt_datetime_text: var(--dot_shuttleGrey);
314
-
315
- /* year view */
316
- --zdt_yearview_default_bg: #212121;
317
- --zdt_yearview_month_bg: #2b2b2b;
318
- --zdt_yearview_month_hover_bg: #585858;
319
- --zdt_yearview_currentmonth_bg: var(--zdt_cta_primary_bg);
320
- --zdt_yearview_currentmonth_text: var(--dot_white);
321
- --zdt_yearview_yearbox_border: #585858;
322
- --zdt_yearview_year_hover_text: var(--dot_platinum);
323
- --zdt_yearview_yeartext_text: #828994;
324
-
325
- /* date widget */
326
- --zdt_datewidget_input_border: var(--dot_inputLine);
327
- --zdt_datewidget_enabled_border: var(--dot_inputLineHover);
328
- --zdt_datewidget_textboxfocus_border: var(--dot_inputLineFocus);
329
- --zdt_datewidget_placeholder_text: var(--dot_inputPlaceholder);
330
- --zdt_datewidget_placeholder_selection_text: var(--dot_platinum);
331
- --zdt_datewidget_placeholder_selection_bg: #b4d5fe;
332
-
333
- /* tab */
334
- --zdt_tab_default_border: var(--dot_mirror);
335
- --zdt_tab_alpha_text: var(--dot_cadetblue);
336
- --zdt_tab_alpha_hover_text: var(--dot_platinum);
337
- --zdt_tab_alpha_hover_bg: var(--zdt_cta_grey_10_bg);
338
- --zdt_tab_alpha_active_text: var(--zdt_cta_primary_text);
339
- --zdt_tab_alpha_active_border: var(--dot_platinum);
340
- --zdt_tab_delta_active_border: var(--zdt_cta_primary_border);
341
-
342
- /* tabs */
343
- --zdt_tabs_alpha_bg: #212121;
344
- --zdt_tabs_alpha_border: var(--zdt_cta_grey_15_border);
345
- --zdt_tabs_alpha_box_shadow: var(--zd_dark10);
346
- --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
347
- --zdt_tabs_highlight_border: var(--dot_platinum);
348
-
349
- /* custom scroll */
350
- --zdt_customscroll_default_bg: rgba(225, 225, 225, 0.06);
351
- --zdt_customscroll_thump_bg: rgba(225, 225, 225, 0.12);
352
- --zdt_customscroll_thump_hover_bg: rgba(168, 176, 189, 0.3);
353
- --zdt_customscroll_border: rgba(225, 225, 225, 0.12);
354
- --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
355
- --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
356
- --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
357
- --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
358
- }
@@ -1,34 +0,0 @@
1
- [data-mode='pureDark'][data-theme='blue'], :global(.bluePureDarkTheme) [data-desk-theme="blue"] {
2
- --zdt_cta_primary_text: var(--dot_butterflyblue);
3
- --zdt_cta_primary_hover_text: #6eb2ff;
4
- --zdt_cta_primary_bg: var(--dot_butterflyblue);
5
- --zdt_cta_primary_hover_bg: #1065cc;
6
- --zdt_cta_primary_border: var(--dot_butterflyblue);
7
- --zdt_cta_primary_hover_border: #1065cc;
8
- --zdt_cta_primary_box_shadow: rgba(10, 115, 235, 0.2);
9
- --zdt_cta_primary_hover_box_shadow: rgba(0, 83, 184, 0.25);
10
- --zdt_cta_primary_light_bg: var(--dot_darkbluegrey);
11
- --zdt_cta_primary_light_hover_bg: #2b2b2b;
12
- --zdt_cta_primary_light_border: var(--zd_primary13);
13
- --zdt_cta_secondary_bg: var(--dot_butterflyblue);
14
- --zdt_cta_secondary_text: var(--dot_white);
15
- --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
16
- --zdt_cta_secondary_light_border: #3f536b;
17
- --zdt_cta_alpha_text: var(--dot_butterflyblue);
18
- --zdt_cta_alpha_hover_text: #6eb2ff;
19
- --zdt_cta_alpha_border: var(--dot_butterflyblue);
20
- --zdt_cta_alpha_hover_border: #1065cc;
21
- --zdt_cta_alpha_bg: #253142;
22
- --zdt_cta_beta_border: var(--dot_butterflyblue);
23
- --zdt_cta_grey_10_bg: #262626;
24
- --zdt_cta_grey_10_border: #262626;
25
- --zdt_cta_grey_15_bg: #161515;
26
- --zdt_cta_grey_15_border: #161515;
27
- --zdt_cta_grey_20_bg: #161b23;
28
- --zdt_cta_grey_35_bg: #585858;
29
- --zdt_cta_grey_35_text: #585858;
30
- --zdt_cta_grey_35_border: #585858;
31
- --zdt_cta_grey_40_bg: #585858;
32
- --zdt_cta_grey_40_text: #585858;
33
- --zdt_cta_grey_40_border: #585858
34
- }
@@ -1,42 +0,0 @@
1
- [data-mode='pureDark'][data-theme='blue'], :global(.bluePureDarkTheme) [data-desk-theme="blue"] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: #212121;
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #212121;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #212121;
11
- --zdt_listitem_dark_text: var(--dot_platinum);
12
- --zdt_listitem_dark_effect_bg: #2b2b2b;
13
- --zdt_listitem_dark_active_bg: #3b4d6d;
14
- --zdt_listitem_dark_tickicon: var(--dot_butterflyblue);
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: #42485f;
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: var(--dot_matterhorn);
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: var(--dot_brightRed);
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: var(--dot_mulledwine);
26
- --zdt_multiselect_darkmsg_bg: #212121;
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: var(--dot_cadetblue);
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: var(--dot_cadetblue);
42
- }
@@ -1,34 +0,0 @@
1
- [data-mode='pureDark'][data-theme='green'] {
2
- --zdt_cta_primary_text: #45a159;
3
- --zdt_cta_primary_hover_text: #5eba72;
4
- --zdt_cta_primary_bg: #45a159;
5
- --zdt_cta_primary_hover_bg: #0e7c1c;
6
- --zdt_cta_primary_border: #45a159;
7
- --zdt_cta_primary_hover_border: #0e7c1c;
8
- --zdt_cta_primary_box_shadow: rgba(38, 169, 66, 0.2);
9
- --zdt_cta_primary_hover_box_shadow: rgba(14, 117, 38, 0.25);
10
- --zdt_cta_primary_light_bg: #26373b;
11
- --zdt_cta_primary_light_hover_bg: #2d4e42;
12
- --zdt_cta_primary_light_border: #2d4e42;
13
- --zdt_cta_secondary_bg: #45a159;
14
- --zdt_cta_secondary_text: var(--dot_white);
15
- --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
16
- --zdt_cta_secondary_light_border: #2d4e42;
17
- --zdt_cta_alpha_text: #45a159;
18
- --zdt_cta_alpha_hover_text: #0e7c1c;
19
- --zdt_cta_alpha_border: #45a159;
20
- --zdt_cta_alpha_hover_border: #0e7c1c;
21
- --zdt_cta_alpha_bg: #2a433f;
22
- --zdt_cta_beta_border: #45a159;
23
- --zdt_cta_grey_10_bg: #262626;
24
- --zdt_cta_grey_10_border: #262626;
25
- --zdt_cta_grey_15_bg: #161515;
26
- --zdt_cta_grey_15_border: #161515;
27
- --zdt_cta_grey_20_bg: #161b23;
28
- --zdt_cta_grey_35_bg: #585858;
29
- --zdt_cta_grey_35_text: #585858;
30
- --zdt_cta_grey_35_border: #585858;
31
- --zdt_cta_grey_40_bg: #585858;
32
- --zdt_cta_grey_40_text: #585858;
33
- --zdt_cta_grey_40_border: #585858
34
- }
@@ -1,42 +0,0 @@
1
- [data-mode='pureDark'][data-theme='green'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: #212121;
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #212121;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #212121;
11
- --zdt_listitem_dark_text: var(--dot_platinum);
12
- --zdt_listitem_dark_effect_bg: #2b2b2b;
13
- --zdt_listitem_dark_active_bg: #3b4d6d;
14
- --zdt_listitem_dark_tickicon: #45a159;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: #42485f;
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: var(--dot_matterhorn);
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: var(--dot_brightRed);
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: var(--dot_mulledwine);
26
- --zdt_multiselect_darkmsg_bg: #212121;
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: var(--dot_cadetblue);
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: var(--dot_cadetblue);
42
- }
@@ -1,34 +0,0 @@
1
- [data-mode='pureDark'][data-theme='orange'] {
2
- --zdt_cta_primary_text: #ff801f;
3
- --zdt_cta_primary_hover_text: #ffa866;
4
- --zdt_cta_primary_bg: #ff801f;
5
- --zdt_cta_primary_hover_bg: #a85100;
6
- --zdt_cta_primary_border: #ff801f;
7
- --zdt_cta_primary_hover_border: #a85100;
8
- --zdt_cta_primary_box_shadow: rgba(229, 119, 23, 0.2);
9
- --zdt_cta_primary_hover_box_shadow: rgba(178, 89, 0, 0.25);
10
- --zdt_cta_primary_light_bg: #323136;
11
- --zdt_cta_primary_light_hover_bg: #4f3c33;
12
- --zdt_cta_primary_light_border: #4f3c33;
13
- --zdt_cta_secondary_bg: #ff801f;
14
- --zdt_cta_secondary_text: var(--dot_white);
15
- --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
16
- --zdt_cta_secondary_light_border: #4f3c33;
17
- --zdt_cta_alpha_text: #ff801f;
18
- --zdt_cta_alpha_hover_text: #a85100;
19
- --zdt_cta_alpha_border: #ff801f;
20
- --zdt_cta_alpha_hover_border: #a85100;
21
- --zdt_cta_alpha_bg: #393335;
22
- --zdt_cta_beta_border: #ff801f;
23
- --zdt_cta_grey_10_bg: #262626;
24
- --zdt_cta_grey_10_border: #262626;
25
- --zdt_cta_grey_15_bg: #161515;
26
- --zdt_cta_grey_15_border: #161515;
27
- --zdt_cta_grey_20_bg: #161b23;
28
- --zdt_cta_grey_35_bg: #585858;
29
- --zdt_cta_grey_35_text: #585858;
30
- --zdt_cta_grey_35_border: #585858;
31
- --zdt_cta_grey_40_bg: #585858;
32
- --zdt_cta_grey_40_text: #585858;
33
- --zdt_cta_grey_40_border: #585858
34
- }
@@ -1,42 +0,0 @@
1
- [data-mode='pureDark'][data-theme='orange'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: #212121;
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #212121;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #212121;
11
- --zdt_listitem_dark_text: var(--dot_platinum);
12
- --zdt_listitem_dark_effect_bg: #2b2b2b;
13
- --zdt_listitem_dark_active_bg: #3b4d6d;
14
- --zdt_listitem_dark_tickicon: #e94f4f;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: #42485f;
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: var(--dot_matterhorn);
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: var(--dot_brightRed);
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: var(--dot_mulledwine);
26
- --zdt_multiselect_darkmsg_bg: #212121;
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: var(--dot_cadetblue);
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: var(--dot_cadetblue);
42
- }
@@ -1,34 +0,0 @@
1
- [data-mode='pureDark'][data-theme='red'] {
2
- --zdt_cta_primary_text: #e94f4f;
3
- --zdt_cta_primary_hover_text: #ee7c7c;
4
- --zdt_cta_primary_bg: #e94f4f;
5
- --zdt_cta_primary_hover_bg: #a81111;
6
- --zdt_cta_primary_border: #e94f4f;
7
- --zdt_cta_primary_hover_border: #a81111;
8
- --zdt_cta_primary_box_shadow: rgba(222, 53, 53, 0.2);
9
- --zdt_cta_primary_hover_box_shadow: rgba(171, 26, 24, 0.25);
10
- --zdt_cta_primary_light_bg: #312d3a;
11
- --zdt_cta_primary_light_hover_bg: #4b323d;
12
- --zdt_cta_primary_light_border: #4b323d;
13
- --zdt_cta_secondary_bg: #e94f4f;
14
- --zdt_cta_secondary_text: var(--dot_white);
15
- --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
16
- --zdt_cta_secondary_light_border: #4b323d;
17
- --zdt_cta_alpha_text: #e94f4f;
18
- --zdt_cta_alpha_hover_text: #a81111;
19
- --zdt_cta_alpha_border: #e94f4f;
20
- --zdt_cta_alpha_hover_border: #a81111;
21
- --zdt_cta_alpha_bg: #372f3a;
22
- --zdt_cta_beta_border: #e94f4f;
23
- --zdt_cta_grey_10_bg: #262626;
24
- --zdt_cta_grey_10_border: #262626;
25
- --zdt_cta_grey_15_bg: #161515;
26
- --zdt_cta_grey_15_border: #161515;
27
- --zdt_cta_grey_20_bg: #161b23;
28
- --zdt_cta_grey_35_bg: #585858;
29
- --zdt_cta_grey_35_text: #585858;
30
- --zdt_cta_grey_35_border: #585858;
31
- --zdt_cta_grey_40_bg: #585858;
32
- --zdt_cta_grey_40_text: #585858;
33
- --zdt_cta_grey_40_border: #585858
34
- }
@@ -1,42 +0,0 @@
1
- [data-mode='pureDark'][data-theme='red'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: #212121;
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #212121;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #212121;
11
- --zdt_listitem_dark_text: var(--dot_platinum);
12
- --zdt_listitem_dark_effect_bg: #2b2b2b;
13
- --zdt_listitem_dark_active_bg: #3b4d6d;
14
- --zdt_listitem_dark_tickicon: #ff801f;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: #42485f;
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: var(--dot_matterhorn);
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: var(--dot_brightRed);
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: var(--dot_mulledwine);
26
- --zdt_multiselect_darkmsg_bg: #212121;
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: var(--dot_cadetblue);
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: var(--dot_cadetblue);
42
- }
@@ -1,34 +0,0 @@
1
- [data-mode='pureDark'][data-theme='yellow'] {
2
- --zdt_cta_primary_text: #d79835;
3
- --zdt_cta_primary_hover_text: #e1b36a;
4
- --zdt_cta_primary_bg: #d79835;
5
- --zdt_cta_primary_hover_bg: #9b6808;
6
- --zdt_cta_primary_border: #d79835;
7
- --zdt_cta_primary_hover_border: #9b6808;
8
- --zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
9
- --zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
10
- --zdt_cta_primary_light_bg: #303338;
11
- --zdt_cta_primary_light_hover_bg: #474137;
12
- --zdt_cta_primary_light_border: #474137;
13
- --zdt_cta_secondary_bg: #d79835;
14
- --zdt_cta_secondary_text: var(--dot_white);
15
- --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
16
- --zdt_cta_secondary_light_border: #474137;
17
- --zdt_cta_alpha_text: #d79835;
18
- --zdt_cta_alpha_hover_text: #9b6808;
19
- --zdt_cta_alpha_border: #d79835;
20
- --zdt_cta_alpha_hover_border: #9b6808;
21
- --zdt_cta_alpha_bg: #353638;
22
- --zdt_cta_beta_border: #d79835;
23
- --zdt_cta_grey_10_bg: #262626;
24
- --zdt_cta_grey_10_border: #262626;
25
- --zdt_cta_grey_15_bg: #161515;
26
- --zdt_cta_grey_15_border: #161515;
27
- --zdt_cta_grey_20_bg: #161b23;
28
- --zdt_cta_grey_35_bg: #585858;
29
- --zdt_cta_grey_35_text: #585858;
30
- --zdt_cta_grey_35_border: #585858;
31
- --zdt_cta_grey_40_bg: #585858;
32
- --zdt_cta_grey_40_text: #585858;
33
- --zdt_cta_grey_40_border: #585858
34
- }
@@ -1,42 +0,0 @@
1
- [data-mode='pureDark'][data-theme='yellow'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: #212121;
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #212121;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #212121;
11
- --zdt_listitem_dark_text: var(--dot_platinum);
12
- --zdt_listitem_dark_effect_bg: #2b2b2b;
13
- --zdt_listitem_dark_active_bg: #3b4d6d;
14
- --zdt_listitem_dark_tickicon: #d79835;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: #42485f;
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: var(--dot_matterhorn);
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: var(--dot_brightRed);
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: var(--dot_mulledwine);
26
- --zdt_multiselect_darkmsg_bg: #212121;
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: var(--dot_cadetblue);
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: var(--dot_cadetblue);
42
- }