Filter Dataset

The Filter dataset defines values used for CSS filter functions for visual effects.

Location

Resolved locations:

shilpConfig.values.filter.blur

Theme locations:

shilpConfig.theme.blur

Usage

Intent	Theme Key	Description
`@filter blur-*;`	`"blur"`	Filter blur
`@filter backdrop-blur-*;`	`"blur"`	Backdrop filter blur

These utilities read values from the theme, which is built from this dataset.

Dataset Structure

The dataset is a nested key–value map of filter related tokens to CSS values.

As of now, It will includes blur only.

See: Filter Dataset Reference

Customizing the Dataset

You can extend or override this dataset in your config.

Customize filter dataset (blur)
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  extend: {
    values: {
      filter: {
        blur: {
          xl: "10px",
        },
      },
    },
  },
};

export default shilpConfig;

This will make additional filter related tokens available through the theme system.

Filter Dataset Reference

Filter Dataset
const filter = {
  blur: {
    0: 0,
    xs: "1px",
    sm: "2px",
    DEFAULT: "4px",
    md: "6px",
    lg: "8px",
  },
};

export default filter;