From 1fcffcc9fb60cd137c7933f47c413c467d4f7193 Mon Sep 17 00:00:00 2001
From: dame <hi@dame.art>
Date: Fri, 22 May 2026 16:27:26 -0700
Subject: [PATCH] Add an X-Large font size preset to the extension (#19)

Extends the existing Small/Medium/Large scale with a fourth, larger
preset for users who want more breathing room. Continues the +2px step
pattern across the size tokens and widens the popup to 460px so titles
and subtitles don't truncate at the bigger scale.

https://claude.ai/code/session_011yTxiDk4CJC4CAtr1nXkUx

Co-authored-by: Claude <noreply@anthropic.com>
---
 extension/entrypoints/options/tabs/DefaultsTab.tsx |  1 +
 extension/entrypoints/popup/popup.css              |  6 ++++++
 extension/entrypoints/shared.css                   | 12 ++++++++++++
 extension/lib/prefs.ts                             |  2 +-
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/extension/entrypoints/options/tabs/DefaultsTab.tsx b/extension/entrypoints/options/tabs/DefaultsTab.tsx
index e921f48..a73e0d4 100644
--- a/extension/entrypoints/options/tabs/DefaultsTab.tsx
+++ b/extension/entrypoints/options/tabs/DefaultsTab.tsx
@@ -110,6 +110,7 @@ export default function DefaultsTab({ prefs, onChange }: Props) {
                 { value: 'small', label: 'Small' },
                 { value: 'medium', label: 'Medium' },
                 { value: 'large', label: 'Large' },
+                { value: 'xlarge', label: 'X-Large' },
               ] as const
             ).map(opt => (
               <button
diff --git a/extension/entrypoints/popup/popup.css b/extension/entrypoints/popup/popup.css
index 014234a..cbbdb93 100644
--- a/extension/entrypoints/popup/popup.css
+++ b/extension/entrypoints/popup/popup.css
@@ -9,6 +9,12 @@ body {
   width: 420px;
 }
 
+[data-fs='xlarge'] body {
+  /* Chrome caps the action popup at 800px; 460 gives the +2 step room to
+     breathe without bumping into that ceiling. */
+  width: 460px;
+}
+
 [data-fs='small'] body {
   width: 360px;
 }
diff --git a/extension/entrypoints/shared.css b/extension/entrypoints/shared.css
index 40f73a2..e4abd66 100644
--- a/extension/entrypoints/shared.css
+++ b/extension/entrypoints/shared.css
@@ -88,6 +88,18 @@
   --fs-display: 34px;
 }
 
+[data-fs='xlarge'] {
+  --fs-xs: 14px;
+  --fs-sm: 15px;
+  --fs-md: 16px;
+  --fs-base: 19px;
+  --fs-lg: 18px;
+  --fs-xl: 20px;
+  --fs-2xl: 25px;
+  --fs-display-sm: 28px;
+  --fs-display: 38px;
+}
+
 [data-theme='light'] {
   --bg-primary: #faf8f3;
   --bg-secondary: #f1ede4;
diff --git a/extension/lib/prefs.ts b/extension/lib/prefs.ts
index c4eccd0..50f5ec4 100644
--- a/extension/lib/prefs.ts
+++ b/extension/lib/prefs.ts
@@ -131,7 +131,7 @@ export type Prefs = {
    * Text size preset. Scales font sizes across the popup and settings page;
    * `medium` is the new default and slightly larger than the previous baseline.
    */
-  fontSize: 'small' | 'medium' | 'large';
+  fontSize: 'small' | 'medium' | 'large' | 'xlarge';
   /**
    * Built-in waypoint ids the user has been notified about. Used to surface
    * "New" badges in the popup and Settings → Waypoints when the extension
-- 
2.51.2