Appearance
@vibe-labs/design-surfaces
Surface, opacity, overlay, and backdrop tokens and utilities for the Vibe Design System.
Usage
css
@import "@vibe-labs/design-surfaces";Contents
Tokens (surfaces.css)
CSS custom properties defined in @layer vibe.tokens:
Opacity
--opacity-0 … --opacity-100 — steps: 0, 5, 10, 20, 25, 50, 75, 80, 90, 95, 100
Backdrop Blur
| Token | Value |
|---|---|
--blur-sm | 4px |
--blur-md | 8px |
--blur-lg | 16px |
--blur-xl | 24px |
Overlays
| Token | Default | Description |
|---|---|---|
--overlay-scrim | rgba(0,0,0,0.4) | Standard scrim |
--overlay-heavy | rgba(0,0,0,0.6) | Heavy overlay |
--overlay-tint | rgba(255,255,255,0.08) | Light tint |
Semantic Backgrounds
| Token | Default |
|---|---|
--surface-background | --color-neutral-950 |
--surface-base | --color-neutral-900 |
--surface-elevated | --color-neutral-850 |
--surface-subtle | --color-neutral-850 |
--surface-overlay | --color-neutral-800 |
--surface-modal | --color-neutral-750 |
Semantic Foregrounds
| Token | Default |
|---|---|
--surface-fg-primary | --text-primary |
--surface-fg-secondary | --text-secondary |
--surface-fg-inverse | --text-inverse |
--surface-fg-muted | --text-muted |
--surface-fg-disabled | --text-disabled |
Generated Utilities (surfaces.g.css)
All classes generated into @layer vibe.utilities.
Opacity
.opacity-{n} — 0, 5, 10, 20, 25, 50, 75, 80, 90, 95, 100
Backdrop Blur
.backdrop-blur-none · .backdrop-blur-sm · .backdrop-blur-md · .backdrop-blur-lg · .backdrop-blur-xl
Overlays
.overlay-scrim · .overlay-heavy · .overlay-tint
Semantic Backgrounds
.bg-background · .bg-base · .bg-elevated · .bg-subtle · .bg-overlay · .bg-modal
Semantic Foregrounds
.fg-primary · .fg-secondary · .fg-inverse · .fg-muted · .fg-disabled
Background Blend Modes
.bg-blend-normal · .bg-blend-multiply · .bg-blend-screen · .bg-blend-overlay · .bg-blend-darken · .bg-blend-lighten
Dist Structure
| File | Description |
|---|---|
index.css | Barrel — imports both files below |
surfaces.css | Token definitions |
surfaces.g.css | Generated utility classes |
Dependencies
Requires --color-neutral-* tokens from @vibe-labs/design-colors and --text-* tokens from @vibe-labs/design-typography.
Build
bash
npm run build