refactor(theme): rail-btn inset as --rail-btn-inset so .rail-btn and .rail-btn-block cannot drift

Unreleased — behaviourally identical to the published 0.4.1 (browser-verified:
composed <a> and <button> both fill the rail foot exactly, 0.00px short). The
var() carries a 0.6rem fallback because --rail-btn-inset is declared on .rail-btn,
so rail-btn-block used alone would otherwise have an undefined var, invalidating
the whole width declaration at computed-value time and silently reverting to
width:auto — the exact <button> shrink-wrap bug 0.4.1 fixed.
This commit is contained in:
Joseph Doherty
2026-08-11 03:20:37 -04:00
parent f9d4e2f514
commit f313c5e62e
@@ -209,8 +209,12 @@
color: var(--ink-faint);
}
.rail-btn {
/* Side inset, declared once. The full-width modifier below subtracts it from
100%, so the two MUST agree; keeping it in a custom property means the rail
inset can be changed here alone. */
--rail-btn-inset: 0.6rem;
display: inline-block;
margin: 0 0.6rem;
margin: 0 var(--rail-btn-inset);
padding: 0.3rem 0.7rem;
font-size: 0.78rem;
font-weight: 600;
@@ -228,9 +232,10 @@
/* Full-width modifier for a rail-foot action (sign in / sign out), composed as
class="rail-btn rail-btn-block".
The width is explicit — calc(100% - 1.2rem) — and NOT one of the two obvious
shorthands, because a rail foot typically holds BOTH element types: Sign In
is an <a>, Sign Out is a form-submit <button>. Each shorthand breaks one:
The width is explicit — 100% minus twice .rail-btn's side inset — and NOT one
of the two obvious shorthands, because a rail foot typically holds BOTH element
types: Sign In is an <a>, Sign Out is a form-submit <button>. Each shorthand
breaks one:
width: 100% overflows. It resolves against the containing block and then
.rail-btn's 0 0.6rem side margins are ADDED on top, pushing
@@ -244,11 +249,20 @@
operators see.
calc() gets both right (measured 0px short for <a> and <button> alike). The
1.2rem must stay in step with .rail-btn's side margins above. */
inset is read from .rail-btn's own --rail-btn-inset rather than restated here,
so the two rules cannot drift apart if the rail inset ever changes.
The 0.6rem fallback is NOT decoration. --rail-btn-inset is declared on
.rail-btn, so it only resolves for the documented `rail-btn rail-btn-block`
composition; on `rail-btn-block` alone the var() would be undefined, which
makes the WHOLE width declaration invalid at computed-value time and silently
drops it back to width:auto — i.e. it would resurrect the exact shrink-wrap
bug this rule exists to fix, and only on <button>. The fallback degrades to
the correct literal instead. */
.rail-btn-block {
display: block;
box-sizing: border-box;
width: calc(100% - 1.2rem);
width: calc(100% - 2 * var(--rail-btn-inset, 0.6rem));
text-align: center;
}