peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(ui): address /code-review on .btn-primary — tone family + doc fixes

Browse Source 
- Generalize the recipe into a .btn-{tone} family: add .btn-danger / .btn-warn
  siblings sharing one hover-dim, and migrate the two hand-rolled tone-action
  buttons (ConfirmProvider danger confirm, Banner warning action) onto them, so
  primary/danger/warn action paints can't drift.
- Reword the recipe comment: it owns paint + one standard hover-dim (not
  'PAINT-ONLY' — that mislabel obscured the hover behaviour).
- Drop the now-redundant hover:opacity-90 from Banner's action-button base (each
  tone's recipe supplies the hover).

The 3 previously hover-less primary buttons keep the standard hover-dim gained in
the prior commit (intentional consistency; now accurately documented). Gate green
(tsc/eslint-0/prettier/knip/vitest 79); self-E2E confirmed btn-danger/btn-warn
compute to their tone/tone-fg tokens.
This commit is contained in:
peter
2026-08-11 04:20:10 +02:00
parent 76f8de258c
commit fc186e1230
3 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+17 -6
View File
@@ -496,16 +496,27 @@ body {
color: var(--accent-fg);
border-color: var(--accent);
}
/* .btn-primary — the primary/ACTION button paint (solid accent). Distinct from the selection
recipes above: this is "the primary action", not "selected among options". PAINT-ONLY like
.chip-solid — a site keeps its own geometry (padding/radius/font/gap/disabled:opacity/transition).
Migrated sites MUST drop `bg-accent text-accent-fg hover:opacity-90` so this @layer-components
rule isn't beaten by those utilities. No focus-visible — @layer base already rings every button. */
/* .btn-{tone} — solid ACTION-button paint (the "primary/danger/warn action", distinct from the
selection recipes above which are "selected among options"). Each sets its tone fill + contrasting
fg; all share ONE standard hover-dim. Like .chip-solid this owns paint (+ that single hover
behaviour), NOT geometry — a site keeps its own padding/radius/font/gap/disabled:opacity/shadow.
Migrated sites MUST drop `bg-{tone} text-{tone}-fg hover:opacity-90` so these @layer-components
rules aren't beaten by those utilities. No focus-visible — @layer base already rings every button. */
.btn-primary {
background-color: var(--accent);
color: var(--accent-fg);
}
.btn-primary:hover:not(:disabled) {
.btn-danger {
background-color: var(--danger);
color: var(--danger-fg);
}
.btn-warn {
background-color: var(--warn);
color: var(--warn-fg);
}
.btn-primary:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-warn:hover:not(:disabled) {
opacity: 0.9;
}
}