From cccc4dfe8b0e9e0299dc50a51ada02eb4a0e18b0 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Sat, 13 Apr 2024 12:35:29 -0400
Subject: [PATCH] fix: better color contrast for right Bubble (#488)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- Updated the text color in the Bubble component from dark to lighter
for better readability.
- Changed the "surface-accent" color to a new shade of blue for enhanced
visual appeal.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/components/Bubble/__tests__/Bubble.test.tsx             | 2 +-
 packages/ui-components/src/components/Bubble/utilities.ts       | 2 +-
 packages/ui-styles/src/plugins/tailwindcss/tokens.ts            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/src/components/Bubble/__tests__/Bubble.test.tsx b/packages/ui-components/src/components/Bubble/__tests__/Bubble.test.tsx
index 5ed20a0d..d08c4652 100644
--- a/packages/ui-components/src/components/Bubble/__tests__/Bubble.test.tsx
+++ b/packages/ui-components/src/components/Bubble/__tests__/Bubble.test.tsx
@@ -67,7 +67,7 @@ describe("Bubble modifiers", () => {
 			"rounded-b-xl",
 			"rounded-tl-xl",
 			"sm:max-w-md",
-			"text-copy-dark",
+			"text-copy-lighter",
 		]);
 		if (bubble.parentElement?.parentElement) {
 			expectToHaveClasses(bubble.parentElement.parentElement, [
diff --git a/packages/ui-components/src/components/Bubble/utilities.ts b/packages/ui-components/src/components/Bubble/utilities.ts
index 9031d625..c0d70014 100644
--- a/packages/ui-components/src/components/Bubble/utilities.ts
+++ b/packages/ui-components/src/components/Bubble/utilities.ts
@@ -19,7 +19,7 @@ const getBubbleTypographyClasses = ({ kind }: { kind: string }) => {
 	return clsx(
 		"prose prose-dark dark:prose-lighter prose-p:my-3 prose-blockquote:my-3 prose-ol:my-3 prose-ul:my-3 prose-ul:prose-li:marker:text-black",
 		{
-			"text-copy-dark": kind === "right",
+			"text-copy-lighter": kind === "right",
 		},
 	);
 };
diff --git a/packages/ui-styles/src/plugins/tailwindcss/tokens.ts b/packages/ui-styles/src/plugins/tailwindcss/tokens.ts
index 898569e9..a176d70c 100644
--- a/packages/ui-styles/src/plugins/tailwindcss/tokens.ts
+++ b/packages/ui-styles/src/plugins/tailwindcss/tokens.ts
@@ -31,7 +31,7 @@ export default {
 		"surface-medium": colors.slate[500],
 		"surface-light": colors.slate[300],
 		"surface-lighter": colors.slate[200],
-		"surface-accent": "#0B93F6",
+		"surface-accent": "#0071EB",
 		"surface-information": colors.violet[200],
 		"surface-success": colors.green[200],
 		"surface-warning": colors.orange[200],