# 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.