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

refactor(ui): R10 — .btn-primary recipe for the primary/action buttons

Browse Source 
Add a paint-only .btn-primary recipe (solid accent bg + accent-fg text +
hover:opacity dim) in index.css @layer components, alongside the selection-paint
recipes (.pill/.chip/.is-current). Migrate ~38 primary/action buttons across 24
files off the hand-rolled 'bg-accent text-accent-fg hover:opacity-90', keeping
each site's geometry (padding/radius/font/gap/disabled/shadow).

Deliberately NOT migrated: accent BADGES/labels (spans), the chat message bubble,
selection toggles (tableHeader — R8 popover territory), and the round play FAB
(hover:scale, not the opacity-dim primary idiom). Three previously hover-less
primary buttons (SettingsPanel/SetupWizard/DraftSaveBar) gain the standard hover
dim for consistency.

Gate green (tsc/eslint-0/prettier/knip/vitest 79); self-E2E confirmed a migrated
button computes to accent/accent-fg and both recipe rules load.
This commit is contained in:
peter
2026-08-11 04:04:06 +02:00
parent 87da6155e1
commit 76f8de258c
25 changed files with 46 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+12
View File
@@ -496,6 +496,18 @@ 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-primary {
background-color: var(--accent);
color: var(--accent-fg);
}
.btn-primary:hover:not(:disabled) {
opacity: 0.9;
}
}
.glass-hover:hover {
border-color: color-mix(in srgb, var(--accent) 55%, transparent);