Add our brand colours (GSI-1202)

eslint.config.js

@@ -50,6 +50,7 @@ export default [
       'jsdoc/require-jsdoc': [
         'warn',
         {
+          exemptEmptyConstructors: true,
           require: {
             FunctionDeclaration: true,
             MethodDefinition: true,

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { RouterOutlet } from '@angular/router';
 import { ShowSessionComponent } from '@app/portal/features/show-session/show-session.component';
@@ -19,16 +19,12 @@ import { SiteHeaderComponent } from '@app/portal/features/site-header/site-heade
   templateUrl: './app.component.html',
 })
 export class AppComponent implements OnInit {
-  /**
-   * Creating new instance of MatIconRegistry
-   * @param matIconReg
-   */
-  constructor(private matIconReg: MatIconRegistry) {}
+  #matIconReg = inject(MatIconRegistry);
 
   /**
-   * Run on App component initialisation
+   * Run on App component initialization
    */
   ngOnInit(): void {
-    this.matIconReg.setDefaultFontSetClass('material-symbols-outlined');
+    this.#matIconReg.setDefaultFontSetClass('material-symbols-outlined');
   }
 }

src/app/portal/features/site-footer/site-footer.component.scss

@@ -15,8 +15,8 @@ nav div a span {
 }
 
 nav div a div {
-  color: var(--mat-sys-inverse-primary);
-  border-color: var(--mat-sys-inverse-primary);
+  color: var(--mat-sys-quinary);
+  border-color: var(--mat-sys-quinary);
 }
 
 nav div.swirl {

src/app/portal/features/site-header/site-header.component.scss

@@ -10,12 +10,12 @@ mat-toolbar {
 }
 
 mat-toolbar-row div div {
-  color: var(--mat-sys-inverse-primary);
-  border-color: var(--mat-sys-inverse-primary);
+  color: var(--mat-sys-quinary);
+  border-color: var(--mat-sys-quinary);
 }
 
 a#activePage {
-  background-color: var(--mat-sys-secondary);
+  background-color: var(--mat-sys-tertiary);
 }
 
 button {

src/app/portal/features/site-header/site-header.component.ts

@@ -17,17 +17,19 @@ import { AuthService } from '@app/auth/services/auth.service';
   styleUrl: './site-header.component.scss',
 })
 export class SiteHeaderComponent {
+  #router = inject(Router);
+  #authService = inject(AuthService);
+  isLoggedIn = this.#authService.isLoggedIn;
+
   route: string = '';
-  constructor(private router: Router) {
-    this.router.events.subscribe((event) => {
+
+  constructor() {
+    this.#router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
-        this.route = this.router.url;
+        this.route = this.#router.url;
       } else return;
     });
   }
-  #authService = inject(AuthService);
-
-  isLoggedIn = this.#authService.isLoggedIn;
 
   /**
    * User login

src/assets/scss/ghga_colors.scss → src/assets/scss/ghga_colours.scss

@@ -4,7 +4,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-// Note: Color palettes are generated from primary: #00393f, secondary: #e84614, tertiary: #cfe7cd, neutral: #005a5a
+// Note: Color palettes are generated from primary: #00393F, secondary: #005A5A, tertiary: #E84614, neutral: #808080
 $_palettes: (
   primary: (
     0: #000000,
@@ -25,6 +25,24 @@ $_palettes: (
     100: #ffffff,
   ),
   secondary: (
+    0: #000000,
+    10: #002020,
+    20: #003737,
+    25: #004343,
+    30: #004f4f,
+    35: #055c5c,
+    40: #1c6868,
+    50: #3b8281,
+    60: #579c9b,
+    70: #72b7b6,
+    80: #8dd3d2,
+    90: #a9efee,
+    95: #b7fdfc,
+    98: #e2fffe,
+    99: #f1fffe,
+    100: #ffffff,
+  ),
+  tertiary: (
     0: #000000,
     10: #3b0900,
     20: #601400,
@@ -42,51 +60,33 @@ $_palettes: (
     99: #fffbff,
     100: #ffffff,
   ),
-  tertiary: (
-    0: #000000,
-    10: #0c2010,
-    20: #213523,
-    25: #2c402e,
-    30: #374c39,
-    35: #435844,
-    40: #4e644f,
-    50: #677d67,
-    60: #809780,
-    70: #9ab199,
-    80: #b5cdb4,
-    90: #d1e9cf,
-    95: #dff7dd,
-    98: #ebffe8,
-    99: #f6fff2,
-    100: #ffffff,
-  ),
   neutral: (
     0: #000000,
-    10: #002020,
-    20: #003737,
-    25: #004343,
-    30: #004f4f,
-    35: #055c5c,
-    40: #1c6868,
-    50: #3b8281,
-    60: #579c9b,
-    70: #72b7b6,
-    80: #8dd3d2,
-    90: #a9efee,
-    95: #b7fdfc,
-    98: #e2fffe,
-    99: #f1fffe,
+    10: #1b1c1c,
+    20: #303031,
+    25: #3b3b3c,
+    30: #464747,
+    35: #525252,
+    40: #5e5e5e,
+    50: #777777,
+    60: #919190,
+    70: #ababab,
+    80: #c7c6c6,
+    90: #e3e2e2,
+    95: #f2f0f0,
+    98: #faf9f9,
+    99: #fdfcfb,
     100: #ffffff,
-    4: #001111,
-    6: #001717,
-    12: #002424,
-    17: #003030,
-    22: #003c3c,
-    24: #004141,
-    87: #a0e6e6,
-    92: #aef5f4,
-    94: #b4fbfa,
-    96: #c1fffe,
+    4: #0d0e0f,
+    6: #121414,
+    12: #1f2020,
+    17: #292a2a,
+    22: #343535,
+    24: #383939,
+    87: #dbdad9,
+    92: #e9e8e8,
+    94: #efeded,
+    96: #f5f3f3,
   ),
   neutral-variant: (
     0: #000000,
@@ -161,36 +161,36 @@ $tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
     primary-fixed-dim: _high-contrast-value(#00393f, #a0cfd6, $theme-type),
     on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
     on-primary-fixed-variant: _high-contrast-value(#ffffff, #001417, $theme-type),
-    secondary: _high-contrast-value(#591200, #ffece7, $theme-type),
+    secondary: _high-contrast-value(#003232, #b6fdfc, $theme-type),
     on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
-    secondary-container: _high-contrast-value(#8c2100, #ffaf99, $theme-type),
-    on-secondary-container: _high-contrast-value(#ffffff, #1e0300, $theme-type),
-    secondary-fixed: _high-contrast-value(#8c2100, #ffdbd1, $theme-type),
-    secondary-fixed-dim: _high-contrast-value(#641500, #ffb5a1, $theme-type),
+    secondary-container: _high-contrast-value(#005252, #89cfce, $theme-type),
+    on-secondary-container: _high-contrast-value(#ffffff, #000e0e, $theme-type),
+    secondary-fixed: _high-contrast-value(#005252, #a9efee, $theme-type),
+    secondary-fixed-dim: _high-contrast-value(#003939, #8dd3d2, $theme-type),
     on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
-    on-secondary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type),
-    tertiary: _high-contrast-value(#0e2212, #def7dc, $theme-type),
+    on-secondary-fixed-variant: _high-contrast-value(#ffffff, #001414, $theme-type),
+    tertiary: _high-contrast-value(#3f0a00, #ffece7, $theme-type),
     on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
-    tertiary-container: _high-contrast-value(#233725, #b1c9b0, $theme-type),
-    on-tertiary-container: _high-contrast-value(#def6dc, #000f03, $theme-type),
-    tertiary-fixed: _high-contrast-value(#3a4e3b, #d1e9cf, $theme-type),
-    tertiary-fixed-dim: _high-contrast-value(#233725, #b5cdb4, $theme-type),
+    tertiary-container: _high-contrast-value(#641500, #ffaf99, $theme-type),
+    on-tertiary-container: _high-contrast-value(#ffebe7, #1e0300, $theme-type),
+    tertiary-fixed: _high-contrast-value(#8c2100, #ffdbd1, $theme-type),
+    tertiary-fixed-dim: _high-contrast-value(#641500, #ffb5a1, $theme-type),
     on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
-    on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #031506, $theme-type),
-    background: _high-contrast-value(#e2fffe, #001717, $theme-type),
-    on-background: _high-contrast-value(#002020, #a9efee, $theme-type),
-    surface: _high-contrast-value(#e2fffe, #001717, $theme-type),
-    surface-dim: _high-contrast-value(#7fc5c4, #001717, $theme-type),
-    surface-bright: _high-contrast-value(#e2fffe, #005a5a, $theme-type),
+    on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type),
+    background: _high-contrast-value(#faf9f9, #121414, $theme-type),
+    on-background: _high-contrast-value(#1b1c1c, #e3e2e2, $theme-type),
+    surface: _high-contrast-value(#faf9f9, #121414, $theme-type),
+    surface-dim: _high-contrast-value(#b9b8b8, #121414, $theme-type),
+    surface-bright: _high-contrast-value(#faf9f9, #4f5050, $theme-type),
     surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type),
-    surface-container: _high-contrast-value(#a9efee, #003737, $theme-type),
-    surface-container-high: _high-contrast-value(#9be1e0, #004343, $theme-type),
-    surface-container-highest: _high-contrast-value(#8dd3d2, #004f4f, $theme-type),
+    surface-container: _high-contrast-value(#e3e2e2, #303031, $theme-type),
+    surface-container-high: _high-contrast-value(#d5d4d4, #3b3b3c, $theme-type),
+    surface-container-highest: _high-contrast-value(#c7c6c6, #464747, $theme-type),
     on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
     shadow: _high-contrast-value(#000000, #000000, $theme-type),
     scrim: _high-contrast-value(#000000, #000000, $theme-type),
     surface-tint: _high-contrast-value(#37656c, #a0cfd6, $theme-type),
-    inverse-surface: _high-contrast-value(#003737, #a9efee, $theme-type),
+    inverse-surface: _high-contrast-value(#303031, #e3e2e2, $theme-type),
     inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
     outline: _high-contrast-value(#262d2f, #eaf1f3, $theme-type),
     outline-variant: _high-contrast-value(#434b4c, #bcc4c5, $theme-type),

src/styles.scss

@@ -2,7 +2,7 @@
 // For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
 // Plus imports for other components in your app.
-@use './assets/scss/ghga_colors';
+@use './assets/scss/ghga_colours';
 @use './assets/scss/material_symbols';
 @use './assets/scss/fontawesome';
 @use './assets/scss/fontawesome_brands';
@@ -28,14 +28,22 @@
     (
       color: (
         theme-type: light,
-        primary: ghga_colors.$primary-palette,
-        tertiary: ghga_colors.$tertiary-palette,
+        primary: ghga_colours.$primary-palette,
+        tertiary: ghga_colours.$tertiary-palette,
       ),
       typography: Lexend,
     )
   );
 }
 
+:root {
+  --mat-sys-primary: #00393f;
+  --mat-sys-secondary: #005a5a;
+  --mat-sys-tertiary: #e84614;
+  --mat-sys-quaternary: #007e8c;
+  --mat-sys-quinary: #cfe7cd;
+}
+
 html,
 body {
   height: 100%;