From e27734b2180b3cd774f5cb2900752edefeb16bbf Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sun, 17 May 2026 19:41:49 +0700
Subject: [PATCH] Use surface3 for user message bubble

Drops the accentSubtle theme token in favor of an existing surface layer.
surface3 gives a clear step up from surface0 (chat bg) without the tinted
look the accent fill produced.
---
 packages/app/src/components/message.tsx |  2 +-
 packages/app/src/styles/theme.ts        | 22 ----------------------
 2 files changed, 1 insertion(+), 23 deletions(-)

diff --git a/packages/app/src/components/message.tsx b/packages/app/src/components/message.tsx
index d92faaf39..cd00e0672 100644
--- a/packages/app/src/components/message.tsx
+++ b/packages/app/src/components/message.tsx
@@ -346,7 +346,7 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
     marginBottom: theme.spacing[4],
   },
   bubble: {
-    backgroundColor: theme.colors.accentSubtle,
+    backgroundColor: theme.colors.surface3,
     borderRadius: theme.borderRadius["2xl"],
     borderTopRightRadius: theme.borderRadius.sm,
     paddingHorizontal: theme.spacing[4],
diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts
index a9cca7032..6017f5c2f 100644
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -1,25 +1,5 @@
 import { darkHighlightColors, lightHighlightColors } from "@getpaseo/highlight";
 
-function darkenRgba(
-  hex: string,
-  darkenAmount: number,
-  alpha: number,
-  desaturateAmount = 0,
-): string {
-  const value = hex.replace("#", "");
-  let r = parseInt(value.slice(0, 2), 16);
-  let g = parseInt(value.slice(2, 4), 16);
-  let b = parseInt(value.slice(4, 6), 16);
-  if (desaturateAmount > 0) {
-    const gray = 0.299 * r + 0.587 * g + 0.114 * b;
-    r = r + (gray - r) * desaturateAmount;
-    g = g + (gray - g) * desaturateAmount;
-    b = b + (gray - b) * desaturateAmount;
-  }
-  const f = 1 - darkenAmount;
-  return `rgba(${Math.round(r * f)}, ${Math.round(g * f)}, ${Math.round(b * f)}, ${alpha})`;
-}
-
 export const baseColors = {
   // Base colors
   white: "#ffffff",
@@ -184,7 +164,6 @@ const lightSemanticColors = {
   accent: "#20744A",
   accentBright: "#239956",
   accentForeground: "#ffffff",
-  accentSubtle: darkenRgba("#20744A", 0.3, 0.15, 0.15),
 
   // Semantic
   destructive: "#b04138", // dark warm red on white — calm but unambiguously red
@@ -299,7 +278,6 @@ function buildDarkSemanticColors(tint: DarkThemeConfig) {
     accent: tint.accent,
     accentBright: tint.accentBright,
     accentForeground: "#ffffff",
-    accentSubtle: darkenRgba(tint.accent, 0.3, 0.2, 0.15),
 
     destructive: tint.destructive,
     destructiveForeground: "#ffffff",