Uh oh!
There was an error while loading. Please reload this page.
Wave 2 Phase 1 — design-system consolidation (#104, #102, #103, #106, #112) - #213
Merged
Conversation
…ate-* (#104) Add canonical --brand-forest (#1B6C42) to :root and migrate all 55 raw literals across globals.css, page.tsx, HowItWorks.tsx, OnboardingFlow.tsx and SignInModal.tsx. CSS / DOM-style / SVG-attribute sinks use var(--brand-forest); two non-CSS sinks (framer-motion fill interpolation, hex-alpha string concat) use the value-identical BRAND_FOREST constant in lib/brand.ts. Promote --state-mastery/-progress/-struggle/-neutral and replace the three identical inline status-color copies in Dashboard, Tree and the notetaker page. Add --alert-warn/--alert-err for the two Dashboard alert one-offs (kept distinct from the differently-valued --warn/--err). Pure value-preserving refactor: every replacement maps a literal to a token of identical value, so the rendered output is pixel-identical. The duplicate .landing-page --brand-* block and the conflicting rarity declarations are intentionally left for the later visual commits.
…aces (#102) .impeccable.md bans glassmorphism (no blur, no frosted panels), but the app shipped a LIQUID GLASS SYSTEM on the public hero and onboarding. Replace it with solid surfaces: the .liquid-glass / .glass-panel / .glass-input classes now use opaque --bg-panel/--bg-input + --shadow-* (class names kept so component markup is unchanged), the specular/radial ::after shimmers and all backdrop-filter are removed, and the OnboardingFlow inline frosted panels become opaque #fff (the dark step-indicator scrim keeps its translucency, minus the blur). Radial atmospheric washes are untouched.
Replace the bg-clip-text gradient on the four landing headings (hero h1, Sapling wordmark, the "your study" em, the "Growing" span) with solid var(--brand-forest) text, and remove the now-unused landing-animate-gradient class plus landing-gradient-shift keyframes (both the base and .landing-page-scoped copies). The standalone #2D8F5C CTA button and HowItWorks leaf fill are not headings and are left untouched for scope discipline. The opt-in gradient username cosmetic in Settings.tsx is out of scope and kept.
Remove the two frosted hero stat tiles carrying fabricated dashboard numbers: the "CS 101 / 55% mastered" card and the "Total nodes 2,413 / Mastered 68% / On track 24%" card. Both hero-surface #3B82F6 neon-blue accents lived in the first card and are deleted with it, so no neon-blue remains on the hero card surfaces. The graph color legend and the Quick Quiz / Study Room action chips are not stat tiles and are kept. The #3B82F6 in the cluster/graph palette arrays and the landing-intro orbit-node dot are not hero card surfaces and are left out of scope.
…ter (#112) Four off-system cleanups from the frontend audit: - Colored side-stripe borders (top AI tell): the achievement toast's 3px rarity stripe becomes a leading rarity dot beside its existing uppercase rarity label; the Social reply-quote's 2px --accent stripe drops to a 1px neutral --border structural divider (reply state is already carried by the leading arrow + name); the ParsedCardsTable error row swaps its 3px --err stripe for an --err-soft tinted row plus a visible "!" marker, so error reads by shape, not color alone. - Panels/inputs: --bg-panel and --bg-input move from pure #ffffff to a hair-warm #fdfcf9 so app surfaces feel like paper. The ~64 raw inline #fff literals are deliberately left for a separate per-instance pass — many are modals / image placeholders that should stay white. - Easing: the two .landing-icon-container hover transitions drop the overshoot cubic-bezier(0.175,0.885,0.32,1.275) for the project's --ease. - Inter: removed the next/font Inter import and all 'Inter' literals; --font-inter now maps to var(--font-sans) (DM Sans). DM Sans is loaded as a variable font and covers the 300/400 weights the Inter text used.
…bright (#103) Replace the remaining raw #2D8F5C green literals — the primary CTA button fill and the How-It-Works "growth" leaf — plus the button's #236F48 hover, with --brand-forest-bright / --brand-forest-bright-hover. No raw brand-green hex remains in render paths; the new tokens are byte-identical to the literals they replace, so the result is pixel-identical. The graph cluster-palette #3B82F6 is intentionally left as a data-viz color. Completes the "#2D8F5C literals removed" item that #103 deferred for the non-heading sites, using the #104 tokenization pattern.
Deploying with |
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs | frontend | 5761c18 | Commit Preview URL Branch Preview URL | Jun 12 2026, 07:16 AM |
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughThis PR consolidates hardcoded colors and glass-based UI styling into a centralized design token system using CSS variables and supporting TypeScript constants, updating over 70 files across the landing page, onboarding flow, feature components, and dashboard to use the new themeable palette. ChangesDesign Token and Theming System
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Wave 2 — Phase 1: design-system consolidation
Six scoped, single-issue commits removing AI-tell / off-system patterns from the frontend. Each was implemented sequentially (no parallel edits on shared files), verified by a fresh-context scope check, and builds green (tsc + eslint suppressions baseline + vitest 37/37).
Commits (in order)
refactor(tokens)— consolidate scattered brand greens into--brand-forest+ add--state-*/--alert-*/--fallback-mutedtokens. No visual change (value-equivalent).refactor(theme)— remove the Liquid Glass system; frosted/blurred panels → solid--bg-panelsurfaces (class names kept). Atmospheric background washes preserved.refactor(landing)— the four landing headings dropbg-clip-textgradient +landing-animate-gradientfor solid--brand-forest.refactor(landing)— remove the two fabricated hero stat cards (2,413/68%/55%); both hero-surface#3B82F6neon-blue accents go with them. Legend + action chips kept.style(theme)— polish: colored side-stripes → dot/label/tinted-bg (state conveyed by shape, not color alone);--bg-panel/--bg-inputtinted off pure white to#fdfcf9; overshoot easing →--ease; Inter dropped,--font-inter→ DM Sans.refactor(tokens)— tokenize the remaining#2D8F5CCTA/leaf green (+#236F48hover) into--brand-forest-bright. No raw brand-green hex remains in render paths; pixel-identical.Scope notes
#3B82F6is intentional data-viz color and left as-is.#fffliterals (modals / placeholders) are intentionally left white; the systemic panel tint is via the two driving tokens.Verification
Per-commit: scoped diff confirmed, dangling-ref greps clean,
tsc/eslint/vitestgreen. CI gates this merge.Summary by CodeRabbit
Style
Bug Fixes