b5fbe620c7d5
remove display font picker — settings UI, CSS vars, type, signal, and vault field (v2.53.6)
- time
- 2026-05-18 01:19 UTC · 5 months ago
- machine
- koh2
- parent
- f5c13f17f956
↓ peach-browser-b5fbe620.tar.gzatlas at this save
files changed9 files
manifest.firefox.json+1 −1manifest.json+1 −1package.json+1 −1src/background/vault.ts+0 −7src/popup/App.tsx+0 −17src/popup/styles/popup.css+0 −65src/popup/styles/vars.css+0 −38src/popup/views/Settings.tsx+0 −30src/popup/views/contracts.test.tsx+0 −4manifest.firefox.json+1 −1
@@ -1,7 +1,7 @@11 {22 "manifest_version": 3,33 "name": "Peach",4- "version": "2.53.5",4+ "version": "2.53.6",55 "description": "Zero-knowledge password manager",66 "browser_specific_settings": {77 "gecko": {manifest.json+1 −1
@@ -1,7 +1,7 @@11 {22 "manifest_version": 3,33 "name": "Peach",4- "version": "2.53.5",4+ "version": "2.53.6",55 "description": "Zero-knowledge password manager",66 "action": {77 "default_popup": "src/popup/index.html",package.json+1 −1
@@ -1,6 +1,6 @@11 {22 "name": "peach",3- "version": "2.53.5",3+ "version": "2.53.6",44 "description": "Zero-knowledge password manager",55 "type": "module",66 "scripts": {src/background/vault.ts+0 −7
@@ -87,7 +87,6 @@8787 // Settings (persisted inside the encrypted vault store as a sidecar key)8888 // ---------------------------------------------------------------------------8989 90-export type DisplayFont = "cormorant-italic" | "cormorant" | "inter" | "system";9190 export type TextSize = "small" | "medium" | "large";9291 9392 export interface VaultSettings {@@ -101,12 +100,6 @@101100 trashRetentionDays?: number;102101 manualSummonDomains?: Record<string, ManualSummonRecord>;103102 declinedCardFingerprints?: string[];104- /**105- * Display font for headlines, brand wordmark, and narrative copy. Default106- * is "cormorant-italic" — the bold italic serif that ships as Peach's107- * voice. Non-italic options exist for users who prefer upright type.108- */109- displayFont?: DisplayFont;110103 /**111104 * Text size scale for body copy and entry titles. Stops at "large" by112105 * design — XL clips dense screens (Vault, Health) inside the fixedsrc/popup/App.tsx+0 −17
@@ -136,7 +136,6 @@136136 const [editEntry, setEditEntry] = createSignal<VaultEntry | undefined>(undefined);137137 const [accentColor, setAccentColor] = createSignal<AccentColorName>("peach");138138 const [theme, setTheme] = createSignal<"dark" | "light">("dark");139- const [displayFont, setDisplayFont] = createSignal<"cormorant-italic" | "cormorant" | "inter" | "system">("cormorant-italic");140139 const [textSize, setTextSize] = createSignal<"small" | "medium" | "large">("medium");141140 const [reduceMotion, setReduceMotion] = createSignal<boolean>(false);142141 const [lockOnClose, setLockOnClose] = createSignal(true);@@ -206,10 +205,6 @@206205 });207206 208207 createEffect(() => {209- document.documentElement.setAttribute("data-display-font", displayFont());210- });211-212- createEffect(() => {213208 document.documentElement.setAttribute("data-text-size", textSize());214209 });215210 @@ -238,11 +233,6 @@238233 await sendMessage({ type: "UPDATE_SETTINGS", payload: { theme: t } });239234 }240235 241- async function applyDisplayFont(f: "cormorant-italic" | "cormorant" | "inter" | "system") {242- setDisplayFont(f);243- await sendMessage({ type: "UPDATE_SETTINGS", payload: { displayFont: f } });244- }245-246236 async function applyTextSize(size: "small" | "medium" | "large") {247237 setTextSize(size);248238 await sendMessage({ type: "UPDATE_SETTINGS", payload: { textSize: size } });@@ -875,11 +865,6 @@875865 setAccentColor(s.accentColor as AccentColorName);876866 }877867 setTheme(s.theme === "light" ? "light" : "dark");878- if (s.displayFont === "cormorant" || s.displayFont === "inter" || s.displayFont === "system") {879- setDisplayFont(s.displayFont);880- } else {881- setDisplayFont("cormorant-italic");882- }883868 if (s.textSize === "small" || s.textSize === "large") {884869 setTextSize(s.textSize);885870 } else {@@ -1462,7 +1447,6 @@14621447 trashRetentionDays={trashRetentionDays()}14631448 theme={theme()}14641449 accentColor={accentColor()}1465- displayFont={displayFont()}14661450 textSize={textSize()}14671451 reduceMotion={reduceMotion()}14681452 isPro={proStatus()}@@ -1474,7 +1458,6 @@14741458 onTrashRetentionChange={applyTrashRetention}14751459 onThemeChange={applyTheme}14761460 onAccentChange={applyAccentColor}1477- onDisplayFontChange={applyDisplayFont}14781461 onTextSizeChange={applyTextSize}14791462 onReduceMotionChange={applyReduceMotion}14801463 shortcuts={shortcutBindings()}src/popup/styles/popup.css+0 −65
@@ -5861,71 +5861,6 @@58615861 transform: scale(1.1);58625862 }58635863 5864-/* Display font picker — swatch shows an "Aa" preview rendered with each5865- font option so the user can see what they're picking before they pick. */5866-.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5867-.peach-font-picker {5868- display: flex;5869- flex-wrap: wrap;5870- gap: 6px;5871- padding: 2px 0;5872- flex: 1;5873- justify-content: flex-end;5874-}5875-.peach-font-swatch {5876- display: flex;5877- flex-direction: column;5878- align-items: center;5879- gap: 2px;5880- padding: 4px 8px;5881- background: transparent;5882- border: 1px solid var(--peach-t3);5883- border-radius: 6px;5884- cursor: pointer;5885- transition: border-color 100ms, background 100ms;5886- min-width: 56px;5887-}5888-.peach-font-swatch:hover {5889- border-color: var(--peach-accent-dim);5890- background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5891-}5892-.peach-font-swatch.is-active {5893- border-color: var(--peach-accent);5894- background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5895-}5896-.peach-font-swatch-glyph {5897- font-size: 18px;5898- line-height: 1;5899- color: var(--peach-t0);5900-}5901-.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5902- font-family: "Cormorant Garamond", serif;5903- font-style: italic;5904- font-weight: 400;5905-}5906-.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5907- font-family: "Cormorant Garamond", serif;5908- font-style: normal;5909- font-weight: 400;5910-}5911-.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5912- font-family: "Inter Variable", "Inter", sans-serif;5913- font-style: normal;5914- font-weight: 400;5915-}5916-.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5917- font-family: system-ui, -apple-system, sans-serif;5918- font-style: normal;5919- font-weight: 400;5920-}5921-.peach-font-swatch-name {5922- font-family: var(--font-mono);5923- font-size: 0.5rem;5924- letter-spacing: 0.06em;5925- color: var(--peach-t2);5926- text-transform: lowercase;5927-}5928-59295864 .peach-pill-group {59305865 display: flex;59315866 gap: 6px;src/popup/styles/vars.css+0 −38
@@ -183,44 +183,6 @@183183 --peach-rune-idle: rgba(34, 24, 9, 0.16);184184 }185185 186-/* ─── Display font choice ──────────────────────────────────────────────187- Default is Cormorant Italic. The non-italic options swap both the188- family AND the upright variant so display copy doesn't render as189- a synthesised slant on fonts that lack a true italic weight. */190-[data-display-font="cormorant-italic"] {191- --font-display: "Cormorant Garamond", "Times New Roman", serif;192- --font-display-style: italic;193-}194-[data-display-font="cormorant"] {195- --font-display: "Cormorant Garamond", "Times New Roman", serif;196- --font-display-style: normal;197-}198-[data-display-font="inter"] {199- --font-display: "Inter Variable", "Inter", system-ui, sans-serif;200- --font-display-style: normal;201-}202-[data-display-font="system"] {203- --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;204- --font-display-style: normal;205-}206-207-/* When the user picks an upright font, neutralise the italic-by-default208- styling on the display surfaces so the result feels intentional. */209-:root[data-display-font="cormorant"] .peach-wordmark,210-:root[data-display-font="cormorant"] .peach-wordmark-wrap,211-:root[data-display-font="cormorant"] .peach-pro-headline,212-:root[data-display-font="cormorant"] .peach-pro-mini-badge,213-:root[data-display-font="inter"] .peach-wordmark,214-:root[data-display-font="inter"] .peach-wordmark-wrap,215-:root[data-display-font="inter"] .peach-pro-headline,216-:root[data-display-font="inter"] .peach-pro-mini-badge,217-:root[data-display-font="system"] .peach-wordmark,218-:root[data-display-font="system"] .peach-wordmark-wrap,219-:root[data-display-font="system"] .peach-pro-headline,220-:root[data-display-font="system"] .peach-pro-mini-badge {221- font-style: normal;222-}223-224186 /* ─── Text size scaling ────────────────────────────────────────────────225187 Implemented via the `zoom` property on the popup body so every existing226188 px-based font-size in popup.css scales proportionally without rewritingsrc/popup/views/Settings.tsx+0 −30
@@ -36,7 +36,6 @@3636 trashRetentionDays: number;3737 theme: "dark" | "light";3838 accentColor: AccentColorName;39- displayFont: "cormorant-italic" | "cormorant" | "inter" | "system";4039 textSize: "small" | "medium" | "large";4140 reduceMotion: boolean;4241 isPro?: boolean;@@ -48,7 +47,6 @@4847 onTrashRetentionChange: (days: number) => void | Promise<void>;4948 onThemeChange: (theme: "dark" | "light") => void;5049 onAccentChange: (name: AccentColorName) => void | Promise<void>;51- onDisplayFontChange: (font: "cormorant-italic" | "cormorant" | "inter" | "system") => void | Promise<void>;5250 onTextSizeChange: (size: "small" | "medium" | "large") => void | Promise<void>;5351 onReduceMotionChange: (enabled: boolean) => void | Promise<void>;5452 shortcuts: Record<ShortcutAction, Keybinding>;@@ -1179,12 +1177,6 @@11791177 }11801178 11811179 function renderAppearance() {1182- const fontOptions: Array<{ id: "cormorant-italic" | "cormorant" | "inter" | "system"; label: string; preview: string }> = [1183- { id: "cormorant-italic", label: "Cormorant Italic", preview: "Aa" },1184- { id: "cormorant", label: "Cormorant", preview: "Aa" },1185- { id: "inter", label: "Inter", preview: "Aa" },1186- { id: "system", label: "System", preview: "Aa" },1187- ];11881180 const sizeOptions: Array<{ id: "small" | "medium" | "large"; label: string }> = [11891181 { id: "small", label: "Small" },11901182 { id: "medium", label: "Default" },@@ -1220,28 +1212,6 @@12201212 aria-label={color.name}12211213 title={color.name}12221214 />1223- )}1224- </For>1225- </div>1226- </div>1227-1228- <p class="peach-settings-sub-label">DISPLAY FONT</p>1229- <div class="peach-settings-row peach-settings-row--meta peach-settings-row--font">1230- <span>Font</span>1231- <div class="peach-font-picker">1232- <For each={fontOptions}>1233- {(opt) => (1234- <button1235- class="peach-font-swatch"1236- classList={{ "is-active": props.displayFont === opt.id }}1237- data-font-preview={opt.id}1238- onClick={() => void props.onDisplayFontChange(opt.id)}1239- aria-label={opt.label}1240- title={opt.label}1241- >1242- <span class="peach-font-swatch-glyph">{opt.preview}</span>1243- <span class="peach-font-swatch-name">{opt.label}</span>1244- </button>12451215 )}12461216 </For>12471217 </div>src/popup/views/contracts.test.tsx+0 −4
@@ -268,7 +268,6 @@268268 trashRetentionDays={30}269269 theme="dark"270270 accentColor="peach"271- displayFont="cormorant-italic"272271 textSize="medium"273272 reduceMotion={false}274273 onBreachMonitoringChange={vi.fn()}@@ -277,7 +276,6 @@277276 onTrashRetentionChange={vi.fn()}278277 onThemeChange={vi.fn()}279278 onAccentChange={vi.fn()}280- onDisplayFontChange={vi.fn()}281279 onTextSizeChange={vi.fn()}282280 onReduceMotionChange={vi.fn()}283281 shortcuts={DEFAULT_BINDINGS}@@ -343,7 +341,6 @@343341 trashRetentionDays={30}344342 theme="dark"345343 accentColor="peach"346- displayFont="cormorant-italic"347344 textSize="medium"348345 reduceMotion={false}349346 onBreachMonitoringChange={vi.fn()}@@ -352,7 +349,6 @@352349 onTrashRetentionChange={vi.fn()}353350 onThemeChange={onThemeChange}354351 onAccentChange={vi.fn()}355- onDisplayFontChange={vi.fn()}356352 onTextSizeChange={vi.fn()}357353 onReduceMotionChange={vi.fn()}358354 shortcuts={DEFAULT_BINDINGS}