Increased editor UI contrast

[britzl]

The editor color palette has been reverted back to what it looked like a few years ago with a higher contrast between text and other ui elements and the background.

Fixes #8384

LEFT = CURRENT LOW CONTRAST PALETTE, RIGHT = UPDATED HIGH CONTRAST PALETTE IN THIS PR

I was unable to build an editor from 2020, but there's a bunch of reference images in the documentation from that time:

https://github.com/defold/doc/tree/ce0109027b77aea1f05485b09e6e39bd1c98aa4e/docs/en/manuals/images

[AGulev]

@britzl could you pls rebase? Because now PR contains unrelated files

[britzl]

@britzl could you pls rebase? Because now PR contains unrelated files

Oh, thanks, missed that! Now merging to editor-dev.

[AGulev]

Is it really higher contrast than it was on text?
I mean it's become a bit blue, yes, but what contrast is the same, I think
Left is my experement (I think it's too much, yes). Right is how it was. In the middle it is your variant:

UPD: yes, it is. Maybe I didn't notice from the first view because of background difference

[AGulev]

It's hard to say if it's better without using it. It's different and feels unusual because of the fact I get used to having old colors. From the first view, the text doesn't feel brighter.

We should decide if we should just change it or think about having two different themes with a switcher if it's possible, which adds an ability to add light to them in the future.

I approve this PR, but I think you should decide with Mats if we should ship it.

[britzl]

The difference between what we have now and my revert back to the old color values is subtle, but there is a difference for sure. The contrast is increased between the background and components (buttons, input fields, sliders etc). Perhaps the contrast can be increased further, perhaps by 10-20% or so.

[matgis]

Wow, that's a lot of changes to the scss files. 😬

Just looking at the visual changes, I'd say there are some things that are better, some that made things worse, and some that are messed up.

• There is more contrast in editable fields, due to the higher text intensity and darker field backgrounds. However, the field labels now appear to have slightly less contrast against the background. Combined with the higher contrast field values, the labels are further diminished against the background due to their proximity to a higher-contrast element. I'm not sure if I find the end result to be less or more readable. I'm torn if I think we should make this change. 🤔
• The increased intensity of the text on highlighted and hovered items in the Assets and Outline panels, as well as the editor tabs and context menus is a clear improvement to me. I think we should do it.
• In form views, the intensity of text and field backgrounds is now more inconsistent than it was before. It was not fully consistent before either, but now there is a more pronounced difference between the field backgrounds of text fields, drop-down and table views in that both the backgrounds and the text intensities can have various values. I think we should make it consistent if we want to to make this change. I find the overall impression of editing a material slightly "messier" visually now.
• ⚠️ The section dividers in context menus straight up disappeared with this change. We need them back!
• ⚠️ The floating toolbar in scene views became very dark with this change. I don't think it was ever dark like that It's hard to see what the selected tool is. It's especially bad if you open the Visibility Filters popup, since the toggle button backgrounds now blend into the popup background so they no longer read as toggles. I think we need to restore the floating tool bar colors to what they were before.
• The contrast between the side panel and the main panel on the Welcome screen feels a bit too intense to me, compared to the other elements. I think the Welcome screen looked better before this change, but I concede the added contrast makes it more readable. Perhaps I just haven't acclimatized to the change yet. 🤔

[britzl]

• The section dividers in context menus straight up disappeared with this change. We need them back

I missed that!

[britzl]

• The floating toolbar in scene views became very dark with this change

Good point. I missed that. Here's an update:

[britzl]

• There is more contrast in editable fields, due to the higher text intensity and darker field backgrounds. However, the field labels now appear to have slightly less contrast against the background. Combined with the higher contrast field values, the labels are further diminished against the background due to their proximity to a higher-contrast element. I'm not sure if I find the end result to be less or more readable. I'm torn if I think we should make this change.

Well, I went back to what we had in 2020 before we changed the styles. And in 2020 the field labels were slightly lower in contrast than the main field labels.

I like the lower contrast field values. They are only used as hints of what's supposed to go into each field, and as such I think they should have a lower contrast than the main field label.

[britzl]

• I think we should make it consistent if we want to to make this change. I find the overall impression of editing a material slightly "messier" visually now.

How is it messier? It looks almost exactly the same. The difference is that the text in the input fields are brighter. Otherwise they're the same, no?

[britzl]

• The contrast between the side panel and the main panel on the Welcome screen feels a bit too intense to me, compared to the other elements. I think the Welcome screen looked better before this change, but I concede the added contrast makes it more readable. Perhaps I just haven't acclimatized to the change yet.

I don't have a super strong opinion on the Welcome Screen. Again, I went back to how it looked in 2020, before changes to the colors were made.

[matgis]

You fixed the toolbar in the Scene View, but the Visibility Filters popup that appears when you click the eye icon is still dark.

[matgis]

How is it messier? It looks almost exactly the same. The difference is that the text in the input fields are brighter. Otherwise they're the same, no?

There are now three distinct intensities of controls, whereas before it was two. It doesn't matter. We can do a pass on it later.

[britzl]

You fixed the toolbar in the Scene View, but the Visibility Filters popup that appears when you click the eye icon is still dark.

Thanks. Fixed:

[matgis]

Go ahead and merge!

[britzl]

How is it messier? It looks almost exactly the same. The difference is that the text in the input fields are brighter. Otherwise they're the same, no?

There are now three distinct intensities of controls, whereas before it was two. It doesn't matter. We can do a pass on it later.

True. I probably prefer what we have currently, but I didn't want to bring my own opinion into this change but rather revert to the original colours.

But I agree that we should make another pass over it at some point to perhaps increase contrast a bit more in some places, but also maybe tweak the cljfx form styling, which is a bit messy, especially when it comes to editable vs non editable fields and the table views.