diff --git a/web/workspace/deno.lock b/web/workspace/deno.lock index f9c2ed9a..1099576b 100644 --- a/web/workspace/deno.lock +++ b/web/workspace/deno.lock @@ -3,6 +3,7 @@ "specifiers": { "npm:@codemirror/state@6.5.2": "6.5.2", "npm:@codemirror/view@6.38.8": "6.38.8", + "npm:@fontsource/ibm-plex-mono@5.3.0": "5.3.0", "npm:@sveltejs/adapter-static@3.0.9": "3.0.9_@sveltejs+kit@2.49.4__@sveltejs+vite-plugin-svelte@6.2.1___svelte@5.45.6___vite@7.2.7__svelte@5.45.6__typescript@5.9.3__vite@7.2.7_@sveltejs+vite-plugin-svelte@6.2.1__svelte@5.45.6__vite@7.2.7_svelte@5.45.6_typescript@5.9.3_vite@7.2.7", "npm:@sveltejs/kit@2.49.4": "2.49.4_@sveltejs+vite-plugin-svelte@6.2.1__svelte@5.45.6__vite@7.2.7_svelte@5.45.6_typescript@5.9.3_vite@7.2.7", "npm:@sveltejs/vite-plugin-svelte@6.2.1": "6.2.1_svelte@5.45.6_vite@7.2.7", @@ -178,6 +179,9 @@ "os": ["win32"], "cpu": ["x64"] }, + "@fontsource/ibm-plex-mono@5.3.0": { + "integrity": "sha512-eTgnZjZEGk1QtD3ZstF+Vclo2HLAni8YMy34/DxllwZvyz1lR/1RF/xTiAquOBO7MvqBx8D2Ig2WCPMVfdZu7Q==" + }, "@jridgewell/gen-mapping@0.3.13": { "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", "dependencies": [ @@ -1185,6 +1189,7 @@ ], "packageJson": { "dependencies": [ + "npm:@fontsource/ibm-plex-mono@5.3.0", "npm:@tailwindcss/vite@^4.1.17", "npm:gen-interface-jp@0.8.0", "npm:tailwindcss@^4.1.17" diff --git a/web/workspace/package.json b/web/workspace/package.json index 79bba045..250ea940 100644 --- a/web/workspace/package.json +++ b/web/workspace/package.json @@ -4,6 +4,7 @@ "private": true, "type": "module", "dependencies": { + "@fontsource/ibm-plex-mono": "5.3.0", "gen-interface-jp": "0.8.0" }, "devDependencies": { diff --git a/web/workspace/src/app.css b/web/workspace/src/app.css index d00433bc..fa887274 100644 --- a/web/workspace/src/app.css +++ b/web/workspace/src/app.css @@ -3,6 +3,10 @@ @import 'gen-interface-jp/500.css'; @import 'gen-interface-jp/600.css'; @import 'gen-interface-jp/700.css'; +@import '@fontsource/ibm-plex-mono/latin-400.css'; +@import '@fontsource/ibm-plex-mono/latin-500.css'; +@import '@fontsource/ibm-plex-mono/latin-600.css'; +@import '@fontsource/ibm-plex-mono/latin-700.css'; @layer reset, tokens, base, layout, components; @layer reset { *, @@ -56,10 +60,10 @@ --radius-panel: 12px; --interactive-hover: oklch(94.5% 0 0); --interactive-selected: oklch(93% 0.02 230); - --font-sans: "Gen Interface JP", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - "Segoe UI", sans-serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", monospace; + --font-sans: "Gen Interface JP", Inter, ui-sans-serif, system-ui, + -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, + Monaco, Consolas, "Liberation Mono", monospace; } @media (prefers-color-scheme: dark) { :root { diff --git a/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts b/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts index 34fc3d64..725531bf 100644 --- a/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts +++ b/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts @@ -9,7 +9,7 @@ function assert(condition: unknown, message: string): asserts condition { } } -Deno.test("workspace app css uses bundled Gen Interface JP font", async () => { +Deno.test("workspace app css uses bundled UI fonts", async () => { const appCss = await Deno.readTextFile(new URL("./../../../app.css", import.meta.url)); assert( appCss.includes("gen-interface-jp/400.css") && @@ -19,6 +19,14 @@ Deno.test("workspace app css uses bundled Gen Interface JP font", async () => { appCss.includes('"Gen Interface JP", Inter'), "global app css should import the tracked Gen Interface JP weights and prefer it in the sans font stack", ); + assert( + appCss.includes("@fontsource/ibm-plex-mono/latin-400.css") && + appCss.includes("@fontsource/ibm-plex-mono/latin-500.css") && + appCss.includes("@fontsource/ibm-plex-mono/latin-600.css") && + appCss.includes("@fontsource/ibm-plex-mono/latin-700.css") && + appCss.includes('"IBM Plex Mono", ui-monospace'), + "global app css should import the tracked IBM Plex Mono weights and prefer it in the mono font stack", + ); }); Deno.test("workspace Worker list lives on the dedicated Workers page", async () => {