@zohoim/chat-components 1.1.0 → 1.1.1-beta.2

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 +4 -0
  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
package/package.json CHANGED
@@ -1,22 +1,27 @@
1
1
  {
2
2
  "name": "@zohoim/chat-components",
3
- "version": "1.1.0",
3
+ "version": "1.1.1-beta.2",
4
4
  "description": "Chat Components",
5
- "main": "es/index.js",
5
+ "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "scripts": {
8
- "build": "react-cli build:component:es",
9
- "build_watch": "npm run build -- -w",
10
- "clean": "react-cli clean unittest coverage es result.json",
8
+ "build": "npm run build:lib && npm run build:es",
9
+ "build:lib": "react-cli build:component:cmjs",
10
+ "build:es": "react-cli build:library:es",
11
+ "build:local": " npm run build && npm run rtl && npm run cssVariableConvert ",
12
+ "build_watch": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
13
+ "clean": "react-cli clean unittest coverage es result.json && mkdir assets",
11
14
  "rtl": "react-cli rtl ./src ./es",
12
- "prepare": "npm run clean && npm run build && npm run rtl && npm run cssVariableConvert",
15
+ "prepare": "react-cli clean assets && npm run init && npm run build && npm run rtl && npm run cssVariableConvert ",
13
16
  "test": "react-cli test",
14
17
  "test:debug": "react-cli test --runInBand --watch",
15
18
  "create-icons": "node ./src/icons/create-icon-components --sourucePath=./factory --targetPath=./iconSrc",
16
- "cssVariableConvert": "react-cli variableConverter ./es ./es",
19
+ "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
17
20
  "variable:addignore": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
18
21
  "variable:convert": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
19
- "variable:check": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ../../node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
22
+ "variable:check": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ../../node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
23
+ "build:variables": "react-cli clean ./assets && node ./preprocess/index",
24
+ "init": "npm run clean && npm run build:variables"
20
25
  },
21
26
  "author": "ZohoDesk - IM Team",
22
27
  "license": "ISC",
@@ -26,6 +31,7 @@
26
31
  },
27
32
  "files": [
28
33
  "es",
34
+ "assets",
29
35
  "!**/__tests__"
30
36
  ],
31
37
  "dependencies": {
@@ -36,14 +42,15 @@
36
42
  "@zohodesk/utils": "1.3.13",
37
43
  "@zohodesk/variables": "1.0.0",
38
44
  "@zohodesk/virtualizer": "1.0.13",
39
- "@zohoim/chat-components-hooks": "1.1.0",
40
- "@zohoim/chat-components-utils": "1.1.0"
45
+ "@zohoim/chat-components-hooks": "1.1.1-beta.2",
46
+ "@zohoim/chat-components-utils": "1.1.1-beta.2"
41
47
  },
42
48
  "devDependencies": {
49
+ "@zohodesk-private/color-variable-preprocessor": "1.2.1",
43
50
  "@zohodesk-private/css-variable-migrator": "1.0.7",
44
51
  "html-to-react": "1.7.0 ",
45
52
  "jsdom": "23.0.0",
46
53
  "react-to-jsx": "1.3.2"
47
54
  },
48
- "gitHead": "e631d299a79c7306a37882c9c32d3dcdc07acd95"
55
+ "gitHead": "626644b2b66a2e3053c2bf15a791e29bd28c4287"
49
56
  }
@@ -1,17 +0,0 @@
1
- export const imIntegrationIcon = {
2
- path0_color: '#ffffff40',
3
- path1_color: '#fff',
4
- whatsapp_color: '#24d366',
5
- telegram_color: '#4fa7d8',
6
- wechat_color: '#2dc100',
7
- line_color: '#01b901',
8
- twillio_color: '#f22f46',
9
- instagram_color: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%)',
10
- asap_color: 'linear-gradient(180deg, #A375FF 0%, #7732FF 100%)',
11
- fb_color: '#006aff'
12
- };
13
- export const imTtIcon = {
14
- path0_color: '#ffffff40',
15
- path1_color: '#fff'
16
- };
17
- export const messagetextColor = '#e2e4e6';
@@ -1,133 +0,0 @@
1
- /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
3
- import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
4
- export default {
5
- library: 'chat_components',
6
- variables: {
7
- actionIconWrapper: {
8
- color: actionIconWrapperColor,
9
- bg_color: '#2c3b4d',
10
- border_color: '#3f536b'
11
- },
12
- attachmentBubble: {
13
- bg_color: '#232b38',
14
- bg_color_failed: failedBg,
15
- border_color: '#2d3748',
16
- border_color_failed: failedBdr
17
- },
18
- attachmentBubbleInfo: {
19
- fileName_color: '#e2e4e6',
20
- fileName_color_failed: failedColor,
21
- fileSize_color: '#788190',
22
- fileSize_color_failed: '#788190'
23
- },
24
- articleBubble: {
25
- bg_color: '#232b38',
26
- bg_color_failed: failedBg,
27
- border_color: '#2d3748',
28
- border_color_failed: failedBdr,
29
- title_color: '#e2e4e6',
30
- title_color_failed: failedColor,
31
- summary_color: '#e2e4e6',
32
- summary_color_failed: failedColor
33
- },
34
- imAutoMessageInfo: {
35
- text_color: '#828994'
36
- },
37
- imIntegrationIcon,
38
- imTtIcon,
39
- imMessageContent: {
40
- text_color: '#a8b0bd'
41
- },
42
- imMessageMeta: {
43
- time_color: '#a8b0bd'
44
- },
45
- imPermaLink: {
46
- url_color: '#479dff'
47
- },
48
- imageBubble: {
49
- bg_color: '#232b38',
50
- bg_color_failed: failedBg,
51
- alt_text_color: '#e2e4e6',
52
- alt_text_color_failed: failedColor,
53
- border_color: '#2d3748',
54
- border_color_failed: failedBdr
55
- },
56
- locationBubble: {
57
- bg_color: '#232b38',
58
- bg_color_failed: failedBg,
59
- border_color: '#2d3748',
60
- border_color_failed: failedBdr,
61
- url_color: primaryBlue,
62
- url_color_failed: failedUrlColor
63
- },
64
- messageBox: {
65
- incoming_bg_color: incomingBubbleBgColor,
66
- outgoing_bg_color: '#2c3b4d',
67
- bg_color: '#f1f7fe',
68
- failed_bg_color: failedBgWrapper,
69
- text_color: messagetextColor,
70
- failed_text_color: '#000'
71
- },
72
- messageBubble: {
73
- active_bg_color: bubbleActiveBgColor,
74
- messageBox_footer_text_color: '#5a616f'
75
- },
76
- messageStatus: {
77
- send_color: messageStatusSendColor,
78
- read_color: '#479dff',
79
- failed_color: messageStatusFailedColor
80
- },
81
- replyBubble: {
82
- border_color: '#2d3748',
83
- border_color_failed: failedBdr
84
- },
85
- replyBubbleContent: {
86
- bg_color: '#232b38',
87
- bg_color_failed: failedBg,
88
- border_color: '#2d3748',
89
- border_color_failed: failedBdr,
90
- line_color: '#cddbf2',
91
- line_color_failed: failedLine,
92
- sender_color: '#e2e4e6',
93
- sender_color_failed: failedColor,
94
- content_color: '#e2e4e6',
95
- content_color_failed: failedColor
96
- },
97
- replyBubbleHeader: {
98
- text_color: '#e2e4e6',
99
- text_color_failed: failedColor,
100
- time_color: '#828994',
101
- time_color_failed: failedColor
102
- },
103
- textBubble: {
104
- text_color: '#e2e4e6',
105
- text_color_failed: failedColor,
106
- see_more_color: primaryBlue,
107
- see_more_color_failed: failedUrlColor,
108
- url_color: primaryBlue,
109
- url_color_failed: failedUrlColor
110
- },
111
- videoBubble: {
112
- border_color: '#2d3748',
113
- border_color_failed: failedBdr
114
- },
115
- emojiFooter: {
116
- tabLine: primaryBlue,
117
- border_color: '#2d3748'
118
- },
119
- replyEditor,
120
- emojiPopup: { ...emojiPopup,
121
- ttIcon_path1_color: '#5f6478',
122
- ttIcon_path2_color: 'var(--dot_platinum)'
123
- },
124
- emojisHeader,
125
- attachmentPreviewHeader,
126
- attachmentPreviewBody: {
127
- bg_color: '#262f3d',
128
- editor_border_color: '#3e4d63',
129
- editor_border_hover_color: '#828994',
130
- editor_border_active_color: '#479dff'
131
- }
132
- }
133
- };
@@ -1,35 +0,0 @@
1
- export const incomingBubbleBgColor = '#232b38';
2
- export const bubbleActiveBgColor = '#1b2e33';
3
- export const actionIconWrapperColor = '#e2e4e6';
4
- export const messageStatusSendColor = '#61667a';
5
- export const messageStatusFailedColor = '#de3535';
6
- export const primaryBlue = '#479dff';
7
- export const primaryGreen = '#45a159';
8
- export const primaryOrange = '#ff801f';
9
- export const primaryRed = '#e94f4f';
10
- export const primaryYellow = '#d79835';
11
- export const failedBgWrapper = '#f4b5bc';
12
- export const failedBg = '#f6dcdf';
13
- export const failedBdr = '#eb9ea7';
14
- export const failedLine = '#eb9ea7';
15
- export const failedColor = '#000';
16
- export const failedUrlColor = '#0a73eb';
17
- export const emojiPopup = {
18
- bg: '#f1f4f9',
19
- border: '#f1f4f9',
20
- titleColor: '#aaa'
21
- };
22
- export const replyEditor = {
23
- bg: '#242b38',
24
- color: '#e2e4e6',
25
- placeholder: '#5a616f'
26
- };
27
- export const emojisHeader = {
28
- bg_color: '#283442',
29
- border_color: '#2d3748'
30
- };
31
- export const attachmentPreviewHeader = {
32
- bg_color: '#232b38',
33
- name_color: '#e2e4e6',
34
- size_color: '#a8b0bd'
35
- };
@@ -1,132 +0,0 @@
1
- /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
3
- import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
4
- export default {
5
- library: 'chat_components',
6
- variables: {
7
- actionIconWrapper: {
8
- color: actionIconWrapperColor,
9
- bg_color: '#26373b',
10
- border_color: '#2d4e42'
11
- },
12
- attachmentBubble: {
13
- bg_color: '#232b38',
14
- bg_color_failed: failedBg,
15
- border_color: '#2d3748',
16
- border_color_failed: failedBdr
17
- },
18
- attachmentBubbleInfo: {
19
- fileName_color: '#e2e4e6',
20
- fileName_color_failed: failedColor,
21
- fileSize_color: '#788190',
22
- fileSize_color_failed: '#788190'
23
- },
24
- articleBubble: {
25
- bg_color: '#232b38',
26
- bg_color_failed: failedBg,
27
- border_color: '#2d3748',
28
- border_color_failed: failedBdr,
29
- title_color: '#e2e4e6',
30
- title_color_failed: failedColor,
31
- summary_color: '#e2e4e6',
32
- summary_color_failed: failedColor
33
- },
34
- imAutoMessageInfo: {
35
- text_color: '#828994'
36
- },
37
- imIntegrationIcon,
38
- imTtIcon,
39
- imMessageContent: {
40
- text_color: '#a8b0bd'
41
- },
42
- imMessageMeta: {
43
- time_color: '#a8b0bd'
44
- },
45
- imPermaLink: {
46
- url_color: '#45a159'
47
- },
48
- imageBubble: {
49
- bg_color: '#232b38',
50
- bg_color_failed: failedBg,
51
- alt_text_color: '#e2e4e6',
52
- alt_text_color_failed: failedColor,
53
- border_color: '#2d3748',
54
- border_color_failed: failedBdr
55
- },
56
- locationBubble: {
57
- bg_color: '#232b38',
58
- bg_color_failed: failedBg,
59
- border_color: '#2d3748',
60
- border_color_failed: failedBdr,
61
- url_color: primaryGreen,
62
- url_color_failed: failedUrlColor
63
- },
64
- messageBox: {
65
- incoming_bg_color: incomingBubbleBgColor,
66
- outgoing_bg_color: '#26373b',
67
- bg_color: '#f1f7fe',
68
- failed_bg_color: failedBgWrapper,
69
- text_color: messagetextColor
70
- },
71
- messageBubble: {
72
- active_bg_color: bubbleActiveBgColor,
73
- messageBox_footer_text_color: '#5a616f'
74
- },
75
- messageStatus: {
76
- send_color: messageStatusSendColor,
77
- read_color: '#45a159',
78
- failed_color: messageStatusFailedColor
79
- },
80
- replyBubble: {
81
- border_color: '#2d3748',
82
- border_color_failed: failedBdr
83
- },
84
- replyBubbleContent: {
85
- bg_color: 'hsl(191.43deg 21.65% 13.02%)',
86
- bg_color_failed: failedBg,
87
- border_color: '#2d3748',
88
- border_color_failed: failedBdr,
89
- line_color: '#cddbf2',
90
- line_color_failed: failedLine,
91
- sender_color: '#e2e4e6',
92
- sender_color_failed: failedColor,
93
- content_color: '#e2e4e6',
94
- content_color_failed: failedColor
95
- },
96
- replyBubbleHeader: {
97
- text_color: '#e2e4e6',
98
- text_color_failed: failedColor,
99
- time_color: '#828994',
100
- time_color_failed: failedColor
101
- },
102
- textBubble: {
103
- text_color: '#e2e4e6',
104
- text_color_failed: failedColor,
105
- see_more_color: primaryGreen,
106
- see_more_color_failed: failedUrlColor,
107
- url_color: primaryGreen,
108
- url_color_failed: failedUrlColor
109
- },
110
- videoBubble: {
111
- border_color: '#2d3748',
112
- border_color_failed: failedBdr
113
- },
114
- emojiFooter: {
115
- tabLine: primaryGreen,
116
- border_color: '#2d3748'
117
- },
118
- emojiPopup: { ...emojiPopup,
119
- ttIcon_path1_color: '#5f6478',
120
- ttIcon_path2_color: 'var(--dot_platinum)'
121
- },
122
- replyEditor,
123
- emojisHeader,
124
- attachmentPreviewHeader,
125
- attachmentPreviewBody: {
126
- bg_color: '#262f3d',
127
- editor_border_color: '#3e4d63',
128
- editor_border_hover_color: '#828994',
129
- editor_border_active_color: '#45a159'
130
- }
131
- }
132
- };
@@ -1,132 +0,0 @@
1
- /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
3
- import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
4
- export default {
5
- library: 'chat_components',
6
- variables: {
7
- actionIconWrapper: {
8
- color: actionIconWrapperColor,
9
- bg_color: '#323136',
10
- border_color: '#4f3c33'
11
- },
12
- attachmentBubble: {
13
- bg_color: '#232b38',
14
- bg_color_failed: failedBg,
15
- border_color: '#2d3748',
16
- border_color_failed: failedBdr
17
- },
18
- attachmentBubbleInfo: {
19
- fileName_color: '#e2e4e6',
20
- fileName_color_failed: failedColor,
21
- fileSize_color: '#788190',
22
- fileSize_color_failed: '#788190'
23
- },
24
- articleBubble: {
25
- bg_color: '#232b38',
26
- bg_color_failed: failedBg,
27
- border_color: '#2d3748',
28
- border_color_failed: failedBdr,
29
- title_color: '#e2e4e6',
30
- title_color_failed: failedColor,
31
- summary_color: '#e2e4e6',
32
- summary_color_failed: failedColor
33
- },
34
- imAutoMessageInfo: {
35
- text_color: '#828994'
36
- },
37
- imIntegrationIcon,
38
- imTtIcon,
39
- imMessageContent: {
40
- text_color: '#a8b0bd'
41
- },
42
- imMessageMeta: {
43
- time_color: '#a8b0bd'
44
- },
45
- imPermaLink: {
46
- url_color: '#ff801f'
47
- },
48
- imageBubble: {
49
- bg_color: '#232b38',
50
- bg_color_failed: failedBg,
51
- alt_text_color: '#e2e4e6',
52
- alt_text_color_failed: failedColor,
53
- border_color: '#2d3748',
54
- border_color_failed: failedBdr
55
- },
56
- locationBubble: {
57
- bg_color: '#232b38',
58
- bg_color_failed: failedBg,
59
- border_color: '#2d3748',
60
- border_color_failed: failedBdr,
61
- url_color: primaryOrange,
62
- url_color_failed: failedUrlColor
63
- },
64
- messageBox: {
65
- incoming_bg_color: incomingBubbleBgColor,
66
- outgoing_bg_color: '#323136',
67
- bg_color: '#f1f7fe',
68
- failed_bg_color: failedBgWrapper,
69
- text_color: messagetextColor
70
- },
71
- messageBubble: {
72
- active_bg_color: bubbleActiveBgColor,
73
- messageBox_footer_text_color: '#5a616f'
74
- },
75
- messageStatus: {
76
- send_color: messageStatusSendColor,
77
- read_color: '#ff801f',
78
- failed_color: messageStatusFailedColor
79
- },
80
- replyBubble: {
81
- border_color: '#2d3748',
82
- border_color_failed: failedBdr
83
- },
84
- replyBubbleContent: {
85
- bg_color: '#232b38',
86
- bg_color_failed: failedBg,
87
- border_color: '#2d3748',
88
- border_color_failed: failedBdr,
89
- line_color: '#cddbf2',
90
- line_color_failed: failedLine,
91
- sender_color: '#e2e4e6',
92
- sender_color_failed: failedColor,
93
- content_color: '#e2e4e6',
94
- content_color_failed: failedColor
95
- },
96
- replyBubbleHeader: {
97
- text_color: '#e2e4e6',
98
- text_color_failed: failedColor,
99
- time_color: '#828994',
100
- time_color_failed: failedColor
101
- },
102
- textBubble: {
103
- text_color: '#e2e4e6',
104
- text_color_failed: failedColor,
105
- see_more_color: primaryOrange,
106
- see_more_color_failed: failedUrlColor,
107
- url_color: primaryOrange,
108
- url_color_failed: failedUrlColor
109
- },
110
- videoBubble: {
111
- border_color: '#2d3748',
112
- border_color_failed: failedBdr
113
- },
114
- emojiFooter: {
115
- tabLine: primaryOrange,
116
- border_color: '#2d3748'
117
- },
118
- emojiPopup: { ...emojiPopup,
119
- ttIcon_path1_color: '#5f6478',
120
- ttIcon_path2_color: 'var(--dot_platinum)'
121
- },
122
- replyEditor,
123
- emojisHeader,
124
- attachmentPreviewHeader,
125
- attachmentPreviewBody: {
126
- bg_color: '#262f3d',
127
- editor_border_color: '#3e4d63',
128
- editor_border_hover_color: '#828994',
129
- editor_border_active_color: '#ff801f'
130
- }
131
- }
132
- };
@@ -1,132 +0,0 @@
1
- /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
3
- import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
4
- export default {
5
- library: 'chat_components',
6
- variables: {
7
- actionIconWrapper: {
8
- color: actionIconWrapperColor,
9
- bg_color: '#312d3a',
10
- border_color: '#4b323d'
11
- },
12
- attachmentBubble: {
13
- bg_color: 'hsl(258.46deg 12.62% 16.2%)',
14
- bg_color_failed: failedBg,
15
- border_color: 'hsl(258.46deg 12.62% 23.2%)',
16
- border_color_failed: failedBdr
17
- },
18
- attachmentBubbleInfo: {
19
- fileName_color: '#e2e4e6',
20
- fileName_color_failed: failedColor,
21
- fileSize_color: '#788190',
22
- fileSize_color_failed: '#788190'
23
- },
24
- articleBubble: {
25
- bg_color: 'hsl(258.46deg 12.62% 16.2%)',
26
- bg_color_failed: failedBg,
27
- border_color: 'hsl(258.46deg 12.62% 23.2%)',
28
- border_color_failed: failedBdr,
29
- title_color: '#e2e4e6',
30
- title_color_failed: failedColor,
31
- summary_color: '#e2e4e6',
32
- summary_color_failed: failedColor
33
- },
34
- imAutoMessageInfo: {
35
- text_color: '#828994'
36
- },
37
- imIntegrationIcon,
38
- imTtIcon,
39
- imMessageContent: {
40
- text_color: '#a8b0bd'
41
- },
42
- imMessageMeta: {
43
- time_color: '#a8b0bd'
44
- },
45
- imPermaLink: {
46
- url_color: '#e94f4f'
47
- },
48
- imageBubble: {
49
- bg_color: 'hsl(258.46deg 12.62% 16.2%)',
50
- bg_color_failed: failedBg,
51
- alt_text_color: '#e2e4e6',
52
- alt_text_color_failed: failedColor,
53
- border_color: 'hsl(258.46deg 12.62% 23.2%)',
54
- border_color_failed: failedBdr
55
- },
56
- locationBubble: {
57
- bg_color: 'hsl(258.46deg 12.62% 16.2%)',
58
- bg_color_failed: failedBg,
59
- border_color: 'hsl(258.46deg 12.62% 23.2%)',
60
- border_color_failed: failedBdr,
61
- url_color: primaryRed,
62
- url_color_failed: failedUrlColor
63
- },
64
- messageBox: {
65
- incoming_bg_color: incomingBubbleBgColor,
66
- outgoing_bg_color: '#312d3a',
67
- bg_color: '#f1f7fe',
68
- failed_bg_color: failedBgWrapper,
69
- text_color: messagetextColor
70
- },
71
- messageBubble: {
72
- active_bg_color: bubbleActiveBgColor,
73
- messageBox_footer_text_color: '#5a616f'
74
- },
75
- messageStatus: {
76
- send_color: messageStatusSendColor,
77
- read_color: '#e94f4f',
78
- failed_color: messageStatusFailedColor
79
- },
80
- replyBubble: {
81
- border_color: 'hsl(258.46deg 12.62% 23.2%)',
82
- border_color_failed: failedBdr
83
- },
84
- replyBubbleContent: {
85
- bg_color: 'hsl(258.46deg 12.62% 16.2%)',
86
- bg_color_failed: failedBg,
87
- border_color: 'hsl(258.46deg 12.62% 23.2%)',
88
- border_color_failed: failedBdr,
89
- line_color: '#cddbf2',
90
- line_color_failed: failedLine,
91
- sender_color: '#e2e4e6',
92
- sender_color_failed: failedColor,
93
- content_color: '#e2e4e6',
94
- content_color_failed: failedColor
95
- },
96
- replyBubbleHeader: {
97
- text_color: '#e2e4e6',
98
- text_color_failed: failedColor,
99
- time_color: '#828994',
100
- time_color_failed: failedColor
101
- },
102
- textBubble: {
103
- text_color: '#e2e4e6',
104
- text_color_failed: failedColor,
105
- see_more_color: primaryRed,
106
- see_more_color_failed: failedUrlColor,
107
- url_color: primaryRed,
108
- url_color_failed: failedUrlColor
109
- },
110
- videoBubble: {
111
- border_color: 'hsl(258.46deg 12.62% 23.2%)',
112
- border_color_failed: failedBdr
113
- },
114
- emojiFooter: {
115
- tabLine: primaryRed,
116
- border_color: 'hsl(258.46deg 12.62% 23.2%)'
117
- },
118
- emojiPopup: { ...emojiPopup,
119
- ttIcon_path1_color: '#5f6478',
120
- ttIcon_path2_color: 'var(--dot_platinum)'
121
- },
122
- replyEditor,
123
- emojisHeader,
124
- attachmentPreviewHeader,
125
- attachmentPreviewBody: {
126
- bg_color: '#262f3d',
127
- editor_border_color: '#3e4d63',
128
- editor_border_hover_color: '#828994',
129
- editor_border_active_color: '#e94f4f'
130
- }
131
- }
132
- };