Skip to content

[Frontend] Design-system Button/Input hardcode blue-600/blue-500 (and focus ring) while the app accent is indigo and globals.css exposes a --focus-ring token #1249

Description

@grantfox-oss

Telegram (ask questions / claim the issue here first): https://t.me/+DOylgFv1jyJlNzM0

Why this matters

frontend/src/app/components/ui/Button.tsx primary variant is bg-blue-600 hover:bg-blue-700 and both Button and ui/Input.tsx hardcode focus-visible:ring-blue-500. Yet the app's primary accent is indigo across 38 files (e.g. send-remittance/page.tsx uses indigo-600 links, the loan-wizard steps, and many ui/* components), and frontend/src/app/globals.css defines a --focus-ring (#2563eb) token consumed via focus-visible:ring-focus-ring in 3 files. The result is a primary CTA whose hue and focus ring diverge from the surrounding brand accent and from the documented token.

Acceptance criteria

  • Pick one accent (indigo or the --focus-ring token) and make ui/Button.tsx primary + ui/Input.tsx focus ring use it consistently
  • Route focus-ring colors through the existing --focus-ring token rather than hardcoded ring-blue-500
  • Audit indigo-vs-blue usages so primary buttons match the page accent

Files to touch

  • frontend/src/app/components/ui/Button.tsx
  • frontend/src/app/components/ui/Input.tsx
  • frontend/src/app/globals.css
  • frontend/src/app/[locale]/send-remittance/page.tsx

Out of scope

  • Full rebrand / new color palette
  • Dark-mode contrast tuning beyond the accent swap

Metadata

Metadata

Labels

Stellar WaveIssues in the Stellar wave programenhancementNew feature or requestfrontendIssues related to frontend developmentuiUser Interface related issues

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions