Skip to content

Instantly share code, notes, and snippets.

@ryelle

ryelle/postcss.config.js Secret

Last active July 18, 2023 23:27
Show Gist options
  • Save ryelle/ce466fe20e9c8165d8cafe9597b84316 to your computer and use it in GitHub Desktop.
Save ryelle/ce466fe20e9c8165d8cafe9597b84316 to your computer and use it in GitHub Desktop.
Download ZIP
Convert colors in CSS to new WordPress palette
Raw
readme.md

PostCSS Plugin to update CSS to the new WordPress color palette

This uses PostCSS and postcss-palettize-colors to automatically convert any colors in your CSS to the new color palette in WordPress admin. It uses a basic color difference algorithm to convert any color to the closest color in the palette.

To use it, follow the usage guide from PostCSS for your setup. Follow the postcss.config.js in this gist to add the postcss-palettize-colors to your process. Make sure to define the palette colors using the paletteOptions.

If you're not using PostCSS or a build process yet

  1. Install the dependencies

    npm i postcss postcss-cli https://github.com/ryelle/postcss-palettize-colors.git

  2. Configure PostCSS - download the postcss.config.js in this gist. This includes the full color palette for wp-admin.

  3. Run PostCSS via command line.

    npx postcss style.css --replace

    Swap out style.css for the path to your CSS file. Note, this will overwrite your CSS file with the new color values.

    Alternately, if you need to match colors in both 5.7 and older WordPress: you could use this command to create a separate 5.7-specific stylesheet, and check the version of WordPress to enqueue the correct CSS for each version.

    npx postcss style.css -o style-57.css

    See postcss-cli for more configuration options.

Raw
postcss.config.js
const paletteOptions = {
colors: {
"white": "#fff",
"black": "#000",
"gray-0": "#f6f7f7",
"gray-2": "#f0f0f1",
"gray-5": "#dcdcde",
"gray-10": "#c3c4c7",
"gray-20": "#a7aaad",
"gray-30": "#8c8f94",
"gray-40": "#787c82",
"gray-50": "#646970",
"gray-60": "#50575e",
"gray-70": "#3c434a",
"gray-80": "#2c3338",
"gray-90": "#1d2327",
"gray-100": "#101517",
"blue-0": "#f0f6fc",
"blue-5": "#c5d9ed",
"blue-10": "#9ec2e6",
"blue-20": "#72aee6",
"blue-30": "#4f94d4",
"blue-40": "#3582c4",
"blue-50": "#2271b1",
"blue-60": "#135e96",
"blue-70": "#0a4b78",
"blue-80": "#043959",
"blue-90": "#01263a",
"blue-100": "#00131c",
"red-0": "#fcf0f1",
"red-5": "#facfd2",
"red-10": "#ffabaf",
"red-20": "#ff8085",
"red-30": "#f86368",
"red-40": "#e65054",
"red-50": "#d63638",
"red-60": "#b32d2e",
"red-70": "#8a2424",
"red-80": "#691c1c",
"red-90": "#451313",
"red-100": "#240a0a",
"yellow-0": "#fcf9e8",
"yellow-5": "#f5e6ab",
"yellow-10": "#f2d675",
"yellow-20": "#f0c33c",
"yellow-30": "#dba617",
"yellow-40": "#bd8600",
"yellow-50": "#996b00",
"yellow-60": "#755100",
"yellow-70": "#614200",
"yellow-80": "#4a3200",
"yellow-90": "#362400",
"yellow-100": "#211600",
"green-0": "#edfaef",
"green-5": "#b8e6bf",
"green-10": "#68de7c",
"green-20": "#1ed14b",
"green-30": "#00ba37",
"green-40": "#00a32a",
"green-50": "#008a20",
"green-60": "#007017",
"green-70": "#005c12",
"green-80": "#00450c",
"green-90": "#003008",
"green-100": "#001c05",
},
};
module.exports = {
plugins: [
require( "postcss-palettize-colors" )( paletteOptions )
],
};
@joyously
Copy link

Does this config work correctly with the spaces inside the quotes?
@ryelle
Copy link
Author

ryelle commented Jan 28, 2021

@joyously Huh, I didn't notice that (some keys have an extra space). Yes, it will still work fine, the keys are not used by the PostCSS process, but I've updated the object here anyway so it's less confusing.
@lipemat
Copy link

lipemat commented Feb 25, 2021

It appears green-100 may be missing the #.
"green-100": "#001c05",
@ryelle
Copy link
Author

ryelle commented Feb 26, 2021

@lipemat Fixed now, thanks!
@JJJ
Copy link

JJJ commented Feb 27, 2021 •
edited
Loading

I needed to run this tool using npx postcss file.css --replace, but I have a bunch of weird CLI stuff going on.

This tool is great, but take care to manually review its results.

Some schemes (Ectoplasm, Blue, Ocean, Modern) have no representation in the Palette, and their colors will simply get replaced by the closest definition.

If your color scheme CSS is all in the same file like I usually do, the results of this tool in its current iteration will be... undesirable. 😅

(Update: I split my files up for next time.)
@ryelle
Copy link
Author

ryelle commented Mar 1, 2021

I needed to run this tool using npx postcss file.css --replace, but I have a bunch of weird CLI stuff going on.

Oh, nothing weird on your end - that's actually what should be in the instructions, since postcss-cli isn't installed globally. Updated!

Some schemes (Ectoplasm, Blue, Ocean, Modern) have no representation in the Palette

That's true, this is only meant to run on CSS for the default scheme - the other admin color schemes were left alone, since they already have restricted palettes.
@Jinksi
Copy link

Jinksi commented Jul 18, 2023

@ryelle Do you know if these colors are defined somewhere within the WP-admin codebase or as a package (i.e. Automattic/color-studio) to be used by other plugins?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment