@chakra-v2/styled-system/dist/esm/config/filter.mjs

Style function for css-in-js building component libraries

import { t } from '../utils/index.mjs';
import { transformFunctions } from '../utils/transform-functions.mjs';

const filter = {
  filter: { transform: transformFunctions.filter },
  blur: t.blur((theme) => `--${theme.config.cssVarPrefix}-blur`),
  brightness: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-brightness`,
    transformFunctions.brightness
  ),
  contrast: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-contrast`,
    transformFunctions.contrast
  ),
  hueRotate: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-hue-rotate`,
    transformFunctions.hueRotate
  ),
  invert: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-invert`,
    transformFunctions.invert
  ),
  saturate: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-saturate`,
    transformFunctions.saturate
  ),
  dropShadow: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-drop-shadow`,
    transformFunctions.dropShadow
  ),
  backdropFilter: { transform: transformFunctions.backdropFilter },
  backdropBlur: t.blur(
    (theme) => `--${theme.config.cssVarPrefix}-backdrop-blur`
  ),
  backdropBrightness: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-backdrop-brightness`,
    transformFunctions.brightness
  ),
  backdropContrast: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-backdrop-contrast`,
    transformFunctions.contrast
  ),
  backdropHueRotate: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-backdrop-hue-rotate`,
    transformFunctions.hueRotate
  ),
  backdropInvert: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-backdrop-invert`,
    transformFunctions.invert
  ),
  backdropSaturate: t.propT(
    (theme) => `--${theme.config.cssVarPrefix}-backdrop-saturate`,
    transformFunctions.saturate
  )
};

export { filter };