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

package/es/EmojisList/css/EmojisList.module.css

@@ -1,7 +1,7 @@
 .varClass {
-  --emoji-groupName-size: 13px;
-  --emoji-singleList-size: 32px;
-  --emoji-multipleList-size: 300px;
+  --emoji-groupName-size: var(--zd_font_size13);
+  --emoji-singleList-size: var(--zd_size32);
+  --emoji-multipleList-size: var(--zd_size300);
 }
 
 .emojisList {

package/es/ImageBubble/css/ImageBubble.module.css

@@ -1,5 +1,5 @@
 .varClass {
-  --imageBubble-wrapper_height: 200px;
+  --imageBubble-wrapper_height: var(--zd_size200);
   --imageBubble-wrapper_width: 23.75rem;
   --imageBubble-wrapper_max_width: 100%;
   --imageBubble-blur_img_width: 100%;

package/es/MediaBubbleWrapper/MediaBubbleWrapper.js

@@ -1,5 +1,3 @@
-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); }
-
 /** ** Libraries *** */
 import React, { useMemo, Fragment } from 'react';
 /** ** Hooks *** */
@@ -49,13 +47,13 @@ export default function MediaBubbleWrapper(props) {
     fileURL,
     fileType
   });
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, {
     customStyle: bubbleInfoCustomStyle,
     fileName: fileName,
-    fileSize: fileSize
-  }, attachmentBubbleInfoProps, {
+    fileSize: fileSize,
+    ...attachmentBubbleInfoProps,
     isFailed: isFailed
-  })), mediaComponent);
+  }), mediaComponent);
 }
 MediaBubbleWrapper.propTypes = mediaBubbleWrapperPropTypes;
 MediaBubbleWrapper.defaultProps = mediaBubbleWrapperDefaultProps;

package/es/Message/Message.js

@@ -1,5 +1,3 @@
-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); }
-
 /** ** Libraries *** */
 import React, { useCallback } from 'react';
 /** ** Constants *** */
@@ -81,7 +79,9 @@ export default function Message(props) {
         title: name,
         renderIcon: renderOwnerStatusIcon
       };
-      return /*#__PURE__*/React.createElement(MessageAvatar, _extends({}, props, messageOwnerProps));
+      return /*#__PURE__*/React.createElement(MessageAvatar, { ...props,
+        ...messageOwnerProps
+      });
     }
 
     return null;
@@ -93,7 +93,9 @@ export default function Message(props) {
       messageStatus: status,
       title: statusTooltip
     };
-    return isShowMessageStatus && status ? /*#__PURE__*/React.createElement(MessageStatus, _extends({}, props, messageStatusProps)) : null;
+    return isShowMessageStatus && status ? /*#__PURE__*/React.createElement(MessageStatus, { ...props,
+      ...messageStatusProps
+    }) : null;
   }, [status, statusTooltip, isShowMessageStatus, messageStatusProps]);
   /** ** Render MessageBox *** */
 
@@ -105,7 +107,9 @@ export default function Message(props) {
       isIncoming,
       isOutgoing
     };
-    return /*#__PURE__*/React.createElement(MessageBox, _extends({}, props, messageBoxProps));
+    return /*#__PURE__*/React.createElement(MessageBox, { ...props,
+      ...messageBoxProps
+    });
   }, [handleRenderMessageStatus, renderContent, messageBoxProps, isFailed, isIncoming, isOutgoing]);
   /** ** Render Message Actions *** */
 
@@ -117,9 +121,11 @@ export default function Message(props) {
       onMouseEnter: onMouseEnterAction,
       setRetainMessageActions
     };
-    return /*#__PURE__*/React.createElement(MessageActions, _extends({}, props, messageActionsProps));
+    return /*#__PURE__*/React.createElement(MessageActions, { ...props,
+      ...messageActionsProps
+    });
   }, [actions, onSelectAction, onMouseEnterAction, renderSecondaryActions, messageActionsProps, setRetainMessageActions]);
-  return /*#__PURE__*/React.createElement(MessageBubble, _extends({
+  return /*#__PURE__*/React.createElement(MessageBubble, {
     direction: direction,
     isActive: isActive,
     needMessageActions: needMessageActions,
@@ -127,8 +133,9 @@ export default function Message(props) {
     renderMessageActions: handleRenderMessageActions,
     renderMessageBox: handleRenderMessageBox,
     renderMessageOwner: handleRenderMessageOwner,
-    retainMessageActions: retainMessageActions
-  }, messageBubbleProps));
+    retainMessageActions: retainMessageActions,
+    ...messageBubbleProps
+  });
 }
 Message.propTypes = messagePropTypes;
 Message.defaultProps = messageDefaultProps;

package/es/MessageAction/MessageAction.js

@@ -1,5 +1,3 @@
-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); }
-
 /** ** Libraries *** */
 import React, { useCallback } from 'react';
 /** ** Components *** */
@@ -34,12 +32,13 @@ export default function MessageAction(props) {
     let {
       id
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return needMoreActionItemIcon ? /*#__PURE__*/React.createElement(ActionIcon, _extends({
+    return needMoreActionItemIcon ? /*#__PURE__*/React.createElement(ActionIcon, {
       id: id,
-      needIconOnly: true
-    }, actionIconProps)) : null;
+      needIconOnly: true,
+      ...actionIconProps
+    }) : null;
   }, [actionIconProps, needMoreActionItemIcon]);
-  return isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, _extends({
+  return isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, {
     closePopup: closePopup,
     displayText: displayText,
     id: id,
@@ -48,15 +47,17 @@ export default function MessageAction(props) {
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     renderIcon: renderIcon,
-    title: iconTitle
-  }, moreActionItemProps)) : /*#__PURE__*/React.createElement(ActionIcon, _extends({
+    title: iconTitle,
+    ...moreActionItemProps
+  }) : /*#__PURE__*/React.createElement(ActionIcon, {
     id: id,
     isActive: isActive,
     isDisabled: isDisabled,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    title: iconTitle
-  }, actionIconProps));
+    title: iconTitle,
+    ...actionIconProps
+  });
 }
 MessageAction.propTypes = messageActionsPropTypes;
 MessageAction.defaultProps = messageActionsDefaultProps;

package/es/MessageActions/MessageActions.js

@@ -1,5 +1,3 @@
-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); }
-
 /** ** Libraries *** */
 import React, { useCallback, Fragment } from 'react';
 /** ** Components *** */
@@ -75,7 +73,7 @@ export default function MessageActions(props) {
       iconTitle,
       isDisabled
     } = action || dummyObject;
-    return /*#__PURE__*/React.createElement(MessageAction, _extends({
+    return /*#__PURE__*/React.createElement(MessageAction, {
       key: id,
       closePopup: closePopup,
       displayText: displayText,
@@ -84,8 +82,9 @@ export default function MessageActions(props) {
       isDisabled: isDisabled,
       isShowInMore: isShowInMore,
       onClick: handleClickAction,
-      onMouseEnter: handleMouseEnterAction
-    }, messageActionProps));
+      onMouseEnter: handleMouseEnterAction,
+      ...messageActionProps
+    });
   }, [handleClickAction, handleMouseEnterAction, messageActionProps]);
   /* Hooks handling */
 
@@ -105,15 +104,18 @@ export default function MessageActions(props) {
   const renderMoreIcon = useCallback(() => /*#__PURE__*/React.createElement("div", {
     className: newStyle.moreIcon
   }, /*#__PURE__*/React.createElement(MoreIcon, null)), [newStyle.moreIcon]);
-  const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, _extends({
-    renderIcon: renderMoreIcon
-  }, componentProps, actionIconWrapperProps)), [actionIconWrapperProps, renderMoreIcon]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, _extends({
+  const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, {
+    renderIcon: renderMoreIcon,
+    ...componentProps,
+    ...actionIconWrapperProps
+  }), [actionIconWrapperProps, renderMoreIcon]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, {
     actions: allActions,
     defaultShowCount: defaultShowCount,
     renderMoreIcon: renderMore,
-    setRetainMessageActions: setRetainMessageActions
-  }, messageActionsWrapperProps)), secondaryActions ? /*#__PURE__*/React.createElement("div", {
+    setRetainMessageActions: setRetainMessageActions,
+    ...messageActionsWrapperProps
+  }), secondaryActions ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.secondaryActions
   }, secondaryActions) : null);
 }

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -1,5 +1,3 @@
-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); }
-
 /** ** Libraries *** */
 import React, { useCallback } from 'react';
 /** ** Components *** */
@@ -53,11 +51,12 @@ export default function MessageActionsWrapper(props) {
       action
     }); // id, isRenderInMorePopup
   }), [defaultActions, setRetainMessageActions]);
-  const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, _extends({
+  const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, {
     actions: moreActions,
     renderMoreIcon: renderMoreIcon,
-    setRetainMessageActions: setRetainMessageActions
-  }, messageActionsMoreProps)), [moreActions, renderMoreIcon, messageActionsMoreProps, setRetainMessageActions]);
+    setRetainMessageActions: setRetainMessageActions,
+    ...messageActionsMoreProps
+  }), [moreActions, renderMoreIcon, messageActionsMoreProps, setRetainMessageActions]);
   const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: newStyle.row,

package/es/MessageBox/css/MessageBox.module.css

@@ -1,10 +1,10 @@
 .varClass {
-  --messageBox-content_padding: 14px;
-  --messageBox-content_size: 14px;
+  --messageBox-content_padding: var(--zd_size14);
+  --messageBox-content_size: var(--zd_font_size14);
   --messageBox-border_radius: 9px;
-  --messageBox-message_status_gap: 12px;
-  --messageBox-message_header_gap: 1px;
-  --messageBox-message_footer_gap: 1px;
+  --messageBox-message_status_gap: var(--zd_size12);
+  --messageBox-message_header_gap: var(--zd_size1);
+  --messageBox-message_footer_gap: var(--zd_size1);
 }
 
 .messageBoxContainer {

package/es/MessageBubble/css/MessageBubble.module.css

@@ -1,9 +1,9 @@
 .varClass {
-  --messageBubble-bubble_footer_gap: 5px;
+  --messageBubble-bubble_footer_gap: var(--zd_size5);
   --messageBubble-message_owner_gap: 13px;
   --messageBox-max_width: 410px;
-  --messageBox-footer_fontSize: 11px;
-  --messageBox-owner_width: 32px;
+  --messageBox-footer_fontSize: var(--zd_font_size11);
+  --messageBox-owner_width: var(--zd_size32);
 }
 
 .messageBubble {

package/es/MoreActionItem/css/MoreActionItem.module.css

@@ -1,6 +1,6 @@
 .varClass {
-  --moreActionItem-content_padding: 10px;
-  --moreActionItem-content_size: 14px;
+  --moreActionItem-content_padding: var(--zd_size10);
+  --moreActionItem-content_size: var(--zd_font_size14);
 }
 
 .listItem {

package/es/ReplyBubble/ReplyBubble.js

@@ -1,5 +1,3 @@
-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); }
-
 /** ** Libraries *** */
 import React, { useMemo, useCallback } from 'react';
 /** ** Hooks *** */
@@ -91,27 +89,30 @@ export default function ReplyBubble(props) {
     }
 
     if (fileFormat) {
-      return /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
+      return /*#__PURE__*/React.createElement(AttachmentIcon, {
         customStyle: iconStyle,
         fileFormat: fileFormat,
         isValidAttachment: isValidAttachment,
-        mediaType: mediaType
-      }, iconProps));
+        mediaType: mediaType,
+        ...iconProps
+      });
     }
 
     return null;
   }, [fileURL, fileName, fileFormat, isValidAttachment, mediaType, iconStyle, iconProps, newStyle.image, imageWrapperClass]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReplyBubbleHeader, _extends({
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReplyBubbleHeader, {
     dateTimeDetails: dateTimeDetails,
     isFailed: isFailed,
-    replyText: replyText
-  }, headerProps)), /*#__PURE__*/React.createElement(ReplyBubbleContent, _extends({
+    replyText: replyText,
+    ...headerProps
+  }), /*#__PURE__*/React.createElement(ReplyBubbleContent, {
     isFailed: isFailed,
     onClick: onClick,
     renderIcon: renderIcon,
     renderMessage: renderMessage,
-    senderName: senderName
-  }, contentProps)));
+    senderName: senderName,
+    ...contentProps
+  }));
 }
 ReplyBubble.propTypes = replyBubblePropTypes;
 ReplyBubble.defaultProps = replyBubbleDefaultProps;

package/es/Theme/ThemeAssets.js

@@ -67,24 +67,6 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../../assets/Appearance/dark/mode/General_DarkMode.module.css";
-import "../../assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css";
-import "../../assets/Appearance/light/mode/General_LightMode.module.css";
-import "../../assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/green/green_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/red/red_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css";
-import "../../assets/Appearance/pureDark/mode/General_PureDarkMode.module.css";
-import "../../assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css";
 export default function DeskAssets(props) {
   const {
     children

package/es/Theme/ThemeWrapper.js

@@ -1,5 +1,3 @@
-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); }
-
 /** ** Libraries *** */
 import React, { useMemo, useCallback } from 'react';
 /** ** Providers *** */
@@ -44,22 +42,20 @@ export default function ThemeWrapper(props) {
   /** ** ThemeConfigurations Handling  *** */
 
   const {
+    themeConfigurations,
     mode,
     theme
   } = getThemeConfigurations({
     mode: propMode,
     theme: propTheme
   });
-  const configurations = propThemeConfigurations;
+  const configurations = propThemeConfigurations || themeConfigurations;
   /** ** Style Handling  *** */
 
   const selector = `#${styleTagId}`;
   const prefix = '--imlib_';
   const configuration = useMemo(() => [configurations], [configurations]);
-  const customizedVariables = useMemo(() => {
-    const cssVariables = propThemeConfigurations ? getCustomizedCssVariables(configuration, prefix) : null;
-    return cssVariables;
-  }, [configuration, prefix, propThemeConfigurations]);
+  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
   const wrapperDivProps = getWrapperDivProps({
     modeKey,
     themeKey,
@@ -75,9 +71,9 @@ export default function ThemeWrapper(props) {
   }), /*#__PURE__*/React.createElement("div", {
     "data-portal": EDITOR_POPUP_TARGET_PORTAL
   })), []);
-  const renderStyle = useCallback(() => customizedVariables ? /*#__PURE__*/React.createElement("style", {
+  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
-  }, `${selector}{${customizedVariables}}`) : null, [selector, customizedVariables]);
+  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
   const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
     containerRef: containerRef.current,
     customStyle: tooltipCustomStyle,
@@ -88,14 +84,14 @@ export default function ThemeWrapper(props) {
       mode: propMode,
       direction
     }
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    id: styleTagId
-  }, wrapperDivProps, {
+  }, /*#__PURE__*/React.createElement("div", {
+    id: styleTagId,
+    ...wrapperDivProps,
     style: {
       width: '100%',
       height: '100%'
     }
-  }), renderStyle(), /*#__PURE__*/React.createElement(Container, {
+  }, renderStyle(), /*#__PURE__*/React.createElement(Container, {
     eleRef: containerRef
   }, children), renderPortal(), renderAssets()));
 }

package/es/Theme/TooltipWrapper.js

@@ -1,5 +1,3 @@
-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); }
-
 /** ** Libraries *** */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -75,9 +73,10 @@ export default function TooltipWrapper(props) {
   const newStyle = useMergeStyle(style, customStyle);
   return /*#__PURE__*/React.createElement("div", {
     className: newStyle.tooltipWrapper
-  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    ref: tooltipRef
-  }, props)));
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    ref: tooltipRef,
+    ...props
+  }));
 }
 TooltipWrapper.propTypes = {
   customStyle: PropTypes.object,

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -0,0 +1,17 @@
+export const imIntegrationIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff',
+  whatsapp_color: '#24d366',
+  telegram_color: '#4fa7d8',
+  wechat_color: '#2dc100',
+  line_color: '#01b901',
+  twillio_color: '#f22f46',
+  instagram_color: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%)',
+  asap_color: 'linear-gradient(180deg, #A375FF 0%, #7732FF 100%)',
+  fb_color: '#006aff'
+};
+export const imTtIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff'
+};
+export const messagetextColor = '#e2e4e6';

package/es/Theme/themeVariables/dark/blueTheme.js

@@ -0,0 +1,133 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2c3b4d',
+      border_color: '#3f536b'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#479dff'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#2c3b4d',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor,
+      failed_text_color: '#000'
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryBlue,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryBlue,
+      border_color: '#2d3748'
+    },
+    replyEditor,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: '#5f6478',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262f3d',
+      editor_border_color: '#3e4d63',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#479dff'
+    }
+  }
+};

package/es/Theme/themeVariables/dark/commonColorVariable.js

@@ -0,0 +1,35 @@
+export const incomingBubbleBgColor = '#232b38';
+export const bubbleActiveBgColor = '#1b2e33';
+export const actionIconWrapperColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const primaryBlue = '#479dff';
+export const primaryGreen = '#45a159';
+export const primaryOrange = '#ff801f';
+export const primaryRed = '#e94f4f';
+export const primaryYellow = '#d79835';
+export const failedBgWrapper = '#f4b5bc';
+export const failedBg = '#f6dcdf';
+export const failedBdr = '#eb9ea7';
+export const failedLine = '#eb9ea7';
+export const failedColor = '#000';
+export const failedUrlColor = '#0a73eb';
+export const emojiPopup = {
+  bg: '#f1f4f9',
+  border: '#f1f4f9',
+  titleColor: '#aaa'
+};
+export const replyEditor = {
+  bg: '#242b38',
+  color: '#e2e4e6',
+  placeholder: '#5a616f'
+};
+export const emojisHeader = {
+  bg_color: '#283442',
+  border_color: '#2d3748'
+};
+export const attachmentPreviewHeader = {
+  bg_color: '#232b38',
+  name_color: '#e2e4e6',
+  size_color: '#a8b0bd'
+};