Repository navigation
ENG-994: webapp_v2 pages take their colors from the theme, with a test that stops hand-picked colors - #2106
Conversation
Migration Safety AnalysisThis PR no longer changes database migrations. Safe to deploy to sandbox. |
📋 API ChangelogAPI Changelog unknown vs. unknownAPI ChangesGET /sessions
GET /sessions/{session_id}
|
|
✅ Build Completed with Success, Version=2106.0.0-gb7e1b10 |
|
✅ Build Completed with Success, Version=2106.0.0-g908282c |
|
✅ Build Completed with Success, Version=2106.0.0-g3590b21 |
PR Summary by QodoTheme-driven colors and feature-flagged React session details
AI Description
Diagram
High-Level Assessment
Files changed (201)
|
3590b21 to
3686e25
Compare
|
✅ Build Completed with Success, Version=2106.0.0-g3686e25 |
|
✅ Build Completed with Success, Version=2106.0.0-gfdc4876 |
fdc4876 to
2a9c30c
Compare
|
✅ Build Completed with Success, Version=2106.0.0-g2a9c30c |
Paper variants, the Divider and Modal defaults, role tokens and the terminal palette. ENG-938 used them first; ENG-994 now merges first. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ps hand-picked colors Status text uses the CLJS weight (green-7, red-7, blue-8, amber-8, orange-9). The guard is test/themeColors.test.js. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…eps its overlay Two pages built shade 6 in a template; they use the palette's filled color. The connection icon tile takes --hoop-overlay-faint again. postcss stays as on main. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
ENG-913 added it with two gray shades; the guard caught them on rebase. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2a9c30c to
3dbd898
Compare
Code Review by Qodo
1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
…multi-line styles The guard shares one color-function list for CSS and JS, sees a color split across lines, and counts a theme-exception mark only in a comment. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Code review by qodo was updated up to the latest commit 05ec649 |
|
✅ Build Completed with Success, Version=2106.0.0-g05ec649 |
📝 Description
Pages in webapp_v2 now pick a component, a variant or a role token, never a shade or a literal color. A test fails when someone adds one back. Pages that hand-picked
gray-Nread darker than their CLJS original, because the theme's gray scale starts at Radix step 3.📣 User-facing impact
Dividertakes the soft border.c="green". Mantine painted it with the filled shade, which fails WCAG AA on white (amber 2.2:1, yellow 1.6:1). The theme now uses the weight of the CLJS app's Radix soft text: green-7, red-7, blue-8, amber-8 and orange-9. Yellow text uses amber-8. This shows on every page, e.g. the "Update license" link, the "experimental" badges and the Approvals "Pending" badge (lead's decision).🔗 Related Issue
ENG-994
🚀 Type of Change
📋 Changes Made
test/themeColors.test.jsscanssrc/outsidecomponents/andtheme.js.'gray.6',--mantine-color-x-N,theme.colors.x[N], a shade built in a template (${x}.6,x + '.6'), a hex or anrgba()fails.theme-exception:and why. On main there is one: the first-run brand panel (2 rules). ENG-938 adds the RDP stage and canvas.Papersurface variants (subtle,outline,muted,strong,accent), theDividerandModaldefaults, role tokens (--hoop-surface-*,--hoop-border-*) andCLJS_PATTERNS.md.src/componentsandtheme.jsout of the cleanup, because colors live there; these additions are what moves colors out of the pages:--mantine-color-*-textand-light-color);Papervariantsinfoandwarning,Codevariantsaccent,accent-outlineandterminal, and Pillmanaged.Callouttakes atoneinstead of a color. Icon boxes useThemeIcon.webapp_v2/CLAUDE.mdandCOMPONENTS.mdstate the rule and the new variants, and point to the test. The guard usespostcss, already a devDependency.🧪 Testing
mainagainst this branch, side by side: two gateways from the samemainbinary on one database, so only the webapp differs. 39 React pages captured. Most differ only in the sidebar and header; Webhooks, Server logs, Resources, Protection rules and Sidecar details show lighter lines or surfaces.05ec64996(rebased on main after ENG-913, plus the Qodo review fixes):npm run lint,npm test(279),npm run build. On rebase, the Resources status dot fix moved toRoleSummary(ENG-912); the managed attribute pill keeps ENG-913's new look (indigo-0 fill, indigo-7 text) through the Pill theme; the guard caught two gray shades in the new resource setup wizard, now theme tokens.fdc4876e7. The lead accepted the two one-step changes above.📸 Screenshots (if applicable)
Left:
main. Right: this branch. Same database.1. Eight places, side by side. A caption names what to look at: status text, lighter lines, the terminal color, a modal dimming at 40%.
Full-size video (MP4): 1-pages-side-by-side.mp4
2. The guard. A shade picked by hand, or built in a template, fails the test with file and line. The branch passes.
3. Status text is readable. Approval history and the Event catalog: green-7, red-7, blue-8, amber-8.
4. Lines are lighter. Webhooks rows and the Sidecar details divider take the soft border.
✅ Checklist
📄 Additional Notes
Based on main. It merges before ENG-938 (#2099), which is now stacked on it. No feature flag: colors only, no behaviour change.
🤖 Generated with Claude Code