[18.0][IMP] web_theme_classic Add dark mode and some cleanup

[ljmnoonan]

This could be 2 separate PRs, so please let me know if you would like me to split them.
The original purpose of this PR was to make this module play with web_dark_mode as promised in my previous PR, #3324. This is implemented in 5f2789c.

Here are some screenshots of this module in use in conjunction with web_dark_mode:
Before:

After:

However, while implementing the dark mode assets, I discovered a whole bunch of broken features and deficiencies in the existing code, so I decided to go about fixing them. All the changes are detailed in the commit message on a3e37ed, but I will attach some before and after pictures here for clarity.

Add $wtc-input-color-required

Before:

After:

Add CSS selectors to consistently handle many2many fields added as a custom property

Before:

After:

Fix monetary field selectors.

Before:

After:

Please let me know if you would like any changes!

[OCA-git-bot]

Hi @legalsylvain,
some modules you are maintaining are being modified, check this out!

[legalsylvain]

LGTM. Thanks for this refactoring and improvment !

[remi-filament]

Hi @ljmnoonan thanks for this PR, I started looking at how to improve borders on monetary fields and realized you did it as well !

Would you mind trying to also fix the currency symbol which is not aligned with amount :

While testing, I found out that adding

align-self: center;

does the trick (although Firefox reports that it has no effect)

[ljmnoonan]

@remi-filament, thank you very much for the heads up!
Even though Firefox doubts it, align-self: center; does seem to be the best fix for the the wonky placement of the monetary symbol.
While working on this I also changed the 2px margin to keep the symbol off the border to be on the symbol element instead of the input element. This allows me to account for which side it was on, although I must admit, the css selectors are a little crazy and will surely break if odoo ever changes anything, but at least it won't be very noticeable.
Also, I discovered that the searchbar in settings was getting a double border, so I fixed that.
The one remaining problem that I am noticing is that if you put invalid values into an input the background glows red as expected, but the border does not change to red. I do not think this can be realistically fixed though, so just leaving it.

Screenshots:

[remi-filament]

Great, thanks @ljmnoonan it is much better and I think current limitations are accceptable (were already there before I guess) !
Maybe it is worth adding them in README in ROADMAP section ?

[OCA-git-bot]

This PR has the approved label and has been created more than 5 days ago. It should therefore be ready to merge by a maintainer (or a PSC member if the concerned addon has no declared maintainer). 🤖

[legalsylvain]

Hi. ready to merge ?

regards

[ljmnoonan]

@legalsylvain
Not yet, please. I am working on a solution for invalid fields. Should get it done today

[ljmnoonan]

@legalsylvain @remi-filament
This should be ready to merge now. However, I would appreciate if you look it over again.
Long story short, while trying to get the "field invalid" styling to work I went down the rabbit hole figuring out how odoo does it. It turns out that they do not actually change the borders, but rather the color variable in css on the front end. We were using a sledgehammer by overriding it on the backend with a scss variable. Also, odoo was actually setting borders as transparent by default, but we were trying to hide them via border: 0; which caused the alignment issue that @remi-filament pointed out.

Having already wasted enough time on it, I went all in and adjusted the whole thing to follow odoo's example, and I believe the result is much more comprehensive.

Please let me know what you think!

PS: I will update the PR description and screenshots to reflect the new state of things in order to avoid confusion in the future

[remi-filament]

Thanks @ljmnoonan LGTM it works well for invalid inputs !
From my point of view, this can be merged @legalsylvain

[legalsylvain]

/ocabot merge minor

Thanks !

[OCA-git-bot]

What a great day to merge this nice PR. Let's do it!
Prepared branch 18.0-ocabot-merge-pr-3322-by-legalsylvain-bump-minor, awaiting test results.

[OCA-git-bot]

Congratulations, your PR was merged at 3a6d26c. Thanks a lot for contributing to OCA. ❤️