Variants

variant is an open string rendered as data-variant, never as a class. danger, success and warning ship with the library. brand and info do not: they exist only as two CSS rules in this page, and adding them took no JavaScript at all.

Right click a deployment

Deployments

What each variant means here

success Promote to production shipped Confirming a good outcome.
warning Re-run failed jobs shipped Recoverable, but worth a second look.
danger Delete deployment shipped Destructive and not undoable.
brand Pin to release channel css only Defined in this page, not in the library.
info Copy build metadata css only Defined in this page, not in the library.

The whole of the two new variants

.ctx-menu[data-variant='brand'],
.ctx-menu [data-variant='brand'] {
  --ctx-item-fg: light-dark(#6d28d9, #c4a6ff);
}

.ctx-menu[data-variant='info'],
.ctx-menu [data-variant='info'] {
  --ctx-item-fg: light-dark(#0e6a86, #67d3f0);
}

Hover, active and disabled are color-mix() derivations of --ctx-item-fg, so one property is the entire variant. The panel selector is not redundant: a definition level variant lands on the .ctx-menu root, which a descendant selector cannot reach. The Danger zone button below proves it.

Danger zone