feat: Updated editor body colors (BLO-1232) (BLO-1240) (BLO-1331)

examples/04-theming/08-color-combinations/.bnexample.json

@@ -0,0 +1,8 @@
+{
+  "playground": true,
+  "docs": false,
+  "author": "",
+  "tags": ["Appearance & Styling"],
+  "dependencies": {},
+  "pro": false
+}

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)

examples/04-theming/08-color-combinations/index.html

@@ -0,0 +1,17 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
+    />
+    <title>Color combinations</title>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

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"
+  }
+}

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 (
+    <div>
+      <button
+        type="button"
+        aria-pressed={theme === "dark"}
+        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      >
+        Dark mode
+      </button>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns:
+            "repeat(auto-fit, minmax(min(100%, 360px), 1fr))",
+          gap: 24,
+        }}
+      >
+        <section aria-label="Block color combinations">
+          <h2>Block colors</h2>
+          <BlockNoteView editor={blocks} theme={theme} />
+        </section>
+        <section aria-label="Inline color combinations">
+          <h2>Inline colors</h2>
+          <BlockNoteView editor={inline} theme={theme} />
+        </section>
+      </div>
+    </div>
+  );
+}

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/"
+    }
+  ]
+}

examples/04-theming/08-color-combinations/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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<typeof defineConfig>[0]);

packages/core/src/editor/Block.css

@@ -254,11 +254,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;
@@ -420,13 +424,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;
@@ -736,7 +744,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"]
@@ -835,15 +843,15 @@ 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;
 }
 
 [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,