The rest of the dark-only colours: banners, status words, entry types, error text (#794, #775) #801

Merged

claude-bot merged 4 commits from build/794-dark-only into main 2026-09-24 04:05:13 +00:00

Conversation 0 Commits 4 Files changed 10 +101 -84

claude-bot commented 2026-09-24 03:10:13 +00:00

Collaborator

Copy link

Closes #794. Closes #775. This finishes the light-mode contrast work #793 started.

What changed

• About twenty full-width banners in Admin, the campaign page and the wiki front. These are error, success, warning, the Discord-failing alert, the archived notice, imported member stubs, and the new-API-key box. Each was a translucent dark wash with pale text and no light pair. Each now has bg-{c}-50 border-{c}-200 text-{c}-800 (or 700 for body text), with the dark look kept behind dark:.
• Bare status words in the Quest Log, Prep's arc and thread legends, the Loot Ledger's gold sign, and VotingGrid's winning score: text-{c}-700 dark:text-{c}-400.
• Wiki entry-type colours (entryTypes.js, 13 types) now carry light and dark pairs. WikiArticle.jsx's five inline-link sites took only split(" ")[0], which would have silently dropped the dark token. They now take both text tokens.
• VotingGrid's unvoted-cell grey measured 2.66:1 in dark mode. It is now dark:text-gray-400, merged with #793's hover colours.
• Error lines and delete buttons in the Loot Ledger and the wiki front were bare text-red-400 at about 3:1 on white. They are now text-red-700 dark:text-red-400. The wiki front's amber-600 text and its white-on-amber count badges move to amber-700.

How it was checked

• Contrast was computed from Tailwind v4's own oklch palette with CSS Color 4 gamut mapping, in both modes, against the surface each colour actually sits on. Translucent banners were composited first.
• Every pair is at least 4.5:1. The lowest is the amber-700 body text on amber-50, at 4.86:1.
• Colour meaning is unchanged throughout.

Full frontend suite on the merged tree: 142 files, 1994 tests passing. Lint: 0 errors, and the warning count is unchanged at 228.

🤖 Generated with Claude Code

Closes #794. Closes #775. This finishes the light-mode contrast work #793 started. ## What changed - **About twenty full-width banners** in Admin, the campaign page and the wiki front. These are error, success, warning, the Discord-failing alert, the archived notice, imported member stubs, and the new-API-key box. Each was a translucent dark wash with pale text and no light pair. Each now has `bg-{c}-50 border-{c}-200 text-{c}-800` (or 700 for body text), with the dark look kept behind `dark:`. - **Bare status words** in the Quest Log, Prep's arc and thread legends, the Loot Ledger's gold sign, and VotingGrid's winning score: `text-{c}-700 dark:text-{c}-400`. - **Wiki entry-type colours** (`entryTypes.js`, 13 types) now carry light and dark pairs. `WikiArticle.jsx`'s five inline-link sites took only `split(" ")[0]`, which would have silently dropped the dark token. They now take both text tokens. - **VotingGrid's unvoted-cell grey** measured 2.66:1 in dark mode. It is now `dark:text-gray-400`, merged with #793's hover colours. - **Error lines and delete buttons** in the Loot Ledger and the wiki front were bare `text-red-400` at about 3:1 on white. They are now `text-red-700 dark:text-red-400`. The wiki front's amber-600 text and its white-on-amber count badges move to amber-700. ## How it was checked - Contrast was computed from Tailwind v4's own `oklch` palette with CSS Color 4 gamut mapping, in both modes, against the surface each colour actually sits on. Translucent banners were composited first. - Every pair is at least 4.5:1. The lowest is the amber-700 body text on amber-50, at 4.86:1. - Colour meaning is unchanged throughout. Full frontend suite on the merged tree: 142 files, 1994 tests passing. Lint: 0 errors, and the warning count is unchanged at 228. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

claude-bot added 3 commits 2026-09-24 03:10:14 +00:00

fix(frontend): more dark-only colours — alert banners, bare status words, VotingGrid grey (#794) ... 7de25d64d8

Follows #793's sweep, for colours outside that PR's chip/badge scope:

- About twenty full-width error/success/warning banners in Admin,
  CampaignDetail and WikiFront had no light-mode pair (`bg-red-900/40 …
  text-red-300` and similar `/20`-`/60` variants), so light mode showed pale
  text on a translucent dark wash. Each now has a light pair (e.g. `bg-red-50
  border-red-200 text-red-800`) with the original dark look kept behind
  `dark:`.
- Bare status words with no light pair (`text-green-400`, `text-red-400`)
  in QuestLog, CampaignPlanning's arc/thread status legends, LootLedger's
  gold amounts, the wiki's entryTypes.js colour map, and VotingGrid's
  winning-slot score now have one too. WikiArticle.jsx's inline wiki-link
  colour picks its class from entryTypes.js and used `.split(" ")[0]`,
  which would have silently dropped the new dark: token; it now grabs both
  text tokens instead.
- VotingGrid's base grey for an unvoted cell, `text-gray-500
  dark:text-gray-600`, measured 2.66:1 in dark mode; it's now
  `dark:text-gray-400` (7.73:1), the same pair #793 established elsewhere.

Every pair was checked by computing WCAG contrast from Tailwind v4's oklch
palette in both modes, against the surface it actually sits on; translucent
banners were composited over the page background first. Colour meaning is
unchanged throughout — no behaviour or layout changes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/main' into build/794-dark-only ... afff6eef91

# Conflicts:
#	CHANGELOG.md
#	webapp/frontend/src/components/VotingGrid.jsx

fix(frontend): the wiki front's and the Loot Ledger's red and amber text get a light pair (#794) ... 8c71c2c260

Bare text-red-400 on white is about 3:1. The error lines and delete
buttons become text-red-700 dark:text-red-400 (6.5:1 light, 7.0:1
dark). The wiki front's amber-600 text and its white-on-amber-600 count
badges move to amber-700 (4.9:1 even on amber-50).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

rbrooks added 1 commit 2026-09-24 03:40:07 +00:00

Merge remote-tracking branch 'origin/main' into build/794-dark-only ... 8951994425

# Conflicts:
#	CHANGELOG.md

claude-bot merged commit af23747988 into main 2026-09-24 04:05:13 +00:00

claude-bot referenced this pull request from a commit 2026-09-24 04:05:13 +00:00

Merge PR #801: the rest of the dark-only colours — banners, status words, entry types, error text (#794, #775)

claude-bot referenced this pull request 2026-09-24 04:07:41 +00:00

Build lane 3: the campaign core and Settings (CAMP-1 to CAMP-17, SH-7) #729

claude-bot referenced this pull request 2026-09-24 04:11:55 +00:00

Build lane 4: sessions (SESS-1 to SESS-7) #730

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

backend

Issue related to the backend

  

bot

Issue related to the bot

  

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

frontend

Issue related to the frontend

  

help wanted

Need some help

  

invalid

Something is wrong

  

question

More information is needed

  

recording

Issue related to the recording system

  

security

Security hardening / vulnerability work

  

wontfix

This won't be fixed

No labels

backend

bot

bug

duplicate

enhancement

frontend

help wanted

invalid

question

recording

security

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

rbrooks/Quest-Board!801

No description provided.