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

@@ -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-*`)
 

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",

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 {