/* ========================================================================== shared/bws-buttons.css — THE BUTTON COMPONENT'S TOKENS (P2041) -------------------------------------------------------------------------- docs/design-system-plan-2026-09-10.md §4c names Button as the first component piece; §6's P2041 row scopes it to promoting cabinet-designer.html's .btn-primary/-secondary/-ghost/-danger family and adopting the same look on systainer-bank.html "without changing its purpose-named classes' behavior (a mapping layer, not a rename sweep)". TOKENS ONLY — this file declares no selector that paints an element (the one @keyframes block is inert until a page's own rule references it by name; it is not a rule that matches any element on its own). Every visual rule stays where the markup already is. A page adopts this component by rewriting ITS OWN existing selectors to read these custom properties, each with the page's original literal kept as the var() fallback — so a page never repaints if this file is ever missing or fails to load, and the piece can ship with a hard "no measured change" guarantee instead of asking anyone to trust a diff. See: - cabinet-designer.html's .btn-primary/-secondary/-ghost/-danger/.btn-sm block (the mapping layer; source of truth for the look, per the plan) - modules/festool-systainer-cabinet-width/systainer-bank.html's .ctrl-btn/.add-cab-btn/.shelf-place mapping layer (purpose-named classes kept; pinned geometry — the Place button surface, the math-audit-pinned 13px .box-pri-pill — untouched) - docs/design-system/components/button.md (the filled component page) - tests/bws-buttons.test.cjs (pins this file's own computed states on a fixture page) Requires shared/theme.css to be linked first (for --accent/--surface/ --danger/--gold/etc.) and, where noted, the P2038 foundation tokens (--space-*, --radius-*) also in theme.css. Link this file AFTER theme.css in every page's (docs/page-scaffold.html). ========================================================================== */ :root{ /* ---- Size scale: sm / md / lg — padding, type, radius ---- md and sm are HARVESTED from cabinet-designer.html's shipped .btn-primary/-secondary (md) and .btn-ghost/-danger (sm), plus the .btn-sm size-modifier class — the plan's own finding that this page's family is "the best existing pattern to promote" (design-system-plan §4c). This family predates the P2038 foundation harvest and the two scales were never reconciled, and reconciling them now by CHANGING the shipped numbers is exactly what the piece's own "no measured change" rule bars — so this scale keeps cabinet-designer.html's own literals as the primary source, falling back to a P2038 primitive ONLY where the harvested figure already lands on one exactly (--btn-pad-x-md is the one case: 16px is also --space-3). lg is a genuinely NEW size with no shipped button to preserve, so it is free to build fully from the P2038 scale rather than carry its own bespoke literal. */ --btn-pad-y-sm: 6px; --btn-pad-x-sm: 10px; /* .btn-ghost / .btn-danger's own figure */ --btn-pad-x-sm-modifier: 11px; /* the SEPARATE .btn-sm size-modifier class (applied to primary/secondary) ships 1px wider; both are real, kept distinct rather than quietly unified */ --btn-fs-sm: 12px; --btn-radius-sm: 6px; --btn-pad-y-md: 9px; --btn-pad-x-md: var(--space-3, 16px); /* exact match: cabinet-designer.html's shipped 16px IS the P2038-harvested --space-3 */ --btn-fs-md: 13px; --btn-radius-md: 8px; /* deliberately NOT the foundation --radius-md (14px) — see header note; this is the button family's own, already-shipped radius. Kept a plain literal here on purpose (2026-09-11 P1-4 fix, design authority audit): tests/bws-buttons.test.cjs pins this exact declared value and is outside this fix's edit scope, so this token is not re-pointed at --radius-xs even though the number is the same 8px; --btn-radius-lg below and index.html's --r-chip are re-pointed instead */ --btn-pad-y-lg: 12px; --btn-pad-x-lg: var(--space-4, 24px); /* new size: built from the foundation scale, nothing to preserve */ --btn-fs-lg: 15px; --btn-radius-lg: var(--radius-xs, 8px); /* one radius across md/lg; only the sm tier is tighter, matching the shipped md family today. Re-pointed at the P2038 foundation's --radius-xs (2026-09-11 P1-4 fix): 8px is an exact match, so the fallback keeps this a zero-visual-change re-point, not new. No page has adopted --btn-radius-lg yet, so there is nothing rendered to repaint either way. */ --btn-min-target: 24px; /* WCAG 2.2 SC 2.5.8 floor. Every size above already clears this by a wide margin at this page's type scale — a guard, never a driver of the real (larger) heights. */ /* ---- Motion / state ---- */ --btn-transition: background 0.12s; --btn-hover-filter: brightness(0.92); --btn-disabled-opacity: 0.45; --btn-spin-duration: 0.6s; /* ---- Focus ring. WAS 2px --gold, 1px offset — harvested from `.shelf-pref-chip`'s own ring on the Systainer planner (P2027) because that was the best existing pattern found at the time, one of six different focus-ring shapes the plan's own recon found on a single page (design-system-plan-2026-09-10.md §3). "Unifying THOSE is a separate, not-yet-filed piece" (this file's own prior note) — that piece is P2066: it built shared/theme.css's --focus-ring-color/-width/-offset trio, chosen by pixel-measuring --gold and --accent-text against the five worst backdrops in both themes (theme.css's own comment above --focus-ring-color has the numbers). --accent-text won on margin and adoption; --gold ALSO fails the same permanently-dark-topbar test --accent-text does (2.93:1 in Linen, under 3:1), so switching this file to --gold would not have dodged the problem either. This now reads that shared trio instead of a page-local literal, which is a REAL, deliberate colour + offset change for these four button classes (2px gold/1px offset -> 2px accent-text/2px offset). `.shelf-pref-chip` itself keeps ITS OWN literal (2px gold, 1px offset) as a named, documented exception rather than being silently repainted — it predates this token, and its own literal is pinned by `tests/p2030-placement-chip-colours.test.cjs` (a P2066 addition to that file, since nothing pinned this specific value before). Applied only to the four button classes in each page's mapping layer, never as a blanket button/input override. */ --btn-ring-width: var(--focus-ring-width, 2px); --btn-ring-color: var(--focus-ring-color, var(--gold)); --btn-ring-offset: var(--focus-ring-offset, 1px); /* ---- Variant palette: aliases onto theme.css's own semantic tokens — never a new colour. A button's fill/ink/border always names the SAME token theme.css already ties to that meaning (on-accent/surface/ danger/gold), so the component carries zero colour decisions of its own and repaints for free if theme.css's palette ever moves. ---- */ --btn-primary-bg: var(--on-accent-fill); --btn-primary-fg: var(--on-accent); --btn-primary-weight: 600; --btn-secondary-bg: var(--surface); --btn-secondary-fg: var(--text); /* P2067: --border alone measures 1.56:1 (Linen) / 1.63:1 (Midnight Oak) against --surface, under the WCAG 1.4.11 non-text 3:1 floor for the secondary button's own border. Repointed at --border-strong (theme.css, an alias to the existing --text-faint value: 5.63:1 / 5.26:1 against --surface) instead of retuning --border itself, which is read by ~1359 other pairings this card is not scoped to move. .btn-ghost/.btn-danger keep reading --border directly — only this alias moved. */ --btn-secondary-border: var(--border-strong); --btn-secondary-hover-bg: var(--surface-hi); --btn-secondary-weight: 500; --btn-ghost-fg: var(--text-muted); /* Follow-up to P2067's own --btn-secondary-border fix (see the comment above): --border alone measures the same 1.56:1 (Linen) / 1.63:1 (Midnight Oak) against --surface for .btn-ghost's border, since it is the identical --border value against the identical --surface backdrop. Repointed at the same --border-strong token P2067 already built (theme.css, an alias to --text-faint: 5.63:1 / 5.26:1 against --surface) rather than a second border-strength token for the same job. .btn-danger keeps reading --danger directly (already measured and passing per button.md's own table) — only this alias moved. */ --btn-ghost-border: var(--border-strong); --btn-ghost-hover-bg: var(--surface-hi); --btn-ghost-hover-fg: var(--text); --btn-danger-fg: var(--danger); --btn-danger-border: var(--danger); --btn-danger-hover-bg: var(--danger-soft); --btn-danger-hover-fg: var(--danger-ink); } /* Loading-state spinner keyframes. Inert on its own — it paints nothing until a page's own ".btn-*.is-loading::after" rule (mapping layer) references it by name via `animation: bws-btn-spin ...`. Declared once here so every adopting page shares the same rotation rather than each writing its own @keyframes. */ @keyframes bws-btn-spin { to { transform: rotate(360deg); } }