Fix gradients

[asvae]

Written by @xx13

Colours, Gradients, Zeplin

Current version has gradients that consist of 2 colours: an original one and a modified version. That works for all main colours, except for the green (oops).

Two Green Colours

For some reason green gradient has a slightly different green shade on the right, and I think that caused some confusion about the way gradients should be built though there are no drastic visual differences. Instead of #40e583 colour #23e066 was used.

One Green To Rule Them All

Let’s use #23e066 as the main green colour. It adds a little more contrast that will be appreciated by users. Here are some examples of this minor update:

If it works for you, I will updated all styles with the green in Zeplin.

Gradients

Let’s stick to the following structure: a modified colour on the left and the original colour on the right. Here are some examples:

Current implementation needs a fix because both colours are modified and the original colour barely impacts the way the gradient will look like.

Hover

Let’s fix hover effect. I believe the issue is about using absolute lighten values instead of relative ones. That might be the reason why the hover effect looks so rough. Let’s be sure to use scale-color instead. I'm good to go with any other solution as long as it solves the issue. Please compare:

Pressed

Let's tweak pressed effect a little and make it less dark: use 7% darken instead of 10%. Please note that these changes are not in Zeplin, just a tweak on the go, but I'd change the source files if you agree with that :)