@vibe-labs/design-sizing

Width, height, aspect ratio, and object-fit tokens and utilities for the Vibe Design System.

Usage

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

Contents

Tokens (sizing.css)

CSS custom properties defined in @layer vibe.tokens:

Token	Value	Description
--max-w-xs	320px	Extra small max-width
--max-w-sm	--breakpoint-sm (640px)	Small max-width
--max-w-md	--breakpoint-md (768px)	Medium max-width
--max-w-lg	--breakpoint-lg (1024px)	Large max-width
--max-w-xl	--breakpoint-xl (1280px)	Extra large max-width
--max-w-prose	65ch	Optimal reading width

Generated Utilities (sizing.g.css)

All classes generated into @layer vibe.utilities.

Width

• Keywords: .w-auto · .w-full · .w-screen · .w-dvw · .w-fit · .w-min · .w-max
• Fractions: .w-1/2 · .w-1/3 · .w-2/3 · .w-1/4 · .w-3/4 · .w-1/5 · .w-2/5 · .w-3/5 · .w-4/5

Height

.h-auto · .h-full · .h-screen · .h-dvh · .h-fit · .h-min · .h-max

Min Width

.min-w-0 · .min-w-full · .min-w-fit · .min-w-min · .min-w-max

Max Width

.max-w-none · .max-w-xs · .max-w-sm · .max-w-md · .max-w-lg · .max-w-xl · .max-w-prose · .max-w-full · .max-w-screen

Min Height

.min-h-0 · .min-h-full · .min-h-screen · .min-h-dvh · .min-h-fit

Max Height

.max-h-none · .max-h-full · .max-h-screen · .max-h-dvh · .max-h-fit

Aspect Ratio

.aspect-auto · .aspect-square · .aspect-video (16/9) · .aspect-photo (4/3) · .aspect-portrait (3/4) · .aspect-wide (21/9)

Object Fit & Position

• Fit: .object-cover · .object-contain · .object-fill · .object-none · .object-scale-down
• Position: .object-center · .object-top · .object-bottom · .object-left · .object-right

Dist Structure

File	Description
index.css	Barrel — imports both files below
sizing.css	Token definitions
sizing.g.css	Generated utility classes

Dependencies

References --breakpoint-* tokens from @vibe-labs/design-responsive (with fallbacks).

Build

npm run build