@vibe-labs/design-images

Background image, filter, and blend mode utilities for the Vibe Design System.

Usage

/* Core: background image + rendering utilities */
@import "@vibe-labs/design-images";

/* Optional: composable filters + blend modes */
@import "@vibe-labs/design-images/filters";

Contents

Core Utilities (image.g.css)

Generated into @layer vibe.utilities. No tokens required.

Background Size

.bg-cover · .bg-contain · .bg-auto

Background Position

.bg-center · .bg-top · .bg-bottom · .bg-left · .bg-right

Background Repeat

.bg-repeat · .bg-no-repeat · .bg-repeat-x · .bg-repeat-y

Background Attachment

.bg-fixed · .bg-local · .bg-scroll

Image Rendering

.render-auto · .render-crisp · .render-pixel

Filter Utilities (opt-in via ./filters)

Composable filter system using CSS variable composition — filters stack correctly when combined (e.g. .blur-sm.grayscale applies both).

Filter Tokens (filters.css)

Token group	Values
--filter-blur-{sm|md|lg|xl}	2px → 16px
--filter-brightness-{50–150}	0.5 → 1.5
--filter-contrast-{50–150}	0.5 → 1.5
--filter-saturate-{0–200}	0 → 2

Blur

.blur-none · .blur-sm · .blur-md · .blur-lg · .blur-xl

Toggle Filters

.grayscale / .grayscale-0 · .sepia / .sepia-0 · .invert / .invert-0

Brightness

.brightness-50 · .brightness-75 · .brightness-90 · .brightness-100 · .brightness-110 · .brightness-125 · .brightness-150

Contrast

.contrast-50 · .contrast-75 · .contrast-100 · .contrast-125 · .contrast-150

Saturate

.saturate-0 · .saturate-50 · .saturate-100 · .saturate-150 · .saturate-200

Hue Rotate

.hue-rotate-15 · .hue-rotate-30 · .hue-rotate-60 · .hue-rotate-90 · .hue-rotate-180

Mix Blend Mode

.mix-blend-{mode} — normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion

Dist Structure

File	Description
index.css	Barrel — core background image utilities
images.css	Core utilities
images.g.css	Generated core utilities
index.filters.css	Barrel — filter tokens + generated filter utilities
filters.css	Filter classes
filters.g.css	Generated filter + blend mode utilities

Dependencies

Core is self-contained. Filter tokens reference no upstream packages.

Build

npm run build