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

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#312821',
+      border_color: '#4d3421'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#ff801f'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      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: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      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: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryOrange,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#ff801f'
+    }
+  }
+};

package/es/Theme/themeVariables/pureDark/redTheme.js

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2f2424',
+      border_color: '#492A29'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#e94f4f'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      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: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      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: primaryRed,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryRed,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#e94f4f'
+    }
+  }
+};

package/es/Theme/themeVariables/pureDark/yellowTheme.js

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2e2922',
+      border_color: '#453925'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#d79835'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      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: '#d79835',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      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: primaryYellow,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryYellow,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#d79835'
+    }
+  }
+};

package/es/Theme/utils/getThemeConfigurations.js

@@ -1,4 +1,19 @@
 import { modeConstants, themeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
+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',
@@ -11,17 +26,56 @@ 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
+    theme,
+    themeConfigurations
   };
 }

package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -64,9 +64,9 @@
 }
 
 .fontIcon :global .path1::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path0_color) !important;
+  color: var(--imlib_chat_components_imIntegrationIcon_path0_color);
 }
 
 .fontIcon :global .path2::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
+  color: var(--imlib_chat_components_imIntegrationIcon_path1_color);
 }

package/es/im/ReplyEditor/css/ReplyEditor.module.css

@@ -24,10 +24,10 @@
   font-family: var(--zd_regular) !important;
   line-height: 22px !important;
 
-  --rte-text-color: var(--imlib_chat_components_reply_editor_color) !important;
-  --rte-bg-color: var(--imlib_chat_components_reply_editor_bg) !important;
+  --rte-text-color: var(--imlib_chat_components_replyEditor_color) !important;
+  --rte-bg-color: var(--imlib_chat_components_replyEditor_bg) !important;
   --rte-placeholder-color: var(
-    --imlib_chat_components_reply_editor_placeholder_color
+    --imlib_chat_components_replyEditor_placeholder
   ) !important;
   --rte-link-text-color: var(
     --imlib_chat_components_replyEditor_color
@@ -35,7 +35,7 @@
 
   padding: var(--zd_size16)  !important;
   cursor: text !important;
-}	
+}
 
 .editorWrapper {
   /** ** Use this class for css customisations *** */

package/package.json

@@ -1,27 +1,22 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.0-beta.2",
   "description": "Chat Components",
-  "main": "lib/index.js",
+  "main": "es/index.js",
   "module": "es/index.js",
   "scripts": {
-    "build": "npm run build:lib && npm run build:es",
-    "build:lib": "react-cli build:component:cmjs",
-    "build:es": "react-cli build:library:es",
-    "build:local": " npm run build && npm run rtl && npm run cssVariableConvert ",
-    "build_watch": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
-    "clean": "react-cli clean unittest coverage es result.json && mkdir assets",
+    "build": "react-cli build:component:es",
+    "build_watch": "npm run build -- -w",
+    "clean": "react-cli clean unittest coverage es result.json",
     "rtl": "react-cli rtl ./src ./es",
-    "prepare": "react-cli clean assets && npm run init && npm run build && npm run rtl && npm run cssVariableConvert ",
+    "prepare": "npm run clean && npm run build && npm run rtl && npm run cssVariableConvert",
     "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 ./lib ./lib && react-cli variableConverter ./es ./es",
+    "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",
-    "build:variables": "react-cli clean ./assets && node ./preprocess/index",
-    "init": "npm run clean && npm run build:variables"
+    "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"
   },
   "author": "ZohoDesk - IM Team",
   "license": "ISC",
@@ -31,7 +26,6 @@
   },
   "files": [
     "es",
-    "assets",
     "!**/__tests__"
   ],
   "dependencies": {
@@ -42,15 +36,14 @@
     "@zohodesk/utils": "1.3.13",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "1.1.0-beta.1",
-    "@zohoim/chat-components-utils": "1.1.0-beta.1"
+    "@zohoim/chat-components-hooks": "1.1.0-beta.2",
+    "@zohoim/chat-components-utils": "1.1.0-beta.2"
   },
   "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": "89aa900b07687ba5bb8f0d5827427df60aa81f49"
+  "gitHead": "0a549134f6351cc26834f508a40b4918609a5f76"
 }

package/assets/Appearance/dark/mode/General_DarkMode.module.css

@@ -1,93 +0,0 @@
-[data-zohoim-mode='dark'] {
-	/* default colors */
-	--imlib_chat_components_common_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_primary_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	
-	/* integration colors */
-	--imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_imIntegrationIcon_telegram_color: hsla(201, 63.72%, calc(57.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_imIntegrationIcon_wechat_color: hsla(106, 100.00%, calc(37.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_imIntegrationIcon_line_color: hsla(120, 98.92%, calc(36.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_imIntegrationIcon_twillio_color: hsla(353, 88.24%, calc(56.67% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
-	--imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
-	--imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
-	
-	/* two tone icon colors */
-	--imlib_chat_components_imTtIcon_path0_color: rgba(255, 255, 255, 0.25);
-	--imlib_chat_components_imTtIcon_path1_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_imIntegrationIcon_path0_color: rgba(255, 255, 255, 0.25);
-	--imlib_chat_components_imIntegrationIcon_path1_color: rgb(255,255,255);
-	--imlib_chat_components_twotone_icon_border: var(--dot_platinum);
-	
-	/* text / icon colors */
-	--imlib_chat_components_actionIconWrapper_color: rgb(226,228,230);
-	--imlib_chat_components_messageBox_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleContent_line_color: hsla(217, 58.73%, calc(87.65% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleContent_sender_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_attachmentBubbleInfo_fileName_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_attachmentBubbleInfo_fileSize_color: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleContent_content_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleHeader_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleHeader_time_color: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_textBubble_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_articleBubble_title_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_articleBubble_summary_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_imMessageContent_text_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_imMessageMeta_time_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_imAutoMessageInfo_text_color: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--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)));
-	--imlib_chat_components_messageStatus_send_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_imageBubble_alt_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	
-	/* text / icon failed colors */
-	--imlib_chat_components_messageBox_failed_text_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleHeader_text_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_textBubble_text_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_lighter_low)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_imageBubble_alt_text_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_articleBubble_summary_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleContent_line_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleContent_sender_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_attachmentBubbleInfo_fileName_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_attachmentBubbleInfo_fileSize_color_failed: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleContent_content_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_replyBubbleHeader_time_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_articleBubble_title_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	
-	/* bg colors */
-	--imlib_chat_components_messageBox_bg_color: hsla(212, 86.67%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	
-	/* bg failed colors */
-	--imlib_chat_components_messageBox_failed_bg_color: hsla(2, 75.51%, calc(90.39% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_imageBubble_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_attachmentBubble_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_articleBubble_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_locationBubble_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_replyBubbleContent_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-	
-	/* border failed colors */
-	--imlib_chat_components_attachmentBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_imageBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_locationBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_replyBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_videoBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_articleBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--imlib_chat_components_replyBubbleContent_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	
-	/* replyEditor */
-	--imlib_chat_components_reply_editor_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_reply_editor_bg: hsla(219, 21.74%, calc(18.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_reply_editor_placeholder_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	
-	/* attachment Preview */
-	--imlib_chat_components_attachmentPreview_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_attachmentPreview_name_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_attachmentPreview_size_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_attachmentPreview_body_bg_color: hsla(217, 23.23%, calc(19.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	
-	/* emoji popup */
-	--imlib_chat_components_emojiPopup_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_emojiPopup_border_color: hsla(220, 16.67%, calc(28.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_emojiPopup_title_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--imlib_chat_components_emoji_popup_search_bg: hsla(212, 24.53%, calc(20.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
-}