Vendor style initiative - color palette

c-lobrano · October 26, 2019, 4:12pm

Hey

as part of the upstream vendor style initiative (see gnome discourse link and Exchange hardcoded colours with exported colours in gtk apps)

one of Yaru’s next goals is to clearly define a color palette, in the same way Adwaita and elementary OS did.

Yaru has borrowed its palette from Unity8 at the beginning, but then we diverged for many reasons. The goal is to expose this palette for App developers to pick them if needed, instead that hardcoding them into the app, looking then out of place when changing theme.

I’d like to merge the work done so far, officially introducing some colors and, if possible, come closer to the work already done by Ubuntu design team.

Here the current ubuntu color definitions in Yaru: https://github.com/ubuntu/yaru/blob/master/gtk/src/default/gtk-3.20/_ubuntu-colors.scss
while here the Suru icon palette https://snwh.org/suru/guidelines

Below some reference links:

https://design.ubuntu.com/brand/colour-palette/
https://www.w3.org/WAI/standards-guidelines/wcag/
Ubuntu touch color palette
In order of appearance:
Porcelain. Recommended for foregrounds.
Silk. Recommended for neutral action buttons and secondary text.
Ash. Recommended for subtitles and other tertiary content.
Graphite. Recommended for coloring dark themes’ background.
Slate. Recommended for text and action icons.
Inkstone. Recommended for foreground colors in dark themes.
Jet. Recommended for content coloring.
Orange. Recommended for branded elements, display progress and intensity, textual links on light backgrounds.
Purple. Recommended for proper nouns in list items.
Red. Recommended for negative and irreversible action buttons, errors and alerts.
Green. Recommended for positive action buttons.
Blue. Recommended for text selection and text cursor.

/cc @mpt, @didrocks (if still have time after ZFS ), @madsrh, @jaggers, and anyone who wants to contribute

c-lobrano · October 25, 2019, 9:22am

Adding @Wimpress as new Ubuntu desktop director

(congrats also here btw )

meetdilip · October 25, 2019, 11:18am

What is the first step ? Identifying/defining colours ? Where to look for them ?

I see that there are 4 palettes listed.

design.ubuntu
Ubuntu touch
Adwaita
Elementary OS

What to do ? Put them all together ?

c-lobrano · October 25, 2019, 11:55am

I think the first step is a brainstorming of all above.

I’d add also this https://www.w3.org/WAI/standards-guidelines/wcag/

meetdilip · October 25, 2019, 12:24pm

Let us use one of them as base and then build on it. Either Ubuntu Palette or Adwaita, which is upstream. Since we are changing colours from upstream, I think it will be better to start with Adwaita and then add/remove colours to it.

c-lobrano · October 25, 2019, 12:54pm

I’d start with our current palette and try to converge towards Ubuntu web ones, more than adwaita’s one

EDIT:
Adwaita and Elementary as a reference for the number of colors, in term of different color and tones of the same color, more than the actual colors used.

meetdilip · October 25, 2019, 1:15pm

Where can we find that ?

c-lobrano · October 25, 2019, 1:32pm

There isn’t a clear definition of a full palette, this is the goal of this step, however we started from Ubuntu touch color palette (see link in the first post)

EDIT: updated first post with the link to current Yaru specific colors

meetdilip · October 25, 2019, 1:49pm

How can we find the hex colours equivalent to colours like this

$terminal_base_color: lighten($terminal_bg_color, 5%);

c-lobrano · October 25, 2019, 1:53pm

We need to get creative here :D, my best reply is http://scg.ar-ch.org

meetdilip · October 25, 2019, 2:43pm

I got most of them. But how about this one ?

mix($headerbar_fg_color, $headerbar_bg_color, 50%);

I converted all others to hex code. Only these 4 evades me

 $headerbar_insensitive_color: mix(#F7F7F7, #323030, 50%);
//
$backdrop_headerbar_fg_color: mix(#F7F7F7, #323030, 70%);
$backdrop_headerbar_text_color: mix(#CCC, #323030, 70%);
$backdrop_headerbar_insensitive_color: mix(#F7F7F7, #323030, 70%);

meetdilip · October 25, 2019, 5:07pm

I recently worked with Bootstrap for an Inkscape palette. I used this as reference

https://getbootstrap.com/docs/4.0/getting-started/theming/

They choose a few base colours and their shades as $red-100 to $red-900

bootstrap greys

Looks like all we have to do is to choose the base colours and then add those shades to it.

meetdilip · October 25, 2019, 5:37pm

Based on _ubuntu-colors.scss I created basic palette shades for distinct colours. I haven’t accommodated blacks and whites though.

These are Yaru palette colours and derived shades

yaru blue yaru gold yaru green yaru orange yaru purple yaru red

jaggers · October 25, 2019, 5:52pm

In terms of icons, I generally pipette colours from the palette graphic in Sam Hewitt’s Suru guidelines: https://snwh.org/suru/guidelines

When I need a dark grey (not included) I generally use the one from the Terminal icon. I’ve also pipetted colours from other original Suru icons. There may be a couple of elements here and there which use random shades and I think we did the folders by eye, rather than using an existing colour (I pipetted them from a mockup by @madsrh).

If the Suru palette + Terminal grey + folder oranges could be included in our official palette, that would cover the icons.

rekkert · October 26, 2019, 2:13am

I have experience in UI design for games, but I’ve never contributed to anything like this, so apologizes if I misunderstood the meaning of this.
Given the current color pallet of Ubuntu, with prominent oranges and violets, what about having other secondary colors as the pallet for apps, rather than standard “red, blue, yellow, etc.”?

Ubuntu_Colors

meetdilip · October 26, 2019, 7:39am

I have perfected the palette further. You can now see more shades and hex code

This is based on Utility colours in Yaru.

c-lobrano · October 26, 2019, 4:17pm

One “problem” is the number of color we all are going to propose. It seems that a number between 5 and 7 for each one, so I am still investigating what is the best range, before proposing any palette. Also the best contrast possible must be into account when putting colors together (contrast between foreground and background).

Thanks @jaggers, I forgot about it, added now to the first post.

This is great anyway, thanks a lot. As said above, before generating the palette, I’d like to better understand what could be the optimal variation between colors (e.g. 10% lighter, 20%? How about the other changes like hue, saturation, …?), but it’s great to have someone able to generate palettes

meetdilip · October 26, 2019, 4:39pm

Agreed. I was just trying to start the discussion in a creative manner. As for variants, we can use 4 darker and 4 lighter on both sides of the base colour. There are some tools which can compare a set of colours with each other. Most of them are free as well.

c-lobrano · October 26, 2019, 4:45pm

Currently, both Adwaita and Elementary provides at most 7 variants, usually only 5.

meetdilip · October 26, 2019, 4:48pm

3 or 2 on both sides then. If we want to go on our own palette route and include Suru palette ( which is wide enough ), will it be easy ? When we have only 5/7 shades per colour, Suru palette itself make our range full.