Spike turning hover hardcoded colours into functional variables

[NickColley]

What

Explore trying to get any hardcoded variables into functional variables

Why

So we can get a better picture of what the eventual system might look like

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• We have a better idea of what it looks like to apply functional colours everywhere

[NickColley]

Spike PR:
#7146

Write up:
https://docs.google.com/document/d/1Tz5E_WKOdwvAHPphINjCr8SHdY0uF5fUn7uCcQaUAWI/edit?tab=t.2gbaxibzamcy#heading=h.6pe3czplrl7t

[NickColley]

Summary of options

We have two colours being used as hover colours:

Name	Colour	Where is it used?
no functional name, hardcoded	black tint-95 (#f3f3f3)	used in Accordion, Task list, Pagination, File upload
hover	black tint-80 (#cecece)	used in small Checkboxes and Radios to indicate pressable area

Why cant we just use the hover functional colour for the other components?

The darker grey used in hover functional colour when applied to the other components is too dark and clashes with the existing border colour.

Darker grey when used in a smaller area appears less dark then when it's used in a bigger area.

Option 1: Two hover colours

Have two functional hover colours, one dark and one light.

Use the darker grey on smaller components, and the lighter grey on larger components.

Name	Colour	Description
hover	black tint-95 (#f3f3f3)	Use this colour for general hover states
input-hover	black tint-80 (#cecece)	Use this colour for input hover states

We'd need to figure out how to manage this change as it's likely a breaking change to anyone using the hover colour in their components e.g. they expect a certain level of contrast and now it's too light.

Option 2: Change the colour palette to allow for more usable greys, adopt a single hover colour

At the moment our colour palette means that we only have one light grey.

In the past the hover functional colour was a lighter grey which may have been something that could work across all the components that use a light grey for hover.

Since some palette changes though the colour that’s used for hover is now too dark and the lighter grey is too light.

On issue with trying to have a one size fits all hover colour is that light perception is relative so a grey will look darker if it’s next to a darker border and if it’s used in a bigger space.

At the moment the link functional colour blue is not represented in the blue palette so we could consider this in a similar way where we introduce for example grey tint-90 and then we have a unified hover colour.