Create a design-token migration matrix (design/token-migration-matrix.md) tracking hardcoded-hex components against tokenized status

[Jagadeeshftw]

Description

Multiple prior rounds have tokenized hardcoded hex colors component-by-component (benefits.tsx, network-switcher.tsx, transactions-table.tsx, transactions-header.tsx, and others), but there is no single tracking document showing which components are done, in progress, or not yet started. A migration matrix gives the team and future contributors a clear, prioritized view of remaining design-token debt.

Requirements and context

• Inventory every component still containing hardcoded hex colors across app/ and components/
• Record each component's tokenization status (done / in progress / not started) with a link to its tracking issue
• Prioritize the remaining rows by user-facing visibility (landing and dashboard first)
• Must be accessible (WCAG 2.1 AA), responsive, and consistent with existing design tokens
• Should be tested and easy to review

Suggested execution

Fork the repo and create a branch

git checkout -b docs/design-token-migration-matrix

Implement changes

• Update/Write: app/globals.css
• Add/Update tests: app/metadata.test.ts
• Add documentation: design/token-migration-matrix.md
• Annotate accessibility (contrast, keyboard nav, ARIA)
• Validate responsive behavior across breakpoints (sm 640, md 768, lg 1024, xl 1280)

Test and commit

• Run tests: pnpm test (or repo's test command)
• Cover edge cases (empty/error/loading, long text, dark mode)
• Include before/after screenshots and accessibility notes

Example commit message

docs: add a design-token migration matrix tracking tokenization status

Guidelines

• WCAG 2.1 AA compliance
• Clear documentation and spec hand-off
• Timeframe: 96 hours

[shadrach68]

@shadrach68 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer, I am confident that I can resolve this issue before 24hrs if assigned to me because I have the technical expertise to resolve i

ℹ️ Repo Maintainers: To accept this application, review their application or assign @shadrach68 to this issue.

[victorocheje]

@victorocheje has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @victorocheje to this issue.

[MJ-RWA]

@MJ-RWA has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Stellopay, can i work on this to implement this fix?
ETA: 4 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @MJ-RWA to this issue.

[tecmalik]

@tecmalik has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

please assign me to this issue i would love to work on it

ℹ️ Repo Maintainers: To accept this application, review their application or assign @tecmalik to this issue.

[NEA-DEV-coder]

@NEA-DEV-coder has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer, kindly assign me this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @NEA-DEV-coder to this issue.

[Ukorstack]

@Ukorstack has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Gm maintainer, i would love to work on this issue and submit a clean PR within 6hrs,
please assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ukorstack to this issue.

[muhsar27]

@muhsar27 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Please assign me to this issue, I would love to work on it

ℹ️ Repo Maintainers: To accept this application, review their application or assign @muhsar27 to this issue.

[Amallcodes]

@Amallcodes has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

My relevant experience includes building full-stack applications with TypeScript, React, Next.js, NestJS, Node.js, and Rust, developing blockchain integrations with Stellar/Soroban, and writing reliable tests, documentation, and production-ready features with a focus on maintainability and code quality.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Amallcodes to this issue.