Solo-Web-Works/SoloFilters
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: retune SCSS intensity formulas to match canonical cssFilter at full intensity

Browse Source
This commit is contained in:
Keith Solomon
2026-08-05 17:25:55 -05:00
parent a075523287
commit c2843f724a
1 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/style.scss
+21 -8
View File
@@ -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) ) );
}
}
}