Summary
Make the "X" close action buttons white-on-red instead of the current default (icon on transparent/light background), across all pages.
Current Behavior
26 page/panel-header close buttons, all bare mat-icon-button + <mat-icon>close</mat-icon> with a common.close tooltip; 25 carry no CSS class (full list in investigation: admin pages, teams, projects, chat, tm-edit :89, threat/note/audit pages, triage, surveys, port-label-popover, mermaid-overlay-viewer; only triage-detail.component.scss has a layout-only .close-button). A separate 18 uses of the same close icon mean clear-search/remove-chip/deny and must NOT be restyled — so the fix must be an opt-in class, not a blanket icon selector.
Design decision needed before implementing
M3's error color role inverts in dark themes: mat.button-color(..., error) (the existing .mat-error pattern, src/styles/component-overrides.scss:83-101) yields white-on-red only in the two light palettes; dark palettes render light-peach with dark text. Pinning fixed tones from the themed error ramp (mat.get-theme-color($theme, error, 40) bg / error, 100 fg) gives white-on-red in all four palettes with no hard-coded hex — but deliberately overrides the M3 dark-theme convention. Also note: in the colorblind palettes "red" is intentionally Okabe-Ito vermillion/burnt orange. Confirm the fixed-tone choice (recommended, matches the request literally) vs. following the inverted role in dark themes.
Proposed Approach
Add a .close-button rule to src/styles/component-overrides.scss beside the existing .mat-error block, scoped for the four palette combinations exactly as .mat-error is, setting themed error background/foreground plus a hover tone (error, 30); then add class="close-button" to the 26 header buttons (triage-detail already has the class; keep its local margin). Leave the 18 clear/remove uses untouched. Complies with the "no local styling on action buttons / no hard-coded hex" rules.
Summary
Make the "X" close action buttons white-on-red instead of the current default (icon on transparent/light background), across all pages.
Current Behavior
26 page/panel-header close buttons, all bare
mat-icon-button+<mat-icon>close</mat-icon>with acommon.closetooltip; 25 carry no CSS class (full list in investigation: admin pages, teams, projects, chat, tm-edit :89, threat/note/audit pages, triage, surveys, port-label-popover, mermaid-overlay-viewer; onlytriage-detail.component.scsshas a layout-only.close-button). A separate 18 uses of the samecloseicon mean clear-search/remove-chip/deny and must NOT be restyled — so the fix must be an opt-in class, not a blanket icon selector.Design decision needed before implementing
M3's
errorcolor role inverts in dark themes:mat.button-color(..., error)(the existing.mat-errorpattern,src/styles/component-overrides.scss:83-101) yields white-on-red only in the two light palettes; dark palettes render light-peach with dark text. Pinning fixed tones from the themed error ramp (mat.get-theme-color($theme, error, 40)bg /error, 100fg) gives white-on-red in all four palettes with no hard-coded hex — but deliberately overrides the M3 dark-theme convention. Also note: in the colorblind palettes "red" is intentionally Okabe-Ito vermillion/burnt orange. Confirm the fixed-tone choice (recommended, matches the request literally) vs. following the inverted role in dark themes.Proposed Approach
Add a
.close-buttonrule tosrc/styles/component-overrides.scssbeside the existing.mat-errorblock, scoped for the four palette combinations exactly as.mat-erroris, setting themed error background/foreground plus a hover tone (error, 30); then addclass="close-button"to the 26 header buttons (triage-detail already has the class; keep its local margin). Leave the 18 clear/remove uses untouched. Complies with the "no local styling on action buttons / no hard-coded hex" rules.