Fix Save button text contrast in the block-reason editor

Bắt đầu với TaskFlow.Web/src/index.css:970-974 và kiểm tra quy tắc .block-editor .block-editor-save chỉ dành cho thao tác cảm ứng. Tiếp theo, so sánh các token giao diện và cách kết hợp với .t-badge-todo trong tasks.css. Kiểm tra độ tương phản được tính toán trong cả 16 tổ hợp giao diện và chế độ, đồng thời xác nhận Save vẫn là thao tác chính với chiều cao 44px và khoảng cách 8px. Thêm một khẳng định về hợp đồng nguồn trong journal.blocked-css.test.ts hoặc index.css.test.ts.

Groomed 2026-10-30, updated after splitting — ready for implementation.

Scope is now the Save button and the new --on-accent token. The audit of the other white-on-accent sites moved to #373, which is blocked by this issue.

Original Description

Found during manual device checks for #316 (PR #325). The checklist and results are on that issue.

Problem

On touch devices, the block-reason editor (BlockControls, used on the Journal and Tasks pages) shows a Save button. It is styled as white text on the theme's accent colour, which is below the 4.5:1 WCAG AA contrast minimum for its 14px text in most themes. In the dark themes the accent is a pastel, so the white label is hard to read.

Measured in Chromium with touch emulation, text contrast of the Save button by theme (computed colours, 4.5:1 is the minimum):

Theme	Dark mode	Light mode
Default	5.2 (pass)	5.2 (pass)
Rosé Pine	2.9	4.2
Catppuccin	2.1	4.9 (pass)
Tokyo Night	2.5	4.0
Dracula	2.4	5.2 (pass)
Nord	2.0	4.0
Gruvbox	2.5	5.7 (pass)
Kanagawa	2.8	3.8

Eleven of the sixteen theme and mode combinations fail. The Cancel button, the editor input and the sheet text all pass (5.1 or higher in every combination; the lowest is Tokyo Night in light mode).

Location

TaskFlow.Web/src/index.css, rule .block-editor .block-editor-save, inside the (hover: none), (pointer: coarse) block (now at index.css:1045-1049; the original said 970-974):

.block-editor .block-editor-save {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

Suggested approach

Pick a label colour per theme instead of a fixed white. Options:

• Reuse an existing pairing, for example background: var(--accent-soft); color: var(--accent-ink) as .t-badge-todo does in tasks.css, keeping the accent border. Check that it passes 4.5:1 in all 16 combinations.
• Or add a per-theme "text on accent" token next to --accent and --accent-ink in index.css, and use it here.

Keep the 44px minimum height, the 8px gap and the touch-only scope. Do not change the shared tokens' existing values.

Out of scope (original)

• The muted text token --muted is also below 4.5:1 in a few themes. That is an app-wide token and a separate decision.

---

_{Created with Claude Code from the manual device checks for #316}

---

User Story

As a TaskFlow user on a touch device, I want the Save button in the block-reason editor to have readable text in every theme and in both light and dark mode, so that I can see and confirm the primary action when I record why a task is blocked.

Location notes (verified 2026-10-30):

• The shared Cancel/Save rule is at index.css:1033-1044, and the Save rule at index.css:1045-1049, inside the touch block.
• tasks.css:1222-1227 repeats the Cancel/Save sizing for the Tasks page (min-height and min-width only, no colours).
• BlockControls renders the buttons only when touch is true (components/BlockControls.tsx, Save at line 94). It is used in components/journal/TodosSection.tsx and components/TaskListRow.tsx.
• No --on-accent token exists today (projects.css:138 says so).

Decision for the implementer

Measure first, then choose.

• Option A: background: var(--accent-soft); color: var(--accent-ink) with the accent border. It reuses existing pairings (.t-badge-todo, .t-btn.is-active) but may not pass in every combination (rough, unmeasured estimates: about 3.6:1 for light Kanagawa, 3.9:1 for light Rosé Pine). Save would differ from Cancel only by a tinted background and the accent border, because neither sets font-weight.
• Option B: add a new per-theme text-on-accent token --on-accent next to --accent and --accent-ink. Use dark ink on the pastel dark-theme accents and white on light ones. It guarantees the contrast and keeps Save a solid accent button. It means editing the :root and html.is-dark defaults and the 8 named theme blocks (each with a light and an .is-dark block, about index.css:86-447).

Rule: if Option A fails 4.5:1 in any combination, use Option B for all themes. A mixed approach is not allowed. #373 (the other white-on-accent sites) needs Option B's token, so Option B is the likely outcome.

Acceptance Criteria

1. Given any of the 8 themes in light or dark mode (16 combinations), when the block-reason editor is open on a touch device, then the Save label contrast against the Save background is at least 4.5:1, checked with computed colours.
2. Given the default theme in light and dark mode, when Save is rendered, then it still passes at 4.5:1 or better (currently 5.22).
3. Given the editor is open, when Save and Cancel are compared, then Save differs visually from Cancel in at least background and border colour, so it still reads as the primary action. Cancel keeps its current 5.1+ contrast.
4. Given the editor is open on a touch device, when Save is rendered, then the minimum height is 44px, the gap is 8px, and the styling applies only inside the touch media block. The existing tests at index.css.test.ts (around 320-333) and tasks.css.test.ts (around 352-355) still pass.
5. Given the CSS source, when the source-contract test runs (in journal.blocked-css.test.ts or index.css.test.ts), then it asserts the Save rule no longer pairs color: #fff (or white) with background: var(--accent).
6. Given the existing tokens, when the change is made, then the existing values of --accent, --accent-soft and --accent-ink are unchanged.
7. Given Option B is chosen, then --on-accent has a value in :root, in html.is-dark and in each of the 16 theme blocks, so no combination falls back incorrectly, and a source-contract test asserts the token is defined for every theme block.
8. Given the Save rule has specificity 0-2-0, then it still beats the .journal-page button reset (0-1-1) on the Journal page, and hover, active and focus states of Save keep contrast.
9. Given the finished change, then npm run type-check, npm run test -- --run --coverage (80% line threshold) and npm run lint pass.

Edge Cases

• A touch-capable laptop that matches (pointer: coarse) in only some cases: the Save rule stays touch-scoped.
• Theme switching at runtime: PrefsContext toggles is-dark and data-theme, and the default theme has no data-theme.
• Where a dark ink is used on pastel accents, check that Save's border and focus ring still read as one control.

Out of Scope

• The other white-on-accent sites (nav link, settings segment button, tasks primary button, journal check, log add, note save, projects): #373.
• The --muted token (separate app-wide decision).
• Changing the existing values of --accent, --accent-soft or --accent-ink.
• Showing the Save/Cancel buttons on non-touch devices.
• Any redesign of Save/Cancel beyond what is needed to meet contrast and keep Save visually distinct.