diff --git a/packages/app/e2e/regression/session-timeline-lifecycle-state.spec.ts b/packages/app/e2e/regression/session-timeline-lifecycle-state.spec.ts index d9c85997cf2..f81dd081adc 100644 --- a/packages/app/e2e/regression/session-timeline-lifecycle-state.spec.ts +++ b/packages/app/e2e/regression/session-timeline-lifecycle-state.spec.ts @@ -59,12 +59,12 @@ test("transitions a streaming shell from writing through command execution", asy await expect(tool.locator('[data-slot="collapsible-trigger"]')).toHaveCSS("height", "28px") await expect(tool.locator('[data-component="tool-trigger"]')).toHaveCSS("gap", "6px") await expect(title).toHaveCSS("font-size", "13px") - await expect(title).toHaveCSS("font-family", "Inter, sans-serif") + await expect(title).toHaveCSS("font-family", /^Inter,/) await expect(title).toHaveCSS("font-weight", "530") await expect(title).toHaveCSS("line-height", "16px") await expect(title).toHaveCSS("color", "rgb(22, 22, 22)") await expect(subtitle).toHaveCSS("font-size", "13px") - await expect(subtitle).toHaveCSS("font-family", "Inter, sans-serif") + await expect(subtitle).toHaveCSS("font-family", /^Inter,/) await expect(subtitle).toHaveCSS("font-weight", "440") await expect(subtitle).toHaveCSS("line-height", "16px") await expect(subtitle).toHaveCSS("color", "rgb(92, 92, 92)") diff --git a/packages/app/src/settings/model.test.ts b/packages/app/src/settings/model.test.ts new file mode 100644 index 00000000000..36612ac9963 --- /dev/null +++ b/packages/app/src/settings/model.test.ts @@ -0,0 +1,30 @@ +import { describe, expect, test } from "bun:test" +import { monoDefault, monoFontFamily, sansDefault, sansFontFamily, terminalFontFamily } from "./model" + +describe("settings font families", () => { + test("defaults normal text to Inter", () => { + expect(sansDefault).toBe("Inter") + expect(sansFontFamily(undefined)).toStartWith('"Inter", ') + expect(sansFontFamily("")).toStartWith('"Inter", ') + expect(sansFontFamily(" ")).toStartWith('"Inter", ') + }) + + test("keeps custom normal fonts ahead of the default", () => { + expect(sansFontFamily("Custom Sans")).toStartWith('"Custom Sans", "Inter", ') + }) + + test("defaults monospace text to IBM Plex Mono", () => { + expect(monoDefault).toBe("IBM Plex Mono") + expect(monoFontFamily(undefined)).toStartWith('"IBM Plex Mono", ') + expect(monoFontFamily("")).toStartWith('"IBM Plex Mono", ') + expect(monoFontFamily(" ")).toStartWith('"IBM Plex Mono", ') + }) + + test("keeps custom monospace fonts ahead of the default", () => { + expect(monoFontFamily("Custom Mono")).toStartWith('"Custom Mono", "IBM Plex Mono", ') + }) + + test("preserves the separate terminal font default", () => { + expect(terminalFontFamily(undefined)).toStartWith('"JetBrainsMono Nerd Font Mono", ') + }) +}) diff --git a/packages/app/src/settings/model.tsx b/packages/app/src/settings/model.tsx index 614bc5df7ef..f64e99abe69 100644 --- a/packages/app/src/settings/model.tsx +++ b/packages/app/src/settings/model.tsx @@ -60,12 +60,12 @@ export interface Settings { sounds: SoundSettings } -export const monoDefault = "System Mono" -export const sansDefault = "System Sans" +export const monoDefault = "IBM Plex Mono" +export const sansDefault = "Inter" export const terminalDefault = "JetBrainsMono Nerd Font Mono" const monoFallback = - 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' -const sansFallback = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' + '"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' +const sansFallback = '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' const terminalFallback = '"JetBrainsMono Nerd Font Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css index b652f9610d3..f37f41b9682 100644 --- a/packages/ui/src/styles/theme.css +++ b/packages/ui/src/styles/theme.css @@ -1,8 +1,8 @@ :root { - --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-sans--font-feature-settings: normal; --font-family-mono: - ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-family-mono--font-feature-settings: normal; --font-size-small: 13px; diff --git a/packages/ui/src/styles/tokens/theme.css b/packages/ui/src/styles/tokens/theme.css index ba414282346..41593dfff32 100644 --- a/packages/ui/src/styles/tokens/theme.css +++ b/packages/ui/src/styles/tokens/theme.css @@ -129,9 +129,9 @@ --v2-illustration-illustration-layer-02: var(--v2-grey-400); --v2-illustration-illustration-layer-03: var(--v2-grey-500); - --font-family-text: "Inter", sans-serif; - --v2-font-family-sans: "Inter", sans-serif; - --v2-font-family-code: "IBM Plex Mono", var(--font-family-mono); + --font-family-text: var(--font-family-sans); + --v2-font-family-sans: var(--font-family-sans); + --v2-font-family-code: var(--font-family-mono); --line-height-tight: 12px; --line-height-compact: 16px; --line-height-base: 20px;