Update link and body colors to be WCAG AAA compliant

[kailan]

This PR updates the following colors to have a contrast ratio of at least 7:1 in the environments in which they are used:

• main-color-light is now slightly darker in light mode
• link-color and link-hover-color are now darker in light mode and lighter in dark mode

It also updates some colors throughout the application to reference these color variables where applicable.

Look at those links pop!

---

On the category page, the entire row is now a hoverable and clickable link, so that there is no need to differentiate the title as a link (and thus the accessibility checker is happy)

---

Listed dependencies and dependents now have increased contrast.

I'm sure you can determine which one is before and after :)

---

I added underlines in places where differentiating the links from the text via color at a ratio that the checker is happy with is not feasible.

---

Finally, the size of the tap targets for pagination has been slightly increased to pass a Lighthouse audit.

---

Tested with the built-in test suite pnpm test (which now all pass) as well as with Lighthouse in both dark and light mode.

Closes #1233.

[Turbo87]

thanks for the PR!

due to the number of changes it's a bit hard to review/discuss them individually though. I like some of the changes, but others will probably need a discussion first 😅

• Screenshot 1 (metadata title and icon): 👍
• Screenshot 2 (link color): 👍
• Screenshot 3 (categories): probably fine, but might have to check against other clickable lists that we have
• Screenshot 4 (dependencies): not sure about this one. the color is now very close to the color of regular dependencies.
• Screenshot 5 (underlined links): probably fine? it does add inconsistencies though. I'm wondering if we should do it everywhere instead 🤷‍♂️
• Screenshot 6 (pagination): 👍

[kailan]

thanks for the PR!

no problem! it was fun to get to know the codebase.

due to the number of changes it's a bit hard to review/discuss them individually though. I like some of the changes, but others will probably need a discussion first 😅

Sorry about this. Happy to split into multiple PRs if that would be helpful.

• Screenshot 3 (categories): probably fine, but might have to check against other clickable lists that we have

I have created a reusable row class that now gets included in clickable lists I'm aware of (categories, versions, dependencies, dependents). That way, accessible styles can be applied uniformly across the site. (also means less CSS, yay!)

Minor note: I updated the hardcoded `18px` font size value used in the row styles to `1.1rem` which roughly matches, but means that browser-configured font size will be respected.

• Screenshot 4 (dependencies): not sure about this one. the color is now very close to the color of regular dependencies.

I've addressed this by changing the background color for optional dependencies, see below:

• Screenshot 5 (underlined links): probably fine? it does add inconsistencies though. I'm wondering if we should do it everywhere instead 🤷‍♂️

It certainly could be added everywhere, but I didn't want to rock the boat too much on my first contribution 😅 Let me know what you think.

[Turbo87]

I just realized that #11523 caused quite a bit of conflict with this PR... sorry! 😞

Happy to split into multiple PRs if that would be helpful.

yeah, I guess that would probably make it easier to review, discuss and rebase them 😅

I've addressed this by changing the background color for optional dependencies, see below:

for the dark mode screenshot that seems okay, but the grey of light yellow in light mode seems a bit off