From cfe089d1fe6dac01853eda8c6b293c982ea54135 Mon Sep 17 00:00:00 2001 From: magdev Date: Sat, 28 Feb 2026 22:13:31 +0100 Subject: [PATCH] Fix dark mode rendering for tables, form inputs, and notices - Override WooCommerce's .input-text background (specificity 0,3,1) with [data-bs-theme="dark"] selector for text inputs and textareas - Remove table-light from in cart, review-order, orders, and payment-methods templates (forces white in dark mode) - Add .alert.woocommerce-* compound selectors for notice overrides outside .woocommerce wrapper ancestry - Suppress focus ring on programmatically focused notices (woocommerce.js focus_populate_live_region adds tabindex + focus) - Wrap order-details product table in card matching thank-you page style - Fix thank-you alert icon/text line wrap with d-flex align-items-center - Bump version to 0.1.2 Co-Authored-By: Claude Opus 4.6 --- CHANGELOG.md | 11 +++ CLAUDE.md | 28 +++++- README.md | 4 +- assets/css/wc-bootstrap.css | 48 ++++++++-- style.css | 2 +- templates/cart/cart.html.twig | 2 +- templates/checkout/review-order.html.twig | 2 +- templates/checkout/thankyou.html.twig | 4 +- templates/myaccount/orders.html.twig | 2 +- templates/myaccount/payment-methods.html.twig | 2 +- templates/order/order-details.html.twig | 87 ++++++++++--------- 11 files changed, 131 insertions(+), 61 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d7103c..aa18b07 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,17 @@ All notable changes to this project will be documented in this file. +## [0.1.2] - 2026-02-28 + +### Fixed + +- Dark mode: text inputs and textareas showing white background due to WooCommerce's `.woocommerce form .form-row .input-text` (specificity `0,3,1`) overriding theme's checkout form rules with `var(--wc-form-color-background, #fff)` fallback +- Dark mode: `table-light` class on `` forcing white table headers in cart, checkout review, orders, and payment methods pages +- Dark mode: WooCommerce notice focus ring appearing white when `focus_populate_live_region()` JS programmatically focuses alerts for screen reader accessibility +- WooCommerce notice overrides not matching alerts rendered by Twig templates (added `.alert.woocommerce-*` compound selectors alongside `.woocommerce .woocommerce-*` descendant selectors) +- Order details table on thank-you page not wrapped in a card like other sections +- Thank-you page success message line-wrapping after icon due to block-level `

` inside inline alert context + ## [0.1.1] - 2026-02-28 ### Fixed diff --git a/CLAUDE.md b/CLAUDE.md index fe5736e..cab4a3f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -230,7 +230,10 @@ Recurring bugs and non-obvious behaviours discovered across sessions. **Read thi - **WooCommerce gallery JS requires modifier classes** -- `--with-images`, `--without-images`, `--columns-N` on `.woocommerce-product-gallery` + `style="opacity: 0"` for fade-in. Without these, zoom and photoswipe won't initialize. - **WooCommerce dark mode select backgrounds** -- `woocommerce.css` sets `select { background-color: var(--wc-form-color-background, #fff) }`. The custom property is never defined for dark mode, so it falls back to `#fff`. Override with `[data-bs-theme="dark"] .woocommerce select`. - **Select2/SelectWoo dark mode** -- `select2.css` hardcodes `#fff` on selection containers and dropdowns. Needs overrides for `.select2-selection`, `.select2-dropdown`, `.select2-search__field`, and highlighted options. -- **WooCommerce notice CSS specificity** -- Uses `border-top: 3px solid`, `background-color: #f6f5f8`, and icon font `::before` at specificity `0,1,0`. Must use `.woocommerce .woocommerce-*` (specificity `0,2,0`) and explicitly reset `border-top` to override. +- **WooCommerce notice CSS specificity** -- Uses `border-top: 3px solid`, `background-color: #f6f5f8`, and icon font `::before` at specificity `0,1,0`. Must use `.woocommerce .woocommerce-*` AND `.alert.woocommerce-*` (both specificity `0,2,0`) to cover notices both inside `.woocommerce` wrappers and rendered directly by Twig templates. +- **WooCommerce notice focus ring** -- `woocommerce.js:focus_populate_live_region()` adds `tabindex="-1"` and calls `.focus()` on the first `.woocommerce-message[role="alert"]` after 500ms for screen reader announcement. The default browser focus ring appears white in dark mode. Suppress with `outline: 0; box-shadow: none` since the focus is non-interactive. +- **WooCommerce form input specificity** -- `.woocommerce form .form-row .input-text` (specificity `0,3,1`) sets `background-color: var(--wc-form-color-background, #fff)`. This beats theme checkout rules at `0,2,1`. Needs `[data-bs-theme="dark"]` override at `0,4,0`. +- **Bootstrap `table-light` breaks dark mode** -- Forces a light background on `` regardless of `data-bs-theme`. Remove it and let Bootstrap's default table styling handle theming. - **WooCommerce float layout fights Bootstrap grid** -- `div.product div.images/summary` have `float:left/right; width:48%` in `woocommerce-layout.css`. Override with `float: none; width: 100%`. - **Bootstrap `g-*` gutters add negative top margin** -- `g-4` sets both `--bs-gutter-x` and `--bs-gutter-y`; the `.row` gets `margin-top: calc(-1 * var(--bs-gutter-y))` pulling it upward. Use `gx-*` for horizontal-only gutters when vertical gap isn't desired. @@ -324,7 +327,7 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr ## Version History -Current version: **v0.1.1** +Current version: **v0.1.2** ## Session History @@ -406,3 +409,24 @@ Current version: **v0.1.1** - Select2/SelectWoo hardcodes `#fff` backgrounds in `select2.css` — needs comprehensive overrides for selection containers, dropdowns, search fields, and highlighted options. - WooCommerce notice CSS uses `border-top: 3px solid`, `background-color: #f6f5f8`, and WooCommerce icon font `::before` at specificity `0,1,0`. Single-class overrides don't win — must use `.woocommerce .woocommerce-*` (specificity `0,2,0`) and explicitly reset `border-top`. - Never set `background-image` without `background-repeat: no-repeat` / `background-size` / `background-position` — SVGs will tile. + +### 2026-02-28 — v0.1.2 Dark Mode Deep Fixes (Tables, Inputs, Notices) + +**Scope:** Fixed dark mode rendering issues across checkout, thank-you, cart, and account pages — white table headers, white form inputs, notice focus rings, and missing card wrappers. + +**Files changed (7):** + +- `assets/css/wc-bootstrap.css` — Added `[data-bs-theme="dark"]` override for `.input-text` and `textarea` (WooCommerce specificity `0,3,1` beats theme at `0,2,1`); added `.alert.woocommerce-*` compound selectors for notice overrides outside `.woocommerce` wrapper; added focus ring suppression for programmatically focused notices +- `templates/order/order-details.html.twig` — Wrapped product table in `card shadow-sm` with `card-header`; removed `table-light` from `` +- `templates/checkout/thankyou.html.twig` — Added `d-flex align-items-center` to success alerts to fix icon/text line wrap +- `templates/checkout/review-order.html.twig` — Removed `table-light` from `` +- `templates/cart/cart.html.twig` — Removed `table-light` from `` +- `templates/myaccount/orders.html.twig` — Removed `table-light` from `` +- `templates/myaccount/payment-methods.html.twig` — Removed `table-light` from `` + +**Key findings:** + +- WooCommerce's `.woocommerce form .form-row .input-text` at specificity `0,3,1` sets `background-color: var(--wc-form-color-background, #fff)` which beats theme rules. The `textarea` generated by `woocommerce_form_field()` has class `input-text`, so it matches this rule. Needs `[data-bs-theme="dark"]` override at `0,4,0`. +- WooCommerce's `focus_populate_live_region()` in `woocommerce.js` adds `tabindex="-1"` and calls `.focus()` on `.woocommerce-message[role="alert"]` after 500ms for screen reader accessibility. The default browser focus ring appears white in dark mode. +- Notice overrides using `.woocommerce .woocommerce-*` descendant selectors don't match notices rendered by Twig templates where `.alert` and `.woocommerce-message` are on the same element without a `.woocommerce` wrapper ancestor. Both `.woocommerce .woocommerce-*` and `.alert.woocommerce-*` patterns needed. +- Bootstrap's `table-light` class forces a light background on `` regardless of dark mode. Remove it entirely — let the card-header or default table styling handle visual separation. diff --git a/README.md b/README.md index 0135795..a480405 100644 --- a/README.md +++ b/README.md @@ -141,8 +141,8 @@ for po in languages/wc-bootstrap-*.po; do msgfmt -o "${po%.po}.mo" "$po"; done Releases are automated via Gitea Actions. Push a tag matching `vX.X.X` to trigger a release build. ```bash -git tag -a v0.1.1 -m "Version 0.1.1 - Bugfix release" -git push origin v0.1.1 +git tag -a v0.1.2 -m "Version 0.1.2 - Bugfix release" +git push origin v0.1.2 ``` ## License diff --git a/assets/css/wc-bootstrap.css b/assets/css/wc-bootstrap.css index 00303ee..965c51c 100644 --- a/assets/css/wc-bootstrap.css +++ b/assets/css/wc-bootstrap.css @@ -42,12 +42,17 @@ when notices are rendered outside our Twig templates. ========================================================================== */ -/* Use .woocommerce ancestor to beat woocommerce.css specificity (0,2,0 > 0,1,0). - WooCommerce sets border-top: 3px solid, background-color: #f6f5f8, and a - WooCommerce icon font ::before on these classes. Override all of it. */ +/* Override woocommerce.css which sets border-top: 3px solid, background-color: + #f6f5f8, and a WooCommerce icon font ::before on notice classes. + Two selector patterns at specificity 0,2,0: + - .woocommerce .woocommerce-* — notices inside a .woocommerce wrapper + - .alert.woocommerce-* — notices rendered by our Twig templates */ .woocommerce .woocommerce-info, .woocommerce .woocommerce-message, -.woocommerce .woocommerce-error { +.woocommerce .woocommerce-error, +.alert.woocommerce-info, +.alert.woocommerce-message, +.alert.woocommerce-error { position: relative; padding: 1rem 3rem 1rem 1rem; margin: 0 0 1rem; @@ -58,19 +63,22 @@ background-image: none; } -.woocommerce .woocommerce-info { +.woocommerce .woocommerce-info, +.alert.woocommerce-info { color: var(--bs-info-text-emphasis); background-color: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); } -.woocommerce .woocommerce-message { +.woocommerce .woocommerce-message, +.alert.woocommerce-message { color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); } -.woocommerce .woocommerce-error { +.woocommerce .woocommerce-error, +.alert.woocommerce-error { color: var(--bs-danger-text-emphasis); background-color: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); @@ -78,10 +86,24 @@ padding-left: 1rem; } +/* WooCommerce JS (woocommerce.js:focus_populate_live_region) adds tabindex="-1" + and calls .focus() on notices for screen reader accessibility. The default + browser focus ring appears white in dark mode — suppress it since these are + non-interactive elements (the focus is only for screen reader announcement). */ +.alert.woocommerce-info:focus, +.alert.woocommerce-message:focus, +.alert.woocommerce-error:focus { + outline: 0; + box-shadow: none; +} + /* Suppress WooCommerce icon font ::before — our templates use Bootstrap Icons */ .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-message::before, -.woocommerce .woocommerce-error::before { +.woocommerce .woocommerce-error::before, +.alert.woocommerce-info::before, +.alert.woocommerce-message::before, +.alert.woocommerce-error::before { display: none; } @@ -405,6 +427,16 @@ border-color: var(--bs-border-color); } +/* Text inputs & textareas — same issue as