pigui/pireon-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release @pi/ui 0.0.7: an empty checkbox can be seen

Browse Source 
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>
This commit is contained in:
Josep Piguillem
2026-10-14 20:50:02 +02:00
parent 81ee7855a7
commit 74b30e5427
3 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
libs/ui/TOKENS.md
View File

@@ -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-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-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-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-*`) ### Puente con Angular Material (`--mat-sys-*`)

2
libs/ui/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@pi/ui", "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...).", "description": "Librería de componentes Angular standalone (botones, campos con Signal Forms, cards, charts, drawer/hub/modal, theming vía tokens CSS...).",
"license": "MIT", "license": "MIT",
"generators": "./generators.json", "generators": "./generators.json",

9
libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss vendored
View File

@@ -5,7 +5,10 @@
&:enabled { &:enabled {
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) { &:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
& ~ .mdc-checkbox__background { & ~ .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 { .pi-select-option {
@include checkboxColor(primary-200); @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 // Checkbox
.mdc-checkbox__background { .mdc-checkbox__background {