From 37616682f05d349bf7c43a1cb96fbea498088b0c Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Sat, 1 Aug 2026 22:21:44 -0400 Subject: [PATCH] feat(ui): three button sizes, because the app has three kinds of button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Measured before deciding: across the ~100 bespoke button rules, vertical padding does not spread — it clusters. ~27 at 0.4–0.45rem, ~28 at 0.25–0.3rem, ~23 at 0.1–0.15rem. Those are three different components that happen to share a name prefix: a page action, a row action, and an affordance that lives inside a card. Collapsing them to the single size the shared sheet had would have visibly broken every card layout, which is why the one-off migration stopped here for a decision rather than proceeding on the assumption that a button is a button. default 8px 16px page action — what the house style specifies .btn-compact 4px 12px toolbar, table row, list item controls .btn-inline 2px 4px dismiss ×, confirm tick, add-chip .btn-small and .btn-sm already sat at the compact step, so they are kept as aliases for it — no template churn, and the two spellings stop being a third thing that might drift. .btn-inline is deliberately below the spacing scale's first step on the vertical axis: 4px of padding on an 11px label already exceeds the line box these sit in. Stated in the file so it reads as a measured exception rather than someone ignoring the scale. DesignView renders all three as real specimens. A size scale described in prose is one nobody can check; rendered from the actual classes, it cannot claim something the app does not do. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs --- frontend/src/assets/components.css | 27 +++++++++++++++++++++++++-- frontend/src/views/DesignView.vue | 19 ++++++++++++++++++- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/frontend/src/assets/components.css b/frontend/src/assets/components.css index 2330227..e9632a2 100644 --- a/frontend/src/assets/components.css +++ b/frontend/src/assets/components.css @@ -105,10 +105,33 @@ background: var(--color-action-destructive-hover); } -/* --- size modifiers ------------------------------------------------------ */ +/* --- size modifiers ------------------------------------------------------ + * + * THREE sizes, because the app genuinely has three. Measured across the ~100 + * bespoke button rules before this scale existed, vertical padding fell into + * clusters rather than a spread: ~27 at 0.4–0.45rem, ~28 at 0.25–0.3rem, ~23 + * at 0.1–0.15rem. Those are three different components — a page action, a row + * action, and an affordance living inside a card — that happen to share a name + * prefix. Collapsing them to one size would visibly break the card layouts. + * + * A button carries its size modifier; the DEFAULT (no modifier) is the page + * action, which is the one the house style specifies. + */ -.btn-small, +/* Row actions: a toolbar, a table row, a list item's controls. */ +.btn-compact, +.btn-small, /* pre-existing spellings, kept so no template churns */ .btn-sm { padding: var(--fs-space-1) var(--fs-space-3); /* 4px 12px */ font-size: var(--fs-size-tiny); } + +/* Inline affordances: a dismiss ×, a confirm tick, an add-chip — things that + * sit INSIDE a line of text or a card and must not disturb its rhythm. Below + * the spacing scale's first step on the vertical axis by necessity: 4px of + * padding on a 11px label already exceeds the line box these live in. */ +.btn-inline { + padding: 2px var(--fs-space-1); /* 2px 4px */ + font-size: var(--fs-size-tiny); + line-height: 1; +} diff --git a/frontend/src/views/DesignView.vue b/frontend/src/views/DesignView.vue index 21d3f46..9a6d4e4 100644 --- a/frontend/src/views/DesignView.vue +++ b/frontend/src/views/DesignView.vue @@ -237,7 +237,16 @@ const TYPE_SPECIMENS = [ - + +

+ Three sizes, because the app has three kinds of button: a page action, a + row action, and an affordance that sits inside a card without disturbing + its rhythm. +

+
+ + +