fix(ui): improve color contrast of tags

[ChristophWurst]

Fixes https://github.com/nextcloud/mail/issues/5149

	List	Modal
Before
Dark
Bright

[ChristophWurst]

@nimishavijay could you please give early feedback? Is the approach acceptable design-wise?

[nimishavijay]

Nice improvements on the visual design aspects like rounding corners etc. I agree that the color contrast can be improved, but going with such bright colours seems like possibly a regression design-wise.

We could use very dark and very light versions of the tag color, similar to before, and additionally add a 1px border. Something like this: text colour: color-mix(in srgb, [tag color] 25%, var(--color-main-text) 100%) background: color-mix(in srgb, [tag color] 25%, var(--color-main-background) 100%) border: color-mix(in srgb, [tag color] 50%, var(--color-main-background) 100%)

since --main-text and --main-bg always have very high contrast, it should work. What do you think?

[ChristophWurst]

The rounding is a side effect of deduplicating four copies of the more or less same code for tags 🌝

The tags will look like this with the suggested CSS:

This works in terms of text readability but we'll lose most of the color

[nimishavijay]

You're right, but design wise this seems to be in the right direction (ref outlook as well)

How about background: color-mix(in srgb, [tag color] 40%, var(--color-main-background) 100%) This should make it brighter in the background