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

feat: mirror retuned cssFilter values in style.scss

Browse Source
This commit is contained in:
Keith Solomon
2026-08-06 15:03:53 -05:00
parent 0837ecc569
commit e55a747adc
1 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/style.scss
+40 -27
View File
@@ -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) ) );