Add support for High Contrast Theme (#356)

Buttons icon are now visible and uses system colors. Since external SVG images
can't get dynamically styled, we're adding a pseudo element on buttons, mask
it with the appropriate icon, and control the color of the icon through the
element background image.
This allows us to remove all the *-white.svg images as we can change the color with CSS.

We opt-out of forced colors for the elements where we want to apply non-system colors,
i.e. the foreground, background and preview sections.

detail/summary elements are adapted to look nice in High Contrast Theme.

src/views/css/global.css

@@ -15,6 +15,7 @@ html, body{
     --bg-accent:#1B75BC;
     --bg-summary:#151515;
     --bg-details:#ECECEC;
+    --bg-pressed-icon: var(--bg-accent);
     --fg-primary:#000;
     --fg-paraphrased:#222;
     --bg-code:var(--bg-paraphrased);
@@ -23,14 +24,14 @@ html, body{
     --fg-link:#4865FF;
     --bg-code:#ccc;
     --fg-control-border-primary: #8f8f8f;
+    --fg-pressed-icon: white;
+    --icon-color: light-dark(black, white);
     --icon-switch:url("../icons/switch-black.svg");
     --icon-sliders:url("../icons/sliders-black.svg");
     --icon-picker:url("../icons/picker-black.svg");
     --icon-help:url("../icons/help-black.svg");
-    --icon-sliders-pressed:url("../icons/sliders-white.svg");
-    --icon-picker-pressed:url("../icons/picker-white.svg");
-    --icon-help-pressed:url("../icons/help-white.svg");
     --scheme-type:light;
+    --border-radius: 3px;
 }
 
 @media ( prefers-color-scheme : dark ) {
@@ -48,17 +49,18 @@ html, body{
         --fg-border-secondary:#5a5a5a;
         --fg-control-border-primary: #6f6f6f;
         --fg-link:#58A5FF;
-        --icon-switch:url("../icons/switch-white.svg");
-        --icon-sliders:url("../icons/sliders-white.svg");
-        --icon-picker:url("../icons/picker-white.svg");
-        --icon-help:url("../icons/help-white.svg");
-        --icon-sliders-pressed:url("../icons/sliders-white.svg");
-        --icon-picker-pressed:url("../icons/picker-white.svg");
-        --icon-help-pressed:url("../icons/help-white.svg");
         --scheme-type:dark;
     }
 }
 
+@media (forced-colors: active) {
+    :root {
+        --icon-color: ButtonText;
+        --bg-pressed-icon: SelectedItem;
+        --fg-pressed-icon: SelectedItemText;
+    }
+}
+
 html.force-light {
     --bg-primary:#fff;
     --bg-secondary:#f5f5f5;
@@ -78,9 +80,6 @@ html.force-light {
     --icon-sliders:url("../icons/sliders-black.svg");
     --icon-picker:url("../icons/picker-black.svg");
     --icon-help:url("../icons/help-black.svg");
-    --icon-sliders-pressed:url("../icons/sliders-white.svg");
-    --icon-picker-pressed:url("../icons/picker-white.svg");
-    --icon-help-pressed:url("../icons/help-white.svg");
     --scheme-type:light;
 }
 
@@ -98,13 +97,6 @@ html.force-dark {
     --fg-border-secondary:#5a5a5a;
     --fg-control-border-primary: #6f6f6f;
     --fg-link:#58A5FF;
-    --icon-switch:url("../icons/switch-white.svg");
-    --icon-sliders:url("../icons/sliders-white.svg");
-    --icon-picker:url("../icons/picker-white.svg");
-    --icon-help:url("../icons/help-white.svg");
-    --icon-sliders-pressed:url("../icons/sliders-white.svg");
-    --icon-picker-pressed:url("../icons/picker-white.svg");
-    --icon-help-pressed:url("../icons/help-white.svg");
     --scheme-type:dark;
 }
 

src/views/css/main.css

@@ -41,16 +41,17 @@ section {
 }
 
 /* Color sections */
-section#foreground-color, 
+section#foreground-color,
 section#background-color {
     display: flex;
     align-items: center;
     min-height: 6rem;
     font-size: 1.4rem;
     justify-content: center;
+    forced-color-adjust: none;
 }
 
-section#foreground-color .buttons, 
+section#foreground-color .buttons,
 section#background-color .buttons {
     position: absolute;
     bottom: 0.5rem;
@@ -94,6 +95,7 @@ section#background-color select.format-selector  {
     display: block;
     min-width: 4.6rem;
     padding: 0.1rem;
+    forced-color-adjust: auto;
 }
 
 section#foreground-color input[aria-invalid="true"].free-value,
@@ -121,65 +123,54 @@ section#background-color input.free-value:focus {
     background: var(--bg-primary);
 }
 
-section#foreground-color button, 
+section#foreground-color button,
 section#background-color button {
-    background:var(--bg-control-primary);
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: 90% 90%;
+    background-color: var(--bg-control-primary);
+    forced-color-adjust: auto;
     width: 2rem;
     height: 1.2rem;
     border: 1px solid var(--fg-border-primary);
     border-radius: 0.2rem;
     padding: 0.5em;
+    position: relative;
+
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 5%;
+        mask-image: var(--icon);
+        mask-position: 50% 50%;
+        mask-repeat: no-repeat;
+        background-color: var(--icon-color);
+    }
 }
 
-section#foreground-color button.picker, 
+section#foreground-color button.picker,
 section#background-color button.picker {
-    background-image: var(--icon-picker);
+    --icon: var(--icon-picker);
 }
 
-section#foreground-color button.sliders, 
+section#foreground-color button.sliders,
 section#background-color button.sliders {
-    background-image: var(--icon-sliders);
+    --icon: var(--icon-sliders);
 }
 
-section#foreground-color button.help, 
+section#foreground-color button.help,
 section#background-color button.help {
-    background-image: var(--icon-help);
+    --icon: var(--icon-help);
 }
 
 section#foreground-color button.switch {
-    background-image: var(--icon-switch);
+    --icon: var(--icon-switch);
 }
 
 section#foreground-color button[aria-pressed=true],
 section#foreground-color button[aria-expanded=true],
 section#background-color button[aria-pressed=true],
 section#background-color button[aria-expanded=true]{
     box-shadow:inset 0 0 0.1em 0.1em rgba(0, 0, 0, 0.4);
-}
-
-section#foreground-color button[aria-pressed=true].picker,
-section#background-color button[aria-pressed=true].picker {
-    background-image: var(--icon-picker-pressed);
-}
-
-section#foreground-color button[aria-expanded=true].sliders,
-section#background-color button[aria-expanded=true].sliders {
-    background-image: var(--icon-sliders-pressed);
-}
-
-section#foreground-color button[aria-expanded=true].help,
-section#background-color button[aria-expanded=true].help {
-    background-image: var(--icon-help-pressed);
-}
-
-section#foreground-color button[aria-expanded=true],
-section#background-color button[aria-expanded=true],
-section#foreground-color button[aria-pressed=true],
-section#background-color button[aria-pressed=true] {
-    background-color: var(--bg-accent);
+    background-color: var(--bg-pressed-icon);
+    --icon-color: var(--fg-pressed-icon);
 }
 
 /* Sliders */
@@ -249,12 +240,26 @@ section#background-help {
 section#sample-preview {
     background-color: var(--bg-details);
 }
+
+@media (forced-colors: active) {
+    /* In High Contrast Theme, make the summary more similar to the results summary */
+    section#sample-preview summary {
+        border-radius: var(--border-radius);
+        background: ButtonFace;
+        color: ButtonText;
+        border: 1px solid ButtonText;
+        padding: 0.5rem 1rem;
+    }
+}
+
+
 section#sample-preview .preview-box {
     display: flex;
     align-items: center;
     min-height: 5rem;
     font-size: 1.4rem;
     justify-content: center;
+    forced-color-adjust: none;
 }
 
 section#sample-preview .preview-box .text {
@@ -264,7 +269,7 @@ section#sample-preview .preview-box .text {
 
 section#sample-preview .icon {
     margin-left: 1rem;
-    padding: 0.5rem; 
+    padding: 0.5rem;
     border: 1px #cccccc dashed;
 }
 
@@ -285,7 +290,7 @@ section#sample-preview .icon svg {
 
 #contrast-ratio h3 {
     font-size: 0.7rem;
-} 
+}
 
 #contrast-ratio-value {
     font-size: 1.2rem;
@@ -306,19 +311,47 @@ section#results header {
 
 section#results details {
     margin: 0.5rem;
-    border-radius: 3px;
+    border-radius: var(--border-radius);
     background: var(--bg-details);
 }
 
 section#results summary {
     background: var(--bg-summary);
     color: #FFF;
-    border-radius: 3px;
+    border-radius: var(--border-radius);
     padding: 0.5rem 1rem;
 }
 
 section#results details[open] summary {
     background: var(--bg-accent);
+    /* Remove the radius on the bottom of the details so its edges
+       connect with the one from the details text */
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+@media (forced-colors: active) {
+    section#results details summary {
+        background: ButtonFace;
+        color: ButtonText;
+        border: 1px solid ButtonText;
+    }
+
+    /* In regular mode, the details text has a --bg-details background color
+       that makes the text looks like it's related to the summary.
+       Since we can't use a specific background color in High Contrast Theme,
+       add a border to achieve the same goal.  */
+     section#results details summary + p {
+        border: 1px solid CanvasText;
+        /* Don't display a border at the top to avoid clashing with the summary bottom border */
+        border-block-start: none;
+    }
+
+     section#results details[open] summary {
+        background: SelectedItem;
+        color: SelectedItemText;
+        /* Opt-out of forced colors to avoid the backplating on the marker and the h3 */
+        forced-color-adjust: none;
+    }
 }
 
 section#results details p {
@@ -345,7 +378,7 @@ section#results .contrast-level > div{
     flex-grow: 1;
     width: 50%;
 }
- 
+
 section#results .contrast-level img {
     height: 1.2rem;
     width: 1.2rem;