Rationalize colours and document them

[inesdgomes]

It seems we have quite a lot of colours in here that may not be in use or are repeated: https://www.figma.com/design/qr8jQnxqJkRJFQnVC5PmrB/ILO-Foundations?node-id=1406-438&t=BAOv58LZKk9go8Bw-0

We should:

• Review all the colours in the ILO Foundations and check whether they're used
• Remove the ones that are not used or are duplicates
• Come up with better names and document how they should be used
• Ensure what we have in ILO Foundations is reflected here: https://twig.ui.ilo.org/?path=/docs/tokens-colors--page

cc @justintemps

[beatrizmartinmartins]

@justintemps do you know if we use them all on code? Because we might not be using them on design, but maybe on dev side we are. I'll put the ones we use on design as well

[beatrizmartinmartins]

Hey @justintemps just a follow up, I checked that we are not using these colors. Is this right in dev as well?

[inesdgomes]

@justintemps Please see Beatriz's question above.

[inesdgomes]

Hi @justintemps @Shashika6 Could you please get back to Beatriz on the question above?

[beatrizmartinmartins]

@justintemps Hey Justin is there a way to know if these colors are being used on the product? We don't have them listed here but there's a few colors missing anyway so don't know where to look for a source of truth

[justintemps]

Hi there @beatrizmartinmartins,

These are the only colors that the Design System should be using.

  --ilo-color-white: rgba(255, 255, 255, 1);
  --ilo-color-blue: rgba(30, 45, 190, 1);
  --ilo-color-blue-lighter: rgba(235, 245, 253, 1);
  --ilo-color-blue-light: rgba(190, 220, 250, 1);
  --ilo-color-blue-dark: rgba(35, 0, 80, 1);
  --ilo-color-blue-medium: rgba(210, 213, 242, 1);
  --ilo-color-blue-ramp: rgba(30, 45, 190, 0.4);
  --ilo-color-blue-dark-ramp: rgba(35, 0, 80, 0.5);
  --ilo-color-gray-charcoal: rgba(45, 45, 45, 1);
  --ilo-color-gray-accessible: rgba(109, 109, 109, 1);
  --ilo-color-gray-light: rgba(237, 240, 242, 1);
  --ilo-color-gray-base: rgba(184, 196, 204, 1);
  --ilo-color-red: rgba(250, 60, 75, 1);
  --ilo-color-red-light: rgba(254, 216, 219, 1);
  --ilo-color-red-dark: rgba(200, 48, 60, 1);
  --ilo-color-red-ramp: rgba(250, 60, 75, 0.2);
  --ilo-color-yellow: rgba(255, 205, 45, 1);
  --ilo-color-yellow-light: rgba(255, 245, 200, 1);
  --ilo-color-yellow-ramp: rgba(255, 205, 45, 0.2);
  --ilo-color-green: rgba(140, 225, 100, 1);
  --ilo-color-green-light: rgba(232, 249, 224, 1);
  --ilo-color-green-ramp: rgba(140, 225, 100, 0.2);
  --ilo-color-turquoise: rgba(5, 210, 210, 1);
  --ilo-color-purple: rgba(150, 10, 85, 1);

Here's what the colors actually look like:

There may be some other colors used in various places, but we're getting rid of them bit by bit and replacing them with these.

[inesdgomes]

@beatrizmartinmartins I think we don't need all the colours that Justin listed above. Some of them are too similar. Also, the names need to be improved. Feel free to make suggestions for improvements.