@zohodesk/dot 1.0.0-temp-219 → 1.0.0-temp-220

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 (58) hide show
  1. package/README.md +3 -9
  2. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +6 -6
  3. package/assets/Appearance/light/mode/Dot_LightMode.module.css +12 -12
  4. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +4 -4
  5. package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_Dark_Dot.js +0 -1
  6. package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_Light_Dot.js +0 -1
  7. package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_PureDark_Dot.js +0 -1
  8. package/es/DotProvider/libraryChunks/themes/dot/green/Green_Dark_Dot.js +0 -1
  9. package/es/DotProvider/libraryChunks/themes/dot/green/Green_Light_Dot.js +0 -1
  10. package/es/DotProvider/libraryChunks/themes/dot/green/Green_PureDark_Dot.js +0 -1
  11. package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Dark_Dot.js +0 -1
  12. package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Light_Dot.js +0 -1
  13. package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_PureDark_Dot.js +0 -1
  14. package/es/DotProvider/libraryChunks/themes/dot/red/Red_Dark_Dot.js +0 -1
  15. package/es/DotProvider/libraryChunks/themes/dot/red/Red_Light_Dot.js +0 -1
  16. package/es/DotProvider/libraryChunks/themes/dot/red/Red_PureDark_Dot.js +0 -1
  17. package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Dark_Dot.js +0 -1
  18. package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Light_Dot.js +0 -1
  19. package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot.js +0 -1
  20. package/es/version2/GlobalNotification/GlobalNotification.js +46 -7
  21. package/es/version2/GlobalNotification/__tests__/GlobalNotification.spec.js +9 -0
  22. package/es/version2/GlobalNotification/props/propTypes.js +2 -1
  23. package/es/version2/GlobalNotification/utils/constants.js +6 -0
  24. package/lib/DotProvider/libraryChunks/themes/dot/blue/Blue_Dark_Dot.js +0 -2
  25. package/lib/DotProvider/libraryChunks/themes/dot/blue/Blue_Light_Dot.js +0 -2
  26. package/lib/DotProvider/libraryChunks/themes/dot/blue/Blue_PureDark_Dot.js +0 -2
  27. package/lib/DotProvider/libraryChunks/themes/dot/green/Green_Dark_Dot.js +0 -2
  28. package/lib/DotProvider/libraryChunks/themes/dot/green/Green_Light_Dot.js +0 -2
  29. package/lib/DotProvider/libraryChunks/themes/dot/green/Green_PureDark_Dot.js +0 -2
  30. package/lib/DotProvider/libraryChunks/themes/dot/orange/Orange_Dark_Dot.js +0 -2
  31. package/lib/DotProvider/libraryChunks/themes/dot/orange/Orange_Light_Dot.js +0 -2
  32. package/lib/DotProvider/libraryChunks/themes/dot/orange/Orange_PureDark_Dot.js +0 -2
  33. package/lib/DotProvider/libraryChunks/themes/dot/red/Red_Dark_Dot.js +0 -2
  34. package/lib/DotProvider/libraryChunks/themes/dot/red/Red_Light_Dot.js +0 -2
  35. package/lib/DotProvider/libraryChunks/themes/dot/red/Red_PureDark_Dot.js +0 -2
  36. package/lib/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Dark_Dot.js +0 -2
  37. package/lib/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Light_Dot.js +0 -2
  38. package/lib/DotProvider/libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot.js +0 -2
  39. package/lib/version2/GlobalNotification/GlobalNotification.js +68 -18
  40. package/lib/version2/GlobalNotification/__tests__/GlobalNotification.spec.js +10 -0
  41. package/lib/version2/GlobalNotification/props/propTypes.js +2 -1
  42. package/lib/version2/GlobalNotification/utils/constants.js +13 -0
  43. package/package.json +6 -6
  44. package/assets/Appearance/dark/themes/blue/blue_DotCTA_DarkModifyCategory.module.css +0 -14
  45. package/assets/Appearance/dark/themes/green/green_DotCTA_DarkModifyCategory.module.css +0 -14
  46. package/assets/Appearance/dark/themes/orange/orange_DotCTA_DarkModifyCategory.module.css +0 -14
  47. package/assets/Appearance/dark/themes/red/red_DotCTA_DarkModifyCategory.module.css +0 -14
  48. package/assets/Appearance/dark/themes/yellow/yellow_DotCTA_DarkModifyCategory.module.css +0 -14
  49. package/assets/Appearance/light/themes/blue/blue_DotCTA_LightModifyCategory.module.css +0 -14
  50. package/assets/Appearance/light/themes/green/green_DotCTA_LightModifyCategory.module.css +0 -14
  51. package/assets/Appearance/light/themes/orange/orange_DotCTA_LightModifyCategory.module.css +0 -14
  52. package/assets/Appearance/light/themes/red/red_DotCTA_LightModifyCategory.module.css +0 -14
  53. package/assets/Appearance/light/themes/yellow/yellow_DotCTA_LightModifyCategory.module.css +0 -14
  54. package/assets/Appearance/pureDark/themes/blue/blue_DotCTA_PureDarkModifyCategory.module.css +0 -14
  55. package/assets/Appearance/pureDark/themes/green/green_DotCTA_PureDarkModifyCategory.module.css +0 -14
  56. package/assets/Appearance/pureDark/themes/orange/orange_DotCTA_PureDarkModifyCategory.module.css +0 -14
  57. package/assets/Appearance/pureDark/themes/red/red_DotCTA_PureDarkModifyCategory.module.css +0 -14
  58. package/assets/Appearance/pureDark/themes/yellow/yellow_DotCTA_PureDarkModifyCategory.module.css +0 -14
package/README.md CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  In this Library, we Provide Some Basic Components to Build Your Application
4
4
 
5
- # 1.7.x
5
+ # 1.7.27
6
6
 
7
- - Updated `@zohodesk-private/color-variable-preprocessor` package version - CTA category overridden variables are now generated only for the necessary CTA variables using the `buildOverriddenCTACategories` function.
8
- - Imports newly generated Dot entry theme-related files within the specific chunk.
7
+ - **GlobalNotification**
8
+ - `onStatusChange` prop added.
9
9
 
10
10
  # 1.7.26
11
11
 
@@ -41,12 +41,6 @@ In this Library, we Provide Some Basic Components to Build Your Application
41
41
  - lib imports migrated to es
42
42
 
43
43
 
44
- # 1.7.x
45
-
46
- - Necessary variables are generated only for overridden contrast categories, handled through a Node.js preprocess script.
47
- - **DotProvider**
48
- - Imports newly generated Dot entry theme-related files within the specific chunk.
49
-
50
44
  # 1.7.19
51
45
 
52
46
  - **AttachmentViewer**
@@ -27,7 +27,7 @@
27
27
 
28
28
  /* attachment */
29
29
  --zdt_attachment_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
30
- --zdt_attachment_default_border: var(--zdt_cta_grey_40_border);
30
+ --zdt_attachment_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
31
31
  --zdt_attachment_default_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
32
32
  --zdt_attachment_default_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
33
33
  --zdt_attachment_download_bg: var(--zdt_cta_grey_10_bg);
@@ -67,7 +67,7 @@
67
67
  --zdt_avatarIcon_grey_icon: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
68
68
  --zdt_avatarIcon_success_icon: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
69
69
  --zdt_avatarIcon_smoke_icon: hsla(0, 0.00%, calc(66.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
70
- --zdt_avatarIcon_default_border: var(--zdt_cta_grey_40_border);
70
+ --zdt_avatarIcon_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
71
71
  --zdt_avatarIcon_default_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
72
72
  --zdt_avatarIcon_primary_border: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
73
73
  --zdt_avatarIcon_primary_hover_border: hsla(213, 85.45%, calc(43.14% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -116,7 +116,7 @@
116
116
  --zdt_drawer_default_box_shadow: rgba(0, 0, 0, 0.4);
117
117
  --zdt_drawer_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
118
118
  --zdt_drawer_header_bg: var(--zdtm_cta_grey_10_bg_default_inverse_low);
119
- --zdt_drawer_header_border: var(--zdt_cta_grey_35_border);
119
+ --zdt_drawer_header_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
120
120
  --zdt_drawer_title_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
121
121
 
122
122
  /* toggle dropdown */
@@ -253,7 +253,7 @@
253
253
  --zdt_secondaryText_orage_text: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
254
254
  --zdt_secondaryText_green_text: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
255
255
  --zdt_secondaryText_red_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
256
- --zdt_secondaryText_blue_text: var(--zdt_cta_primary_text);
256
+ --zdt_secondaryText_blue_text: var(--zdtm_cta_primary_text_default_inverse_low);
257
257
  --zdt_secondaryText_blue_hover_text: var(--zdt_cta_primary_hover_text);
258
258
  --zdt_secondaryText_black_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
259
259
  --zdt_secondaryText_secondaryText_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -289,7 +289,7 @@
289
289
  /* lookup header common */
290
290
  --zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
291
291
  --zdt_lookupheader_white_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
292
- --zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
292
+ --zdt_lookupheader_default_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
293
293
  --zdt_lookupheader_white_border: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
294
294
  --zdt_lookupheader_para_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
295
295
  --zdt_lookupheader_input_border: hsla(0, 0.00%, calc(89.80% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -535,7 +535,7 @@
535
535
  /* attachment viewer */
536
536
  --zdt_attachmentviewer_title_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
537
537
  --zdt_attachmentviewer_button_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
538
- --zdt_attachmentviewer_hover_border: var(--zdt_cta_grey_40_border);
538
+ --zdt_attachmentviewer_hover_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
539
539
  --zdt_attachmentviewer_selected_border: var(--zdt_cta_primary_border);
540
540
  --zdt_attachmentviewer_selected_after_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
541
541
  --zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
@@ -27,7 +27,7 @@
27
27
 
28
28
  /* attachment */
29
29
  --zdt_attachment_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
30
- --zdt_attachment_default_border: var(--zdt_cta_grey_40_border);
30
+ --zdt_attachment_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
31
31
  --zdt_attachment_default_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
32
32
  --zdt_attachment_default_hover_border: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
33
33
  --zdt_attachment_download_bg: var(--zdt_cta_grey_10_bg);
@@ -67,7 +67,7 @@
67
67
  --zdt_avatarIcon_grey_icon: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
68
68
  --zdt_avatarIcon_success_icon: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
69
69
  --zdt_avatarIcon_smoke_icon: hsla(0, 0.00%, calc(66.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
70
- --zdt_avatarIcon_default_border: var(--zdt_cta_grey_40_border);
70
+ --zdt_avatarIcon_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
71
71
  --zdt_avatarIcon_default_hover_border: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
72
72
  --zdt_avatarIcon_primary_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
73
73
  --zdt_avatarIcon_primary_hover_border: hsla(213, 100.00%, calc(36.08% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -116,7 +116,7 @@
116
116
  --zdt_drawer_default_box_shadow: rgba(0, 0, 0, 0.176);
117
117
  --zdt_drawer_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
118
118
  --zdt_drawer_header_bg: var(--zdtm_cta_grey_10_bg_default_inverse_low);
119
- --zdt_drawer_header_border: var(--zdt_cta_grey_35_border);
119
+ --zdt_drawer_header_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
120
120
  --zdt_drawer_title_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
121
121
 
122
122
  /* toggle dropdown */
@@ -165,7 +165,7 @@
165
165
 
166
166
  /* form action */
167
167
  --zdt_formAction_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
168
- --zdt_formAction_border: var(--zdt_cta_grey_15_border);
168
+ --zdt_formAction_border: var(--zdtm_cta_grey_15_border_default_inverse_medium);
169
169
 
170
170
  /* freezelayer */
171
171
  --zdt_freezelayer_default_bg: rgba(0, 0, 0, 0.45);
@@ -253,7 +253,7 @@
253
253
  --zdt_secondaryText_orage_text: hsla(26, 100.00%, calc(50.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
254
254
  --zdt_secondaryText_green_text: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
255
255
  --zdt_secondaryText_red_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
256
- --zdt_secondaryText_blue_text: var(--zdt_cta_primary_text);
256
+ --zdt_secondaryText_blue_text: var(--zdtm_cta_primary_text_default_inverse_low);
257
257
  --zdt_secondaryText_blue_hover_text: var(--zdt_cta_primary_hover_text);
258
258
  --zdt_secondaryText_black_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
259
259
  --zdt_secondaryText_secondaryText_text: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -289,8 +289,8 @@
289
289
  /* lookup header common */
290
290
  --zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
291
291
  --zdt_lookupheader_white_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
292
- --zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
293
- --zdt_lookupheader_white_border: var(--zdt_cta_grey_15_border);
292
+ --zdt_lookupheader_default_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
293
+ --zdt_lookupheader_white_border: var(--zdtm_cta_grey_15_border_default_inverse_medium);
294
294
  --zdt_lookupheader_para_text: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
295
295
  --zdt_lookupheader_input_border: hsla(0, 0.00%, calc(89.80% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
296
296
 
@@ -457,7 +457,7 @@
457
457
  --zdt_commonalert_plaininfo_hover_bg: hsla(212, 80.95%, calc(95.88% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
458
458
  --zdt_commonalert_danger_hover_bg: hsla(0, 73.91%, calc(95.49% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
459
459
  --zdt_commonalert_warning_hover_bg: hsla(26, 100.00%, calc(95.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
460
- --zdt_commonalert_light_hover_bg: var(--zdt_cta_grey_10_bg);
460
+ --zdt_commonalert_light_hover_bg: var(--zdtm_cta_grey_10_bg_darker_lowest);
461
461
  --zdt_commonalert_secondlayer_bg: rgb(246,248,251);
462
462
  --zdt_commonalert_default_icon: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
463
463
  --zdt_commonalert_success_icon: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
@@ -534,8 +534,8 @@
534
534
 
535
535
  /* attachment viewer */
536
536
  --zdt_attachmentviewer_title_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
537
- --zdt_attachmentviewer_button_border: var(--zdt_cta_grey_35_border);
538
- --zdt_attachmentviewer_hover_border: var(--zdt_cta_grey_40_border);
537
+ --zdt_attachmentviewer_button_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
538
+ --zdt_attachmentviewer_hover_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
539
539
  --zdt_attachmentviewer_selected_border: var(--zdt_cta_primary_border);
540
540
  --zdt_attachmentviewer_selected_after_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
541
541
  --zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
@@ -549,8 +549,8 @@
549
549
  --zdt_separator_secondary_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
550
550
 
551
551
  /* tag with icon */
552
- --zdt_tagWithIconGrey_bg: var(--zdt_cta_grey_20_bg);
553
- --zdt_tagWithIconGrey_border: var(--zdt_cta_grey_35_border);
552
+ --zdt_tagWithIconGrey_bg: var(--zdtm_cta_grey_20_bg_darker_lowest);
553
+ --zdt_tagWithIconGrey_border: var(--zdtm_cta_grey_35_border_default_inverse_medium);
554
554
  --zdt_tagWithIconGrey_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
555
555
  --zdt_tagWithIconBlue_bg: hsla(213, 84.62%, calc(94.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
556
556
  --zdt_tagWithIconBlue_border: hsla(212, 83.33%, calc(85.88% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
@@ -27,7 +27,7 @@
27
27
 
28
28
  /* attachment */
29
29
  --zdt_attachment_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
30
- --zdt_attachment_default_border: var(--zdt_cta_grey_40_border);
30
+ --zdt_attachment_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
31
31
  --zdt_attachment_default_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
32
32
  --zdt_attachment_default_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
33
33
  --zdt_attachment_download_bg: var(--zdt_cta_grey_10_bg);
@@ -67,7 +67,7 @@
67
67
  --zdt_avatarIcon_grey_icon: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
68
68
  --zdt_avatarIcon_success_icon: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
69
69
  --zdt_avatarIcon_smoke_icon: hsla(0, 0.00%, calc(66.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
70
- --zdt_avatarIcon_default_border: var(--zdt_cta_grey_40_border);
70
+ --zdt_avatarIcon_default_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
71
71
  --zdt_avatarIcon_default_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
72
72
  --zdt_avatarIcon_primary_border: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
73
73
  --zdt_avatarIcon_primary_hover_border: hsla(213, 85.45%, calc(43.14% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -253,7 +253,7 @@
253
253
  --zdt_secondaryText_orage_text: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
254
254
  --zdt_secondaryText_green_text: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
255
255
  --zdt_secondaryText_red_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
256
- --zdt_secondaryText_blue_text: var(--zdt_cta_primary_text);
256
+ --zdt_secondaryText_blue_text: var(--zdtm_cta_primary_text_default_inverse_low);
257
257
  --zdt_secondaryText_blue_hover_text: var(--zdt_cta_primary_hover_text);
258
258
  --zdt_secondaryText_black_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
259
259
  --zdt_secondaryText_secondaryText_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -535,7 +535,7 @@
535
535
  /* attachment viewer */
536
536
  --zdt_attachmentviewer_title_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
537
537
  --zdt_attachmentviewer_button_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
538
- --zdt_attachmentviewer_hover_border: var(--zdt_cta_grey_40_border);
538
+ --zdt_attachmentviewer_hover_border: var(--zdtm_cta_grey_40_border_default_inverse_medium);
539
539
  --zdt_attachmentviewer_selected_border: var(--zdt_cta_primary_border);
540
540
  --zdt_attachmentviewer_selected_after_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
541
541
  --zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/dark/themes/blue/blue_DotCTA_DarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/light/themes/blue/blue_DotCTA_LightModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotCTA_PureDarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/dark/themes/green/green_DotCTA_DarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/light/themes/green/green_DotCTA_LightModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/pureDark/themes/green/green_DotCTA_PureDarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/dark/themes/orange/orange_DotCTA_DarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/light/themes/orange/orange_DotCTA_LightModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotCTA_PureDarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/dark/themes/red/red_DotCTA_DarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/light/themes/red/red_DotCTA_LightModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/pureDark/themes/red/red_DotCTA_PureDarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotCTA_DarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotCTA_LightModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css";
@@ -1,2 +1 @@
1
- import "./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotCTA_PureDarkModifyCategory.module.css";
2
1
  import "./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css";
@@ -7,6 +7,8 @@ import AlertClose from "../AlertClose/AlertClose";
7
7
  import style from "./GlobalNotification.module.css";
8
8
  import { Container, Box } from '@zohodesk/components/es/Layout';
9
9
  import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
10
+ import getCurrentTime from "../../utils/getCurrentTime";
11
+ import { STATUS } from "./utils/constants";
10
12
  export default class GlobalNotification extends React.Component {
11
13
  constructor(props) {
12
14
  super(props);
@@ -15,6 +17,8 @@ export default class GlobalNotification extends React.Component {
15
17
  shadowClose: true
16
18
  };
17
19
  this.onClose = this.onClose.bind(this);
20
+ this.getNotiifcationData = this.getNotiifcationData.bind(this);
21
+ this.handleStatusChange = this.handleStatusChange.bind(this);
18
22
  }
19
23
 
20
24
  componentDidMount() {
@@ -24,18 +28,44 @@ export default class GlobalNotification extends React.Component {
24
28
  id,
25
29
  needAutoClose
26
30
  } = this.props;
31
+ this.handleStatusChange(STATUS.MOUNTED);
27
32
 
28
33
  if (needAutoClose) {
29
34
  this.hideMessageTimer = setTimeout(() => {
30
35
  hideMessage(id);
36
+ this.handleStatusChange(STATUS.DISMISSING);
31
37
  }, hideTime);
32
38
  }
33
39
  }
34
40
 
41
+ componentDidUpdate(prevProps) {
42
+ if (prevProps.id === this.props.id && (prevProps.message !== this.props.message || prevProps.type !== this.props.type)) {
43
+ this.handleStatusChange(STATUS.UPDATED);
44
+ }
45
+ }
46
+
35
47
  componentWillUnmount() {
36
48
  if (this.hideMessageTimer) {
37
49
  clearTimeout(this.hideMessageTimer);
38
50
  }
51
+
52
+ this.handleStatusChange(STATUS.UNMOUNTED);
53
+ }
54
+
55
+ handleStatusChange(status) {
56
+ const {
57
+ onStatusChange
58
+ } = this.props;
59
+
60
+ if (typeof onStatusChange == 'function') {
61
+ const notificationData = this.getNotiifcationData();
62
+ const currentTime = getCurrentTime();
63
+ onStatusChange({
64
+ status,
65
+ ...notificationData,
66
+ time: currentTime
67
+ });
68
+ }
39
69
  }
40
70
 
41
71
  onClose(e) {
@@ -47,20 +77,31 @@ export default class GlobalNotification extends React.Component {
47
77
  this.setState({
48
78
  shadowClose: false
49
79
  });
80
+ this.handleStatusChange(STATUS.DISMISSING);
50
81
  hideMessage && hideMessage(id);
51
82
  onClose && onClose(e);
52
83
  }
53
84
 
85
+ getNotiifcationData() {
86
+ const {
87
+ id,
88
+ type,
89
+ message
90
+ } = this.props;
91
+ return {
92
+ id,
93
+ type,
94
+ message
95
+ };
96
+ }
97
+
54
98
  render() {
55
99
  let {
56
- type,
57
- message,
58
100
  hideMessage,
59
101
  onClick,
60
102
  i18nKeys = {},
61
103
  customProps,
62
104
  dataSelectorId,
63
- id,
64
105
  needShadow,
65
106
  shadowCount,
66
107
  eleRef
@@ -71,15 +112,13 @@ export default class GlobalNotification extends React.Component {
71
112
  let {
72
113
  closeTitle = 'Close'
73
114
  } = i18nKeys;
74
- return /*#__PURE__*/React.createElement(GlobalNotificationUI, {
75
- type: type,
76
- message: message,
115
+ const notificationData = this.getNotiifcationData();
116
+ return /*#__PURE__*/React.createElement(GlobalNotificationUI, { ...notificationData,
77
117
  hideMessage: hideMessage,
78
118
  onClick: onClick,
79
119
  closeTitle: closeTitle,
80
120
  customProps: customProps,
81
121
  dataSelectorId: dataSelectorId,
82
- id: id,
83
122
  shadowCount: shadowCount,
84
123
  onClose: this.onClose,
85
124
  needShadow: shadowClose && needShadow,
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { render } from '@testing-library/react';
3
3
  import GlobalNotification from "../GlobalNotification";
4
+ import { STATUS } from "../utils/constants";
4
5
  describe('GlobalNotification', () => {
5
6
  test('rendering the defult props', () => {
6
7
  const {
@@ -8,4 +9,12 @@ describe('GlobalNotification', () => {
8
9
  } = render( /*#__PURE__*/React.createElement(GlobalNotification, null));
9
10
  expect(asFragment()).toMatchSnapshot();
10
11
  });
12
+ });
13
+ describe('GlobalNotification Constants', () => {
14
+ test('should have correct constant values', () => {
15
+ expect(STATUS.MOUNTED).toBe('mounted');
16
+ expect(STATUS.UPDATED).toBe('updated');
17
+ expect(STATUS.DISMISSING).toBe('dismissing');
18
+ expect(STATUS.UNMOUNTED).toBe('unmounted');
19
+ });
11
20
  });
@@ -15,7 +15,8 @@ export const propTypes = {
15
15
  needAutoClose: PropTypes.bool,
16
16
  isCollapseView: PropTypes.bool,
17
17
  shadowCount: PropTypes.number,
18
- needShadow: PropTypes.bool
18
+ needShadow: PropTypes.bool,
19
+ onStatusChange: PropTypes.func
19
20
  };
20
21
  export const UI_propTypes = {
21
22
  dataSelectorId: PropTypes.string,
@@ -0,0 +1,6 @@
1
+ export const STATUS = {
2
+ MOUNTED: 'mounted',
3
+ UNMOUNTED: 'unmounted',
4
+ UPDATED: 'updated',
5
+ DISMISSING: 'dismissing'
6
+ };
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/dark/themes/blue/blue_DotCTA_DarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/light/themes/blue/blue_DotCTA_LightModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotCTA_PureDarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/dark/themes/green/green_DotCTA_DarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/light/themes/green/green_DotCTA_LightModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/pureDark/themes/green/green_DotCTA_PureDarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/dark/themes/orange/orange_DotCTA_DarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/light/themes/orange/orange_DotCTA_LightModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotCTA_PureDarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/dark/themes/red/red_DotCTA_DarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/light/themes/red/red_DotCTA_LightModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/pureDark/themes/red/red_DotCTA_PureDarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotCTA_DarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotCTA_LightModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css");
@@ -1,5 +1,3 @@
1
1
  "use strict";
2
2
 
3
- require("./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotCTA_PureDarkModifyCategory.module.css");
4
-
5
3
  require("./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css");
@@ -27,10 +27,20 @@ var _Layout = require("@zohodesk/components/es/Layout");
27
27
 
28
28
  var _Common = require("@zohodesk/components/es/utils/Common");
29
29
 
30
+ var _getCurrentTime = _interopRequireDefault(require("../../utils/getCurrentTime"));
31
+
32
+ var _constants = require("./utils/constants");
33
+
30
34
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
31
35
 
32
36
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
33
37
 
38
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
39
+
40
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
41
+
42
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
43
+
34
44
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
35
45
 
36
46
  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -67,30 +77,61 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
67
77
  shadowClose: true
68
78
  };
69
79
  _this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
80
+ _this.getNotiifcationData = _this.getNotiifcationData.bind(_assertThisInitialized(_this));
81
+ _this.handleStatusChange = _this.handleStatusChange.bind(_assertThisInitialized(_this));
70
82
  return _this;
71
83
  }
72
84
 
73
85
  _createClass(GlobalNotification, [{
74
86
  key: "componentDidMount",
75
87
  value: function componentDidMount() {
88
+ var _this2 = this;
89
+
76
90
  var _this$props = this.props,
77
91
  hideMessage = _this$props.hideMessage,
78
92
  hideTime = _this$props.hideTime,
79
93
  id = _this$props.id,
80
94
  needAutoClose = _this$props.needAutoClose;
95
+ this.handleStatusChange(_constants.STATUS.MOUNTED);
81
96
 
82
97
  if (needAutoClose) {
83
98
  this.hideMessageTimer = setTimeout(function () {
84
99
  hideMessage(id);
100
+
101
+ _this2.handleStatusChange(_constants.STATUS.DISMISSING);
85
102
  }, hideTime);
86
103
  }
87
104
  }
105
+ }, {
106
+ key: "componentDidUpdate",
107
+ value: function componentDidUpdate(prevProps) {
108
+ if (prevProps.id === this.props.id && (prevProps.message !== this.props.message || prevProps.type !== this.props.type)) {
109
+ this.handleStatusChange(_constants.STATUS.UPDATED);
110
+ }
111
+ }
88
112
  }, {
89
113
  key: "componentWillUnmount",
90
114
  value: function componentWillUnmount() {
91
115
  if (this.hideMessageTimer) {
92
116
  clearTimeout(this.hideMessageTimer);
93
117
  }
118
+
119
+ this.handleStatusChange(_constants.STATUS.UNMOUNTED);
120
+ }
121
+ }, {
122
+ key: "handleStatusChange",
123
+ value: function handleStatusChange(status) {
124
+ var onStatusChange = this.props.onStatusChange;
125
+
126
+ if (typeof onStatusChange == 'function') {
127
+ var notificationData = this.getNotiifcationData();
128
+ var currentTime = (0, _getCurrentTime["default"])();
129
+ onStatusChange(_objectSpread(_objectSpread({
130
+ status: status
131
+ }, notificationData), {}, {
132
+ time: currentTime
133
+ }));
134
+ }
94
135
  }
95
136
  }, {
96
137
  key: "onClose",
@@ -102,42 +143,51 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
102
143
  this.setState({
103
144
  shadowClose: false
104
145
  });
146
+ this.handleStatusChange(_constants.STATUS.DISMISSING);
105
147
  hideMessage && hideMessage(id);
106
148
  onClose && onClose(e);
107
149
  }
108
150
  }, {
109
- key: "render",
110
- value: function render() {
151
+ key: "getNotiifcationData",
152
+ value: function getNotiifcationData() {
111
153
  var _this$props3 = this.props,
112
- type = _this$props3.type,
113
- message = _this$props3.message,
114
- hideMessage = _this$props3.hideMessage,
115
- onClick = _this$props3.onClick,
116
- _this$props3$i18nKeys = _this$props3.i18nKeys,
117
- i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys,
118
- customProps = _this$props3.customProps,
119
- dataSelectorId = _this$props3.dataSelectorId,
120
154
  id = _this$props3.id,
121
- needShadow = _this$props3.needShadow,
122
- shadowCount = _this$props3.shadowCount,
123
- eleRef = _this$props3.eleRef;
155
+ type = _this$props3.type,
156
+ message = _this$props3.message;
157
+ return {
158
+ id: id,
159
+ type: type,
160
+ message: message
161
+ };
162
+ }
163
+ }, {
164
+ key: "render",
165
+ value: function render() {
166
+ var _this$props4 = this.props,
167
+ hideMessage = _this$props4.hideMessage,
168
+ onClick = _this$props4.onClick,
169
+ _this$props4$i18nKeys = _this$props4.i18nKeys,
170
+ i18nKeys = _this$props4$i18nKeys === void 0 ? {} : _this$props4$i18nKeys,
171
+ customProps = _this$props4.customProps,
172
+ dataSelectorId = _this$props4.dataSelectorId,
173
+ needShadow = _this$props4.needShadow,
174
+ shadowCount = _this$props4.shadowCount,
175
+ eleRef = _this$props4.eleRef;
124
176
  var shadowClose = this.state.shadowClose;
125
177
  var _i18nKeys$closeTitle = i18nKeys.closeTitle,
126
178
  closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
127
- return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
128
- type: type,
129
- message: message,
179
+ var notificationData = this.getNotiifcationData();
180
+ return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, _extends({}, notificationData, {
130
181
  hideMessage: hideMessage,
131
182
  onClick: onClick,
132
183
  closeTitle: closeTitle,
133
184
  customProps: customProps,
134
185
  dataSelectorId: dataSelectorId,
135
- id: id,
136
186
  shadowCount: shadowCount,
137
187
  onClose: this.onClose,
138
188
  needShadow: shadowClose && needShadow,
139
189
  eleRef: eleRef
140
- });
190
+ }));
141
191
  }
142
192
  }]);
143
193
 
@@ -6,6 +6,8 @@ var _react2 = require("@testing-library/react");
6
6
 
7
7
  var _GlobalNotification = _interopRequireDefault(require("../GlobalNotification"));
8
8
 
9
+ var _constants = require("../utils/constants");
10
+
9
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
12
 
11
13
  describe('GlobalNotification', function () {
@@ -15,4 +17,12 @@ describe('GlobalNotification', function () {
15
17
 
16
18
  expect(asFragment()).toMatchSnapshot();
17
19
  });
20
+ });
21
+ describe('GlobalNotification Constants', function () {
22
+ test('should have correct constant values', function () {
23
+ expect(_constants.STATUS.MOUNTED).toBe('mounted');
24
+ expect(_constants.STATUS.UPDATED).toBe('updated');
25
+ expect(_constants.STATUS.DISMISSING).toBe('dismissing');
26
+ expect(_constants.STATUS.UNMOUNTED).toBe('unmounted');
27
+ });
18
28
  });
@@ -25,7 +25,8 @@ var propTypes = {
25
25
  needAutoClose: _propTypes["default"].bool,
26
26
  isCollapseView: _propTypes["default"].bool,
27
27
  shadowCount: _propTypes["default"].number,
28
- needShadow: _propTypes["default"].bool
28
+ needShadow: _propTypes["default"].bool,
29
+ onStatusChange: _propTypes["default"].func
29
30
  };
30
31
  exports.propTypes = propTypes;
31
32
  var UI_propTypes = {
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.STATUS = void 0;
7
+ var STATUS = {
8
+ MOUNTED: 'mounted',
9
+ UNMOUNTED: 'unmounted',
10
+ UPDATED: 'updated',
11
+ DISMISSING: 'dismissing'
12
+ };
13
+ exports.STATUS = STATUS;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/dot",
3
- "version": "1.0.0-temp-219",
3
+ "version": "1.0.0-temp-220",
4
4
  "main": "lib/index",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -39,7 +39,7 @@
39
39
  "sstest": "react-cli sstest",
40
40
  "common_package_build": "cd ../common && npm run build && cd ../dot",
41
41
  "docs": "npm run css:review && review:props && react-cli docs",
42
- "prepublishOnly": "node prePublish.js && npm run downloadOnly",
42
+ "prepublishOnly": "node prePublish.js && npm run downloadOnly && npm run css:review && npm run review:props",
43
43
  "postpublish": "node postPublish.js",
44
44
  "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib && react-cli clean ./package-lock.json && react-cli clean ./result.json",
45
45
  "download": "npm run downloadOnly && cd ../ && npm run download",
@@ -68,7 +68,7 @@
68
68
  "@testing-library/react": "^11.2.5",
69
69
  "@testing-library/react-hooks": "^7.0.2",
70
70
  "@testing-library/user-event": "^13.0.10",
71
- "@zohodesk-private/color-variable-preprocessor": "1.0.0-temp-14.1",
71
+ "@zohodesk-private/color-variable-preprocessor": "1.2.0",
72
72
  "@zohodesk-private/css-variable-migrator": "1.0.9",
73
73
  "@zohodesk-private/node-plugins": "1.1.13",
74
74
  "@zohodesk-private/react-prop-validator": "1.2.3",
@@ -78,12 +78,12 @@
78
78
  "@zohodesk/icons": "1.1.3",
79
79
  "@zohodesk/layout": "^3.1.0",
80
80
  "@zohodesk/svg": "1.2.3",
81
- "@zohodesk/utils": "1.3.15",
81
+ "@zohodesk/utils": "1.0.0-temp-1",
82
82
  "@zohodesk/variables": "1.1.0",
83
83
  "@zohodesk/virtualizer": "1.0.13",
84
84
  "react-sortable-hoc": "^0.8.3",
85
85
  "velocity-react": "1.4.3",
86
- "@zohodesk/dotkit": "1.0.3",
86
+ "@zohodesk/dotkit": "1.0.0-temp-1.3",
87
87
  "@zohodesk/react-cli": "1.1.27"
88
88
  },
89
89
  "peerDependencies": {
@@ -95,7 +95,7 @@
95
95
  "@zohodesk/virtualizer": "1.0.13",
96
96
  "react-sortable-hoc": "^0.8.3",
97
97
  "@zohodesk/hooks": "2.0.6",
98
- "@zohodesk/utils": "1.3.15",
98
+ "@zohodesk/utils": "1.0.0-temp-1",
99
99
  "@zohodesk/a11y": "2.3.8",
100
100
  "@zohodesk/layout": "3.1.0"
101
101
  }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='blue'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(213, 27.27%, calc(23.73% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(212, 100.00%, calc(63.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(213, 27.27%, calc(23.73% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(213, 27.27%, calc(23.73% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(213, 25.88%, calc(33.33% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(213, 27.27%, calc(23.73% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='green'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(191, 21.65%, calc(19.02% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(191, 21.65%, calc(19.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(191, 21.65%, calc(19.02% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(158, 26.83%, calc(24.12% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(191, 21.65%, calc(19.02% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='orange'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(252, 4.85%, calc(20.20% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(26, 100.00%, calc(56.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(252, 4.85%, calc(20.20% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(252, 4.85%, calc(20.20% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(19, 21.54%, calc(25.49% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(252, 4.85%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='red'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(258, 12.62%, calc(20.20% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(258, 12.62%, calc(20.20% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(258, 12.62%, calc(20.20% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(334, 20.00%, calc(24.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(258, 12.62%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='yellow'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(218, 7.69%, calc(20.39% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(218, 7.69%, calc(20.39% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(218, 7.69%, calc(20.39% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(37, 12.70%, calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(218, 7.69%, calc(20.39% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='blue'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(213, 94.26%, calc(59.02% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(216, 38.46%, calc(97.45% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(212, 86.67%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(212, 91.84%, calc(48.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(212, 86.67%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(213, 100.00%, calc(36.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(212, 86.67%, calc(97.06% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(213, 65.52%, calc(82.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(212, 86.67%, calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='green'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(165, 28.57%, calc(97.25% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(143, 44.44%, calc(96.47% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(133, 63.29%, calc(40.59% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(143, 44.44%, calc(96.47% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(134, 78.63%, calc(25.69% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(143, 44.44%, calc(96.47% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(132, 42.86%, calc(82.16% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(143, 44.44%, calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='orange'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(28, 79.71%, calc(59.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(20, 20.00%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(26, 77.78%, calc(96.47% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(28, 81.75%, calc(49.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(26, 77.78%, calc(96.47% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(30, 100.00%, calc(34.90% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(26, 77.78%, calc(96.47% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(28, 79.49%, calc(84.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(26, 77.78%, calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='red'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 72.34%, calc(63.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(340, 20.00%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(0, 71.43%, calc(97.25% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(0, 71.91%, calc(53.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(0, 71.43%, calc(97.25% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(1, 75.38%, calc(38.24% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(0, 71.43%, calc(97.25% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(0, 70.21%, calc(90.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(0, 71.43%, calc(97.25% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='yellow'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(46, 81.18%, calc(66.67% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(46, 81.07%, calc(52.35% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(60, 12.50%, calc(96.86% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(46, 81.07%, calc(52.35% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(0.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(45, 83.33%, calc(95.29% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(46, 81.07%, calc(52.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(48, 100.00%, calc(35.49% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(45, 83.33%, calc(95.29% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(46, 81.44%, calc(80.98% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='blue'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(212, 100.00%, calc(63.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(213, 19.57%, calc(18.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(213, 19.57%, calc(18.04% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(212, 38.89%, calc(28.24% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='green'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(133, 10.84%, calc(16.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(133, 10.84%, calc(16.27% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(133, 23.48%, calc(22.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='orange'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(26, 100.00%, calc(56.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(26, 19.51%, calc(16.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(26, 19.51%, calc(16.08% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(26, 40.00%, calc(21.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='red'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(0, 13.25%, calc(16.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(0, 13.25%, calc(16.27% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(0, 26.96%, calc(22.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='yellow'] {
2
- --zdtm_cta_secondary_border_darker_low: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_low)), calc( 0.15 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_bg_default_inverse_lower: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_10_bg_default_inverse_low: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
5
- --zdtm_cta_primary_light_bg_default_inverse_low: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_secondary_text_lighter: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_primary_light_bg_default: hsla(35, 15.00%, calc(15.69% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
9
- --zdtm_cta_primary_border_default_inverse: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
- --zdtm_cta_primary_hover_bg_default: hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
11
- --zdtm_cta_primary_light_bg_darker_lowest: hsla(35, 15.00%, calc(15.69% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_secondary_light_border_default: hsla(38, 30.19%, calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
- --zdtm_cta_primary_light_bg_default_inverse_lower: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
14
- }