Improve gtk accent colour palette

[lyubomir-popov]

• Introduce an improved colour palette: 8 colours that comply with accessibility contrast ratio requirements:
• Remove scss transformations on accent colours, as they are not needed (the proposed colours are carefully selected to work with both light and dark themes)
• Small refactor to separate the light and dark theme. Instead of inline if statements for every colour, 2 blocks of code - one for the light theme, one for the dark theme. This will make it easier to audit them and work on them independantly.

In the image below, the numbers inside colour swatches show that the minimum required contrast ratios from the WCAG spec are met:

• Text under 14px requires a minimum of 4.5:1
• Graphical elements and text above 14px/bold requires a minimum of 3:1

Below a list of screenshots of all proposed colours in both the light and the dark themes:

[Jupi007]

Hi @lyubomir-popov,
all those color are nice, but I see two problem with the refactoring of _colors:

• you define the vars name three times, and so the file is three times bigger and it add a lot of duplication ;
• and we aim to be as close as possible to upstream file and this modification totally break this rule.

So except if you think this change is really needed, can you revert this file to it's original look please 🙂

[3v1n0]

@Jupi007 yeah, we discussed already about that together and I think we'll revert that.

In case we can add a yaru-colors.scss file with overrides as we do in gtk4 IIRC

[lyubomir-popov]

@Jupi007 Yes, as @3v1n0 said we agreed to revert it, I'll push an update to my pr.

As for my reasons to initially go this way - doing any extensive theming work with hundreds of inline ifs would be quite difficult.
There are many issues that I noticed but fall outside the scope of this accent colour work - like the fact that noone knows how many different greys are currently in use. Or the fact that the hover in one widget (menu for example) is a different shade of grey form another widget (settings side nav). This happens because everything uses magic numbers in lighten(), transparentize(), etc.

Ideally those should be defined in one control file, and anotated - so if you come looking for a hover grey, you know where to look to find it, or change it across all widgets.

So I still think it's a good idea to pitch this refactor upstream, but not something that has to happen now by any means.

Regarding the duplication - it only increases the file size of the scss, not the generated css, and I think that's a small price to pay for being able to introduce some level of consistency.

[Jupi007]

@lyubomir-popov Okay, thanks for the explanation.

Honestly, Gtk3 is very stable since a while.
We do not plan to do more tweaks, and upstream didn't do any stylesheet update since a while.
We'd like to let Gtk3 die quietly and peacefully, that's why heavy modifications are now imo useless :)

[lyubomir-popov]

We'd like to let Gtk3 die quietly and peacefully, that's why heavy modifications are now imo useless :)

Didn't know that, thanks for the additional context. Makes sense to leave it be then.
That said, the above applies to whatever theming mechanism succeeds it.

[lyubomir-popov]

@3v1n0 I've updated the colour names and restored the _colors.scss. I've removed some color transformations that I think are unnecessary. Please have a look and let me know if you need anything else.

(I've also added fancier colour names like viridian, olive, bark)

[Muqtxdir]

@lyubomir-popov are the new-color codes final? asking because I'll change the colors offered in the settings appearance panel and in what order should they be presented ? (Currently for context the order is Orange (default), Aqua, Blue, Green, Pink, Purple, Red, Yellow)

[lyubomir-popov]

@Muqtxdir yes, they are final. The order should be as in the scss file - they are ordered by hue, from the default ubuntu orange on the left to the red on the right:

N.B.: I've noticed some differences between the colour in the code and the colour displayed in the dots. For example, the hex code of the ubuntu orange is: E95420; when I measure the colour of the orange dot, I get:

Could you please remove any color transforms e.g. lighten, transparentize, etc.

[Muqtxdir]

thanks for the clarification @lyubomir-popov I'll remove any transformations on the orange selector and arrange all the colors as you've suggested based on the hue.

[3v1n0]

Closing this as it has been merged in the branch that is part of #3416