@zohoim/chat-components 1.0.5 → 1.0.7

package/README.md

@@ -10,6 +10,15 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
+# 1.0.7
+
+- Color preprocessor and contrast added
+- @zohodesk/components version update
+
+# 1.0.6
+
+- **IMMessageMeta** - Info for away message is supported
+
 # 1.0.5
 
 - Fixed some issues

package/es/Theme/ThemeAssets.js

@@ -67,6 +67,24 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/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

@@ -38,20 +38,22 @@ export default function ThemeWrapper(props) {
   /** ** ThemeConfigurations Handling  *** */
 
   const {
-    themeConfigurations,
     mode,
     theme
   } = getThemeConfigurations({
     mode: propMode,
     theme: propTheme
   });
-  const configurations = propThemeConfigurations || themeConfigurations;
+  const configurations = propThemeConfigurations;
   /** ** Style Handling  *** */
 
   const selector = `#${styleTagId}`;
   const prefix = '--imlib_';
   const configuration = useMemo(() => [configurations], [configurations]);
-  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
+  const customizedVariables = useMemo(() => {
+    const cssVariables = propThemeConfigurations ? getCustomizedCssVariables(configuration, prefix) : null;
+    return cssVariables;
+  }, [configuration, prefix, propThemeConfigurations]);
   const wrapperDivProps = getWrapperDivProps({
     modeKey,
     themeKey,
@@ -63,9 +65,9 @@ export default function ThemeWrapper(props) {
   const renderPortal = useCallback(() => /*#__PURE__*/React.createElement("div", {
     "data-portal": MSG_ACTION_POPUP_PORTAL
   }), []);
-  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
+  const renderStyle = useCallback(() => customizedVariables ? /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
-  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
+  }, `${selector}{${customizedVariables}}`) : null, [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,

package/es/Theme/utils/getThemeConfigurations.js

@@ -1,19 +1,4 @@
 import { modeConstants, themeConstants } from "../constants";
-import lightBlue from "../themeVariables/light/blueTheme";
-import lightGreen from "../themeVariables/light/greenTheme";
-import lightOrange from "../themeVariables/light/orangeTheme";
-import lightRed from "../themeVariables/light/redTheme";
-import lightYellow from "../themeVariables/light/yellowTheme";
-import darkBlue from "../themeVariables/dark/blueTheme";
-import darkGreen from "../themeVariables/dark/greenTheme";
-import darkOrange from "../themeVariables/dark/orangeTheme";
-import darkRed from "../themeVariables/dark/redTheme";
-import darkYellow from "../themeVariables/dark/yellowTheme";
-import pureDarkBlue from "../themeVariables/pureDark/blueTheme";
-import pureDarkGreen from "../themeVariables/pureDark/greenTheme";
-import pureDarkOrange from "../themeVariables/pureDark/orangeTheme";
-import pureDarkRed from "../themeVariables/pureDark/redTheme";
-import pureDarkYellow from "../themeVariables/pureDark/yellowTheme";
 const modeMapping = {
   [modeConstants.LIGHT]: 'light',
   [modeConstants.DARK]: 'dark',
@@ -26,56 +11,17 @@ const themeMapping = {
   [themeConstants.RED]: 'red',
   [themeConstants.YELLOW]: 'yellow'
 };
-const concatString = '_';
 const defaultTheme = themeMapping[themeConstants.BLUE];
 const defaultMode = modeMapping[modeConstants.LIGHT];
-const defaultThemeConfiguration = lightBlue;
-const themeConfigMapping = {
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.BLUE}`]: lightBlue,
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.GREEN}`]: lightGreen,
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.ORANGE}`]: lightOrange,
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.RED}`]: lightRed,
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.YELLOW}`]: lightYellow,
-  [`${modeConstants.DARK}${concatString}${themeConstants.BLUE}`]: darkBlue,
-  [`${modeConstants.DARK}${concatString}${themeConstants.GREEN}`]: darkGreen,
-  [`${modeConstants.DARK}${concatString}${themeConstants.ORANGE}`]: darkOrange,
-  [`${modeConstants.DARK}${concatString}${themeConstants.RED}`]: darkRed,
-  [`${modeConstants.DARK}${concatString}${themeConstants.YELLOW}`]: darkYellow,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.BLUE}`]: pureDarkBlue,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.GREEN}`]: pureDarkGreen,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.ORANGE}`]: pureDarkOrange,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.RED}`]: pureDarkRed,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.YELLOW}`]: pureDarkYellow
-};
-
-function getThemeName() {
-  let {
-    mode = modeConstants.LIGHT,
-    theme = themeConstants.BLUE
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const themeName = `${mode}${concatString}${theme}`;
-  return {
-    themeName
-  };
-}
-
 export default function getThemeConfigurations(_ref) {
   let {
     mode: propMode,
     theme: propTheme
   } = _ref;
-  const {
-    themeName
-  } = getThemeName({
-    mode: propMode,
-    theme: propTheme
-  });
   const mode = propMode ? modeMapping[propMode] || propMode : defaultMode;
   const theme = propTheme ? themeMapping[propTheme] || propTheme : defaultTheme;
-  const themeConfigurations = themeConfigMapping[themeName] || defaultThemeConfiguration;
   return {
     mode,
-    theme,
-    themeConfigurations
+    theme
   };
 }

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Chat Components",
   "main": "es/index.js",
   "module": "es/index.js",
   "scripts": {
     "build": "react-cli build:component:es",
-    "build_watch": "npm run build -- -w",
+    "build_watch": "npm run build:variables && npm run build -- -w",
     "clean": "react-cli clean unittest coverage es result.json",
     "rtl": "react-cli rtl ./src ./es",
-    "prepare": "npm run clean && npm run build && npm run rtl && npm run cssVariableConvert",
+    "prepare": "npm run clean && npm run build && npm run rtl && npm run cssVariableConvert && npm run build:variables",
     "test": "react-cli test",
     "test:debug": "react-cli test --runInBand --watch",
     "create-icons": "node ./src/icons/create-icon-components --sourucePath=./factory --targetPath=./iconSrc",
     "cssVariableConvert": "react-cli variableConverter ./es ./es",
     "variable:addignore": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
     "variable:convert": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
-    "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"
+    "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",
+    "build:variables": "react-cli clean ./assets && node ./preprocess/index"
   },
   "author": "ZohoDesk - IM Team",
   "license": "ISC",
@@ -29,21 +30,22 @@
     "!**/__tests__"
   ],
   "dependencies": {
-    "@zohodesk/components": "1.2.23",
+    "@zohodesk/components": "1.2.43",
     "@zohodesk/hooks": "2.0.2",
     "@zohodesk/icon": "1.3.15",
     "@zohodesk/icons": "1.0.20",
     "@zohodesk/utils": "1.3.13",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "^1.0.3",
-    "@zohoim/chat-components-utils": "^1.0.3"
+    "@zohoim/chat-components-hooks": "^1.0.4",
+    "@zohoim/chat-components-utils": "^1.0.4"
   },
   "devDependencies": {
+    "@zohodesk-private/color-variable-preprocessor": "1.2.1",
     "@zohodesk-private/css-variable-migrator": "1.0.7",
     "html-to-react": "1.7.0 ",
     "jsdom": "23.0.0",
     "react-to-jsx": "1.3.2"
   },
-  "gitHead": "42d08b37918d26ef1f2b761081769c46a3af3710"
+  "gitHead": "7e2ee7c296fd7adefa47b6321c28c717736cbed5"
 }

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -1,17 +0,0 @@
-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

@@ -1,116 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } 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
-    }
-  }
-};

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

@@ -1,16 +0,0 @@
-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';

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

@@ -1,115 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
-import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
-export default {
-  library: 'chat_components',
-  variables: {
-    actionIconWrapper: {
-      color: actionIconWrapperColor,
-      bg_color: '#26373b',
-      border_color: '#2d4e42'
-    },
-    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: '#45a159'
-    },
-    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: primaryGreen,
-      url_color_failed: failedUrlColor
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: '#26373b',
-      bg_color: '#f1f7fe',
-      failed_bg_color: failedBgWrapper,
-      text_color: messagetextColor
-    },
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
-    },
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#45a159',
-      failed_color: messageStatusFailedColor
-    },
-    replyBubble: {
-      border_color: '#2d3748',
-      border_color_failed: failedBdr
-    },
-    replyBubbleContent: {
-      bg_color: 'hsl(191.43deg 21.65% 13.02%)',
-      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: primaryGreen,
-      see_more_color_failed: failedUrlColor,
-      url_color: primaryGreen,
-      url_color_failed: failedUrlColor
-    },
-    videoBubble: {
-      border_color: '#2d3748',
-      border_color_failed: failedBdr
-    }
-  }
-};

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

@@ -1,115 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
-import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
-export default {
-  library: 'chat_components',
-  variables: {
-    actionIconWrapper: {
-      color: actionIconWrapperColor,
-      bg_color: '#323136',
-      border_color: '#4f3c33'
-    },
-    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: '#ff801f'
-    },
-    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: primaryOrange,
-      url_color_failed: failedUrlColor
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: '#323136',
-      bg_color: '#f1f7fe',
-      failed_bg_color: failedBgWrapper,
-      text_color: messagetextColor
-    },
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
-    },
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#ff801f',
-      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: primaryOrange,
-      see_more_color_failed: failedUrlColor,
-      url_color: primaryOrange,
-      url_color_failed: failedUrlColor
-    },
-    videoBubble: {
-      border_color: '#2d3748',
-      border_color_failed: failedBdr
-    }
-  }
-};