Uh oh!
There was an error while loading. Please reload this page.
fix(ui): finish frontend-audit P0 token migration (closes #103, #104) - #307
Conversation
Finish the frontend-audit P0 token migration by replacing the last raw brand-green hex literals on main with the existing design tokens: - globals.css: add --brand-forest-hover (#155A35), the hover-darken of the base forest, for primary-forest button :hover states. - (public)/page.tsx: the beta-submit button's onMouseEnter now sets var(--brand-forest-hover) instead of the raw #155A35 — matching its onMouseLeave, which already used a token. Clears the last #155A35 literal (#103's AC2). - HowItWorks.tsx: the seed-SVG stem / left-leaf / tip-bud used raw #1B6C42 in static fill/stroke attributes; switch to var(--brand-forest) to match the ~20 other var(--brand-forest) sinks already in the same file. Clears the last #1B6C42 literals (#104's AC1). Value-preserving: every swap resolves to the identical hex, so there is no visual change — this is pure token hygiene that lets #103 and #104 close with every acceptance box literally satisfied. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughA new ChangesBrand forest tokenization
Estimated code review effort: 1 (Trivial) | ~3 minutes Possibly related issues
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
Deploying with |
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs | frontend-staging | c914cdf | Commit Preview URL Branch Preview URL | Jul 03 2026, 01:58 AM |
AndresL230
left a comment
There was a problem hiding this comment.
Reviewed — approving. Verified the two subtle bits: var() in SVG presentation attributes resolves correctly (empirical headless-Chromium check + the same pattern already shipping in SproutSVG and ~6 other components), and the framer-motion color-interpolation hazard doesn't apply since the three swapped elements only animate pathLength/scale. Landing scope is safe (.landing-page/.public-surface never redefine :root tokens), and the post-PR sweep confirms zero raw brand-green hex literals outside globals.css/lib/brand.ts, so #103/#104 close with their ACs literally satisfied.
FYI (out of scope): ~17 rgba(27,108,66,…) alpha-tint literals remain across the landing/onboarding files — rgb-form, so outside the hex ACs; natural fodder for the token-unification work.
🤖 Generated with Claude Code
Uh oh!
There was an error while loading. Please reload this page.
What & why
Closes out the P0 wave of the Frontend UI audit (#113). Verifying #102/#103/#104 against
main(f472300) showed the anti-patterns are essentially eliminated already — but #103 and #104 each had a handful of raw brand-green hex literals still lingering, which their acceptance criteria explicitly call out. This PR clears those last literals so both issues close with every box literally satisfied.Value-preserving: every swap resolves to the identical hex via an existing token, so there is no visual change — pure token hygiene.
Closes#103
Closes#104
Verification against acceptance criteria (on
main)mainbackdrop-filter/blur glass; solid surfaces; keep radial washesbackdrop-filter;.glass-*render as opaque--bg-panel(globals.css:601documents the removal); onlyblur()uses are the allowed.sapling-mesh-blob/AmbientOrbsatmospherebg-clip-text;#2D8F5C/#155A35literals gone; headings solidbg-clip-text;#2D8F5Calready folded into--brand-forest-bright. ❌ one raw#155A35left ((public)/page.tsx:1154beta-submit hover)#155A35→--brand-forest-hover#1B6C42single token, 0 raw literals;--state-*statuses; dedup--brand-*/rarity--brand-forestcanonical +--state-*defined + no inline graph-status hex + old--brand-primary/success/...fully removed + rarity single block. ❌ 3 raw#1B6C42left inHowItWorks.tsx:45/52/65var(--brand-forest)(matches the ~20var(--brand-forest)sinks already in that file)Changes
globals.css— add--brand-forest-hover: #155A35(hover-darken of the base forest, for primary-forest button:hover).(public)/page.tsx— beta-submitonMouseEntersetsvar(--brand-forest-hover)instead of raw#155A35(itsonMouseLeavealready used a token).HowItWorks.tsx— seed-SVG stem / left-leaf / tip-bud staticfill/strokenow usevar(--brand-forest). These are static attributes (onlypathLength/scaleanimate, not color), sovar()resolves fine — same pattern as lines 97/104 in the same file.Not in scope (noted for follow-up)
HowItWorks.tsx:59right-leaffill="#2d8a47"— a distinct decorative 2-tone-foliage green (not#1B6C42), outside [P0] Consolidate the brand greens into design tokens #104's AC. Left as-is; can be tokenized in a later polish pass if desired.Test plan
npm ci+ build/lint) is the gate — all changes are string-value swaps mirroring patterns already compiling in the same files, with no type or identifier changes.🤖 Generated with Claude Code
Summary by CodeRabbit