Uh oh!
There was an error while loading. Please reload this page.
refactor(frontend): shared UI primitives + green consolidation (Phase 2) - #294
Merged
AndresL230 merged 18 commits intoJul 1, 2026
Merged
Conversation
…rison Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Retire sage --accent -> brighter forest (--brand-forest-bright) for highlight/focus; merge --state-mastery + --grade-a into one --positive status green; add .btn--lg hero size for de-pilled CTAs. Three forest-family greens by role: forest(action) / accent(highlight) / positive(status). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Thin wrappers over the canonical .btn/.chip classes. Button enforces one shape (6px) with variant + size (incl. lg hero size); Toggle is the one segmented control; Chip/Badge collapse the pill/badge zoo. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ives - Landing CTAs (Get Started x2, Sign up for Beta) -> <Button size=lg>, de-pilled to sharp 6px, infinite glow removed. - 5 Gradebook modal save/submit buttons -> <Button> (kills hard-coded borderRadius:6). - Study flashcard ratings 10px -> 6px (kept color-coding). - Tokenize orphan #1a5c2a wordmark -> var(--brand-forest) across 8 files. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add optional per-option title to <Toggle>; replace the Learn setup mode pills with it. ModelToggle (Fast/Smart) intentionally left as-is — it has a sliding animation, per-option color semantics, and a tooltip that the generic Toggle would degrade. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…Flair Badge carries the hue on border + soft bg, keeps text neutral (colored text fails 4.5:1 on several rarity tiers). TitleFlair now wraps Badge instead of inline styles. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 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 | e54d27a | Commit Preview URL Branch Preview URL | Jul 01 2026, 12:26 AM |
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…arted CTA De-pilled CTAs hug the text now (lg 13/26 -> 9/18). The closing 'Get Started' under the 'Ready to Start Growing?' hero uses a new xl size so it stays a prominent central focal point; navbar + hero beta stay tight. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…bright accent The header button hard-coded background:var(--accent); after accent shifted to the brighter forest, it rendered brighter than every other primary button. Now a proper <Button variant=primary> (--brand-forest), matching the term pills and app buttons. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Family (b) control: a wrapping row of selectable pills for 'All' + N dynamic filters, wrapping the existing <Pill> (with per-option color/icon). Complements <Toggle> (family (a): fixed connected segmented control). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replaces the custom accent-filled pill buttons with the shared <Toggle> (forest-filled active). Keeps SemesterChips' public API; also fixes the prior --accent button fill. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Overview/Chat/Study match/Activity tab row now uses the shared <Toggle>. setTab wiring unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
month/week/day/table switch now uses the shared <Toggle>; drops a pre-existing unused Pill import. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
grid/list view switch uses the shared <Toggle>; the category filter row uses the shared <FilterPills>. Drops the now-unused Pill import. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
all/activity/social/milestone/special filter row uses shared <FilterPills>. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Topic filter (All + dynamic topics) uses shared <FilterPills>. The mode toggle (Study Guide/Flashcards) is left specialized for its Framer-Motion spring, matching the ModelToggle precedent. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Tier filter uses shared <FilterPills> with per-option color. The course filter (colored dots) stays specialized per the design decision. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
Shared UI primitives + green consolidation (Phase 2)
Stacked on #286 (Phase 1 token unification). Where Phase 1 unified token values, this fixes the component layer the audit found underneath — inconsistent button shapes, a 5-greens-by-accident mess, and reinvented pills.
Green-by-role consolidation (
globals.css)Three forest-family greens, by role — sage retired:
--brand-forest #1B6C42— primary action (unchanged)--accent → #2D8F5C(was sage#8a9a5b) — highlight/focus (re-homes 125 usages into forest)--positive #3a7d4e— one status green, merging--state-mastery+--grade-a#1a5c2a(orphan, ×12) tokenized →var(--brand-forest)Shared primitives (
components/ui/)<Button>(variants ×sm/md/lg/xl, 6px always) ·<Toggle>(segmented control) ·<Chip>·<Badge>(a11y-correct: hue on border, neutral text). Thin wrappers over the canonical.btn/.chipclasses so un-migrated call-sites keep working.High-impact migrations
<Button>, de-pilled to sharp 6px, infinite glow removed.<Button>(kills hard-codedborderRadius:6).<Toggle>.TitleFlair→<Badge>.Deliberately NOT consolidated (the honest part)
The pill/badge/toggle "zoo" is largely intentional specialization — forcing it into generic primitives would degrade it:
ModelToggle(Fast/Smart): sliding animation + color semantics + tooltip → kept.<Badge>enforces this.Refinements (this iteration)
Button-shape decision: sharp 6px everywhere; pills only for true toggles/chips (see
docs/button-shape-comparison.html). After de-pilling, dialed in the CTA sizing:.btn--lg(13/26→9/18padding) so de-pilled CTAs hug their text instead of being big empty rectangles — navbar "Get Started" + hero "Sign up for Beta Testing"..btn--xlfor the closing "Get Started" under the "Ready to Start Growing?" hero, so it stays a prominent central focal CTA.background: var(--accent), so after accent shifted to the brighter forest it rendered brighter than every other primary button. Now a proper<Button variant="primary">(--brand-forest), matching the term pills + app buttons. (Audited app-wide: it was the only button mis-filled with--accent; the other two accent fills are a progress bar + a status badge — correct as highlights.)docs/changes-tour.html— a guided tour of every changed screen.Verification
Clean
npm run build;npx eslint .0 errors;vitest68/68; manual click-through of landing, gradebook, learn, social, achievements, dashboard (unchanged anchor).Next up (separate handoff)
Consolidating the selector / sorting / filter / tab controls across gradebook · social · achievements · calendar · library · study · tree · quiz onto the shared
<Toggle>(single-select) /<Chip>(multi-select filters), leaving genuinely-specialized controls alone.Docs:
docs/frontend-component-consistency-audit.md,docs/button-shape-comparison.html,docs/changes-tour.html,docs/superpowers/specs/2026-06-30-component-system-phase2-design.md.🤖 Generated with Claude Code