From 0d8a647101afbac1889df732824b81040e634622 Mon Sep 17 00:00:00 2001 From: masuP9 Date: Wed, 13 May 2026 21:59:12 +0900 Subject: [PATCH 1/2] fix(table): make body cells readable in forced-colors dark mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `.apg-table` sets `forced-color-adjust: none` so system-color substitution is opted out for the whole table. The cell rules only specified `background: Canvas`, leaving `color` to resolve to the base `var(--foreground)` — which becomes the light-mode oklch value (near-black) because the project's dark mode is class-based and the class isn't applied. Result: black text on black Canvas. - Explicitly set `color: CanvasText` on cells and rowheaders. - Override the cell hover to keep `background: Canvas` and indicate hover with a `Highlight` outline (avoids the var(--muted) value going near-white and clashing with CanvasText). - Give the sort button explicit `ButtonText` / `Highlight` hover for the same reason. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/styles/patterns/table.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/styles/patterns/table.css b/src/styles/patterns/table.css index 37a0fd90..f1a0d1c6 100644 --- a/src/styles/patterns/table.css +++ b/src/styles/patterns/table.css @@ -160,9 +160,25 @@ apg-table.apg-table > [role='table'] { .apg-table-cell, .apg-table-rowheader { + color: CanvasText; background: Canvas; } + .apg-table-cell:hover, + .apg-table-rowheader:hover { + background: Canvas; + outline: 2px solid Highlight; + outline-offset: -2px; + } + + .apg-table-sort-button { + color: ButtonText; + } + + .apg-table-sort-button:hover { + color: Highlight; + } + .apg-table-sort-button:focus-visible { outline: 3px solid Highlight; } From 8060a2bec917c5ca152adf56523ac2a32f538969 Mon Sep 17 00:00:00 2001 From: masuP9 Date: Wed, 13 May 2026 22:02:32 +0900 Subject: [PATCH 2/2] chore: bump version to 0.3.6 Release the table.css forced-colors dark mode fix as v0.3.6. Co-Authored-By: Claude Opus 4.7 (1M context) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index eb08d26b..30a5a515 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "apg-patterns-examples", "type": "module", - "version": "0.3.5", + "version": "0.3.6", "private": false, "description": "Accessible UI components following WAI-ARIA APG patterns. Multi-framework implementations in React, Vue, Svelte, and Astro with documentation and tests.", "author": "masuP9",