search

mi6 / ic-ui-kit

Intelligence Community UI Kit (based on StencilJS)
MIT License
25 stars 25 forks source link

Light and dark ic-links don't show the correct colours in their visited states #2009

Open GCHQ-Developer-847 opened 3 months ago

GCHQ-Developer-847 commented 3 months ago

Summary of the bug

The light and dark ic-links remain white and black when they are visited, which does not match the Figma designs.

🪜 How to reproduce

Tell us the steps to reproduce the problem:

  1. Go to the light and dark links example on the website.
  2. See that they are white and black.

It looks like there is some overriding of CSS going on, looking at the DevTools. (in dev tools, select the inside IcLink and toggle :visited in the CSS panel. They don't change colour)

🧐 Expected behaviour

The links should display as being visited, i.e. with different colours; on Figma, the light visited link is grey and the dark visited link is purple.

Additional info

To prevent things from getting confusing, I think it's best CSS variables are created for the light and dark links. E.g. --ic-hyperlink-light and --ic-hyperlink-dark for the normal states, and then --ic-hyperlink-light-visited and --ic-hyperlink-dark-visited.

Note: You will see that there are some hyperlink-related colour variables that are not being used. I have created a separate ticket to remove these; removing them will be a breaking change.

GCHQ-Developer-094 commented 1 month ago

Ticket will be fixed as part of larger dark mode work.