fix: color picker icons (BLO-1189)

[matthewlipski]

Summary

The color picker when selecting a highlight/block text/background color is not being shown properly. Each item has an icon showing the default text & background color, rather than the one represented by the item.

This PR adds missing CSS rules to fix that.

Closes #2732

Rationale

This is a regression from v0.50.0.

Changes

• Added missing CSS rules.

Impact

N/A

Testing

Added e2e tests with screenshots.

Screenshots/Video

N/A

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

N/A

Summary by CodeRabbit

• Style
  • Improved color highlight consistency in the editor by extending highlight rules to color icon elements, ensuring uniform foreground/background highlighting for gray, brown, red, orange, yellow, green, blue, purple, and pink selections.
• Tests
  • Added end-to-end tests verifying color picker behavior from the formatting toolbar and side menu and captured new visual snapshots.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blocknote	Error		May 20, 2026 11:35am
blocknote-website	Error		May 20, 2026 11:35am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 44a6fe80-7a05-48cf-a2df-8ed0b05edfa3

📥 Commits

Reviewing files that changed from the base of the PR and between ae428d2 and 6e6ffe8.

📒 Files selected for processing (1)

• packages/react/src/editor/styles.css

---

📝 Walkthrough

Walkthrough

Extend highlight-color CSS selectors so color icons (.bn-color-icon with data-text-color/data-background-color) receive the same foreground/background vars as styled block content; add Playwright tests that open the color picker from the formatting toolbar and side menu with new snapshots.

Changes

Color highlight selector expansion and tests

Layer / File(s)	Summary
Highlight selector changes packages/react/src/editor/styles.css	Highlight-color CSS selectors for text and background colors are extended to also match .bn-color-icon elements keyed by data-text-color / data-background-color for supported color values (gray, brown, red, orange, yellow, green, blue, purple, pink).
End-to-end color picker tests tests/src/end-to-end/colors/colors.test.ts	Adds H_ONE_BLOCK_SELECTOR import and two Playwright tests that open the color picker from the formatting toolbar and side menu, wait for the UI, and capture snapshots (colorPickerFormattingToolbar.png, colorPickerSideMenu.png).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• YousefED
• nperez0111

Poem

🐰 Colors hop from block to icon bright,

tiny badges catching light,
toolbar pops and side menu sings,
snapshots freeze the playful things,
a rabbit hops — "All set, delight!"

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR claims to fix issue #2738 but the linked issue objective involves IME composition handling, which is unrelated to the actual CSS color picker icon changes described in this PR.	Verify the correct issue number is linked. The PR changes appear to address color picker icon styling, not IME composition behavior. Link the appropriate issue or clarify the relationship.
Out of Scope Changes check	⚠️ Warning	The PR modifies CSS styles and adds e2e tests for color picker icons, which appears unrelated to the linked issue about IME composition handling, suggesting out-of-scope or mislinked issues.	Clarify why IME composition issue #2738 is linked when the actual changes concern color picker styling. Verify the correct issue is referenced.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately describes the main change: fixing color picker icons display in the CSS styling.
Description check	✅ Passed	The PR description follows the template structure with all major sections completed: Summary, Rationale, Changes, Impact, Testing, and Checklist with relevant details.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch color-icon-fix

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/react/src/editor/styles.css

Parsing error: Expression expected.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2762

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2762

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2762

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2762

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2762

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2762

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2762

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2762

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2762

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2762

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2762

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2762

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2762

commit: ae428d2