Color Palette

[JohnPixle]

@HardeepAsrani here is my recent work on the color palette for Quick theme, and the HSL-based formula. As discussed, despite the fact that this can be AI-generated, we decided to go for a manual solution which is more safe and within specific boundaries.

Let me know if the above make sense:

Theme Color Palette

For each color you will find a lightness value in the parenthesis, to give you an idea of the lightness

• Site Background (L99%)
• Light Background (L:95%)
• Dark Background (L:30%)
• Text (L:10%)
• Text on Dark (L:98%)
• Primary (L:60%)
• Secondary (L:70%)

Example with HSL values

The idea is that we define a primary accent color in HEX (?), and then we extract tints and shades by manipulating the Lightness value. The generated colors are then assigned to theme colors (for example the lightest color would go as site background, and the darkest shade would be assigned to text color.

"palette": [
{
"color": "hsla(240, 80%, 99%, 1)",
"name": "Site Background",
"slug": "bg-site"
},
{
"color": "hsla(240, 80%, 10%, 1)",
"name": "Text",
"slug": "text"
},
{
"color": "hsla(240, 80%, 95%, 1)",
"name": "Light Background",
"slug": "bg-light"
},
{
"color": "hsla(240, 80%, 30%, 1)",
"name": "Dark Background",
"slug": "bg-dark"
},
{
"color": "hsla(240, 80%, 98%, 1)",
"name": "Text on dark",
"slug": "text-on-dark"
},
{
"color": "hsla(240, 80%, 60%, 1)",
"name": "Primary accent",
"slug": "accent-primary"
},
{
"color": "hsla(240, 80%, 70%, 1)",
"name": "Secondary accent",
"slug": "accent-secondary"
}
]

[JohnPixle]

Assistant Specifications for Color palette Generation

Based on our discussion yesterday on Slack, I have improved the color palette instructions for the Assistant.
I have also done some deeper research on the best practices on color naming convention from the Gutenberg Repository/

We will be following this format, which is more consistent with TT4 and the future trajectory of color management in GB:

Backgrounds
-base: body background
-base-2: Light variation of body background
-base-3: Dark variation of body background

Text
-contrast: Body Text
-contrast-2: Secondary text (lighter than body)
-contrast-3: Border (lighter that contrast-2)
-contrast-4: Text on dark or accent backgrounds

Accents
-accent: Accent color
-accent-2: Accent color 2

Here is the updated instructions for the assistant:

[
	{
		"slug": "base",
		"name": "Background",
		"value": "#ffffff",
		"description": "The main body color of the website. Usually white or almost white."
	},
	{
		"slug": "base-2",
		"name": "Light Background",
		"value": "#f7f7f3",
		"description": "A subtle variation of the body background, that is used to visually separate sections and areas of the layout."
	},
	{
		"slug": "base-3",
		"name": "Dark Background",
		"value": "#1A1919",
		"description": "Areas of the website that have a dark background. Any text over dark background areas should have the Text on Dark color (contrast-4) to ensure proper contrast."
	},
	{
		"slug": "contrast",
		"name": "Text",
		"value": "#0C0C0C",
		"description": "The main color of the body text. It is applied to text that is over the body background (base) or any of the light (base-2) backgrounds."
	},
	{
		"slug": "contrast-2",
		"name": "Secondary text",
		"value": "rgba(0,0,0, 0.5)",
		"description": "This color is applied on secondary text. The color should have sufficient contrast when placed over the body or light backgrounds (base and base-2)."
	},
	{
		"slug": "contrast-3",
		"name": "Border",
		"value": "rgba(0,0,0, 0.5)",
		"description": "This color is applied on borders. The color should have sufficient contrast when placed over the body or light backgrounds (base and base-2) and is lighter than contrast-3."
	},
	{
		"slug": "contrast-4",
		"name": "Text on dark",
		"value": "#F8F8F8",
		"description": "This color is applied to text that is over a dark background (base-3). For example, if the background color is black, the text color is white, or a color that ensures proper contrast."
	},
	{
		"slug": "accent",
		"name": "Accent",
		"value": "#325CE8",
		"description": "Primary accent color. Can be used for buttons, links, and sometimes as a background. Any text over the accent background should apply the text-on-dark (contrast-4) color."
	},
	{
		"slug": "accent-2",
		"name": "Accent 2",
		"value": "#466DEC",
		"description": "Secondary accent color. Can be used for buttons, links, and sometimes as a background. Any text over the accent background should apply the text-on-dark (contrast-4) color."
	}
]

I have already updated the theme json in my [branch] with these color slugs (https://github.com/Codeinwp/quickwp-theme/tree/cleanup-and-styles).

It's working quite great actually, with a lot of efficiency.