Skip to content

Readable text on custom card backgrounds (#77) - #90

Merged
SlyDave merged 1 commit into
mainfrom
frontend/issue-77
Jul 27, 2026
Merged

Readable text on custom card backgrounds (#77)#90
SlyDave merged 1 commit into
mainfrom
frontend/issue-77

Conversation

@SlyDave

@SlyDave SlyDave commented Jul 27, 2026

Copy link
Copy Markdown
Owner

Summary

  • Apply contrastTextColour to task card title and description when a custom background is set.
  • Leave theme text colours when background is none; contrast follows card background luminance, not theme alone.

Closes #77

Acceptance criteria

  • Custom background → title and body use light/dark contrast from luminance — taskCardContrastText + inline colour on title and description.
  • Background none → normal theme colours — helper returns null; text-highlighted / text-muted remain.
  • Light and dark theme with custom background → contrast from card background — colour is computed from the hex background only.

Test plan

  • Card with light background shows dark title/body
  • Card with dark background shows light title/body
  • Card with no background uses theme text colours in light and dark mode

Co-authored-by: Cursor <cursoragent@cursor.com>

@SlyDave SlyDave left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

QA verdict: approved

Verified against #77 acceptance criteria on frontend/issue-77 (local Nuxt at :3077) plus unit tests (taskCardContrast.test.ts 3/3). Seeded todo.tasks.v1 with light (#ffffff), dark (#000000), and none backgrounds.

Criterion Result Evidence
Custom bg → luminance contrast on title/body Pass White card → #111827 / rgb(17,24,39); black card → #f9fafb / rgb(249,250,251)
Background none → theme colours Pass No inline colour; theme oklch(...) classes remain
Custom bg contrast ignores theme alone Pass Under dark theme, white card still uses dark contrast text

CI was in progress at review start; unit + browser checks cover the ACs.

@SlyDave SlyDave added the qa:approved QA verified this against the acceptance criteria and it passed label Jul 27, 2026
@SlyDave
SlyDave merged commit 4f3cf2e into main Jul 27, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

qa:approved QA verified this against the acceptance criteria and it passed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Readable text on custom card backgrounds

1 participant