From 74b30e5427a6a175201c7224ca7a863949891bc2 Mon Sep 17 00:00:00 2001
From: Josep Piguillem <jgpigui@gmail.com>
Date: Wed, 14 Oct 2026 20:50:02 +0200
Subject: [PATCH] Release @pi/ui 0.0.7: an empty checkbox can be seen

Its border was grey-100, 1.2:1 against white, so empty boxes all but
vanished in lists. It is grey-400 now (about 3.5:1, over the 3:1 WCAG
asks of controls), through --pi-theme-checkbox-border-color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 libs/ui/TOKENS.md                                        | 1 +
 libs/ui/package.json                                     | 2 +-
 libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss | 9 +++++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/libs/ui/TOKENS.md b/libs/ui/TOKENS.md
index 7026b23..a18a5c3 100644
--- a/libs/ui/TOKENS.md
+++ b/libs/ui/TOKENS.md
@@ -145,6 +145,7 @@ siempre el *fallback* de `var()` (el valor que tenían antes de tokenizar).
 | `--pi-theme-accordion-radius` | `var(--pi-border-radius-large)` | `var(--pi-border-radius-xx-small)` | `accordion.component.scss`, `_horizontal-accordion.scss`, `_vertical-accordion.scss` (×6, incluye un `calc(... - 0.0625rem)`) |
 | `--pi-theme-overlay-divider-color` | `var(--pi-color-grey-100)` | — | `drawer.component.scss`, `hub.component.scss` (borde bajo la cabecera) |
 | `--pi-theme-hub-grabber-color` | `var(--pi-color-grey-100)` | — | `hub.component.scss` (el asa superior) |
+| `--pi-theme-checkbox-border-color` | `var(--pi-color-grey-400)` | — | `_mat-checkbox.scss` (borde de la casilla sin marcar; necesita 3:1 contra el fondo para verse) |
 
 ### Puente con Angular Material (`--mat-sys-*`)
 
diff --git a/libs/ui/package.json b/libs/ui/package.json
index 3c4df7d..a88fd2b 100644
--- a/libs/ui/package.json
+++ b/libs/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pi/ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Librería de componentes Angular standalone (botones, campos con Signal Forms, cards, charts, drawer/hub/modal, theming vía tokens CSS...).",
   "license": "MIT",
   "generators": "./generators.json",
diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss b/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss
index a7ad891..523f2a2 100644
--- a/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss
+++ b/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss
@@ -5,7 +5,10 @@
       &:enabled {
         &:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
           & ~ .mdc-checkbox__background {
-            border-color: var(--pi-color-#{$color}) !important;
+            border-color: var(
+              --pi-theme-checkbox-border-color,
+              var(--pi-color-#{$color})
+            ) !important;
           }
         }
       }
@@ -18,7 +21,9 @@
   .pi-select-option {
     @include checkboxColor(primary-200);
   }
-  @include checkboxColor(grey-100);
+  // grey-400: an empty box needs 3:1 against the page to be seen at all
+  // (WCAG 1.4.11); grey-100 gave 1.2:1 and the box vanished on white.
+  @include checkboxColor(grey-400);
 
   // Checkbox
   .mdc-checkbox__background {