From a94ec27f970b5f30859ecec6b1c9c60619fe7ad0 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Sun, 26 Jul 2026 22:00:29 -0500
Subject: [PATCH] polish(desktop): tokenize artifact card font sizes, drop
 redundant hover class

- artifact card title/meta/open-hint now use --conversation-text-font-size /
  --conversation-tool-font-size like CodeCard and the rest of the transcript,
  instead of hardcoded rem literals
- drop no-op hover:border-border (border is border-border at rest)
- comment the deliberate raw bg-white + colorScheme:light on the sandboxed
  iframe so it doesn't read as an untokenized literal
---
 .../src/app/chat/right-rail/artifact-renderers.tsx        | 3 +++
 .../desktop/src/components/assistant-ui/artifact-card.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/app/chat/right-rail/artifact-renderers.tsx b/apps/desktop/src/app/chat/right-rail/artifact-renderers.tsx
index 61b49809265..00ed9a58a58 100644
--- a/apps/desktop/src/app/chat/right-rail/artifact-renderers.tsx
+++ b/apps/desktop/src/app/chat/right-rail/artifact-renderers.tsx
@@ -97,6 +97,9 @@ export function ArtifactLivePreview({ content, kind, title }: { content: string;
       className="block size-full border-0 bg-white"
       sandbox="allow-scripts"
       srcDoc={composeArtifactHtml(content)}
+      // Deliberately raw white + forced light scheme: the frame hosts foreign
+      // generated HTML that assumes a light canvas, so it renders deterministically
+      // light in both app themes instead of inheriting theme tokens it can't see.
       style={{ colorScheme: 'light' }}
       title={title}
     />
diff --git a/apps/desktop/src/components/assistant-ui/artifact-card.tsx b/apps/desktop/src/components/assistant-ui/artifact-card.tsx
index 7444c23c05f..56e53e03129 100644
--- a/apps/desktop/src/components/assistant-ui/artifact-card.tsx
+++ b/apps/desktop/src/components/assistant-ui/artifact-card.tsx
@@ -108,7 +108,7 @@ export function ArtifactCard({ code, detection, streaming = false }: ArtifactCar
     <button
       className={cn(
         'group/artifact my-1.5 flex w-full max-w-md items-center gap-2.5 overflow-hidden rounded-[0.625rem] border border-border px-3 py-2.5 text-left transition-colors',
-        streaming ? 'cursor-default' : 'cursor-pointer hover:border-border hover:bg-accent/40'
+        streaming ? 'cursor-default' : 'cursor-pointer hover:bg-accent/40'
       )}
       data-slot="aui_artifact-card"
       disabled={streaming}
@@ -121,13 +121,13 @@ export function ArtifactCard({ code, detection, streaming = false }: ArtifactCar
       <span className="min-w-0 flex-1">
         <span
           className={cn(
-            'block truncate text-[0.8125rem] font-medium text-foreground',
+            'block truncate text-[length:var(--conversation-text-font-size)] font-medium text-foreground',
             streaming && 'shimmer text-foreground/55'
           )}
         >
           {title}
         </span>
-        <span className="block truncate text-[0.6875rem] text-muted-foreground">
+        <span className="block truncate text-[length:var(--conversation-tool-font-size)] text-muted-foreground">
           {streaming
             ? copy.generating(lineCount)
             : versionCount > 1
@@ -136,7 +136,7 @@ export function ArtifactCard({ code, detection, streaming = false }: ArtifactCar
         </span>
       </span>
       {!streaming && (
-        <span className="shrink-0 text-[0.6875rem] font-medium text-muted-foreground opacity-0 transition-opacity group-hover/artifact:opacity-100">
+        <span className="shrink-0 text-[length:var(--conversation-tool-font-size)] font-medium text-muted-foreground opacity-0 transition-opacity group-hover/artifact:opacity-100">
           {copy.open}
         </span>
       )}