Skip to content

Roadmap: settings wiring pass (3 of 5 Appearance settings don't reach the UI) - #273

Merged
ANonABento merged 1 commit into
mainfrom
roadmap-settings-wiring
Aug 21, 2026
Merged

Roadmap: settings wiring pass (3 of 5 Appearance settings don't reach the UI)#273
ANonABento merged 1 commit into
mainfrom
roadmap-settings-wiring

Conversation

@ANonABento

Copy link
Copy Markdown
Owner

Docs-only. Files the settings wiring pass, with the findings measured in a real browser rather than inferred.

What prompted it

A question about whether all text respects the global text-size setting. The short answer is no, and the reason is more specific than "the sizes are inconsistent".

What's actually broken

The store→DOM plumbing is fine — lib/appearance.ts, called from main.tsx on boot and from settings-store.ts on change. What's missing is anything consuming the result.

Setting State
Theme ✅ works
Accent colour ✅ works (sets --accent)
Font size ⚠️ partial, and actively wrong at "small"
Card density inert
Animation speed inert

Font size

--base-font-size lands on html, so rem-based utilities do scale. Measured:

setting html text-sm text-xs text-[11px]
small 12px 10.5px 9px 11px
medium 14px 12.25px 10.5px 11px
large 16px 14px 12px 11px

But 247 arbitrary text-[Npx] values across 63 files (144× text-[10px], 96× text-[11px]) are absolute and never move. At "small" that inverts the hierarchytext-sm drops to 10.5px while a caption pinned at text-[11px] renders larger than the body text it's meant to sit under.

Fix: add rem steps to the @theme block in index.css (the scale wants something below text-xs) and convert the 247 uses.

Card density / animation speed

The chain is store → data-card-density / data-animation-speed--card-padding / --card-gap / --transition-duration.card-padding / .card-gap / .transition-appearance.

It dies at the last hop: those three helper classes are used by zero components. Either apply them on the card/panel primitives, or drop the settings rather than shipping controls that do nothing.

Note on process

I got this wrong twice while investigating before measuring it — first concluding the attributes were never set (my grep looked for the literal data-font-size; the code uses dataset.fontSize), then that --base-font-size was on body rather than html. The table above is from getComputedStyle in the running app.

…t reach the UI

Measured in a real browser rather than inferred, after a question about whether
text respects the global size setting.

The store->DOM plumbing is fine (lib/appearance.ts, called from main.tsx and
settings-store.ts). What's missing is anything consuming the result.

  Theme            works
  Accent colour    works
  Font size        partial, and actively wrong at "small"
  Card density     inert
  Animation speed  inert

Font size: --base-font-size lands on html, so rem utilities DO scale --
text-sm measures 10.5 / 12.25 / 14px across the three settings. But 247
arbitrary text-[Npx] values across 63 files are absolute and never move. At
"small" that inverts the hierarchy: text-sm drops to 10.5px while a caption
pinned at text-[11px] stays LARGER than the body text it sits under.

Card density / animation speed: the chain runs store -> data attribute -> CSS
var -> .card-padding / .card-gap / .transition-appearance helper classes, and
dies at the last hop -- those three classes are used by zero components.

Filed under Important; renumbered the section and the suggested order.
@ANonABento
ANonABento merged commit d46fc23 into main Aug 21, 2026
3 checks passed
@ANonABento
ANonABento deleted the roadmap-settings-wiring branch August 21, 2026 21:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant