@zohodesk/components 1.0.0-temp-254 → 1.0.0-temp-253.1

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 (28) hide show
  1. package/README.md +3 -4
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +4 -4
  3. package/assets/Appearance/light/mode/Component_LightMode.module.css +6 -6
  4. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +3 -3
  5. package/es/DropBox/DropBoxElement/DropBoxElement.js +21 -11
  6. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +5 -3
  7. package/es/DropBox/DropBoxElement/props/propTypes.js +2 -1
  8. package/es/ResponsiveDropBox/ResponsiveDropBox.js +6 -7
  9. package/lib/DropBox/DropBoxElement/DropBoxElement.js +22 -11
  10. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +5 -3
  11. package/lib/DropBox/DropBoxElement/props/propTypes.js +2 -1
  12. package/lib/ResponsiveDropBox/ResponsiveDropBox.js +5 -6
  13. package/package.json +23 -21
  14. package/assets/Appearance/dark/themes/blue/blue_componentsCTA_DarkModifyCategory.module.css +0 -14
  15. package/assets/Appearance/dark/themes/green/green_componentsCTA_DarkModifyCategory.module.css +0 -14
  16. package/assets/Appearance/dark/themes/orange/orange_componentsCTA_DarkModifyCategory.module.css +0 -14
  17. package/assets/Appearance/dark/themes/red/red_componentsCTA_DarkModifyCategory.module.css +0 -14
  18. package/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css +0 -14
  19. package/assets/Appearance/light/themes/blue/blue_componentsCTA_LightModifyCategory.module.css +0 -14
  20. package/assets/Appearance/light/themes/green/green_componentsCTA_LightModifyCategory.module.css +0 -14
  21. package/assets/Appearance/light/themes/orange/orange_componentsCTA_LightModifyCategory.module.css +0 -14
  22. package/assets/Appearance/light/themes/red/red_componentsCTA_LightModifyCategory.module.css +0 -14
  23. package/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css +0 -14
  24. package/assets/Appearance/pureDark/themes/blue/blue_componentsCTA_PureDarkModifyCategory.module.css +0 -14
  25. package/assets/Appearance/pureDark/themes/green/green_componentsCTA_PureDarkModifyCategory.module.css +0 -14
  26. package/assets/Appearance/pureDark/themes/orange/orange_componentsCTA_PureDarkModifyCategory.module.css +0 -14
  27. package/assets/Appearance/pureDark/themes/red/red_componentsCTA_PureDarkModifyCategory.module.css +0 -14
  28. package/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css +0 -14
package/README.md CHANGED
@@ -2,10 +2,6 @@
2
2
 
3
3
  Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
4
4
 
5
- # 1.6.x
6
-
7
- - Updated `@zohodesk-private/color-variable-preprocessor` package version - CTA category overridden variables are now generated only for the necessary CTA variables using the `buildOverriddenCTACategories` function.
8
-
9
5
  # 1.6.12
10
6
 
11
7
  - v1/Button/_shared/SuccessTick/SuccessTick.module.css file renamed to SuccessTick_v1.module.css
@@ -25,6 +21,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
25
21
  - Prefixless prop fallbacks are supported
26
22
  - `tagName` config in **highlightText** has been renamed to `as`. (fallback supported)
27
23
 
24
+
28
25
  # 1.6.7
29
26
 
30
27
  - PX to variable conversion was not applied due to the CBT migration. The issue has now been fixed.
@@ -50,6 +47,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
50
47
  ### 🔒 Compatibility
51
48
  - Requires `@zohodesk/dotkit` version `1.0.8` or above.
52
49
 
50
+
53
51
  # 1.6.3
54
52
 
55
53
  - Added customProps support to **AdvancedMultiSelect**.
@@ -143,6 +141,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
143
141
 
144
142
  - Font Family Migrated to Font-weight across all css (Impacted)
145
143
 
144
+
146
145
  # 1.4.23
147
146
 
148
147
  - **Typography**
@@ -111,7 +111,7 @@
111
111
  --zdt_tag_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
112
112
  --zdt_tag_default_bg:var(--zdt_cta_grey_20_bg);
113
113
  --zdt_tag_default_border:var(--dot_mirror);
114
- --zdt_tag_default_hover_bg:var(--zdt_cta_grey_35_bg);
114
+ --zdt_tag_default_hover_bg:var(--zdtm_cta_grey_35_bg_darker_lowest);
115
115
  --zdt_tag_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
116
116
  --zdt_tag_secondary_bg:hsla(217, calc(var(--zd-saturation, 1) * 12.16%), calc(29.02% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
117
117
  --zdt_tag_secondary_hover_bg:hsla(216, calc(var(--zd-saturation, 1) * 9.93%), calc(29.61% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -122,7 +122,7 @@
122
122
  --zdt_tag_danger_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
123
123
  --zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
124
124
  --zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
125
- --zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
125
+ --zdt_tag_primary_border:var(--zdtm_cta_primary_light_border_default_inverse_medium);
126
126
  --zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
127
127
  --zdt_tag_default_danger_bg:var(--zdtm_cta_grey_15_bg_default_inverse_low);
128
128
  --zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
@@ -311,7 +311,7 @@
311
311
  --zdt_datetime_invalid_text:hsla(216, calc(var(--zd-saturation, 1) * 22.98%), calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
312
312
  --zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
313
313
  --zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
314
- --zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
314
+ --zdt_datetime_selected_bg:var(--zdtm_cta_primary_bg_darker_low);
315
315
  --zdt_datetime_today_border:var(--zdt_cta_primary_border);
316
316
  --zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
317
317
  --zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -345,7 +345,7 @@
345
345
 
346
346
  /* tabs */
347
347
  --zdt_tabs_alpha_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
348
- --zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
348
+ --zdt_tabs_alpha_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
349
349
  --zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.3);
350
350
  --zdt_tabs_delta_border:var(--zdt_cta_primary_border);
351
351
  --zdt_tabs_highlight_border:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -1,6 +1,6 @@
1
1
  [data-mode='light']{
2
2
  /* list common */
3
- --dot_inputPlaceholder:var(--zdt_cta_grey_40_text);
3
+ --dot_inputPlaceholder:var(--zdtm_cta_grey_40_text_default_inverse);
4
4
  --dot_inputDisable:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
5
5
  --dot_inputLine:var(--zdt_cta_grey_35_border);
6
6
  --dot_inputLineHover:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -111,7 +111,7 @@
111
111
  --zdt_tag_default_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
112
112
  --zdt_tag_default_bg:var(--zdt_cta_grey_20_bg);
113
113
  --zdt_tag_default_border:var(--dot_mirror);
114
- --zdt_tag_default_hover_bg:var(--zdt_cta_grey_35_bg);
114
+ --zdt_tag_default_hover_bg:var(--zdtm_cta_grey_35_bg_darker_lowest);
115
115
  --zdt_tag_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
116
116
  --zdt_tag_secondary_bg:hsla(217, calc(var(--zd-saturation, 1) * 12.16%), calc(29.02% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
117
117
  --zdt_tag_secondary_hover_bg:hsla(216, calc(var(--zd-saturation, 1) * 9.93%), calc(29.61% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -122,7 +122,7 @@
122
122
  --zdt_tag_danger_hover_bg:hsla(7, calc(var(--zd-saturation, 1) * 70.21%), calc(90.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
123
123
  --zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
124
124
  --zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
125
- --zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
125
+ --zdt_tag_primary_border:var(--zdtm_cta_primary_light_border_default_inverse_medium);
126
126
  --zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
127
127
  --zdt_tag_default_danger_bg:var(--zdtm_cta_grey_15_bg_default_inverse_low);
128
128
  --zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
@@ -152,7 +152,7 @@
152
152
  --zdt_dropdown_darkheading_bg:hsla(226, calc(var(--zd-saturation, 1) * 21.68%), calc(28.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
153
153
  --zdt_dropdown_darkheading_underline_bg:hsla(223, calc(var(--zd-saturation, 1) * 14.00%), calc(39.22% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
154
154
  --zdt_dropdown_mirror_bg:var(--dot_mirror);
155
- --zdt_dropdown_user_default_border:var(--zdt_cta_grey_35_border);
155
+ --zdt_dropdown_user_default_border:var(--zdtm_cta_grey_35_border_default_inverse_medium);
156
156
  --zdt_dropdown_listactive_border:var(--zdt_cta_primary_border);
157
157
  --zdt_dropdown_listactive_bg:hsla(212, calc(var(--zd-saturation, 1) * 86.67%), calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
158
158
  --zdt_dropdown_listhover_bg:var(--zdt_cta_grey_10_bg);
@@ -311,7 +311,7 @@
311
311
  --zdt_datetime_invalid_text:hsla(231, calc(var(--zd-saturation, 1) * 22.22%), calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
312
312
  --zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
313
313
  --zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
314
- --zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
314
+ --zdt_datetime_selected_bg:var(--zdtm_cta_primary_bg_darker_low);
315
315
  --zdt_datetime_today_border:var(--zdt_cta_primary_border);
316
316
  --zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
317
317
  --zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -345,7 +345,7 @@
345
345
 
346
346
  /* tabs */
347
347
  --zdt_tabs_alpha_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
348
- --zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
348
+ --zdt_tabs_alpha_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
349
349
  --zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.3);
350
350
  --zdt_tabs_delta_border:var(--zdt_cta_primary_border);
351
351
  --zdt_tabs_highlight_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -122,7 +122,7 @@
122
122
  --zdt_tag_danger_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
123
123
  --zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
124
124
  --zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
125
- --zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
125
+ --zdt_tag_primary_border:var(--zdtm_cta_primary_light_border_default_inverse_medium);
126
126
  --zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
127
127
  --zdt_tag_default_danger_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(18.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
128
128
  --zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
@@ -311,7 +311,7 @@
311
311
  --zdt_datetime_invalid_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
312
312
  --zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
313
313
  --zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
314
- --zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
314
+ --zdt_datetime_selected_bg:var(--zdtm_cta_primary_bg_darker_low);
315
315
  --zdt_datetime_today_border:var(--zdt_cta_primary_border);
316
316
  --zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
317
317
  --zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -345,7 +345,7 @@
345
345
 
346
346
  /* tabs */
347
347
  --zdt_tabs_alpha_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
348
- --zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
348
+ --zdt_tabs_alpha_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
349
349
  --zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.3);
350
350
  --zdt_tabs_delta_border:var(--zdt_cta_primary_border);
351
351
  --zdt_tabs_highlight_border:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -6,6 +6,7 @@ import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/util
6
6
  import { DropBoxElementDefaultProps } from "./props/defaultProps";
7
7
  import { DropBoxElementPropTypes } from "./props/propTypes";
8
8
  import { mergeStyle } from '@zohodesk/utils';
9
+ import { Container, Box } from "../../Layout";
9
10
  import style from "./css/DropBoxElement.module.css";
10
11
  export default function DropBoxElement(props) {
11
12
  let {
@@ -27,6 +28,7 @@ export default function DropBoxElement(props) {
27
28
  tabIndex,
28
29
  palette,
29
30
  subContainerRef,
31
+ getSubContainerRef,
30
32
  customStyle,
31
33
  animationStyle
32
34
  } = props;
@@ -54,6 +56,14 @@ export default function DropBoxElement(props) {
54
56
  }
55
57
  };
56
58
 
59
+ const setSubContainerRef = ele => {
60
+ if (subContainerRef) {
61
+ subContainerRef.current = ele;
62
+ }
63
+
64
+ getSubContainerRef && getSubContainerRef(ele);
65
+ };
66
+
57
67
  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
58
68
  isAbsolute = true;
59
69
  }
@@ -94,14 +104,14 @@ export default function DropBoxElement(props) {
94
104
  isAbsolute
95
105
  }
96
106
  });
97
- return /*#__PURE__*/React.createElement("div", {
107
+ return /*#__PURE__*/React.createElement(Container, {
108
+ scroll: "none",
98
109
  className: boxClassName,
99
- "data-id": `${dataId}`,
100
- "data-test-id": `${dataId}`,
101
- "data-selector-id": dataSelectorId,
102
- ref: getRef,
110
+ dataId: `${dataId}`,
111
+ dataSelectorId: dataSelectorId,
112
+ eleRef: getRef,
103
113
  style: inlineStyle,
104
- "data-tour": tourId,
114
+ tourId: tourId,
105
115
  "data-position": boxPosition,
106
116
  "data-box-direction": boxDirection,
107
117
  "data-arrow-position": arrowPosition,
@@ -113,14 +123,14 @@ export default function DropBoxElement(props) {
113
123
  onAnimationEnd: isAnimate && FireOnAnimationEnd,
114
124
  "data-a11y-focus-main-area": true,
115
125
  "dot-ui-element": "dropbox"
116
- }, /*#__PURE__*/React.createElement("div", {
126
+ }, /*#__PURE__*/React.createElement(Box, {
127
+ flexible: true,
117
128
  tabIndex: "-1",
118
129
  className: `${subContainerClass} ${style[`${palette}Palette`]}`,
119
130
  onClick: onClick,
120
- "data-id": `${dataId}_subcontainer`,
121
- "data-test-id": `${dataId}_subcontainer`,
122
- "data-selector-id": `${dataSelectorId}_subcontainer`,
123
- ref: subContainerRef
131
+ dataId: `${dataId}_subcontainer`,
132
+ dataSelectorId: `${dataSelectorId}_subcontainer`,
133
+ eleRef: setSubContainerRef
124
134
  }, isModel ? /*#__PURE__*/React.createElement("div", {
125
135
  className: style.closeBar
126
136
  }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
@@ -13,6 +13,8 @@
13
13
 
14
14
  .subContainer {
15
15
  position: relative;
16
+ display: flex;
17
+ flex-direction: column;
16
18
  border-radius: var(--dropbox_border_radius);
17
19
  padding: var(--dropbox_padding);
18
20
  box-shadow: var(--dropbox_box_shadow);
@@ -430,8 +432,8 @@
430
432
  height: 6px;
431
433
  /*css:theme-validation:ignore*/
432
434
  width: 20% ;
433
- margin-block:0 var(--zd_size10) ;
434
- margin-inline:auto ;
435
+ margin-block: 0 var(--zd_size10) ;
436
+ margin-inline: auto ;
435
437
  border-radius: 5px;
436
438
  background-color: var(--dropbox_mob_close_bg_color);
437
439
  cursor: pointer;
@@ -443,4 +445,4 @@
443
445
 
444
446
  .darkPalette {
445
447
  --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
446
- }
448
+ }
@@ -47,5 +47,6 @@ export const DropBoxElementPropTypes = {
47
47
  positionsOffset: PropTypes.object,
48
48
  targetOffset: PropTypes.object,
49
49
  zIndexStyle: PropTypes.object,
50
- subContainerRef: PropTypes.func
50
+ subContainerRef: PropTypes.func,
51
+ getSubContainerRef: PropTypes.func
51
52
  };
@@ -4,7 +4,7 @@ import React, { Component } from 'react';
4
4
  import { defaultProps } from "./props/defaultProps";
5
5
  import { propTypes } from "./props/propTypes";
6
6
  import DropBox from "../DropBox/DropBox";
7
- import { Container } from "../Layout";
7
+ import { Box } from "../Layout";
8
8
  import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
9
9
  import style from "./ResponsiveDropBox.module.css";
10
10
  export default class ResponsiveDropBox extends Component {
@@ -28,8 +28,7 @@ export default class ResponsiveDropBox extends Component {
28
28
  const {
29
29
  children,
30
30
  customClass = {},
31
- isResponsivePadding,
32
- alignBox
31
+ isResponsivePadding
33
32
  } = this.props;
34
33
  const {
35
34
  customDropBox = '',
@@ -54,10 +53,10 @@ export default class ResponsiveDropBox extends Component {
54
53
  let {
55
54
  tabletMode
56
55
  } = _ref2;
57
- return /*#__PURE__*/React.createElement(Container, {
58
- alignBox: alignBox,
59
- isCover: false,
60
- className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
56
+ return /*#__PURE__*/React.createElement(Box, {
57
+ flexible: true,
58
+ shrink: true,
59
+ className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''}`
61
60
  }, children);
62
61
  }));
63
62
  }
@@ -19,6 +19,8 @@ var _propTypes = require("./props/propTypes");
19
19
 
20
20
  var _utils = require("@zohodesk/utils");
21
21
 
22
+ var _Layout = require("../../Layout");
23
+
22
24
  var _DropBoxElementModule = _interopRequireDefault(require("./css/DropBoxElement.module.css"));
23
25
 
24
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -43,6 +45,7 @@ function DropBoxElement(props) {
43
45
  tabIndex = props.tabIndex,
44
46
  palette = props.palette,
45
47
  subContainerRef = props.subContainerRef,
48
+ getSubContainerRef = props.getSubContainerRef,
46
49
  customStyle = props.customStyle,
47
50
  animationStyle = props.animationStyle;
48
51
  var isAbsolute = isAbsolutePositioningNeeded;
@@ -67,6 +70,14 @@ function DropBoxElement(props) {
67
70
  }
68
71
  };
69
72
 
73
+ var setSubContainerRef = function setSubContainerRef(ele) {
74
+ if (subContainerRef) {
75
+ subContainerRef.current = ele;
76
+ }
77
+
78
+ getSubContainerRef && getSubContainerRef(ele);
79
+ };
80
+
70
81
  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
71
82
  isAbsolute = true;
72
83
  }
@@ -106,14 +117,14 @@ function DropBoxElement(props) {
106
117
  subContainerClass = _cssJSLogic.subContainerClass,
107
118
  inlineStyle = _cssJSLogic.inlineStyle;
108
119
 
109
- return /*#__PURE__*/_react["default"].createElement("div", {
120
+ return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
121
+ scroll: "none",
110
122
  className: boxClassName,
111
- "data-id": "".concat(dataId),
112
- "data-test-id": "".concat(dataId),
113
- "data-selector-id": dataSelectorId,
114
- ref: getRef,
123
+ dataId: "".concat(dataId),
124
+ dataSelectorId: dataSelectorId,
125
+ eleRef: getRef,
115
126
  style: inlineStyle,
116
- "data-tour": tourId,
127
+ tourId: tourId,
117
128
  "data-position": boxPosition,
118
129
  "data-box-direction": boxDirection,
119
130
  "data-arrow-position": arrowPosition,
@@ -125,14 +136,14 @@ function DropBoxElement(props) {
125
136
  onAnimationEnd: isAnimate && FireOnAnimationEnd,
126
137
  "data-a11y-focus-main-area": true,
127
138
  "dot-ui-element": "dropbox"
128
- }, /*#__PURE__*/_react["default"].createElement("div", {
139
+ }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
140
+ flexible: true,
129
141
  tabIndex: "-1",
130
142
  className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),
131
143
  onClick: onClick,
132
- "data-id": "".concat(dataId, "_subcontainer"),
133
- "data-test-id": "".concat(dataId, "_subcontainer"),
134
- "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
135
- ref: subContainerRef
144
+ dataId: "".concat(dataId, "_subcontainer"),
145
+ dataSelectorId: "".concat(dataSelectorId, "_subcontainer"),
146
+ eleRef: setSubContainerRef
136
147
  }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
137
148
  className: _DropBoxElementModule["default"].closeBar
138
149
  }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
@@ -13,6 +13,8 @@
13
13
 
14
14
  .subContainer {
15
15
  position: relative;
16
+ display: flex;
17
+ flex-direction: column;
16
18
  border-radius: var(--dropbox_border_radius);
17
19
  padding: var(--dropbox_padding);
18
20
  box-shadow: var(--dropbox_box_shadow);
@@ -430,8 +432,8 @@
430
432
  height: 6px;
431
433
  /*css:theme-validation:ignore*/
432
434
  width: 20% ;
433
- margin-block:0 var(--zd_size10) ;
434
- margin-inline:auto ;
435
+ margin-block: 0 var(--zd_size10) ;
436
+ margin-inline: auto ;
435
437
  border-radius: 5px;
436
438
  background-color: var(--dropbox_mob_close_bg_color);
437
439
  cursor: pointer;
@@ -443,4 +445,4 @@
443
445
 
444
446
  .darkPalette {
445
447
  --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
446
- }
448
+ }
@@ -57,6 +57,7 @@ var DropBoxElementPropTypes = {
57
57
  positionsOffset: _propTypes["default"].object,
58
58
  targetOffset: _propTypes["default"].object,
59
59
  zIndexStyle: _propTypes["default"].object,
60
- subContainerRef: _propTypes["default"].func
60
+ subContainerRef: _propTypes["default"].func,
61
+ getSubContainerRef: _propTypes["default"].func
61
62
  };
62
63
  exports.DropBoxElementPropTypes = DropBoxElementPropTypes;
@@ -81,8 +81,7 @@ var ResponsiveDropBox = /*#__PURE__*/function (_Component) {
81
81
  children = _this$props.children,
82
82
  _this$props$customCla = _this$props.customClass,
83
83
  customClass = _this$props$customCla === void 0 ? {} : _this$props$customCla,
84
- isResponsivePadding = _this$props.isResponsivePadding,
85
- alignBox = _this$props.alignBox;
84
+ isResponsivePadding = _this$props.isResponsivePadding;
86
85
  var _customClass$customDr = customClass.customDropBox,
87
86
  customDropBox = _customClass$customDr === void 0 ? '' : _customClass$customDr,
88
87
  _customClass$customMo = customClass.customMobileDropBox,
@@ -107,10 +106,10 @@ var ResponsiveDropBox = /*#__PURE__*/function (_Component) {
107
106
  responsiveId: "Helmet"
108
107
  }, function (_ref2) {
109
108
  var tabletMode = _ref2.tabletMode;
110
- return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
111
- alignBox: alignBox,
112
- isCover: false,
113
- className: "".concat(tabletMode ? _ResponsiveDropBoxModule["default"].dropBoxContainer : '', " ").concat(tabletMode && isResponsivePadding ? _ResponsiveDropBoxModule["default"].boxPadding : '', " ").concat(customResponsiveContainer)
109
+ return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
110
+ flexible: true,
111
+ shrink: true,
112
+ className: "".concat(tabletMode ? _ResponsiveDropBoxModule["default"].dropBoxContainer : '', " ").concat(tabletMode && isResponsivePadding ? _ResponsiveDropBoxModule["default"].boxPadding : '')
114
113
  }, children);
115
114
  }));
116
115
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-temp-254",
3
+ "version": "1.0.0-temp-253.1",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -22,7 +22,7 @@
22
22
  "lintAllFix": "npm run lintAll --eslint:fix=true",
23
23
  "lint": "npx eslint ./src",
24
24
  "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
25
- "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es ../dot/src ../internal/desk-components/src",
25
+ "dubCheck": "npx z-node-plugins dub:check node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es ../dot/src ../internal/desk-components/src",
26
26
  "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components",
27
27
  "common_package_build": "cd ../common && npm run build && cd ../components",
28
28
  "build:lib": "cbt build:lib src,assets lib,assets",
@@ -33,7 +33,7 @@
33
33
  "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
34
34
  "coverage": "react-cli coverage",
35
35
  "prepare": "npm run init && npm run css:build ",
36
- "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
36
+ "prepublishOnly": "node ../prePublish.js && npm run css:review",
37
37
  "postpublish": "node ../postPublish.js",
38
38
  "report": "react-cli publish:report",
39
39
  "test": "react-cli test",
@@ -45,22 +45,22 @@
45
45
  "download": "npm run download_only && cd ../ && npm run download",
46
46
  "download_only": "react-cli clean ./node_modules ./package-lock.json && npm install --legacy-peer-deps",
47
47
  "expublish": "node ../publish.js -- exp",
48
- "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
48
+ "css:lineheight:validate": "npx z-node-plugins lineheight:errorcheck ./src/",
49
49
  "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
50
50
  "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
51
51
  "variable:check": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
52
52
  "css:review": " npm run dubCheck && npm run css:lineheight:validate && npm run theme:validate ",
53
- "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli ./.cli/themeValidate/stringContains.js",
54
- "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli ./.cli/themeValidate/stringContains.js",
55
- "theme:removeignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation removeignore ./src ./.cli",
53
+ "theme:validate": "npx z-node-plugins theme:validate ./src ./.cli ./.cli/themeValidate/stringContains.js",
54
+ "theme:addignore": "npx z-node-plugins theme:addignore ./src ./.cli ./.cli/themeValidate/stringContains.js",
55
+ "theme:removeignore": "npx z-node-plugins theme:removeignore ./src ./.cli",
56
56
  "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json ",
57
- "css:layer_config_generate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/scan_css_generate_json.js ./src ./assets css_layer_config.json",
58
- "css:layer_wrap_es": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets --skip-existing-layer",
59
- "css:layer_wrap_lib": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./lib ./assets css_layer_config.json --rewrite=src=lib --rewrite=assets=assets --skip-existing-layer",
60
- "css:layer_generate_order": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/generate_layer_order.js css_layer_config.json ./src/components_layer.module.css",
61
- "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js css_layer_config.json ./src/ ./assets",
57
+ "css:layer_config_generate": "npx z-node-plugins css:scan ./src ./assets css_layer_config.json",
58
+ "css:layer_wrap_es": "npx z-node-plugins css:layer_wrap ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets --skip-existing-layer",
59
+ "css:layer_wrap_lib": "npx z-node-plugins css:layer_wrap ./lib ./assets css_layer_config.json --rewrite=src=lib --rewrite=assets=assets --skip-existing-layer",
60
+ "css:layer_generate_order": "npx z-node-plugins css:layer_order css_layer_config.json ./src/components_layer.module.css",
61
+ "css:layer_config_validate": "npx z-node-plugins css:layer_validate css_layer_config.json ./src/ ./assets",
62
62
  "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build",
63
- "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets",
63
+ "css:layer_remove": "npx z-node-plugins css:layer_remove ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets",
64
64
  "css:audit": "npx css-audit --common-css=common/common.module.css --dir src --port 8085 --report ",
65
65
  "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
66
66
  "publish": "node ../publish.js",
@@ -73,25 +73,26 @@
73
73
  "@testing-library/react-hooks": "^7.0.2",
74
74
  "@testing-library/user-event": "^13.0.10",
75
75
  "@zohodesk-private/css-audit-tool": "0.0.2",
76
- "@zohodesk-private/color-variable-preprocessor": "1.0.0-temp-20",
76
+ "@zohodesk-private/color-variable-preprocessor": "1.3.1",
77
77
  "@zohodesk-private/css-variable-migrator": "1.0.9",
78
- "@zohodesk-private/node-plugins": "1.1.13",
78
+ "@zohodesk-private/node-plugins": "1.1.14",
79
79
  "@zohodesk-private/react-prop-validator": "1.2.3",
80
80
  "@zohodesk/a11y": "2.3.9",
81
81
  "@zohodesk/docstool": "1.0.0-alpha-2",
82
82
  "@zohodesk/dotkit": "1.0.9",
83
83
  "@zohodesk/hooks": "2.0.8",
84
- "@zohodesk/icons": "1.3.0",
84
+ "@zohodesk/icons": "1.3.1",
85
85
  "@zohodesk/layout": "3.1.0",
86
86
  "@zohodesk/svg": "1.3.5",
87
87
  "@zohodesk/utils": "1.3.16",
88
- "@zohodesk/variables": "1.1.1-exp.6",
88
+ "@zohodesk/variables": "1.3.1",
89
89
  "@zohodesk/virtualizer": "1.0.13",
90
90
  "react-sortable-hoc": "^0.8.3",
91
91
  "velocity-react": "1.4.3",
92
92
  "@zohodesk/react-cli": "1.1.27",
93
93
  "@zohodesk/client_build_tool": "0.0.20",
94
- "color": "4.2.3"
94
+ "color": "4.2.3",
95
+ "@dot-system/css-utility": "0.1.1"
95
96
  },
96
97
  "dependencies": {
97
98
  "hoist-non-react-statics": "3.0.1",
@@ -100,8 +101,8 @@
100
101
  "selectn": "1.1.2"
101
102
  },
102
103
  "peerDependencies": {
103
- "@zohodesk/icons": "1.3.0",
104
- "@zohodesk/variables": "1.1.1-exp.6",
104
+ "@zohodesk/icons": "1.3.1",
105
+ "@zohodesk/variables": "1.3.1",
105
106
  "@zohodesk/svg": "1.3.5",
106
107
  "@zohodesk/virtualizer": "1.0.13",
107
108
  "velocity-react": "1.4.3",
@@ -111,6 +112,7 @@
111
112
  "@zohodesk/a11y": "2.3.9",
112
113
  "@zohodesk/layout": "3.1.0",
113
114
  "@zohodesk/dotkit": "1.0.9",
114
- "color": "4.2.3"
115
+ "color": "4.2.3",
116
+ "@dot-system/css-utility": "0.1.1"
115
117
  }
116
118
  }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='blue'], :global(.zd-blueDarkTheme) [data-theme="blue"]{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(213, 27.27%, calc(23.73% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(213, 85.45%, calc(43.14% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(215, 28.16%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(212, 100.00%, calc(63.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='green']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(191, 21.65%, calc(19.02% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(170, 22.94%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='orange']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(252, 4.85%, calc(20.20% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(340, 5.56%, calc(21.18% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(26, 100.00%, calc(56.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='red']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(258, 12.62%, calc(20.20% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(284, 10.48%, calc(20.59% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='yellow']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(218, 7.69%, calc(20.39% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(220, 2.75%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='blue'], :global(.zd-blueLightTheme) [data-theme="blue"]{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(216, 38.46%, calc(97.45% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(212, 86.67%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(231, 22.22%, calc(82.35% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(216, 38.46%, calc(97.45% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(213, 100.00%, calc(36.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(213, 84.62%, calc(94.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(212, 91.84%, calc(48.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(213, 100.00%, calc(36.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='green']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(165, 28.57%, calc(97.25% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(143, 44.44%, calc(96.47% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(135, 7.41%, calc(78.82% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(165, 28.57%, calc(97.25% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(135, 13.33%, calc(94.12% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(132, 43.33%, calc(88.24% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(133, 63.29%, calc(40.59% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(135, 7.41%, calc(78.82% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(134, 78.63%, calc(25.69% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='orange']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(20, 20.00%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(26, 77.78%, calc(96.47% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(27, 10.68%, calc(79.80% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(20, 20.00%, calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(30, 100.00%, calc(34.90% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(24, 27.78%, calc(92.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(28, 80.39%, calc(90.00% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(28, 81.75%, calc(49.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(27, 10.68%, calc(79.80% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(30, 100.00%, calc(34.90% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='red']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(340, 20.00%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(0, 71.43%, calc(97.25% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(343, 4.76%, calc(71.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(340, 20.00%, calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(1, 75.38%, calc(38.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 12.20%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(0, 70.21%, calc(90.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(0, 71.91%, calc(53.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(343, 4.76%, calc(71.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(1, 75.38%, calc(38.24% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='yellow']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(60, 12.50%, calc(96.86% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(45, 28.17%, calc(72.16% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(60, 12.50%, calc(96.86% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(46, 81.07%, calc(52.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(48, 100.00%, calc(35.49% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(60, 21.74%, calc(90.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(46, 80.82%, calc(85.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(46, 81.07%, calc(52.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(46, 81.07%, calc(52.35% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(45, 28.17%, calc(72.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(48, 100.00%, calc(35.49% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='blue'], :global(.zd-bluePureDarkTheme) [data-theme="blue"]{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(213, 85.45%, calc(43.14% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(215, 28.16%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(212, 100.00%, calc(63.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='green']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(170, 22.94%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='orange']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(340, 5.56%, calc(21.18% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(26, 100.00%, calc(56.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='red']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(284, 10.48%, calc(20.59% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='yellow']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(220, 2.75%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }