Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link colors changed and underlined recent change to tsugi-static #158

Open
csev opened this issue Mar 12, 2023 · 2 comments
Open

Link colors changed and underlined recent change to tsugi-static #158

csev opened this issue Mar 12, 2023 · 2 comments

Comments

@csev
Copy link
Collaborator

csev commented Mar 12, 2023

Hey @andrewniekamp - The changes you did to tsugi-static seems like something changed. Here is a before and after look at my lessons pages on my production servers. I also merged in all of your tsugi code - but this happened when I did a shift refresh on a server with already upgraded Tsugi and the shift-refresh grabbed a new static - so it is likely static and not the PHP code.

static1

static2

@andrewniekamp
Copy link
Contributor

Hi @csev, this is probably because of a change in approach we took for dark mode since sometimes the coloring of links in dark mode made them a little hard to see (if the primary color ends up a bit dark). I ended up applying general styling to links in tsugi-static to use var(--text-color) and to be underlined to guarantee accessibility regardless of the theme color, but now that you mention it I think I should have just used a different theme variable (--text-light). I can open a PR for tsugi-static that should fix that.

@jonespm
Copy link
Collaborator

jonespm commented Mar 12, 2023

Google doesn't underline their links and has different colors for light or dark. Seems nice.

On dark they use #8ab4f8 which has a 9.96:1 contrast.
On light they use #1a0dab which has a 12.42:1 contrast

Webaim suggests a possibly a blue compatible with both but no requirement to underline. I'm not sure I personally like the "sea of underlined links" style as it's called in the last comment but this page looks like it turned into. It's seems better used when shorter links are underlined in a body of text as on the Webaim page.

If you start exploring this, you’ll find that this requirement leaves only a small window of available page and link colors. For example, if your page has black text on a white background and you use the standard blue color for links, the link color must be between approximately this color of blue (#6a5eff) and this color of blue (#531fff). Any lighter or darker and it will not have sufficient contrast to the adjacent black text or to the white background, respectively.

@jonespm jonespm changed the title Something changed with the latest change to tsugi-static Link colors changed and underlined recent change to tsugi-static Mar 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants