Storybook: Use the modern admin color scheme (blueberry) by default by adamwoodnz · Pull Request #52849 · Automattic/jetpack

adamwoodnz · 2026-09-28T02:52:30Z

Fixes https://linear.app/a8c/issue/CHARTS-285

Why

Stories render with the old #007cba blue as the admin accent. Since WordPress 7.0, wp-admin's default is the modern scheme's blueberry (#3858e9), and existing users were moved to it on upgrade (Trac #64546). Jetpack requires 7.0 or later, so every supported site defaults to blueberry, and stories do not look like the product. Charts show this most, because their first series color comes from the admin accent. Every chart story showed a palette that most users never see.

Proposed changes

In the shared Storybook stylesheet, set the six --wp-admin-theme-color* variables on :root to the modern scheme with @wordpress/base-styles' admin-scheme() mixin, after the WordPress package imports.
Cause: @wordpress/components sets #3858e9, but @wordpress/block-editor and @wordpress/block-library load later and reset it to #007cba on :root.
This changes all Jetpack stories, not only charts. No other Storybook config sets this variable.
A story-level override still wins, because it is closer than :root. Examples: the charts adminColorScheme control, and a ThemeProvider with a color seed, such as the charts custom theme.
Charts: correct two Storybook comments about the default admin color. One said the value without a scheme was the ThemeProvider accent (true only for the custom theme). The other named a default scheme that WordPress 7.0 replaced with modern. No code in charts compensated for #007cba, so there is nothing to remove.

Screenshots

Charts › Bar Chart › Default.

Before (`#007cba`)	After (`#3858e9`)

Related product discussion/links

CHARTS-285

Does this pull request change what data or activity we track or use?

No.

Testing instructions

Run pnpm --dir projects/js-packages/storybook storybook:dev and open Charts › Bar Chart › Default.
Confirm that the first series is blueberry (#3858e9), not #007cba. In DevTools, getComputedStyle(document.documentElement).getPropertyValue('--wp-admin-theme-color') must return #3858e9.
Set the adminColorScheme control to ocean. The series must change to #567958.
Set adminColorScheme back to none, then set themeName to custom. The series must follow the accentColor control. When a scheme is set, it wins over the accent. This is intended: the scheme is set on a closer wrapper.

Verified locally:

Bar and Pie default stories: :root and .a8c-charts-scope resolve #3858e9, and the pie's first slice paints #3858e9.
adminColorScheme: ocean: the scope resolves #567958.
themeName: custom with accentColor: #1b0940: the first bar paints #1b0940 with adminColorScheme: none, and #567958 with adminColorScheme: ocean.
pnpm run lint-style passes on the changed file.

🤖 Generated with Claude Code

https://claude.ai/code/session_01P6pdsb2opCsCz4AxKEoRfC

The block-editor and block-library stylesheets load after @wordpress/components and set --wp-admin-theme-color to the legacy #007cba on :root, overriding the #3858e9 that components sets. Stories then render in a scheme few wp-admin users see. Charts are affected most: their first series color reads this variable, so every chart story showed the wrong palette. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P6pdsb2opCsCz4AxKEoRfC

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P6pdsb2opCsCz4AxKEoRfC

github-actions · 2026-09-28T02:54:07Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

…ports The :root rule ties on specificity with the imported block styles, so moving it above them silently brings back #007cba. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P6pdsb2opCsCz4AxKEoRfC

adamwoodnz · 2026-09-28T03:14:27Z

Review cycle summary

Round reviewer: Codex, 1 round. No findings.
Final reviewer: Claude. No blocking issues. 1 nit fixed in b2e5ab6, 2 declined with reasons, and the visual-regression question answered.
CI: 44 checks pass, 25 skipped.
Open comments: none. Unaddressed human comments: none.

Status: clean. Ready for human review.

The decorator comment said that, with no scheme set, the admin color is the ThemeProvider's accent. That held only for the custom theme. Every other story read Storybook's :root value, which is why they rendered in #007cba. The scheme list comment named a `default` scheme that WordPress 7.0 replaced with `modern`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P6pdsb2opCsCz4AxKEoRfC

github-actions · 2026-09-28T04:03:15Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the charts-285-charts-storybook-does-not-use-the-modern-wp-color-scheme branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack charts-285-charts-storybook-does-not-use-the-modern-wp-color-scheme

bin/jetpack-downloader test jetpack-mu-wpcom-plugin charts-285-charts-storybook-does-not-use-the-modern-wp-color-scheme

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

jp-launch-control · 2026-09-28T04:18:35Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

Nikschavan

Thank you, the changes look good.

What I checked: I ran Storybook from this branch and opened Bar Chart › Default. The first bar paints #3858e9. All six --wp-admin-theme-color* variables on :root match the body.admin-color-modern values in admin-schemes.css. Setting adminColorScheme to ocean gives #567958. The custom theme with a #1b0940 accent paints the accent, and with ocean set as well the scheme wins.

tbradsha

From a code standpoint this looks fine. That said, has this change been proposed upstream as well so this override isn't stuck forever?

tbradsha · 2026-09-28T12:30:08Z

+// block-editor and block-library reset the admin color to the legacy #007cba.
+// Keep this after the imports: equal specificity, so source order decides.
+:root {
+
+	@include mixins.admin-scheme(#3858e9);
+}


If we're adding an override, we should probably add to the comment that this can be removed when the libraries are updated to the modern default (and bonus if it includes a link to the upstream PR).

Good call, done in 476e991. The comment now says to remove the override once @wordpress/base-styles ships the modern default, and links the upstream PR.

No upstream ticket existed, so I opened WordPress/gutenberg#83748 and a draft fix, WordPress/gutenberg#83749. The legacy blue comes from base-styles/_default-custom-properties.scss, which still sets admin-scheme(#007cba) on :root. block-library, block-editor and most other packages include it. Only @wordpress/components moved to #3858e9 (WordPress/gutenberg#50193), and WordPress 7.0 then made Modern the core default (Trac #64546) without anyone updating the shared default.

The override only exists because @wordpress/base-styles still defaults to #007cba. Naming the Gutenberg PR tells a future reader when it is safe to delete. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P6pdsb2opCsCz4AxKEoRfC

adamwoodnz and others added 2 commits September 28, 2026 15:51

Storybook: Add changelog entry for the admin color fix

5687e40

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P6pdsb2opCsCz4AxKEoRfC

adamwoodnz added Bug When a feature is broken and / or not performing as intended [Status] Needs Review This PR is ready for review. labels Sep 28, 2026

adamwoodnz self-assigned this Sep 28, 2026

adamwoodnz added [Status] In Progress and removed [Status] Needs Review This PR is ready for review. labels Sep 28, 2026

github-actions Bot added [JS Package] Storybook RNA labels Sep 28, 2026

This comment was marked as resolved.

Sign in to view

This comment was marked as outdated.

Sign in to view

This comment was marked as resolved.

Sign in to view

adamwoodnz added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels Sep 28, 2026

adamwoodnz marked this pull request as ready for review September 28, 2026 03:14

github-actions Bot added the [Status] In Progress label Sep 28, 2026

adamwoodnz removed the [Status] In Progress label Sep 28, 2026

github-actions Bot added the [JS Package] Charts label Sep 28, 2026

adamwoodnz requested a review from Nikschavan September 28, 2026 04:06

Nikschavan previously approved these changes Sep 28, 2026

View reviewed changes

tbradsha previously approved these changes Sep 28, 2026

View reviewed changes

This was referenced Sep 29, 2026

Base Styles: Default --wp-admin-theme-color to #3858e9 to match WordPress 7.0 WordPress/gutenberg#83748

Closed

Base Styles: Default the admin theme color to Blueberry WordPress/gutenberg#83749

Merged

adamwoodnz dismissed stale reviews from tbradsha and Nikschavan via 476e991 September 29, 2026 01:46

adamwoodnz merged commit a1fdb1a into trunk Sep 29, 2026
118 checks passed

adamwoodnz deleted the charts-285-charts-storybook-does-not-use-the-modern-wp-color-scheme branch September 29, 2026 03:00

github-actions Bot removed the [Status] Needs Review This PR is ready for review. label Sep 29, 2026

adamwoodnz mentioned this pull request Oct 8, 2026

Storybook: Remove the admin color override #53340

Merged

Navigation Menu

Repository navigation

Storybook: Use the modern admin color scheme (blueberry) by default - #52849

Storybook: Use the modern admin color scheme (blueberry) by default#52849
adamwoodnz merged 5 commits into
trunkfrom
charts-285-charts-storybook-does-not-use-the-modern-wp-color-scheme

adamwoodnz commented Sep 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 28, 2026

Uh oh!

This comment was marked as resolved.

This comment was marked as outdated.

This comment was marked as resolved.

This comment was marked as resolved.

adamwoodnz commented Sep 28, 2026

Uh oh!

github-actions Bot commented Sep 28, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented Sep 28, 2026

Uh oh!

Nikschavan left a comment

Uh oh!

tbradsha left a comment

Uh oh!

tbradsha Sep 28, 2026

Uh oh!

adamwoodnz Sep 29, 2026

Uh oh!

tbradsha Sep 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

adamwoodnz commented Sep 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

Proposed changes

Screenshots

Related product discussion/links

Does this pull request change what data or activity we track or use?

Testing instructions

Uh oh!

github-actions Bot commented Sep 28, 2026

Uh oh!

This comment was marked as resolved.

This comment was marked as outdated.

This comment was marked as resolved.

This comment was marked as resolved.

adamwoodnz commented Sep 28, 2026

Uh oh!

github-actions Bot commented Sep 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented Sep 28, 2026

Code Coverage Summary

Uh oh!

Nikschavan left a comment

Choose a reason for hiding this comment

Uh oh!

tbradsha left a comment

Choose a reason for hiding this comment

Uh oh!

tbradsha Sep 28, 2026

Choose a reason for hiding this comment

Uh oh!

adamwoodnz Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

tbradsha Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

adamwoodnz commented Sep 28, 2026 •

edited

Loading

github-actions Bot commented Sep 28, 2026 •

edited

Loading