Allow different secondary colors per tenant

app/assets/stylesheets/budgets/investments/ballot.scss

@@ -2,8 +2,8 @@
 
   .button-remove-support {
     @include has-fa-icon(times, solid);
+    @include brand-secondary-color;
     background: #e7eaec;
-    color: $brand-secondary;
     font-weight: bold;
     margin-top: $line-height;
 

app/assets/stylesheets/budgets/phases.scss

@@ -87,7 +87,7 @@
 
       &[aria-selected="true"],
       &.is-active {
-        @include background-with-text-contrast($brand-secondary);
+        @include brand-secondary-background;
         font-weight: normal;
       }
 
@@ -98,7 +98,7 @@
     }
 
     &.current-phase-tab a {
-      @include background-with-text-contrast($brand-secondary);
+      @include brand-secondary-background;
       padding-top: $line-height / 2;
     }
   }

app/assets/stylesheets/custom/tenants.scss

@@ -9,6 +9,7 @@
 //
 // .tenant-public {
 //   --brand: #153;
+//   --brand-secondary: #173a00;
 //   --main-header: #351;
 // }
 //

app/assets/stylesheets/mixins/colors.scss

@@ -20,14 +20,27 @@
   }
 }
 
+@mixin text-color($color, $property-names: null) {
+  color: $color;
+
+  @if $property-names {
+    $text-color: $color;
+
+    @each $property-name in reverse-list($property-names) {
+      $text-color: var(--#{$property-name}, #{$text-color});
+    }
+
+    color: $text-color;
+  }
+}
+
 @mixin brand-background {
   @include background-with-text-contrast($brand, brand);
 }
 
 @mixin brand-color {
   @include normal-selection;
-  color: $brand;
+  @include text-color($brand, brand);
-  color: var(--brand, $brand);
 }
 
 @mixin brand-border($position: null, $width: 1px) {
@@ -65,6 +78,14 @@
   }
 }
 
+@mixin brand-secondary-background {
+  @include background-with-text-contrast($brand-secondary, brand-secondary);
+}
+
+@mixin brand-secondary-color {
+  @include text-color($brand-secondary, brand-secondary);
+}
+
 %brand-background {
   @include brand-background;
 }

app/assets/stylesheets/mixins/forms.scss

@@ -1,6 +1,16 @@
 @import "mixins/icons";
 @import "mixins/layouts";
 
+@mixin public-form-header-background($color, $final-color-width) {
+  background-image: linear-gradient(
+    to right,
+    #{$color} 0,
+    #{$color} calc(100% - #{$final-color-width} - 1px),
+    #{$body-background} calc(100% - #{$final-color-width}),
+    #{$body-background} 100%
+  );
+}
+
 @mixin public-form-header {
   $border-width: 4px;
 
@@ -14,8 +24,9 @@
     $icon-size-with-padding: $icon-size + $padding-right;
     $polygon-size: $icon-size / 2;
     @include background-till-left-of-screen;
-    @include background-with-text-contrast($brand-secondary);
+    @include brand-secondary-background;
     border: $border-width solid $brand-secondary;
+    border: $border-width solid var(--brand-secondary, $brand-secondary);
     border-bottom-right-radius: rem-calc(12);
     border-top-right-radius: rem-calc(12);
     margin-top: $line-height * 2;
@@ -30,14 +41,9 @@
 
     @include breakpoint(large) {
       $rounding-error: 6px;
+      @include public-form-header-background($brand-secondary, $icon-size-with-padding);
+      @include public-form-header-background(var(--brand-secondary, $brand-secondary), $icon-size-with-padding);
       padding-right: $icon-size-with-padding;
-      background-image: linear-gradient(
-        to right,
-        #{$brand-secondary} 0,
-        #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
-        #{$body-background} calc(100% - #{$icon-size-with-padding}),
-        #{$body-background} 100%
-      );
 
       &::after {
         background: $body-background;
@@ -90,7 +96,7 @@
         }
 
         &::before {
-          color: $brand-secondary;
+          @include brand-secondary-color;
           display: block;
           font-size: $icon-size;
           right: $padding-right;

app/assets/stylesheets/participation.scss

@@ -1482,7 +1482,7 @@
   cursor: pointer;
 
   &:hover {
-    @include background-with-text-contrast($brand-secondary);
+    @include brand-secondary-background;
     text-decoration: none;
   }
 }