@vibe-labs/design-forms

Form reset, input/button tokens, and sizing utilities for the Vibe Design System.

Installation

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

Tokens

Form Reset (@layer vibe.reset)

Opinionated form normalization including:

• Universal box-sizing: border-box and tap highlight removal
• font: inherit on all form elements with appearance reset
• cursor: pointer on buttons, cursor: not-allowed + opacity on disabled elements
• Placeholder color normalization
• Number input spinner removal
• Search input clear button removal
• Vertical-only textarea resize

Input Sizing (@layer vibe.tokens)

Token	sm	md	lg
--input-height-{size}	2rem	2.5rem	3rem
--input-px-{size}	--space-2	--space-3	--space-4

Input Appearance (@layer vibe.tokens)

Token	Default	Description
--input-radius	--radius-md	Border radius
--input-border-width	--border-width-1	Border width
--input-border	--border-subtle	Default border color
--input-border-hover	--border-strong	Hover border color
--input-border-focus	--color-accent	Focus border color
--input-bg	--surface-elevated	Background
--input-text	--text-primary	Text color
--input-placeholder	--text-muted	Placeholder color
--input-disabled-opacity	0.5	Disabled state opacity
--input-focus-ring-width	2px	Focus ring width
--input-focus-ring-color	--color-accent	Focus ring color

Button Sizing (@layer vibe.tokens)

Token	sm	md	lg
--btn-height-{size}	2rem	2.5rem	3rem
--btn-px-{size}	--space-3	--space-4	--space-6
--btn-font-size-{size}	--text-xs	--text-base	--text-md

Button Appearance (@layer vibe.tokens)

Token	Default
--btn-radius	--radius-md
--btn-font-weight	--font-semibold (600)

Select (@layer vibe.tokens)

Token	Default
--select-indicator-size	1rem
--select-indicator-color	--text-muted

Utilities / Generated Classes

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

Input Sizing

.input-sm · .input-md · .input-lg — sets height and horizontal padding

Button Sizing

.btn-sm · .btn-md · .btn-lg — sets height, horizontal padding, and font size

Dist Structure

File	Description
index.css	Barrel — imports both files below
forms.css	Form reset + token definitions
forms.g.css	Generated sizing utilities

Dependencies

References tokens from spacing (--space-*), borders (--radius-*, --border-width-*, --border-*), colors (--color-accent), surfaces (--surface-*), and typography (--text-*, --font-*) packages.

Build

npm run build

---

Usage Guide

Provides form reset, input/button sizing tokens, and sizing utility classes for consistent form element treatment in the Vibe Design System.

Import

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

Common Patterns

1. Sized input field

<input
  class="input-md rounded-md border border-default bg-elevated text-primary"
  type="text"
  placeholder="Enter value..."
/>

2. Three button sizes side by side

<button class="btn-sm bg-elevated rounded-md">Small</button>
<button class="btn-md bg-accent rounded-md">Default</button>
<button class="btn-lg bg-accent rounded-md font-semibold">Large</button>

3. Compact search bar

<form class="flex gap-2">
  <input class="input-sm flex-1 rounded-md border border-default" type="search" />
  <button class="btn-sm bg-accent rounded-md">Search</button>
</form>

4. Override input appearance tokens for a custom theme

:root {
  --input-bg: var(--color-neutral-800);
  --input-border: var(--color-neutral-600);
  --input-border-focus: var(--color-blue-400);
  --input-radius: var(--radius-lg);
}

5. Inline form row (label + input + button)

<div class="flex items-center gap-3">
  <label class="text-sm font-medium" for="email">Email</label>
  <input
    id="email"
    class="input-md flex-1 rounded-md border border-default"
    type="email"
  />
  <button class="btn-md bg-accent rounded-md">Subscribe</button>
</div>

6. Disabled field state

The reset applies cursor: not-allowed and reduced opacity automatically to [disabled] elements. No extra class needed:

<input class="input-md rounded-md border border-default" disabled value="Read only" />

Token Reference

Token	Default	Overridable
--input-height-sm/md/lg	2rem / 2.5rem / 3rem	Yes
--input-bg	--surface-elevated	Yes
--input-border	--border-subtle	Yes
--input-border-focus	--color-accent	Yes
--input-radius	--radius-md	Yes
--btn-height-sm/md/lg	2rem / 2.5rem / 3rem	Yes
--btn-font-weight	600 (semibold)	Yes
--btn-radius	--radius-md	Yes