Zazz 0.8 alpha

Zazz 0.8 alpha puts radius on the spacing scale, adds an --elevation utility whose shadow is computed from a single number, and adds filter and blend utilities. It also renames --rounded, --shadow-hue, and every primitive's -rounded hook, and changes the dialog sizes, so this is a breaking release.

--radius takes a number

--rounded was Tailwind's name for a raw border-radius. 0.8 renames it --radius and puts it on the same scale as spacing. A number is that many --spacing steps times --radius-multiplier, so --radius: 2.5 is exactly --radius-md:

<div style="--radius: 2.5"></div>           <!-- --radius-md -->
<div style="--radius: 1rem"></div>          <!-- a length passes through -->
<div style="--radius: full"></div>          <!-- a pill -->
<div style="--radius: 1; --radius--hover: 4; --radius--md: 2.5"></div>

It takes states and breakpoints, and --radius-multiplier still squares or softens the whole kit at once. A value with several corners doesn't fit a single number, so four side utilities round two corners each: --radius-t: 2.5 rounds a card's media along the top. The primitives' hooks follow the rename (--ui-button-radius), and each primitive's main radius hook takes a number too. A hook takes one value now, so a hook with several corners renders square.

--elevation

I wanted a shadow you set by height, the way you set padding by a number. --elevation draws four box-shadow layers from one value:

<div style="--elevation: 1.5; --elevation--hover: 4"></div>

Each layer sits farther out along the light than the one before it and blurs in proportion. As the number rises, the blurred far layers fade in and darken, so a low element has a tight contact shadow and a high one gets a soft, wide spread. The layer offsets and blur ratios come from the old --shadow-2xl, which was already a stack of scaled layers, and the opacities were tuned by eye in a prototype. --elevation: 4 uses the same layers as --shadow-md.

Each layer also pulls in by a negative spread, and blurs by no more than its distance, so with the light overhead a shadow never shows above the element or past its sides: a card sits on its shadow instead of being outlined by it. It shares one box-shadow with --ring and --shadow: a ring or a primitive's focus ring draws first and keeps the elevation, and an explicit --shadow replaces it.

Shadow tokens and light

The --shadow-2xs … 2xl tokens are now drawn with the same formula, so --shadow: var(--shadow-md) and --elevation: 4 look alike. --shadow is the box-shadow form: a token or any box-shadow. The size words (--shadow: md) are gone; write var(--shadow-md).

Two theme inputs set the light for the page: --color-shadow for the color and the new --default-shadow-angle for the direction. --shadow-tint (renamed from --shadow-hue) and --shadow-angle change them for an element and its subtree, so a bottom sheet can cast its shadow up.

Filters and blending

--filter, --backdrop-filter, and --mix-blend set filter, backdrop-filter, and mix-blend-mode. They take state tiers and have pseudo-element forms, and a tier works on its own: --filter: grayscale(1); --filter--hover: none colors a logo when you hover it, and --filter--hover: blur(2px) by itself leaves the element sharp at rest.

The lightbox used to darken a hovered stage image with its own filter, which would have fought the utility. It no longer sets filter at all; the migration list below has the two lines that bring the dimming back.

Dialog sizes follow the layout

data-dialog-size takes the layout's sizes now: sm, md, lg, xl, and 2xl cap a dialog at that band's width, full spans the screen inside the gutters, and bleed fills it edge to edge. With no size a dialog is sm, 40rem, which is a little wider than the old 50ch default.

<dialog data-ui="dialog" data-dialog-size="lg">…</dialog>

Smaller things

--top, --right, --bottom, and --left take auto, so a side you set at one breakpoint can go back to auto at another. A bar can stick to the bottom on a phone and to the top on a desktop: --bottom: 0; --bottom--lg: auto; --top: auto; --top--lg: 0.

Reveals run a bit slower and travel farther by default (1000ms and 2rem), and --ui-reveal-global-stagger-step sets the delay between a group's children for everything below it.

Migrating

• --rounded → --radius, and --ui-<primitive>-rounded → --ui-<primitive>-radius. A token value still works (--radius: var(--radius-md)), or write its number (2.5).
• A multi-corner --rounded value or hook → the side utilities (--radius-t: 2.5), or a single value.
• --shadow: md → --shadow: var(--shadow-md), or --elevation: 4.
• --shadow-hue → --shadow-tint.
• data-dialog-size="article" → "sm" (or no size), "container" → "md", and "screen" → "bleed". The mobile menu uses "bleed" now.
• The lightbox no longer darkens a hovered image. To keep it, put data-ui="group" on the slide and --group-filter--hover: brightness(0.8) on the image.

The changelog lists every change, including the hook renames for each primitive.