@zohodesk/dot 1.8.5 → 1.9.0

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 (50) hide show
  1. package/README.md +12 -0
  2. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +315 -315
  3. package/assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css +15 -15
  4. package/assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css +15 -15
  5. package/assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css +15 -15
  6. package/assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css +15 -15
  7. package/assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css +15 -15
  8. package/assets/Appearance/light/mode/Dot_LightMode.module.css +307 -307
  9. package/assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css +15 -15
  10. package/assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css +15 -15
  11. package/assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css +15 -15
  12. package/assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css +15 -15
  13. package/assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css +15 -15
  14. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +317 -317
  15. package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css +15 -15
  16. package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css +15 -15
  17. package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css +15 -15
  18. package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css +15 -15
  19. package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css +15 -15
  20. package/es/common/dot_boxShadow.module.css +1 -2
  21. package/es/dropdown/ToggleDropDown/ToggleDropDown.js +6 -4
  22. package/es/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap +1 -1
  23. package/es/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap +1 -1
  24. package/es/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap +1 -1
  25. package/es/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap +1 -1
  26. package/es/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap +1 -1
  27. package/es/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap +1 -1
  28. package/es/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap +1 -1
  29. package/es/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap +1 -1
  30. package/es/form/fields/TextEditor/TextEditor.js +6 -2
  31. package/es/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap +1 -1
  32. package/es/form/fields/TextEditor/props/defaultProps.js +2 -1
  33. package/es/form/fields/TextEditor/props/propTypes.js +2 -1
  34. package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap +6 -6
  35. package/lib/common/dot_boxShadow.module.css +1 -2
  36. package/lib/dropdown/ToggleDropDown/ToggleDropDown.js +6 -4
  37. package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap +1 -1
  38. package/lib/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap +1 -1
  39. package/lib/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap +1 -1
  40. package/lib/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap +1 -1
  41. package/lib/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap +1 -1
  42. package/lib/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap +1 -1
  43. package/lib/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap +1 -1
  44. package/lib/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap +1 -1
  45. package/lib/form/fields/TextEditor/TextEditor.js +5 -2
  46. package/lib/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap +1 -1
  47. package/lib/form/fields/TextEditor/props/defaultProps.js +2 -1
  48. package/lib/form/fields/TextEditor/props/propTypes.js +2 -1
  49. package/lib/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap +6 -6
  50. package/package.json +7 -7
package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='blue'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(221, 100.00%, calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(221, calc(var(--zd-saturation, 1) * 100.00%), calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(10, 115, 235, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(220, calc(var(--zd-saturation, 1) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(220, calc(var(--zd-saturation, 1) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), 48.04%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(71,157,255);
25
+ --zdt_loader_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), 63.92%, 1);
26
26
  }
package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='green'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(39, 170, 67, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), 40.98%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(133, calc(var(--zd-saturation, 1) * 10.84%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(69,161,89);
25
+ --zdt_loader_bg: hsla(133, calc(var(--zd-saturation, 1) * 40.00%), 45.10%, 1);
26
26
  }
package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='orange'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(229, 119, 23, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), 49.41%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(26, calc(var(--zd-saturation, 1) * 19.51%), calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(255,128,31);
25
+ --zdt_loader_bg: hsla(26, calc(var(--zd-saturation, 1) * 100.00%), 56.08%, 1);
26
26
  }
package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='red'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(219, 33, 33, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), 49.41%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(0, calc(var(--zd-saturation, 1) * 13.25%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(233,79,79);
25
+ --zdt_loader_bg: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), 61.18%, 1);
26
26
  }
package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='yellow'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(218, 160, 11, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), 44.90%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(35, calc(var(--zd-saturation, 1) * 15.00%), calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(215,152,53);
25
+ --zdt_loader_bg: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
26
26
  }
package/es/common/dot_boxShadow.module.css CHANGED
@@ -37,8 +37,7 @@
37
37
  --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
38
38
 
39
39
  /* onboarding */
40
- --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
40
+ --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
41
41
  --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
42
42
  --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
43
-
44
43
  }
package/es/dropdown/ToggleDropDown/ToggleDropDown.js CHANGED
@@ -733,6 +733,7 @@ export class ToggleDropDown extends Component {
733
733
  iconSize,
734
734
  iconClass,
735
735
  title,
736
+ palette: _palette,
736
737
  disableTitle = '',
737
738
  isDisabled = false,
738
739
  secondaryValue
@@ -757,7 +758,7 @@ export class ToggleDropDown extends Component {
757
758
  ,
758
759
  getRef: this.itemRef,
759
760
  title: title ? title : item[keyName],
760
- palette: palette,
761
+ palette: _palette || palette,
761
762
  needMultiLineText: needMultiLineText,
762
763
  autoHover: true,
763
764
  a11y: {
@@ -783,7 +784,7 @@ export class ToggleDropDown extends Component {
783
784
  ,
784
785
  getRef: this.itemRef,
785
786
  title: title ? title : item[keyName],
786
- palette: palette,
787
+ palette: _palette || palette,
787
788
  needMultiLineText: needMultiLineText,
788
789
  autoHover: true,
789
790
  a11y: {
@@ -804,6 +805,7 @@ export class ToggleDropDown extends Component {
804
805
  iconSize,
805
806
  iconClass,
806
807
  title,
808
+ palette: _palette,
807
809
  needDivider,
808
810
  isDisabled = false,
809
811
  disableTitle = '',
@@ -837,7 +839,7 @@ export class ToggleDropDown extends Component {
837
839
  getRef: this.itemRef,
838
840
  title: title ? title : item[keyName],
839
841
  key: listIndex,
840
- palette: palette,
842
+ palette: _palette || palette,
841
843
  needMultiLineText: needMultiLineText,
842
844
  autoHover: true,
843
845
  a11y: {
@@ -863,7 +865,7 @@ export class ToggleDropDown extends Component {
863
865
  ,
864
866
  getRef: this.itemRef,
865
867
  title: title ? title : item[keyName],
866
- palette: palette,
868
+ palette: _palette || palette,
867
869
  needMultiLineText: needMultiLineText,
868
870
  autoHover: true,
869
871
  a11y: {
package/es/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap CHANGED
@@ -10,7 +10,7 @@ exports[`CurrencyField rendering the defult props 1`] = `
10
10
  class="fieldContainer "
11
11
  >
12
12
  <div
13
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
13
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
14
14
  data-selector-id="textBoxIcon"
15
15
  >
16
16
  <div
package/es/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap CHANGED
@@ -18,7 +18,7 @@ exports[`DateField rendering the defult props 1`] = `
18
18
  data-test-id="dateField(formatted_undefined)_widget"
19
19
  >
20
20
  <div
21
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder flex rowdir"
21
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder flex rowdir"
22
22
  data-selector-id="textBoxIcon"
23
23
  >
24
24
  <div
package/es/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap CHANGED
@@ -29,7 +29,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
29
29
  "
30
30
  />
31
31
  <div
32
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
32
+ class="varClass customContainer effect container custmInputWrapper flex rowdir"
33
33
  data-selector-id="textBoxIcon"
34
34
  >
35
35
  <div
package/es/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap CHANGED
@@ -22,7 +22,7 @@ exports[`PhoneField rendering the defult props 1`] = `
22
22
  class="fieldContainer "
23
23
  >
24
24
  <div
25
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
25
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
26
26
  data-selector-id="textBoxIcon"
27
27
  >
28
28
  <div
package/es/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap CHANGED
@@ -19,7 +19,7 @@ exports[`SelectField rendering the defult props 1`] = `
19
19
  data-test-id="selectComponent"
20
20
  >
21
21
  <div
22
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
22
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
23
23
  data-selector-id="textBoxIcon"
24
24
  >
25
25
  <div
package/es/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap CHANGED
@@ -25,7 +25,7 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
25
25
  class="custmSpan"
26
26
  />
27
27
  <div
28
- class="varClass customContainer effect container custmInp flex rowdir"
28
+ class="varClass customContainer effect container custmInp flex rowdir"
29
29
  data-selector-id="textBoxIcon"
30
30
  >
31
31
  <div
package/es/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap CHANGED
@@ -31,7 +31,7 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
31
31
  class="custmSpan"
32
32
  />
33
33
  <div
34
- class="varClass customContainer effect container custmInp flex rowdir"
34
+ class="varClass customContainer effect container custmInp flex rowdir"
35
35
  data-selector-id="textBoxIcon"
36
36
  >
37
37
  <div
package/es/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap CHANGED
@@ -10,7 +10,7 @@ exports[`TextBoxField rendering the defult props 1`] = `
10
10
  class="fieldContainer "
11
11
  >
12
12
  <div
13
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
13
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
14
14
  data-selector-id="textBoxIcon"
15
15
  >
16
16
  <div
package/es/form/fields/TextEditor/TextEditor.js CHANGED
@@ -384,8 +384,12 @@ export default class TextEditor extends Component {
384
384
  isNightMode,
385
385
  isReadOnly,
386
386
  dataSelectorId,
387
- isDisabled
387
+ isDisabled,
388
+ customClass
388
389
  } = this.props;
390
+ const {
391
+ wrapper: wrapperClass = ''
392
+ } = customClass;
389
393
  let {
390
394
  isEditorLoad,
391
395
  isEditorShow
@@ -393,7 +397,7 @@ export default class TextEditor extends Component {
393
397
  let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
394
398
  return /*#__PURE__*/React.createElement(Container, {
395
399
  className: `${styles.textEditor} ${styles[type]} ${styles[border]}
396
- ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''}`,
400
+ ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''} ${wrapperClass}`,
397
401
  dataId: dataId,
398
402
  "data-isEditor": true,
399
403
  dataSelectorId: dataSelectorId
package/es/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap CHANGED
@@ -4,7 +4,7 @@ exports[`TextEditor rendering the defult props 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
6
  class="textEditor large borderTop
7
- light editorHide flex cover coldir"
7
+ light editorHide flex cover coldir"
8
8
  data-id="containerComponent"
9
9
  data-iseditor="true"
10
10
  data-selector-id="textEditor"
package/es/form/fields/TextEditor/props/defaultProps.js CHANGED
@@ -12,5 +12,6 @@ export const defaultProps = {
12
12
  dataSelectorId: 'textEditor',
13
13
  customCSS: '',
14
14
  isDisabled: false,
15
- inlineImageProps: {}
15
+ inlineImageProps: {},
16
+ customClass: {}
16
17
  };
package/es/form/fields/TextEditor/props/propTypes.js CHANGED
@@ -49,5 +49,6 @@ export const propTypes = {
49
49
  allowedFileExtensions: PropTypes.array,
50
50
  fileNameMaxCharacters: PropTypes.number,
51
51
  fileSizeMaxBytes: PropTypes.number
52
- })
52
+ }),
53
+ customClass: PropTypes.object
53
54
  };
package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap CHANGED
@@ -18,7 +18,7 @@ exports[`Search rendering the customized style search 1`] = `
18
18
  data-test-id="boxComponent"
19
19
  >
20
20
  <div
21
- class="varClass customContainer effect container flex rowdir"
21
+ class="varClass customContainer effect container flex rowdir"
22
22
  data-selector-id="textBoxIcon"
23
23
  >
24
24
  <div
@@ -75,7 +75,7 @@ exports[`Search rendering the defult props 1`] = `
75
75
  data-test-id="boxComponent"
76
76
  >
77
77
  <div
78
- class="varClass customContainer effect container flex rowdir"
78
+ class="varClass customContainer effect container flex rowdir"
79
79
  data-selector-id="textBoxIcon"
80
80
  >
81
81
  <div
@@ -132,7 +132,7 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
132
132
  data-test-id="boxComponent"
133
133
  >
134
134
  <div
135
- class="varClass customContainer effect container flex rowdir"
135
+ class="varClass customContainer effect container flex rowdir"
136
136
  data-selector-id="textBoxIcon"
137
137
  >
138
138
  <div
@@ -192,7 +192,7 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
192
192
  data-test-id="boxComponent"
193
193
  >
194
194
  <div
195
- class="varClass customContainer effect container flex rowdir"
195
+ class="varClass customContainer effect container flex rowdir"
196
196
  data-selector-id="textBoxIcon"
197
197
  >
198
198
  <div
@@ -262,7 +262,7 @@ exports[`Search rendering the renderChildren props via function 1`] = `
262
262
  data-test-id="boxComponent"
263
263
  >
264
264
  <div
265
- class="varClass customContainer effect container flex rowdir"
265
+ class="varClass customContainer effect container flex rowdir"
266
266
  data-selector-id="textBoxIcon"
267
267
  >
268
268
  <div
@@ -321,7 +321,7 @@ exports[`Search rendering the search active 1`] = `
321
321
  data-test-id="boxComponent"
322
322
  >
323
323
  <div
324
- class="varClass customContainer effect active container flex rowdir"
324
+ class="varClass customContainer effect active container flex rowdir"
325
325
  data-selector-id="textBoxIcon"
326
326
  >
327
327
  <div
package/lib/common/dot_boxShadow.module.css CHANGED
@@ -37,8 +37,7 @@
37
37
  --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
38
38
 
39
39
  /* onboarding */
40
- --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
40
+ --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
41
41
  --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
42
42
  --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
43
-
44
43
  }
package/lib/dropdown/ToggleDropDown/ToggleDropDown.js CHANGED
@@ -797,6 +797,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
797
797
  iconSize = item.iconSize,
798
798
  iconClass = item.iconClass,
799
799
  title = item.title,
800
+ _palette = item.palette,
800
801
  _item$disableTitle = item.disableTitle,
801
802
  disableTitle = _item$disableTitle === void 0 ? '' : _item$disableTitle,
802
803
  _item$isDisabled = item.isDisabled,
@@ -822,7 +823,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
822
823
  ,
823
824
  getRef: _this5.itemRef,
824
825
  title: title ? title : item[keyName],
825
- palette: palette,
826
+ palette: _palette || palette,
826
827
  needMultiLineText: needMultiLineText,
827
828
  autoHover: true,
828
829
  a11y: {
@@ -847,7 +848,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
847
848
  ,
848
849
  getRef: _this5.itemRef,
849
850
  title: title ? title : item[keyName],
850
- palette: palette,
851
+ palette: _palette || palette,
851
852
  needMultiLineText: needMultiLineText,
852
853
  autoHover: true,
853
854
  a11y: {
@@ -866,6 +867,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
866
867
  iconSize = item.iconSize,
867
868
  iconClass = item.iconClass,
868
869
  title = item.title,
870
+ _palette = item.palette,
869
871
  needDivider = item.needDivider,
870
872
  _item$isDisabled2 = item.isDisabled,
871
873
  isDisabled = _item$isDisabled2 === void 0 ? false : _item$isDisabled2,
@@ -900,7 +902,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
900
902
  getRef: _this5.itemRef,
901
903
  title: title ? title : item[keyName],
902
904
  key: listIndex,
903
- palette: palette,
905
+ palette: _palette || palette,
904
906
  needMultiLineText: needMultiLineText,
905
907
  autoHover: true,
906
908
  a11y: {
@@ -925,7 +927,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
925
927
  ,
926
928
  getRef: _this5.itemRef,
927
929
  title: title ? title : item[keyName],
928
- palette: palette,
930
+ palette: _palette || palette,
929
931
  needMultiLineText: needMultiLineText,
930
932
  autoHover: true,
931
933
  a11y: {
package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap CHANGED
@@ -10,7 +10,7 @@ exports[`CurrencyField rendering the defult props 1`] = `
10
10
  class="fieldContainer "
11
11
  >
12
12
  <div
13
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
13
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
14
14
  data-selector-id="textBoxIcon"
15
15
  >
16
16
  <div
package/lib/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap CHANGED
@@ -18,7 +18,7 @@ exports[`DateField rendering the defult props 1`] = `
18
18
  data-test-id="dateField(formatted_undefined)_widget"
19
19
  >
20
20
  <div
21
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder flex rowdir"
21
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder flex rowdir"
22
22
  data-selector-id="textBoxIcon"
23
23
  >
24
24
  <div
package/lib/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap CHANGED
@@ -29,7 +29,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
29
29
  "
30
30
  />
31
31
  <div
32
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
32
+ class="varClass customContainer effect container custmInputWrapper flex rowdir"
33
33
  data-selector-id="textBoxIcon"
34
34
  >
35
35
  <div
package/lib/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap CHANGED
@@ -22,7 +22,7 @@ exports[`PhoneField rendering the defult props 1`] = `
22
22
  class="fieldContainer "
23
23
  >
24
24
  <div
25
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
25
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container flex rowdir"
26
26
  data-selector-id="textBoxIcon"
27
27
  >
28
28
  <div
package/lib/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap CHANGED
@@ -19,7 +19,7 @@ exports[`SelectField rendering the defult props 1`] = `
19
19
  data-test-id="selectComponent"
20
20
  >
21
21
  <div
22
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
22
+ class="varClass customContainer border_bottom effect borderColor_default hasBorder container input flex rowdir"
23
23
  data-selector-id="textBoxIcon"
24
24
  >
25
25
  <div
package/lib/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap CHANGED
@@ -25,7 +25,7 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
25
25
  class="custmSpan"
26
26
  />
27
27
  <div
28
- class="varClass customContainer effect container custmInp flex rowdir"
28
+ class="varClass customContainer effect container custmInp flex rowdir"
29
29
  data-selector-id="textBoxIcon"
30
30
  >
31
31
  <div
package/lib/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap CHANGED
@@ -31,7 +31,7 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
31
31
  class="custmSpan"
32
32
  />
33
33
  <div
34
- class="varClass customContainer effect container custmInp flex rowdir"
34
+ class="varClass customContainer effect container custmInp flex rowdir"
35
35
  data-selector-id="textBoxIcon"
36
36
  >
37
37
  <div