@zohodesk/components 1.0.0-temp-239 → 1.0.0-temp-241

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 (63) hide show
  1. package/README.md +3 -1
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +163 -163
  3. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +8 -8
  4. package/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css +465 -465
  5. package/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css +31 -31
  6. package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +3 -3
  7. package/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css +465 -465
  8. package/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css +31 -31
  9. package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +3 -3
  10. package/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css +465 -465
  11. package/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css +31 -31
  12. package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +3 -3
  13. package/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css +465 -465
  14. package/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css +31 -31
  15. package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +3 -3
  16. package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css +465 -465
  17. package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css +31 -31
  18. package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +3 -3
  19. package/assets/Appearance/light/mode/Component_LightMode.module.css +160 -160
  20. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +8 -8
  21. package/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css +465 -465
  22. package/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css +31 -31
  23. package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +3 -3
  24. package/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css +465 -465
  25. package/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css +31 -31
  26. package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +3 -3
  27. package/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css +465 -465
  28. package/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css +31 -31
  29. package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +3 -3
  30. package/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css +465 -465
  31. package/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css +31 -31
  32. package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +3 -3
  33. package/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css +465 -465
  34. package/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css +31 -31
  35. package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +3 -3
  36. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +165 -165
  37. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +8 -8
  38. package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css +465 -465
  39. package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css +31 -31
  40. package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +3 -3
  41. package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css +465 -465
  42. package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css +31 -31
  43. package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +3 -3
  44. package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css +465 -465
  45. package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css +31 -31
  46. package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +3 -3
  47. package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css +465 -465
  48. package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css +31 -31
  49. package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +3 -3
  50. package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css +465 -465
  51. package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css +31 -31
  52. package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +3 -3
  53. package/es/MultiSelect/MultiSelect.js +47 -22
  54. package/es/Popup/Popup.js +27 -50
  55. package/es/Select/Select.js +43 -21
  56. package/es/Select/props/defaultProps.js +1 -0
  57. package/es/Select/props/propTypes.js +1 -0
  58. package/lib/MultiSelect/MultiSelect.js +44 -22
  59. package/lib/Popup/Popup.js +50 -77
  60. package/lib/Select/Select.js +38 -19
  61. package/lib/Select/props/defaultProps.js +1 -0
  62. package/lib/Select/props/propTypes.js +1 -0
  63. package/package.json +3 -3
package/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css CHANGED
@@ -1,36 +1,36 @@
1
1
  [data-mode='light'][data-theme='blue'], :global(.zd-blueLightTheme) [data-theme="blue"] {
2
2
  /* CTA variables */
3
- --zdt_cta_primary_text: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdt_cta_primary_hover_text: hsla(213, 100.00%, calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdt_cta_primary_bg: hsla(212, 91.84%, calc(48.04% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdt_cta_primary_hover_bg: hsla(213, 100.00%, calc(36.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
7
- --zdt_cta_primary_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
8
- --zdt_cta_primary_hover_border: hsla(213, 100.00%, calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
+ --zdt_cta_primary_text: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
+ --zdt_cta_primary_hover_text: hsla(213, calc(var(--zd-mc) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
+ --zdt_cta_primary_bg: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
6
+ --zdt_cta_primary_hover_bg: hsla(213, calc(var(--zd-mc) * 100.00%), calc(36.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
7
+ --zdt_cta_primary_border: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
8
+ --zdt_cta_primary_hover_border: hsla(213, calc(var(--zd-mc) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
9
  --zdt_cta_primary_box_shadow: rgba(10, 115, 235, 0.2);
10
10
  --zdt_cta_primary_hover_box_shadow: rgba(0, 83, 184, 0.25);
11
- --zdt_cta_primary_light_bg: hsla(212, 86.67%, calc(97.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
12
- --zdt_cta_primary_light_hover_bg: hsla(212, 80.95%, calc(95.88% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdt_cta_primary_light_border: hsla(208, 85.19%, calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
14
- --zdt_cta_secondary_bg: hsla(212, 91.84%, calc(48.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
15
- --zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
16
- --zdt_cta_secondary_border: hsla(213, 94.26%, calc(59.02% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
17
- --zdt_cta_secondary_light_border: hsla(213, 65.52%, calc(82.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
18
- --zdt_cta_secondary_light_bg: hsla(213, 65.52%, calc(82.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
19
- --zdt_cta_alpha_text: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_cta_alpha_hover_text: hsla(213, 100.00%, calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
21
- --zdt_cta_alpha_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
22
- --zdt_cta_alpha_hover_border: hsla(213, 100.00%, calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
23
- --zdt_cta_alpha_bg: hsla(213, 84.62%, calc(94.90% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
24
- --zdt_cta_beta_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
25
- --zdt_cta_grey_10_bg: hsla(216, 38.46%, calc(97.45% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
26
- --zdt_cta_grey_10_border: hsla(216, 38.46%, calc(97.45% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
27
- --zdt_cta_grey_15_bg: hsla(210, 33.33%, calc(94.12% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
28
- --zdt_cta_grey_15_border: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
29
- --zdt_cta_grey_20_bg: hsla(217, 37.14%, calc(93.14% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
30
- --zdt_cta_grey_35_bg: hsla(213, 27.27%, calc(87.06% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
31
- --zdt_cta_grey_35_text: hsla(213, 27.27%, calc(87.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
32
- --zdt_cta_grey_35_border: hsla(213, 27.27%, calc(87.06% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
33
- --zdt_cta_grey_40_bg: hsla(231, 22.22%, calc(82.35% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
34
- --zdt_cta_grey_40_text: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
35
- --zdt_cta_grey_40_border: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
11
+ --zdt_cta_primary_light_bg: hsla(212, calc(var(--zd-mc) * 86.67%), calc(97.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
12
+ --zdt_cta_primary_light_hover_bg: hsla(212, calc(var(--zd-mc) * 80.95%), calc(95.88% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
+ --zdt_cta_primary_light_border: hsla(208, calc(var(--zd-mc) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
14
+ --zdt_cta_secondary_bg: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
15
+ --zdt_cta_secondary_text: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
16
+ --zdt_cta_secondary_border: hsla(213, calc(var(--zd-mc) * 94.26%), calc(59.02% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
17
+ --zdt_cta_secondary_light_border: hsla(213, calc(var(--zd-mc) * 65.52%), calc(82.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
18
+ --zdt_cta_secondary_light_bg: hsla(213, calc(var(--zd-mc) * 65.52%), calc(82.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
19
+ --zdt_cta_alpha_text: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_cta_alpha_hover_text: hsla(213, calc(var(--zd-mc) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
21
+ --zdt_cta_alpha_border: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
22
+ --zdt_cta_alpha_hover_border: hsla(213, calc(var(--zd-mc) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
23
+ --zdt_cta_alpha_bg: hsla(213, calc(var(--zd-mc) * 84.62%), calc(94.90% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
24
+ --zdt_cta_beta_border: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
25
+ --zdt_cta_grey_10_bg: hsla(216, calc(var(--zd-mc) * 38.46%), calc(97.45% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
26
+ --zdt_cta_grey_10_border: hsla(216, calc(var(--zd-mc) * 38.46%), calc(97.45% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
27
+ --zdt_cta_grey_15_bg: hsla(210, calc(var(--zd-mc) * 33.33%), calc(94.12% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
28
+ --zdt_cta_grey_15_border: hsla(210, calc(var(--zd-mc) * 33.33%), calc(94.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
29
+ --zdt_cta_grey_20_bg: hsla(217, calc(var(--zd-mc) * 37.14%), calc(93.14% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
30
+ --zdt_cta_grey_35_bg: hsla(213, calc(var(--zd-mc) * 27.27%), calc(87.06% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
31
+ --zdt_cta_grey_35_text: hsla(213, calc(var(--zd-mc) * 27.27%), calc(87.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
32
+ --zdt_cta_grey_35_border: hsla(213, calc(var(--zd-mc) * 27.27%), calc(87.06% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
33
+ --zdt_cta_grey_40_bg: hsla(231, calc(var(--zd-mc) * 22.22%), calc(82.35% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
34
+ --zdt_cta_grey_40_text: hsla(231, calc(var(--zd-mc) * 22.22%), calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
35
+ --zdt_cta_grey_40_border: hsla(231, calc(var(--zd-mc) * 22.22%), calc(82.35% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
36
36
  }
package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css CHANGED
@@ -44,7 +44,7 @@
44
44
  --zdt_a11y_focusScope_focus_border: rgb(10,115,235);
45
45
 
46
46
  /* button */
47
- --zdt_button_primary_strike: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
48
- --zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
49
- --zdt_button_secondaryFilled_strike: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
47
+ --zdt_button_primary_strike: hsla(212, calc(var(--zd-mc) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
48
+ --zdt_button_primaryFilled_strike: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
49
+ --zdt_button_secondaryFilled_strike: hsla(231, calc(var(--zd-mc) * 22.22%), calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
50
50
  }