@vibe-labs/design-elevation

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

Usage

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

Contents

Tokens (elevation.css)

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

Generated Utilities (elevation.g.css)

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