hubl/src/styles/abstracts/_variables.scss

// Color Variables
:root {
  --color-primary: #FF6765;
  --color-secondary: #46271B;
  --color-complementary: #5BB4CE;
  --color-complementary-darken: #35A0C0;

  --color-white: hsl(0, 0%, 100%);

  --color-black-h: 16;
  --color-black-s: 45%;
  --color-black-l: 6%;
  --color-black: hsl(var(--color-black-h), var(--color-black-s), var(--color-black-l)); /* 180D09 */

  /* Fifty shades of greys */
  --color-grey-1: hsl(calc(var(--color-black-h) + 200), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 16%)); /*hsl(216, 4%, 22%); #36383B */
  --color-grey-2: hsl(calc(var(--color-black-h) + 217), calc(var(--color-black-s) - 27%), calc(var(--color-black-l) + 23%)); /*hsl(233, 18%, 29%); #3C3F57 */
  --color-grey-3: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 23%)); /*hsl(0, 0%, 29%); #4A4A4A */
  --color-grey-4: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 43%), calc(var(--color-black-l) + 43%)); /*hsl(0, 2%, 49%); #807A7A */
  --color-grey-5: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 44%)); /*hsl(213, 4%, 50%); #7A7F85 */
  --color-grey-6: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 57%)); /*hsl(0, 4%, 63%); #A59D9D */
  --color-grey-7: hsl(calc(var(--color-black-h) + 228), calc(var(--color-black-s) + 35%), calc(var(--color-black-l) + 64%)); /*hsl(244, 10%, 70%); #ABAABA */
  --color-grey-8: hsl(calc(var(--color-black-h) + 212), calc(var(--color-black-s) - 20%), calc(var(--color-black-l) + 73%)); /*hsl(228, 25%, 79%); #BDC2D7 */
  --color-grey-9: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 36%), calc(var(--color-black-l) + 76%)); /*hsl(0, 9%, 82%); #D6CECE */
  --color-grey-10: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 42%), calc(var(--color-black-l) + 87%)); /*hsl(0, 3%, 93%); #EEEDED */
  --color-grey-11: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 32%), calc(var(--color-black-l) + 80%)); /*hsl(213, 13%, 86%); #D7DBE0 */
  --color-grey-12: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 25%), calc(var(--color-black-l) + 85%)); /*hsl(213, 20%, 91%); #E4E8ED */
  --color-grey-13: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 90%)); /*hsl(0, 0%, 96%); #F4F4F4 */


  /* CUSTOM COLORS FOR CLIENT */
  --color-main-background: var(--color-grey-13);
  --color-main-text: var(--color-grey-4);
  --color-highlight-primary: var(--color-primary);
  --color-user-panel: var(--color-black);
  --color-bell: var(--color-secondary);
  --color-avatar-background: var(--color-grey-10);
  --color-title: var(--color-secondary);
  --color-h1: var(--color-secondary);
  --color-h2: var(--color-secondary);

  /* Header's elements */
  --color-header-background: var(--color-white);
  --color-bell: var(--color-secondary);
  --color-user-panel-header-text: var(--color-secondary);
  --color-user-panel-header-background: var(--color-white);
  --color-user-panel-header-text-open: var(--color-white);
  --color-user-panel-header-background-open: var(--color-secondary);
  --color-user-panel-list-background: var(--color-white);
  --color-user-panel-list-text-hover: var(--color-primary);
  --color-user-panel-list-border: var(--color-grey-12);

  /* Left menu */
  --color-menu-highlight-primary: var(--color-highlight-primary);
  --color-menu-background: var(--color-secondary);
  --color-menu-text: var(--color-white);
  --color-menu-text-active: var(--color-white);
  --color-menu-background-active: var(--color-menu-highlight-primary);
  --color-menu-badge-background: var(--color-secondary);
  --color-menu-badge-text-active: var(--color-menu-text-active);
  --color-menu-badge-background-active: var(--color-complementary);
  --color-menu-icon-background-active: var(--color-secondary);

  /* Right menu */
  --color-right-menu-background: var(--color-grey-10);
  --color-right-menu-text: var(--color-secondary);
  --color-right-menu-link-border: var(--color-grey-9);
  --color-right-menu-active-text: var(--color-white);
  --color-right-menu-active-background: var(--color-secondary);
  --color-right-menu-active-icon: var(--color-white);

  /* Scrollbar */
  --color-scrollbar-right-background: var(--color-white);
  --color-scrollbar-right-track: var(--color-grey-9);
  --color-scrollbar-left-background: var(--color-secondary);
  --color-scrollbar-left-track: var(--color-grey-11);

  /* tags */
  --color-tag-admin-text: var(--color-complementary);
  --color-tag-admin-border: var(--color-complementary);
  --color-tag-group-text: var(--color-primary);
  --color-tag-group-border: var(--color-primary);

  /* Form elements */
  --color-button-white: var(--color-white);
  --color-button-primary: var(--color-primary);
  --color-button-secondary: var(--color-secondary);
  --color-button-complementary: var(--color-complementary);

  --color-input-background: var(--color-grey-10);
  --color-input-text: var(--color-secondary);
  --color-input-icon: var(--color-secondary);
  --color-input-active: var(--color-secondary);
  --color-fieldset: var(--color-title);
  --color-fieldset-border: var(--color-grey-10);
  --color-button-modal: var(--color-title);
  --color-select-list: var(--color-secondary);
  --color-select-add-button: var(--color-button-secondary);
  --color-select-add-button-background: var(--color-button-white);

  --color-label-dark: var(--color-secondary);
  --color-label-light: var(--color-grey-6);

  /* skill */
  --color-skill-background: var(--color-primary);
  --color-skill-text: var(--color-white);

  /* icon */
  --color-icon: var(--color-complementary);

  /* Table */
  --color-table-header-background: var(--color-grey-6);
  --color-table-header-text: var(--color-white);
  --color-table-border: var(--color-grey-8);

  /* User thumb */
  --color-user-thumb-name: var(--color-grey-4);

  --color-backlink: var(--color-secondary);
  --color-content-header: var(--color-grey-9);
}

/* Variables for event */
$color-212-4-50: hsl(212.7,4.3%,50%);
$color-0-0-22: hsl(0,0%,22.7%);
$color-203-87-19: hsl(203, 87.8%, 19.2%);
$color-357-67-45: hsl(357,67.5%,45.9%);