Repository navigation
[High] Extract a design-system layer (Button, Input, Select, Badge, Card, Table, Dialog) with tokens, variants and a migration codemod #518
Description
Category: Testing, Design System & Community Tooling
Description: UI relies on global CSS component classes (.card, .eyebrow, input styles) and long repeated Tailwind class strings. Extract typed primitives in src/components/ui/ with variant APIs, unify tokens, and migrate the app.
Problem Statement & Context: Repeated class strings cause inconsistent spacing/focus styles, make theme/RTL changes expensive, and let accessibility fixes miss instances. Primitives make the design consistent and the codebase smaller.
Scope & Acceptance Criteria:
- Primitives with
clsx-based variant maps:Button(primary/secondary/ghost/danger, sizes, loading state witharia-busy),IconButton,Input/AmountInput,Select,Checkbox/Radio,Badge,Card,Tabs,Tooltipwrapper,Skeleton(existing), all supportingforwardRef,asChild-like composition or polymorphicasprop typed correctly. - Design tokens documented (
docs/design-tokens.md): colours, spacing, radii, typography, elevation, motion durations; Tailwind config and CSS variables are the single source; a lint script forbids raw hex colours in components. - Migration: at least SwapCard, SettingsPanel, ConnectWalletButton, Nav, and one full page (e.g. Explore) moved to primitives with no visual regressions (visual tests) and a net reduction in class-string duplication (report numbers); a codemod or documented checklist for the rest.
- Every primitive has stories, tests (roles, states, disabled/loading semantics) and passes axe.
- Out of scope: rebranding/redesign.
Implementation Guidelines (Suggested Execution):
- Key Files/Modules: new
src/components/ui/*,tailwind.config.ts,src/app/globals.css, components listed above. - Design/Architecture: Variant utility (
cva-like, implemented locally or via a vetted small dependency) with typed variant props. - Edge Cases/Constraints: focus ring consistency in both themes, disabled vs
aria-disabledsemantics, forms withexactOptionalPropertyTypesprop patterns, RTL logical utilities. - Testing: Component tests per primitive; visual tests for variants; ≥ 90% coverage of primitives.
Definition of "Done": Baseline DoD, plus before/after screenshots and duplication metrics.
Resources: tailwind.config.ts, src/app/globals.css, Radix/Headless UI patterns (reference only).
Complexity: High (200 points)
Baseline Definition of Done (applies to every Wave issue)
Each issue's own "Definition of Done" is in addition to this baseline:
- Code, tests and documentation are included in one PR that references the issue.
npm run lint,npm run typecheck,npm test,npm run check:i18nandnpm run check:editorconfigpass locally and in CI. (If a command is broken by pre-existing repo debris, see the Repository Health & Build Integrity issues — do not silence the check; note the blocker in the PR.)- No new
any, no// @ts-ignore/eslint-disablewithout a justification comment, and no newconsole.*(usesecureLoggerfromsrc/lib/secureLogging.ts). - All new user-facing strings go through the i18n catalog (
src/lib/i18n/messages/en.tsandes.ts). - New interactive UI is keyboard-operable, has visible focus, correct ARIA semantics, and works in both the dark and light palettes defined in
src/app/globals.css. - UI changes include before/after screenshots (desktop and ~400px mobile). Behaviour changes include a short screen recording or test output.
- Relevant docs under
docs/(andREADME.mdif routes/scripts/env vars change) are updated. - The PR is reviewed and approved by a maintainer listed in
.github/CODEOWNERS.
Activity
biafra877-web commentedon Oct 18, 2026
@biafra877-web has applied to work on this issue as part of the Stellar Wave Program's 10th wave.
ℹ️ Repo Maintainers: To accept this application, review their application or assign @biafra877-web to this issue.
dreamgene-netizen commentedon Oct 20, 2026
@dreamgene-netizen has applied to work on this issue as part of the Stellar Wave Program's 10th wave.
ℹ️ Repo Maintainers: To accept this application, review their application or assign @dreamgene-netizen to this issue.
drips-wave commentedon Oct 20, 2026
Congratulations, @dreamgene-netizen! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on October 22, 2026.
🧑💻 @dreamgene-netizen: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.
Warning
When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.
🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.
🌊 Happy Wave 🌊
drips-wave commentedon Oct 23, 2026
This issue has been completed by @dreamgene-netizen as part of the Stellar Wave Program's 10th Wave 🥳
😎 @dreamgene-netizen: You earned 200 Points for completing this issue! Once the Wave's rewards are finalized, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.
🧑💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.