Primitivas

Button — tono × énfasis

El tono dice qué significa y el énfasis cuánto grita — ejes separados, como en Ant Design y Spectrum. No es solo API: mientras el destructivo sea un valor del enum (danger-ghost…), cada variante nueva es otra ocasión de que la regla que prohíbe destructivos en el pie no la reconozca.

Button — tamaño

Dos escalones, no una escala libre. md es el valor por omisión y no se puede mover: hay 58 botones consumiendo este componente en producción sin declarar tamaño. sm existe para las filas densas, y 24 px es su suelo — WCAG 2.2 SC 2.5.8 Target Size (Minimum), nivel AA, pide «at least 24 by 24 CSS pixels». Es donde aterrizan también el paso corto de Carbon, Spectrum, Ant Design y Atlassian (medido contra el CSS que publican, no contra su documentación).

⚠️ Dicho antes de que lo encuentre una auditoría: SC 2.5.5 Target Size (Enhanced) pide 44×44 y es nivel AAA — no llega ni sm ni md, y eso ya era cierto antes de que existiera esta prop. El objetivo declarado del sistema es AA.

IconButton

24px es el suelo de SC 2.5.8 (AA), así que no hay un tamaño más chico. Pasa el tabulador por aquí: el anillo de foco es el de la aplicación, ninguno de estos se lo dibuja aparte.

Badge

Mismo enum de tonos que el botón, y eso es lo que se está comprobando aquí: si un estado se llama success en la tabla y positive en el aviso, la misma cosa acaba de dos colores según qué pantalla la pinte.

Badge — `mono`

Los dos últimos llevan el MISMO texto. En monoespaciado los dígitos se alinean y 0/O y 1/l dejan de confundirse — que es lo que se le pide a un código que alguien va a teclear o comparar a ojo. Cambia la familia y no el tamaño: --text-monospace-body vale 14px y haría este chip más alto que sus hermanos en la misma fila.

Badge — paleta categórica

Seis identidades, no seis estados: un «Epic» no es un error ni un éxito. Las seis se eligieron midiendo —cada una despeja ΔE ≥ 8 contra las otras cinco y contra la marca, que se sobrescribe por app— y su par tinta/relleno pasa AA en los dos temas.

badgeToneFor("Bug") resuelve el tono por defecto de una etiqueta de texto libre. El significado es el estándar —rojo para bug, morado para epic— verificado contra las etiquetas por defecto de GitHub y los tipos de Jira; los hexes de GitHub no se copian, porque no tienen variante para tema oscuro. Lo que no reconoce cae a neutral, que es como se veían todos hasta ahora.

Table — con fila de acciones

La fila entera es clicable y además lleva su propio menú: pulsa el menú y comprueba que no se abre también el detalle de la fila. Ese doble disparo era un bug real de Revoke el 2026-08-12.

Bleed

Saca un bloque del margen del contenedor para que llegue al borde: una tabla a sangre, una franja de aviso. Existe para que quien legítimamente no quiere el margen tenga una salida declarada, en vez de escribirse un margen negativo a mano — que es como se llega a ocho valores distintos en 29 pantallas.

✅ El margen de página ya tiene dueño: lo pone el <main> del chasis con p-page, y Bleed sangra -mx-page — la misma variable, así que no pueden divergir. Por eso Bleed ya no lleva variante móvil: el token vale 24 px en escritorio y 16 bajo el corte, y el negativo lo hereda.

Card

La superficie elevada. La elevación la hace el color, no una sombra: la página es neutral-50 y la tarjeta neutral-0, así que en tema oscuro la tarjeta queda más clara que el fondo — que es como se lee el relieve donde una sombra difuminada no se percibe. Cambia el tema con el conmutador de arriba y mira el borde de las tres.

🔴 El relleno es una prop, no un className. El kit que esta pieza reemplaza lo dejaba pisar desde fuera, y eso solo funciona con tailwind-merge instalado. Aquí cx es un join pelado: escribir className="p-0" dejaría las dos clases vivas y ganaría el orden de la hoja de estilos, no el tuyo.