Fix dark mode alert styling

[kwakayama]

What changed

• add dark-mode alert fill tokens derived from each semantic status color and the dark background
• keep alert text, icons, and actions on the shared theme foreground instead of applying a separate dark-mode inversion
• add regression coverage for light/dark alert tokens and foreground behavior
• refresh the generated framework candidate list

Why

Alert surfaces reused the light pastel fills in dark mode. Their child content then mixed dark-mode background text with independently styled foreground actions, producing the washed-out, inconsistent error banner shown in chat.

The light-mode values remain unchanged. Dark mode now uses muted status-tinted surfaces with a consistent light foreground.

Visual verification

Matched 1200×700 browser renders were compared with the same alert text and layout:

• before: light error fill rgb(236, 211, 209) with dark message text and a light Retry action
• after: dark muted red oklch(0.326059 0.0396107 25.0399) with message and Retry both using rgb(240, 239, 233)
• pixel diff: 3.68%, confined to the alert and comparison label; geometry was unchanged
• browser console/errors: clean in the comparison harness

The repository Storybook currently fails on main before rendering this story because Vite externalizes node:async_hooks; the comparison harness imported the real generated token CSS and used the alert's exact token bindings.

Validation

• pre-push checks: format, lint, typecheck, and full unit suite passed with the repo-pinned Deno 2.7.7
• targeted alert, design-token, and chat error-banner tests: 10 steps passed
• generated artifact checks passed
• verify:quick reached the existing API reference check, which reports the checked-in API docs are stale across all 42 module groups on main

Summary by CodeRabbit

• Bug Fixes

  • Improved alert color handling across light and dark modes.
  • Alert messages now consistently use the theme foreground color for better readability.
  • Dark-mode alert backgrounds now correctly reflect warning, error, success, and informational states.

• Tests

  • Added coverage to verify alert colors and dark-mode styling.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e41ec46f-0b09-40b4-9843-69cf1a09bf3f

📥 Commits

Reviewing files that changed from the base of the PR and between 0935bb9 and e02a9b8.

📒 Files selected for processing (1)

• docs/api-reference/veryfront/ui.md

---

📝 Walkthrough

Walkthrough

Alert dark-mode tokens now use status-color mixes with the dark background. Alert text, icons, and content now use the theme foreground. Tests cover generated tokens and server-rendered error alerts.

Changes

Alert color modes

Layer / File(s)	Summary
Dark-mode alert tokens src/react/components/ui/design-tokens.ts, src/react/components/ui/design-tokens.test.ts	Dark-mode warning, error, success, and informational alert tokens use 18% status-color mixes with --background. Tests verify light and dark generated token values.
Alert foreground styling src/react/components/ui/alert.tsx, src/react/components/ui/alert.test.tsx, docs/api-reference/veryfront/ui.md	Alert, icon, and content styles no longer apply the dark background color as text color. Documentation and server-rendered error coverage reflect the mode-specific styling. The source reference for generateTokenCSS is updated.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: kojiwakayama

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: correcting alert styling in dark mode.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch agent/dark-mode-error-alert

---

_{Comment @coderabbitai help to get the list of available commands.}

[kwakayama]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0935bb925b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Keep status badges legible with the new dark fills

In dark mode, these shared tokens also provide the backgrounds for the success, warning, and destructive Badge variants in badge.tsx:19-21, while their text remains var(--status-*). Mixing only 18% of that same status color into #282828 makes the destructive and success combinations approximately 2.3:1 and 2.7:1 contrast, respectively, so badges become difficult to read even though alerts now use the light theme foreground. Use alert-specific dark surface tokens or update the badge foregrounds when applying these fills.

Useful? React with 👍 / 👎.

[kwakayama]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. You're on a roll.

Reviewed commit: e02a9b806c

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".