Skip to content

Add qualitative color palette to theme package#74875

Draft
dabowman wants to merge 2 commits intoWordPress:trunkfrom
dabowman:add/qualitative-color-palette
Draft

Add qualitative color palette to theme package#74875
dabowman wants to merge 2 commits intoWordPress:trunkfrom
dabowman:add/qualitative-color-palette

Conversation

@dabowman
Copy link
Contributor

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

Screenshot 2026-01-22 at 12 59 38 PM

@github-actions github-actions bot added [Package] Theme /packages/theme First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository labels Jan 22, 2026
@github-actions
Copy link

👋 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.

@github-actions
Copy link

github-actions bot commented Feb 3, 2026

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.

  • Required label: Any label starting with [Type].
  • Labels found: First-time Contributor, [Package] Theme.

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
@github-actions
Copy link

github-actions bot commented Feb 3, 2026

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.

  • Required label: Any label starting with [Type].
  • Labels found: First-time Contributor, [Package] Theme.

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.

@github-actions
Copy link

github-actions bot commented Feb 3, 2026

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.

  • Required label: Any label starting with [Type].
  • Labels found: First-time Contributor, [Package] Theme.

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.

@youknowriad youknowriad requested a review from ciampo February 3, 2026 09:34
@ciampo
Copy link
Contributor

ciampo commented Feb 3, 2026

@dabowman Thanks for working on this! I'll find some time to review the approach, I'd love to collaborate on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Theme /packages/theme

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants