[ADD] web_checkbox_contrast: mejor contraste en las casillas sin marcar del backend #23

Merged

snt merged 1 commit from 18.0-add-web_checkbox_contrast into 18.0

2026-10-10 17:22:57 +00:00

snt commented

2026-10-10 17:01:37 +00:00

Owner

Resumen

Nuevo addon web_checkbox_contrast (18.0.1.0.0), sólo CSS, hermano de web_list_striped: las casillas, los botones de opción y los interruptores sin marcar del backend pasan a tener un borde bien visible.

Odoo 18 pinta ese borde con el gris de los separadores (--border-color, #dee2e6), y los campos de sólo lectura y las celdas de lista van además atenuados al 50 %.

Estado sin marcar	Antes	Ahora
Editable	1,3:1	4,7:1 (`--gray-600`)
Sólo lectura / celda de lista	1,1:1	3,1:1 (`--gray-900` atenuado al 50 %)

WCAG 1.4.11 pide 3:1 para el contorno de un control. Los estados marcado, indeterminado, foco y hover conservan los colores de Odoo.

Son dos reglas que redefinen la propiedad --border-color sobre el propio .form-check-input. Bootstrap sólo la lee en el border base del control; el resto de estados fijan border-color de forma explícita, así que ganan siempre, sin depender de la especificidad ni del orden de carga de los assets.

A tener en cuenta

Alcance global a propósito, como web_list_striped: se instala y desinstala sin tocar datos. No se instala solo: hay que instalarlo en cada base de datos.
Sólo backend (web.assets_backend): el sitio web, el portal y el TPV no cambian.
Los interruptores ganan el borde oscuro, pero el botón interior del estado apagado sigue en el gris claro de Odoo; oscurecerlo obliga a incrustar un SVG propio y queda fuera de este PR.
Las casillas marcadas de sólo lectura siguen como en Odoo (relleno al 50 %).

README.md y .github/copilot-instructions.md actualizados.

Para probar

Instalación en la BD de desarrollo: sin errores ni warnings
Las dos reglas están en el bundle compilado de web.assets_backend, después de la regla base
Render antes/después de casilla, radio e interruptor en Chrome headless con el CSS compilado de Odoo
pre-commit
Revisión visual navegando por la instancia (no hecha)

Closes #20

🤖 Generated with Claude Code

## Resumen Nuevo addon `web_checkbox_contrast` (18.0.1.0.0), sólo CSS, hermano de `web_list_striped`: las casillas, los botones de opción y los interruptores **sin marcar** del backend pasan a tener un borde bien visible. Odoo 18 pinta ese borde con el gris de los separadores (`--border-color`, `#dee2e6`), y los campos de sólo lectura y las celdas de lista van además atenuados al 50 %. | Estado sin marcar | Antes | Ahora | | --- | --- | --- | | Editable | 1,3:1 | 4,7:1 (`--gray-600`) | | Sólo lectura / celda de lista | 1,1:1 | 3,1:1 (`--gray-900` atenuado al 50 %) | WCAG 1.4.11 pide 3:1 para el contorno de un control. Los estados marcado, indeterminado, foco y hover conservan los colores de Odoo. Son dos reglas que redefinen la propiedad `--border-color` sobre el propio `.form-check-input`. Bootstrap sólo la lee en el `border` base del control; el resto de estados fijan `border-color` de forma explícita, así que ganan siempre, sin depender de la especificidad ni del orden de carga de los assets. ## A tener en cuenta - Alcance global a propósito, como `web_list_striped`: se instala y desinstala sin tocar datos. No se instala solo: hay que instalarlo en cada base de datos. - Sólo backend (`web.assets_backend`): el sitio web, el portal y el TPV no cambian. - Los interruptores ganan el borde oscuro, pero el botón interior del estado apagado sigue en el gris claro de Odoo; oscurecerlo obliga a incrustar un SVG propio y queda fuera de este PR. - Las casillas **marcadas** de sólo lectura siguen como en Odoo (relleno al 50 %). `README.md` y `.github/copilot-instructions.md` actualizados. ## Para probar - [x] Instalación en la BD de desarrollo: sin errores ni warnings - [x] Las dos reglas están en el bundle compilado de `web.assets_backend`, después de la regla base - [x] Render antes/después de casilla, radio e interruptor en Chrome headless con el CSS compilado de Odoo - [x] pre-commit - [ ] Revisión visual navegando por la instancia (no hecha) Closes #20 🤖 Generated with [Claude Code](https://claude.com/claude-code)

snt added 1 commit 2026-10-10 17:01:38 +00:00

[ADD] web_checkbox_contrast: visible border on unchecked backend checkboxes

CI / lint (pull_request) Successful in 31s

Details

CI / test (pull_request) Failing after 10m57s

Details

CI / review (pull_request) Has been skipped

Details

1d6f95bdb7

Odoo 18 draws the unchecked checkboxes, radios and switches of the backend
with the separator gray (`--border-color`, gray-300): 1.3:1 on white, and
1.1:1 on readonly fields and list cells, which are dimmed to 50% on top.

CSS-only addon that redefines `--border-color` on `.form-check-input`:
gray-600 (4.7:1) when editable, gray-900 (3.1:1 after the dimming) when
disabled. Bootstrap reads the property only in the base border of the
control, so the checked, indeterminate, focus and hover states keep their
stock colours whatever the load order.

Closes #20

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

snt merged commit 326f8c01db into 18.0

2026-10-10 17:22:57 +00:00

snt deleted branch 18.0-add-web_checkbox_contrast

2026-10-10 17:22:57 +00:00

snt referenced this pull request from a commit

2026-10-10 17:22:58 +00:00

Merge pull request '[ADD] web_checkbox_contrast: mejor contraste en las casillas sin marcar del backend' (#23) from 18.0-add-web_checkbox_contrast into 18.0