@codenhub/styles 0.6.0 → 0.8.0

package/docs/es/usage/forms.md

@@ -0,0 +1,256 @@
+---
+title: Formularios
+description: Campos con etiqueta, pistas y errores, iconos y prefijos fijos, selects y toggles de checkbox, radio y switch.
+order: 2
+source: 00e6a57cfd62f524fde5a550af721786edd7a5dd
+---
+
+# Formularios
+
+La tarjeta de perfil tiene un botón Guardar pero nada que guardar. Esta página la completa: un nombre visible con una pista, una dirección de email que muestra un error de validación, una dirección de perfil con un prefijo fijo, un select de idioma y los toggles de notificaciones, facturación y visibilidad del perfil. El paquete da estilo a cada control; tu HTML aporta las etiquetas, la validación y los mensajes de error, y esta página muestra cómo conectarlos.
+
+## Un campo con etiqueta
+
+Un campo es una etiqueta, un control y una pista opcional, apilados:
+
+```html
+<div class="field">
+  <label class="label" for="display-name">Display name</label>
+  <input class="ipt" id="display-name" name="display-name" aria-describedby="display-name-hint" />
+  <span class="hint" id="display-name-hint">Shown on invoices and shared projects.</span>
+</div>
+```
+
+- `.field` apila sus hijos con una separación pequeña (0.35rem) y ocupa todo el ancho.
+- `.label` define el texto de la etiqueta: 1rem, peso medio.
+- `.hint` es un texto de ayuda más pequeño y en color secundario. Mantenlo fuera del `<label>` y apunta `aria-describedby` a él, para que un lector de pantalla lo anuncie como descripción en lugar de leerlo como parte del nombre del campo.
+- `.ipt` da estilo a un `<input>`. Usa `.textarea` para un `<textarea>` y `.select` para un `<select>`.
+
+Un control de texto mide al menos 2.5rem de alto (`--control-height`), la misma altura que un botón por defecto, así que un campo y un botón quedan alineados en una fila. Su aspecto por defecto es sin relleno y con borde. Un `.textarea` mide al menos 7rem de alto y se puede redimensionar en vertical.
+
+### Tamaños
+
+`.ipt`, `.select`, `.textarea` e `.input-group` aceptan las clases de tamaño del botón, así que un campo pequeño y un botón pequeño quedan alineados en una fila:
+
+| Clase       | Altura | Relleno lateral | Texto     |
+| ----------- | ------ | --------------- | --------- |
+| `.sm`       | 2rem   | 0.625rem        | 0.875rem  |
+| por defecto | 2.5rem | 0.75rem         | heredado  |
+| `.lg`       | 3rem   | 1rem            | 1.0625rem |
+
+Las esquinas escalan con el tamaño, como las de un botón. Un `.textarea` conserva su altura mínima de 7rem en todos los tamaños; la clase cambia su texto, su relleno y sus esquinas. Define el tamaño de un `.input-group` en el grupo, no en el control de dentro: el control y sus adornos toman el tamaño de texto del grupo.
+
+```html
+<div class="cluster tight">
+  <input class="ipt sm" aria-label="Coupon code" />
+  <button class="btn sm" type="button">Apply</button>
+</div>
+```
+
+## Mostrar un error de validación
+
+Marca el control como inválido con `aria-invalid="true"` y dale al mensaje de error `.hint.destructive`:
+
+```html
+<div class="field">
+  <label class="label" for="email">Email</label>
+  <input class="ipt" type="email" id="email" name="email" value="ada@" aria-invalid="true" aria-describedby="email-error" />
+  <span class="hint destructive" id="email-error">Enter a full email address, such as ada@example.com.</span>
+</div>
+```
+
+Un control inválido dibuja su borde, su anillo de foco y el texto escrito en el color destructivo, tenga la clase de intención que tenga. El texto usa el tono legible de ese color, `--intent-strong`, para que siga siendo legible sobre la página. El paquete solo pinta el estado: decidir que el valor es inválido, poner y quitar `aria-invalid` y escribir el mensaje es cosa de tu código. Quita `aria-invalid` en cuanto el valor vuelva a ser válido; si lo dejas puesto, el campo sigue en rojo. En un checkbox, un radio o un switch, `aria-invalid="true"` dibuja el toggle exactamente igual que `.destructive`, marca de activado incluida.
+
+Un `.hint` acepta cualquiera de las seis intenciones incorporadas, no solo `.destructive`: `.hint.success` confirma que se aceptó un valor, y `.hint.warning` señala uno que está permitido pero es inusual. Cada uno se muestra en el tono legible de su intención, `--intent-strong`, que mantiene 4.5:1 frente a la página en los dos temas. Un `.hint` sin intención, con `.neutral` o con una [intención que definiste tú](./theming.md#tu-propia-intención), se queda en el color secundario. Solo lo colorea una clase en el propio `.hint`; una intención en el campo o en un contenedor que lo rodee no lo hace.
+
+```html
+<input class="ipt success" id="username" value="ada" aria-describedby="username-hint" /> <span class="hint success" id="username-hint">That username is available.</span>
+```
+
+## Montar el formulario de perfil
+
+```html
+<form class="card stack" aria-labelledby="profile-title">
+  <h2 class="text-title-sm" id="profile-title">Profile</h2>
+
+  <div class="field">
+    <label class="label" for="display-name">Display name</label>
+    <input class="ipt" id="display-name" name="display-name" value="Ada Lovelace" aria-describedby="display-name-hint" />
+    <span class="hint" id="display-name-hint">Shown on invoices and shared projects.</span>
+  </div>
+
+  <div class="field">
+    <label class="label" for="email">Email</label>
+    <input class="ipt" type="email" id="email" name="email" value="ada@example.com" />
+  </div>
+
+  <div class="field">
+    <label class="label" for="bio">Bio</label>
+    <textarea class="textarea" id="bio" name="bio" rows="3"></textarea>
+  </div>
+
+  <div class="field">
+    <label class="label" for="language">Language</label>
+    <select class="select" id="language" name="language">
+      <option>English</option>
+      <option>Português</option>
+      <option>Español</option>
+    </select>
+  </div>
+
+  <div class="cluster">
+    <button class="btn primary" type="submit">Save changes</button>
+    <button class="btn ghost" type="reset">Cancel</button>
+  </div>
+</form>
+```
+
+Un `.select` dibuja su propia flecha. Con `multiple` o con un `size` mayor que 1 se convierte en un cuadro de lista: sin flecha y tan alto como las filas que muestra. La lista de opciones abierta la dibujan el navegador y el sistema operativo, así que no toma el aspecto del paquete.
+
+## Añadir un icono o un prefijo fijo
+
+`.input-group` pone un icono o un fragmento de texto dentro del borde de un campo. El grupo dibuja el borde, el fondo, el anillo de foco y los estados inválido y deshabilitado; el control de dentro renuncia a los suyos, así que el borde se dibuja una sola vez. Coloca el adorno antes del control para ponerlo al principio, o después para ponerlo al final. Un grupo mide lo mismo que un campo solo, así que queda alineado con los campos y los botones que tiene al lado.
+
+La dirección del perfil siempre empieza con el mismo host, así que es un prefijo fijo:
+
+```html
+<div class="field">
+  <label class="label" for="profile-url">Profile address</label>
+  <div class="input-group" style="--input-group-gap: 0">
+    <span>app.example.com/u/</span>
+    <input class="ipt" id="profile-url" name="profile-url" value="ada" />
+  </div>
+</div>
+```
+
+La separación entre el control y su adorno es `--input-group-gap`, 0.5rem por defecto. Eso le va bien a un icono, pero un texto que debe leerse como parte del valor parece roto con un espacio detrás, así que el ejemplo la pone a `0`. Defínela en el propio `.input-group`: el grupo declara su propio valor por defecto, así que un valor definido en un elemento padre no tiene efecto. Es una de las seis [variables públicas de componente](./customizing.md#variables-de-componente).
+
+Una búsqueda de miembros, con un icono al principio (las clases `ic-lucide-*` necesitan `@codenhub/icons` cargado; consulta [Botones → Cargar los iconos](./buttons.md#cargar-los-iconos)):
+
+```html
+<div class="field">
+  <label class="label" for="member-search">Find a member</label>
+  <div class="input-group">
+    <i class="ic-lucide-search" aria-hidden="true"></i>
+    <input class="ipt" type="search" id="member-search" name="q" />
+  </div>
+</div>
+```
+
+Un `.select` también funciona en un grupo. El grupo quita el relleno lateral del control, excepto al final de un select de una sola fila, que conserva 1.75rem para que el texto de la opción elegida no quede bajo la flecha.
+
+Cualquier elemento sirve como adorno: una clase de icono, un `<svg>` en línea, un `<img>` o texto. El paquete no incluye iconos para los campos, porque una imagen incorporada no podría seguir tu color de texto, tu tema ni tu estética.
+
+El grupo lee la intención y la presentación igual que un `.ipt` solo: `.input-group.primary` colorea el borde y el texto escrito, y `.input-group.soft.edgeless` es un campo hundido en la página. Pon la intención en el grupo, no en el control de dentro: el grupo dibuja el campo, así que el texto del control toma la intención del grupo y una clase de intención en el control no tiene efecto. `aria-invalid="true"` o `disabled` en el control de dentro se aplica a todo el grupo, y lo mismo si cualquiera de los dos está en el propio grupo. El anillo de foco del grupo aparece cuando su campo tiene el foco, así que, a diferencia de un campo solo, también se muestra después de un clic con el ratón. Un botón dentro del grupo, como un botón para borrar, dibuja su propio anillo cuando tiene el foco, y el grupo no dibuja ninguno: un solo anillo marca siempre el único control que tiene el foco.
+
+## Decoraciones del navegador
+
+Algunos tipos de input traen botones integrados: el botón del selector de un campo de fecha u hora, las flechas arriba y abajo de un campo numérico y el botón de borrar de un campo de búsqueda. El paquete los conserva, porque cada uno también hace algo: el botón del selector es la única forma de abrir el selector con el ratón, y el botón de borrar vacía el campo.
+
+`.unadorned` los quita, para un campo en el que dibujas los tuyos. Ponlo en el control o en su `.input-group`. Quitar una decoración quita lo que hacía, así que conecta tú mismo su reemplazo: `input.showPicker()` abre un selector, `stepUp()` y `stepDown()` sustituyen a las flechas, y poner `value` a `""` y lanzar un evento `input` sustituye a un botón de borrar. Escribir sigue funcionando en cualquier caso. Firefox no ofrece ninguna forma de quitar el botón de su selector de fecha, así que se queda.
+
+```html
+<div class="field">
+  <label class="label" for="member-filter">Find a member</label>
+  <div class="input-group unadorned">
+    <i class="ic-lucide-search" aria-hidden="true"></i>
+    <input class="ipt" type="search" id="member-filter" name="q" />
+    <button class="btn icon ghost p-xs" type="button" aria-label="Clear search">
+      <i class="ic-lucide-x" aria-hidden="true"></i>
+    </button>
+  </div>
+</div>
+```
+
+El botón de borrar de arriba es un `<button>` real con un nombre accesible. Un botón dentro de un grupo conserva sus propias clases: un `.btn.ghost` no tiene relleno y, como cualquier botón por defecto, tampoco borde, así que queda dentro del borde del campo sin dibujar uno propio.
+
+## Toggles
+
+La pantalla de ajustes tiene tres tipos de toggle: un checkbox para activar los emails de facturas, botones de radio para elegir un periodo de facturación y un switch para hacer público el perfil. Cada clase va en un `<input>` nativo del tipo correspondiente:
+
+```html
+<fieldset class="stack tight">
+  <legend class="label">Notifications</legend>
+  <label class="cluster tight">
+    <input class="checkbox" type="checkbox" name="invoice-email" checked />
+    Email me when an invoice is ready
+  </label>
+</fieldset>
+
+<fieldset class="stack tight">
+  <legend class="label">Billing period</legend>
+  <label class="cluster tight">
+    <input class="radio" type="radio" name="period" value="monthly" />
+    Monthly
+  </label>
+  <label class="cluster tight">
+    <input class="radio" type="radio" name="period" value="yearly" checked />
+    Yearly, two months free
+  </label>
+</fieldset>
+
+<label class="cluster tight">
+  <input class="switch primary" type="checkbox" role="switch" name="public-profile" />
+  Public profile
+</label>
+```
+
+- `.checkbox` va en `type="checkbox"`, `.radio` en `type="radio"` y `.switch` en `type="checkbox"`. Dale tú mismo `role="switch"` a un switch, para que se anuncie como activado o desactivado en lugar de marcado.
+- `.cluster.tight` en el `<label>` alinea el control con su texto y deja una separación de 0.5rem.
+- Un checkbox con la propiedad `indeterminate` activada, para un grupo en el que solo algunos elementos están marcados, muestra un guion, y lo mantiene aunque también esté `checked`, como hace el checkbox propio del navegador. Actívala desde un script (`input.indeterminate = true`); no hay atributo para ello.
+
+### Colores marcado y sin marcar
+
+Una clase de intención define el color de marcado. Sin intención, un toggle marcado se rellena con el color del texto y la marca se dibuja en el color de la página: una casilla negra con un tick blanco en una página clara. A diferencia de un botón neutro, un toggle neutro se rellena por completo cuando está marcado.
+
+La presentación solo cambia el aspecto sin marcar. Todos los toggles reposan en `.soft`; una vez marcados, cada uno tiene un único aspecto sea cual sea su presentación:
+
+| Toggle               | Relleno sin marcar | Marcado                                                 |
+| -------------------- | ------------------ | ------------------------------------------------------- |
+| `.ghost`             | 0%                 | Relleno del 100%, con la marca en el color de contraste |
+| `.soft`, por defecto | 12%                | Relleno del 100%, con la marca en el color de contraste |
+| `.solid`             | 40%                | Relleno del 100%, con la marca en el color de contraste |
+
+Un checkbox marcado y un switch marcado recortan su marca sobre la placa rellena. Un radio marcado engrosa su anillo hasta el doble del grosor de línea en reposo, con un máximo de 3px, toma en él el color completo de la intención y muestra un punto. El límite de 3px evita que el anillo se trague el punto bajo una estética de línea gruesa.
+
+`.checkbox` y `.radio` siempre dibujan su borde, incluso con `.edgeless`, porque el borde es lo único que muestra una casilla sin marcar. `.switch.ghost` también conserva su borde, ya que sin relleno y sin borde nada marcaría el carril. Estos casos aparecen en [Composición](./composing.md#referencia-de-ejes-por-componente).
+
+Una estética que dibuja su borde como sombra interior, como `.pixel`, no puede hacer esa sombra más ancha que el grosor del borde del toggle. Un checkbox de 16px o un switch de 20px no tiene espacio para un anillo interior más grueso sin tapar la marca. Esto solo importa si defines tú mismo `--ui-shadow-spread`; consulta [Personalización → Tokens de material](./customizing.md#tokens-de-material).
+
+## Relleno y borde en los controles de texto
+
+Los controles de texto aceptan intención, que colorea el borde, el anillo de foco y el texto escrito, este último en el tono legible de la intención (`--intent-strong`). También aceptan los dos ejes de presentación. Su relleno tiene un tope bajo, para que el texto escrito siga siendo legible:
+
+| En un control de texto                                  | Relleno |
+| ------------------------------------------------------- | ------- |
+| `.ghost`, por defecto                                   | 0%      |
+| Cualquier relleno de un contenedor (`.soft` o `.solid`) | 6%      |
+| `.soft` en el control                                   | 12%     |
+| `.solid` en el control                                  | 20%     |
+
+El relleno de un contenedor está pensado para las superficies que contiene, así que un campo al que nadie ha puesto clase solo toma un tenue 6%. Pon la clase en el propio campo para tener más.
+
+El borde funciona igual. Un `.edgeless` heredado de un contenedor se ignora, para que una barra de herramientas no pueda dejar un campo sin borde visible. Un `.edgeless` escrito en el propio control sí se respeta: así es como pides un campo sin borde. Un campo sin borde no cumple el requisito de contraste WCAG 1.4.11 para el límite de un control, así que nunca es un valor por defecto; su anillo de foco sigue mostrándose.
+
+```html
+<input class="ipt success" placeholder="Matches your current password" />
+<input class="ipt soft edged" placeholder="Tinted, with a border" />
+<input class="ipt soft edgeless" placeholder="Sunk into the page" />
+<div class="soft">
+  <input class="ipt" placeholder="A container's .soft gives a 6% tint" />
+</div>
+```
+
+En reposo, el borde de un campo es deliberadamente más claro que 3:1 frente a la página, para que el hover y el foco tengan un cambio visible que hacer. [Accesibilidad → Límites de los controles](../accessibility.md#límites-de-los-controles) explica esta contrapartida y cómo conseguir un borde más intenso.
+
+## Controles deshabilitados
+
+`disabled`, `aria-disabled="true"`, `data-disabled` o `.disabled` en un control lo dibujan con opacidad reducida y un cursor de no permitido. Como con los botones, solo el atributo `disabled` impide la entrada; los demás solo cambian el aspecto.
+
+## Construir tu propio control
+
+Para un control de tipo texto que el paquete no incluye, `.text-control` le da a un elemento los mismos estilos de borde, placeholder, hover, foco, inválido y deshabilitado que `.ipt`, sin su altura ni su relleno. [Personalización → Helpers de composición](./customizing.md#helpers-de-composición) lo explica junto con las demás piezas.
+
+## Siguiente paso
+
+El formulario se puede rellenar y enviar. [Feedback](./feedback.md) muestra lo que hace la pantalla a continuación: un botón Guardar que indica que está guardando, un mensaje de éxito, un badge del plan y una barra de uso de almacenamiento.

package/docs/es/usage/index.md

@@ -0,0 +1,33 @@
+---
+title: Visión general
+description: Las guías que terminan la pantalla de ajustes y, después, las páginas de consulta con cada clase, token y valor por defecto.
+group: Uso
+order: 4
+source: ccdf1949cd4f7688574d6f4fae9ad2cf34465fb3
+---
+
+# Uso
+
+Estas guías terminan la pantalla de ajustes que empezó en [Construir una pantalla](../concepts.md). Lee las siete primeras en orden: cada una añade una parte de la pantalla y da por hechas las anteriores. Las tres siguientes son páginas de consulta; las guías te enviarán a ellas cuando necesiten la tabla completa, y puedes volver siempre que necesites un valor por defecto o una regla. La última, Preajustes, es para cuando la pantalla ya funciona y te has cansado de escribir las mismas clases.
+
+Guías, en orden:
+
+1. [Botones](./buttons.md): la acción destructiva de la zona de peligro, botones de icono, tamaños, enlaces con aspecto de botón y estados deshabilitados, además de cómo cargar iconos.
+2. [Formularios](./forms.md): el formulario de perfil, con etiquetas, pistas, errores de validación, un input con un icono o un prefijo fijo, un select y toggles de checkbox, radio y switch.
+3. [Feedback](./feedback.md): lo que muestra la pantalla mientras guarda y después: un botón de carga, una alerta de éxito, un badge del plan, un placeholder de carga y una barra de uso de almacenamiento.
+4. [Tooltips](./tooltips.md): texto de ayuda junto a un campo de formulario, cómo conectarlo para quienes usan teclado y lector de pantalla, y dónde puede quedar recortado un tooltip.
+5. [Temas](./theming.md): modo claro y oscuro, reemplazar la paleta con los colores de marca y definir una intención propia, con las tablas completas de tokens de color y tokens base.
+6. [Estéticas](./aesthetics.md): los seis aspectos opcionales, lo que cambia cada uno y sus límites.
+7. [Clases solo](./solo.md): pintar una estética sobre un componente de otra librería.
+
+Páginas de consulta:
+
+- [Composición](./composing.md): las reglas completas para combinar intención, presentación y elevación, los valores por defecto de cada componente y qué ejes lee cada uno.
+- [Personalización](./customizing.md): tokens de presentación y de material, controles de las estéticas, las seis variables públicas de componente, la paleta generada y los helpers de composición para construir tus propios componentes.
+- [Contenido y layout](./content-and-layout.md): todos los helpers de layout, la escala tipográfica, tarjetas y paneles, tablas, citas, código y teclas.
+
+Cuando la pantalla funcione:
+
+- [Preajustes](./presets.md): define un aspecto una sola vez, con clases de eje en un contenedor, tokens de tema y de material, o tus propias clases de componente hechas con `@apply`.
+
+Cuando termines, [Accesibilidad](../accessibility.md) reúne lo que el CSS hace por ti y lo que tu aplicación todavía les debe a sus usuarios.

package/docs/es/usage/presets.md

@@ -0,0 +1,92 @@
+---
+title: Preajustes
+description: Tres formas de definir un aspecto una sola vez en lugar de en cada elemento, y cuándo recurrir a cada una.
+order: 11
+source: 308b21076223635a3323bcfecb70abe3a9e6d1c7
+---
+
+# Preajustes
+
+A estas alturas, la pantalla de ajustes dice `btn primary soft sm` en una docena de sitios, y cambiar de opinión significa cambiar una docena de sitios. Esta página cubre las tres formas de definir un aspecto una sola vez: clases de eje en un contenedor, tokens de tema y de material, y tus propias clases de componente hechas con `@apply`. Cada una encaja con un tipo distinto de "una sola vez".
+
+## Cuál usar
+
+| Quieres                                                                              | Recurre a                                                             |
+| ------------------------------------------------------------------------------------ | --------------------------------------------------------------------- |
+| Que todos los componentes de una región compartan un relleno, un borde o un material | [Clases de eje en un contenedor](#clases-de-eje-en-un-contenedor)     |
+| Otros colores, esquinas, bordes o profundidad para una página o una región           | [Tokens de tema y de material](#tokens-de-tema-y-de-material)         |
+| Un nombre para una receta que repites, como "el botón de guardar"                    | [Tus propias clases de componente](#tus-propias-clases-de-componente) |
+
+Se combinan. Una región puede definir un token de material, estar bajo una estética y contener tu propia clase de botón, y cada elemento puede seguir sobrescribiendo lo que hereda.
+
+## Clases de eje en un contenedor
+
+Algunas clases funcionan en un contenedor además de en un componente, y todo lo que hay dentro las toma:
+
+- Las clases de presentación: `.solid`, `.soft`, `.ghost`, `.edged` y `.edgeless`.
+- Los patrones de esquina: `.cut-diagonal` y `.cut-diagonal-reverse`.
+- Las [estéticas](./aesthetics.md), como `.glass` o `.pixel`.
+
+```html
+<div class="cluster soft edged">
+  <button class="btn primary" type="button">Negrita</button>
+  <button class="btn" type="button">Cursiva</button>
+  <button class="btn destructive solid" type="button">Quitar formato</button>
+</div>
+```
+
+Los botones de la barra son soft y con borde, y el último pide su propio relleno. Una clase en el elemento siempre gana a la de un contenedor.
+
+Los demás ejes no se heredan. La intención, la elevación (`.flat`, `.raised`, `.floating`) y el tamaño (`.sm`, `.lg`) cambian solo el elemento en el que están, así que una barra `.sm` no encoge sus botones; [Composición → Combinar clases](./composing.md#combinar-clases) explica por qué. Una clase de estética también define su propio patrón de esquina en su región, así que un `.cut-diagonal` por encima de una región `.pixel` no llega a su interior.
+
+Usa una clase de contenedor cuando el aspecto pertenece a la región, como una barra lateral discreta, y no a los componentes que contiene.
+
+## Tokens de tema y de material
+
+Los tokens son propiedades personalizadas de CSS. Defínelo en `:root` y toda la página lo sigue; defínelo en un elemento y solo lo sigue lo que hay dentro. Llegan más lejos que las clases, porque los componentes los leen al dibujarse:
+
+```css
+.admin {
+  --radius-control: 0.25rem;
+  --radius-surface: 0.5rem;
+  --border-width: 2px;
+}
+```
+
+Cada botón, campo, burbuja de tooltip y superficie dentro de `.admin` toma las esquinas más cerradas y el borde más grueso, sin una clase en ninguno de ellos. Las casillas de verificación, `.kbd` y `.code` mantienen su propia esquina más pequeña, `--radius-small`.
+
+Las tablas están donde se explican los tokens, así que esta página no las repite:
+
+- [Temas → Tokens de color](./theming.md#tokens-de-color): colores de marca y de estado, en los dos temas.
+- [Temas → Tokens base](./theming.md#tokens-base): esquinas, grosor del borde, altura de los controles, anillo de foco, profundidad y movimiento.
+- [Personalización → Tokens de presentación](./customizing.md#tokens-de-presentación): cuánto aportan un relleno, un borde o un hover.
+- [Personalización → Tokens de material](./customizing.md#tokens-de-material): lo que define una estética, y que puedes definir tú, como `--ui-radius`.
+- [Personalización → Tokens de estética](./customizing.md#tokens-de-estética): los controles de cada estética, como `--neo-offset`.
+
+Usa tokens cuando el cambio es un valor, como un color o una esquina, y no una elección entre clases.
+
+## Tus propias clases de componente
+
+Con los puntos de entrada de código fuente de Tailwind, cada componente, helper y clase de eje es una utilidad de Tailwind, así que una clase tuya puede llevar la receta completa:
+
+```css
+@import "@codenhub/styles/tw";
+
+@utility btn-save {
+  @apply btn primary soft sm;
+}
+```
+
+```html
+<button class="btn-save" type="submit">Guardar cambios</button>
+```
+
+`btn-save` se comporta como `btn primary soft sm` escrito completo, con estéticas y hover incluidos, y cambiar la receta cambia todos los botones de guardar. Los modificadores que pertenecen a un componente, como `.tight` en `.stack` o `.icon` en `.btn`, también son utilidades, así que `@apply btn icon` te da un botón de icono propio. [Tailwind CSS v4 → Construir tus propios componentes con `@apply`](../integrating/tailwind.md#construir-tus-propios-componentes-con-apply) tiene las reglas, incluido por qué `@utility` es mejor que una regla simple.
+
+Con el CSS compilado no hay `@apply`. Guarda la receta en un solo lugar del otro lado: un parcial de plantilla, un componente de tu framework o una constante como `const saveButton = "btn primary soft sm"`.
+
+Usa tu propia clase cuando la misma combinación nombra una sola cosa de tu diseño, como el botón de guardar o la tarjeta de plan.
+
+## Siguiente paso
+
+[Accesibilidad](../accessibility.md) enumera lo que el CSS hace por tus usuarios y lo que tu aplicación todavía les debe.

package/docs/es/usage/solo.md

@@ -0,0 +1,86 @@
+---
+title: Clases solo
+description: Cómo pintar una estética sobre un elemento de otra librería, como un toast o un diálogo, y qué lee e ignora una clase solo.
+order: 7
+source: c44308a8768737292529d4f93b703b3fa200255a
+---
+
+# Clases solo
+
+Supón que la pantalla de ajustes muestra "Perfil guardado" en un toast de una librería de notificaciones, no en la alerta de este paquete. Bajo `.neobrutalism`, cada tarjeta y cada botón tienen el contorno grueso y la sombra dura, y el toast no: una clase de estética solo define valores que leen los componentes de este paquete, así que no cambia nada en un elemento al que el paquete no da estilo. Una clase solo pinta la estética directamente sobre el único elemento que la lleva:
+
+```html
+<div class="toast neobrutalism-solo success" role="status">Profile saved.</div>
+```
+
+## Las seis clases solo
+
+Cada estética incluye su clase solo en el mismo punto de entrada, y una clase solo no necesita que se cargue nada más:
+
+```css
+/* La única hoja de estilos de este paquete en la página. */
+@import "@codenhub/styles/aesthetics/glass";
+```
+
+```html
+<div class="toast glass-solo">A pane over whatever is behind it.</div>
+```
+
+| Estética        | Clase solo           | Pinta                                                                                                                                                                                                                                                       |
+| --------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.glass`        | `.glass-solo`        | Un fondo translúcido, un borde de brillo fino, el desenfoque, una sombra suave de dos capas y la esquina de superficie. Con `.glass-liquid`, el cristal liquid, dibujado en su `::before` y su `::after`.                                                   |
+| `.neobrutalism` | `.neobrutalism-solo` | Un borde de tinta de 2px, esquinas rectas y la sombra dura desplazada.                                                                                                                                                                                      |
+| `.pixel`        | `.pixel-solo`        | El contorno escalonado, el anillo interior en lugar de un borde y la fuente pixelada.                                                                                                                                                                       |
+| `.chunky-tile`  | `.chunky-tile-solo`  | La esquina de baldosa, un borde de 2px, la barra de debajo y la fuente redondeada.                                                                                                                                                                          |
+| `.cyber`        | `.cyber-solo`        | La diagonal de superficie (la diagonal de control en un botón o un enlace), un borde de 1px, el resplandor y la fuente.                                                                                                                                     |
+| `.sketch`       | `.sketch-solo`       | Esquinas elípticas irregulares (un contorno más marcado en un panel, uno más suelto en un botón o un enlace, y otras pequeñas y redondeadas con `.sketch-rounded`), una línea de tinta continua de 1px, la sombra desplazada de 2px y la fuente manuscrita. |
+
+No pongas una clase solo en los propios componentes de este paquete. Una `.card` ya dibuja su relleno, su borde y su intención, y una clase solo pintaría encima un segundo borde y un segundo relleno. Usa ahí la clase de estética; también funciona en un único elemento: `<button class="btn pixel">`.
+
+## Lo que lee una clase solo
+
+Un elemento solo acepta las mismas clases de presentación, intención y elevación que aceptaría una `.card`:
+
+```html
+<div class="toast pixel-solo edgeless">No ring</div>
+<div class="toast glass-solo solid success">An opaque green pane</div>
+<div class="toast neobrutalism-solo flat">No offset shadow</div>
+
+<section class="soft edged">
+  <div class="toast chunky-tile-solo info">Soft and edged from the container, info from itself</div>
+</section>
+```
+
+| Qué                                     | De dónde se lee                                                                                                    |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| Relleno y borde (`.solid`, `.edged`, …) | Del elemento o de cualquier contenedor: la presentación se hereda, como en los componentes.                        |
+| Intención (`.success`, …)               | Solo del elemento, como en los componentes. Un contenedor `.success` deja neutro un elemento solo que esté dentro. |
+| Elevación (`.flat`, `.raised`, …)       | Solo del elemento, como en los componentes. Escala la sombra desplazada, la barra y la sombra de sketch.           |
+| La estética que lo rodea (`.pixel`, …)  | Nunca. Consulta [Lo que una clase solo ignora](#lo-que-una-clase-solo-ignora).                                     |
+
+Sin ninguna de esas clases, una clase solo pinta solo el material (borde, esquina, profundidad, contorno, desenfoque, fuente y pulsación) y deja el fondo y el color de texto propios del elemento como estaban.
+
+- **Solo las seis intenciones incluidas.** Una clase solo toma la intención únicamente de `.primary`, `.secondary`, `.success`, `.warning`, `.destructive` e `.info`. Una clase de intención que hayas definido tú, como en [Temas → Tu propia intención](./theming.md#tu-propia-intención), no se lee, y el elemento se dibuja neutro. Para dar un color propio a un elemento solo, cambia el tema de una de las intenciones incluidas en él o en un contenedor, como describe esa sección.
+- **El relleno es una capa sobre el fondo propio del elemento.** Cinco de las seis pintan el relleno como una sombra interior y no definen `background`, así que un toast solo `.soft` es un tinte sobre lo que el toast ya fuera, y uno `.solid` con una intención de color es opaco. Glass define su propio fondo, porque el fondo translúcido es su material, y mezcla el relleno encima. Un `.solid` neutro es un tinte del 20%, no el gris opaco que dibuja un componente.
+- **El color del texto presupone el tema.** Solo se define donde se pide un relleno o una intención, y es el color que el tema usa sobre la página o sobre el relleno. En un elemento cuyo fondo propio no sigue al tema, como un toast blanco en una página oscura, una intención `.soft` o `.ghost` puede poner texto claro sobre un fondo claro; usa `.solid` o quita la intención.
+- **No hay tinte de hover.** No se sabe si un elemento solo es clicable, así que no recibe el color de hover que recibe un `.btn`.
+- **Lee los controles de su estética y los tokens del tema, con los valores incluidos como respaldo.** `--glass-radius-surface`, `--neo-offset`, `--pixel-unit`, `--tile-lift`, `--tile-radius`, `--cyber-cut`, `--cyber-shape`, `--cyber-shape-surface`, `--cyber-glow`, `--cyber-ink`, `--sketch-radius`, `--sketch-radius-surface`, `--sketch-radius-rounded`, `--sketch-radius-surface-rounded` y los tokens de fuente como `--font-sketch` funcionan todos, definidos en el elemento o en cualquier ancestro. Con el tema cargado, sigue al tema; sin él, se renderiza con el aspecto incluido.
+- **Los valores oscuros necesitan un esquema de color.** Los pares claro/oscuro usan `light-dark()`, que sigue el `color-scheme` del elemento. El tema del paquete lo define; una página sin el tema obtiene los valores claros.
+- **Las clases que lee vienen del tema.** `.solid`, `.edgeless`, `.success`, `.flat` y las demás vienen en la hoja de estilos base y en `@codenhub/styles/theme`. Con solo un punto de entrada de estética en la página, esas clases no hacen nada, y la clase solo pinta su aspecto sin clases.
+
+## Lo que una clase solo ignora
+
+- **La estética que lo rodea.** No lee ninguno de los valores que define una clase de estética, ni `--elevation-color`. Un `.glass-solo` dentro de una región `.pixel` conserva sus propias esquinas, y `--ui-radius` o `--ui-border-width` definidos en él o por encima no hacen nada. Ajústalo mediante sus controles.
+- **Sus propios hijos.** Un elemento solo no es una región de estética. Un componente dentro de él conserva el aspecto de la página que lo rodea, incluso con `.glass-liquid` o `.sketch-rounded` junto a la clase solo. Solo transmite lo que transmite cualquier contenedor: la fuente de la clase solo, y el relleno o el borde de una clase de presentación que lleve, así que una `.card` dentro de un cristal `.glass-solo.solid` es solid, como dentro de cualquier contenedor `.solid`.
+- **La sombra de glass y `.flat`.** `.flat` no quita la sombra de `.glass-solo`, igual que no la quita bajo `.glass`.
+
+## Cómo gana y cuándo se mueve
+
+- **Gana a los estilos de la otra librería.** Las reglas no tienen capa y tienen un solo nivel de clase, así que ganan a las reglas con capa de un componente, y a las de especificidad cero, se carguen donde se carguen. Una regla ajena sin capa que sea más específica, o igual de específica y posterior en la página, sigue ganando. La otra cara es que una utilidad de Tailwind en el mismo elemento, como `rounded-none`, pierde frente a la clase solo: ajústalo mediante sus controles.
+- **Solo pulsa una acción.** Neobrutalism, chunky tile y cyber pulsan un `button`, un `a[href]`, un `[role="button"]`, un `summary` o un `input` de tipo botón que no esté deshabilitado. Todo lo demás se queda quieto, así que un toast no se hunde al hacer clic. La etiqueta más gruesa de chunky tile sigue la misma regla.
+- **No toca el movimiento de un contenedor.** Solo una acción toma la `transition` de la pulsación, y la pulsación mueve el elemento mediante las propiedades `translate` y `scale`, no `transform`. Un toast conserva sus propias transiciones y su propio `transform`. En una acción, la `transition` de la pulsación reemplaza la que tuviera el elemento.
+- **El movimiento reducido conserva la pulsación y quita su movimiento.** Con `prefers-reduced-motion: reduce`, neobrutalism, chunky tile y cyber siguen pulsando, pero al instante: el elemento cae en su sombra o su barra, o se encoge, sin recorrer la distancia.
+
+## Siguiente paso
+
+Las guías terminan aquí. [Composición](./composing.md), [Personalización](./customizing.md) y [Contenido y layout](./content-and-layout.md) son las páginas de consulta, y [Accesibilidad](../accessibility.md) enumera lo que el CSS hace por tus usuarios y lo que tu aplicación todavía les debe.