fix: Text colour is getting merged with the light background colour (#5773)

app/javascript/shared/components/CardButton.vue

@@ -4,7 +4,11 @@
     :key="action.uri"
     class="action-button button"
     :href="action.uri"
-    :style="{ background: widgetColor, borderColor: widgetColor }"
+    :style="{
+      background: widgetColor,
+      borderColor: widgetColor,
+      color: textColor,
+    }"
     target="_blank"
     rel="noopener nofollow noreferrer"
   >
@@ -22,6 +26,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import { getContrastingTextColor } from '@chatwoot/utils';
 export default {
   components: {},
   props: {
@@ -34,6 +39,9 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
     isLink() {
       return this.action.type === 'link';
     },

app/javascript/shared/components/ChatForm.vue

@@ -71,7 +71,11 @@
         v-if="!submittedValues.length"
         class="button block"
         type="submit"
-        :style="{ background: widgetColor, borderColor: widgetColor }"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
         @click="onSubmitClick"
       >
         {{ buttonLabel || $t('COMPONENTS.FORM_BUBBLE.SUBMIT') }}
@@ -83,6 +87,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   mixins: [darkModeMixin],
@@ -110,6 +115,9 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
     inputColor() {
       return `${this.$dm('bg-white', 'dark:bg-slate-600')}
         ${this.$dm('text-black-900', 'dark:text-slate-50')}`;

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -32,7 +32,11 @@
       <button
         class="button small"
         :disabled="isButtonDisabled"
-        :style="{ background: widgetColor, borderColor: widgetColor }"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
       >
         <spinner v-if="isUpdating && feedback" />
         <fluent-icon v-else icon="chevron-right" />
@@ -47,6 +51,7 @@ import Spinner from 'shared/components/Spinner';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   components: {
@@ -89,6 +94,9 @@ export default {
       return `${this.$dm('bg-white', 'dark:bg-slate-600')}
         ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
     },
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
     title() {
       return this.isRatingSubmitted
         ? this.$t('CSAT.SUBMITTED_TITLE')

app/javascript/widget/components/UserMessageBubble.vue

@@ -2,12 +2,13 @@
   <div
     v-dompurify-html="formatMessage(message, false)"
     class="chat-bubble user"
-    :style="{ background: widgetColor }"
+    :style="{ background: widgetColor, color: textColor }"
   />
 </template>
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   name: 'UserMessageBubble',
@@ -26,6 +27,11 @@ export default {
       default: '',
     },
   },
+  computed: {
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+  },
 };
 </script>
 

app/javascript/widget/components/template/EmailInput.vue

@@ -16,7 +16,11 @@
       <button
         class="button small"
         :disabled="$v.email.$invalid"
-        :style="{ background: widgetColor, borderColor: widgetColor }"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
       >
         <fluent-icon v-if="!isUpdating" icon="chevron-right" />
         <spinner v-else class="mx-2" />
@@ -28,6 +32,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { required, email } from 'vuelidate/lib/validators';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import Spinner from 'shared/components/Spinner';
@@ -59,6 +64,9 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
     hasSubmitted() {
       return (
         this.messageContentAttributes &&