@vibe-labs/design-elevation

Box shadow, elevation, and focus ring tokens and utility classes for the Vibe Design System.

Installation

@import "@vibe-labs/design-elevation";

Tokens

CSS custom properties defined in @layer vibe.tokens:

Box Shadows

Token	Description
--shadow-none	No shadow
--shadow-xs … --shadow-2xl	Elevation scale (6 levels)
--shadow-inner	Inset shadow

Focus Ring

Token	Default	Description
--ring-color	--color-accent	Ring color
--ring-offset-color	--surface-base	Gap color between ring and element
--ring-offset-width	2px	Offset gap width

Utilities / Generated Classes

Utility classes generated into @layer vibe.utilities via the build script.

Shadows

.shadow-none · .shadow-xs · .shadow-sm · .shadow-md · .shadow-lg · .shadow-xl · .shadow-2xl · .shadow-inner

Focus Rings

• .ring-0 — remove ring
• .ring-{w} — outer ring: 1 | 2 | 4
• .ring-inset-{w} — inset ring: 1 | 2

Ring Colors

• Palette: .ring-{color} — blue, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow
• Status: .ring-success · .ring-warning · .ring-danger · .ring-info

Dist Structure

File	Description
index.css	Barrel — imports both files below
elevation.css	Token definitions
elevation.g.css	Generated utility classes

Dependencies

Requires --color-accent, --surface-base, and --color-* tokens from upstream packages.

Build

npm run build

---

Usage Guide

Provides box shadow and focus ring utilities to communicate elevation and keyboard focus state in the Vibe Design System.

Import

@import "@vibe-labs/design-elevation";

Common Patterns

1. Communicate card elevation hierarchy

<div class="shadow-sm rounded-lg p-4">Resting card</div>
<div class="shadow-lg rounded-lg p-4">Elevated card (hovered)</div>
<div class="shadow-2xl rounded-xl p-6">Modal or dialog</div>

2. Inset shadow for pressed/active states

<button class="shadow-inner active:shadow-inner">
  Press me
</button>

3. Focus ring on interactive elements

<button class="ring-2 ring-blue focus:ring-4">
  Keyboard-focusable button
</button>

4. Status-coloured focus ring for form validation

<input class="ring-2 ring-danger" aria-invalid="true" />
<input class="ring-2 ring-success" aria-invalid="false" />

5. Inset ring for inputs (no layout shift)

<input class="ring-inset-2 ring-blue focus:ring-inset-2 focus:ring-blue" />

6. Remove shadow on mobile, show on desktop

.card {
  box-shadow: var(--shadow-none);
}

@media (min-width: 768px) {
  .card {
    box-shadow: var(--shadow-md);
  }
}

Token Reference

Token	Description
--shadow-none	No shadow
--shadow-xs	Very subtle lift
--shadow-sm	Slight elevation (cards)
--shadow-md	Moderate elevation
--shadow-lg	High elevation (dropdowns)
--shadow-xl	Very high (floating panels)
--shadow-2xl	Maximum (modals)
--shadow-inner	Inset pressed effect
--ring-color	Default: --color-accent