Theme migration and accessibility debt
Fixed colors in components, raw Tailwind color utilities, semantic-token adoption, and legacy exceptions awaiting review. Tracks remaining findings over time.
Theme migration and accessibility debt
Counts color usage in components, UI primitives, and routes (src/components, src/ui, src/routes) on codemod/OpenHands. This is the remaining work from the token audit in OpenHands#18004.
Raw Tailwind color utilities are default palette classes such as text-white, bg-black/60, bg-red-500, and outline-blue-300, plus numbered cool-grey utilities.
Fixed colors are hex, rgb, and hsl literals in class utilities (text-[#ffffff], bg-[rgba(...)]) and in paint attributes (fill="#ec4899").
Semantic-token adoption is the share of those color utilities that already use a theme role defined in src/tailwind.css (text-muted, bg-danger, border-border, text-feedback-error).
Exceptions awaiting review are the seven classes still allowlisted in eslint.config.js while shadcn/no-raw-colors stays at warning: bg-background, bg-content1, text-primary-foreground, bg-status-fail-bg, text-status-fail-text, text-content-muted, and text-modal-muted.
Open follow-ups:
- Confirmation dialog descriptions still use
text-modal-muted, which resolves to a fixed#A3A3A3. - Budget meter fills still use
bg-red-500andbg-blue-500inBudgetProgressBar. - Managed-agent focus outlines still use
focus-visible:outline-blue-300.
161
87
55
19
94.0%
4
2
1
| text-white | 40 |
| bg-black | 16 |
| bg-white | 11 |
| outline-blue-300 | 4 |
| bg-red-500 | 3 |
| bg-yellow-500 | 2 |
| text-black | 2 |
| bg-green-500 | 2 |
| border-green-500 | 1 |
| text-green-400 | 1 |
| border-yellow-500 | 1 |
| border-red-500 | 1 |
| text-yellow-400 | 1 |
| bg-blue-500 | 1 |
| text-red-400 | 1 |
| bg-background | 6 |
| bg-content1 | 4 |
| text-status-fail-text | 3 |
| text-primary-foreground | 2 |
| bg-status-fail-bg | 2 |
| text-modal-muted | 1 |
| text-content-muted | 1 |