WEB-111 New components and styling system

[wlenig]

• Design token system — defineToken() maps semantic labels to Tailwind classes, powering both editor UI (select/radio options) and rendering (class lookups). 13+ tokens: padding, gap, colors, border radius, shadow, text alignment, column count, layout mode, etc.
• Responsive styling — Values vary per breakpoint (base/md/lg) with automatic fallback. resolveResponsive() emits prefixed Tailwind classes. Editor fields show all three breakpoints side-by-side with an "inherit" option.
• Component prop builder — defineProps() declaratively builds Puck field configs and defaults from tokens. Supports slot, select, radio, raw, and responsive field types with full type inference.
• Layout utilities — Helpers combine resolved tokens into composite class strings for surfaces, flex/grid slots, and grid containers.
• New component set — Seven components replace the previous twelve: Section, Container, Columns, Grid (layout); Text, Image (content); Button (interactive).
• Columns — Dynamically shows/hides 1–6 independently nestable slot zones based on a responsive column count token.
• Rich text — Visible bullet points, empty line preservation, responsive text columns.
• Fonts — Added Inter and Bebas Neue

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
website-development	Ready	Preview, Comment	Mar 27, 2026 6:42am