/* ============================================================================
Juicy — Dashboard Design System · CHOICE (checkbox · switch · radio)
----------------------------------------------------------------------------
Figma: "Checkbox" (9:5133). 24 variantes:
Type (Checkbox|Switch|Radio) × Display Label × Display Field Label × Checked
`Checked` no es una variante aquí: es `:checked`. Quedan 6 reglas reales.
Field Label
Los tres controles pintan su estado marcado con `--tone-fill` y su contenido
(palomita, punto, perilla) con `--tone-fg`. Cambiar el color de un control es
ponerle una clase `.tone-*` AL INPUT (``), no editar este archivo. Al input y no al wrapper porque los
defaults viven en el input (nota 8): una custom property propia le gana
siempre a una heredada, tenga la especificidad que tenga el wrapper.
============================================================================ */
/* DIVERGE DE FIGMA (decidido por el dueño 2026-07-16). Figma pinta checkbox y
switch de green/500 y el radio de blue/500 — tres controles, dos colores, y
ninguno el primario. El criterio nuevo separa por lo que el control ES:
checkbox y radio → neutral-lv1 · son MARCAS (tinta sobre papel)
switch → primary · es un INTERRUPTOR vivo (acción)
Y de paso arregla el contraste: la palomita blanca pasa de 2.62:1 (reprueba
WCAG 1.4.11) a 9.98:1 sobre neutral/500. Ver nota 3.
En :where() para que cualquier .tone-* los gane sin pelear especificidad.
Los defaults van en el INPUT (no en el wrapper): un checkbox suelto —la
columna de selección de una archive, p.ej.— es solo
``, sin `.choice` alrededor (nota 8). */
:where(.choice__input) {
--tone-fill: var(--action-neutral-lv1-default);
--tone-fg: var(--action-neutral-lv1-text);
}
:where(.choice__input--switch) {
--tone-fill: var(--action-primary-default);
--tone-fg: var(--action-primary-text);
}
.choice-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.choice-field__label,
.choice__label {
font-size: 13px;
font-weight: 400;
line-height: 1;
letter-spacing: 1px;
color: var(--text-primary);
}
.choice {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
/* ---- Control base (checkbox y radio) ------------------------------------- */
.choice__input {
appearance: none;
margin: 0;
flex-shrink: 0;
display: grid;
place-items: center;
width: 18px;
height: 18px;
border: var(--stroke) solid var(--border-strong);
border-radius: 4px;
background: transparent;
cursor: pointer;
}
.choice__input:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
}
.choice__input:checked {
border-color: var(--tone-fill);
background: var(--tone-fill);
}
/* La palomita es el asset real de Figma (fi-rr-check, 11px), embebido como
máscara para que tome el color del tono en vez de venir con el blanco quemado. */
.choice__input[type="checkbox"]:not(.choice__input--switch):checked::after {
content: '';
width: 11px;
height: 11px;
background: var(--tone-fg);
-webkit-mask: var(--check-glyph) center / contain no-repeat;
mask: var(--check-glyph) center / contain no-repeat;
}
:root {
--check-glyph: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2011%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.2295%202.03091L3.89577%208.36416C3.85318%208.40691%203.80258%208.44083%203.74685%208.46398C3.69113%208.48712%203.63138%208.49904%203.57104%208.49904C3.5107%208.49904%203.45095%208.48712%203.39522%208.46398C3.3395%208.44083%203.28889%208.40691%203.24631%208.36416L0.796975%205.91253C0.754391%205.86978%200.703785%205.83586%200.64806%205.81271C0.592335%205.78956%200.532587%205.77765%200.472246%205.77765C0.411905%205.77765%200.352157%205.78956%200.296432%205.81271C0.240706%205.83586%200.1901%205.86978%200.147517%205.91253C0.104765%205.95511%200.0708424%206.00572%200.0476958%206.06145C0.0245493%206.11717%200.0126341%206.17692%200.0126341%206.23726C0.0126341%206.2976%200.0245493%206.35735%200.0476958%206.41307C0.0708424%206.4688%200.104765%206.51941%200.147517%206.56199L2.59777%209.01178C2.85624%209.26978%203.20652%209.41468%203.57172%209.41468C3.93693%209.41468%204.28721%209.26978%204.54568%209.01178L10.8789%202.67991C10.9216%202.63733%2010.9555%202.58675%2010.9786%202.53107C11.0017%202.47539%2011.0136%202.41569%2011.0136%202.3554C11.0136%202.29512%2011.0017%202.23542%2010.9786%202.17974C10.9555%202.12406%2010.9216%202.07348%2010.8789%202.03091C10.8363%201.98815%2010.7857%201.95423%2010.73%201.93108C10.6743%201.90794%2010.6145%201.89602%2010.5542%201.89602C10.4939%201.89602%2010.4341%201.90794%2010.3784%201.93108C10.3227%201.95423%2010.2721%201.98815%2010.2295%202.03091Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
/* ---- Radio --------------------------------------------------------------- */
/* Sin marcar es un círculo RELLENO, no un borde — al revés que el checkbox.
Transcrito tal cual; ver nota 2. */
.choice__input[type="radio"] {
border: 0;
border-radius: var(--radius-round);
background: var(--border-strong);
}
/* Necesita repetir el fondo marcado: `.choice__input[type="radio"]` (clase +
atributo) EMPATA en especificidad con `.choice__input:checked` (clase +
pseudo-clase), y al ir después pisaría el estado marcado. El switch se libra
porque `--switch` es una sola clase y pierde el empate. */
.choice__input[type="radio"]:checked {
background: var(--tone-fill);
}
.choice__input[type="radio"]:checked::after {
content: '';
width: 8px;
height: 8px;
border-radius: var(--radius-round);
background: var(--tone-fg);
}
/* ---- Switch -------------------------------------------------------------- */
.choice__input--switch {
width: 36px;
height: 20px;
border: 0;
border-radius: var(--radius-round);
background: var(--border-strong);
place-items: stretch;
position: relative;
}
.choice__input--switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: var(--radius-round);
background: var(--tone-fg);
transition: left .2s ease;
}
.choice__input--switch:checked::after {
left: 18px;
}
/* ---- Disabled ------------------------------------------------------------ */
/* No existe en Figma — ver nota 5. */
.choice:has(.choice__input:disabled) {
cursor: not-allowed;
}
.choice__input:disabled {
--tone-fill: var(--action-inactive-default);
cursor: not-allowed;
}
/* ============================================================================
NOTAS
1. LO QUE DICE FIGMA, y por qué no se siguió:
checkbox marcado green/500 #12B76A "success"
switch encendido green/500 #12B76A "success"
radio marcado blue/500 #2E90FA "information"
Tres controles, dos colores, ninguno el primario del DS (ui/500). Checkbox
y radio hacen lo mismo — elegir una opción — y están pintados distinto. Y
semánticamente ninguno cuadra: un checkbox marcado no es un "éxito" ni un
radio es "información". Falta actualizar el Figma a lo decidido aquí.
2. "SIN MARCAR" TIENE DOS CONSTRUCCIONES DISTINTAS:
checkbox → borde de 2px `border/strong`, fondo transparente
radio → círculo RELLENO de `border/strong`, sin borde
Mismo estado, dos tratamientos. El del radio además pesa mucho más
visualmente: un radio vacío se ve más "presente" que un checkbox vacío.
3. CONTRASTE — medido, y aquí está lo que la decisión arregla y lo que no:
CHECKBOX / RADIO · contenido blanco sobre el accent:
figma green/500 2.62:1 reprueba 1.4.11 (pide 3:1)
AHORA neutral/500 9.98:1 OK
El marcado contra el vacío (#CFD7E1) da 6.87:1. Resuelto por completo.
SWITCH · perilla blanca sobre la pista:
figma green/500 2.62:1 AHORA cyan ui/500 2.54:1
apagado #CFD7E1 1.45:1 (sin cambio)
Distinción encendido↔apagado por color: 1.81 antes, 1.75 ahora.
O sea: EL ACCENT NUNCA FUE EL PROBLEMA DEL SWITCH. Verde o cyan da igual;
ambos números están abajo del 3:1. No es una falla de 1.4.1 porque el
estado lo comunica la POSICIÓN de la perilla, no solo el color — pero la
perilla misma se ve poco. Lo que lo arreglaría es darle a la perilla un
trazo o una sombra, no cambiarle el color a la pista. Sin decidir.
4. El checkbox MARCADO trae `border: 1px green` sobre fondo verde (un borde
del mismo color que su relleno, invisible) mientras el vacío trae 2px.
Aquí el borde es siempre --stroke (2px) y al marcarse solo cambia de color:
mismo resultado visual, una regla menos.
5. NO HAY ESTADO DISABLED en ninguno de los tres. Añadido con
`action/inactive/default`, que es lo que usan Button, Icon Button y Badge.
Tampoco hay hover ni focus — mismo hueco que el resto del DS.
6. Las alturas 39 (checkbox/radio) y 41 (switch) que declara Figma son del
MOCK, no del componente: son la altura de la variante con Field Label
(13 + 8 + 18 = 39) y el resto se centra dentro para que las columnas
alineen. Aquí la fila abraza su contenido.
7. Los tres bindean PRIMITIVOS (`green/500`, `blue/500`, `border/strong`).
Van cuatro componentes de seis mal cableados: Button, Badge, Textarea
(label) y éste. Solo el Icon Button y el resto del Field usan `action/*`.
---- AÑADIDO DEL ATERRIZAJE -------------------------------------------------
8. CHECKBOX SUELTO: la columna de selección de las archives y otros sitios
usan `` sin wrapper `.choice` (no hay label
que alinear). Por eso los defaults de tono van en el input. El wrapper
sigue siendo el contrato cuando hay label.
============================================================================ */