Skip to content

refine(web): separate typography typefaces and size controls #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
asfires merged 1 commit into from
Aug 19, 2026
Merged

refine(web): separate typography typefaces and size controls #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/appearanceFonts.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ describe("appearance font variables", () => {
smoothing: true,
});

expect(setProperty).toHaveBeenCalledWith("--font-size-code", "14px");
expect(setProperty).toHaveBeenCalledWith("--diffs-font-size", "14px");
expect(setProperty).toHaveBeenCalledWith("--font-size-tool-output", "10px");
});
});
1 change: 0 additions & 1 deletion apps/web/src/appearanceFonts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ export function applyAppearanceFontVariables(
root.style.fontSize = `${clampInterfaceFontSize(preferences.sizeInterface)}px`;
root.style.setProperty("--font-size-prompt", `${clampPromptFontSize(preferences.sizePrompt)}px`);
const code = clampCodeFontSize(preferences.sizeCode);
root.style.setProperty("--font-size-code", `${code}px`);
root.style.setProperty(
"--font-size-tool-output",
`${clampToolOutputFontSize(preferences.sizeToolOutput)}px`,
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/settings/SettingsPanels.logic.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
} from "./SettingsPanels.logic";

describe("typography settings restore", () => {
it("detects family and size changes by font row", () => {
it("detects family and size changes as separate controls", () => {
expect(getChangedTypographySettingLabels(DEFAULT_UNIFIED_SETTINGS)).toEqual([]);
expect(
getChangedTypographySettingLabels({
Expand All @@ -29,7 +29,7 @@ describe("typography settings restore", () => {
fontFamilyCode: "Fira Code",
fontSizeToolOutput: 12,
}),
).toEqual(["Interface font", "Code font", "Tool output"]);
).toEqual(["Monospace typeface", "Interface and response size", "Tool output size"]);
});
});

Expand Down
34 changes: 20 additions & 14 deletions apps/web/src/components/settings/SettingsPanels.logic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,27 +87,33 @@ type TypographySettings = Pick<
| "fontSizeTerminal"
>;

/** Labels the font rows whose family or size differs from the defaults. */
/** Labels each typography control whose value differs from the defaults. */
export function getChangedTypographySettingLabels(settings: TypographySettings): string[] {
return [
...(settings.fontFamilySans !== DEFAULT_UNIFIED_SETTINGS.fontFamilySans ||
settings.fontSizeInterface !== DEFAULT_UNIFIED_SETTINGS.fontSizeInterface
? ["Interface font"]
...(settings.fontFamilySans !== DEFAULT_UNIFIED_SETTINGS.fontFamilySans
? ["Interface typeface"]
: []),
...(settings.fontFamilyComposer !== DEFAULT_UNIFIED_SETTINGS.fontFamilyComposer ||
settings.fontSizePrompt !== DEFAULT_UNIFIED_SETTINGS.fontSizePrompt
? ["Prompt font"]
...(settings.fontFamilyComposer !== DEFAULT_UNIFIED_SETTINGS.fontFamilyComposer
? ["Prompt typeface"]
: []),
...(settings.fontFamilyCode !== DEFAULT_UNIFIED_SETTINGS.fontFamilyCode ||
settings.fontSizeCode !== DEFAULT_UNIFIED_SETTINGS.fontSizeCode
? ["Code font"]
...(settings.fontFamilyCode !== DEFAULT_UNIFIED_SETTINGS.fontFamilyCode
? ["Monospace typeface"]
: []),
...(settings.fontFamilyTerminal !== DEFAULT_UNIFIED_SETTINGS.fontFamilyTerminal
? ["Terminal typeface"]
: []),
...(settings.fontSizeInterface !== DEFAULT_UNIFIED_SETTINGS.fontSizeInterface
? ["Interface and response size"]
: []),
...(settings.fontSizePrompt !== DEFAULT_UNIFIED_SETTINGS.fontSizePrompt ? ["Prompt size"] : []),
...(settings.fontSizeCode !== DEFAULT_UNIFIED_SETTINGS.fontSizeCode
? ["Diff and file size"]
: []),
...(settings.fontSizeToolOutput !== DEFAULT_UNIFIED_SETTINGS.fontSizeToolOutput
? ["Tool output"]
? ["Tool output size"]
: []),
...(settings.fontFamilyTerminal !== DEFAULT_UNIFIED_SETTINGS.fontFamilyTerminal ||
settings.fontSizeTerminal !== DEFAULT_UNIFIED_SETTINGS.fontSizeTerminal
? ["Terminal font"]
...(settings.fontSizeTerminal !== DEFAULT_UNIFIED_SETTINGS.fontSizeTerminal
? ["Terminal size"]
: []),
];
}
Expand Down
Loading
Loading