feat: allow overrides

app/javascript/react-components/src/styles/bubble-overrides.css

@@ -0,0 +1,41 @@
+/*
+ * Runtime Theme Customization for Chatwoot Web Components
+ *
+ * Consumers can override bubble styles from outside the Shadow DOM.
+ * Set these CSS variables on :root or any ancestor element:
+ *
+ * COLORS (RGB values without commas, e.g., "59 130 246"):
+ *   --chatwoot-bubble-agent-bg: Agent message background
+ *   --chatwoot-bubble-agent-text: Agent message text
+ *   --chatwoot-bubble-user-bg: User message background
+ *   --chatwoot-bubble-user-text: User message text
+ *   --chatwoot-bubble-private-bg: Private note background
+ *   --chatwoot-bubble-private-text: Private note text
+ *   --chatwoot-bubble-bot-bg: Bot message background
+ *   --chatwoot-bubble-bot-text: Bot message text
+ *
+ * SPACING:
+ *   --chatwoot-bubble-spacing-ratio: Scale factor for border radius (1 = default)
+ *
+ * Example usage in consumer's CSS:
+ *   :root {
+ *     --chatwoot-bubble-agent-bg: 59 130 246;
+ *     --chatwoot-bubble-user-bg: 243 244 246;
+ *     --chatwoot-bubble-spacing-ratio: 1.5;
+ *   }
+ */
+
+:host {
+  /* Colors - falls back to theme defaults from _next-colors.scss */
+  --bubble-agent-bg: var(--chatwoot-bubble-agent-bg, var(--solid-blue));
+  --bubble-agent-text: var(--chatwoot-bubble-agent-text, var(--slate-12));
+  --bubble-user-bg: var(--chatwoot-bubble-user-bg, var(--slate-4));
+  --bubble-user-text: var(--chatwoot-bubble-user-text, var(--slate-12));
+  --bubble-private-bg: var(--chatwoot-bubble-private-bg, var(--solid-amber));
+  --bubble-private-text: var(--chatwoot-bubble-private-text, var(--amber-12));
+  --bubble-bot-bg: var(--chatwoot-bubble-bot-bg, var(--solid-iris));
+  --bubble-bot-text: var(--chatwoot-bubble-bot-text, var(--slate-12));
+
+  /* Spacing - 1 = default */
+  --bubble-spacing-ratio: var(--chatwoot-bubble-spacing-ratio, 1);
+}

app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue

@@ -7,47 +7,7 @@ import MessageList from '../../../ui/MessageList.vue';
 </template>
 
 <style>
-/*
- * Runtime Theme Customization
- *
- * Consumers can override bubble colors from outside the Shadow DOM.
- * Set these CSS variables on :root or any ancestor element:
- *
- *   --chatwoot-bubble-agent-bg: RGB values for agent message background
- *   --chatwoot-bubble-agent-text: RGB values for agent message text
- *   --chatwoot-bubble-user-bg: RGB values for user message background
- *   --chatwoot-bubble-user-text: RGB values for user message text
- *   --chatwoot-bubble-private-bg: RGB values for private note background
- *   --chatwoot-bubble-private-text: RGB values for private note text
- *   --chatwoot-bubble-bot-bg: RGB values for bot message background
- *   --chatwoot-bubble-bot-text: RGB values for bot message text
- *
- * Example usage in consumer's CSS:
- *   :root {
- *     --chatwoot-bubble-agent-bg: 59 130 246;
- *     --chatwoot-bubble-user-bg: 243 244 246;
- *   }
- */
-:host {
-  /* FUNKY TEST COLORS - remove these overrides for production */
-  --bubble-agent-bg: var(
-    --chatwoot-bubble-agent-bg,
-    255 105 180
-  ); /* Hot Pink */
-  --bubble-agent-text: var(--chatwoot-bubble-agent-text, 255 255 255);
-  --bubble-user-bg: var(
-    --chatwoot-bubble-user-bg,
-    144 238 144
-  ); /* Lime Green */
-  --bubble-user-text: var(--chatwoot-bubble-user-text, 28 32 36);
-  --bubble-private-bg: var(
-    --chatwoot-bubble-private-bg,
-    255 165 0
-  ); /* Orange */
-  --bubble-private-text: var(--chatwoot-bubble-private-text, 79 52 34);
-  --bubble-bot-bg: var(--chatwoot-bubble-bot-bg, 0 255 255); /* Cyan */
-  --bubble-bot-text: var(--chatwoot-bubble-bot-text, 28 32 36);
-}
+/* Bubble theme overrides are in src/styles/bubble-overrides.css */
 
 .file-uploads {
   overflow: hidden;

app/javascript/react-components/src/vue-components/registerWebComponents.js

@@ -4,6 +4,7 @@ import chatwootStyles from '../../../dashboard/assets/scss/app.scss?inline';
 import multiselectStyles from 'vue-multiselect/dist/vue-multiselect.css?inline';
 import floatingVueStyles from 'floating-vue/dist/style.css?inline';
 import uploadStyles from '../styles/upload.css?inline';
+import bubbleOverrideStyles from '../styles/bubble-overrides.css?inline';
 import en from '../../../dashboard/i18n/locale/en';
 import store from '../../../dashboard/store';
 import vueActionCable from '../../../dashboard/helper/actionCable';
@@ -34,7 +35,14 @@ const ceOptions = {
     // eslint-disable-next-line no-underscore-dangle
     vueActionCable.init(store, window.__PUBSUB_TOKEN__);
   },
-  styles: [chatwootStyles, multiselectStyles, floatingVueStyles, uploadStyles],
+  // bubbleOverrideStyles MUST be last to override _next-colors.scss
+  styles: [
+    chatwootStyles,
+    multiselectStyles,
+    floatingVueStyles,
+    uploadStyles,
+    bubbleOverrideStyles,
+  ],
 };
 
 // Convert Vue components to Web Components