opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement new default monospace font Geist Mono (#22081)

Browse Source 
This pull-request follows up #22060

Felt wrong to only make use of Geist when there is a Monospace variant
here too. Felt best we default to this as the default font as its inline
with the rest of the application. This also updates the lower line for
Workspace Statistics 🙂
This commit is contained in:
Jake Howell
2026-03-03 12:00:50 +00:00
committed by GitHub
parent aa9fafa372
commit 8aebd73466
14 changed files with 60 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/.storybook/preview-head.html
+1 -2
View File
@@ -1,5 +1,4 @@
<link rel="preload" href="/node_modules/@fontsource-variable/geist/files/geist-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin />
<!-- Web terminal fonts -->
<link rel="preload" href="/node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/node_modules/@fontsource-variable/geist-mono/files/geist-mono-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin />
site/package.json
+1
View File
@@ -42,6 +42,7 @@
"@emotion/react": "11.14.0",
"@emotion/styled": "11.14.1",
"@fontsource-variable/geist": "5.2.8",
"@fontsource-variable/geist-mono": "5.2.7",
"@fontsource/fira-code": "5.2.7",
"@fontsource/ibm-plex-mono": "5.2.7",
"@fontsource/jetbrains-mono": "5.2.8",
site/pnpm-lock.yaml
Generated
+8
View File
@@ -40,6 +40,9 @@ importers:
'@fontsource-variable/geist':
specifier: 5.2.8
version: 5.2.8
'@fontsource-variable/geist-mono':
specifier: 5.2.7
version: 5.2.7
'@fontsource/fira-code':
specifier: 5.2.7
version: 5.2.7
@@ -1076,6 +1079,9 @@ packages:
'@floating-ui/utils@0.2.10':
resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==, tarball: https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz}
'@fontsource-variable/geist-mono@5.2.7':
resolution: {integrity: sha512-ZKlZ5sjtalb2TwXKs400mAGDlt/+2ENLNySPx0wTz3bP3mWARCsUW+rpxzZc7e05d2qGch70pItt3K4qttbIYA==, tarball: https://registry.npmjs.org/@fontsource-variable/geist-mono/-/geist-mono-5.2.7.tgz}
'@fontsource-variable/geist@5.2.8':
resolution: {integrity: sha512-cJ6m9e+8MQ5dCYJsLylfZrgBh6KkG4bOLckB35Tr9J/EqdkEM6QllH5PxqP1dhTvFup+HtMRPuz9xOjxXJggxw==, tarball: https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.2.8.tgz}
@@ -7229,6 +7235,8 @@ snapshots:
'@floating-ui/utils@0.2.10': {}
'@fontsource-variable/geist-mono@5.2.7': {}
'@fontsource-variable/geist@5.2.8': {}
'@fontsource/fira-code@5.2.7': {}
site/src/api/typesGenerated.ts
Generated
+2
View File
@@ -6137,6 +6137,7 @@ export interface TemplateVersionsByTemplateRequest extends Pagination {
// From codersdk/users.go
export type TerminalFontName =
| "fira-code"
| "geist-mono"
| "ibm-plex-mono"
| "jetbrains-mono"
| "source-code-pro"
@@ -6144,6 +6145,7 @@ export type TerminalFontName =
export const TerminalFontNames: TerminalFontName[] = [
"fira-code",
"geist-mono",
"ibm-plex-mono",
"jetbrains-mono",
"source-code-pro",
site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+9 -1
View File
@@ -18,6 +18,14 @@ import {
import { cn } from "utils/cn";
import { Section } from "../Section";
// Display Geist Mono (the default monospace font) first, then the rest
// alphabetically. TerminalFontNames is auto-generated in alphabetical
// order, so we reorder here for a better UX.
const sortedTerminalFontNames = [
"geist-mono" as TerminalFontName,
...TerminalFontNames.filter((name) => name !== "" && name !== "geist-mono"),
];
interface AppearanceFormProps {
isUpdating?: boolean;
error?: unknown;
@@ -107,7 +115,7 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
onChangeTerminalFont(toTerminalFontName(value))
}
>
{TerminalFontNames.filter((name) => name !== "").map((name) => (
{sortedTerminalFontNames.map((name) => (
<div key={name} className="flex items-center space-x-2">
<RadioGroupItem value={name} id={name} />
<Label
site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx
+7 -7
View File
@@ -27,7 +27,7 @@ describe("appearance page", () => {
vi.spyOn(API, "updateAppearanceSettings").mockResolvedValueOnce({
...MockUserOwner,
terminal_font: "ibm-plex-mono",
terminal_font: "geist-mono",
theme_preference: "light",
});
@@ -37,7 +37,7 @@ describe("appearance page", () => {
// Check if the API was called correctly
expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(1);
expect(API.updateAppearanceSettings).toHaveBeenCalledWith({
terminal_font: "ibm-plex-mono",
terminal_font: "geist-mono",
theme_preference: "light",
});
});
@@ -62,7 +62,7 @@ describe("appearance page", () => {
});
});
it("changes font to fira code, then back to web terminal font", async () => {
it("changes font to fira code, then back to geist mono", async () => {
renderWithAuth(<AppearancePage />);
// given
@@ -74,7 +74,7 @@ describe("appearance page", () => {
})
.mockResolvedValueOnce({
...MockUserOwner,
terminal_font: "ibm-plex-mono",
terminal_font: "geist-mono",
theme_preference: "dark",
});
@@ -90,13 +90,13 @@ describe("appearance page", () => {
});
// when
const ibmPlex = await screen.findByText("Web Terminal Font");
await userEvent.click(ibmPlex);
const geistMono = await screen.findByText("Geist Mono");
await userEvent.click(geistMono);
// then
expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(2);
expect(API.updateAppearanceSettings).toHaveBeenNthCalledWith(2, {
terminal_font: "ibm-plex-mono",
terminal_font: "geist-mono",
theme_preference: "dark",
});
});
site/src/theme/constants.ts
+17 -7
View File
@@ -1,32 +1,42 @@
import type { TerminalFontName } from "api/typesGenerated";
export const borderRadius = 8;
const MONOSPACE_DEFAULT_FONT = "Geist Mono Variable";
export const MONOSPACE_FONT_FAMILY =
"'IBM Plex Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace";
"'Geist Mono Variable', 'IBM Plex Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace";
export const BODY_FONT_FAMILY = `"Geist Variable", system-ui, sans-serif`;
export const terminalFonts: Record<TerminalFontName, string> = {
"fira-code": MONOSPACE_FONT_FAMILY.replace("IBM Plex Mono", "Fira Code"),
"fira-code": MONOSPACE_FONT_FAMILY.replace(
MONOSPACE_DEFAULT_FONT,
"Fira Code",
),
"jetbrains-mono": MONOSPACE_FONT_FAMILY.replace(
"IBM Plex Mono",
MONOSPACE_DEFAULT_FONT,
"JetBrains Mono",
),
"source-code-pro": MONOSPACE_FONT_FAMILY.replace(
"IBM Plex Mono",
MONOSPACE_DEFAULT_FONT,
"Source Code Pro",
),
"ibm-plex-mono": MONOSPACE_FONT_FAMILY,
"ibm-plex-mono": MONOSPACE_FONT_FAMILY.replace(
MONOSPACE_DEFAULT_FONT,
"IBM Plex Mono",
),
"geist-mono": MONOSPACE_FONT_FAMILY,
"": MONOSPACE_FONT_FAMILY,
};
export const terminalFontLabels: Record<TerminalFontName, string> = {
"geist-mono": "Geist Mono",
"fira-code": "Fira Code",
"jetbrains-mono": "JetBrains Mono",
"source-code-pro": "Source Code Pro",
"ibm-plex-mono": "Web Terminal Font",
"ibm-plex-mono": "IBM Plex Mono",
"": "", // needed for enum completeness, otherwise fails the build
};
export const DEFAULT_TERMINAL_FONT = "ibm-plex-mono";
export const DEFAULT_TERMINAL_FONT = "geist-mono";
export const navHeight = 62;
export const containerWidth = 1380;
site/src/theme/globalFonts.ts
+1
View File
@@ -3,6 +3,7 @@ import "@fontsource/ibm-plex-mono/400.css";
import "@fontsource/ibm-plex-mono/600.css";
// Main body copy font
import "@fontsource-variable/geist";
import "@fontsource-variable/geist-mono";
// Alternative fonts for Terminal
import "@fontsource/fira-code/400.css";
import "@fontsource/fira-code/600.css";
site/tailwind.config.js
+2
View File
@@ -15,6 +15,8 @@ module.exports = {
extend: {
fontFamily: {
sans: `"Geist Variable", system-ui, sans-serif`,
// `monospace, monospace` resets the font-size to 16px with the fallback.
mono: `"Geist Mono Variable", monospace, monospace`,
},
size: {
"icon-lg": "1.5rem",