Densidad
Dos modos gobernados por tokens y no por componente. El panel es la base: controles de 36 px para trabajar seis horas con tablas. La cómoda sube a 48 px para las superficies de conversación y táctiles, donde el objetivo del dedo manda sobre la densidad.
Los tokens
Leídos del tokens.css instalado. El modo cómodo no es una clase de cada componente: es [data-density="cozy"] en cualquier contenedor, que redefine estos valores para todo lo que hay dentro. --density multiplica la unidad de espaciado de Tailwind, así que crecen a la vez los rellenos, las alturas y las separaciones de los componentes del kit y de tus propias pantallas; --density-text sube el texto pequeño de 14 a 16 px, que además evita el zoom de iOS al enfocar un campo.
--densityEscala todo el espaciado: --spacing, y con él rellenos, alturas y separaciones--spacingLa unidad de p-4, gap-3, h-9…: 0.25rem × --density--density-textEscala el texto pequeño: text-xs y text-sm--text-smEl texto de controles y tablas--control-hAltura de los controles--control-h-smAltura de los controles sm--field-radiusRadio de los controles--card-radiusRadio de los contenedoresPanel y cómoda, lado a lado
El mismo formulario dos veces; el segundo vive dentro de un div con data-density="cozy". Los campos y los botones pasan de 36 a 48 px, el texto de 14 a 16 px y los radios de 6 a 8 px, y la separación entre ellos crece en la misma proporción, sin tocar su marcado ni pasarles una prop.
Panel
Cómoda · data-density="cozy"
Activarla
En toda la app, con el atributo en <html>; en una sola superficie, con el atributo en su contenedor. Si el usuario puede elegir, cambia document.documentElement.dataset.density: los tokens hacen el resto sin volver a renderizar.
// Toda la app en cómoda: un portal de huéspedes, una app de chat
<html lang="es" data-density="cozy">
// Solo la conversación, dentro de un panel que sigue en modo panel
<section data-density="cozy" className="flex h-full flex-col">
{/* mensajes y ChatInput */}
</section>Cuándo usar cada una
- Panel, por defecto: tablas, calendarios de reservas, formularios de ajustes, facturación. Todo lo que se mira muchas horas seguidas con ratón.
- Cómoda: superficies conversacionales y táctiles, donde el objetivo de 44 px o más importa más que ver diez filas extra. Los radios suben a 8 y 14 px para que las burbujas no se sientan cortantes, dentro de la misma disciplina apretada.