Currently we have a file in our styleguide which defines around 121 colors, of which 57 are unused, and 64 are actually being used.

These files is just a list of aliases to colors, for example "blue-tiber" means #093944. 

The file is here: https://github.com/greenpeace/planet4-styleguide/blob/master/src/base/_colors.scss

From the coding side, I already made some changes to actually reduce that list to the 64 colors that are currently being used.

But I would strongly suggest to change the way this palette is built. There is no standard for color names, except maybe for Pantone, the X11 standard, or some other conventions like the CSS names.

The names of the colors actually don't help us much, so my proposal is to start thinking differently, and think about the function, as we do for campaigns using CSS variables, for example, instead of having:

$spray: #86eee7;

We should have things like:

--navbar-links-hover-color: #86eee7

Where the variable name describes where the color is used. If we do this change, then it would be very easy to see where a color is actually used by just looking at the color list, and it would also very easy to change for a different one and use it in other CSS files.

We can still have color names for important ones, for example, brand colors that come from another guide ("gp-green" or whatever).

 Tasks

• Clean up _colors.scss in the styleguide for unused colors (in progress)
• Collect places where we could be using CSS Variables, for example:
  • Buttons: 
    • Primary button color
      • Hover color
      • Idle Color
    • Secondary button color 
    • Primary button border radius
    • Secondary button border radius
    • Primary button border color
    • Primary button border width
    • Secondary button border color
    • Secondary button border width
    • ...( all these button values are currently overriden in campaigns but not available in the sidebar)
  • Galleries:
    • Gallery border color
    • Gallery inner padding
    • (these two are also used in campaigns but not available in the sidebar)
  • Footer colors
    • Background
    • Link colors
      • Idle
      • Hover
    • Social icon colors

• • • • Idle
      • Hover
    • (these already have CSS variables, as they are used in campaigns, but they are also useful for NROs).
  • Navbar colors:
    • Background
    • Link colors
      • Idle
      • Hover
    • (these already have CSS variables too, as they are also used in campaigns, and also useful for NROs).

• Use meaningful names for the colors instead of "palette names"  (see examples above).

 
This may overlap a bit with https://jira.greenpeace.org/browse/PLANET-5104 , maybe we can merge the two tickets into one, or do this one first and check the NRO colors separately.

I don't expect this to be a huge task (unless we make it a huge task and try refactoring everything), it's just using CSS variables instead of the SASS ones. We have to deal with other problems related to colors (for example, we have color definitions in the block's code, in JS), but let's stick to just renaming the variables for this one.