Issue #3277262 by kentr, bnjmnm, sandip: Dialog close icon has poor contrast with forced-colors

core/themes/claro/css/components/dialog.css

@@ -96,7 +96,8 @@
 
 @media (forced-colors: active) {
   .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
-    background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='buttonText' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
+    background: buttontext;
+    mask: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23D3D4D9' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
   }
 }
 

core/themes/claro/css/components/dialog.pcss.css

@@ -86,7 +86,8 @@
         background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
 
         @media (forced-colors: active) {
-          background: url(../../images/icons/buttonText/ex.svg) no-repeat 50%;
+          background: buttontext;
+          mask: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
         }
       }
     }

core/themes/claro/images/icons/buttonText/ex.svg

-<svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1.318l-10 10M11 11.318l-10-10" stroke="buttonText" stroke-width="1.5"/></svg>