From 7814517b35d4845cff3874873953883e32a9c647 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Wed, 10 Jun 2026 13:44:08 -0600
Subject: [PATCH] style(doclist): enhance preview background with color-mix and
 radial mask

Update DocumentPreview text preview to use a CSS color-mix radial pattern
with increased opacity and a masked vignette effect. Improves visual
clarity and consistency with design tokens.
---
 src/components/doclist/DocumentPreview.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/doclist/DocumentPreview.tsx b/src/components/doclist/DocumentPreview.tsx
index 51eb60d..aea8b53 100644
--- a/src/components/doclist/DocumentPreview.tsx
+++ b/src/components/doclist/DocumentPreview.tsx
@@ -286,7 +286,18 @@ export function DocumentPreview({ doc }: DocumentPreviewProps) {
       ) : textPreview ? (
         <>
           <div className="absolute inset-0 bg-gradient-to-br from-surface-solid to-surface-sunken" />
-          <div className="absolute inset-0 opacity-[0.06] bg-[radial-gradient(circle_at_1px_1px,rgba(0,0,0,1)_1px,transparent_0)] [background-size:12px_12px]" />
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-0"
+            style={{
+              backgroundImage:
+                'radial-gradient(color-mix(in srgb, var(--foreground) 14%, transparent) 1px, transparent 1px)',
+              backgroundSize: '12px 12px',
+              opacity: 0.35,
+              WebkitMaskImage: 'radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%)',
+              maskImage: 'radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%)',
+            }}
+          />
           <div className="relative z-10 h-full w-full p-2 flex flex-col">
             <div className="mb-auto rounded-md bg-surface-solid backdrop-blur-[1px] shadow-elev-1 ring-1 ring-line-soft p-2.5 max-h-[85%] overflow-hidden">
               {isTxtFile ? (