Migration: Beautiful Defaults (Design System by Default)

Rezi’s core widgets are now wired to the design system so applications look professional without manual styling.

This page documents what changed and how to control it.

What changed

When the active theme provides semantic color tokens (bg.base, fg.primary, etc.), these widgets use recipes by default:

• ui.button(...) (defaults to a "soft" look)
• ui.input(...)
• ui.checkbox(...)
• ui.select(...)
• ui.table(...)
• ui.progress(...)
• ui.badge(...)
• ui.callout(...)
• ui.scrollbar(...)
• ui.modal(...)
• ui.divider(...)
• ui.surface(...)
• ui.text(...)

If the active theme does not provide semantic color tokens, these widgets fall back to non-recipe rendering.

New APIs

Button intent

Use intent instead of juggling dsVariant + dsTone (+ dsSize):

ui.button({ id: "save", label: "Save", intent: "primary" })
ui.button({ id: "cancel", label: "Cancel", intent: "secondary" })
ui.button({ id: "delete", label: "Delete", intent: "danger" })
ui.button({ id: "learn", label: "Learn more", intent: "link" })

Box presets

Use preset for consistent container defaults:

ui.box({ preset: "card" }, [ui.text("Card content")])

Composition helpers

New layout helpers reduce boilerplate:

• ui.page, ui.header, ui.statusBar
• ui.appShell, ui.sidebar, ui.masterDetail
• ui.card, ui.toolbar

Manual overrides

Manual styling props do not disable recipes.

When semantic color tokens are available, recipe styles are always applied, and manual props like style, pressedStyle, px, and trackStyle are merged on top to override specific attributes.

Breaking (alpha): older builds treated some manual style props as an opt-out from recipe styling. This migration removes that opt-out to keep defaults consistent and avoid hidden behavior.

Height constraints for framed controls

Some recipe-styled widgets can draw a framed control (border + interior). A framed border requires at least 3 rows of height; in a 1-row layout, widgets still use recipe text/background styling, but they render without a box border.