Riverlea - merge crm-c-light-text and crm-c-text-light , tweak alerts in Hackney Brook dark mode

[ufundo]

Overview

Merge eerily similar css vars, tweak alert colours in Hackney Brook dark mode.

Journey

There's two separate css vars but I think there should be one? @vingle unless I'm missing something?

I noticed this when looking at the Standalone login page on Hackney Brook with Dark Mode -- the alert message text color seems to be undefined, because it's using crm-c-light-text , which isnt defined in that context.

Updating the mismatch actually was a step back, so then following lead I was trying to rationalise how the alert colours work in Hackney Brook dark mode. My brain couldn't cope with e.g. --crm-c-light-green now being dark green and vice versa... so I thought as a general rule it might be better to keep those color vars the same way round, and flip where they are assigned to instead.

They didn't seem to be used in too many places, so I this will make the alert colours and bit saner and not change much else?

Before

(The notification works a bit coincidentally, because the text color var happens to be undefined)

(note invisible alert text in popup)

After

(notification message fixed)

(no changes as far as I can see)

Comments

I haven't tested all the other streams extensively. It's definitely possible that there are other small issues from the merging. Seems like it would be a good PR to get in early in the alpha cycle...

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[vingle]

@ufundo thanks for spotting the crm-c-text-light and crm-c-light-text bug. I probably would have merged them the other way as a) I count 54 'light-text' vs 16 'text-light'. Also, generally the naming convention (tho it's not brilliantly consistent as it wasn't figured out in advance) is adjective-noun ie warning-background or success-border or light-text. That said because it's not consistent I won't stand in the way of text-light.

The other main change here around warning colours will need some testing. Emphasis colours are a headache because there's so many different ways they're used and there always needs to be good colour contrast. E.g. for warning you get:

• alerts, with one colour for bg, one for border one for text
• popup alerts, where the background is defined by the streams and in the current streams is white (like Shoreditch) or black (like Greenwich). But these still include emphasis colours on the border and the alert icon, and these colours need to contrast with the choice of bg
• buttons, eg btn-cancel which may also have an icon, like a trash or a times/cross, which might also have a colour, and yet the colour for those icons shouldn't display in the buttons if the buttons have a bg (but should if they don't as in Hackney/Finsbury)
• Searchkit also adds emphasis colours for table cells and dropdown items and these use different bootstrap classnames. Dropdowns themselves have a Stream-wide bg colour, so if you have a delete link in a dropdown, it also needs to have a good contrast ratio.
  (The darkmode flips for all of these different combos adds an extra pain point).

In short it should be a case of 'this is the red or green I want for danger/success' but in reality those colours need to work with the context and each stream has their own quirks. This is one of those problems I only realised while building RiverLea so it's ended up quite complex, and yet also not without issues. I tried to track this issue here: https://lab.civicrm.org/extensions/riverlea/-/issues/29 but as recently as v1.3 I had to add more emphasis colour variables to get the right contrast ratios, and I still occasionally find bugs, ie https://lab.civicrm.org/extensions/riverlea/-/issues/38, because of some combination, say, of an alert and an icon.

All of which is to say a) I will test these alert colour changes in a bunch of contexts next week; b) if it doesn't break anything else - great - if it does, then c) maybe it would be good to have a call to see if there's a way to rationalise/simplify this all. Most sub-theme makers won't need this level of complexity/configurability (in the core variables file, there's 9 variables with 'success' in the name and 11 with 'warning' - almost all specifying colours!).

[ufundo]

hi @vingle thanks yeh I pulled a thread and... it kept going.

Great if you can test a bit. Maybe a call would be good. I was thinking about streams and customised screens and how it would be really great if we can get as clearer view as poss of which variable pairs might appear as text-on-background or vv. But appreciate its not simple! I think the notification text disappearing in dark mode is a new example of the same bug

For naming, sorry I didnt notice that convention. I thought text-light made sense in a parent-variant kind of way? I was thinking it might help devs to be able to search crm-c-text and get

• crm-c-text
• crm-c-text-light
• crm-c-text-dark
  ...

[vingle]

I was thinking it might help devs to be able to search crm-c-text and get…

That makes sense. Flip side is being able to search crm-success and get crm-success-text, crm-success-border, crm-success-bg. As I say tho, I've not got a strong feeling on that.

FWIW - this screengrab doesn't occur for me, is it because of you forcing black on text in dark-mode standalone because of the login screen (#31991)?