Skip to content
This repository has been archived by the owner on Jan 24, 2024. It is now read-only.

Improve color palette design system #106

Merged
merged 5 commits into from
Aug 29, 2023
Merged

Improve color palette design system #106

merged 5 commits into from
Aug 29, 2023

Conversation

richtabor
Copy link
Member

@richtabor richtabor commented Aug 28, 2023

Description
Organizes, cleans-up, and structures colors in support of a variable design system that can be flexed/reduced better.

Key concepts:

  1. Use "Base / $variant" structure for naming colors, instead of actual color representation. Example: "Accent / Three" instead of "Brick". This way users can edit the color in Global Styles and it won't always render the color title as "Brick". The / $variant notation helps attribute this color as an intended alternate.

  2. Uses numeral values, instead of primary/secondary/tertiary/etc, as those are indicative of priority, instead of alternatives.

  3. Reduces and consolidates color values (matching the initial Figma designs). Theme variations should register alternates instead of including those colors in the parent.

Screenshots

Before After
CleanShot 2023-08-28 at 11 47 12 CleanShot 2023-08-28 at 11 51 33

CSS:
CleanShot 2023-08-28 at 12 24 24

Testing Instructions

  1. View the color settings of any block that supports color. See the new palette.

@richtabor
Copy link
Member Author

Related to #105.

@richtabor richtabor changed the title Color palette design system WIP: Color palette design system Aug 28, 2023
@richtabor richtabor changed the title WIP: Color palette design system Improve color palette design system Aug 28, 2023
@MaggieCabrera
Copy link
Collaborator

Ok, I find these a little confusing at first read but that's not necessarily a blocker. Are the variants each related to one of the 3 different alternatives of the theme? if so, would it make it sense to make it more descriptive and name them Accent / Portfolio instead? I'd prefer that over numbers for end users. Besides that this looks good though I might have made a mess for you with conflicts after merging other refactors on the patterns, so so sorry about that

@richtabor
Copy link
Member Author

richtabor commented Aug 29, 2023

Are the variants each related to one of the 3 different alternatives of the theme? if so, would it make it sense to make it more descriptive and name them Accent / Portfolio instead?

No, these are just the common accent colors used throughout the theme design on Figma. All the accent colors should be available regardless of the use case.

I don't think we should be connecting color with purpose (Accent / Portfolio), but rather purpose with option (Accent / One). There are five accent colors to pick from in the default theme.json.

CleanShot 2023-08-28 at 20 04 54

@richtabor
Copy link
Member Author

Besides that this looks good though I might have made a mess for you with conflicts after merging other refactors on the patterns

Resolved!

Copy link
Collaborator

@MaggieCabrera MaggieCabrera left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, that makes sense to me, this looks good

@MaggieCabrera MaggieCabrera merged commit 4f43c50 into trunk Aug 29, 2023
2 checks passed
@juanfra juanfra deleted the clean-up-colors branch August 30, 2023 15:14
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants