From cfba3145a4541e46a7b7e431628b5a4c40c0a90a Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Thu, 15 Oct 2026 19:01:52 +0200 Subject: [PATCH 1/8] 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 d18a3ffb76..70bef7923b 100644 --- a/packages/core/src/editor/Block.css +++ b/packages/core/src/editor/Block.css @@ -219,11 +219,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; @@ -347,13 +351,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; @@ -683,7 +691,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"] @@ -782,7 +790,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; @@ -790,7 +798,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 f72b760521..9eac75bde7 100644 --- a/packages/react/src/editor/styles.css +++ b/packages/react/src/editor/styles.css @@ -19,23 +19,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: @@ -72,23 +72,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 5b0aca0a61..9acd97ea37 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 54a07ddd92..bf144c247d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2617,6 +2617,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 ce8024fc9b3e2fcd7adf3faa06a6fe298cf473fd Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 16 Oct 2026 19:00:04 +0200 Subject: [PATCH 2/8] 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.