Task: take colours from sketch into default terria

[soyarsauce]

Hey @vicborgy - we are finding it hard to determine what shades of colours to use when we are implementing the designs, currently we have various shades of grey in use which are loaded in as the defaults for all terriajs maps. Then independently, each TerriaMap (e.g. NSW DT, DEA maps) can override these variables so that it can be skinned/themed for each map.

For instance, here's a small snippet of all the various greys in use for all maps that use terriajs:

$dark: #3f4854;
$dark-with-overlay: #667080;
$dark-lighter: #595b60;
$grey: #888888;
$grey-lighter: #ddd;
$grey-lighter2: #e6e6e6;
$grey-lightest: #f2f2f2;
$field-border: #ddd;
$text-black: #000;
$text-dark: #595b60;
$text-dark2: #606d80;
$text-darker: #4d5766;
$text-light: #ffffff;
$text-light-dimmed: #bbbbbb;

(full file at https://github.com/TerriaJS/terriajs/blob/mobx/lib/Sass/common/_variables.scss#L10)

We want to make sure there's a way to manage all this, and minimising having to create Yet-Another-Variable. Phil started the beginnings of this in his handover sketch files, e.g. see:

Can you make sure you incorporate a system so that all the possible variables(or symbols in sketch if you will) are stated upfront, and we can speak a common color language? 😀

And, if you'd like I can help you point out which variables get overriden for any given map if you want examples. For a hard example here, there are only 6 color overrides for de-australia:

$color-primary: rgb(0, 161, 222);
$color-secondary: rgb(143, 202, 231); // or: lighten($color-primary, 20%);
$modal-highlight: $color-primary;
$color-primary-light: lighten($color-primary, 10%);
$color-primary-dark: darken($color-primary, 10%);
$dark-darker: hsl(0, 30%, 15%);

https://github.com/TerriaJS/de-australia-map/blob/master/lib/Styles/variables.scss

[soyarsauce]

(cc @reginapramesti )

[vicborgy]

At this stage this has been so hard to manage because things have been needing to be umped out the door. I need some time to stop doing new work and focus on getting the documents updated with consistent colours and have a system in place.

[soyarsauce]

Yeah @vicborgy I totally understand - in the meantime are you happy for us to pick any new colours, based on the closest matches we have in our current variables?

[vicborgy]

Well yes and no. Be good if you can run it past me just in case there isn't a close match but I will make a conscious effort to stick to the existing colours so it shouldn't be a problem moving forward.