Browse Source

MAESTRO: frontend retheme pass 4 — tint pattern previews to theme foreground

Replace the approximate invert/sepia dark-mode filter with numerically
solved filter chains that recolor the black-ink preview webps exactly to
the shared foreground tokens (#292219 day, #F2EAD9 night) — the web
equivalent of the mobile app's tintColor. Verified pixel-identical
(max 0.2/255 deviation) against a canvas source-in tint reference.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
tuanchris 5 ngày trước cách đây
mục cha
commit
3857993ed6
1 tập tin đã thay đổi với 9 bổ sung3 xóa
  1. 9 3
      frontend/src/index.css

+ 9 - 3
frontend/src/index.css

@@ -163,10 +163,16 @@ body {
   font-family: 'Material Icons Outlined';
 }
 
-/* Invert pattern previews in dark mode, warmed toward the Bone foreground
-   so strokes sit on basalt like sand, not stark white on black */
+/* Tint pattern previews (black ink on transparent, from the backend renderer)
+   to the theme foreground — the web equivalent of the mobile app's tintColor
+   on its webp thumbnails. Chains are numerically solved to land exactly on
+   the foreground tokens: #292219 (day ink) / #F2EAD9 (lit sand, night). */
+.pattern-preview {
+  filter: brightness(0) saturate(100%) invert(9%) sepia(11%) saturate(1771%) hue-rotate(354deg) brightness(98%) contrast(88%);
+}
+
 .dark .pattern-preview {
-  filter: invert(1) sepia(0.25) brightness(0.95);
+  filter: brightness(0) saturate(100%) invert(89%) sepia(29%) saturate(179%) hue-rotate(335deg) brightness(104%) contrast(90%);
 }
 
 /* Marquee animation for scrolling text */