Glow & Ring

Colored box glows, focus rings, text glows, and colored shadows. glow= automatically inherits the tone= color when set.

Box glow

Sizes (with tone)

glow sm

glow

glow lg

glow xl

<div surface="glass" tone="primary" glow="sm">…</div>
<div surface="glass" tone="primary" glow>…</div>
<div surface="glass" tone="primary" glow="lg">…</div>
<div surface="glass" tone="primary" glow="xl">…</div>

Tone colors

primary

danger

success

warning

info

<div tone="primary" glow>primary glow</div>
<div tone="danger"  glow>danger glow</div>
<div tone="success" glow>success glow</div>

White glow

<div surface="solid" glow="white">White glow</div>

Focus ring

ring= variants

ring (primary)

ring (danger)

ring lg

ring sm

<div ring tone="primary">…</div>
<div ring="lg" tone="danger">…</div>
<button ring="sm">…</button>

Text glow

text-glow=

Glowing primary text

Neon text glow

White text glow

<h2 text="heading" text-glow tone="primary">Glowing text</h2>
<h2 text="heading" text-glow="lg" text-gradient="neon">Neon</h2>
<h2 text="heading" text-glow="white">White glow</h2>

Colored shadows

shadow= tones

primary shadow

danger shadow

success shadow

<div shadow="primary">…</div>
<div shadow="danger">…</div>
<div shadow="inner">…</div>