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 -->

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, [

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",
 		},
 	);
 };

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