From d0d8f9cc1e5d3c0866915b3939397fe2f452e65c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 28 Oct 2022 20:26:08 +0200
Subject: [PATCH] Allow different layout backgounds per tenant

We were already doing the same for the main header color; now we also
make it easier to use different top links, subnavigation and footer
colors per tenant.

Just like we do with SCSS variables, we use the brand-secondary color
for the top links when the `--top-links` variable isn't defined.
---
 app/assets/stylesheets/custom/tenants.scss | 11 ++++++++---
 app/assets/stylesheets/layout.scss         |  6 +++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/custom/tenants.scss b/app/assets/stylesheets/custom/tenants.scss
index 418fed93d..e54206cdc 100644
--- a/app/assets/stylesheets/custom/tenants.scss
+++ b/app/assets/stylesheets/custom/tenants.scss
@@ -5,21 +5,26 @@
 // `.tenant-public` selector.
 //
 // You can use CSS variables to customize the colors. Here's an example
-// changing the brand, links and main header colors for just the main
+// changing the brand, links and main layout colors for just the main
 // tenant.
 //
 // .tenant-public {
 //   --anchor-color: #372;
 //   --anchor-color-hover: #137;
 //   --brand: #153;
-//   --brand-secondary: #173a00;
+//   --brand-secondary: #134a00;
+//   --footer: #e6e6e6;
 //   --main-header: #351;
+//   --top-links: var(--main-header);
+//   --subnavigation: #ffd;
 // }
 //
 // Some colors default to another color, so you don't have to change
 // both colors if you'd like them to be the same. For instance, the
 // `--main-header` and `--anchor-color` colors will use the `--brand`
-// color if `--main-header` or `--anchor-color` are not defined.
+// color if `--main-header` or `--anchor-color` are not defined, while
+// the `--top-links` color will use the `--brand-secondary` color if
+// `--top-links` is not defined.
 //
 // If, for instance, you're using a light color for the main header when
 // the default color is a dark one, you should also change the text
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ab03ede65..28fbcf1e7 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -693,7 +693,7 @@ body > header,
 }
 
 .top-links {
-  @include background-with-text-contrast($top-links);
+  @include background-with-text-contrast($top-links, [top-links, brand-secondary]);
   display: flex;
   flex-wrap: wrap;
   font-size: $small-font-size;
@@ -737,7 +737,7 @@ body > header,
   flex-direction: column;
 
   @include breakpoint(medium) {
-    @include background-with-text-contrast($subnavigation);
+    @include background-with-text-contrast($subnavigation, subnavigation);
     flex-direction: row;
     padding-bottom: 0;
 
@@ -913,7 +913,7 @@ footer {
 }
 
 .footer {
-  @include background-with-text-contrast($footer);
+  @include background-with-text-contrast($footer, footer);
   clear: both;
   margin-top: $line-height * 2;
   padding-bottom: $line-height;