Design system

Spotlights

UI::Spotlight, the soft glow behind a surface: each placement and tone in both themes.

Matrix#

Generated from UI::Spotlight.variants.schema: a new member, flag or state appears here with no page edit.

Reading the grid#

Each row is the wrapper with one modifier: default is the bare wrapper, size:sm one member of a variant group, flag:wide one flag. Each column is a state in a theme, manza-light beside manza-dark, and the class list under a cell is what that cell renders on its root.

A hover (forced) or open (forced) cell applies the classes the wrapper's on rules give that state, with the state's prefix taken off, and drops its not-hover:-style classes, so the state shows with no pointer and no JavaScript. It shows what the wrapper adds, not the browser's own :hover: daisyUI's border and shadow changes on a hovered .btn are not in it. A disabled button takes no pointer, so its forced cells show a look it never reaches. A wrapper with no declared states has the rest column only.

A wrapper change screenshots its page here, light and dark.