@vibe-labs/design-images

Background image, rendering, and composable filter utilities for the Vibe Design System.

Installation

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

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

Tokens

Core import has no tokens. The opt-in filters sub-export defines:

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

Utilities / Generated Classes

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).

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

---

Usage Guide

Provides background image control, rendering, and composable filter utilities for the Vibe Design System.

Import

/* Core background utilities */
@import "@vibe-labs/design-images";

/* Add composable filters (opt-in) */
@import "@vibe-labs/design-images/filters";

Common Patterns

1. Full-bleed hero background

<section
  class="bg-cover bg-center bg-no-repeat"
  style="background-image: url('/hero.jpg');"
>
  <div class="overlay-scrim">
    <h1>Hero Title</h1>
  </div>
</section>

2. Parallax-style fixed background

<div
  class="bg-fixed bg-cover bg-center h-96"
  style="background-image: url('/parallax.jpg');"
></div>

3. Pixel-perfect icon rendering (sprite or pixel art)

<img class="render-pixel" src="icon-8x.png" alt="" style="width: 32px;" />

4. Desaturate an image on hover (opt-in filters)

<div class="grayscale hover:grayscale-0 transition-all duration-normal">
  <img src="photo.jpg" alt="Team member" />
</div>

5. Combine multiple composable filters

Because filters use CSS variable composition, classes stack correctly:

<img
  class="blur-sm brightness-75 grayscale"
  src="background.jpg"
  alt=""
/>

6. Mix blend mode for text over image

<div class="relative bg-cover bg-center" style="background-image: url('/bg.jpg');">
  <h1 class="mix-blend-screen text-white text-display-xl font-black">
    OVERLAY TEXT
  </h1>
</div>

Token Reference

Token	Values	Use
--filter-blur-sm/md/lg/xl	2px–16px	Blur intensity
--filter-brightness-*	0.5–1.5	Brightness adjustment
--filter-contrast-*	0.5–1.5	Contrast adjustment
--filter-saturate-*	0–2	Saturation adjustment