Blend Dataset

Location

Resolved location: shilpConfig.values.blend
Theme location: shilpConfig.theme.blend

Usage

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

Dataset Structure

The dataset is a simple key–value map of blend mode tokens to CSS values.

See: Blend Dataset Reference

Customizing the Dataset

You can override or modify the dataset structure in your config.

However, new blend values cannot be added because the dataset already covers all supported blend modes within the Shilp CSS browser baseline.

Customize blend datasetcopy to clipboard
const shilpConfig = {
	source: "react",

	extend: {
		values: {
			blend: {
				// modify structure if needed
			},
		},
	},
};

export default shilpConfig;

This will update blend tokens available through the theme system.

Blend Dataset Reference

Blend Datasetcopy to clipboard
const blend = {
	color: {
		DEFAULT: "color",
		burn: "burn",
		dodge: "dodge",
	},
	darken: "darken",
	diff: "difference",
	exclusion: "exclusion",
	hue: "hue",
	light: {
		DEFAULT: "lighten",
		hard: "hard-light",
		soft: "soft-light",
	},
	luminosity: "luminosity",
	multiply: "multiply",
	normal: "normal",
	overlay: "overlay",
	saturation: "saturation",
	screen: "screen",
};

export default blend;