[Colors] Nouveau helper Color

[joachimesque]

Nouveau helper Color

Ce helper va aider à désolidariser chaque couleur de sa fonctionalité, notamment grâce à une argument invert.

Inspiration : https://bulma.io/documentation/overview/colors/

Exemple d'usage :

Bloc classique :

background-color: ${getColor('background')};
color: ${getColor('text')};

Bloc inversé :

background-color: ${getColor('background', {invert: true})};
color: ${getColor('text', {invert: true})};

Specs

Livrables

• [ ]
• [ ]
  ...

PRs

...

[joachimesque]

Il est prévu d'envisager de passer aux Variables CSS :

:root {
  /* --------------- */
  /* - Color Names - */
  /* --------------- */

  --black: #000;
  --grey-darker: #222;
  --grey-dark: #b8b8b8;
  --grey: #d8d8d8;
  --grey-light: #eee;

  --whiteTer: #f6f6f6;
  --whiteBis: #fbfbfb;
  --white: #fff;

  --blue-darker: #0496cc;
  --blue-dark: #05a8e6;
  --blue: #19b4fa;
  --blue-light: #bae8fd;
  --blue-lighter: #e8f7fe;
  --blue-lightest: #f3fbff;

  --red-darker: #e10028;
  --red-dark: #f00037;
  --red: #ff0046;
  --red-light: #ffe5ec;
  --red-lighter: #ffb2c7;
  --red-lightest: #fff2f6;

  --green-darker: #25943d;
  --green-dark: #43b25b;
  --green: #61d079;
  --green-light: #cff0d6;
  --green-lighter: #effaf1;
  --green-lightest: #f7fcf8;

  /* MDC colors */
  --blue-light-bis: #caf4fe;
  --red-bis: #ff0000;
  --red-light-bis: #ffebe0;


  /* ----------- */
  /* - Aliases - */
  /* ----------- */

  --warning: var(--red);
  --warningBackground: var(--red-light);
  --success: var(--green);
  --successBackground: var(--green-lighter);

  --text: var(--grey-darker);
  --background: var(--white);

  --light: var(--grey-light);
  --dark: var(--grey-darker);

  --primary-darker: var(--blue-darker);
  --primary-dark: var(--blue-dark);
  --primary: var(--blue);
  --primary-light: var(--blue-light);
  --primary-lighter: var(--blue-lighter);
  --primary-lightest: var(--blue-lightest);

  --mdcBlue: var(--blue-light-bis);
  --mdcRed: var(--red-bis);
  --mdcRed-light: var(--red-light-bis);
}

const colorListAsCssVariables = {
  black: 'var(--black, #000)',
  greyDarker: 'var(--grey-darker, #222)',
  greyDark: 'var(--grey-dark, #b8b8b8)',
  grey: 'var(--grey, #d8d8d8)',
  greyLight: 'var(--grey-light, #eee)',

  whiteTer: 'var(--white-ter, #f6f6f6)',
  whiteBis: 'var(--white-bis, #fbfbfb)',
  white: 'var(--white, #fff)',

  blueDarker: 'var(--blue-darker, #0496cc)',
  blueDark: 'var(--blue-dark, #05a8e6)',
  blue: 'var(--blue, #19b4fa)',
  blueLight: 'var(--blue-light, #bae8fd)',
  blueLighter: 'var(--blue-lighter, #e8f7fe)',
  blueLightest: 'var(--blue-lightest, #f3fbff)',

  redDarker: 'var(--red-darker, #e10028)',
  redDark: 'var(--red-dark, #f00037)',
  red: 'var(--red, #ff0046)',
  redLight: 'var(--red-light, #ffe5ec)',
  redLighter: 'var(--red-lighter, #ffb2c7)',
  redLightest: 'var(--red-lightest, #fff2f6)',

  greenDarker: 'var(--green-darker, #25943d)',
  greenDark: 'var(--green-dark, #43b25b)',
  green: 'var(--green, #61d079)',
  greenLight: 'var(--green-light, #cff0d6)',
  greenLighter: 'var(--green-lighter, #effaf1)',
  greenLightest: 'var(--green-lightest, #f7fcf8)',

  // MDC colors
  blueLightBis: 'var(--blue-light-bis, #caf4fe)',
  redBis: 'var(--red-bis, #ff0000)',
  redLightBis: 'var(--red-light-bis, #ffebe0)',
}

const colorAliasesAsCssVariables = {
  warning: 'var(--warning)',
  warningBackground: 'var(--warning-background)',
  success: 'var(--success)',
  successBackground: 'var(--success-background)',

  text: 'var(--text)',
  background: 'var(--background)',

  light: 'var(--light)',
  dark: 'var(--dark)',

  primaryDarker: 'var(--primary-darker)',
  primaryDark: 'var(--primary-dark)',
  primary: 'var(--primary)',
  primaryLight: 'var(--primary-light)',
  primaryLighter: 'var(--primary-lighter)',
  primaryLightest: 'var(--primary-lightest)',

  mdcBlue: 'var(--mdc-blue)',
  mdcRed: 'var(--mdc-red)',
  mdcRedLight: 'var(--mdc-red-light)',
}