Minor updates to prep for WP 6.6

As of v1.1.9, all color palettes have shifted to darker shades, making the contrast ratios better for accessibility. Additionally, the Quaternary color in theme.json has been renamed to Neutral, resulting in 3 main colors (Primary, Secondary, Tertiary) and then providing a grey to compliment those.

If you were using the Quaternary color on your site, you could redefine it in Global Styles and reapply it to any elements where it was being used.

In the spirit of bringing color and more vibrant energy to Powder (out-of-the-box), a few more noticeable changes have been implemented via theme.json:

• Link color has changed from contrast to primary.
• Button background color has changed from contrast to primary.

If you would like to revert these changes, visit the Site Editor > Global Styles > Colors and set them to your desired preference.

Lastly, and likely the most significant change, I have redefined the spacingSizes in theme.json to align with WordPress core. Themes such as TT4 use sizes 20-80 (slugs) in lieu of t-shirt or opinionated choices. Here’s the new code:

{
	"settings": {
		"spacing": {
			"defaultSpacingSizes": false,
			"spacingSizes": [
				{
					"name": "20",
					"size": "clamp(15px, 2vw, 20px)",
					"slug": "20"
				},
				{
					"name": "30",
					"size": "clamp(25px, 3vw, 30px)",
					"slug": "30"
				},
				{
					"name": "40",
					"size": "clamp(30px, 4vw, 40px)",
					"slug": "40"
				},
				{
					"name": "50",
					"size": "clamp(35px, 5vw, 50px)",
					"slug": "50"
				},
				{
					"name": "60",
					"size": "clamp(40px, 6vw, 60px)",
					"slug": "60"
				},
				{
					"name": "70",
					"size": "clamp(50px, 7vw, 70px)",
					"slug": "70"
				},
				{
					"name": "80",
					"size": "clamp(60px, 8vw, 80px)",
					"slug": "80"
				}
			]
		}
	}
}

Powder’s template and pattern markup has been updated to reflect these new sizes. To ensure existing sites remain unaffected by this change, the following code was added to the top of the style.css file:

/* Legacy Styles (Do not remove)
---------------------------------------- */

/* -- Spacing -- */

:root {
	--wp--preset--spacing--x-small: clamp(10px, 2vw, 20px);
	--wp--preset--spacing--small: clamp(30px, 4vw, 40px);
	--wp--preset--spacing--medium: clamp(40px, 6vw, 60px);
	--wp--preset--spacing--large: clamp(50px, 8vw, 80px);
	--wp--preset--spacing--x-large: clamp(60px, 10vw, 100px);
}