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

@@ -15,6 +15,7 @@
 @import "foundation_and_overrides";
 @import "fonts";
 @import "icons";
+@import "functions/*";
 @import "mixins/*";
 
 @import "admin";

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

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;
+}

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]);
   }
 }
 

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 {
+  @if $property-names {
-    background-color: var(--#{$property-name}, $color);
+    $background-color: $color;
-    color: var(--#{$property-name}-contrast, color-pick-contrast($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 {