@vibe-labs/design-borders

Border tokens and utility classes for the Vibe Design System.

Usage

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

Contents

Tokens (borders.css)

CSS custom properties defined in @layer vibe.tokens:

Token	Default	Description
--radius-none … --radius-full	0 → 9999px	Border radius scale (none, sm, md, lg, xl, 2xl, full)
--border-width-0 … --border-width-4	0 → 4px	Border width scale (0, 1, 2, 4)
--border-default	--color-neutral-600	Standard border color
--border-strong	--color-neutral-400	Emphasized border color
--border-subtle	--color-neutral-750	De-emphasized border color

Generated Utilities (borders.g.css)

Utility classes generated into @layer vibe.utilities via the build script.

Border Radius

• .rounded-{size} — all corners (none | sm | md | lg | xl | 2xl | full)
• .rounded-{side}-{size} — directional (t | r | b | l)

Border Width

• .border / .border-{n} — all sides (0, 1, 2, 4; .border = 1)
• .border-{side} / .border-{side}-{n} — per side (t | r | b | l | x | y)

Border Style

.border-solid · .border-dashed · .border-dotted · .border-none

Border Color

• Semantic: .border-default · .border-strong · .border-subtle · .border-transparent
• Palette: .border-{color} — blue, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow
• Status: .border-success · .border-warning · .border-danger · .border-info

Divide

• .divide-x / .divide-y — sibling dividers (applies to * + *)
• .divide-strong — stronger divider color

Dist Structure

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

Dependencies

Requires --color-* tokens from @vibe-labs/design-colors (or equivalent).

Build

npm build