Ring

vel-src: ring.css

Utilities for adding box-shadow focus rings to elements.

Class	Properties
vel-ring	box-shadow: 0 0 0 3px var(--vel-ring-color, rgba(124,92,252,0.5))
vel-ring-0	box-shadow: 0 0 0 0px var(--vel-ring-color)
vel-ring-1	box-shadow: 0 0 0 1px var(--vel-ring-color)
vel-ring-2	box-shadow: 0 0 0 2px var(--vel-ring-color)
vel-ring-4	box-shadow: 0 0 0 4px var(--vel-ring-color)
vel-ring-8	box-shadow: 0 0 0 8px var(--vel-ring-color)
vel-ring-inset	box-shadow: inset 0 0 0 3px var(--vel-ring-color)
vel-ring-primary	--vel-ring-color: var(--vel-color-primary)
vel-ring-success	--vel-ring-color: var(--vel-color-success)
vel-ring-danger	--vel-ring-color: var(--vel-color-danger)
vel-ring-warning	--vel-ring-color: var(--vel-color-warning)
vel-ring-info	--vel-ring-color: var(--vel-color-info)
vel-ring-white	--vel-ring-color: #ffffff
vel-ring-black	--vel-ring-color: #000000
vel-ring-offset-0	box-shadow: 0 0 0 0px var(--vel-ring-offset-color, #060b17), 0 0 0 3px var(--vel-ring-color)
vel-ring-offset-1	box-shadow: 0 0 0 1px var(--vel-ring-offset-color, #060b17), 0 0 0 4px var(--vel-ring-color)
vel-ring-offset-2	box-shadow: 0 0 0 2px var(--vel-ring-offset-color, #060b17), 0 0 0 5px var(--vel-ring-color)
vel-ring-offset-4	box-shadow: 0 0 0 4px var(--vel-ring-offset-color, #060b17), 0 0 0 7px var(--vel-ring-color)
vel-ring-offset-primary	--vel-ring-offset-color: var(--vel-color-primary)
vel-ring-offset-neutral-900	--vel-ring-offset-color: var(--vel-neutral-900)

Examples

Ring sizes

example.html

<div style="display:flex;gap:20px;padding:1.5rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <button class="vel-ring-1 vel-ring-primary vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">ring-1</button>
  <button class="vel-ring-2 vel-ring-primary vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">ring-2</button>
  <button class="vel-ring vel-ring-primary vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">ring (3px)</button>
  <button class="vel-ring-4 vel-ring-primary vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">ring-4</button>
  <button class="vel-ring-8 vel-ring-primary vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">ring-8</button>
</div>

Semantic ring colors

example.html

<div style="display:flex;gap:20px;padding:1.5rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <button class="vel-ring-2 vel-ring-primary vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">Primary</button>
  <button class="vel-ring-2 vel-ring-success vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">Success</button>
  <button class="vel-ring-2 vel-ring-danger vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">Danger</button>
  <button class="vel-ring-2 vel-ring-warning vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">Warning</button>
  <button class="vel-ring-2 vel-ring-info vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">Info</button>
</div>

Ring with offset

example.html

<div style="display:flex;gap:20px;padding:1.5rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <button class="vel-ring-2 vel-ring-primary vel-ring-offset-2 vel-rounded-md" style="padding:8px 16px;background:#111827;color:#e2e8f0;border:none;cursor:pointer;">offset-2</button>
  <button class="vel-ring-2 vel-ring-success vel-ring-offset-4 vel-rounded-md" style="padding:8px 16px;background:#111827;color:#e2e8f0;border:none;cursor:pointer;">offset-4</button>
  <button class="vel-ring-inset vel-ring-primary vel-rounded-md" style="padding:8px 16px;background:#111827;color:#e2e8f0;border:none;cursor:pointer;">inset</button>
</div>