WHCM styles improvements #455

shyusu4 · 2024-01-29T14:09:01Z

Description

This pull request addresses styling issues related to windows high contrast mode. The following issues have been fixed:

CTA button:
- Arrow icon isn't visible when hovered.
- Inconsistent transition speeds between the title and subtitle.
Header navigation: Arrow icon within CTA link in sub-navigation panel isn’t visible.
Code snippet block: Code blocks should have a clear separation from regular content.
Footer:
- All social media, “sponsor Wagtail”, and “contribute code” icons aren't visible.
- Social media icons are not using the correct color (link text).

Note - Dark/light mode theme toggle was meant to not be displayed in HCM but used prefers-contrast instead of forced-colors active.

Screenshots

wagtailio/static/sass/components/_cta.scss

albinazs · 2024-01-31T15:16:10Z

wagtailio/static/sass/components/_nav-cta.scss

-        stroke: $color--white;
-        stroke-width: 1px;
+        stroke: currentColor;
+        stroke-width: 4px;


Here we're affecting designs in a non-contrast mode, we need to add media query to target forced-colors only

The stroke: currentColor does not seem to have any effect on the regular rendering. In my opinion the stroke-width increase would be an improvement to the base design, it's not my place to decide that, so I agree with Albina's suggestion to move these rules into a media query.

Thanks @Scotchester @albinazs - I've moved the use of currentColor into a media query, but left stroke-width because this is part of another minor issue in the audit. I think it would be better to keep the increased width so that the nav CTA is more distinguishable as a link.