From e55a747adcfff2b2648f4cbd74d58a596ece6475 Mon Sep 17 00:00:00 2001
From: Keith Solomon <ksolo@local>
Date: Thu, 6 Aug 2026 15:03:53 -0500
Subject: [PATCH] feat: mirror retuned cssFilter values in style.scss

---
 src/styles/style.scss | 67 ++++++++++++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 27 deletions(-)

diff --git a/src/styles/style.scss b/src/styles/style.scss
index 3d4f054..bd21523 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -37,45 +37,58 @@
 // Each filter value is split into calc(...) expressions where the literal
 // numbers are replaced with (value * var(--filter-intensity)). For "none"
 // (normal preset) there is nothing to scale — the image stays unfiltered.
+//
+// Selector shape: the wrapper <figure> carries `wp-block-ksolo-image-filter`
+// AND the `has-filter-<slug>` class on the same element (see edit.js and
+// save.js), and the inner <img> ALSO carries `ksolo-image-filter-img` and
+// the same `has-filter-<slug>` class. The two previous attempts used a
+// descendant combinator (".wp-block-ksolo-image-filter .has-filter-warm img"),
+// which never matches because the class sits on the same element rather
+// than a child. We target the <img> by its stable, always-present pair of
+// classes (`.ksolo-image-filter-img.has-filter-<slug>`) scoped under the
+// wrapper so the rule still applies when Gutenberg's `useBlockProps` adds
+// additional wrapper-level classes.
 .wp-block-ksolo-image-filter {
-    .has-filter-warm img {
-        filter: saturate( calc( 0.25 + 1 * var(--filter-intensity) ) )
-            sepia( calc( 0.18 * var(--filter-intensity) ) )
-            brightness( calc( 0.05 + 1 * var(--filter-intensity) ) )
-            contrast( calc( 0.05 + 1 * var(--filter-intensity) ) );
-    }
-
-    .has-filter-cool img {
-        filter: saturate( calc( 0.95 * var(--filter-intensity) ) )
-            hue-rotate( calc( -10deg * var(--filter-intensity) ) )
-            brightness( calc( 0.02 + 1 * var(--filter-intensity) ) )
-            contrast( calc( 0.05 + 1 * var(--filter-intensity) ) );
-    }
-
-    .has-filter-vivid img {
-        filter: saturate( calc( 0.6 + 1 * var(--filter-intensity) ) )
-            contrast( calc( 0.15 + 1 * var(--filter-intensity) ) )
-            brightness( calc( 0.03 + 1 * var(--filter-intensity) ) );
-    }
-
-    .has-filter-fade img {
-        filter: saturate( calc( 0.85 * var(--filter-intensity) ) )
-            contrast( calc( 0.9 * var(--filter-intensity) ) )
+    .ksolo-image-filter-img.has-filter-warm {
+        filter: saturate( calc( 0.5 + 1 * var(--filter-intensity) ) )
+            sepia( calc( 0.6 * var(--filter-intensity) ) )
             brightness( calc( 0.08 + 1 * var(--filter-intensity) ) )
-            sepia( calc( 0.08 * var(--filter-intensity) ) );
+            contrast( calc( 0.1 + 1 * var(--filter-intensity) ) )
+            hue-rotate( calc( -8deg * var(--filter-intensity) ) );
     }
 
-    .has-filter-mono img {
+    .ksolo-image-filter-img.has-filter-cool {
+        filter: saturate( calc( 0.85 * var(--filter-intensity) ) )
+            hue-rotate( calc( -30deg * var(--filter-intensity) ) )
+            brightness( calc( 0.95 * var(--filter-intensity) ) )
+            contrast( calc( 0.08 + 1 * var(--filter-intensity) ) );
+    }
+
+    .ksolo-image-filter-img.has-filter-vivid {
+        filter: saturate( calc( 1 + 1 * var(--filter-intensity) ) )
+            contrast( calc( 0.3 + 1 * var(--filter-intensity) ) )
+            brightness( calc( 0 + 1 * var(--filter-intensity) ) )
+            hue-rotate( calc( -5deg * var(--filter-intensity) ) );
+    }
+
+    .ksolo-image-filter-img.has-filter-fade {
+        filter: saturate( calc( 0.6 * var(--filter-intensity) ) )
+            contrast( calc( 0.85 * var(--filter-intensity) ) )
+            brightness( calc( 0.15 + 1 * var(--filter-intensity) ) )
+            sepia( calc( 0.18 * var(--filter-intensity) ) );
+    }
+
+    .ksolo-image-filter-img.has-filter-mono {
         filter: grayscale( calc( 1 * var(--filter-intensity) ) ) contrast( calc( 0.05 + 1 * var(--filter-intensity) ) );
     }
 
-    .has-filter-dramatic img {
+    .ksolo-image-filter-img.has-filter-dramatic {
         filter: contrast( calc( 0.35 + 1 * var(--filter-intensity) ) )
             saturate( calc( 0.15 + 1 * var(--filter-intensity) ) )
             brightness( calc( 0.92 * var(--filter-intensity) ) );
     }
 
-    .has-filter-sepia img {
+    .ksolo-image-filter-img.has-filter-sepia {
         filter: sepia( calc( 0.85 * var(--filter-intensity) ) )
             saturate( calc( 0.1 + 1 * var(--filter-intensity) ) )
             contrast( calc( 0.05 + 1 * var(--filter-intensity) ) );