Skip to content

[CHORE] [UI] Tokenize components/offramp, app/anchors, app/admin — half the app bypasses the palette #967

Description

@ezedike-evan

Context

tests/contrast.spec.ts (from #755) enforces the palette in two ways: it checks token-pair contrast ratios parsed live out of app/globals.css, and it scans every .tsx under components/ and app/ for measured-failing raw greys.

The second half only holds where components actually use the tokens. Today the coverage is lopsided:

  • Tokenizedapp/layout.tsx, app/page.tsx, the whole app/docs/** tree, components/layout/*, components/landing/*, components/docs/*
  • Still raw Tailwind greys and bluescomponents/offramp/* (~15 files; ScorecardCard.tsx ~43 occurrences, RateTable.tsx and ExecuteDrawer.tsx ~34 each, AnchorProfile.tsx ~28), app/anchors/standings/page.tsx (~21), app/admin/disputes/page.tsx (~9)

The guard keeps those files from using known-bad greys, but nothing ties them to the palette. A theme change reaches half the app and stops.

Requirements

  1. Replace raw text-gray-* / bg-gray-* / text-blue-* / border-gray-* with the token classes (text-primary-text, text-secondary-text, bg-bg-subtle, border-control-border, text-accent, …) across components/offramp/*, app/anchors/**, app/admin/**
  2. Shrink the EXEMPT list in tests/contrast.spec.ts as files are converted — the spec already self-checks that every exemption is still needed, so a stale entry fails
  3. No visual redesign. This is a substitution pass; anything that looks different afterward is a bug in the substitution

Verification

npx vitest run tests/contrast.spec.ts, then npm run dev and compare /offramp, /anchors/standings, /admin/disputes in both themes against main.

Notes

Deliberately kept out of the palette-swap PR (#749): ~250 occurrences across 17 files would make a palette regression indistinguishable from a substitution error.

Metadata

Metadata

Assignees

No one assigned

    Labels

    choreBuild, tooling, deps, repo meta. Not a user-visible change.difficulty/intermediate~1 day of work. Touches one module. No cross-cutting concerns.epic/uiProduct surface — widget, dashboard, rate table.module/uicomponents/* + app/(ui)/* — React components and pages.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions