feat(theme): R10 S2 — re-close the rem system (px-frozen labels/chrome -> rem)
The ~124 px-frozen text-[Npx] labels didn't track the Settings font-scale slider while their rem-sized neighbours did. Add text-2xs (0.6875rem) / text-3xs (0.625rem) font-size-ONLY tokens (no paired line-height -> matches the arbitrary they replace, zero vertical-rhythm shift) and codemod every text-[Npx] to a rem class (rare 8/9/12/13px -> rem arbitraries). Also: --hdr-h 68px -> 4.25rem so header content clears the rem-sized pills at scale 1.3 instead of sliding under; NavSidebar/SidePanel slot widths + their icon/badge px sizes go rem so the rails keep pace with their (now-scaling) labels; a w-24/h-[54px] thumb -> h-13.5 to preserve 16:9 at scale. Media thumbnails, page-width caps and fixed container widths deliberately stay px. Verified via getComputedStyle at scale 1.06/1.3: text-2xs 11.66->14.3px, header clearance 72->88px, nav slot 246->302px — all scale proportionally.
This commit is contained in:
+14
-4
@@ -43,6 +43,15 @@
|
||||
--z-index-tuner: 9999;
|
||||
}
|
||||
|
||||
/* Extra-small text steps in rem, so these labels scale with --font-scale like every other
|
||||
text (the ~124 px-frozen text-[10/11px] labels did NOT). Font-size ONLY — no paired
|
||||
--text-*--line-height — to match the `text-[Npx]` arbitraries they replace and avoid any
|
||||
vertical-rhythm shift. */
|
||||
@theme {
|
||||
--text-2xs: 0.6875rem; /* 11px @ base — the most common frozen label */
|
||||
--text-3xs: 0.625rem; /* 10px @ base */
|
||||
}
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
@@ -79,10 +88,11 @@
|
||||
:root {
|
||||
--font-scale: 1.06;
|
||||
|
||||
/* Vertical space the floating top header needs to clear (top offset 12px + pill height 44px +
|
||||
bottom breathing room ~12px). Module content pads its top by this so nothing hides under the
|
||||
header; kept in one place since App and Playlists both reference it. */
|
||||
--hdr-h: 68px;
|
||||
/* Vertical space the floating top header needs to clear (top offset ~0.75rem + pill height ~2.75rem
|
||||
+ bottom breathing room ~0.75rem). In rem so it grows with --font-scale in lock-step with the
|
||||
rem-sized header pills — a px value let content slide under the header at scale 1.3. Kept in one
|
||||
place since App and Playlists both reference it. */
|
||||
--hdr-h: 4.25rem;
|
||||
|
||||
/* ===== Glass tunables — every value that materially drives the look lives here so it can be
|
||||
tuned in ONE place. ===== */
|
||||
|
||||
Reference in New Issue
Block a user