Feat: Add PLH Facilitator MX theme

[esmeetewinkel]

PR Checklist

• [x] PR title descriptive (can be used in release notes)

Description

Attempt to create a specific theme for the PLH Facilitator MX deployment, using the partner's branding colours.

I followed the changes made in the PR creating the PfR theme #2167

@jfmcquade I was wondering what decides that the text on the header and buttons shows in black rather than white?

Git Issues

Closes https://github.com/IDEMSInternational/plh-facilitator-app-mx-content/issues/53

[chrismclarke]

In case of interest, a quick look at a contrast checker gives the following scores for accessibility

If using white as the contrast color we get

So in either case I think the black text gives better results (passes AA standard - contrast ratio 4.5+, not AAA contrast ratio 7+) as described by https://webaim.org/resources/contrastchecker/.

As an additional point of note, AA standard is the minimum expected level of conformity for EU regulated public bodies (so a good baseline to aim for given a number of our partners). https://ialabs.ie/what-is-the-difference-between-wcag-a-aa-and-aaa/

Tweaking the primary color slightly (e.g. #48A3A8) gives a contrast ratio a little better than 7:1 (which is the threshold for AAA)

(but would be worse if using white text)

[jfmcquade]

Thanks @chrismclarke, great to know about those resources.

@esmeetewinkel: in terms of what actually decides, there is a utility function in the file src/theme/themes/utils/contrast-colour.scss that runs some maths to decide whether the contrast colour should be black or white.

I haven't looked into the details, but as it says in the comment at the top of the file, the code is taken from this post. The algorithm tries to maximise the contrast ratio, as defined by the WCAG standards that Chris referenced.

[esmeetewinkel]

Opted for partner colours blue and orange (not too different from the default theme) for improved contrast. Before / After:

NB. I thought this round and rectangular button had the same colour, but in this changed theme it is apparent that they are slightly different. Maybe they should be the same? To me the difference doesn't look intentional. @jfmcquade

[esmeetewinkel]

See this content PR https://github.com/IDEMSInternational/plh-facilitator-app-mx-content/pull/57 for test preview link

[esmeetewinkel]

I'm finding that without the orange parameter the button becomes blue (primary)...

[jfmcquade]

I'm finding that without the orange parameter the button becomes blue (primary)...

Ah sorry, you're right. The default option isn't secondary. Setting the style: get_me_going should work for now (although not very nice). I could make a quick PR to add a style: background-secondary option

[esmeetewinkel]

Hahaha I had forgotten about that style naming...

I found that the style: navigation round button does have the colour I want, only that it's slightly smaller (not a problem) so I'll use that for now.