Add presets.js as single source of truth for filter definitions
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* Single source of truth for filter presets.
|
||||
*
|
||||
* The CSS rules in src/styles/style.scss MUST match this list one-to-one.
|
||||
* Adding a preset = add an entry here + add a matching .has-filter-<slug>
|
||||
* rule in style.scss. Do not duplicate filter values elsewhere.
|
||||
*
|
||||
* @package ImageFilters
|
||||
*/
|
||||
|
||||
export const PRESETS = [
|
||||
{
|
||||
slug: 'normal',
|
||||
label: 'Normal',
|
||||
color: '#f0f0f0',
|
||||
cssFilter: 'none',
|
||||
},
|
||||
{
|
||||
slug: 'warm',
|
||||
label: 'Warm',
|
||||
color: '#f4a261',
|
||||
cssFilter: 'saturate(1.25) sepia(0.18) brightness(1.05) contrast(1.05)',
|
||||
},
|
||||
{
|
||||
slug: 'cool',
|
||||
label: 'Cool',
|
||||
color: '#a8dadc',
|
||||
cssFilter: 'saturate(0.95) hue-rotate(-10deg) brightness(1.02) contrast(1.05)',
|
||||
},
|
||||
{
|
||||
slug: 'vivid',
|
||||
label: 'Vivid',
|
||||
color: '#e63946',
|
||||
cssFilter: 'saturate(1.6) contrast(1.15) brightness(1.03)',
|
||||
},
|
||||
{
|
||||
slug: 'fade',
|
||||
label: 'Fade',
|
||||
color: '#cdb4db',
|
||||
cssFilter: 'saturate(0.85) contrast(0.9) brightness(1.08) sepia(0.08)',
|
||||
},
|
||||
{
|
||||
slug: 'mono',
|
||||
label: 'Mono',
|
||||
color: '#6c757d',
|
||||
cssFilter: 'grayscale(1) contrast(1.05)',
|
||||
},
|
||||
{
|
||||
slug: 'dramatic',
|
||||
label: 'Dramatic',
|
||||
color: '#1d3557',
|
||||
cssFilter: 'contrast(1.35) saturate(1.15) brightness(0.92)',
|
||||
},
|
||||
{
|
||||
slug: 'sepia',
|
||||
label: 'Sepia',
|
||||
color: '#d4a373',
|
||||
cssFilter: 'sepia(0.85) saturate(1.1) contrast(1.05)',
|
||||
},
|
||||
];
|
||||
|
||||
export const DEFAULT_PRESET = 'normal';
|
||||
|
||||
const VALID_SLUGS = new Set( PRESETS.map( ( p ) => p.slug ) );
|
||||
|
||||
/**
|
||||
* Returns true if the given slug is a known preset.
|
||||
*
|
||||
* @param {string} slug
|
||||
* @return {boolean}
|
||||
*/
|
||||
export function isValidPresetSlug( slug ) {
|
||||
return VALID_SLUGS.has( slug );
|
||||
}
|
||||
Reference in New Issue
Block a user