Brain Dump Incoming
So the color manager information is stored like this in the wp_options table in a record called cornerstone_color_items. It’s just an array of objects which is simple enough to edit and then place in the DB manually if you’re comfortable in phpMyAdmin or editing the DB otherwise. Works perfectly well. But there’s no reason we couldn’t have a more friendly way of doing this in an importer that accepts a JSON file so I don’t have to worry about the escaped quotes and the ID field could be generated instead of named manually and incremented like I’ve done below… I could also imaging that hex values could be automatically converted into rgb() automatically upon import (optional?):
[
{\"value\":\"rgb(0, 0, 0)\",\"title\":\"--primary-headlines\",\"_id\":\"common_use_001\"},
{\"value\":\"rgb(55, 55, 55)\",\"title\":\"--secondary-headlines\",\"_id\":\"common_use_002\"},
{\"value\":\"rgb(0, 0, 0)\",\"title\":\"--primary-body\",\"_id\":\"common_use_003/"},
{\"value\":\"rgb(55, 55, 55)\",\"title\":\"--secondary-body\",\"_id\":\"common_use_004\"},
{\"value\":\"rgb(255, 255, 255)\",\"title\":\"--very-light-text\",\"_id\":\"common_use_005\"},
{\"value\":\"rgb(0, 0, 0)\",\"title\":\"--very-dark-text\",\"_id\":\"common_use_006\"},
{\"value\":\"rgb(0, 0, 255)\",\"title\":\"--link\",\"_id\":\"common_use_007\"},
{\"value\":\"rgb(0, 255, 0)\",\"title\":\"--link-interaction\",\"_id\":\"common_use_008\"},
{\"value\":\"#50_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-50\",\"_id\":\"custom_color_001\"},
{\"value\":\"#100_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-100\",\"_id\":\"custom_color_002\"},
{\"value\":\"#200_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-200\",\"_id\":\"custom_color_003\"},
{\"value\":\"#300_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-300\",\"_id\":\"custom_color_004\"},
{\"value\":\"#400_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-400\",\"_id\":\"custom_color_005\"},
{\"value\":\"#500_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-500\",\"_id\":\"custom_color_006\"},
{\"value\":\"#600_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-600\",\"_id\":\"custom_color_007\"},
{\"value\":\"#700_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-700\",\"_id\":\"custom_color_008\"},
{\"value\":\"#800_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-800\",\"_id\":\"custom_color_009\"},
{\"value\":\"#900_HEX_CODE\",\"title\":\"--SHADE_GROUP_1_COLOR_NAME-900\",\"_id\":\"custom_color_010\"}
]
Then I add as many other groups of shades I need for the project. I then make CSS variables with the same names and use them in the project’s child stylesheet as needed. It requires some planning to set up but I have it pretty streamlined now.
Two additional thoughts occur to me as I was getting this together. Just brainstorming here:
-
Have the ability to flag a color (or shade in this case) visually so it can me marked as “Primary” or “Default” in some way. Basically, the ability to place an extra custom label on a color. This would be particularly useful for this kind of Tailwind inspired shade setup.
-
I’d love to map a color to another color. So that I could have all of these shades defined in there for general use and reference but maybe for example, the more semantically named --primary-headline might need to be the same color value as --SHADE_GROUP_1_COLOR_NAME-500, for example. This is just a way to keep things semantic for commonly used elements.
I can imagine the need to update the color of headlines in the future maybe. I’ll want to keep my shade pallet in tact as a whole but maybe I associate the headline with --SHADE_GROUP_1_COLOR_NAME-800 instead. Would just like a way to indicate that somehow visually (like, maybe there’s no actual technical mapping taking place. Changing one doesn’t change the other? Not sure about this… just brain dumping here like I said). Again, this might be largely just a UI element to enhance UX in a developer friendly way.
So those are my thoughts and a little bit about what I’m currently doing to help stand up a new site a little quicker than inputting all the colors I need in the Cornerstone UI.
What other base setup imports might be a good idea along side this one I wonder?
