Orali Design System

Propósito

Campos de texto para formularios (dirección, contacto, cupón) y búsqueda.

Form para formularios y pill para búsqueda y newsletter, siempre con la misma altura.

Foco, error, validado y deshabilitado se entienden sin depender solo del color.

Cada número es una parte del componente real: hacé clic para ver sus propiedades y tokens.

Hacé clic en un número para ver las propiedades y los tokens de esa parte.

El componente real, en vivo.

La prop variant define radio y color de borde. Ambas miden 44px de alto.

Formularios: radio de 8 px.

El foco recolorea el borde a neutral.900 con 2 px de grosor (inset, sin mover el layout). El rojo queda solo para el error.

Probá el foco con Tab o click.

Field envuelve el control en un <label>: no hace falta id ni htmlFor.

Label con tipografía label (14/500).

El Select comparte estilos con el input. La prop size es md (barras de herramientas) o lg (formularios, por defecto).

44px de alto.

Se leen en vivo de @orali/design-tokens.

Muestra	Token	Valor	Referencia
		8px	var(--radius-md)
		44px	var(--size-control-lg)
		12px	var(--space-3)
		9999px	var(--radius-full)
		44px	var(--size-control-lg)
		16px	var(--space-4)
		#ffffff	var(--color-form-bg)
		#1a1a1a	var(--color-text-primary)
		#8e8e8e	var(--color-form-border)
		#1a1a1a	var(--color-form-border-focus)
		#ffffff	var(--color-form-bg)
		#1a1a1a	var(--color-text-primary)
		#8e8e8e	var(--color-form-border)
		#1a1a1a	var(--color-form-border-focus)

Muestra	Token	Valor	Uso
		#ffffff
		#8e8e8e	Borde de controles: 3.28:1 (WCAG 1.4.11)
		#525252
		#1a1a1a	Foco de campos: 2px (border-width.focus) en neutral.900. El rojo queda solo para error
		#dc2626
		#fef2f2
		#f5f5f5
		#6b6b6b	5.33:1. Es el gris más claro que pasa AA para texto
		#1a1a1a	Etiqueta del campo
		#1a1a1a	Valor ingresado. Se distingue del placeholder por contraste
		#6b6b6b	Texto de ayuda debajo del campo
		#d4d4d4
		#d4d4d4
		#d4d4d4	Etiqueta de campo deshabilitado