Add accessible text tokens (text-warning/error/success-foreground)#24
Merged
Add accessible text tokens (text-warning/error/success-foreground)#24
Conversation
The token set already exposes --color-warning, --color-error, and --color-success as fill values tuned for badges, status dots, and chart series. None of those clear WCAG AA when used as text on white or on a 12-15% -soft tint. Add three accessible-on-white text variants and bridge them as Tailwind utilities consistent with the existing --destructive- foreground convention: - --text-warning: #d9480f (Mantine orange.9, 4.81:1 on white) - --text-error: #B91C1C (Tailwind red-700, 5.94:1 on white) - --text-success: #285E61 (primary[700], 7.07:1 on white) Bridges: - --color-warning-foreground (Tailwind: text-warning-foreground) - --color-error-foreground (Tailwind: text-error-foreground) - --color-success-foreground (Tailwind: text-success-foreground) Discovered while doing a WCAG 2.2 AA pass on policybench; without these tokens every consumer ends up redefining accessible text colors locally.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
MaxGhenis
added a commit
to PolicyEngine/policybench
that referenced
this pull request
May 9, 2026
@policyengine/ui-kit is the canonical PolicyEngine design system per the org's CLAUDE guidance (new standalone tools should ship on ui-kit). The legacy @policyengine/design-system lives inside PolicyEngine/policyengine-app-v2/packages/design-system and is on a deprecation track. Changes - package.json: drop @policyengine/design-system, add @policyengine/ui-kit ^0.4.0. - globals.css: import @policyengine/ui-kit/theme.css instead of the design-system one. - theme.css: rewrite the policybench-local --color-* alias layer to resolve to ui-kit's :root vars (--background, --card, --border-medium, --text-primary, --primary, --color-teal-500, --color-gray-600, etc.) rather than --pe-color-*. The accessible text aliases route through --text-warning / --text-error / --text-success (added in PolicyEngine/policyengine-ui-kit#24, with hex fallbacks until a release ships). - modelMeta.ts: replace runtime imports of `colors` and `chartColors` from design-system with var(--color-...) string references that the CSSOM resolves at render time. No JS-bundled color values. The component layer is unchanged — every Tailwind class call site (`bg-card`, `text-text-secondary`, `text-text-muted`, etc.) still works because the same alias names are re-exported through theme.css. Verification - bunx eslint . --max-warnings=0 clean - bun run build clean (still ○ static) - SSR HTML / contains: <h1 class="sr-only">, skip-to-content, Open-set banner, Snapshot 2026-05-01 pill, Sensitivity views including Household-weighted, Show 95% intervals toggle, aria-disabled / aria-pressed states intact.
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
Adds three semantic accessible-on-white text variants to
src/theme/tokens.css, mirroring the existing--destructive-foregroundshadcn convention:--text-warning#d9480f(Mantine orange.9)--text-error#B91C1C(Tailwind red-700)--text-success#285E61(primary[700])Bridged through
@theme inlineso consumers get matching Tailwind utilities:text-warning-foregroundtext-error-foregroundtext-success-foregroundThe existing fill values (
--color-warning,--color-error,--color-success) are unchanged. They stay tuned for badges, dots, and chart series — none of those clear WCAG AA when rendered as text on white or on a 12–15%-softtint.Why
Discovered while doing a WCAG 2.2 AA pass on
policybench. Without these tokens, every consumer ends up redefining accessible text colors locally. With them, the design system covers the case once.Verification
bun run typecheckclean.bun run test— 215/215 pass.bun run buildclean.🤖 Generated with Claude Code