@vibe-labs/design-filters

Compound filter and creative effect utilities for the Vibe Design System. All rules sit in @layer vibe.utilities.

This package provides compound/creative effects that stack multiple filter functions together. It complements @vibe-labs/design-images which provides single-property filter utilities (.blur-*, .grayscale, .brightness-* etc.) as an opt-in sub-export.

Installation

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

Tokens

None — this package applies compound filter effects via utility classes only.

Utilities / Generated Classes

Icon Outlines

Shape-aware outlines using stacked drop-shadow. On SVGs these trace the actual path — not the bounding box.

.icon-outline · .icon-outline-subtle · .icon-outline-strong · .icon-outline-light

The -light variant uses white shadows for icons on dark backgrounds.

Glow

Soft luminous halo via drop-shadow. Works on both SVGs and HTML elements.

.glow-sm · .glow-md · .glow-lg · .glow-accent

The accent variant uses --color-accent.

Text Shadows

.text-shadow-sm · .text-shadow-md · .text-shadow-lg · .text-shadow-none

Frosted Glass

Opinionated presets combining backdrop-filter (blur + saturate) with a semi-transparent background.

.frosted · .frosted-heavy · .frosted-light

Color Grading

Compound filter stacks for mood and tone shifts.

.filter-muted · .filter-vivid · .filter-warm · .filter-cool

Reset

.filter-none · .backdrop-filter-none

Dist Structure

File	Description
index.css	Barrel — imports all utilities
filters.css	All compound filter/effect classes

Dependencies

--color-accent is referenced by .glow-accent. No other upstream token dependencies.

Build

npm run build

---

Usage Guide

Provides compound filter and creative effect utilities for icons, text, surfaces, and imagery in the Vibe Design System.

Import

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

Common Patterns

1. SVG icon with shape-aware outline

Unlike outline or box-shadow, icon-outline traces the actual SVG path:

<img class="icon-outline" src="icon.svg" alt="" />
<img class="icon-outline-light" src="icon.svg" alt="" />  <!-- white outline on dark bg -->

2. Glowing accent icon

<img class="glow-accent" src="brand-icon.svg" alt="Brand" />

3. Subtle glow on a status indicator

<span class="glow-sm inline-block w-3 h-3 rounded-full bg-success-500"></span>

4. Frosted glass panel

<div class="frosted rounded-xl p-6 border border-subtle">
  <h2>Glass panel content</h2>
  <p>Semi-transparent with backdrop blur + saturate.</p>
</div>

5. Color grading a background image section

<section class="relative">
  <img class="filter-warm w-full object-cover h-64" src="scene.jpg" alt="" />
  <div class="absolute inset-0 flex items-center justify-center">
    <h2 class="text-display-md font-bold text-shadow-md">Warm Scene</h2>
  </div>
</section>

6. Muted / desaturated treatment for inactive items

<div class="filter-muted opacity-75">
  <img src="product.jpg" alt="Sold out product" />
  <p>Out of stock</p>
</div>

Token Reference

This package uses no tokens — all effects are self-contained compound filter stacks.

Class	Effect
.icon-outline	SVG path outline via stacked drop-shadow
.icon-outline-light	White shadow variant for dark backgrounds
.glow-accent	Halo using --color-accent
.frosted	backdrop-blur + saturate + semi-transparent bg
.frosted-heavy	Stronger frosted preset
.filter-warm	Warm tone via compound filter stack
.filter-cool	Cool tone via compound filter stack
.filter-muted	Desaturated, slightly dimmed
.filter-vivid	Boosted saturation and contrast