Migrate to @policyengine/ui-kit (drop legacy @policyengine/design-system)

[MaxGhenis]

Summary

@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. This PR migrates policybench to the canonical package and removes the legacy dependency.

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 tokens file.
• 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-*. Accessible text aliases route through --text-warning / --text-error / --text-success (added upstream in policyengine-ui-kit#24; 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 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 (incl. Household-weighted), Show 95% intervals toggle, aria-disabled / aria-pressed states intact.

Follow-ups

• Once ui-kit#24 merges and a new ui-kit release ships, the hex fallbacks in theme.css (e.g. var(--text-error, #b91c1c)) silently resolve to the upstream values without another PR here.
• Tracking the broader @policyengine/design-system deprecation across the rest of the org is out of scope for this repo; happy to file an issue against PolicyEngine/policyengine-app-v2 listing the 17 consumers if useful.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
policybench-site	Error		May 9, 2026 4:30am

[policyengine]

Clean migration from legacy design-system to ui-kit. The changes are well-structured and achieve the stated goal.

What I verified:

• ✅ correctly removes and adds
• ✅ imports the correct ui-kit theme
• ✅ successfully maps local color aliases to ui-kit variables
• ✅ migrates from JS color imports to CSS variable strings
• ✅ No remaining references to in the codebase
• ✅ Accessible text color mappings use ui-kit tokens with appropriate fallbacks
• ✅ Component layer unchanged (Tailwind classes still work via aliases)

Minor observation (non-blocking):
In app/src/app/theme.css lines 29 and 31, there are self-referential variable definitions:

--color-info: var(--color-info);
--color-warning: var(--color-warning);

These appear to be re-exporting variables already defined in ui-kit's theme. While this works (as evidenced by successful build verification), these lines could be removed as they're redundant—ui-kit already provides these variables. Not a bug, just unnecessary indirection.

The migration aligns with the org's guidance to use ui-kit as the canonical design system for new standalone tools.

[policyengine]

Clean migration from legacy design-system to ui-kit. The changes are well-structured and achieve the stated goal.

What I verified:

• ✅ package.json correctly removes @policyengine/design-system and adds @policyengine/ui-kit ^0.4.0
• ✅ globals.css imports the correct ui-kit theme
• ✅ theme.css successfully maps local color aliases to ui-kit variables
• ✅ modelMeta.ts migrates from JS color imports to CSS variable strings
• ✅ No remaining references to @policyengine/design-system in the codebase
• ✅ Accessible text color mappings use ui-kit tokens with appropriate fallbacks
• ✅ Component layer unchanged (Tailwind classes still work via aliases)

Minor observation (non-blocking):
In app/src/app/theme.css lines 29 and 31, there are self-referential variable definitions:

--color-info: var(--color-info);
--color-warning: var(--color-warning);

These appear to be re-exporting variables already defined in ui-kit's theme. While this works (as evidenced by successful build verification), these lines could be removed as they're redundant—ui-kit already provides these variables. Not a bug, just unnecessary indirection.

The migration aligns with the org's guidance to use ui-kit as the canonical design system for new standalone tools.