From 4126275c4d6aac17c559f321d1965a31c4214312 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 11:09:26 +0300
Subject: [PATCH] refactor(SliderArea): extract grid overlay into bg-grid
 utilities

The decorative dotted-grid background on the paper surface was a
6-line $derived gridStyle string applied via inline style="" plus four
extra utility classes for color and opacity. Replace with two named
utilities and let CSS handle the responsive switch.

app.css:
- New --color-grid-line CSS var (light + dark) so the grid colour and
  intensity auto-switch without consumers needing a dark: variant or an
  opacity layer.
- @utility bg-grid (20px cells) and @utility bg-grid-sm (10px cells).
  Both reference --color-grid-line, so the same markup paints correctly
  in light and dark mode.

SliderArea.svelte:
- Drop the gridStyle $derived block and the inline style= attribute.
- Overlay becomes a single line:
  <div class="absolute inset-0 pointer-events-none bg-grid-sm md:bg-grid"
       aria-hidden="true" />
  Mobile picks the tight 10px grid; the md: breakpoint flips to 20px,
  matching the prior JS-driven behaviour with no extra runtime cost.
---
 src/app/styles/app.css                        | 21 +++++++++++++++++++
 .../ui/SliderArea/SliderArea.svelte           |  5 ++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index 0de879a..909b793 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -19,6 +19,7 @@
   --color-border-subtle: var(--neutral-300);
   --color-text-subtle: var(--neutral-500);
   --color-skeleton: var(--neutral-200);
+  --color-grid-line: rgb(0 0 0 / 0.03);
 
   /* Neutral Grays */
   --neutral-50: #fafafa;
@@ -114,6 +115,7 @@
   --color-border-subtle: rgb(255 255 255 / 0.1);
   --color-text-subtle: var(--neutral-400);
   --color-skeleton: var(--neutral-800);
+  --color-grid-line: rgb(255 255 255 / 0.05);
 
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
@@ -401,6 +403,25 @@
   background-color: color-mix(in srgb, var(--color-skeleton) 70%, transparent);
 }
 
+/* Subtle dotted-grid overlay used as a decorative background on the
+   comparison paper surface. Color and intensity auto-switch via
+   --color-grid-line. `bg-grid-sm` uses a tighter cell — typical mobile
+   choice; `bg-grid` is the default desktop cell. Pair with absolute /
+   pointer-events-none on the overlay element. */
+@utility bg-grid {
+  background-image:
+    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+@utility bg-grid-sm {
+  background-image:
+    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
+  background-size: 10px 10px;
+}
+
 /* ── Typography ───────────────────────────────────────────────── */
 
 @utility text-label-mono {
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index debff88..a5ae2de 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -288,10 +288,9 @@ $effect(() => {
             'shadow-floating-panel dark:shadow-floating-panel-dark',
         )}
     >
-        <!-- Subtle grid overlay — pointer-events-none, very low opacity -->
+        <!-- Subtle dotted-grid overlay — purely decorative. -->
         <div
-            class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-swiss-black dark:text-swiss-white"
-            style={gridStyle}
+            class="absolute inset-0 pointer-events-none bg-grid-sm md:bg-grid"
             aria-hidden="true"
         >
         </div>