Update button and link colors for themes

[hichemfantar]

Adjust button title color and link colors to improve visibility in both dark and light themes.

[github-actions]

📦 Docs artifacts are ready: https://github.com/elixir-lang/ex_doc/actions/runs/12837307068/artifacts/2449409122

[josevalim]

Thank you @hichemfantar. One issue with this change is that we also use ExDoc to generate docs for Erlang, and now links in Erlang and Elixir would look different. Plus links in Erlang would look in red, which was too distracting. I am afraid we may not go ahead with this one. :(

[hichemfantar]

Let me see what it looks like in erlang and I’ll get back to you

[josevalim]

I believe you can do mix build --proglang erlang or mix docs --proglang elixir. But generally we would want to keep the content between the two consistent.

[hichemfantar]

light mode already looks good but i changed to a lighter shade in dark mode and it looks good

current

after

passes wcag

light

elixir

[josevalim]

Yes, I think the red links are too jarring, sorry. :( If the current ones do not offer enough contrast, then we can address that, but it would be best if the link colors are not theme dependent. Thanks!

[hichemfantar]

here's another sample zoomed out, you can see it's hard to distinguish links from regular text (the red is also easier on the eyes because it feels the bold white text is too bright)

[hichemfantar]

also there needs to sufficient contrast between link text colors and non link text colors. it's why browsers by default use blue for links

[josevalim]

I actually think using blue, the browser default, would be a great idea. It is not theme specific and addresses all issues. WDYT?

[hichemfantar]

sounds good, i'll give it a shot

[hichemfantar]

should be good now, using the default chrome link colors

[josevalim]

Thanks. I think there are some regressions:

I believe the Callbacks, Functions, etc should not use the browser style. I'd also change the underline below links to follow browser style as well. Have them in black feel a bit weird, wdyt?

[josevalim]

The plot thickens. It seems we already have a blue color for links, which is what we use for "code links" in Erlang:

We should probably make it so that both links and code links follow the same style and same color in both Erlang/Elixir. I think this PR still keeps Elixir code links in a purpleish color.

[hichemfantar]

i believe we have reached the ending of this story.
everything now should work as expected and underline uses the same color as the link.

[hichemfantar]

perhaps get rid the of the noUnderline variables and just name them links?
linksNoUnderline -> links
linksNoUnderlineVisited -> linksVisited

[hichemfantar]

renamed the variables to be clearer and got rid of duplicates

[hichemfantar]

please tell me everything looks good on your end so we could put this saga to an end

[hichemfantar]

Web Content Accessibility criteria here we come

[josevalim]

Sorry, to be clear, I was thinking we should move these out of the language custom props and use the same for both languages (so they would go to the general prop definitions). I think having both languages use the same colors for links would be a huge plus for overall ecosystem consistency. Thoughts?

[josevalim]

I took a look at main and it looks really clean, except the Summary headers and the API reference pages are still being shown as links, as they should have their previous styling (we consider them to be headers):

They already have .summary and .summary-signature headers, so it should be easy to address. Thoughts?

[hichemfantar]

I think they should remain clear as links, i actually didn't even know they were clickable until i enabled link coloring.
goes to show you the importance of accessibility guidelines adherence and the ability to be able to differentiate between regular text and clickable links.
I also had an annoying thing happen where i tried to copy the header text and since it wasn't clear that it was a link, i ended accidentally navigating to a different section.

[hichemfantar]

btw perhaps get rid of italic because i believe it lowers readability without offering anything?

before

after