fix: make forced-colors icon tint override the inline background color

The forced-colors rule for .custom-icon-tint had no !important, so it
lost the cascade to the element's inline `background-color: currentColor`
and the masked glyph still blanked out in Windows High Contrast — the
exact regression the rule was meant to prevent. Verified in a real
forced-colors render: without !important the tinted icon is invisible;
with it the glyph paints in CanvasText and stays visible.
This commit is contained in:
Marco Beretta 2026-07-04 17:17:33 +02:00
parent 2e54d0d171
commit e3eba21b71
No known key found for this signature in database
GPG key ID: D918033D8E74CC11

View file

@ -374,13 +374,14 @@ html {
}
}
/* A theme-tinted custom icon paints its glyph via `background-color:
/* A theme-tinted custom icon paints its glyph via an inline `background-color:
* currentColor` clipped by a CSS mask. Forced-colors (Windows High Contrast)
* overrides `background-color` and would blank the glyph, so repaint it with
* the `CanvasText` system color the UA preserves. */
* overrides `background-color` and would blank the glyph, so repaint it with the
* `CanvasText` system color the UA preserves. `!important` is required: the tint
* color is set inline on the element, so a class rule cannot win without it. */
@media (forced-colors: active) {
.custom-icon-tint {
background-color: CanvasText;
background-color: CanvasText !important;
}
}