SJRK-80: Icons and logos do not adapt to UIO high contrast

Description

We should have contrast theme versions of all the assets for the various UIO contrast themes, similar to what we do for the Oak and IDRC logos on https://sojustrepairit.org/

Comments

• Gregor Moss commented 2018-12-05T15:51:22.235-0500

  Consider switching to icon fonts to make this less painful

• Simon Bates commented 2019-01-11T14:31:36.377-0500

  I've changed this issue from an "Improvement" to a "Bug", as it's possible for icons to disappear if certain UIO high contrast settings are selected. For example, selecting the White On Black UIO high contrast setting will cause the Audio icon to disappear.

• Simon Bates commented 2019-01-11T14:43:06.464-0500

  I see in the current implementation, we use PNG images pulled in with CSS background-image.

  This approach would need alternate assets, as described in the issue title/description.

  An alternative approach is to use inline SVGs and use CSS to apply the high contrast colours. With this approach, we don't need to maintain separate assets – we style the SVGs directly.

  For example, for the Cities project:

  https://github.com/inclusive-design/website-cities/blob/cc5a21e9b4c6ca3e2dcea36540823bb57e9c3b82/static/css/style.css#L1170-L1195

  When a UIO high contrast theme is applied, UIO adds an appropriate class to the document body, such as "fl-theme-wb" for White On Black. We can then use that class to apply styles to the SVGs.

  As mentioned above, for this to work, the SVGs need to be inline in the document and cannot be included as separate images.

  For Cities, I used Hugo's partials support to inject the SVGs into the document (and keep them in their own separate file):

  <span role="img" aria-label="Perspective">{{ partial "perspective.svg" . }}</span>
  

• Justin Obara commented 2019-01-13T08:58:25.406-0500

  Another option would be to use infusion-icons to setup a similar thing using icon fonts. Which would also allow for setting the colours via CSS.

• Simon Bates commented 2019-01-17T10:58:09.351-0500

  Renamed to "Icons and logos do not adapt to UIO high contrast".

  Steps to reproduce:

  • Set UIO high contrast theme Black On White

  Expect:

  • Icons and logos to adapt

  Actual:

  • The icons stay as is (black on green)
  • The logos in the footer disappear (white on white)