chore(design): Enforce VWC navy/red/gold palette site-wide#1127
Merged
Conversation
Sweep off-palette Tailwind utilities and hardcoded hex codes across 153 files to the brand palette in tailwind.config.js. Non-brand states collapse to gold for positive, red for destructive, or navy for neutral. Replace tw prop suffixes blue, green, yellow, purple, cyan, teal, pink, indigo, orange, emerald, sky, lime, amber, rose, violet, and fuchsia with navy, red, or gold tokens by shade and semantic role. Snap arbitrary-value hex in className and inline style props to the nearest brand token, including the Material palette in admin and cloudinary tools. Map code-preview surfaces to dark.surface and dark.text-muted. ResumeScorer score gradient ranges from gold through gold-bright and gold-rich to red. Military branch identity color maps in career-guides/branch-meta.ts and the rainbow gradient in career-guides/filters.tsx are intentionally left untouched as the documented exception.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Placeholder and helper text in the career-guides search bar used dark gray tokens on a navy-deep surface, giving roughly 1.7 to 2.7 contrast ratio that fails the 3 to 1 WCAG AA minimum for placeholder and incidental text. Switch placeholder to cream at 60 percent opacity and the keyboard hint, dropdown subtitle, and branch label to cream at 70 percent opacity and gray-100, all of which clear AA on the navy surface. Also convert remaining brand hex arbitrary values in the same file to their tailwind tokens.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
tailwind.config.js.src/containers/career-guides/branch-meta.ts,src/containers/career-guide-detail/branch-meta.ts, and the rainbow gradient insrc/containers/career-guides/filters.tsxare intentionally untouched.What changed
tw-{bg,text,border,ring,from,to,via,...}-{blue,green,yellow,purple,cyan,teal,pink,indigo,orange,emerald,sky,lime,amber,rose,violet,fuchsia}-Nwith navy/red/gold tokens by shade and semantic role.tw-bg-[#xxx]) and inlinestylehex to the nearest brand token. This includes the Material palette used inblog-image-manager,cloudinary-media-library, andcloudinary-upload-example.#1e1e1e/#d4d4d4) todark.surface/dark.text-muted.Verification
After the sweep, both greps return 0:
tw-{prop}-{blue|green|yellow|purple|cyan|teal|pink|indigo|orange|emerald|sky|lime|amber|rose|violet|fuchsia}-N→ 0 hitsOff-brand hex (excluding the brand-allowed palette + documented branch exception) → 0 hits
npm run typecheck— 11 errors, all pre-existing (j0di3 test mocks,swagger-ui-react/next-swagger-doctypes). No new errors.npm run lint— 18 errors / 267 warnings, all pre-existing in__tests__/. Master baseline was 50/462; Biome auto-fix improved on it.npm test— 380/380 passing across 41 files.Test plan
/translator, career pathways, training section) for visual cohesion./admin/courses,/admin/users,/admin/blog-images) — these had the highest concentration of Material-palette colors.blog-image-managercode previews still look right.