From 91614fa2a9f5f0eea347f0d17a5da5a0b5bcf219 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 16 Oct 2022 20:21:38 +0200
Subject: [PATCH] Allow different main header colors per tenant

Just like we did with SCSS variables, we use the `--main-header` CSS
variable and, if it isn't defined, we use the `--brand` CSS variable
instead.

Note that we're still using the `inverted-selection` mixin based on the
default `$main-header` color, so it's possible that we get the inverted
selection in the main header when using a dark color with `$main-header`
but a light color with `--main-header`, which doesn't make much sense.
Not sure whether there's anything we can do about it.
---
 app/assets/stylesheets/application.scss       |  1 +
 app/assets/stylesheets/custom/tenants.scss    | 19 +++++++++++++++++--
 .../stylesheets/functions/reverse_list.scss   |  9 +++++++++
 app/assets/stylesheets/layout.scss            |  2 +-
 app/assets/stylesheets/mixins/colors.scss     | 16 ++++++++++++----
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/stylesheets/functions/reverse_list.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 16d710cb6..7d47c5015 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -15,6 +15,7 @@
 @import "foundation_and_overrides";
 @import "fonts";
 @import "icons";
+@import "functions/*";
 @import "mixins/*";
 
 @import "admin";
diff --git a/app/assets/stylesheets/custom/tenants.scss b/app/assets/stylesheets/custom/tenants.scss
index f43af1b94..bac631ad5 100644
--- a/app/assets/stylesheets/custom/tenants.scss
+++ b/app/assets/stylesheets/custom/tenants.scss
@@ -5,10 +5,25 @@
 // `.tenant-public` selector.
 //
 // You can use CSS variables to customize the colors. Here's an example
-// changing the brand color for just the main tenant.
+// changing the brand and main header colors for just the main tenant.
 //
 // .tenant-public {
-//   --brand: #351;
+//   --brand: #153;
+//   --main-header: #351;
+// }
+//
+// 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` color will use the `--brand` color if `--main-header`
+// 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
+// color. You can do that with a variable ending in `-contrast`, like:
+//
+// .tenant-public {
+//   --main-header: #{$white};
+//   --main-header-contrast: #{$black};
 // }
 //
 // NOTE: If you are **not** using mulitenancy, we recommend overwriting
diff --git a/app/assets/stylesheets/functions/reverse_list.scss b/app/assets/stylesheets/functions/reverse_list.scss
new file mode 100644
index 000000000..2b1794567
--- /dev/null
+++ b/app/assets/stylesheets/functions/reverse_list.scss
@@ -0,0 +1,9 @@
+@function reverse-list($list) {
+  $reversed: [];
+
+  @for $i from length($list) * -1 through -1 {
+    $reversed: append($reversed, nth($list, abs($i)));
+  }
+
+  @return $reversed;
+}
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index b2ef291c9..264344ca7 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -546,7 +546,7 @@ body > header,
   }
 
   .top-bar {
-    @include background-with-text-contrast($main-header);
+    @include background-with-text-contrast($main-header, [main-header, brand]);
   }
 }
 
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index f8116ca94..fe99efdeb 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -1,10 +1,18 @@
-@mixin background-with-text-contrast($color, $property-name: null, $check-invert-selection: true) {
+@mixin background-with-text-contrast($color, $property-names: null, $check-invert-selection: true) {
   background-color: $color;
   color: color-pick-contrast($color);
 
-  @if $property-name {
-    background-color: var(--#{$property-name}, $color);
-    color: var(--#{$property-name}-contrast, color-pick-contrast($color));
+  @if $property-names {
+    $background-color: $color;
+    $text-color: color-pick-contrast($color);
+
+    @each $property-name in reverse-list($property-names) {
+      $background-color: var(--#{$property-name}, #{$background-color});
+      $text-color: var(--#{$property-name}-contrast, #{$text-color});
+    }
+
+    background-color: $background-color;
+    color: $text-color;
   }
 
   @if $check-invert-selection {