/* ============================================================================
Juicy — Dashboard Design System · BADGE
----------------------------------------------------------------------------
Figma: "Badge" (9:4214). 60 variantes:
Color (5) × Size (Default|Small) × Type (Fill|Soft) × Icon Position (None|Leading|Trailing)
Solo 5 tonos: success, warning, error, information, disabled. Es la familia
`feed/*` de la semántica — un badge no es una acción, es un estado.
Los tonos NO viven aquí: se componen con .tone-* (ver tone.css).
ActivoBajo · 2
No es un control: no tiene alto fijo ni cursor. El alto sale del padding, que
es como se comporta de verdad dentro de una celda de tabla.
============================================================================ */
:where(.badge) {
--tone-fill: var(--action-success-default);
--tone-fg: var(--action-success-text);
--tone-soft: var(--feed-success-soft);
--tone-on-soft: var(--tone-fill);
}
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: var(--radius-sm);
background: var(--tone-fill);
color: var(--tone-fg);
font-size: 12px;
font-weight: 500;
line-height: normal;
white-space: nowrap;
}
/* Figma fija el alto en 25 (Default) y 18 (Small), pero es redundante: 12px de
texto dan 15 de línea y 5+15+5 = 25; 11px dan 14 y 2+14+2 = 18. El padding
solo ya cae en el número. Sin altura fija el badge crece si el texto crece,
que es lo correcto para una etiqueta de estado. */
/* ---- Type ---------------------------------------------------------------- */
.badge--soft {
background: var(--tone-soft);
color: var(--tone-on-soft);
}
/* ---- Size ---------------------------------------------------------------- */
.badge--sm {
padding: 2px 5px;
font-size: 11px;
}
/* ---- Icon ---------------------------------------------------------------- */
/* El icono NO escala con el tamaño: Figma usa 14px en Default y en Small.
Tipografía -> font-size; svg -> caja. Ver foundation.css. */
.badge > i {
flex-shrink: 0;
font-size: 14px;
line-height: 1;
}
.badge > svg,
.badge__icon {
display: block;
flex-shrink: 0;
width: 14px;
height: 14px;
fill: currentColor;
}
.badge--icon-trailing {
flex-direction: row-reverse;
}
/* ---- Varios badges juntos --------------------------------------------------
Una celda puede llevar MÁS DE UNO: una venta con pago dividido enseña
"Efectivo" y "Tarjeta". Sueltos, lo único que los separa es el espacio entre
palabras del HTML —~4px, y desaparece en cuanto el marcado no lo deja—, y dos
pastillas de fondo tenue pegadas no dejan ver dónde acaba una y empieza la otra.
Va como ENVOLTORIO y no como `margin` en `.badge`: el margen sobra en el caso
de uno solo, que es el más común (el estatus), y el hueco es una propiedad del
GRUPO, no de la pastilla.
`wrap` para que una celda estrecha baje el segundo a otro renglón en vez de
ensanchar la tabla; centrado, como van todas las celdas que los usan. */
.badges {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 5px;
}
/* ============================================================================
NOTAS
1. LAS 10 COMBINACIONES DE COLOR REPRUEBAN AA. Medido sobre el render, no
estimado (AA pide 4.5:1 para texto de 12px y 11px):
Fill (blanco/500) Soft (500/200)
success 2.62 2.48
warning 2.26 2.06
error 3.76 3.31
information 3.24 2.90
disabled 1.30 1.30
Ninguna llega. `warning` en Soft (2.06) es prácticamente ilegible, y son
badges de 11-12px — el tamaño hace el requisito MÁS estricto, no menos.
Esto no es una opinión de estilo: "Agotado" y "Bajo · 2" son información
operativa que el cajero tiene que poder leer.
2. EL ARREGLO NO INVENTA NINGÚN COLOR. Poner `--tone-on-soft` en la rampa 700
(que existe y no usa nadie) da, medido:
success 7.25 · warning 6.86 · error 11.10 · information 8.81
Todos pasan AA con holgura. Es una línea por tono en tone.css.
"Para `Fill`, la rampa 600 con texto blanco es el equivalente" — eso decía
aquí, y es FALSO en 2 de 5. Medido: success 5.41 ✓, error 5.52 ✓,
information 4.57 ✓, pero warning se queda en 3.49 (el naranja es un color
CLARO: no aguanta blanco por mucho que lo bajes, y el 700 ya es café) e
inactive no tiene 600 al cual bajar (su fill es neutral/150, casi blanco).
Warning invierte el texto a neutral/700 (6.98) e inactive lo manda a
text/secondary (5.72). RESUELTO en tone.css; ver su nota RELLENOS.
La lección: no hay regla mnemotécnica que sustituya a medir cada tono.
3. Disabled/Fill y Disabled/Soft son IDÉNTICOS en Figma: los dos usan
`action/inactive/default` de fondo y `action/inactive/text` de texto. La
variante Soft de Disabled no existe; es una copia. Transcrito tal cual.
4. El Badge usa `action/inactive/*` para Disabled, NO `feed/inactive/*`.
Coincide con el render real. O sea: `feed/inactive/*` no lo usa NADIE — es
un token muerto, no un token mal usado. (Corrige la nota 5 de semantics.css.)
5. `feed/neutral/*` tampoco se usa: no hay badge neutral, aunque el token
existe. Faltaría la variante, o sobra el token.
6. El Badge bindea PRIMITIVOS (`green/500`, `green/200`) salvo Disabled, que
usa la semántica. Mismo patrón que el Button — al revés que el Icon Button.
De tres componentes, dos están mal cableados allá.
7. radius 3px: es un TERCER radio (Button e Icon Button usan 5). Tokenizado
como --radius-sm porque un badge sí es visualmente más chico. Si prefieres
un solo radio en todo el sistema, se cambia en foundation.css.
8. En el frame, las columnas Soft/Leading y Soft/Trailing están intercambiadas
entre la fila de Success y las demás. Cosmético del mock, no del componente.
============================================================================ */