@vibe-labs/design-forms

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

Usage

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

Contents

Reset & Tokens (forms.css)

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

Tokens (@layer vibe.tokens)

Input sizing:

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

Input appearance:

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:

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:

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

Select:

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

Generated Utilities (forms.g.css)

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