The 4 action buttons at the top of /payroll/ were previously a mix
of btn-outline-info / btn-primary / btn-outline-success /
btn-outline-warning — three different treatments, with a lone solid
btn-primary (Batch Pay) pulling the eye disproportionately. Konrad
asked for a more uniform + pastel look.
New .btn-action-soft base class with per-button colour modifiers:
- Worker Lookup → soft blue (new --btn-action-lookup tokens)
- Batch Pay → soft amber (new --btn-action-pay tokens;
slightly deeper saturation to preserve its
"primary" role without breaking the uniform look)
- Add Adjustment → reuses --badge-bonus-* (green, "adding money"
semantic matches Bonus)
- Price Overtime → reuses --badge-overtime-* (mauve, same colour
as the Overtime badge on the Adjustments tab —
so the button matches the data it acts on)
All 4 now share:
- No border, solid pastel fill, contrasting text
- Same height, padding, border-radius (0.5rem)
- Subtle box-shadow lift on hover (filter: brightness)
- 1px press-down on active
- Accessible focus-visible outline in --accent
- Icons inherit text colour
Net CSS change: 4 new tokens (2 per theme × 2 themes) + 5 new
classes. Removes shadow-sm, btn-sm, btn-md-normal, fw-bold
one-offs — all handled by the base class.
docs/design-tokens.md updated to record the new token pairs.
Tests: 69/69.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
6c6ade9a45