Improve color palette design system #106
Conversation
richtabor
added
[Type] Enhancement
|
Related to #105. |
richtabor
changed the title
richtabor
changed the title
|
Ok, I find these a little confusing at first read but that's not necessarily a blocker. Are the |
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. 
|
Resolved! |
MaggieCabrera
left a comment
MaggieCabrera
left a comment
There was a problem hiding this comment.
Ok, that makes sense to me, this looks good
Description
Organizes, cleans-up, and structures colors in support of a variable design system that can be flexed/reduced better.
Key concepts:
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
/ $variantnotation helps attribute this color as an intended alternate.Uses numeral values, instead of primary/secondary/tertiary/etc, as those are indicative of priority, instead of alternatives.
Reduces and consolidates color values (matching the initial Figma designs). Theme variations should register alternates instead of including those colors in the parent.
Screenshots
CSS:
Testing Instructions