What to build
Define the full visual language as a PandaCSS config and export it as a standalone preset that consuming apps can import.
Set up:
panda.config.ts with semantic color tokens using _dark condition (no hardcoded colors in components — everything references semantic tokens): background, foreground, primary, muted, border, and their variants- Full color palette underneath the semantic aliases
- Typography scale (font sizes, weights, line heights mapped to named text styles)
- Spacing scale
- Border radii scale
- Shadow scale
- Z-index scale
- Breakpoints:
sm (mobile), md (tablet), lg (desktop)
- PandaCSS
darkMode: 'class' config pointing at .dark on <html>
- Exported preset at
src/preset.ts — the @version14/ui/preset entrypoint — so consuming apps can do import preset from '@version14/ui/preset' in their own panda.config.ts
Acceptance criteria
Blocked by
What to build
Define the full visual language as a PandaCSS config and export it as a standalone preset that consuming apps can import.
Set up:
panda.config.tswith semantic color tokens using_darkcondition (no hardcoded colors in components — everything references semantic tokens):background,foreground,primary,muted,border, and their variantssm(mobile),md(tablet),lg(desktop)darkMode: 'class'config pointing at.darkon<html>src/preset.ts— the@version14/ui/presetentrypoint — so consuming apps can doimport preset from '@version14/ui/preset'in their ownpanda.config.tsAcceptance criteria
import preset from '@version14/ui/preset'resolves and exports a valid PandaCSS preset object.darkis on<html>(verifiable in Storybook or a test page)sm,md,lg) are defined and usable in PandaCSS recipesBlocked by