Matching materia theme with change-colors

[gnunn1]

• Materia version: Master (git clone)
• GTK3 version: 3.24.2
• Distribution (and version): Arch Linux
• Desktop environment (and version): Gnome 3.30
• Related application (and version): All

Actual Issue

When generating a theme with change-colors that are some visual discrepancies between the theme it outputs and how materia looks natively. Specifically:

1. Buttons and other controls have different colors. In Materia all controls (buttons, combo, entry) are the same white color. When generating a theme with customer-colors, the buttons are colored based on the MATERIA_SURFACE color whereas the other controls use the $fill_color which in the template _colors.scss.template is specified as:

   $fill_color: rgba(%FG%, 0.04);

   If you modify the template to change the $fill_color to the surface color the controls are uniformly colored:

   $fill_color: %MATERIA_SURFACE%;

2. In the generated theme the borders around entries and comboboxes are different then the borders around buttons which leads to some visual discrepancies. Additionally the hover effect over comboboxes looks noticeably worse then the buttons. In the Materia theme the border and hover effect is consistent between the buttons and combos.

   Here is a picture of the tweak tool using the Materia theme (cursor hovering over "Bibata Oil"):

   

   And a picture using my generated theme with the cursor hovering over the same combo (note I patched the fill color hence controls are colored identically in screen shot below):

   

   Also notice the GTK3 widget factory with my generated theme and how a button next to an entry doesn't align with the entry (The fifth control down on the left, the entry with the X):

   

   If I had to guess, it almost looks like the combobox is being clipped so you can't see the full border?

Steps To Reproduce

To reproduce, I generate my theme using the following command:

./change_color.sh -o Orchis <(echo -e "BG=EFEFEF\nFG=444444\nHDR_BG=444444\nHDR_FG=DDDDDD\nMATERIA_VIEW=FFFFFF\nMATERIA_SURFACE=FFFFFF\nSEL_BG=A348B1\nSEL_FG=EEEEEE\nMATERIA_SELECTION_OPACITY=1.0\nMENU_BG=EFEFEF\nMENU_FG=444444\nMATERIA_STYLE_COMPACT=False\n")

[gnunn1]

Note I'm comparing change-colors.sh from master to the Materia theme from the Arch repos, this may be just a bug in master rather then a difference between the two. I'll test the last release in the morning to double check.

[nana-4]

Hi, thanks for reporting this.

Materia is currently undergoing a large redesign based on the refreshed Material Design Guidelines on the master branch. So please note that there are design differences between the latest stable version (v20181125) and git development version, especially in entry, combo, and selection. In the preview of README.md, the stable version is (still) applied.

Buttons and other controls have different colors. In Materia all controls (buttons, combo, entry) are the same white color. When generating a theme with customer-colors, the buttons are colored based on the MATERIA_SURFACE color whereas the other controls use the $fill_color

In the generated theme the borders around entries and comboboxes are different then the borders around buttons which leads to some visual discrepancies.

On the master branch, entries and comboboxes have been redesigned based on the latest Text fields Guidelines. So it is intentional.

Additionally the hover effect over comboboxes looks noticeably worse then the buttons.

I agree with that. I'm going to adjust the hover state style of the combobox to make it more noticeable.

Also notice the GTK3 widget factory with my generated theme and how a button next to an entry doesn't align with the entry (The fifth control down on the left, the entry with the X):

I'd say it's an optical illusion. Here's x4 scaled screen capture (Please note that the entry has an inner border and the button has a drop shadow):

[gnunn1]

Thanks for the reply, I do find the difference in colors between buttons and other controls (entry, combobox, etc) to be distracting and much prefer the old look. For example, here is a screenshot of the tweak user interface, the mixture of white for buttons and grey for other controls makes things look off IMHO (this was generated using the change-colors command you provided in my other issue):

With regards to the button next to the entry, it may be an optical illusion but it still looks off to me since the dark grey border at the bottom doesn't align. Here's a screenshot of the tilix preferences which uses an editable combobox, with the white button and mis-aligned bottom border it doesn't look attractive IMHO.

The same screenshot as above but using the last Materia release looks much better:

[actionless]

i think your style expectations are contradicting to Material Design guidelines to which Materia theme is trying to adhere (specifically about entries -- their background have to be derived from Text color but with small level of opacity like 5%)

i could suggest you trying one of other themes supported in oomox app (ie supporting the same color palette format as you pass to ./change_color.sh script)

[PJ-Singh-001]

nana-4,

Does Materia 2 dictate that the "X" button should be rendered separately from the entry field?

Or can it be rendered inside the entry field the way the "down triangle" is rendered in the "Area" field of the screenshot below?