fix: Color naming & CSS (BLO-946) by matthewlipski · Pull Request #2684 · TypeCellOS/BlockNote

matthewlipski · 2026-04-28T13:43:49Z

Summary

This PR fixes 2 issues:

The "Default" option for block text/background color can be misleading if a parent block already sets the color, and the current block/selection inherits from it. As the "Default" option will set the color to the inherited color, rather than the actual default.
CSS for block colors is not quite right, causing nested blocks to use the fallback colors rather than those from the editor theme.

Closes #2005

Rationale

These issues cause confusion for users.

Changes

Changed "Default" naming to "Auto" for colors in the dictionary for all locales.
Fixed CSS for inherted colors in nested blocks.

Impact

N/A

Testing

N/A

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
- Updated color highlighting so styles apply to blocks when their inner content declares text/background colors, improving consistent rendering of colored blocks.
Localization
- Changed the color picker’s "default" label to "Auto" across 26+ languages.
Examples
- Updated sample markup to move color attributes from outer wrappers to inner block content to match the new highlighting rules.

vercel · 2026-04-28T13:43:55Z

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

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	Apr 28, 2026 2:53pm
blocknote-website	Ready	Preview	Apr 28, 2026 2:53pm

coderabbitai · 2026-04-28T13:44:06Z

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: 8b6de218-ece1-422b-b73a-bd5d3bb5189c

📥 Commits

Reviewing files that changed from the base of the PR and between e587cb0 and 3939d3b.

📒 Files selected for processing (2)

examples/02-backend/04-rendering-static-documents/src/App.tsx
packages/react/src/editor/styles.css

✅ Files skipped from review due to trivial changes (1)

examples/02-backend/04-rendering-static-documents/src/App.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

packages/react/src/editor/styles.css

📝 Walkthrough

Walkthrough

CSS selectors for text/background colors were changed to target parent blocks via :has(> .bn-block-content[...]) instead of direct element attributes; multiple locale files updated to rename the color-picker "default" label to "auto"/equivalent; an example app HTML moved color data attributes onto .bn-block-content.

Changes

Cohort / File(s)	Summary
Editor / React styles `packages/core/src/editor/Block.css`, `packages/react/src/editor/styles.css`	Removed direct `[data-text-color="..."]` and `[data-background-color="..."]` selectors; styles now apply via `.bn-block:has(> .bn-block-content[data-*-color="..."])`.
Internationalization `packages/core/src/i18n/locales/{ar,de,en,es,fa,fr,he,hr,is,it,ja,ko,nl,no,pl,pt,ru,sk,uk,uz,vi,zh-tw,zh}.ts`	Updated `color_picker.colors.default` label in each locale from "default"/equivalent to "auto"/equivalent (localized strings changed).
Example app HTML `examples/02-backend/04-rendering-static-documents/src/App.tsx`	Moved `data-text-color` and `data-background-color` attributes from outer wrapper elements onto inner `.bn-block-content` elements in the hard-coded HTML template.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

fix: text color was not applying to table block #2663: Touches DOM color data-* attributes and node views that must sync these attributes to element DOMs — directly related to the CSS selector changes.
fix(i18n): fix typo in russian translation #2560: Prior edit to the Russian locale's color_picker.colors.default entry; overlaps with the localization changes in this PR.

Suggested reviewers

nperez0111

Poem

🐰 I hopped through styles, found a new track,
Parent blocks now wear color on their back,
"Auto" sings softly in many a tongue,
Small changes made, the UI's lightly sung,
🥕✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: Color naming & CSS (BLO-946)' accurately summarizes the main changes: renaming color labels and fixing CSS color inheritance for nested blocks.
Description check	✅ Passed	The PR description covers all major template sections including Summary, Rationale, Changes, Impact, Testing, and Checklist. It clearly explains both issues being fixed and the corresponding solutions.
Linked Issues check	✅ Passed	The PR directly addresses issue `#2005` by renaming 'Default' to 'Auto' across all locales and fixing CSS selectors for nested block color inheritance to use theme colors instead of fallbacks.
Out of Scope Changes check	✅ Passed	All changes are scoped to the two stated objectives: renaming color labels in i18n files and fixing CSS color selectors in Block.css and styles.css. The example App.tsx changes align with CSS updates.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch default-color-rename

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

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

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/react/src/editor/styles.css`:
- Around line 203-206: Fix the typo in the selector that prevents orange
backgrounds from matching: in the rule that targets
[data-style-type="backgroundColor"][data-value="orange"] and .bn-block:has(>
.bn-block-content[data-background-color="broorangewn"]), replace the incorrect
attribute value "broorangewn" with "orange" so the .bn-block:has(...) selector
correctly matches elements with data-background-color="orange" and applies
var(--bn-colors-highlights-orange-background).
- Around line 158-161: The CSS selector contains a typo: .bn-block:has(>
.bn-block-content[data-text-color="broorangewn"]) won't match the DOM which
emits data-text-color="orange"; update the selector to use
data-text-color="orange" (and also verify the adjacent attribute selector
[data-style-type="textColor"][data-value="orange"] remains correct) so the
orange text color variable (--bn-colors-highlights-orange-text) is applied.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5d44c20b-7367-48b8-8ef5-05da1a7908fc

📥 Commits

Reviewing files that changed from the base of the PR and between 210b499 and e587cb0.

📒 Files selected for processing (25)

packages/core/src/editor/Block.css
packages/core/src/i18n/locales/ar.ts
packages/core/src/i18n/locales/de.ts
packages/core/src/i18n/locales/en.ts
packages/core/src/i18n/locales/es.ts
packages/core/src/i18n/locales/fa.ts
packages/core/src/i18n/locales/fr.ts
packages/core/src/i18n/locales/he.ts
packages/core/src/i18n/locales/hr.ts
packages/core/src/i18n/locales/is.ts
packages/core/src/i18n/locales/it.ts
packages/core/src/i18n/locales/ja.ts
packages/core/src/i18n/locales/ko.ts
packages/core/src/i18n/locales/nl.ts
packages/core/src/i18n/locales/no.ts
packages/core/src/i18n/locales/pl.ts
packages/core/src/i18n/locales/pt.ts
packages/core/src/i18n/locales/ru.ts
packages/core/src/i18n/locales/sk.ts
packages/core/src/i18n/locales/uk.ts
packages/core/src/i18n/locales/uz.ts
packages/core/src/i18n/locales/vi.ts
packages/core/src/i18n/locales/zh-tw.ts
packages/core/src/i18n/locales/zh.ts
packages/react/src/editor/styles.css

💤 Files with no reviewable changes (1)

packages/core/src/editor/Block.css

pkg-pr-new · 2026-04-28T13:48:57Z

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 3939d3b

nperez0111

Looks good to me

matthewlipski added 2 commits April 28, 2026 15:36

Changed "Default" color name to "Auto"

3e09906

Fixed block color CSS issues

e587cb0

coderabbitai Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread packages/react/src/editor/styles.css

Comment thread packages/react/src/editor/styles.css

Fixed rendering issues

3939d3b

vercel Bot deployed to Preview – blocknote April 28, 2026 14:50 View deployment

vercel Bot deployed to Preview – blocknote-website April 28, 2026 14:53 View deployment

matthewlipski requested a review from nperez0111 April 28, 2026 15:03

nperez0111 approved these changes Apr 28, 2026

View reviewed changes

matthewlipski merged commit 38c5515 into main Apr 29, 2026
42 of 50 checks passed

matthewlipski deleted the default-color-rename branch April 29, 2026 15:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Color naming & CSS (BLO-946)#2684

fix: Color naming & CSS (BLO-946)#2684
matthewlipski merged 3 commits intomainfrom
default-color-rename

matthewlipski commented Apr 28, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Apr 28, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

pkg-pr-new Bot commented Apr 28, 2026 •

edited

Loading

Uh oh!

nperez0111 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

matthewlipski commented Apr 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Rationale

Changes

Impact

Testing

Screenshots/Video

Checklist

Additional Notes

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pkg-pr-new Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nperez0111 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

matthewlipski commented Apr 28, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Apr 28, 2026 •

edited

Loading

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading

pkg-pr-new Bot commented Apr 28, 2026 •

edited

Loading