Fix alignment and poor contrast on user pills in invite dialog

[gabrc52]

Signed-off-by: Gabriel Rodríguez [email protected]

Fixes #26098

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

Notes: Fixes invite dialog alignment and pill color contrast

Before screenshots

After screenshots

Dark theme (5.3 contrast ratio):

Light theme (3.5 contrast ratio):

Let us know if we should make a new variable (and how to name it! This would be helpful to improve the contrast for light theme without worsening for dark theme) or use an existing variable, or if you disagree with the color choice. There was no existing more specific alias for --cpd-color-blue-800: the closest was

--cpd-color-icon-info-primary: var(--cpd-color-blue-900);

but it does not seem to be enough contrast for dark theme.

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Fixes invite dialog alignment and pill color contrast (#11722). Contributed by @gabrc52.

[richvdh]

This is an improvement, but it doesn't wholly fix element-hq/element-web#26098 because it doesn't address the vertical alignment of the x button.

[richvdh]

I suspect this was introduced by #11470, which lightened the values of all the $username-variantN-color.

This fix seems vaguely plausible to me (using a random $username-variantN-color variable here seems like a bit of an abuse), but I think we probably should be using a CSS variable here.

@germain-gg this seems like your wheelhouse much more than mine; would you mind casting an eye over it?

[germain-gg]

Totally agree with @richvdh 's review here.

Looking at the semantic color we have defined, https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
I believe --cpd-color-bg-success-subtle would be an acceptable replacement. And one that passes the accessibility requirements. Using a $username-variantN-color variable here is not fit for purpose

[gabrc52]

This is how --cpd-color-bg-success-subtle (would it be "success" because the user was successfully added to the list of people to be invited?) looks like: you almost can't tell there is a pill anymore and it would require changing the font color on light mode.

With black font:

This is how it would look like with --cpd-color-text-info-primary (it is equivalent to --cpd-color-blue-900, the former value of $username-variant1-color):

As for the alignment, I was not personally able to find what CSS changed to cause that regression, but explicitly adding vertical-align: middle; to both mx_InviteDialog_userTile_pill and mx_InviteDialog_userTile_remove does the trick. Could you confirm if it is a suitable solution, or any other insights on what could have caused it? I can confirm it is successful on Firefox on Linux, Chromium on Linux and Safari on macOS:

[germain-gg]

Using the background color above and changing the text colour is indeed what I'm suggesting for this case.

[gabrc52]

Updated! This is the new before and after:

Before:

After:

[germain-gg]

Looks great, thank you for bearing with us and making the relevant changes.
Much appreciated!