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.
This commit is contained in:
Mohamed Boudra
2026-05-17 19:41:49 +07:00
parent 686a25fb65
commit e27734b218
2 changed files with 1 additions and 23 deletions

View File

@@ -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],

View File

@@ -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",