Skip to content

Instantly share code, notes, and snippets.

@ryelle

ryelle/postcss.config.js Secret

Last active Mar 21, 2021
Embed
What would you like to do?
Convert colors in CSS to new WordPress palette

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.

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

This comment has been minimized.

Copy link

@joyously joyously commented Jan 28, 2021

Does this config work correctly with the spaces inside the quotes?

@ryelle

This comment has been minimized.

Copy link
Owner Author

@ryelle 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

This comment has been minimized.

Copy link

@lipemat lipemat commented Feb 25, 2021

It appears green-100 may be missing the #.
"green-100": "#001c05",

@ryelle

This comment has been minimized.

Copy link
Owner Author

@ryelle ryelle commented Feb 26, 2021

@lipemat Fixed now, thanks!

@JJJ

This comment has been minimized.

Copy link

@JJJ JJJ commented Feb 27, 2021

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

This comment has been minimized.

Copy link
Owner Author

@ryelle 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment