@zohoim/chat-components 1.1.2-beta.4 → 1.1.2-beta.6

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 (51) hide show
  1. package/README.md +5 -1
  2. package/assets/Appearance/dark/mode/General_DarkMode.module.css +93 -0
  3. package/assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css +40 -0
  4. package/assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css +40 -0
  5. package/assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css +40 -0
  6. package/assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css +40 -0
  7. package/assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css +40 -0
  8. package/assets/Appearance/light/mode/General_LightMode.module.css +93 -0
  9. package/assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css +40 -0
  10. package/assets/Appearance/light/themes/green/green_General_LightTheme.module.css +40 -0
  11. package/assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css +40 -0
  12. package/assets/Appearance/light/themes/red/red_General_LightTheme.module.css +40 -0
  13. package/assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css +40 -0
  14. package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css +93 -0
  15. package/assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css +40 -0
  16. package/assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css +40 -0
  17. package/assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css +40 -0
  18. package/assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css +40 -0
  19. package/assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css +40 -0
  20. package/es/AttachmentHandler/css/AttachmentHandler.module.css +2 -2
  21. package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +4 -8
  22. package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css +4 -4
  23. package/es/EmojiPopup/css/EmojiPopup.module.css +2 -2
  24. package/es/EmojisFooter/css/EmojisFooter.module.css +2 -2
  25. package/es/EmojisHeader/css/EmojisHeader.module.css +3 -3
  26. package/es/Theme/ThemeAssets.js +18 -0
  27. package/es/Theme/ThemeWrapper.js +7 -5
  28. package/es/Theme/utils/getThemeConfigurations.js +1 -55
  29. package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css +2 -2
  30. package/es/im/ReplyEditor/css/ReplyEditor.module.css +4 -4
  31. package/lib/index.js +538 -0
  32. package/package.json +18 -11
  33. package/es/Theme/themeVariables/commonThemeColorVariable.js +0 -17
  34. package/es/Theme/themeVariables/dark/blueTheme.js +0 -133
  35. package/es/Theme/themeVariables/dark/commonColorVariable.js +0 -35
  36. package/es/Theme/themeVariables/dark/greenTheme.js +0 -132
  37. package/es/Theme/themeVariables/dark/orangeTheme.js +0 -132
  38. package/es/Theme/themeVariables/dark/redTheme.js +0 -132
  39. package/es/Theme/themeVariables/dark/yellowTheme.js +0 -132
  40. package/es/Theme/themeVariables/light/blueTheme.js +0 -135
  41. package/es/Theme/themeVariables/light/commonColorVariable.js +0 -54
  42. package/es/Theme/themeVariables/light/greenTheme.js +0 -131
  43. package/es/Theme/themeVariables/light/orangeTheme.js +0 -131
  44. package/es/Theme/themeVariables/light/redTheme.js +0 -131
  45. package/es/Theme/themeVariables/light/yellowTheme.js +0 -131
  46. package/es/Theme/themeVariables/pureDark/blueTheme.js +0 -132
  47. package/es/Theme/themeVariables/pureDark/commonColorVariable.js +0 -37
  48. package/es/Theme/themeVariables/pureDark/greenTheme.js +0 -132
  49. package/es/Theme/themeVariables/pureDark/orangeTheme.js +0 -132
  50. package/es/Theme/themeVariables/pureDark/redTheme.js +0 -132
  51. package/es/Theme/themeVariables/pureDark/yellowTheme.js +0 -132
@@ -0,0 +1,40 @@
1
+ [data-zohoim-mode='light'][data-zohoim-theme='yellow'] {
2
+ /* bg colors */
3
+ --imlib_chat_components_actionIconWrapper_bg_color: hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
+ --imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
5
+ --imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
6
+ --imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
7
+ --imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
+ --imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 40.00%, calc(96.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
9
+ --imlib_chat_components_messageBox_outgoing_bg_color: hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
+ --imlib_chat_components_messageBubble_active_bg_color: hsla(64, 100.00%, calc(94.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
11
+ --imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
12
+
13
+ /* border colors */
14
+ --imlib_chat_components_common_border: hsla(60, 21.74%, calc(90.98% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
15
+ --imlib_chat_components_actionIconWrapper_border_color: hsla(46, 81.44%, calc(80.98% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
16
+ --imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
+ --imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
18
+ --imlib_chat_components_imageBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
19
+ --imlib_chat_components_locationBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
20
+ --imlib_chat_components_replyBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
21
+ --imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
22
+ --imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
23
+
24
+ /* icon colors */
25
+ --imlib_chat_components_twotone_icon_bg: rgba(204, 203, 199, 0.7);
26
+
27
+ /* url / themes / primary colors */
28
+ --imlib_chat_components_locationBubble_url_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
29
+ --imlib_chat_components_imPermaLink_url_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
30
+ --imlib_chat_components_textBubble_see_more_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
31
+ --imlib_chat_components_textBubble_url_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
32
+ --imlib_chat_components_messageStatus_read_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
33
+ --imlib_chat_components_emoji_tab_line_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
34
+
35
+ /* failed colors */
36
+ --imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
37
+ --imlib_chat_components_locationBubble_url_color_failed: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
+ --imlib_chat_components_textBubble_see_more_color_failed: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_textBubble_url_color_failed: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
+ }
@@ -0,0 +1,93 @@
1
+ [data-zohoim-mode='pureDark'] {
2
+ /* default colors */
3
+ --imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
4
+ --imlib_chat_components_primary_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
5
+
6
+ /* integration colors */
7
+ --imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
8
+ --imlib_chat_components_imIntegrationIcon_telegram_color: hsla(201, 63.72%, calc(57.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
9
+ --imlib_chat_components_imIntegrationIcon_wechat_color: hsla(106, 100.00%, calc(37.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
10
+ --imlib_chat_components_imIntegrationIcon_line_color: hsla(120, 98.92%, calc(36.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
11
+ --imlib_chat_components_imIntegrationIcon_twillio_color: hsla(353, 88.24%, calc(56.67% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
13
+ --imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
14
+ --imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
15
+
16
+ /* two tone icon colors */
17
+ --imlib_chat_components_imTtIcon_path0_color: rgba(255, 255, 255, 0.25);
18
+ --imlib_chat_components_imTtIcon_path1_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
19
+ --imlib_chat_components_imIntegrationIcon_path0_color: rgba(255, 255, 255, 0.25);
20
+ --imlib_chat_components_imIntegrationIcon_path1_color: rgb(255,255,255);
21
+ --imlib_chat_components_twotone_icon_border: var(--dot_platinum);
22
+
23
+ /* text / icon colors */
24
+ --imlib_chat_components_actionIconWrapper_color: rgb(226,228,230);
25
+ --imlib_chat_components_messageBox_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
26
+ --imlib_chat_components_replyBubbleContent_line_color: hsla(217, 58.73%, calc(87.65% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
27
+ --imlib_chat_components_replyBubbleContent_sender_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
28
+ --imlib_chat_components_attachmentBubbleInfo_fileName_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
29
+ --imlib_chat_components_attachmentBubbleInfo_fileSize_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
30
+ --imlib_chat_components_replyBubbleContent_content_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
31
+ --imlib_chat_components_replyBubbleHeader_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
32
+ --imlib_chat_components_replyBubbleHeader_time_color: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
33
+ --imlib_chat_components_textBubble_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
34
+ --imlib_chat_components_articleBubble_title_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
35
+ --imlib_chat_components_articleBubble_summary_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
36
+ --imlib_chat_components_imMessageContent_text_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
37
+ --imlib_chat_components_imMessageMeta_time_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
+ --imlib_chat_components_imAutoMessageInfo_text_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_messageBubble_messageBox_footer_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
+ --imlib_chat_components_messageStatus_send_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
41
+ --imlib_chat_components_imageBubble_alt_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
42
+
43
+ /* text / icon failed colors */
44
+ --imlib_chat_components_messageBox_failed_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
45
+ --imlib_chat_components_replyBubbleHeader_text_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
46
+ --imlib_chat_components_textBubble_text_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_lighter_low)), calc(1 + var(--zdc_alpha_low)));
47
+ --imlib_chat_components_imageBubble_alt_text_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
48
+ --imlib_chat_components_articleBubble_summary_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
49
+ --imlib_chat_components_replyBubbleContent_line_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
50
+ --imlib_chat_components_replyBubbleContent_sender_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
51
+ --imlib_chat_components_attachmentBubbleInfo_fileName_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
52
+ --imlib_chat_components_attachmentBubbleInfo_fileSize_color_failed: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
53
+ --imlib_chat_components_replyBubbleContent_content_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
54
+ --imlib_chat_components_replyBubbleHeader_time_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
55
+ --imlib_chat_components_articleBubble_title_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
56
+
57
+ /* bg colors */
58
+ --imlib_chat_components_messageBox_bg_color: hsla(212, 86.67%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
59
+
60
+ /* bg failed colors */
61
+ --imlib_chat_components_messageBox_failed_bg_color: hsla(346, 36.31%, calc(30.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
62
+ --imlib_chat_components_imageBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
63
+ --imlib_chat_components_attachmentBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
64
+ --imlib_chat_components_articleBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
65
+ --imlib_chat_components_locationBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
66
+ --imlib_chat_components_replyBubbleContent_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
67
+
68
+ /* border failed colors */
69
+ --imlib_chat_components_attachmentBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
70
+ --imlib_chat_components_imageBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
71
+ --imlib_chat_components_locationBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
72
+ --imlib_chat_components_replyBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
73
+ --imlib_chat_components_videoBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
74
+ --imlib_chat_components_articleBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
75
+ --imlib_chat_components_replyBubbleContent_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
76
+
77
+ /* replyEditor */
78
+ --imlib_chat_components_reply_editor_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
79
+ --imlib_chat_components_reply_editor_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
80
+ --imlib_chat_components_reply_editor_placeholder_color: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
81
+
82
+ /* attachment Preview */
83
+ --imlib_chat_components_attachmentPreview_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
84
+ --imlib_chat_components_attachmentPreview_name_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
85
+ --imlib_chat_components_attachmentPreview_size_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
86
+ --imlib_chat_components_attachmentPreview_body_bg_color: hsla(0, 0.00%, calc(14.90% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
87
+
88
+ /* emoji popup */
89
+ --imlib_chat_components_emojiPopup_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
90
+ --imlib_chat_components_emojiPopup_border_color: hsla(220, 16.67%, calc(28.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
91
+ --imlib_chat_components_emojiPopup_title_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
92
+ --imlib_chat_components_emoji_popup_search_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
93
+ }
@@ -0,0 +1,40 @@
1
+ [data-zohoim-mode='pureDark'][data-zohoim-theme='blue'] {
2
+ /* bg colors */
3
+ --imlib_chat_components_actionIconWrapper_bg_color: hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
+ --imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
5
+ --imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
6
+ --imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
7
+ --imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
+ --imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
9
+ --imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
+ --imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
11
+ --imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
12
+
13
+ /* border colors */
14
+ --imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
15
+ --imlib_chat_components_actionIconWrapper_border_color: hsla(212, 38.89%, calc(28.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
16
+ --imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
+ --imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
18
+ --imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
19
+ --imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
20
+ --imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
21
+ --imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
22
+ --imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
23
+
24
+ /* icon colors */
25
+ --imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
26
+
27
+ /* url / themes / primary colors */
28
+ --imlib_chat_components_locationBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
29
+ --imlib_chat_components_imPermaLink_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
30
+ --imlib_chat_components_textBubble_see_more_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
31
+ --imlib_chat_components_textBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
32
+ --imlib_chat_components_messageStatus_read_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
33
+ --imlib_chat_components_emoji_tab_line_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
34
+
35
+ /* failed colors */
36
+ --imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
37
+ --imlib_chat_components_locationBubble_url_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
+ --imlib_chat_components_textBubble_see_more_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_textBubble_url_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
+ }
@@ -0,0 +1,40 @@
1
+ [data-zohoim-mode='pureDark'][data-zohoim-theme='green'] {
2
+ /* bg colors */
3
+ --imlib_chat_components_actionIconWrapper_bg_color: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
+ --imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
5
+ --imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
6
+ --imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
7
+ --imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
+ --imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
9
+ --imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
+ --imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
11
+ --imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
12
+
13
+ /* border colors */
14
+ --imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
15
+ --imlib_chat_components_actionIconWrapper_border_color: hsla(133, 23.48%, calc(22.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
16
+ --imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
+ --imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
18
+ --imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
19
+ --imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
20
+ --imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
21
+ --imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
22
+ --imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
23
+
24
+ /* icon colors */
25
+ --imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
26
+
27
+ /* url / themes / primary colors */
28
+ --imlib_chat_components_locationBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
29
+ --imlib_chat_components_imPermaLink_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
30
+ --imlib_chat_components_textBubble_see_more_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
31
+ --imlib_chat_components_textBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
32
+ --imlib_chat_components_messageStatus_read_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
33
+ --imlib_chat_components_emoji_tab_line_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
34
+
35
+ /* failed colors */
36
+ --imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
37
+ --imlib_chat_components_locationBubble_url_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
+ --imlib_chat_components_textBubble_see_more_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_textBubble_url_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
+ }
@@ -0,0 +1,40 @@
1
+ [data-zohoim-mode='pureDark'][data-zohoim-theme='orange'] {
2
+ /* bg colors */
3
+ --imlib_chat_components_actionIconWrapper_bg_color: hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
+ --imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
5
+ --imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
6
+ --imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
7
+ --imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
+ --imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
9
+ --imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
+ --imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
11
+ --imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
12
+
13
+ /* border colors */
14
+ --imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
15
+ --imlib_chat_components_actionIconWrapper_border_color: hsla(26, 40.00%, calc(21.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
16
+ --imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
+ --imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
18
+ --imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
19
+ --imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
20
+ --imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
21
+ --imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
22
+ --imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
23
+
24
+ /* icon colors */
25
+ --imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
26
+
27
+ /* url / themes / primary colors */
28
+ --imlib_chat_components_locationBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
29
+ --imlib_chat_components_imPermaLink_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
30
+ --imlib_chat_components_textBubble_see_more_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
31
+ --imlib_chat_components_textBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
32
+ --imlib_chat_components_messageStatus_read_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
33
+ --imlib_chat_components_emoji_tab_line_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
34
+
35
+ /* failed colors */
36
+ --imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
37
+ --imlib_chat_components_locationBubble_url_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
+ --imlib_chat_components_textBubble_see_more_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_textBubble_url_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
+ }
@@ -0,0 +1,40 @@
1
+ [data-zohoim-mode='pureDark'][data-zohoim-theme='red'] {
2
+ /* bg colors */
3
+ --imlib_chat_components_actionIconWrapper_bg_color: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
+ --imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
5
+ --imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
6
+ --imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
7
+ --imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
+ --imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
9
+ --imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
+ --imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
11
+ --imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
12
+
13
+ /* border colors */
14
+ --imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
15
+ --imlib_chat_components_actionIconWrapper_border_color: hsla(2, 28.07%, calc(22.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
16
+ --imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
+ --imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
18
+ --imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
19
+ --imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
20
+ --imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
21
+ --imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
22
+ --imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
23
+
24
+ /* icon colors */
25
+ --imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
26
+
27
+ /* url / themes / primary colors */
28
+ --imlib_chat_components_locationBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
29
+ --imlib_chat_components_imPermaLink_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
30
+ --imlib_chat_components_textBubble_see_more_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
31
+ --imlib_chat_components_textBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
32
+ --imlib_chat_components_messageStatus_read_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
33
+ --imlib_chat_components_emoji_tab_line_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
34
+
35
+ /* failed colors */
36
+ --imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
37
+ --imlib_chat_components_locationBubble_url_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
+ --imlib_chat_components_textBubble_see_more_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_textBubble_url_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
+ }
@@ -0,0 +1,40 @@
1
+ [data-zohoim-mode='pureDark'][data-zohoim-theme='yellow'] {
2
+ /* bg colors */
3
+ --imlib_chat_components_actionIconWrapper_bg_color: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
4
+ --imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
5
+ --imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
6
+ --imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
7
+ --imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
8
+ --imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
9
+ --imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
+ --imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
11
+ --imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
12
+
13
+ /* border colors */
14
+ --imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
15
+ --imlib_chat_components_actionIconWrapper_border_color: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
16
+ --imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
+ --imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
18
+ --imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
19
+ --imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
20
+ --imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
21
+ --imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
22
+ --imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
23
+
24
+ /* icon colors */
25
+ --imlib_chat_components_twotone_icon_bg: rgba(255, 255, 255, 0.15);
26
+
27
+ /* url / themes / primary colors */
28
+ --imlib_chat_components_locationBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
29
+ --imlib_chat_components_imPermaLink_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
30
+ --imlib_chat_components_textBubble_see_more_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
31
+ --imlib_chat_components_textBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
32
+ --imlib_chat_components_messageStatus_read_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
33
+ --imlib_chat_components_emoji_tab_line_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
34
+
35
+ /* failed colors */
36
+ --imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
37
+ --imlib_chat_components_locationBubble_url_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
+ --imlib_chat_components_textBubble_see_more_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_textBubble_url_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
+ }
@@ -18,10 +18,10 @@
18
18
 
19
19
 
20
20
  .icon :global .path1:before {
21
- color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
21
+ color: var(--imlib_chat_components_twotone_icon_bg) !important;
22
22
  opacity: 1;
23
23
  }
24
24
 
25
25
  .icon :global .path2:before {
26
- color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
26
+ color: var(--imlib_chat_components_twotone_icon_border) !important;
27
27
  }
@@ -22,21 +22,16 @@
22
22
  max-height: var(--zd_size48) !important;
23
23
  background-color: transparent !important;
24
24
  border: 0 !important;
25
- border-bottom: 1px solid
26
- var(--imlib_chat_components_attachmentPreviewBody_editor_border_color) !important;
25
+ border-bottom: 1px solid var(--zdt_textarea_default_border) !important;
27
26
  padding: 0 !important;
28
27
  }
29
28
 
30
29
  .editableDiv:hover {
31
- border-color: var(
32
- --imlib_chat_components_attachmentPreviewBody_editor_border_hover_color
33
- ) !important;
30
+ border-color: var(--zdt_textarea_hover_border) !important;
34
31
  }
35
32
 
36
33
  .editableDiv:focus {
37
- border-color: var(
38
- --imlib_chat_components_attachmentPreviewBody_editor_border_active_color
39
- ) !important;
34
+ border-color: var(--zdt_textarea_focus_border) !important;
40
35
  }
41
36
 
42
37
  .imgContent,
@@ -49,6 +44,7 @@
49
44
  .imgContent, .zoomContent {
50
45
  background-color: var(--imlib_chat_components_attachmentPreviewBody_bg_color);
51
46
  padding: var(--zd_size40);
47
+ background-color: var(--imlib_chat_components_attachmentPreview_body_bg_color);
52
48
  }
53
49
 
54
50
  [dir=ltr] .imgContent, [dir=ltr] .zoomContent {
@@ -2,10 +2,10 @@
2
2
  .imgPreviewerheader {
3
3
  position: relative;
4
4
  background-color: var(
5
- --imlib_chat_components_attachmentPreviewHeader_bg_color
5
+ --imlib_chat_components_attachmentPreview_bg_color
6
6
  );
7
7
  padding: var(--zd_size15) var(--zd_size40);
8
- border-bottom: var(--zd_size1) solid var(--zd_im_common_border);
8
+ border-bottom: var(--zd_size1) solid var(--imlib_chat_components_common_border);
9
9
  }
10
10
  [dir=ltr] .imgPreviewerheader {
11
11
  border-top-left-radius: var(--zd_size5);
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  .imgName {
20
- color: var(--imlib_chat_components_attachmentPreviewHeader_name_color);
20
+ color: var(--imlib_chat_components_attachmentPreview_name_color);
21
21
  font-size: var(--zd_font_size17);
22
22
  font-family: var(--zd_semibold);
23
23
  composes: dotted from '../../css/common.module.css';
@@ -27,7 +27,7 @@
27
27
 
28
28
  .imgSize {
29
29
  font-size: var(--zd_font_size13);
30
- color: var(--imlib_chat_components_attachmentPreviewHeader_size_color);
30
+ color: var(--imlib_chat_components_attachmentPreview_size_color);
31
31
  composes: dotted from '../../css/common.module.css';
32
32
  max-width: var(--zd_size150);
33
33
  }
@@ -41,12 +41,12 @@
41
41
  }
42
42
 
43
43
  .icon :global .path1:before {
44
- color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
44
+ color: var(--imlib_chat_components_twotone_icon_bg) !important;
45
45
  opacity: 1;
46
46
  }
47
47
 
48
48
  .icon :global .path2:before {
49
- color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
49
+ color: var(--imlib_chat_components_twotone_icon_border) !important;
50
50
  }
51
51
 
52
52
  .icon :global .path2{
@@ -1,6 +1,6 @@
1
1
  .footerTab {
2
2
  position: relative;
3
- border-top: 1px solid var(--imlib_chat_components_emojiFooter_border_color);
3
+ border-top: 1px solid var(--imlib_chat_components_common_border);
4
4
  }
5
5
 
6
6
  .tabIcon {
@@ -21,7 +21,7 @@
21
21
  height: var(--zd_size2) ;
22
22
  transition: 0.3s ease;
23
23
  width: 100% ;
24
- background-color: var(--imlib_chat_components_emojiFooter_tabLine);
24
+ background-color: var(--imlib_chat_components_emoji_tab_line_color);
25
25
  }
26
26
 
27
27
  [dir=ltr] .tabLine {
@@ -1,12 +1,11 @@
1
1
  .container {
2
2
  padding: var(--zd_size10) ;
3
- border-bottom: 1px solid
4
- var(--imlib_chat_components_emojisHeader_border_color);
3
+ border-bottom: 1px solid var(--imlib_chat_components_common_border);
5
4
  }
6
5
 
7
6
  .emojisSearch {
8
7
  position: relative;
9
- background-color: var(--imlib_chat_components_emojisHeader_bg_color);
8
+ background-color: var(--imlib_chat_components_emoji_popup_search_bg);
10
9
  }
11
10
 
12
11
  .searchInput {
@@ -25,6 +24,7 @@
25
24
 
26
25
  .searchIcon {
27
26
  position: absolute;
27
+ color: var(--imlib_chat_components_primary_text);
28
28
  }
29
29
 
30
30
  [dir=ltr] .searchIcon {
@@ -67,6 +67,24 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
67
67
  import '@zohodesk/variables/es/fontFamilyVariables.module.css';
68
68
  import '@zohodesk/variables/assets/transitionVariables.module.css';
69
69
  import '@zohodesk/variables/assets/no_transitionVariables.module.css';
70
+ import "../../assets/Appearance/dark/mode/General_DarkMode.module.css";
71
+ import "../../assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css";
72
+ import "../../assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css";
73
+ import "../../assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css";
74
+ import "../../assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css";
75
+ import "../../assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css";
76
+ import "../../assets/Appearance/light/mode/General_LightMode.module.css";
77
+ import "../../assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css";
78
+ import "../../assets/Appearance/light/themes/green/green_General_LightTheme.module.css";
79
+ import "../../assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css";
80
+ import "../../assets/Appearance/light/themes/red/red_General_LightTheme.module.css";
81
+ import "../../assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css";
82
+ import "../../assets/Appearance/pureDark/mode/General_PureDarkMode.module.css";
83
+ import "../../assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css";
84
+ import "../../assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css";
85
+ import "../../assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css";
86
+ import "../../assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css";
87
+ import "../../assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css";
70
88
  export default function DeskAssets(props) {
71
89
  const {
72
90
  children
@@ -42,20 +42,22 @@ export default function ThemeWrapper(props) {
42
42
  /** ** ThemeConfigurations Handling *** */
43
43
 
44
44
  const {
45
- themeConfigurations,
46
45
  mode,
47
46
  theme
48
47
  } = getThemeConfigurations({
49
48
  mode: propMode,
50
49
  theme: propTheme
51
50
  });
52
- const configurations = propThemeConfigurations || themeConfigurations;
51
+ const configurations = propThemeConfigurations;
53
52
  /** ** Style Handling *** */
54
53
 
55
54
  const selector = `#${styleTagId}`;
56
55
  const prefix = '--imlib_';
57
56
  const configuration = useMemo(() => [configurations], [configurations]);
58
- const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
57
+ const customizedVariables = useMemo(() => {
58
+ const cssVariables = propThemeConfigurations ? getCustomizedCssVariables(configuration, prefix) : null;
59
+ return cssVariables;
60
+ }, [configuration, prefix, propThemeConfigurations]);
59
61
  const wrapperDivProps = getWrapperDivProps({
60
62
  modeKey,
61
63
  themeKey,
@@ -71,9 +73,9 @@ export default function ThemeWrapper(props) {
71
73
  }), /*#__PURE__*/React.createElement("div", {
72
74
  "data-portal": EDITOR_POPUP_TARGET_PORTAL
73
75
  })), []);
74
- const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
76
+ const renderStyle = useCallback(() => customizedVariables ? /*#__PURE__*/React.createElement("style", {
75
77
  id: "zoho-im-variables"
76
- }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
78
+ }, `${selector}{${customizedVariables}}`) : null, [selector, customizedVariables]);
77
79
  const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
78
80
  containerRef: containerRef.current,
79
81
  customStyle: tooltipCustomStyle,