Yaru Mate support

[frederik-f]

@jannomag and @eaglers seem interested in supporting a Yaru version for the Mate desktop by changing the accent color(s) from orange (and blue?) to mate green.

@Wimpress would also be interested and me and @c-lobrano would be okay to support it, as long as we do it somehow “smart” and with a medium amount of maintenance needed. For example, changing our meson build to also build a mate version additionally to Yaru and Yaru-dark.

@Wimpress said that there are some style classes missing for mate - which exactly?
And @didrocks could you help us again with your meson skills?

Let’s see if this is possible on our repository - if not, then we can still build a fork!

[didrocks]

I think @wimpress is very capable of doing the meson work as a packager, but I can give a hand (limited though, due to my current work on the new installer and other tasks…)

[frederik-f]

We could import a different _color.scss for the Mate theme. Or we could let the _colors.scss file point to another file for $selected_bg_color (currently orange) and $neutral_color (currently blue). Right now the $orange and $blue are from _ubuntucolors.scss. So maybe have a _mate_colors.scss which is being used for the Mate build?

[frederik-f]

@jannomag
Do you plan to use the SCSS + meson build we use in Yaru? I believe using the plain CSS could be a bit complicated if we change stuff
Why don’t you use a regular fork and make it a bit more solid? This way it could be used outside of your personal favorites and could be used by Mate. Currently it looks to me like we are doing double work here.

[jannomag]

Well, I’m new to this…I know CSS but not SCSS. I tried to read into it but I didn’t had the time to learn it completely.
But I know, that it would be better to use SCSS instead of CSS…it’s just a matter of time for me.

Do I need to compile it everytime I change something and how do I do this?

BTW: My Mate theme is on Github:
https://github.com/Jannomag/Yaru-Colors/tree/master/yaru-mate

[eaglers]

I replaced only one value to replace orange with green. However, here and there orange remained, primarily in a menu bar item.

[jannomag]

There are 19 orange tones in the css. I wrote a list on top of my gtk.css

[c-lobrano]

That’s why I strongly suggest you to edit the .scss: all the orange tones are automatically generated from just one. The time spent is just an investment

[jannomag]

Oh, alright. I try to learn how it works, when I have time for it.
The scss is in the Yaru source, right?

[frederik-f]

Yes, I would suggest that you fork the Yaru repo by clicking that fork button in GitHub
Then you can use this tutorial
https://github.com/ubuntu/yaru/blob/master/CONTRIBUTING.md
But exchange the URL of the Yaru repo with your GitHub fork URL
Also install git, meson and sassc first
Then you can change the colours in _colors.scss and after you ran the meson build your changes are applied everywhere those changed color variables are used!

[jannomag]

After going through all files, I think it’s more work to change everything to a new theme as to change just the colors inside the css. I still need to modify all images and still need to modify many files to create a new theme directory.
I simply could change the colors but then the theme is still called Yaru and will overwrite the original Yaru theme.

[frederik-f]

You don’t need to modify anything besides the colors in colors.scss

Then build as described in the contributing page
When you build after saving your changes the scss files are used to make the CSS files you don’t need to do anything beside sudo ninja install

[jannomag]

But when I do “ninja install” it installs the theme into “/usr/share/theme/Yaru” which will overwrite the original Yaru.
So I need to change the installation paths before build, or did I misunderstand something?
I can generate the css manually but this means it just a bit less work for me and it’s not easier for the users who want to have other colors.

[c-lobrano]

this is correct. It should all be dependent on “project name” set in Yaru/meson.build file (the project command)

[jannomag]

Ah okay … But there are also some directory names in some other files. I’ll try it out.
But I still think it’s better to share the compiled gtk/shell theme and not your source with an installer script.
The biggest part are the images which will be compiled while ninja install, right?
So, we need to recolor the svg manually or is it possible to do it by script?

[eaglers]

I have already push ‘mate’ branch to my repository:
https://github.com/eaglersdeveloper/yaru/tree/mate

[c-lobrano]

I still think it’s better to share the compiled gtk/shell theme and not your source with an installer script.

I agree, sharing the compiled css is probably easier, however you are going to gain a lot of time working on scss (I can say it’s really easy, and I didn’t do any real design work before Yaru), but it’s up to you.

The biggest part are the images which will be compiled while ninja install, right?

No, images are not compiled

So, we need to recolor the svg manually or is it possible to do it by script?

This last work on icons made me learn that always can be scripted :D, however there is nothing already in place