Introduce Yaru OK and Yaru Green

[blue-devil-93]

Yaru OK and Green are themes in the looks of Traditional ok. @vkareh @raveit65 testing continhes here

[lukefromdc]

GIMP had some problems, but I was able to confirm that the leftovers on GIMP from my default theme occurred on every theme I have installed, so I suspect GIMP has an issue of partially reading the user's selected theme and partially reading the default theme. GIMP even froze up while trying to force it to fully show the theme by repeatedly changing it.

[blue-devil-93]

@lukefromdc

First thanks for testing.The slightly increased padding on right side is intended. Because i don't want the decorator icons to be to close to window borders. Also it does indeed depend a bit on window resolution. However you are right if there is a bit of padding on the right side there should also be some on the left.

Regarding csd : On yaru ok and green i did my vest to create a slotution for these widgets that did not exist before. On Traditional themes they are not there.Its possible to fix but then the question is how long it can be mantained this theme once gtk4 gets popular

[blue-devil-93]

Firefox and nautilus need to look at the bars.

The bug from @lukefromdc is not cocuring in mate. Now will check gnome-shell later next days.

On Fri, Jun 25, 2021 at 5:17 AM Frieder Saugschmerle < @.***> wrote:

@lukefromdc

First thanks for testing.The slightly increased padding on right side is intended. Because i don't want the decorator icons to be to close to window borders. Also it does indeed depend a bit on window resolution. However you are right if there is a bit of padding on the right side there should also be some on the left.

Regarding csd : On yaru ok and green i did my vest to create a slotution for these widgets that did not exist before. On Traditional themes they are not there.Its possible to fix but then the question is how long it can be mantained this theme once gtk4 gets popular

[raveit65]

Well, i am not really sure about white buttons when csd window is in foreground. Should be blue, or not? But ok, it's not a blocker by me.

[blue-devil-93]

@raveit65 That is a good question. we could make them blue like the window buttons, make them a bit lighter or leave them nearly white. It really is a design choice.

Currently there a three possible solutions ( just used the screen from @raveit65 and gimp):

a) - leave as it is now-

b) - make them mid- dark like headerbar-

c) - something betwwen a and b-

Solution b is the worst one in my opinion. c maybe. would require art least two or three persons to test it. since it needs to be checked on different moniotrs. Have only two myself.

[raveit65]

Of course that is a question of design, b.t.w it is a new feature. Old TOK/ TGreen never support foreground/backdrop styling. I like version c) because it has a better contrast between button bg_color and text(fg) color, and it simply looks better than a) and b) :) I am happy to test it.

[blue-devil-93]

Tomorrow i can submit a headerbar button scss code. Still very basic but it works imho. This parts needs to be tested by several users. So i`ll for now separate it a bit from the rest of the source code until it is confirmed to be stable on most applications.

On Sat, Jul 10, 2021 at 12:53 PM raveit65 @.***> wrote:

Of course that is a question of design, b.t.w it is a new feature. Old TOK/ TGreen never support fg/bg styling. I like version c) because it has a better contrast between button bg_color and text(fg) color, and it simply looks better than a) and b) :) I am happy to test it.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mate-desktop/mate-themes/pull/292#issuecomment-877617310, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEYCVHHEXU74AEIBAN3M4LTXARA3ANCNFSM47IOMWBQ .

$headerbar_button_gradient_a: gtkshade(desaturate($core_color_a, 20%), 1.15); $headerbar_button_gradient_b: gtkshade(desaturate($core_color_a, 20%), 1.1); $headerbar_button_gradient_c: gtkshade(desaturate($core_color_a, 20%), 1.08); $headerbar_button_gradient_d: gtkshade(desaturate($core_color_a, 20%), 1.02);

$headerbar_button_hover_gradient_a: gtkshade(desaturate($core_color_a, 40%), 1.25); $headerbar_button_hover_gradient_b: gtkshade(desaturate($core_color_a, 40%), 1.2); $headerbar_button_hover_gradient_c: gtkshade(desaturate($core_color_a, 40%), 1.19); $headerbar_button_hover_gradient_d: gtkshade(desaturate($core_color_a, 40%), 1.12);

$headerbar_button_backdrop_gradient_a: gtkshade(desaturate($core_color_a, 100%), 1.25); $headerbar_button_backdrop_gradient_b: gtkshade(desaturate($core_color_a, 100%), 1.2); $headerbar_button_backdrop_gradient_c: gtkshade(desaturate($core_color_a, 100%), 1.18); $headerbar_button_backdrop_gradient_d: gtkshade(desaturate($core_color_a, 100%), 1.12);

$headerbar_button_backdrop_hover_gradient_a: gtkshade(desaturate($core_color_a, 100%), 1.3); $headerbar_button_backdrop_hover_gradient_b: gtkshade(desaturate($core_color_a, 100%), 1.25); $headerbar_button_backdrop_hover_gradient_c: gtkshade(desaturate($core_color_a, 100%), 1.23); $headerbar_button_backdrop_hover_gradient_d: gtkshade(desaturate($core_color_a, 100%), 1.17);

headerbar { button { background-image: linear-gradient(to bottom, $headerbar_button_gradient_a, $headerbar_button_gradient_b 50%, $headerbar_button_gradient_c 50%, $headerbar_button_gradient_d); border-color: gtkshade(#a7bdd8, 0.6); &:hover { background-image: linear-gradient(to bottom, $headerbar_button_hover_gradient_a, $headerbar_button_hover_gradient_b 50%, $headerbar_button_hover_gradient_c 50%, $headerbar_button_hover_gradient_d); border-color: gtkshade(#a7bdd8, 0.6); } &:backdrop { background-image: linear-gradient(to bottom, $headerbar_button_backdrop_gradient_a, $headerbar_button_backdrop_gradient_b 50%, $headerbar_button_backdrop_gradient_c 50%, $headerbar_button_backdrop_gradient_d); } &:backdrop:hover { background-image: linear-gradient(to bottom, $headerbar_button_backdrop_hover_gradient_a, $headerbar_button_backdrop_hover_gradient_b 50%, $headerbar_button_backdrop_hover_gradient_c 50%, $headerbar_button_backdrop_hover_gradient_d); border-color: gtkshade(desaturate(#a7bdd8, 100%), 0.7); } } }

[lukefromdc]

Very nice looking headerbar in Gedit-and very functional:

[raveit65]

The headerbar buttons with yaruOK are better now when in foreground, but for my taste not blue enough. In your first screenshot https://github.com/mate-desktop/mate-themes/pull/292#issuecomment-877590150 (version 3) it looks better for me. With yarugreen i see only light buttons when in foreground or backdrop mode. I suggest to make the same color mixes for both themes. This will make it easier to maintain.

[blue-devil-93]

@raveit65 Thank you for the feedback. Tomorrow or next week i'll look at it. Some colors need still to be optimized. Check it on my screen. If someone find some regressions or bugs please mention them. Also need to check canvas-item:selected for desktop of xfce and mate. Maybe have to look at the trad themes there.

Other than that it works fine on ubuntu 18.04 -21.04 and on fedora rawhide.

[raveit65]

@blue-devil-93 In my opinion we can merge PR after you found a similar solution for gtk-header buttons for both themes. Other adjustments or fixes can be done when the new themes are merged. Believe me, we will get reports when users starts to test new themes with first release :) Normal business.

[blue-devil-93]

@raveit65 what you mentioned was nearly the solution already. Also i did add some support for xfce desktop. Yes it is only mate themes here but most basic gnome and xfce has to work too or i-/we get a ton of complaints later.

On Sat, Jul 24, 2021 at 11:01 PM raveit65 @.***> wrote:

@blue-devil-93 https://github.com/blue-devil-93 In my opinion we merge the PR after you found a similar solution for gtk-header buttons for both themes. Other adjustments or fixes can be done when the new themes are merged. Believe me, we will get reports when users starts to test new themes with first release :) Normal business.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mate-desktop/mate-themes/pull/292#issuecomment-886110882, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEYCVEOI5UVO63TLL6UNNDTZMSZVANCNFSM47IOMWBQ .

[raveit65]

Here we go, thx.