NAT-310: GEANT colors

Dockerfile

@@ -20,6 +20,11 @@ RUN yarn --network-concurrency 1 --frozen-lockfile
 RUN rm -rf src/custom
 COPY custom src/custom
 COPY logo.svg src/images/logo.svg
+COPY css/colors.ts src/stylesheets/emotion/colors.ts
+COPY css/dark.css public/dark.css
+COPY css/light.css public/light.css
+COPY css/eui_theme_light.css public/eui_theme_light.css
+COPY css/eui_theme_dark.css public/eui_theme_dark.css
 RUN yarn build
 
 ########################

css/colors.ts

+/* Default font colors and table colors */
+export const DARK_FONT_COLOR = "#ffffff";
+export const LIGHT_FONT_COLOR = "#111111";
+export const DARK_ROW_BORDER_COLOR = "#555555";
+export const LIGHT_ROW_BORDER_COLOR = "#cccccc";
+export const DARK_BACKGROUND_COLOR = "#1D1E24";
+export const LIGHT_BACKGROUND_COLOR = "#f6f6f6";
+export const DARK_SELECTED_FONT_COLOR = "#0799fc";
+export const LIGHT_SELECTED_FONT_COLOR = "#0077CCFF";
+
+/* Copy of EUI colors */
+export const PRIMARY_COLOR = "#106C96";
+export const ACCENT = "#274b72";
+export const SUCCESS = "#00bfb3";
+export const WARNING = "#fec514";
+export const DANGER = "#bd271e";
+
+/* Todo: sort remaining colors and investigate if we need them all (we could use `shadeColor()`) */
+export const LIGHTEST_SUCCESS = "#e5ffed";
+export const LIGHT_PRIMARY_COLOR = "#cbe7fb";
+export const LIGHTEST_PRIMARY_COLOR = "#fcfdff";
+export const DARKEST_PRIMARY_COLOR = "#08314bff";
+export const LIGHTER_PRIMARY = "#a8d9e6";
+export const LIGHT_DANGER = "#ffcdc6";
+export const LIGHTEST_DANGER = "#ffddd6";
+export const DARK_SUCCESS_COLOR = "#034b43";
+export const LIGHT_SUCCESS_COLOR = "#d0ffd9";
+export const DARKER_PRIMARY = "#106C96";
+export const GOLD = "#d4af37";
+export const DARK_GOLD_COLOR = "#524217";
+export const LIGHT_WARNING = "#ffe4ab";
+export const LIGHT_GOLD_COLOR = "#fdf6d4";
+export const BACKGROUND_COLOR = "#f9f9f9";
+export const LIGHTEST_GOLD = "#fdfde3";
+export const MEDIUM_GREY_COLOR = "#a6b6be";
+export const DARK_GREY_COLOR = "#565656";
+export const DARKEST_GREY = "#414141";
+export const LIGHT_GREY_COLOR = "#eff2f3";
+export const LIGHTER_GREY_COLOR = "#d9d9d8";
+export const LIGHTEST_GREY = "#fbfbfb";

css/dark.css

+body {
+    font-family: "Roboto", Sans-serif;
+    font-size: 15px;
+    line-height: 18px;
+    -webkit-font-smoothing: antialiased;
+    color: #e83765;
+    background-color: #1D1E24;
+}
+
+a {
+    cursor: pointer;
+    color: #33abff;
+    font-weight: bold;
+}
+
+.euiLink--primary {
+    color: #33abff;
+    font-weight: bold;
+}

css/light.css

+body {
+    font-family: "Roboto", Sans-serif;
+    font-size: 15px;
+    line-height: 18px;
+    -webkit-font-smoothing: antialiased;
+    color: #e83765;
+    background-color: #ffffff;
+}
+.euiLink--primary {
+    color: #33abff;
+    font-weight: bold;
+}