Effects

Effects are brand-level visual gates on your theme. --effect-* custom properties decide whether whole treatments can run. Preflight and components already watch those tokens; when a gate is off, the matching look stays quiet even if markup still asks for it. Flip a gate on the theme and the UI follows—no per-surface retuning.

Polarity is the same for every gate: leave the variable empty or unset to turn the effect on, set it to initial to turn it off. Built-in brands pick a default per gate—check the theme sheet, then override on :root (or another ancestor that owns the theme) when you need a different brand posture.

How toggles work

Clearing a value restores the “on” state; initial is the off signal that @container root not style(--effect-*: initial) looks for.

:root {
  /* on (same as omitting the property) */
  --effect-vibrancy: ;
  --effect-corner-shape: ;
  --effect-shadows: ;

  /* off until you want the foil */
  --effect-holofoil: initial;
}

:root {
  --effect-shadows: initial;
}

Tune intensity separately where a treatment has parameters—for glass, that is --vibrancy-blur and --vibrancy-brightness, not the --effect-* gate itself.

In practice

Mark a surface for glass with data-vibrant (prefer that over hand-rolled backdrop-filter). The filter only applies while the matching --effect-* gate is on; Surface may also translucify its fill so blur reads through. Intensity lives on --vibrancy-blur / --vibrancy-brightness, not on the gate.

<Surface data-vibrant color={1} radius="medium" hPadding="medium" vPadding="medium">
  {/* glass panel */}
</Surface>

Corner treatment follows the theme’s --corner-shape when its gate is on; off is ordinary border-radius.

A foil wash (when its gate is on) paints a fixed, non-interactive overlay on body::after for the whole viewport—global, not per surface. Elevation shadows behind Elevator / data-elevation* respect the shadows gate the same way; off kills those stacks even if attrs remain. Stacking (z-index) is separate. Depth layers: Elevation.