@vibe-labs/design-spacing

Spacing tokens and padding, margin, and gap utilities for the Vibe Design System.

Usage

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

Contents

Tokens (spacing.css)

Spacing scale defined in @layer vibe.tokens:

Token	Value
--space-0	0
--space-1	0.25rem (4px)
--space-2	0.5rem (8px)
--space-3	0.75rem (12px)
--space-4	1rem (16px)
--space-5	1.25rem (20px)
--space-6	1.5rem (24px)
--space-8	2rem (32px)
--space-10	2.5rem (40px)
--space-12	3rem (48px)
--space-16	4rem (64px)
--space-20	5rem (80px)
--space-24	6rem (96px)

Generated Utilities

All classes generated into @layer vibe.utilities. Scale steps: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24.

Padding (padding.g.css)

• .p-{n} — all sides
• .px-{n} / .py-{n} — horizontal (inline) / vertical
• .pt-{n} · .pr-{n} · .pb-{n} · .pl-{n} — individual sides

Margin (margin.g.css)

• .m-{n} — all sides
• .mx-{n} / .my-{n} — horizontal (inline) / vertical
• .mt-{n} · .mr-{n} · .mb-{n} · .ml-{n} — individual sides

Gap (gap.g.css)

• .gap-{n} — both axes
• .gap-x-{n} — column gap
• .gap-y-{n} — row gap

Horizontal utilities use inline-start/inline-end for RTL support.

Dist Structure

File	Description
index.css	Barrel — imports all files below
spacing.css	Token definitions
padding.g.css	Generated padding utilities
margin.g.css	Generated margin utilities
gap.g.css	Generated gap utilities

Dependencies

None — this package is self-contained.

Build

npm run build