Add support for High Contrast Theme

[nchevobbe]

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.

---

Before vs After

1. Night Sky
2. Desert
3. Aquatic
4. Dusk

[ungjinPark]

I think accordion buttons (success criteria) also need to be improved for better usability in contrast mode.

When using CCAe without contrast mode, we can clearly see the clickable size and boundary of accordion buttons (success criteria) because each button is distinguished by a specific background color (e.g., black buttons in light mode, gray buttons in dark mode).

However, in contrast mode, users cannot distinguish the boundaries of each accordion button.

Microsoft addressed this issue by adding borders to buttons in contrast mode. What do you think about adopting a similar approach?

[nchevobbe]

I think accordion buttons (success criteria) also need to be improved for better usability in contrast mode.

When using CCAe without contrast mode, we can clearly see the clickable size and boundary of accordion buttons (success criteria) because each button is distinguished by a specific background color (e.g., black buttons in light mode, gray buttons in dark mode).

However, in contrast mode, users cannot distinguish the boundaries of each accordion button.

Microsoft addressed this issue by adding borders to buttons in contrast mode. What do you think about adopting a similar approach?

Sure, I'll do that too :)

[nchevobbe]

Here it is with the details/summary adapting to High Contrast:

and in regular mode for reference:

Note that we could have a ButtonText background with a ButtonFace text if we want to be more visually consistent with what the regular UI looks like (light text on dark background)

[nchevobbe]

Note that we could have a ButtonText background with a ButtonFace text if we want to be more visually consistent with what the regular UI looks like (light text on dark background)

what it would look like: