Move colors to own SCSS file

frontend/src/_colors.scss

@@ -0,0 +1,85 @@
+// Colors:
+// When adding new colors, types.ts must be updated to reflect all colors
+
+// Reds
+$red-samf: #a03033;
+$red_samf_hover: #732225;
+$red-samf-faded: #fac7c8;
+$red-lighter: #fff2f0;
+$red-light: #ffcfca;
+$red: #dc1010;
+$salmon: #fa8072;
+$salmon-light: #fab4ac;
+
+// Blues
+$blue: #337ab7;
+$blue-lighter: #e3f2ff;
+$blue-light: #c4dbf3;
+$blue-medium: #88b3e0;
+$blue-deep: #1a3b80;
+$blue-deeper: #062356;
+$blue_uka: #150b59;
+$blue-isfit: #0099cc;
+$turquoise-light: #e2f8f5;
+$turquoise-medium: #9fe9dc;
+$turquoise: #5accb9;
+$turquoise-deep: #288474;
+$yellow: #e0a014;
+
+// Grayscale
+$white: #ffffff;
+$black: #000000;
+$black-1: #161616; // small contrast to black
+$black-2: #222222;
+$grey-5: #f4f4f4;
+$grey-4: #eeeeee;
+$grey-35: #cccccc;
+$grey-3: #999999;
+$grey-2: #777777;
+$grey-1: #555555;
+$grey-0: #444444;
+
+// Greens
+$green: #4ab74c;
+$green-lighter: #f6ffed;
+$green-light: #b7eb8f;
+$orange-ligher: #fffbe6;
+$orange-light: #ffe99e;
+$bisque_uka: #ffe4c4;
+$sulten-orange: #fbb042;
+
+
+// Recruitment colors
+$rejected: #f9cccd;
+$accepted: #ccf9cd;
+$withdrawn:#bbbbbb;
+
+$pending: #FFF5BC;
+$topwanted: #32ff32;
+$topreserve: #afffaf;
+$lessreserve: #ffb343;
+$lessreservewanted: #e3fc00;
+$lessreservereserve: #fc3f00;
+$lesswanted: #f74343;
+$lesswantedreserve: #f74343;
+$lesswantedwanted: #f74343;
+
+// Transparent colors
+$black-t90: rgba(0, 0, 0, 0.9);
+$black-t75: rgba(0, 0, 0, 0.75);
+$black-t50: rgba(0, 0, 0, 0.5);
+$black-t25: rgba(0, 0, 0, 0.25);
+$black-t10: rgba(0, 0, 0, 0.1);
+
+// Theme colors:
+$theme-light-bg: #f5f5f5;
+
+$theme-dark-bg: #181818;
+$theme-dark-color: #dddddd;
+$theme-dark-input-bg: #242323;
+$theme-dark-input-bg-disabled: #7b7b7b;
+
+// Defaults
+$background-primary: #ffffff;
+$background-secondary: #efefef;
+

frontend/src/_constants.scss

@@ -1,79 +1,3 @@
-// Colors:
-// When adding new colors, types.ts must be updated to reflect all colors
-$red-samf: #a03033;
-$red_samf_hover: #732225;
-$red-samf-faded: #fac7c8;
-$red-lighter: #fff2f0;
-$red-light: #ffcfca;
-$red: #dc1010;
-$salmon: #fa8072;
-$salmon-light: #fab4ac;
-$blue: #337ab7;
-$blue-lighter: #e3f2ff;
-$blue-light: #c4dbf3;
-$blue-medium: #88b3e0;
-$blue-deep: #1a3b80;
-$blue-deeper: #062356;
-$blue_uka: #150b59;
-$blue-isfit: #0099cc;
-$turquoise-light: #e2f8f5;
-$turquoise-medium: #9fe9dc;
-$turquoise: #5accb9;
-$turquoise-deep: #288474;
-$yellow: #e0a014;
-$white: #ffffff;
-$black: #000000;
-$black-1: #161616; // small contrast to black
-$black-2: #222222;
-$grey-5: #f4f4f4;
-$grey-4: #eeeeee;
-$grey-35: #cccccc;
-$grey-3: #999999;
-$grey-2: #777777;
-$grey-1: #555555;
-$grey-0: #444444;
-$green: #4ab74c;
-$green-lighter: #f6ffed;
-$green-light: #b7eb8f;
-$orange-ligher: #fffbe6;
-$orange-light: #ffe99e;
-$bisque_uka: #ffe4c4;
-$sulten-orange: #fbb042;
-
-// Recruitment colors
-$rejected: #f9cccd;
-$accepted: #ccf9cd;
-$withdrawn:#bbbbbb;
-
-$pending: #FFF5BC;
-$topwanted: #32ff32;
-$topreserve: #afffaf;
-$lessreserve: #ffb343;
-$lessreservewanted: #e3fc00;
-$lessreservereserve: #fc3f00;
-$lesswanted: #f74343;
-$lesswantedreserve: #f74343;
-$lesswantedwanted: #f74343;
-
-// Transparent colors
-$black-t90: rgba(0, 0, 0, 0.9);
-$black-t75: rgba(0, 0, 0, 0.75);
-$black-t50: rgba(0, 0, 0, 0.5);
-$black-t25: rgba(0, 0, 0, 0.25);
-$black-t10: rgba(0, 0, 0, 0.1);
-
-// Theme colors:
-$theme-light-bg: #f5f5f5;
-
-$theme-dark-bg: #181818;
-$theme-dark-color: #dddddd;
-$theme-dark-input-bg: #242323;
-$theme-dark-input-bg-disabled: #7b7b7b;
-
-// Defaults
-$background-primary: #ffffff;
-$background-secondary: #efefef;
-
 /* Screen sizes, breakpoint (bp) */
 $large-desktop-bp-lower: 1201px;
 $desktop-bp-upper: 1200px;