Add qualitative color palette to theme package#74875
Add qualitative color palette to theme package#74875dabowman wants to merge 2 commits intoWordPress:trunkfrom
Conversation
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @dabowman! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
2 similar comments
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
@dabowman Thanks for working on this! I'll find some time to review the approach, I'd love to collaborate on it. |
This is a first attempt at adding a palette of accent colors to the main WordPress theme package. The current package has a really robust system for deriving color tokens. However it only derives a main theme color, neutrals and semantic colors that are associated with things like warning, error etc. For visual differentiation that isn't semantic (qualitative) we need more colors that won't be confused with their semantic cousins. This would be useful for collaborative editing, categories and tags, charts etc. Instead of hardcoding some more accent colors I wanted to try and combine efforts with the design system folks and add it here where it can be used by more folks and where it will stay aligned with the broader direction of the WordPress design system efforts.
What?
Adds a qualitative color palette system to the theme package that generates 8 visually distinct accent colors by rotating the primary theme color's hue in 45° increments through OKLCH color space.
Why?
This feature enables visual differentiation of items without semantic meaning, such as collaborator avatars, chart series, or category tags. By deriving the accent colors from the primary theme color, the palette remains harmonious while providing sufficient visual distinction between items.
How?
Added rotateHue() utility in color-utils.ts that rotates a color's hue in OKLCH color space while preserving lightness and chroma
Added getQualitativeSeeds() function in constants.ts that generates accent1 through accent7 by rotating the primary hue in 45° increments
Updated DEFAULT_SEED_COLORS to include the derived qualitative accents for static token generation
Modified use-theme-provider-styles.ts to dynamically derive accent1-7 from the current primary color at runtime
Added semantic tokens for bg.surface.accent1-7 and fg.content.accent1-7 in color.json
Added QualitativePalette Storybook story demonstrating avatar examples and color swatches
Testing Instructions
Navigate to the theme package: cd packages/theme
Run the build: npm run build
Verify tokens generate successfully (should show 144 tokens)
Start Storybook: npm run storybook:dev
Navigate to "Design System / Theme / Theme Provider / Color Scales"
Open the "Default" story and scroll to "Qualitative Accent Ramps" section
Open the "Qualitative Palette" story to see avatar examples and color swatches
Adjust the primary color control and verify accent colors update accordingly
Testing Instructions for Keyboard
This PR does not introduce any new interactive UI elements. The Storybook stories are for documentation purposes only and do not require keyboard interaction testing.
Screenshots or screencast