switch editor font from IBM Plex Mono to IBM Plex Sans

ComputelessComputer · ComputelessComputer · commit a47217a69673 · 2026-02-23T16:11:15.000+09:00
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@fontsource/instrument-serif": "^5.2.8",
     "@ibm/plex-mono": "^1.1.0",
+    "@ibm/plex-sans": "^1.1.0",
     "@json-render/core": "^0.6.1",
     "@json-render/react": "^0.6.1",
     "@tailwindcss/typography": "^0.5.19",
@@ -39,11 +40,11 @@
     "@tiptap/pm": "^3.19.0",
     "@tiptap/react": "^3.19.0",
     "@tiptap/starter-kit": "^3.19.0",
-    "usehooks-ts": "^3.1.1",
     "lucide-react": "^0.564.0",
     "nanoid": "^5.1.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "usehooks-ts": "^3.1.1",
     "zod": "^4.3.6"
   },
   "devDependencies": {
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src/App.css b/src/App.css
@@ -2,7 +2,7 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
-  --font-sans: "IBM Plex Mono", monospace;
+  --font-sans: "IBM Plex Sans", sans-serif;
   --font-mono: "IBM Plex Mono", monospace;
 }
 
diff --git a/src/components/editor/Editor.css b/src/components/editor/Editor.css
@@ -21,7 +21,7 @@
   border-radius: 4px;
   background: transparent;
   color: #d1d5db;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
@@ -111,7 +111,7 @@
 .widget-prompt {
   font-size: 12px;
   color: #9ca3af;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -133,7 +133,7 @@
   background: #ffffff;
   color: #6b7280;
   font-size: 12px;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   cursor: pointer;
   transition: all 0.15s;
 }
@@ -197,14 +197,14 @@
   font-weight: 600;
   color: #ef4444;
   margin: 0 0 6px 0;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
 }
 
 .widget-error-message {
   font-size: 12px;
   color: #9ca3af;
   margin: 0;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
 }
 
 /* Widget loading state */
@@ -243,13 +243,13 @@
   font-size: 13px;
   font-weight: 500;
   color: #6b7280;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
 }
 
 .widget-loading-prompt {
   font-size: 12px;
   color: #9ca3af;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   max-width: 300px;
   text-align: center;
   overflow: hidden;
diff --git a/src/components/editor/extensions/widget/registry.tsx b/src/components/editor/extensions/widget/registry.tsx
@@ -27,7 +27,7 @@ const barColors = {
   accent: "#7c3aed",
 };
 
-const font = "'IBM Plex Mono', monospace";
+const font = "'IBM Plex Sans', sans-serif";
 
 export const { registry, } = defineRegistry(widgetCatalog, {
   components: {
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "@ibm/plex-mono/css/ibm-plex-mono-all.css";
+import "@ibm/plex-sans/css/ibm-plex-sans-all.css";
 import "@fontsource/instrument-serif/latin.css";
 import "@fontsource/instrument-serif/latin-italic.css";
 import "../vendor/hyprnote/packages/tiptap/styles.css";

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`@plugin "@tailwindcss/typography";`
`3`	`3`
`4`	`4`	`@theme {`
`5`		`- --font-sans: "IBM Plex Mono", monospace;`
	`5`	`+ --font-sans: "IBM Plex Sans", sans-serif;`
`6`	`6`	`--font-mono: "IBM Plex Mono", monospace;`
`7`	`7`	`}`
`8`	`8`