Font Size Adjuster

Free — GPL coresize Splanned, not built

Generated from docs/plan/core/font-size-adjuster/PLAN.md in the AstroBaaS repository. Nothing described below is implemented — it is the written plan for it.

Core-free UI control that lets users enlarge or reduce text size site-wide. Adds a toolbar button (S/M/L/XL text size) that applies CSS font-size scaling (1.0x to 1.5x default). Uses browser localStorage to persist the choice across sessions.

The problem

Users with vision impairment cannot enlarge text; they see nothing and leave the site. Browser zoom works but affects images and layouts awkwardly. Native site-level text scaling is faster and cleaner.

What it does

• Public site header shows optional text-size control: ‘A A A’ buttons for small/medium/large text (or S M L XL labels)
• Clicking a size button applies CSS transform (font-size: 1.0x/1.2x/1.4x/1.5x) to the document body
• Selection persists in browser localStorage under key ‘astrobaas_font_size_scale’ (survives page reloads and new sessions)
• Default is 1.0x (no scaling); user preference overrides it per browser/device
• Admin setting to enable/disable the toolbar (Theme → Accessibility → Font Size Adjuster toggle)
• Keyboard accessible: toolbar buttons are focusable and activate on Space/Enter

What it deliberately does NOT do

Each boundary carries its reason. A boundary without a reason gets crossed by the next person who reads this.

• No forced scaling — merchant can disable the control (reason: not all sites need or want it)
• No per-font-size customization of the scale values — fixed 1.0x / 1.2x / 1.4x / 1.5x (reason: more granularity creates confusion)
• No image/layout reflow — only font-size changes; images and grids scale with text, which may break layouts (reason: true responsive layout is a theme design problem, not a global setting)

Data model

Settings key: theme_font_size_enabled (boolean, default true). No schema change.

API

• GET /api/theme/font-size-enabled
• PUT /api/theme/font-size-enabled { enabled: boolean }

Every route added here must also appear in src/pages/openapi.json.ts — a test fails the build if it does not.

Admin

Theme editor → Accessibility → Font Size Adjuster: toggle ‘Enable text sizing control’. Label/customize text: ‘A A A’ or ‘S M L XL’ (text input, default ‘A A A’). Public site shows the control in header if enabled.

The seam — why this is core

Core owns the control and localStorage logic. Theme owns whether to show it (controlled by settings). User owns their choice (stored in browser).

Core owns the interface + honest text scaler; accessibility is infrastructure, not a per-country obligation or credential.

Dependencies

• Layout template (core)
• Settings (core)
• localStorage API (browser)

Acceptance checks

Each of these must be able to fail. Before claiming this is done, break the code deliberately and watch each one go red.

• Text-size control appears in the public site header when enabled in theme settings
• Clicking the ‘L’ (large) button increases all text to 1.4x and saves to localStorage
• Reloading the page preserves the 1.4x scale from localStorage
• Clicking the ‘M’ (medium) button resets to 1.0x
• Tabbing to the buttons and pressing Space/Enter activates them
• Disable the control in settings; the toolbar disappears from the public site

Risks

CSS transform font-size does not reflow layouts; tables and fixed-width containers may break at 1.5x. Users on very small screens with 1.5x scaling lose readability. localStorage is per-device per-browser; scaling does not sync to other devices. Some text (images with text, SVG text) will not scale with CSS font-size.

Commercial context

The anchor is what the nearest equivalent charges on Shopify or Magento today. It is context for a pricing decision, not the decision.

---

Generated from the commerce plan. See docs/COMMERCE-PLAN.md for the full catalogue and ../../AI-GUIDE.md for how to work on this repository.