Appearance
@vibe-labs/design-gradients
Gradient tokens and utility classes for the Vibe Design System.
Usage
css
@import "@vibe-labs/design-gradients";Contents
Tokens (gradients.css)
CSS custom properties defined in @layer vibe.tokens:
Direction
| Token | Default |
|---|---|
--gradient-direction | to bottom |
Card / Surface
| Token | Description |
|---|---|
--gradient-card | Standard card gradient (neutral 800 → 900) |
--gradient-card-subtle | Subtle card gradient (neutral 850 → 900) |
--gradient-card-elevated | Elevated card gradient (neutral 750 → 850) |
Accent
| Token | Description |
|---|---|
--gradient-accent | Brand accent gradient (135deg) |
--gradient-accent-subtle | Subtle accent wash (low opacity) |
Functional
| Token | Description |
|---|---|
--gradient-shimmer | Horizontal shimmer effect |
--gradient-fade-t/b/l/r | Directional fades to --surface-base |
--gradient-depth | Radial vignette overlay |
Generated Utilities (gradients.g.css)
Utility classes generated into @layer vibe.utilities via the build script.
Direction
.bg-gradient-to-t · .bg-gradient-to-tr · .bg-gradient-to-r · .bg-gradient-to-br · .bg-gradient-to-b · .bg-gradient-to-bl · .bg-gradient-to-l · .bg-gradient-to-tl · .bg-gradient-radial
Sets --gradient-direction for use in custom gradients.
Semantic Gradients
- Card:
.bg-gradient-card·.bg-gradient-card-subtle·.bg-gradient-card-elevated - Accent:
.bg-gradient-accent·.bg-gradient-accent-subtle - Shimmer:
.bg-gradient-shimmer - Fades:
.bg-gradient-fade-t·.bg-gradient-fade-b·.bg-gradient-fade-l·.bg-gradient-fade-r - Depth:
.bg-gradient-depth - Reset:
.bg-gradient-none
Dist Structure
| File | Description |
|---|---|
index.css | Barrel — imports both files below |
gradients.css | Token definitions |
gradients.g.css | Generated utility classes |
Dependencies
Requires --color-neutral-*, --color-accent, --color-accent-dark, and --surface-base tokens from upstream packages.
Build
bash
npm run build