docs(ui): design for payroll action-buttons pastel soft-fill

Four buttons at top of /payroll/ currently mix 3 treatments (outline
+ solid btn-primary one-off). Design swaps all 4 to a unified
.btn-action-soft base class with per-button colour modifiers
(Lookup=blue, Pay=amber, Add=green, Price=mauve). Reuses existing
--badge-*-bg tokens for the Add + Price buttons; adds 2 new token
pairs for Lookup + Pay. Removes the shadow-sm / btn-sm / fw-bold
one-offs — the new class handles sizing + weight.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs/plans/2026-04-24-payroll-action-buttons-design.md

@@ -0,0 +1,122 @@
+# Payroll Action Buttons — Pastel Soft-Fill (24 Apr 2026)
+
+## Origin
+
+Konrad on the 4 action buttons at the top of `/payroll/`:
+
+> _"Can you use your top notch design skills and make this look better
+> and more uniform with also some pastel colors"_
+
+Current state: Worker Lookup (`btn-outline-info`), Batch Pay
+(`btn-primary` — the odd one out, solid dark blue), Add Adjustment
+(`btn-outline-success`), Price Overtime (`btn-outline-warning`). Three
+treatments, four colour families, visually inconsistent.
+
+Scope chosen: **A — pastel soft-fill**. All 4 become solid pastel fill,
+no border, with darker text in the same colour family. Each retains a
+colour hint for its role; all look like siblings.
+
+## Design
+
+### Base class
+
+`.btn-action-soft` — shared shape for all 4 buttons:
+- `display: inline-flex; align-items: center; gap: 0.4rem`
+- `padding: 0.4rem 0.9rem`
+- `font-size: 0.875rem; font-weight: 500`
+- `border: none; border-radius: 0.5rem`
+- `transition: filter 150ms, transform 80ms`
+- Hover: `filter: brightness(1.08)`
+- Active: `transform: translateY(1px)`
+- Focus-visible: `outline: 2px solid var(--accent); outline-offset: 2px`
+
+Removes both `btn-outline-*` and `btn-primary` from the template — the
+new class is self-sufficient, doesn't layer on top of Bootstrap's
+`.btn` family.
+
+### Per-button colour — reuses existing `--badge-*` tokens where possible
+
+| Button | Modifier class | Tokens used (reused) |
+|---|---|---|
+| Worker Lookup | `.btn-action-lookup` | new `--btn-action-lookup-bg/fg` (soft blue, similar to advance family) |
+| Batch Pay | `.btn-action-pay` | new `--btn-action-pay-bg/fg` (soft amber — brand-adjacent, marks it as primary) |
+| Add Adjustment | `.btn-action-add` | reuses `--badge-bonus-bg/fg` (green — "adding money" matches Bonus semantic) |
+| Price Overtime | `.btn-action-price` | reuses `--badge-overtime-bg/fg` (mauve — matches the Overtime adjustment badge) |
+
+Four new CSS variables per theme (`--btn-action-lookup-bg/fg`,
+`--btn-action-pay-bg/fg`) plus two reuses of existing badge tokens. Net
++ 8 CSS vars (4 × 2 themes), + 5 CSS classes, – 4 Bootstrap class
+applications in the template.
+
+### Dark theme palette
+
+```css
+--btn-action-lookup-bg: #3e5c7b; --btn-action-lookup-fg: #d7e5f2;
+--btn-action-pay-bg:    #7a4d1a; --btn-action-pay-fg:    #fae0c3;
+/* add: reuses --badge-bonus-bg (#5b8260) / --badge-bonus-fg (#e8f3ea) */
+/* price: reuses --badge-overtime-bg (#a16881) / --badge-overtime-fg (#fce4ec) */
+```
+
+### Light theme palette
+
+```css
+--btn-action-lookup-bg: #c7d9e8; --btn-action-lookup-fg: #243b56;
+--btn-action-pay-bg:    #f5d6a8; --btn-action-pay-fg:    #633e0e;
+/* add: reuses --badge-bonus-bg (#d7e8d9) / --badge-bonus-fg (#385640) */
+/* price: reuses --badge-overtime-bg (#f3d1dd) / --badge-overtime-fg (#703347) */
+```
+
+### Template change
+
+`core/templates/core/payroll_dashboard.html` — find the 4-button group
+with class `payroll-actions` (near the top). Replace each button's
+class list:
+
+| Before | After |
+|---|---|
+| `btn btn-outline-info shadow-sm btn-sm btn-md-normal` | `btn-action-soft btn-action-lookup` |
+| `btn btn-primary shadow-sm btn-sm btn-md-normal` | `btn-action-soft btn-action-pay` |
+| `btn btn-outline-success shadow-sm btn-sm btn-md-normal fw-bold` | `btn-action-soft btn-action-add` |
+| `btn btn-outline-warning shadow-sm btn-sm btn-md-normal` | `btn-action-soft btn-action-price` |
+
+Shadow and size modifiers come from `.btn-action-soft` itself — no
+need for `shadow-sm` / `btn-sm`. The `fw-bold` on Add Adjustment was
+a workaround for the faint outline treatment; the new class has
+sufficient presence without it.
+
+## Out of scope
+
+- Extending this treatment to buttons elsewhere in the app — defer to
+  a future "app-wide button pass" if this looks right
+- Changing the icons or labels
+- Moving or reorganising the button row
+- Button ordering (it stays: Lookup / Batch Pay / Add Adjustment /
+  Price Overtime)
+
+## Risks
+
+- **Contrast** on the soft-fill pastels might be borderline in light
+  mode. Implementation will spot-check each with WebAIM contrast-check
+  logic (target: WCAG AA for UI elements — 3:1 minimum for icon/text
+  against background).
+- **One-off `fw-bold` on Add Adjustment** — the current template has
+  it to compensate for the faint outline. Removing it with the new
+  class is intentional; if the new `.btn-action-add` reads too
+  lightly, re-apply `fw-bold` or bump the text weight in
+  `.btn-action-soft` base.
+- **Batch Pay "is this still the primary?"** — it now wears soft
+  amber instead of solid dark blue. The amber is slightly more
+  saturated than the other three, which preserves a visual hierarchy.
+  If Konrad wants stronger emphasis, we can deepen
+  `--btn-action-pay-bg` further or add a subtle 1px `--accent` ring.
+
+## Rollback
+
+Single commit, `git revert <sha>`. No data, schema, behavioural
+change.
+
+## Next step
+
+Generate a brief implementation plan via writing-plans → execute via
+subagent-driven-development. Auto mode active, no checkpoints — this
+is a 1-2 task implementation.