Unify Colors in adminhtml openmage design

[B3Hana]

Description (*)

The openmage design contains way to many colors, with many being used only once, or just barely different.
It also contains multiple definitions, which are not used anywhere or are doubled.

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

check the adminhtml design

Questions or comments

Currently a draft, as I'm not sure what to use to compile the scss without it containing unrelated changes.
I'm currently using sass 1.97.3

initially this was supposed to be an upgrade to add focus colors and such, but with this many colors it needs to be streamlined first. :(
(and selectors reduced, the amount of useless overrides makes it really hard to find the correct selector to update)

new datepicker with openmage blue:

new user menu, like the normal navigation:

messages:

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All automated tests passed successfully (all builds are green, SonarCloud checks are not required to merge)

[B3Hana]

@sreichel do you have an older sass version to compile the css files without unrelated changes?
Otherwise I can compile then but functions like darken would be translated to something like rgb(230.35, 230.35, 230.35) and some changes to how numbers are written.

Buttons now have a consistent hover/focus effect, and get darker not lighter.
I didn't rename the grayscale colors (or removed all color functions) for now, only condensed them .

[sreichel]

@sreichel do you have an older sass version to compile the css files without unrelated changes?

I broke my pc, cant check atm. Ive used compass from https://docs.openmage.org/developers/tools/ddev/#installing-compass

[B3Hana]

I used the newer version and removed some changes by hand. the replacement of some hex color codes with rgb seems to be on purpose by sass, as converting them back would lose precision. (not really needed for us, but whatever)

The PR is ready to be reviewed.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[addison74]

At first glance, I wouldn't remove color variables defined in the SASS files. It's possible they might be used. I also hope that the new colors were chosen according to color theory. As a topic for another PR I would ask an AI to analyze the colors used in OpenMage and recreate them based on color selection rules.

[B3Hana]

@addison74 for the most part, this colors are the same, or just slight variations of the already existing ones. This are not completely new colors. This also means this are not contrast conform based on accessibility guidelines, as this PR is only the initial cleanup and unification of the mess of colors currently present.

I already did a pass on proper contrast colors, but didn't include it yet in the other PR. (I can do so)

I understand this is a breaking change for everyone using this color variables for creating extension css files, but do we really want to leave this in just for this specific case? I'm not sure how many extensions, still in use, even use the scss files to compile new css files.

(The ultimate goal for me is having a proper set of defined colors with correct contrast ratio and usage)

openmage_base_blue_dark = (#nav .level0.active > a) was hardcoded before in menu.css
openmage_base_blue_text = color_dorado_approx

openmage_green_light = (new variation) similar to $color_chrome_white_approx
openmage_green = color_apple_approx
openmage_green_dark = color_san_felix_approx

openmage_yellow_light = color_island_spice_approx
openmage_yellow = color_casablanca_approx
openmage_yellow_dark = color_brandy_punch_approx

openmage_red_light = color_pot_pourri_approx
openmage_red = color_cinnabar_approx
openmage_red_dark = color_sanguine_brown_approx

openmage_blue_light = color_alice_blue_approx
openmage_blue = color_action
openmage_blue_dark = (new variation) similar to color_bahama_blue_approx
openmage_blue_gray = color_boulder_approx