Repository navigation
fix(apollo-vertex): raise status colour contrast to WCAG AA - #1391
Conversation
There was a problem hiding this comment.
🟢 Approval recommended
Contrast checks and token consistency checks support the targeted changes, with no blocking issues identified.
0 open findings
What changed in this PR
Improves Apollo Vertex’s light-mode status colour contrast to meet WCAG AA for small text.
Changes:
- Darkens success, info and badge tokens without changing dark-mode tokens.
- Updates two documentation examples to use higher-contrast text colours.
- Synchronizes token reference documentation.
| File | Description |
|---|---|
packages/apollo-vertex/registry.json |
Updates theme and per-component light-mode tokens. |
apps/apollo-vertex/lib/foundation-tokens.ts |
Synchronizes documented token values. |
apps/apollo-vertex/content/docs/guidelines/notifications/notification-examples.tsx |
Uses the info token for the expandable alert link. |
apps/apollo-vertex/content/docs/guidelines/notifications/in-product.mdx |
Updates notification colour references. |
apps/apollo-vertex/content/docs/components/feature-flag-demo.tsx |
Darkens light-mode demo text. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Dependency License Review
License distribution
Excluded packages
|
📊 Coverage + size by packagePer-package bundle size on this PR (no JS/TS source changes detected under
"Coverage" is each package's own |
Storybook visual diff✅ No stories are affected by this PR's changes; nothing to compare. Logs Updated (PT): Nov 13, 2026, 06:13:57 AM |
|
This PR has been stale for over 2 weeks with no new commits. Closing — feel free to reopen if you'd like to continue this work. To keep a PR exempt from this automation, add the |
lintapple flagged light-mode status text below 4.5:1 in badge, alert, confidence-signal, sonner and feature-flags. Darken the light --success, --info and --badge tokens just enough that every flagged pair passes, and replace two hard-coded docs colours with accessible ones. Dark mode tokens are unchanged. - --success: oklch(0.57 0.105 152) -> oklch(0.50 0.105 152) - --info: oklch(0.52 0.120 210) -> oklch(0.47 0.120 210) - --badge: oklch(0.5995 0.0199 253.42) -> oklch(0.565 0.0199 253.42) - alert example link: text-[oklch(0.60_0.125_210)] -> text-info - feature-flags demo: text-green-600 -> text-green-700
f111993 to
5179487
Compare

What
lintapple 0.1.20 flagged light-mode status colours below WCAG AA (4.5:1 for small text) on the badge, alert, confidence-signal, sonner and feature-flags previews. Dark mode passed.
This darkens the light-mode
--success,--infoand--badgetokens inregistry.json(theme and per-itemcssVars). Hue and chroma stay the same and lightness drops by the smallest step that passes every flagged pair. Dark tokens are unchanged.--successoklch(0.57 0.105 152)#418958oklch(0.50 0.105 152)#2b7444--infooklch(0.52 0.120 210)#007a8foklch(0.47 0.120 210)#006b80--badgeoklch(0.5995 0.0199 253.42)#78818coklch(0.565 0.0199 253.42)#6e7782Two findings came from hard-coded colours in docs examples, not from tokens:
text-[oklch(0.60_0.125_210)](#0093a9). It now usestext-info.text-green-600(#00a63e) onbg-green-50. It now usestext-green-700, which matches the title above it.The docs token tables (
foundation-tokens.ts, notifications guideline) are updated to the new values.Contrast (light mode)
Tints are composited in sRGB over the backgrounds lintapple reported (#f5f5f5) and over white.
--successsuccess/10over #f5f5f5 (secondary badge)success/10over #fff--infoinfo/15over #f5f5f5 (secondary badge)info/15over #fff--badgesuccess 25%+ cardThe "before" numbers match the lintapple report to within rounding.
Impact check
I grepped
text-/bg-/border-usages ofsuccess,infoandbadgeinpackages/apollo-vertex/registryandapps/apollo-vertex. Users include button (bg-success/bg-infowith white text, contrast improves), timeline marker, solution-tests, ai-chat check icons, confidence-signal levels and alert borders/tints. All are light-mode text or fill on light surfaces, so darkening keeps or improves contrast. Dark mode values are not touched. No apollo-core tokens are involved.Note: light
--infono longer equals light--primary(oklch(0.52 0.120 210)). Primary is unchanged here because it was not part of the finding.Verification
/10,/15andcolor-mixtints).pnpm generate:themeemits the new light values. Dark values are unchanged.packages/apollo-vertex:pnpm lint(oxlint type-aware),pnpm typecheck,pnpm format:check,vitest runall pass.apps/apollo-vertex:pnpm lint,pnpm typecheckpass.