@vibe-labs/design-borders

Border tokens and utility classes for the Vibe Design System — radius, width, style, color, and divide utilities.

Installation

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

Tokens

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

Utilities / Generated Classes

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

---

Usage Guide

Provides border radius, width, style, color, and divide utilities for consistent edge treatment across the Vibe Design System.

Import

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

Common Patterns

1. Standard card with subtle border

<div class="rounded-lg border border-subtle p-6">
  Card content
</div>

2. Input field with focus state

<input
  class="rounded-md border border-default focus:border-strong"
  type="text"
/>

3. Status badge with colored border

<span class="rounded-full border border-success px-3 py-1 text-sm">
  Active
</span>

<span class="rounded-full border border-danger px-3 py-1 text-sm">
  Error
</span>

4. Dividers between list items

<ul class="divide-y">
  <li class="py-3">Item one</li>
  <li class="py-3">Item two</li>
  <li class="py-3">Item three</li>
</ul>

5. Avatar with full circle and colored ring

<img
  class="rounded-full border-2 border-blue"
  src="avatar.jpg"
  alt="User"
/>

6. Top-only border as visual separator

<footer class="border-t border-subtle pt-8 mt-16">
  Footer content
</footer>

Token Reference

Token	Value	Description
--radius-sm	small	Subtle rounding
--radius-md	medium	Default for inputs
--radius-lg	large	Cards, panels
--radius-full	9999px	Pills, avatars
--border-default	neutral-600	Standard border
--border-strong	neutral-400	Emphasized border
--border-subtle	neutral-750	De-emphasized border