Re-generate the palette.

Overwrote colour variables Added new variables for other GHGA colours
ghga-de · Dec 2, 2024 · 3c88de9 · 3c88de9
1 parent af31bc6
commit 3c88de9
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 72 deletions.
diff --git a/src/app/portal/features/site-footer/site-footer.component.scss b/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 {

diff --git a/src/app/portal/features/site-header/site-header.component.scss b/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 {

diff --git a/src/assets/scss/ghga_colors.scss → src/assets/scss/ghga_colours.scss b/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),

diff --git a/src/styles.scss b/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%;