refactor(card-item): tokenize list-mode palette (cleanup Brief 1) #128

Merged

varutasu merged 1 commit from cleanup-brief-1-card-item-list-mode into main

2026-06-04 17:55:36 -04:00

varutasu commented

2026-06-04 17:49:43 -04:00

(Migrated from github.com)

Summary

Brief 1 of cleanup-card-item-list-and-share-modal-palette. Pure palette token sweep across components/CardItem.js list-mode (lines ~181-295). No structural changes, no glass-panel migration, no grid-mode edits.

Fixes a dark-mode rendering bug: list-mode was previously using text-gray-900/bg-purple-50/border-gray-200/etc. with no dark: variants, making it unreadable in dark theme.

Files changed

components/CardItem.js — list-mode only (L181-295). Net diff: +52 / -20.

Migration table

Original (Tailwind palette)	Replacement (token)
`border-purple-500 bg-purple-50 shadow-md` (selected)	`borderColor: var(--accent-ember)` + `backgroundColor: rgba(255,110,0,0.08)` + `boxShadow: var(--rim-light-inner)`
`border-gray-200 hover:border-gray-300 hover:shadow-sm` (default)	`borderColor: var(--border)` + `nav-item-hover` (ember-tinted hover from unify convoy)
`rounded-lg` (row + buttons)	`rounded-xl` (convoy consistency)
`bg-gray-200` (image placeholder)	`var(--bg-tertiary)`
`text-gray-400` ("No Image" fallback)	`var(--text-secondary)`
`text-gray-900` (card name)	`var(--text-primary)`
`text-gray-600` / `text-gray-500` (set / rarity / type)	`var(--text-secondary)`
`bg-blue-100 text-blue-800` (game badge)	`var(--bg-tertiary)` + `var(--text-primary)` + 1px ember border for visible delimiter
`text-green-600` (price)	`var(--accent-flame)`
`text-red-500 hover:text-red-600` (favorited heart)	`var(--accent-ember)`
`text-gray-400 hover:text-red-500` (unfavorited heart)	`var(--text-secondary)` + `nav-item-hover`
`text-blue-600 hover:text-blue-700 hover:bg-blue-50` (add-to-list)	`var(--accent-ember)` + `nav-item-hover`
`text-green-600 hover:text-green-700 hover:bg-green-50` (add-to-deck)	`var(--accent-flame)` + `nav-item-hover`

Decision: price color (warm vs semantic green)

Replaced text-green-600 with var(--accent-flame) (warm orange-red) rather than keeping a literal #16a34a. Rationale: the rest of the row is on the ember palette and a single warm-tone price tag reads as "primary value" rather than "positive delta from baseline". Easy to revert to the green literal if dark-mode reviewers prefer it.

Out of scope (per Brief 1 § Known constraints)

Grid-mode (L290+) untouched — different visual treatment, different brief.
The 5 remaining palette hardcodes in CardItem.js are all in grid-mode's getRarityEffects() (L150, L157, L172) + grid placeholder (L350, L359). Out of scope.

Acceptance criteria

sed -n '181,295p' components/CardItem.js | grep -nE 'bg-(purple|blue|gray|red|green)-[0-9]|text-(...)|border-(...)' → 0 matches.
npm run lint passes (1 pre-existing unrelated warning).
npm run test:run: 118/118 tests pass.

Test plan (manual — dark mode is critical)

Visit /cards or /my-cards in list view (toggle the view-mode switch).
Light mode: confirm row reads correctly with the new ember-tinted hover and selected states.
Dark mode: confirm every text label is legible (this is the bug fix); confirm selected row has visible delta against unselected; confirm hover state is visible.
Toggle bulk-select on a row; confirm the selected ember border + 8% ember background are clearly distinguishable.
Click the heart, "+", "deck" icons; verify the right ember/flame color is applied per icon role.

Convoy: .convoys/cleanup-card-item-list-and-share-modal-palette.md
Parallel sibling brief (PR coming next): Brief 2 — ShareModal.js interior token sweep.
Established the token migration pattern: PR #117 (design-sweep-pass).

Made with Cursor

## Summary Brief 1 of `cleanup-card-item-list-and-share-modal-palette`. Pure palette token sweep across `components/CardItem.js` list-mode (lines ~181-295). No structural changes, no glass-panel migration, no grid-mode edits. Fixes a dark-mode rendering bug: list-mode was previously using `text-gray-900`/`bg-purple-50`/`border-gray-200`/etc. with no `dark:` variants, making it unreadable in dark theme. ## Files changed - `components/CardItem.js` — list-mode only (L181-295). Net diff: **+52 / -20**. ## Migration table | Original (Tailwind palette) | Replacement (token) | | - | - | | `border-purple-500 bg-purple-50 shadow-md` (selected) | `borderColor: var(--accent-ember)` + `backgroundColor: rgba(255,110,0,0.08)` + `boxShadow: var(--rim-light-inner)` | | `border-gray-200 hover:border-gray-300 hover:shadow-sm` (default) | `borderColor: var(--border)` + `nav-item-hover` (ember-tinted hover from unify convoy) | | `rounded-lg` (row + buttons) | `rounded-xl` (convoy consistency) | | `bg-gray-200` (image placeholder) | `var(--bg-tertiary)` | | `text-gray-400` ("No Image" fallback) | `var(--text-secondary)` | | `text-gray-900` (card name) | `var(--text-primary)` | | `text-gray-600` / `text-gray-500` (set / rarity / type) | `var(--text-secondary)` | | `bg-blue-100 text-blue-800` (game badge) | `var(--bg-tertiary)` + `var(--text-primary)` + 1px ember border for visible delimiter | | `text-green-600` (price) | `var(--accent-flame)` | | `text-red-500 hover:text-red-600` (favorited heart) | `var(--accent-ember)` | | `text-gray-400 hover:text-red-500` (unfavorited heart) | `var(--text-secondary)` + `nav-item-hover` | | `text-blue-600 hover:text-blue-700 hover:bg-blue-50` (add-to-list) | `var(--accent-ember)` + `nav-item-hover` | | `text-green-600 hover:text-green-700 hover:bg-green-50` (add-to-deck) | `var(--accent-flame)` + `nav-item-hover` | ### Decision: price color (warm vs semantic green) Replaced `text-green-600` with `var(--accent-flame)` (warm orange-red) rather than keeping a literal `#16a34a`. Rationale: the rest of the row is on the ember palette and a single warm-tone price tag reads as "primary value" rather than "positive delta from baseline". Easy to revert to the green literal if dark-mode reviewers prefer it. ## Out of scope (per Brief 1 § Known constraints) - Grid-mode (L290+) untouched — different visual treatment, different brief. - The 5 remaining palette hardcodes in `CardItem.js` are all in grid-mode's `getRarityEffects()` (L150, L157, L172) + grid placeholder (L350, L359). Out of scope. ## Acceptance criteria - [x] `sed -n '181,295p' components/CardItem.js | grep -nE 'bg-(purple|blue|gray|red|green)-[0-9]|text-(...)|border-(...)'` → **0 matches**. - [x] `npm run lint` passes (1 pre-existing unrelated warning). - [x] `npm run test:run`: **118/118 tests pass**. ## Test plan (manual — dark mode is critical) - [ ] Visit `/cards` or `/my-cards` in list view (toggle the view-mode switch). - [ ] **Light mode**: confirm row reads correctly with the new ember-tinted hover and selected states. - [ ] **Dark mode**: confirm every text label is legible (this is the bug fix); confirm selected row has visible delta against unselected; confirm hover state is visible. - [ ] Toggle bulk-select on a row; confirm the selected ember border + 8% ember background are clearly distinguishable. - [ ] Click the heart, "+", "deck" icons; verify the right ember/flame color is applied per icon role. ## Related - Convoy: `.convoys/cleanup-card-item-list-and-share-modal-palette.md` - Parallel sibling brief (PR coming next): Brief 2 — `ShareModal.js` interior token sweep. - Established the token migration pattern: PR #117 (`design-sweep-pass`). Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 17:49:48 -04:00

(Migrated from github.com)

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tcg-vault	Ready	Preview, Comment	Jun 4, 2026 9:50pm

[vc]: #ggQI4PZpNy6TgjttarTKHroFBBpMJJvLMiWSbYfVYjM=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0L0FtZ0VyQW5vbUtCbVFramREZzIycEZkSjNlYTQiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1jbGVhbnVwLWJyaWVmLWJmYjQwNS1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWNsZWFudXAtYnJpZWYtYmZiNDA1LXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sInJvb3REaXJlY3RvcnkiOm51bGx9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTI4In0= The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/AmgErAnomKBmQkjdDg22pFdJ3ea4) | [Preview](https://tcg-vault-git-cleanup-brief-bfb405-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-cleanup-brief-bfb405-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 9:50pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=128" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>