Suede

Shadow Presets

Suede includes a shadow preset that adds visual depth and separation to supported blocks. Applied thoughtfully, it helps distinguish elements like Buttons, Groups, and Images while maintaining a consistent appearance.

Using theme.json Suede accomplishes two things:

  1. Disables the WordPress default shadow presets.
  2. Introduces two shadow presets in Suede: Light, Solid

Below is the relevant code found in theme.json:

{
	"settings": {
		"shadow": {
			"defaultPresets": false,
			"presets": [
				{
					"name": "Light",
					"shadow": "0 0 5px rgb(0, 0, 0, 0.1)",
					"slug": "light"
				},
				{
					"name": "Solid",
					"shadow": "10px 10px 0 currentColor",
					"slug": "solid"
				}
			]
		}
	}
}

This code yields a set of preset variables:

--wp--preset--shadow--light: 0 0 5px rgb(0, 0, 0, 0.1);
--wp--preset--shadow--solid: 5px 5px 0 currentColor;

Shadow Preset Examples

Here is an example of a group block with Light shadow preset applied:

“You can design, create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

Here is an example of a group block with Solid shadow preset applied:

“You can design, create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”