From 029d8e36faa71a86cf8781fb9872b4167ed0715a Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Thu, 15 Oct 2026 19:01:52 +0200 Subject: [PATCH 1/7] Updated colors to hit contrast requirements --- .../08-color-combinations/.bnexample.json | 8 + .../08-color-combinations/README.md | 9 + .../08-color-combinations/index.html | 17 + .../04-theming/08-color-combinations/main.tsx | 11 + .../08-color-combinations/package.json | 30 + .../08-color-combinations/src/App.tsx | 77 + .../08-color-combinations/tsconfig.json | 32 + .../08-color-combinations/vite-env.d.ts | 1 + .../08-color-combinations/vite.config.ts | 35 + highlight-color-comparison.html | 3207 +++++++++++++++++ packages/core/src/editor/Block.css | 18 +- packages/react/src/editor/styles.css | 52 +- playground/src/examples.gen.tsx | 20 + pnpm-lock.yaml | 43 + 14 files changed, 3529 insertions(+), 31 deletions(-) create mode 100644 examples/04-theming/08-color-combinations/.bnexample.json create mode 100644 examples/04-theming/08-color-combinations/README.md create mode 100644 examples/04-theming/08-color-combinations/index.html create mode 100644 examples/04-theming/08-color-combinations/main.tsx create mode 100644 examples/04-theming/08-color-combinations/package.json create mode 100644 examples/04-theming/08-color-combinations/src/App.tsx create mode 100644 examples/04-theming/08-color-combinations/tsconfig.json create mode 100644 examples/04-theming/08-color-combinations/vite-env.d.ts create mode 100644 examples/04-theming/08-color-combinations/vite.config.ts create mode 100644 highlight-color-comparison.html diff --git a/examples/04-theming/08-color-combinations/.bnexample.json b/examples/04-theming/08-color-combinations/.bnexample.json new file mode 100644 index 0000000000..0bd35957f7 --- /dev/null +++ b/examples/04-theming/08-color-combinations/.bnexample.json @@ -0,0 +1,8 @@ +{ + "playground": true, + "docs": false, + "author": "", + "tags": ["Appearance & Styling"], + "dependencies": {}, + "pro": false +} diff --git a/examples/04-theming/08-color-combinations/README.md b/examples/04-theming/08-color-combinations/README.md new file mode 100644 index 0000000000..44381f8dc4 --- /dev/null +++ b/examples/04-theming/08-color-combinations/README.md @@ -0,0 +1,9 @@ +# Color combinations + +Inspect every combination of the default text and background colors, including the default color, applied to whole blocks and inline content. Switch between light and dark themes to compare their appearance. + +**Try me out!** Use the theme toggle above the editors. + +## Relevant docs + +- [Themes](https://www.blocknotejs.org/docs/react/styling-theming/themes) diff --git a/examples/04-theming/08-color-combinations/index.html b/examples/04-theming/08-color-combinations/index.html new file mode 100644 index 0000000000..c1dbc2ed42 --- /dev/null +++ b/examples/04-theming/08-color-combinations/index.html @@ -0,0 +1,17 @@ + + + + + Color combinations + + + +
+ + + diff --git a/examples/04-theming/08-color-combinations/main.tsx b/examples/04-theming/08-color-combinations/main.tsx new file mode 100644 index 0000000000..1260513388 --- /dev/null +++ b/examples/04-theming/08-color-combinations/main.tsx @@ -0,0 +1,11 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import React from "react"; +import { createRoot } from "react-dom/client"; +import App from "./src/App.jsx"; + +const root = createRoot(document.getElementById("root")!); +root.render( + + + , +); diff --git a/examples/04-theming/08-color-combinations/package.json b/examples/04-theming/08-color-combinations/package.json new file mode 100644 index 0000000000..1324705a58 --- /dev/null +++ b/examples/04-theming/08-color-combinations/package.json @@ -0,0 +1,30 @@ +{ + "name": "@blocknote/example-theming-color-combinations", + "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "type": "module", + "private": true, + "version": "0.12.4", + "scripts": { + "start": "vite", + "dev": "vite", + "build:prod": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@blocknote/ariakit": "latest", + "@blocknote/core": "latest", + "@blocknote/mantine": "latest", + "@blocknote/react": "latest", + "@blocknote/shadcn": "latest", + "@mantine/core": "^9.0.2", + "@mantine/hooks": "^9.0.2", + "react": "^19.2.3", + "react-dom": "^19.2.3" + }, + "devDependencies": { + "@types/react": "^19.2.3", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^6.0.1", + "vite": "^8.0.0" + } +} diff --git a/examples/04-theming/08-color-combinations/src/App.tsx b/examples/04-theming/08-color-combinations/src/App.tsx new file mode 100644 index 0000000000..0d3de8fa41 --- /dev/null +++ b/examples/04-theming/08-color-combinations/src/App.tsx @@ -0,0 +1,77 @@ +import { COLORS_DEFAULT, type PartialBlock } from "@blocknote/core"; +import "@blocknote/core/fonts/inter.css"; +import { BlockNoteView } from "@blocknote/mantine"; +import "@blocknote/mantine/style.css"; +import { useCreateBlockNote } from "@blocknote/react"; +import { useState } from "react"; + +const colors = ["default", ...Object.keys(COLORS_DEFAULT)]; +const blockColors: PartialBlock[] = colors.flatMap((backgroundColor) => [ + { + id: `block-heading-${backgroundColor}`, + type: "heading", + props: { level: 3 }, + content: `${backgroundColor} background`, + }, + ...colors.map((textColor) => ({ + id: `block-${backgroundColor}-${textColor}`, + type: "paragraph" as const, + props: { textColor, backgroundColor }, + content: `${textColor} text on ${backgroundColor} background`, + })), +]); +const inlineColors: PartialBlock[] = colors.flatMap((backgroundColor) => [ + { + id: `inline-heading-${backgroundColor}`, + type: "heading", + props: { level: 3 }, + content: `${backgroundColor} background`, + }, + ...colors.map((textColor) => ({ + id: `inline-${backgroundColor}-${textColor}`, + type: "paragraph" as const, + content: [ + { type: "text" as const, text: "Inline: ", styles: {} }, + { + type: "text" as const, + text: `${textColor} text on ${backgroundColor} background`, + styles: { textColor, backgroundColor }, + }, + ], + })), +]); + +export default function App() { + const [theme, setTheme] = useState<"light" | "dark">("light"); + const blocks = useCreateBlockNote({ initialContent: blockColors }); + const inline = useCreateBlockNote({ initialContent: inlineColors }); + + return ( +
+ +
+
+

Block colors

+ +
+
+

Inline colors

+ +
+
+
+ ); +} diff --git a/examples/04-theming/08-color-combinations/tsconfig.json b/examples/04-theming/08-color-combinations/tsconfig.json new file mode 100644 index 0000000000..2aa62c56e6 --- /dev/null +++ b/examples/04-theming/08-color-combinations/tsconfig.json @@ -0,0 +1,32 @@ +{ + "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "composite": true, + "paths": { + "@shared/*": ["../../../shared/*"] + } + }, + "include": ["."], + "__ADD_FOR_LOCAL_DEV_references": [ + { + "path": "../../../packages/core/" + }, + { + "path": "../../../packages/react/" + } + ] +} diff --git a/examples/04-theming/08-color-combinations/vite-env.d.ts b/examples/04-theming/08-color-combinations/vite-env.d.ts new file mode 100644 index 0000000000..11f02fe2a0 --- /dev/null +++ b/examples/04-theming/08-color-combinations/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/04-theming/08-color-combinations/vite.config.ts b/examples/04-theming/08-color-combinations/vite.config.ts new file mode 100644 index 0000000000..a96f1f04ff --- /dev/null +++ b/examples/04-theming/08-color-combinations/vite.config.ts @@ -0,0 +1,35 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import react from "@vitejs/plugin-react"; +import * as fs from "fs"; +import * as path from "path"; +import { defineConfig } from "vite"; +// https://vitejs.dev/config/ +export default defineConfig(((conf: { command: string }) => ({ + plugins: [react()], + optimizeDeps: {}, + build: { + sourcemap: true, + }, + resolve: { + alias: + conf.command === "build" || + !fs.existsSync(path.resolve(__dirname, "../../packages/core/src")) + ? {} + : ({ + // The repo-wide alias for the shared test-utils directory (private, + // so it only resolves inside the monorepo). Harmless for examples + // that don't use it. + "@shared": path.resolve(__dirname, "../../../shared/"), + // Comment out the lines below to load a built version of blocknote + // or, keep as is to load live from sources with live reload working + "@blocknote/core": path.resolve( + __dirname, + "../../packages/core/src/", + ), + "@blocknote/react": path.resolve( + __dirname, + "../../packages/react/src/", + ), + } as any), + }, +})) as Parameters[0]); diff --git a/highlight-color-comparison.html b/highlight-color-comparison.html new file mode 100644 index 0000000000..461fffbd31 --- /dev/null +++ b/highlight-color-comparison.html @@ -0,0 +1,3207 @@ + + + + + + BlockNote highlight palette comparison + + + +
+

Highlight palette: old vs new

+

+ Rows are text colors; columns are background colors. Each cell shows + sample text and its contrast ratio. An asterisk (*) marks ratios below + 4.5:1 for normal text. +

+

+ Includes the default editor colors. Hex values appear in the row and + column headings. This is a standalone snapshot of the palettes, + including the new yellow-shifted green. +

+ + +
+

Light mode

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Old +
Text ↓
Background →		default#ffffffgray#ebecedbrown#e9e5e3red#fbe4e4orange#f6e9d9yellow#fbf3dbgreen#ddedeablue#ddebf1purple#eae4f2pink#f4dfeb
default#3f3f3f + Aa10.53:1 + + Aa8.90:1 + + Aa8.42:1 + + Aa8.69:1 + + Aa8.81:1 + + Aa9.50:1 + + Aa8.71:1 + + Aa8.64:1 + + Aa8.46:1 + + Aa8.33:1 +
gray#9b9a97 + Aa2.81:1 * + + Aa2.38:1 * + + Aa2.25:1 * + + Aa2.32:1 * + + Aa2.36:1 * + + Aa2.54:1 * + + Aa2.33:1 * + + Aa2.31:1 * + + Aa2.26:1 * + + Aa2.22:1 * +
brown#64473a + Aa8.39:1 + + Aa7.09:1 + + Aa6.70:1 + + Aa6.92:1 + + Aa7.02:1 + + Aa7.57:1 + + Aa6.94:1 + + Aa6.88:1 + + Aa6.74:1 + + Aa6.63:1 +
red#e03e3e + Aa4.26:1 * + + Aa3.60:1 * + + Aa3.41:1 * + + Aa3.51:1 * + + Aa3.57:1 * + + Aa3.84:1 * + + Aa3.53:1 * + + Aa3.50:1 * + + Aa3.42:1 * + + Aa3.37:1 * +
orange#d9730d + Aa3.28:1 * + + Aa2.77:1 * + + Aa2.62:1 * + + Aa2.70:1 * + + Aa2.74:1 * + + Aa2.96:1 * + + Aa2.71:1 * + + Aa2.69:1 * + + Aa2.63:1 * + + Aa2.59:1 * +
yellow#dfab01 + Aa2.11:1 * + + Aa1.78:1 * + + Aa1.68:1 * + + Aa1.74:1 * + + Aa1.76:1 * + + Aa1.90:1 * + + Aa1.74:1 * + + Aa1.73:1 * + + Aa1.69:1 * + + Aa1.67:1 * +
green#4d6461 + Aa6.34:1 + + Aa5.36:1 + + Aa5.07:1 + + Aa5.23:1 + + Aa5.31:1 + + Aa5.72:1 + + Aa5.25:1 + + Aa5.20:1 + + Aa5.10:1 + + Aa5.01:1 +
blue#0b6e99 + Aa5.67:1 + + Aa4.79:1 + + Aa4.53:1 + + Aa4.68:1 + + Aa4.74:1 + + Aa5.11:1 + + Aa4.69:1 + + Aa4.65:1 + + Aa4.56:1 + + Aa4.48:1 * +
purple#6940a5 + Aa7.30:1 + + Aa6.17:1 + + Aa5.83:1 + + Aa6.02:1 + + Aa6.11:1 + + Aa6.58:1 + + Aa6.04:1 + + Aa5.99:1 + + Aa5.87:1 + + Aa5.77:1 +
pink#ad1a72 + Aa6.63:1 + + Aa5.60:1 + + Aa5.30:1 + + Aa5.47:1 + + Aa5.55:1 + + Aa5.98:1 + + Aa5.49:1 + + Aa5.44:1 + + Aa5.33:1 + + Aa5.24:1 +
+
+

41 of 100 combinations below 4.5:1.

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ New +
Text ↓
Background →		default#ffffffgray#ebecedbrown#e9e5e3red#fbe4e4orange#f6e9d9yellow#fbf3dbgreen#e5eddablue#ddebf1purple#eae4f2pink#f4dfeb
default#3f3f3f + Aa10.53:1 + + Aa8.90:1 + + Aa8.42:1 + + Aa8.69:1 + + Aa8.81:1 + + Aa9.50:1 + + Aa8.75:1 + + Aa8.64:1 + + Aa8.46:1 + + Aa8.33:1 +
gray#686665 + Aa5.71:1 + + Aa4.83:1 + + Aa4.56:1 + + Aa4.71:1 + + Aa4.78:1 + + Aa5.15:1 + + Aa4.75:1 + + Aa4.69:1 + + Aa4.59:1 + + Aa4.51:1 +
brown#845d4c + Aa5.75:1 + + Aa4.86:1 + + Aa4.60:1 + + Aa4.74:1 + + Aa4.81:1 + + Aa5.19:1 + + Aa4.78:1 + + Aa4.72:1 + + Aa4.62:1 + + Aa4.55:1 +
red#bc3434 + Aa5.71:1 + + Aa4.83:1 + + Aa4.56:1 + + Aa4.71:1 + + Aa4.78:1 + + Aa5.15:1 + + Aa4.75:1 + + Aa4.68:1 + + Aa4.59:1 + + Aa4.51:1 +
orange#9d5309 + Aa5.71:1 + + Aa4.83:1 + + Aa4.57:1 + + Aa4.71:1 + + Aa4.78:1 + + Aa5.16:1 + + Aa4.75:1 + + Aa4.69:1 + + Aa4.59:1 + + Aa4.52:1 +
yellow#816201 + Aa5.71:1 + + Aa4.82:1 + + Aa4.56:1 + + Aa4.71:1 + + Aa4.77:1 + + Aa5.15:1 + + Aa4.74:1 + + Aa4.68:1 + + Aa4.59:1 + + Aa4.51:1 +
green#596c40 + Aa5.76:1 + + Aa4.87:1 + + Aa4.61:1 + + Aa4.75:1 + + Aa4.82:1 + + Aa5.20:1 + + Aa4.79:1 + + Aa4.73:1 + + Aa4.63:1 + + Aa4.56:1 +
blue#0b6d99 + Aa5.74:1 + + Aa4.85:1 + + Aa4.58:1 + + Aa4.73:1 + + Aa4.80:1 + + Aa5.17:1 + + Aa4.77:1 + + Aa4.70:1 + + Aa4.61:1 + + Aa4.53:1 +
purple#7b4fbb + Aa5.71:1 + + Aa4.83:1 + + Aa4.56:1 + + Aa4.71:1 + + Aa4.78:1 + + Aa5.15:1 + + Aa4.75:1 + + Aa4.68:1 + + Aa4.59:1 + + Aa4.51:1 +
pink#be1d7e + Aa5.73:1 + + Aa4.84:1 + + Aa4.58:1 + + Aa4.72:1 + + Aa4.79:1 + + Aa5.17:1 + + Aa4.76:1 + + Aa4.70:1 + + Aa4.60:1 + + Aa4.53:1 +
+
+

0 of 100 combinations below 4.5:1.

+
+
+
+
+

Dark mode

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Old +
Text ↓
Background →		default#1f1f1fgray#9b9a97brown#64473ared#be3434orange#b7600ayellow#b58b00green#4d6461blue#0b6e99purple#6940a5pink#ad1a72
default#cfcfcf + Aa10.58:1 + + Aa1.81:1 * + + Aa5.38:1 + + Aa3.61:1 * + + Aa2.87:1 * + + Aa2.02:1 * + + Aa4.07:1 * + + Aa3.64:1 * + + Aa4.68:1 + + Aa4.26:1 * +
gray#bebdb8 + Aa8.76:1 + + Aa1.50:1 * + + Aa4.46:1 * + + Aa2.99:1 * + + Aa2.38:1 * + + Aa1.68:1 * + + Aa3.37:1 * + + Aa3.01:1 * + + Aa3.88:1 * + + Aa3.52:1 * +
brown#8e6552 + Aa3.24:1 * + + Aa1.81:1 * + + Aa1.65:1 * + + Aa1.11:1 * + + Aa1.13:1 * + + Aa1.61:1 * + + Aa1.25:1 * + + Aa1.12:1 * + + Aa1.44:1 * + + Aa1.30:1 * +
red#ec4040 + Aa4.22:1 * + + Aa1.39:1 * + + Aa2.15:1 * + + Aa1.44:1 * + + Aa1.15:1 * + + Aa1.24:1 * + + Aa1.62:1 * + + Aa1.45:1 * + + Aa1.87:1 * + + Aa1.70:1 * +
orange#e3790d + Aa5.50:1 + + Aa1.07:1 * + + Aa2.80:1 * + + Aa1.88:1 * + + Aa1.49:1 * + + Aa1.05:1 * + + Aa2.12:1 * + + Aa1.89:1 * + + Aa2.44:1 * + + Aa2.21:1 * +
yellow#dfab01 + Aa7.82:1 + + Aa1.34:1 * + + Aa3.98:1 * + + Aa2.67:1 * + + Aa2.12:1 * + + Aa1.50:1 * + + Aa3.01:1 * + + Aa2.69:1 * + + Aa3.46:1 * + + Aa3.15:1 * +
green#6b8b87 + Aa4.45:1 * + + Aa1.32:1 * + + Aa2.26:1 * + + Aa1.52:1 * + + Aa1.21:1 * + + Aa1.17:1 * + + Aa1.71:1 * + + Aa1.53:1 * + + Aa1.97:1 * + + Aa1.79:1 * +
blue#0e87bc + Aa4.09:1 * + + Aa1.43:1 * + + Aa2.08:1 * + + Aa1.40:1 * + + Aa1.11:1 * + + Aa1.28:1 * + + Aa1.57:1 * + + Aa1.41:1 * + + Aa1.81:1 * + + Aa1.64:1 * +
purple#8552d7 + Aa3.29:1 * + + Aa1.78:1 * + + Aa1.67:1 * + + Aa1.12:1 * + + Aa1.12:1 * + + Aa1.59:1 * + + Aa1.26:1 * + + Aa1.13:1 * + + Aa1.45:1 * + + Aa1.32:1 * +
pink#da208f + Aa3.60:1 * + + Aa1.63:1 * + + Aa1.83:1 * + + Aa1.23:1 * + + Aa1.02:1 * + + Aa1.45:1 * + + Aa1.38:1 * + + Aa1.24:1 * + + Aa1.59:1 * + + Aa1.45:1 * +
+
+

94 of 100 combinations below 4.5:1.

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ New +
Text ↓
Background →		default#1f1f1fgray#393838brown#44352ered#5e2727orange#4d3219yellow#413718green#353a29blue#183c4dpurple#422f5epink#631d47
default#cfcfcf + Aa10.58:1 + + Aa7.50:1 + + Aa7.51:1 + + Aa7.51:1 + + Aa7.55:1 + + Aa7.55:1 + + Aa7.54:1 + + Aa7.52:1 + + Aa7.49:1 + + Aa7.50:1 +
gray#bebdb8 + Aa8.76:1 + + Aa6.21:1 + + Aa6.22:1 + + Aa6.22:1 + + Aa6.25:1 + + Aa6.25:1 + + Aa6.24:1 + + Aa6.23:1 + + Aa6.20:1 + + Aa6.21:1 +
brown#b9a094 + Aa6.69:1 + + Aa4.74:1 + + Aa4.75:1 + + Aa4.74:1 + + Aa4.77:1 + + Aa4.77:1 + + Aa4.76:1 + + Aa4.75:1 + + Aa4.73:1 + + Aa4.74:1 +
red#f38585 + Aa6.68:1 + + Aa4.73:1 + + Aa4.74:1 + + Aa4.74:1 + + Aa4.76:1 + + Aa4.77:1 + + Aa4.75:1 + + Aa4.74:1 + + Aa4.73:1 + + Aa4.73:1 +
orange#e89036 + Aa6.65:1 + + Aa4.72:1 + + Aa4.72:1 + + Aa4.72:1 + + Aa4.74:1 + + Aa4.75:1 + + Aa4.74:1 + + Aa4.73:1 + + Aa4.71:1 + + Aa4.71:1 +
yellow#dfab01 + Aa7.82:1 + + Aa5.55:1 + + Aa5.55:1 + + Aa5.55:1 + + Aa5.58:1 + + Aa5.58:1 + + Aa5.57:1 + + Aa5.56:1 + + Aa5.54:1 + + Aa5.54:1 +
green#a0aa82 + Aa6.72:1 + + Aa4.77:1 + + Aa4.77:1 + + Aa4.77:1 + + Aa4.80:1 + + Aa4.80:1 + + Aa4.79:1 + + Aa4.78:1 + + Aa4.76:1 + + Aa4.77:1 +
blue#5eafd2 + Aa6.70:1 + + Aa4.75:1 + + Aa4.76:1 + + Aa4.76:1 + + Aa4.78:1 + + Aa4.79:1 + + Aa4.77:1 + + Aa4.76:1 + + Aa4.74:1 + + Aa4.75:1 +
purple#b596e7 + Aa6.66:1 + + Aa4.72:1 + + Aa4.73:1 + + Aa4.72:1 + + Aa4.75:1 + + Aa4.75:1 + + Aa4.74:1 + + Aa4.73:1 + + Aa4.71:1 + + Aa4.72:1 +
pink#ea83c1 + Aa6.68:1 + + Aa4.74:1 + + Aa4.75:1 + + Aa4.74:1 + + Aa4.77:1 + + Aa4.77:1 + + Aa4.76:1 + + Aa4.75:1 + + Aa4.73:1 + + Aa4.74:1 +
+
+

0 of 100 combinations below 4.5:1.

+
+
+
+
+ + diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css index 63b03a8fcb..07a60542ce 100644 --- a/packages/core/src/editor/Block.css +++ b/packages/core/src/editor/Block.css @@ -268,11 +268,15 @@ NESTED BLOCKS /* QUOTES */ [data-content-type="quote"] blockquote { border-left: 2px solid rgb(125, 121, 122); - color: rgb(125, 121, 122); + color: #646362; margin: 0; padding-left: 1em; } +[data-content-type="quote"] blockquote:where(.dark, .dark *) { + color: #bebdb8; +} + /* DIVIDERS */ [data-content-type="divider"] hr { border: none; @@ -434,13 +438,17 @@ NESTED BLOCKS .bn-toggle-add-block-button { font-size: 16px; - color: var(--bn-colors-side-menu); + color: #646362; font-weight: normal; margin-left: 22px; padding-inline: 2px; width: fit-content; } +.bn-toggle-add-block-button:where(.dark, .dark *) { + color: #bebdb8; +} + .bn-toggle-button, .bn-toggle-add-block-button { background: none; @@ -760,7 +768,7 @@ NESTED BLOCKS .bn-preview-placeholder:where(.dark, .dark *) { background-color: rgb(70, 70, 70); - color: rgb(190, 190, 190); + color: #cfcfcf; } .bn-editor[contenteditable="true"] @@ -859,7 +867,7 @@ NESTED BLOCKS align-items: center; background-color: rgb(242, 241, 238); border-radius: 4px; - color: rgb(125, 121, 122); + color: #646362; display: flex; gap: 10px; padding: 12px; @@ -867,7 +875,7 @@ NESTED BLOCKS [data-file-block] .bn-add-file-button:where(.dark, .dark *) { background-color: rgb(70, 70, 70); - color: rgb(190, 190, 190); + color: #cfcfcf; } .bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover, diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css index 8b406bd720..d6177eddac 100644 --- a/packages/react/src/editor/styles.css +++ b/packages/react/src/editor/styles.css @@ -29,23 +29,23 @@ --bn-colors-border: #efefef; --bn-colors-side-menu: #cfcfcf; - --bn-colors-highlights-gray-text: #9b9a97; + --bn-colors-highlights-gray-text: #686665; --bn-colors-highlights-gray-background: #ebeced; - --bn-colors-highlights-brown-text: #64473a; + --bn-colors-highlights-brown-text: #845d4c; --bn-colors-highlights-brown-background: #e9e5e3; - --bn-colors-highlights-red-text: #e03e3e; + --bn-colors-highlights-red-text: #bc3434; --bn-colors-highlights-red-background: #fbe4e4; - --bn-colors-highlights-orange-text: #d9730d; + --bn-colors-highlights-orange-text: #9d5309; --bn-colors-highlights-orange-background: #f6e9d9; - --bn-colors-highlights-yellow-text: #dfab01; + --bn-colors-highlights-yellow-text: #816201; --bn-colors-highlights-yellow-background: #fbf3db; - --bn-colors-highlights-green-text: #4d6461; - --bn-colors-highlights-green-background: #ddedea; - --bn-colors-highlights-blue-text: #0b6e99; + --bn-colors-highlights-green-text: #596c40; + --bn-colors-highlights-green-background: #e5edda; + --bn-colors-highlights-blue-text: #0b6d99; --bn-colors-highlights-blue-background: #ddebf1; - --bn-colors-highlights-purple-text: #6940a5; + --bn-colors-highlights-purple-text: #7b4fbb; --bn-colors-highlights-purple-background: #eae4f2; - --bn-colors-highlights-pink-text: #ad1a72; + --bn-colors-highlights-pink-text: #be1d7e; --bn-colors-highlights-pink-background: #f4dfeb; --bn-font-family: @@ -82,23 +82,23 @@ --bn-colors-side-menu: #7f7f7f; --bn-colors-highlights-gray-text: #bebdb8; - --bn-colors-highlights-gray-background: #9b9a97; - --bn-colors-highlights-brown-text: #8e6552; - --bn-colors-highlights-brown-background: #64473a; - --bn-colors-highlights-red-text: #ec4040; - --bn-colors-highlights-red-background: #be3434; - --bn-colors-highlights-orange-text: #e3790d; - --bn-colors-highlights-orange-background: #b7600a; + --bn-colors-highlights-gray-background: #393838; + --bn-colors-highlights-brown-text: #b9a094; + --bn-colors-highlights-brown-background: #44352e; + --bn-colors-highlights-red-text: #f38585; + --bn-colors-highlights-red-background: #5e2727; + --bn-colors-highlights-orange-text: #e89036; + --bn-colors-highlights-orange-background: #4d3219; --bn-colors-highlights-yellow-text: #dfab01; - --bn-colors-highlights-yellow-background: #b58b00; - --bn-colors-highlights-green-text: #6b8b87; - --bn-colors-highlights-green-background: #4d6461; - --bn-colors-highlights-blue-text: #0e87bc; - --bn-colors-highlights-blue-background: #0b6e99; - --bn-colors-highlights-purple-text: #8552d7; - --bn-colors-highlights-purple-background: #6940a5; - --bn-colors-highlights-pink-text: #da208f; - --bn-colors-highlights-pink-background: #ad1a72; + --bn-colors-highlights-yellow-background: #413718; + --bn-colors-highlights-green-text: #a0aa82; + --bn-colors-highlights-green-background: #353a29; + --bn-colors-highlights-blue-text: #5eafd2; + --bn-colors-highlights-blue-background: #183c4d; + --bn-colors-highlights-purple-text: #b596e7; + --bn-colors-highlights-purple-background: #422f5e; + --bn-colors-highlights-pink-text: #ea83c1; + --bn-colors-highlights-pink-background: #631d47; } .bn-root { diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index 6fa9173445..6177c913e3 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -1034,6 +1034,26 @@ export const examples = { readme: "To configure a code block highlighting theme and language, you can extend the editor's default schema with a new `codeBlock`, which you can pass options into when creating. You can then use a shiki highlighter to add custom syntax highlighting.\n\nFirst use the [shiki-codegen](https://shiki.style/packages/codegen) CLI to create a `shiki.bundle.ts` file. You can then pass this file into the `codeBlock` options when creating it.\n\n**Relevant Docs:**\n\n- [Code Blocks](/docs/features/blocks/code-blocks)\n- [shiki-codegen](https://shiki.style/packages/codegen)\n- [Custom Schema](/docs/features/custom-schemas)", }, + { + projectSlug: "color-combinations", + fullSlug: "theming/color-combinations", + pathFromRoot: "examples/04-theming/08-color-combinations", + config: { + playground: true, + docs: false, + author: "", + tags: ["Appearance & Styling"], + dependencies: {} as any, + pro: false, + }, + title: "Color combinations", + group: { + pathFromRoot: "examples/04-theming", + slug: "theming", + }, + readme: + "Inspect every combination of the default text and background colors, including the default color, applied to whole blocks and inline content. Switch between light and dark themes to compare their appearance.\n\n**Try me out!** Use the theme toggle above the editors.\n\n## Relevant docs\n\n- [Themes](https://www.blocknotejs.org/docs/react/styling-theming/themes)", + }, ], }, interoperability: { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6f36d87bcc..76c78dc64c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2629,6 +2629,49 @@ importers: specifier: ^8.0.0 version: 8.0.8(@types/node@25.9.5)(esbuild@0.27.5)(jiti@2.6.1)(terser@5.51.2)(tsx@4.21.0)(yaml@2.9.0) + examples/04-theming/08-color-combinations: + dependencies: + '@blocknote/ariakit': + specifier: latest + version: link:../../../packages/ariakit + '@blocknote/core': + specifier: latest + version: link:../../../packages/core + '@blocknote/mantine': + specifier: latest + version: link:../../../packages/mantine + '@blocknote/react': + specifier: latest + version: link:../../../packages/react + '@blocknote/shadcn': + specifier: latest + version: link:../../../packages/shadcn + '@mantine/core': + specifier: ^9.0.2 + version: 9.1.1(@mantine/hooks@9.1.1(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5) + '@mantine/hooks': + specifier: ^9.0.2 + version: 9.1.1(react@19.2.5) + react: + specifier: ^19.2.3 + version: 19.2.5 + react-dom: + specifier: ^19.2.3 + version: 19.2.5(react@19.2.5) + devDependencies: + '@types/react': + specifier: ^19.2.3 + version: 19.2.14 + '@types/react-dom': + specifier: ^19.2.3 + version: 19.2.3(@types/react@19.2.14) + '@vitejs/plugin-react': + specifier: ^6.0.1 + version: 6.0.1(babel-plugin-react-compiler@1.0.0)(vite@8.0.8(@types/node@25.9.5)(esbuild@0.27.5)(jiti@2.6.1)(terser@5.51.2)(tsx@4.21.0)(yaml@2.9.0)) + vite: + specifier: ^8.0.0 + version: 8.0.8(@types/node@25.9.5)(esbuild@0.27.5)(jiti@2.6.1)(terser@5.51.2)(tsx@4.21.0)(yaml@2.9.0) + examples/05-interoperability/01-converting-blocks-to-html: dependencies: '@blocknote/ariakit': From db0874b59bd472c57bda1d1415f4d7ebc92c2b94 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 16 Oct 2026 19:00:04 +0200 Subject: [PATCH 2/7] Updated color CSS variables to OKLCH color space and adjusted highlights to have consistent brightness & saturation across colors --- highlight-color-comparison.html | 1951 +++++++++++------ packages/react/src/editor/styles.css | 140 +- .../__snapshots__/nonEditableBlock.json | 4 +- 3 files changed, 1382 insertions(+), 713 deletions(-) diff --git a/highlight-color-comparison.html b/highlight-color-comparison.html index 461fffbd31..115ede75fd 100644 --- a/highlight-color-comparison.html +++ b/highlight-color-comparison.html @@ -136,9 +136,10 @@

Highlight palette: old vs new

4.5:1 for normal text.

- Includes the default editor colors. Hex values appear in the row and - column headings. This is a standalone snapshot of the palettes, - including the new yellow-shifted green. + Includes the default editor colors. Color values appear in the row and + column headings. The new highlight text and backgrounds each share OKLCH + lightness and chroma within each theme, with independently tuned neutral + gray text and muted brown.