fix(forms): paint checkbox checkmark on :checked (PMS-577) #387

Closed

longjacksonle wants to merge 0 commits from fix/PMS-577-checkbox-checkmark into main

longjacksonle commented

2026-06-30 17:07:29 +02:00

Owner

Problem

Clicking the timesheet certify and billable checkboxes toggled the state but showed no checkmark: the box drew only the accent focus ring, never a check. Reported under PMS-577 (and the earlier PMS-571 / PMS-552 billable reports stem from the same cause).

Root cause

The bug is in the shared Checkbox component, so every checkbox in the app is affected. The component set bg-surface on the <input>. The @tailwindcss/forms base layer paints a checked box as a white checkmark SVG over a currentColor (accent) background-color. The bg-surface utility outranks that base :checked rule and pinned the background to the theme surface color. In light mode --surface is #ffffff, so the white checkmark rendered white-on-white and was invisible. In dark mode (--surface #1e293b) it happened to show, which is why this slipped through.

Confirmed empirically: a throwaway use_effect diagnostic showed the certified signal committing true/false correctly on each click, so state and reactivity were never broken. Only the checked visual was missing. The diagnostics were removed before this commit.

Fix

Re-assert the accent fill and drop the border on :checked (checked:bg-accent checked:border-transparent) so the white checkmark has contrast in both themes. One-line change in the shared component fixes all checkboxes at once.

Test

Submit Timesheet -> click the certify checkbox: the box fills accent with a visible white check and Submit for Approval enables. Same for the billable checkboxes on the time-entry create and edit forms.

🤖 Generated with Claude Code

## Problem Clicking the timesheet **certify** and **billable** checkboxes toggled the state but showed no checkmark: the box drew only the accent focus ring, never a check. Reported under PMS-577 (and the earlier PMS-571 / PMS-552 billable reports stem from the same cause). ## Root cause The bug is in the shared `Checkbox` component, so every checkbox in the app is affected. The component set `bg-surface` on the `<input>`. The @tailwindcss/forms base layer paints a checked box as a white checkmark SVG over a `currentColor` (accent) background-color. The `bg-surface` utility outranks that base `:checked` rule and pinned the background to the theme surface color. In light mode `--surface` is `#ffffff`, so the white checkmark rendered white-on-white and was invisible. In dark mode (`--surface` `#1e293b`) it happened to show, which is why this slipped through. Confirmed empirically: a throwaway `use_effect` diagnostic showed the `certified` signal committing `true`/`false` correctly on each click, so state and reactivity were never broken. Only the checked visual was missing. The diagnostics were removed before this commit. ## Fix Re-assert the accent fill and drop the border on `:checked` (`checked:bg-accent checked:border-transparent`) so the white checkmark has contrast in both themes. One-line change in the shared component fixes all checkboxes at once. ## Test Submit Timesheet -> click the certify checkbox: the box fills accent with a visible white check and Submit for Approval enables. Same for the billable checkboxes on the time-entry create and edit forms. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

longjacksonle added 1 commit

2026-06-30 17:07:29 +02:00

fix(forms): paint checkbox checkmark on :checked (PMS-577)

Check / fmt + clippy + tests (pull_request) Failing after 1s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

44eb3a6ea8

The shared Checkbox set `bg-surface` on the input. The @tailwindcss/forms base layer paints a checked box as a white checkmark SVG over a `currentColor` (accent) fill, but the `bg-surface` utility outranks that base rule and held the background at the theme surface color. In light mode `--surface` is `#ffffff`, so the white checkmark rendered white-on-white and was invisible: clicking toggled state (signal confirmed via diagnostic) but no checkmark appeared. Reported on the timesheet certify and billable checkboxes; the cause was the shared component, so every checkbox was affected.

Re-assert the accent fill and drop the border on `:checked` (`checked:bg-accent checked:border-transparent`) so the white checkmark has contrast in both light and dark themes. One-line component change fixes all checkboxes.

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

longjacksonle scheduled this pull request to auto merge when all checks succeed

2026-06-30 17:10:04 +02:00