fix(tags): tag text color contrast

[Ornanovitch]

Fixes #3633

Depends on #3652

Changes proposed in this pull request:

Use the new isDark utility to add new classes (e.g. tag-dark or tag-light) for better contrasts between tag's bg and text.

Reviewers should focus on:

My code style?

Screenshot

	before	after
discussion list
admin edit modal
tags page
discussion list hero
discussion hero
"start a discussion" btn

Necessity

• Has the problem that is being solved here been clearly explained?
• If applicable, have various options for solving this problem been considered?
• For core PRs, does this need to be in core, or could it be in an extension?
• Are we willing to maintain this for years / potentially forever?

Confirmed

• Frontend changes: tested on a local Flarum installation.
• Backend changes: tests are green (run composer test).
• Core developer confirmed locally this works as intended.
• Tests have been added, or are not appropriate here.

[Ornanovitch]

There is maybe a last element to work on, but it's less trivial, I need to think a bit more about it:

Other than that, I think my proposal is ready :)

[SychO9]

Yea, this is where CSS variables help with specificity issues. Let me push a commit later for this 👍🏼

[SychO9]

Pushed a commit to make it more flexible to change color based on YIQ using CSS Variables without having to define modifier classes for every component.

I also change the #111 & #ddd colors to #000 & #fff. They easier to the eyes, the other colors looked really odd with some backgrounds.

Another thing I noticed while testing locally 🤔. Too many other colors are changing that I don't think we want them changed. That's due to the threshold of 128 which insures high contrast results. That's good for a11y but I believe we want to introduce a high contrast mode in the future for this specific case rather than change all default coloring.

Can we please increase the threshold to 138?

[Ornanovitch]

Wow, what an improvement! Thank you 🚀 🚀 🚀 I need to learn about those css variables tricks.

I also change the #111 & #ddd colors to #000 & #fff. They easier to the eyes, the other colors looked really odd with some backgrounds.

That's fine IMO

Too many other colors are changing that I don't think we want them changed. That's due to the threshold of 128 which insures high contrast results. That's good for a11y but I believe we want to introduce a high contrast mode in the future for this specific case rather than change all default coloring.

Can we please increase the threshold to 138?

I don't have strong opinion on this, but I'd like to test a little. Do you have examples of some unexpected color changes?

[SychO9]

I'd like to test a little. Do you have examples of some unexpected color changes?

I use tag colors from discuss, the white text color on support tag by default is fine, but isDark with the current threshold of 128 leads in dark text color. (same with 90% tags).

Like I mentioned before, it's actually better for a11y for people who need really high contrast, but the intention is to fix that in the future through a high contrast mode anyway.

[Ornanovitch]

Tested, it seems perfect to me :)

[SychO9]

The last commit I pushed preserves design colo consistency in both light & dark modes.
This looks ready to be merged now.

[iamdarkle]

This is really cool, congrats on the long work on this!!

I'm glad I'll soon be able to get rid of my CSS mess that was trying to match the color with each of my tags.

[askvortsov1]

Very cool!