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 {