Getting started and including UI into your application
ui-* packages move to @prepared911/ui. Follow Migrating to @prepared911/ui.
Install @prepared911/ui and load its styles once at the app root.
pnpm add @prepared911/ui
Import the token stylesheet and, when you want the document base, the reset. tokens.css does not include the reset.
Tokens are CSS custom properties. Light values are declared on :where(:root). Dark values are declared under [data-theme='dark'].
Appearance is the data-theme attribute on the document element. There is no theme provider and no brand class on the document.
createAppearancePreference applies light, dark, or the operating system setting. The first application, when the preference is created, does not animate. Later changes animate. Persisting the choice is the app's job. Call dispose() when the owner of the preference goes away.
A subtree that must stay on one appearance uses themeRegionProps from @prepared911/ui. A theme region does not restyle popups portaled outside that subtree.
Import each component from its subpath.
Button is always a <button>. Navigation is Link from @prepared911/ui/link.