External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tint link chips inside own message bubbles

Browse Source 
The standalone link-chip treatment (opaque muted fill, provider-colored
icon tile) read as a gray slab inside the user's primary-colored bubble
— most visible on the automation prompts carrying a PR link. Chips in
own bubbles now derive everything from currentColor: translucent fill,
border, and icon tile, so they read as part of the bubble in both
themes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
klopez4212
2026-07-07 07:51:56 +01:00
co-authored by Claude Fable 5
parent 141adb7892
commit 67bdfcfc0b
2 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/features/chats/ui/ChatConversationRows.tsx
+4 -1
View File
@@ -117,7 +117,10 @@ export function ChatMessageRow({
mentionPubkeysByName={mentionPubkeysByName}
/>
) : (
<Bubble side={isOwn ? "right" : "left"}>
<Bubble
className={cn(isOwn && "buzz-own-bubble-links")}
side={isOwn ? "right" : "left"}
>
<Markdown
agentMentionPubkeysByName={agentMentionPubkeysByName}
className={cn(
desktop/src/shared/styles/globals/markdown.css
+19
View File
@@ -72,6 +72,25 @@
color: var(--buzz-link-preview-icon-color);
}
/* Link chips inside the user's own message bubble: the standalone card
treatment (opaque muted fill + provider-colored icon tile) reads as a
gray slab against the primary bubble. Tint everything from currentColor
instead so the chip reads as part of the bubble. */
.buzz-own-bubble-links [data-link-preview] {
background-color: color-mix(in oklab, currentColor 9%, transparent);
border-color: color-mix(in oklab, currentColor 22%, transparent);
}
.buzz-own-bubble-links [data-link-preview]:hover {
background-color: color-mix(in oklab, currentColor 15%, transparent);
border-color: color-mix(in oklab, currentColor 32%, transparent);
}
.buzz-own-bubble-links [data-link-preview] .link-preview-media {
background-color: color-mix(in oklab, currentColor 13%, transparent);
color: currentColor;
}
.message-markdown .mention-chip,
.message-markdown .inline-code-chip,
.message-markdown :not(pre) > code {