@vibe-labs/design-sizing

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

Installation

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

Tokens

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

Utilities / Generated Classes

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

---

Usage Guide

Provides width, height, aspect ratio, and object-fit utilities for controlling element dimensions in the Vibe Design System.

Import

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

Common Patterns

1. Constrain prose content width

<article class="max-w-prose mx-auto px-6">
  <p>Body text constrained to ~65 characters wide for optimal readability.</p>
</article>

2. Full-height viewport layout

<div class="min-h-dvh flex flex-col">
  <header class="h-16 bg-base">Header</header>
  <main class="flex-1">Content</main>
  <footer class="h-12 bg-base">Footer</footer>
</div>

3. Responsive image with aspect ratio

<div class="aspect-video w-full overflow-hidden rounded-lg">
  <img
    class="object-cover w-full h-full"
    src="video-thumbnail.jpg"
    alt="Video thumbnail"
  />
</div>

4. Square avatar

<img
  class="aspect-square w-12 object-cover rounded-full"
  src="avatar.jpg"
  alt="User avatar"
/>

5. Container limited to page max-width

<div class="max-w-xl mx-auto px-4">
  Page content constrained to 1280px max
</div>

6. Fractional widths in a flex row

<div class="flex gap-4">
  <div class="w-1/3 bg-elevated p-4">One third</div>
  <div class="w-2/3 bg-elevated p-4">Two thirds</div>
</div>

Token Reference

Token	Value	Description
--max-w-xs	320px	Small components
--max-w-sm	640px	Narrow content columns
--max-w-md	768px	Form layouts
--max-w-lg	1024px	Page sections
--max-w-xl	1280px	Full page layouts
--max-w-prose	65ch	Readable text columns