From 35e95121e2b302716a4d15e000e306748e17e1bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 28 Oct 2022 16:59:13 +0200
Subject: [PATCH] Add variables to customize main layout colors

Until now, we didn't have specific variables for the headers and were
using the brand colors instead. Now we maintain the brand colors as
default values, but allow overwriting them.

For the navigation and footer, we didn't even have variables.
---
 app/assets/stylesheets/_consul_settings.scss | 5 +++++
 app/assets/stylesheets/layout.scss           | 7 ++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 3c0ba8981..e1c679e4d 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -14,6 +14,7 @@
 $black: #222 !default;
 $white: #fdfdfd !default;
 
+$body-background: $white;
 $body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;
 
 $closebutton-color: $black !default;
@@ -89,7 +90,11 @@ $highlight-soft:    #f3f8fd !default;
 $light:             #f5f7fa !default;
 $featured:          #ffdc5c !default;
 
+$footer:            #f1f1f1 !default;
 $footer-border:     #bfc1c3 !default;
+$main-header:       $brand !default;
+$subnavigation:     $body-background !default;
+$top-links:         $brand-secondary !default;
 
 $success-bg:        #dff0d8 !default;
 $success-border:    #d6e9c6 !default;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 8cdf08793..6499ad178 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -547,7 +547,7 @@ body > header,
   }
 
   .top-bar {
-    @extend %brand-background;
+    @include background-with-text-contrast($main-header);
   }
 }
 
@@ -690,7 +690,7 @@ body > header,
 }
 
 .top-links {
-  @include background-with-text-contrast($brand-secondary);
+  @include background-with-text-contrast($top-links);
   display: flex;
   flex-wrap: wrap;
   font-size: $small-font-size;
@@ -734,6 +734,7 @@ body > header,
   flex-direction: column;
 
   @include breakpoint(medium) {
+    @include background-with-text-contrast($subnavigation);
     flex-direction: row;
     padding-bottom: 0;
 
@@ -909,7 +910,7 @@ footer {
 }
 
 .footer {
-  background: #f1f1f1;
+  @include background-with-text-contrast($footer);
   clear: both;
   margin-top: $line-height * 2;
   padding-bottom: $line-height;