Repository navigation
fix(webui): use theme-aware semantic colors - #6041
Conversation
italic-jinxin
added
size: L
|
@claude review |
github-actions
Bot
added
size: M
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe frontend replaces fixed emerald and iron color utilities with v2 semantic CSS variables, updates outline and danger button variants, adjusts the light-theme accent token, and adds static token and cross-theme contrast checks. ChangesSemantic theme color migration
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant SmokeTest
participant RebornV2Page
participant BrowserStyles
participant ContrastHelpers
SmokeTest->>RebornV2Page: Set light theme and expose target controls
RebornV2Page->>BrowserStyles: Read computed foreground/background styles
BrowserStyles-->>ContrastHelpers: Return colors and ancestor backgrounds
ContrastHelpers-->>SmokeTest: Calculate effective colors and WCAG contrast
SmokeTest->>RebornV2Page: Switch dark theme and validate target controls
SmokeTest->>RebornV2Page: Toggle skill setting and inspect success banner
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Biome (2.5.3)crates/ironclaw_webui_v2/frontend/src/styles/app.cssFile contains syntax errors that prevent linting: Line 2: Tailwind-specific syntax is disabled.; Line 4: Tailwind-specific syntax is disabled. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces hardcoded color classes with theme-aware CSS variables across various frontend components to support consistent styling and contrast compliance. It also introduces a static test to prevent future regressions of hardcoded colors and an E2E smoke test to verify WCAG AA contrast ratios in both light and dark themes. The review feedback suggests improving path resolution in the new test file using node:path's join function for platform independence, and adding a data-testid to the skill action result container to make the E2E test selector more robust and less fragile.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@crates/ironclaw_webui_v2/frontend/src/styles/theme-colors.test.ts`:
- Around line 22-24: Broaden the fixed-emerald detection in the theme-color
guard to cover all Tailwind utility prefixes that can reference emerald,
including ring, gradient, divide, fill, stroke, decoration, outline, shadow,
accent, and caret alongside the existing bg, border, and text prefixes. Update
the regular expression in the test so any matching emerald shade is added to
violations.
- Around line 20-30: Add a scanned-file count in the test around
productionTypeScriptFiles and assert that at least one file was discovered
before validating violations. Keep the existing utility checks and
assert.deepEqual(violations, []) behavior unchanged.
In `@tests/e2e/scenarios/test_reborn_webui_v2_smoke.py`:
- Around line 174-176: Update the cancel_button locator to use the first
matching Cancel button, consistent with the other locators in this test, so
visibility and readability assertions do not fail under Playwright strict mode
when multiple matches exist.
- Around line 217-221: Add a dedicated data-testid to the success banner
rendered by the restart-banner component, then replace the brittle class-based
locator in the smoke test with the corresponding helpers.SEL_V2 selector. Define
the SEL_V2 hook using the repository’s existing selector conventions and
preserve the visibility and readability assertions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 83f2b63a-4015-4a41-9cb3-062c761d03f6
📒 Files selected for processing (18)
crates/ironclaw_webui_v2/frontend/src/components/slack-channel-picker.tsxcrates/ironclaw_webui_v2/frontend/src/components/slack-setup-panel.tsxcrates/ironclaw_webui_v2/frontend/src/design-system/button.test.tsxcrates/ironclaw_webui_v2/frontend/src/design-system/button.tsxcrates/ironclaw_webui_v2/frontend/src/pages/automations/components/automation-detail-panel.tsxcrates/ironclaw_webui_v2/frontend/src/pages/automations/components/automation-recent-runs.tsxcrates/ironclaw_webui_v2/frontend/src/pages/automations/components/automations-empty-state.tsxcrates/ironclaw_webui_v2/frontend/src/pages/automations/lib/automations-presenters.tscrates/ironclaw_webui_v2/frontend/src/pages/chat/components/message-bubble.test.tscrates/ironclaw_webui_v2/frontend/src/pages/chat/components/message-bubble.tsxcrates/ironclaw_webui_v2/frontend/src/pages/chat/components/tool-activity.tsxcrates/ironclaw_webui_v2/frontend/src/pages/extensions/components/pairing-section.tsxcrates/ironclaw_webui_v2/frontend/src/pages/projects/components/project-filesystem-panel.tsxcrates/ironclaw_webui_v2/frontend/src/pages/projects/components/projects-grid.tsxcrates/ironclaw_webui_v2/frontend/src/pages/settings/components/restart-banner.tsxcrates/ironclaw_webui_v2/frontend/src/pages/settings/components/skills-tab.tsxcrates/ironclaw_webui_v2/frontend/src/styles/theme-colors.test.tstests/e2e/scenarios/test_reborn_webui_v2_smoke.py
Coverage ratchetReborn integration-tier coverageLine coverage (Reborn crates): 85.56% — 302422 / 353446 lines Per-crate breakdown (63 crates, lowest-covered first)
This table itself is informational and never gates the PR on its own — not the percentage, not the per-crate holes, not the 0-coverage callout. A separate coverage ratchet (dry-run until enforce=true; see tests/integration/coverage-floor.toml) can fail the build on specific configured floors. Exemptions (3 entry/entries excluded from the accounting above)
|
|
🚅 Deployed to the ironclaw-pr-6041 environment in ironclaw-ci-preview
|
…e-contrast # Conflicts: # crates/ironclaw_webui_v2/frontend/src/design-system/button.test.tsx
hanakannzashi
left a comment
hanakannzashi
left a comment
There was a problem hiding this comment.
P2: The outline button still misses WCAG AA in interactive states.
For the Registry Install button on --v2-surface-soft: #eef4fa, the 12px --v2-accent-text: #146fae text is approximately 4.39:1 on the hover background and 4.09:1 on the active background, both below the required 4.5:1. The current E2E contrast assertion checks only the idle state, so CI remains green.
Please darken the text or reduce/change the interactive background mix, and add hover plus pressed-state contrast assertions.
Good catch — fixed in I darkened the light-theme
I also extended the Playwright E2E test to exercise the real Registry Install button in idle, hover, and mouse-down pressed states. The test reproduced the original hover failure at 4.39:1 before the fix and now passes for all three states. |
hanakannzashi
left a comment
hanakannzashi
left a comment
There was a problem hiding this comment.
Re-reviewed current head 1e83252. The previous outline interaction-state contrast finding is resolved. Against the actual Registry card background, contrast is approximately 5.68:1 idle, 5.15:1 hover, and 4.80:1 active, all above WCAG AA 4.5:1. The new browser assertion correctly exercises and distinguishes hover/pressed backgrounds. With TZ=UTC, all 728 frontend tests pass; typecheck and current CI are green. No remaining actionable findings.
This branch was successfully deployed
2 participants
Summary
iron-500/iron-600utilities to readable semantic colors across the WebUI v2 frontend.Linked Issue
Closes #6039
Validation
TZ=UTC corepack pnpm testcorepack pnpm typecheckcorepack pnpm lintcorepack pnpm buildcargo test -p ironclaw_webui_v2 --features webui-v2-betacargo clippy -p ironclaw_webui_v2 --all-targets --all-features -- -D warningsscripts/pre-commit-safety.shgit diff --checkSecurity Impact
No. This changes frontend presentation tokens only and does not alter authentication, authorization, request handling, or runtime behavior.
Database Impact
No schema, migration, or persistence changes.
Blast Radius
Limited to WebUI v2 button, status, success-state, and secondary-text styling.
Rollback Plan
Revert this PR to restore the previous WebUI v2 color utilities.
Review track: B