@zohodesk/dot 1.0.0-temp-187.21 → 1.0.0-temp-223.5

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 +6 -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/form/fields/Fields.module.css +1 -4
  22. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +6 -10
  23. package/es/form/fields/TagsMultiSelect/props/propTypes.js +1 -2
  24. package/es/form/fields/TextEditor/TextEditor.js +6 -2
  25. package/es/form/fields/TextEditor/props/defaultProps.js +2 -1
  26. package/es/form/fields/TextEditor/props/propTypes.js +2 -1
  27. package/es/list/DepartmentDropDown/DepartmentDropDown.js +2 -6
  28. package/es/list/DepartmentDropDown/props/defaultProps.js +1 -2
  29. package/es/list/DepartmentDropDown/props/propTypes.js +0 -3
  30. package/es/list/status/StatusDropdown/StatusDropdown.js +2 -7
  31. package/es/list/status/StatusDropdown/props/defaultProps.js +1 -2
  32. package/es/list/status/StatusDropdown/props/propTypes.js +1 -4
  33. package/es/list/status/StatusListItem/StatusListItem.js +2 -4
  34. package/es/list/status/StatusListItem/StatusListItem.module.css +17 -40
  35. package/lib/common/dot_boxShadow.module.css +1 -2
  36. package/lib/form/fields/Fields.module.css +1 -4
  37. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +7 -12
  38. package/lib/form/fields/TagsMultiSelect/props/propTypes.js +1 -2
  39. package/lib/form/fields/TextEditor/TextEditor.js +5 -2
  40. package/lib/form/fields/TextEditor/props/defaultProps.js +2 -1
  41. package/lib/form/fields/TextEditor/props/propTypes.js +2 -1
  42. package/lib/list/DepartmentDropDown/DepartmentDropDown.js +3 -8
  43. package/lib/list/DepartmentDropDown/props/defaultProps.js +1 -2
  44. package/lib/list/DepartmentDropDown/props/propTypes.js +0 -2
  45. package/lib/list/status/StatusDropdown/StatusDropdown.js +2 -6
  46. package/lib/list/status/StatusDropdown/props/defaultProps.js +1 -2
  47. package/lib/list/status/StatusDropdown/props/propTypes.js +1 -3
  48. package/lib/list/status/StatusListItem/StatusListItem.js +2 -4
  49. package/lib/list/status/StatusListItem/StatusListItem.module.css +17 -40
  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/form/fields/Fields.module.css CHANGED
@@ -226,10 +226,7 @@ position: relative;
226
226
  [dir=rtl] .rightPlaceholder{
227
227
  left:var(--zd_size15)
228
228
  }
229
+
229
230
  .phoneField{
230
231
  composes: ltr-zone from '~@zohodesk/components/es/common/common.module.css';
231
- }
232
-
233
- .lineClampPickListItem{
234
- --line-clamp: var(--picklist-field-line-clamp,3);
235
232
  }
package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js CHANGED
@@ -160,14 +160,12 @@ export default class TagsMultiSelect extends React.Component {
160
160
  let {
161
161
  tagCustomClass = '',
162
162
  listItemClass = '',
163
- textBoxIconWrapperClass = '',
164
- dropBoxClass = ''
163
+ textBoxIconWrapperClass = ''
165
164
  } = customClass;
166
165
  const {
167
166
  TextBoxIconProps = {},
168
167
  TagWrapperProps = {},
169
- TagProps = {},
170
- ListItemProps = {}
168
+ TagProps = {}
171
169
  } = customProps;
172
170
  const isEditable = !isReadOnly;
173
171
  return /*#__PURE__*/React.createElement("div", {
@@ -256,8 +254,7 @@ export default class TagsMultiSelect extends React.Component {
256
254
  boxPosition: boxPosition,
257
255
  isPadding: false,
258
256
  customClass: {
259
- customDropBoxWrap: style.dropdown,
260
- customDropBox: dropBoxClass
257
+ customDropBoxWrap: style.dropdown
261
258
  },
262
259
  dataId: `${dataId}_dropbox`,
263
260
  isResponsivePadding: true,
@@ -289,7 +286,7 @@ export default class TagsMultiSelect extends React.Component {
289
286
  let {
290
287
  name,
291
288
  isNew,
292
- listProps
289
+ listItemProps
293
290
  } = item;
294
291
  return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
295
292
  key: index,
@@ -302,9 +299,8 @@ export default class TagsMultiSelect extends React.Component {
302
299
  highlight: selectSearchIndex === index,
303
300
  getRef: this.getSelectedItemRef,
304
301
  isDisabled: listDisabled,
305
- customProps: listProps,
306
- customClass: listItemClass,
307
- ...ListItemProps
302
+ customProps: listItemProps,
303
+ customClass: listItemClass
308
304
  }, isNew ? /*#__PURE__*/React.createElement(Container, {
309
305
  alignBox: "row",
310
306
  align: "vertical"
package/es/form/fields/TagsMultiSelect/props/propTypes.js CHANGED
@@ -52,8 +52,7 @@ export const propTypes = {
52
52
  customProps: PropTypes.shape({
53
53
  TextBoxIconProps: PropTypes.object,
54
54
  TagWrapperProps: PropTypes.object,
55
- TagProps: PropTypes.object,
56
- ListItemProps: PropTypes.object
55
+ TagProps: PropTypes.object
57
56
  }),
58
57
  isFocus: PropTypes.bool
59
58
  };
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
+ containerClass = ''
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 : ''} ${containerClass}`,
397
401
  dataId: dataId,
398
402
  "data-isEditor": true,
399
403
  dataSelectorId: dataSelectorId
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.string
53
54
  };
package/es/list/DepartmentDropDown/DepartmentDropDown.js CHANGED
@@ -48,19 +48,15 @@ class DepartmentDropDown extends Component {
48
48
  onSearch,
49
49
  needSearchFetching,
50
50
  searchStr,
51
- i18nKeys,
52
- customProps
51
+ i18nKeys
53
52
  } = this.props;
54
- const {
55
- ToggleDropDownProps = {}
56
- } = customProps;
57
53
  let {
58
54
  title = 'Move Department',
59
55
  searchEmptyText = 'No results found',
60
56
  searchErrorText = 'No results',
61
57
  placeholder = 'Search Department'
62
58
  } = i18nKeys;
63
- return /*#__PURE__*/React.createElement(ToggleDropDown, { ...ToggleDropDownProps,
59
+ return /*#__PURE__*/React.createElement(ToggleDropDown, {
64
60
  title: title,
65
61
  options: departmentList,
66
62
  value: /*#__PURE__*/React.createElement(DepartmentText, {
package/es/list/DepartmentDropDown/props/defaultProps.js CHANGED
@@ -3,6 +3,5 @@ export const defaultProps = {
3
3
  isPopupActive: true,
4
4
  isNextOptions: false,
5
5
  searchStr: '',
6
- i18nKeys: {},
7
- customProps: {}
6
+ i18nKeys: {}
8
7
  };
package/es/list/DepartmentDropDown/props/propTypes.js CHANGED
@@ -20,8 +20,5 @@ export const propTypes = {
20
20
  searchEmptyText: PropTypes.string,
21
21
  searchErrorText: PropTypes.string,
22
22
  placeholder: PropTypes.string
23
- }),
24
- customProps: PropTypes.shape({
25
- ToggleDropDownProps: PropTypes.object
26
23
  })
27
24
  };
package/es/list/status/StatusDropdown/StatusDropdown.js CHANGED
@@ -178,12 +178,8 @@ export class StatusDropdown extends React.Component {
178
178
  targetOffset,
179
179
  renderTargetElement,
180
180
  renderFooterElement,
181
- a11y = {},
182
- customClass
181
+ a11y = {}
183
182
  } = this.props;
184
- const {
185
- dropBoxClass = ''
186
- } = customClass;
187
183
  const {
188
184
  tabIndex = 0,
189
185
  ariaLabelledby,
@@ -251,8 +247,7 @@ export class StatusDropdown extends React.Component {
251
247
  isAnimate: true,
252
248
  getRef: getContainerRef,
253
249
  customClass: {
254
- customDropBoxWrap: style.dropBoxContainer,
255
- customDropBox: dropBoxClass
250
+ customDropBoxWrap: style.dropBoxContainer
256
251
  },
257
252
  needResponsive: needResponsive,
258
253
  isResponsivePadding: true,
package/es/list/status/StatusDropdown/props/defaultProps.js CHANGED
@@ -18,6 +18,5 @@ export const defaultProps = {
18
18
  needMultiLineText: false,
19
19
  isFetchingOptions: false,
20
20
  isAbsolutePositioningNeeded: true,
21
- isRestrictScroll: false,
22
- customClass: {}
21
+ isRestrictScroll: false
23
22
  };
package/es/list/status/StatusDropdown/props/propTypes.js CHANGED
@@ -56,8 +56,5 @@ export const propTypes = {
56
56
  positionsOffset: PropTypes.object,
57
57
  renderTargetElement: PropTypes.func,
58
58
  renderFooterElement: PropTypes.node,
59
- targetOffset: PropTypes.object,
60
- customClass: PropTypes.shape({
61
- dropBoxClass: PropTypes.string
62
- })
59
+ targetOffset: PropTypes.object
63
60
  };
package/es/list/status/StatusListItem/StatusListItem.js CHANGED
@@ -90,7 +90,7 @@ export default class StatusListItem extends React.Component {
90
90
  "aria-label": ariaLabel,
91
91
  "data-a11y-inset-focus": insetFocus,
92
92
  isCover: false,
93
- align: "vertical",
93
+ align: "baseline",
94
94
  alignBox: "row",
95
95
  className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
96
96
  dataId: String(value).replace("'", '_'),
@@ -102,8 +102,6 @@ export default class StatusListItem extends React.Component {
102
102
  tabindex: isDisabled ? '-1' : '0',
103
103
  ...options,
104
104
  ...a11y
105
- }, /*#__PURE__*/React.createElement(Box, {
106
- className: style.contentWrapper
107
105
  }, /*#__PURE__*/React.createElement(Box, {
108
106
  className: `${style.statusType} ${style[bulletColor]}`
109
107
  }), /*#__PURE__*/React.createElement(Box, {
@@ -122,7 +120,7 @@ export default class StatusListItem extends React.Component {
122
120
  }, /*#__PURE__*/React.createElement(Icon, {
123
121
  name: "ZD-ticknew",
124
122
  size: "8"
125
- })) : null));
123
+ })) : null);
126
124
  }
127
125
 
128
126
  }
package/es/list/status/StatusListItem/StatusListItem.module.css CHANGED
@@ -1,16 +1,9 @@
1
- .varClass {
2
- --statuslistitem_multiline_lineheight: 1.5385;
3
- --statuslistitem_font_size: var(--zd_font_size13);
4
- --statuslistitem_min_height: var(--zd_size35);
5
- }
6
-
7
1
  .list {
8
- composes: varClass;
9
2
  color: var(--zdt_statuslistitem_list_text);
10
- font-size: var(--statuslistitem_font_size);
3
+ font-size: var(--zd_font_size13) ;
11
4
  position: relative;
12
5
  list-style: none;
13
- min-height: var(--statuslistitem_min_height);
6
+ min-height: var(--zd_size35) ;
14
7
  cursor: pointer;
15
8
  }
16
9
  [dir=ltr] .withBorder {
@@ -29,7 +22,7 @@
29
22
  padding: var(--zd_size7) var(--zd_size20) ;
30
23
  }
31
24
  .large {
32
- --statuslistitem_min_height: var(--zd_size48);
25
+ height: var(--zd_size48) ;
33
26
  }
34
27
  [dir=ltr] .large {
35
28
  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -43,8 +36,9 @@
43
36
  .value {
44
37
  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
45
38
  }
46
- .multiLineValue {
47
- composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
39
+ .multiLineValue{
40
+ word-break: break-word;
41
+ composes: clamp from '~@zohodesk/components/es/common/common.module.css';
48
42
  }
49
43
  [dir=ltr] .withBorder.active {
50
44
  border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -94,41 +88,24 @@
94
88
  [dir=rtl] .active.withTick {
95
89
  padding-left: var(--zd_size39) ;
96
90
  }
97
- .contentWrapper {
98
- composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
99
- width: 100% ;
100
- }
101
91
  /* Status Type */
102
- .statusType{
103
- position: relative;
104
- composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
105
- align-self: flex-start;
106
- min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
107
- min-width: var(--zd_size20) ;
108
- }
109
- .statusType::after{
110
- content: '';
111
- --status_listitem_bullet_min_height: var(--zd_size8);
112
- --status_listitem_bullet_min_width: var(--zd_size8);
113
- height: var(--status_listitem_bullet_min_height);
114
- width: var(--status_listitem_bullet_min_width);
115
- /* css:theme-validation:ignore */
92
+ .statusType {
93
+ width: var(--zd_size8) ;
94
+ height: var(--zd_size8) ;
116
95
  border-radius: 50%;
117
- background-color: var(--zdt_statuslistitem_black_bg);
118
96
  }
119
- [dir=ltr] .statusType::after{
120
- margin-right: var(--zd_size12) ;
97
+ [dir=ltr] .statusType {
98
+ margin-right: var(--zd_size13) ;
121
99
  }
122
- [dir=rtl] .statusType::after{
123
- margin-left: var(--zd_size12) ;
100
+ [dir=rtl] .statusType {
101
+ margin-left: var(--zd_size13) ;
124
102
  }
125
-
126
- .black.statusType::after {
103
+ .black {
127
104
  background-color: var(--zdt_statuslistitem_black_bg);
128
105
  }
129
- .orange.statusType::after {
106
+ .orange {
130
107
  background-color: var(--zdt_statuslistitem_orange_bg);
131
108
  }
132
- .green.statusType::after {
109
+ .green {
133
110
  background-color: var(--zdt_statuslistitem_green_bg);
134
- }
111
+ }
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/form/fields/Fields.module.css CHANGED
@@ -226,10 +226,7 @@ position: relative;
226
226
  [dir=rtl] .rightPlaceholder{
227
227
  left:var(--zd_size15)
228
228
  }
229
+
229
230
  .phoneField{
230
231
  composes: ltr-zone from '~@zohodesk/components/es/common/common.module.css';
231
- }
232
-
233
- .lineClampPickListItem{
234
- --line-clamp: var(--picklist-field-line-clamp,3);
235
232
  }