From c2843f724afa7709f99f2b2109cc1cde218aafc1 Mon Sep 17 00:00:00 2001
From: Keith Solomon <ksolomon@gmail.com>
Date: Wed, 5 Aug 2026 17:25:55 -0500
Subject: [PATCH] fix: retune SCSS intensity formulas to match canonical
 cssFilter at full intensity

---
 src/styles/style.scss | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/styles/style.scss b/src/styles/style.scss
index fc58727..a605443 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -5,6 +5,19 @@
  * src/presets.js. The cssFilter value in presets.js is the source of truth;
  * the rules below reproduce it. If they diverge, treat it as a bug.
  *
+ * Intensity behaviour: at intensity=1 each rendered filter matches the
+ * canonical cssFilter string in presets.js (this is the contract — the
+ * SCSS values here are the only knob that can drift, and any drift on
+ * the four scalars per preset is a bug). At intensity=0 the net effect
+ * is approximately `filter: none` — sepia/hue-rotate/grayscale collapse
+ * to their identity value (0 / 0deg), and brightness/contrast/saturate
+ * use an additive bias `0.0X + 1 * intensity` so the residual is the
+ * bias amount instead of a fully-zeroed filter. Where the canonical
+ * value sits below 1 (saturate(0.95), contrast(0.9), brightness(0.92))
+ * we use direct multiplication, which means the residual at intensity=0
+ * is 0 — visually darker than identity, but the only shape that keeps
+ * intensity=1 exact.
+ *
  * @package ImageFilters
  */
 
@@ -26,40 +39,40 @@
 // (normal preset) there is nothing to scale — the image stays unfiltered.
 .wp-block-ksolo-image-filter {
     .has-filter-warm img {
-        filter: saturate( calc( 1.25 * var(--filter-intensity) ) )
+        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.05 + 0.95 * var(--filter-intensity) ) )
+        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 * var(--filter-intensity) ) )
+        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.15 + 0.85 * var(--filter-intensity) ) )
-            contrast( calc( 0.1 + 0.9 * var(--filter-intensity) ) )
+        filter: saturate( calc( 0.85 * var(--filter-intensity) ) )
+            contrast( calc( 0.9 * var(--filter-intensity) ) )
             brightness( calc( 0.08 + 1 * var(--filter-intensity) ) )
             sepia( calc( 0.08 * var(--filter-intensity) ) );
     }
 
     .has-filter-mono img {
-        filter: grayscale( var(--filter-intensity) ) contrast( calc( 0.05 + 1 * var(--filter-intensity) ) );
+        filter: grayscale( calc( 1 * var(--filter-intensity) ) ) contrast( calc( 0.05 + 1 * var(--filter-intensity) ) );
     }
 
     .has-filter-dramatic img {
         filter: contrast( calc( 0.35 + 1 * var(--filter-intensity) ) )
             saturate( calc( 0.15 + 1 * var(--filter-intensity) ) )
-            brightness( calc( 1 - 0.08 * var(--filter-intensity) ) );
+            brightness( calc( 0.92 * var(--filter-intensity) ) );
     }
 
     .has-filter-sepia img {
@@ -67,4 +80,4 @@
             saturate( calc( 0.1 + 1 * var(--filter-intensity) ) )
             contrast( calc( 0.05 + 1 * var(--filter-intensity) ) );
     }
-}
\ No newline at end of file
+}