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 01/10] 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;

From e248a40ff31b113847f04773cd4f25c9a47877ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 28 Oct 2022 17:25:22 +0200
Subject: [PATCH 02/10] Automatically invert selection based on contrast

So now inverting the selection for brand-secondary backgrounds will
depend on the value of brand-secondary.
---
 app/assets/stylesheets/layout.scss         |  2 +-
 app/assets/stylesheets/mixins/buttons.scss |  2 +-
 app/assets/stylesheets/mixins/colors.scss  | 27 +++++++++++-----------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 6499ad178..fd81a2c16 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -125,7 +125,7 @@ button,
 
 .button {
   @extend %button;
-  @include inverted-selection;
+  @include inverted-selection($brand);
   background: $brand;
 
   &.medium {
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index 4ca8e0de6..fcc3e0786 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -19,7 +19,7 @@
 
 @mixin regular-button($color: $brand) {
   @include button($background: $color);
-  @include inverted-selection;
+  @include inverted-selection($color);
   @include base-button;
 }
 
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index 35bdb211c..eff3b260d 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -1,14 +1,14 @@
-@mixin background-with-text-contrast($color) {
+@mixin background-with-text-contrast($color, $check-invert-selection: true) {
   background-color: $color;
   color: color-pick-contrast($color);
+
+  @if $check-invert-selection {
+    @include inverted-selection($color);
+  }
 }
 
-@mixin brand-background($color: $brand, $invert-selection: true) {
+@mixin brand-background($color: $brand) {
   @include background-with-text-contrast($color);
-
-  @if $invert-selection {
-    @include inverted-selection;
-  }
 }
 
 @mixin brand-text {
@@ -25,16 +25,17 @@
 
   &::selection,
   *::selection {
-    @include brand-background($invert-selection: false);
+    @include background-with-text-contrast($brand, $check-invert-selection: false);
   }
 }
 
-@mixin inverted-selection {
-
-  &::selection,
-  *::selection {
-    background-color: rgba(color-pick-contrast($brand), 0.99);
-    color: $brand;
+@mixin inverted-selection($background-color) {
+  @if color-contrast($background-color, $brand) < 4.5 {
+    &::selection,
+    *::selection {
+      background-color: rgba(color-pick-contrast($brand), 0.99);
+      color: $brand;
+    }
   }
 }
 

From d4c8606f432ba7cb762e4eca102ee09ca3f728bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 29 Oct 2022 13:51:14 +0200
Subject: [PATCH 03/10] Simplify brand-background mixin

We don't need the color parameter anymore since we can now use a more
generic mixin for any background, like brand-secondary.
---
 app/assets/stylesheets/mixins/colors.scss | 4 ++--
 app/assets/stylesheets/mixins/forms.scss  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index eff3b260d..c7811bbbf 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -7,8 +7,8 @@
   }
 }
 
-@mixin brand-background($color: $brand) {
-  @include background-with-text-contrast($color);
+@mixin brand-background {
+  @include background-with-text-contrast($brand);
 }
 
 @mixin brand-text {
diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss
index 3a6b85df1..212c6c79a 100644
--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/app/assets/stylesheets/mixins/forms.scss
@@ -14,7 +14,7 @@
     $icon-size-with-padding: $icon-size + $padding-right;
     $polygon-size: $icon-size / 2;
     @include background-till-left-of-screen;
-    @include brand-background($brand-secondary);
+    @include background-with-text-contrast($brand-secondary);
     border: $border-width solid $brand-secondary;
     border-bottom-right-radius: rem-calc(12);
     border-top-right-radius: rem-calc(12);

From a2c032573f8c45f0a342dcdf9629352d4e6ea225 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 29 Oct 2022 14:30:29 +0200
Subject: [PATCH 04/10] Rename brand-text mixin to brand-color

This is consistent with the `body-colors` mixin and with other mixins
we're about to add, like `anchor-color`.
---
 app/assets/stylesheets/admin.scss              |  2 +-
 .../stylesheets/budgets/ballot/investment.scss |  2 +-
 .../budgets/groups_and_headings.scss           |  2 +-
 app/assets/stylesheets/dashboard.scss          |  8 ++++----
 app/assets/stylesheets/layout.scss             | 18 +++++++++---------
 app/assets/stylesheets/layout/social.scss      |  2 +-
 .../stylesheets/legislation_process.scss       |  8 ++++----
 app/assets/stylesheets/mixins/colors.scss      |  6 +++---
 app/assets/stylesheets/pages.scss              |  2 +-
 app/assets/stylesheets/participation.scss      |  8 ++++----
 10 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 37bd2f7cd..0eae30b8b 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -633,7 +633,7 @@ code {
     display: block;
 
     &.is-active {
-      @include brand-text;
+      @include brand-color;
       font-weight: bold;
       text-decoration: underline;
     }
diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss
index 19c490bdf..1685f7eb5 100644
--- a/app/assets/stylesheets/budgets/ballot/investment.scss
+++ b/app/assets/stylesheets/budgets/ballot/investment.scss
@@ -20,7 +20,7 @@
   }
 
   .ballot-list-price {
-    @include brand-text;
+    @include brand-color;
     display: block;
     font-weight: bold;
     margin-top: $line-height / 2;
diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index ba0cd030e..6372debb0 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -8,7 +8,7 @@
   }
 
   .heading {
-    @include brand-text;
+    @include brand-color;
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index a42f5047a..33b05414d 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -332,7 +332,7 @@
   }
 
   .is-active {
-    @include brand-text;
+    @include brand-color;
     position: relative;
 
     &::before {
@@ -347,11 +347,11 @@
     }
 
     a {
-      @include brand-text;
+      @include brand-color;
     }
 
     [class^="icon-"] {
-      @include brand-text;
+      @include brand-color;
     }
   }
 
@@ -365,7 +365,7 @@
     border-bottom: 2px solid;
 
     .has-tip {
-      @include brand-text;
+      @include brand-color;
       font-weight: bold;
     }
   }
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index fd81a2c16..2933e1550 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -260,7 +260,7 @@ button,
     }
 
     &.is-active {
-      @include brand-text;
+      @include brand-color;
       border-bottom: 2px solid;
       padding-bottom: rem-calc(1);
     }
@@ -287,7 +287,7 @@ button,
       padding: 0;
 
       &.is-active {
-        @include brand-text;
+        @include brand-color;
         font-weight: bold;
       }
     }
@@ -297,7 +297,7 @@ button,
     }
 
     &.is-active {
-      @include brand-text;
+      @include brand-color;
       border-bottom: 2px solid;
     }
   }
@@ -359,14 +359,14 @@ button,
     position: relative;
 
     &:hover {
-      @include brand-text;
+      @include brand-color;
       background: none;
       text-decoration: none;
     }
 
     &[aria-selected="true"],
     &.is-active {
-      @include brand-text;
+      @include brand-color;
       border-bottom: 0;
       font-weight: bold;
 
@@ -519,7 +519,7 @@ body > header,
       padding: rem-calc(6);
 
       [type="submit"] {
-        @include brand-text;
+        @include brand-color;
         background: none;
         border: 0;
         cursor: pointer;
@@ -599,7 +599,7 @@ body > header,
       text-align: left;
 
       @include breakpoint(medium) {
-        @include brand-text;
+        @include brand-color;
         background: $body-background;
         text-align: center;
       }
@@ -774,7 +774,7 @@ body > header,
       }
 
       &.is-active {
-        @include brand-text;
+        @include brand-color;
         border-bottom: 2px solid;
         margin-bottom: 1px;
       }
@@ -846,7 +846,7 @@ body > header,
   }
 
   .is-active {
-    @include brand-text;
+    @include brand-color;
     border-bottom: 2px solid;
 
     &:hover {
diff --git a/app/assets/stylesheets/layout/social.scss b/app/assets/stylesheets/layout/social.scss
index 5590d633e..69f44a5d2 100644
--- a/app/assets/stylesheets/layout/social.scss
+++ b/app/assets/stylesheets/layout/social.scss
@@ -20,7 +20,7 @@
     text-decoration: none;
 
     &:hover {
-      @include brand-text;
+      @include brand-color;
     }
   }
 }
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 2592c59e3..44a199688 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -134,7 +134,7 @@
     margin-bottom: rem-calc(40);
 
     .debate-type {
-      @include brand-text;
+      @include brand-color;
       text-transform: uppercase;
       font-weight: 700;
       font-size: $small-font-size;
@@ -145,7 +145,7 @@
     }
 
     .debate-title a {
-      @include brand-text;
+      @include brand-color;
     }
   }
 
@@ -194,7 +194,7 @@
     }
 
     h4 a {
-      @include brand-text;
+      @include brand-color;
 
       &:hover {
         text-decoration: none;
@@ -211,7 +211,7 @@
     }
 
     .quiz-next {
-      @include brand-text;
+      @include brand-color;
       background: #ccdbe5;
       font-size: $small-font-size;
       font-weight: bold;
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index c7811bbbf..2771e05ed 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -11,7 +11,7 @@
   @include background-with-text-contrast($brand);
 }
 
-@mixin brand-text {
+@mixin brand-color {
   @include normal-selection;
   color: $brand;
 }
@@ -43,8 +43,8 @@
   @include brand-background;
 }
 
-%brand-text {
-  @include brand-text;
+%brand-color {
+  @include brand-color;
 }
 
 %body-colors {
diff --git a/app/assets/stylesheets/pages.scss b/app/assets/stylesheets/pages.scss
index c279698cf..27a09576b 100644
--- a/app/assets/stylesheets/pages.scss
+++ b/app/assets/stylesheets/pages.scss
@@ -57,7 +57,7 @@
 .more-info-content {
 
   h3 {
-    @include brand-text;
+    @include brand-color;
   }
 
   .additional-info {
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index a388687be..94dbead22 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -830,7 +830,7 @@
   }
 
   .is-active {
-    @include brand-text;
+    @include brand-color;
 
     &::after {
       content: "\6c";
@@ -1082,7 +1082,7 @@
 }
 
 .current-phase {
-  @include brand-text;
+  @include brand-color;
 }
 
 .progress-votes {
@@ -1119,7 +1119,7 @@
     }
 
     span {
-      @include brand-text;
+      @include brand-color;
       font-size: $base-font-size;
     }
   }
@@ -1144,7 +1144,7 @@
     }
 
     span {
-      @include brand-text;
+      @include brand-color;
       font-size: rem-calc(24);
     }
   }

From fcc63cb436ea78dc7813d2fa4c1f41be2c6068e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 12 Oct 2022 17:57:29 +0200
Subject: [PATCH 05/10] Allow different brand colors per tenant

Until now, overwriting the styles for a certain tenant was a very
tedious task. For example, if we wanted to use a different brand color
for a tenant, we had to manually overwrite the styles for every element
using that color.

It isn't possible to use different SCSS variables per tenant unless we
generate a different stylesheet per tenant. However, doing so would make
the CSS compilation take way too long on installations with more than a
couple of tenants, and it wouldn't allow to get the colors dynamically
from the database, which we intend to support in the future.

So we're using CSS variables instead. These variables are supported by
97% of the browsers (as of October 2022), and for the other 3% of the
browsers we're using the default colors (SCSS variables) instead.

CSS variables have some limitations: for instance, it isn't possible to
use functions like `lighten`, `darken` or `scale-color` with CSS
variables, so the application might behave in a strange way when we use
these functions.

It also isn't possible to automatically get whether black or white text
makes a better contrast with a certain background color. To overcome
this limitation, we're providing variables ending with `-contrast`. For
instance, since the default `$brand` color is a dark one, when assigning
a light color to `--brand`, we probably want to assign
`--brand-contrast: #{$black}` as well, so the text is still readable.
---
 .../budgets_wizard/creation_timeline.scss     |  4 +--
 .../stylesheets/budgets/single_heading.scss   |  2 +-
 .../stylesheets/budgets/supports_info.scss    |  2 +-
 app/assets/stylesheets/custom/tenants.scss    | 15 +++++++++++
 .../stylesheets/datepicker_overrides.scss     |  2 +-
 app/assets/stylesheets/layout.scss            | 11 ++++----
 .../stylesheets/legislation_process.scss      |  2 +-
 app/assets/stylesheets/mixins/buttons.scss    | 26 ++++++++++++++++---
 app/assets/stylesheets/mixins/colors.scss     | 24 ++++++++++++++---
 app/assets/stylesheets/participation.scss     | 10 +++----
 10 files changed, 75 insertions(+), 23 deletions(-)
 create mode 100644 app/assets/stylesheets/custom/tenants.scss

diff --git a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
index 67a79ef0c..f45760e10 100644
--- a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
+++ b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
@@ -5,7 +5,7 @@
   position: relative;
 
   li {
-    border-top: 4px solid $brand;
+    @include brand-border(top, 4px);
     display: inline-block;
     font-size: $small-font-size;
     font-weight: bold;
@@ -13,7 +13,7 @@
     text-transform: uppercase;
 
     &::before {
-      background: $brand;
+      @extend %brand-background;
       border-radius: 50%;
       content: "";
       height: 20px;
diff --git a/app/assets/stylesheets/budgets/single_heading.scss b/app/assets/stylesheets/budgets/single_heading.scss
index 3bafa20f4..37edec0d7 100644
--- a/app/assets/stylesheets/budgets/single_heading.scss
+++ b/app/assets/stylesheets/budgets/single_heading.scss
@@ -4,7 +4,7 @@
   position: relative;
 
   &::after {
-    background: $brand;
+    @extend %brand-background;
     bottom: 0;
     content: "";
     height: rem-calc(6);
diff --git a/app/assets/stylesheets/budgets/supports_info.scss b/app/assets/stylesheets/budgets/supports_info.scss
index 2779adfca..5a9508b46 100644
--- a/app/assets/stylesheets/budgets/supports_info.scss
+++ b/app/assets/stylesheets/budgets/supports_info.scss
@@ -48,7 +48,7 @@
 
   .keep-scrolling {
     @include has-fa-icon(angle-double-down, solid, after);
-    color: $brand;
+    @include brand-color;
     font-weight: bold;
     text-decoration: none;
     text-transform: uppercase;
diff --git a/app/assets/stylesheets/custom/tenants.scss b/app/assets/stylesheets/custom/tenants.scss
new file mode 100644
index 000000000..f43af1b94
--- /dev/null
+++ b/app/assets/stylesheets/custom/tenants.scss
@@ -0,0 +1,15 @@
+// If you're using multitenancy, you can override styles for a certain
+// tenant by styling the `<html>` element with the class
+// `tenant-<tenant_name>`. For example, to style the public (main)
+// tenant without these styles affecting any other tenants, use the
+// `.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.
+//
+// .tenant-public {
+//   --brand: #351;
+// }
+//
+// NOTE: If you are **not** using mulitenancy, we recommend overwriting
+// SCSS variables in the `_consul_custom_overrides.scss` file instead
diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss
index 66bdef12e..95a02db91 100644
--- a/app/assets/stylesheets/datepicker_overrides.scss
+++ b/app/assets/stylesheets/datepicker_overrides.scss
@@ -20,7 +20,7 @@
   thead {
 
     tr th {
-      border: 1px solid $brand;
+      @include brand-border;
     }
   }
 }
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 2933e1550..b2ef291c9 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -125,8 +125,7 @@ button,
 
 .button {
   @extend %button;
-  @include inverted-selection($brand);
-  background: $brand;
+  @include brand-background;
 
   &.medium {
     font-size: $small-font-size;
@@ -949,7 +948,7 @@ footer {
 }
 
 .sidebar-title {
-  border-top: 2px solid $brand;
+  @include brand-border(top, 2px);
   display: inline-block;
   font-size: rem-calc(16);
   font-weight: bold;
@@ -969,7 +968,7 @@ footer {
 }
 
 .auth-image {
-  @include background-with-text-contrast($brand);
+  @include brand-background;
   background-repeat: no-repeat;
   background-size: cover;
 
@@ -1358,8 +1357,8 @@ form {
   }
 
   &::before {
+    @include brand-color;
     background: $body-background;
-    color: $brand;
     content: "\4d";
     font-family: "icons" !important;
     font-size: $small-font-size;
@@ -2505,8 +2504,8 @@ table {
   h3 {
 
     &.title {
+      @include brand-border(top, 4px);
       display: inline-block;
-      border-top: 4px solid $brand;
       margin-bottom: 0;
       padding: $line-height / 2 0;
     }
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 44a199688..3cd63e889 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -264,7 +264,7 @@
     }
 
     .control input:checked ~ .control-indicator {
-      background-color: $brand;
+      @include brand-background;
       border: 0;
     }
 
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index fcc3e0786..9d0338399 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -1,6 +1,7 @@
 @import "mixins/colors";
 
 @mixin base-button {
+  @include button-base;
   font-size: $base-font-size;
 
   &:focus,
@@ -18,16 +19,35 @@
 }
 
 @mixin regular-button($color: $brand) {
-  @include button($background: $color);
-  @include inverted-selection($color);
   @include base-button;
+
+  @if $color == $brand {
+    @include brand-background;
+  } @else {
+    @include background-with-text-contrast($color);
+  }
+
+  &:hover,
+  &:focus {
+    @include background-with-text-contrast($button-background-hover);
+  }
 }
 
 @mixin hollow-button($color: $anchor-color) {
-  @include button($style: hollow, $background: $color);
   @include normal-selection;
   @include base-button;
+  border-color: currentcolor;
+  color: $color;
   margin-bottom: 0;
+
+  @if $color == $brand {
+    @include brand-color;
+  }
+
+  &:hover,
+  &:focus {
+    color: scale-color($color, $lightness: $button-hollow-hover-lightness);
+  }
 }
 
 @mixin link {
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index 2771e05ed..f8116ca94 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -1,19 +1,35 @@
-@mixin background-with-text-contrast($color, $check-invert-selection: true) {
+@mixin background-with-text-contrast($color, $property-name: 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 $check-invert-selection {
     @include inverted-selection($color);
   }
 }
 
 @mixin brand-background {
-  @include background-with-text-contrast($brand);
+  @include background-with-text-contrast($brand, brand);
 }
 
 @mixin brand-color {
   @include normal-selection;
   color: $brand;
+  color: var(--brand, $brand);
+}
+
+@mixin brand-border($position: null, $width: 1px) {
+  @if $position == null {
+    border: $width solid $brand;
+    border: $width solid var(--brand, $brand);
+  } @else {
+    border-#{$position}: $width solid $brand;
+    border-#{$position}: $width solid var(--brand, $brand);
+  }
 }
 
 @mixin body-colors {
@@ -25,7 +41,7 @@
 
   &::selection,
   *::selection {
-    @include background-with-text-contrast($brand, $check-invert-selection: false);
+    @include background-with-text-contrast($brand, brand, $check-invert-selection: false);
   }
 }
 
@@ -34,7 +50,9 @@
     &::selection,
     *::selection {
       background-color: rgba(color-pick-contrast($brand), 0.99);
+      background-color: var(--brand-contrast, rgba(color-pick-contrast($brand), 0.99));
       color: $brand;
+      color: var(--brand, $brand);
     }
   }
 }
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 94dbead22..e96752e9f 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -256,7 +256,7 @@
   aside {
 
     h2 {
-      border-top: 2px solid $brand;
+      @include brand-border(top, 2px);
       display: inline-block;
       font-size: rem-calc(16);
       margin: -1px 0 rem-calc(12);
@@ -1097,7 +1097,7 @@
   }
 
   .progress-meter {
-    background: $brand;
+    @include brand-background;
     border-radius: rem-calc(12);
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
@@ -1133,7 +1133,7 @@
     white-space: nowrap;
 
     &::before {
-      color: $brand;
+      @include brand-color;
       content: "\57";
       font-family: "icons";
       font-size: $small-font-size;
@@ -1180,7 +1180,7 @@
   }
 
   .subtitle {
-    border-left: 2px solid $brand;
+    @include brand-border(left, 2px);
     margin: $line-height / 2 0;
     padding-left: $line-height / 2;
   }
@@ -1442,7 +1442,7 @@
   width: $line-height / 2;
 
   &.is-active {
-    background-color: $brand;
+    @include brand-background;
   }
 }
 

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 06/10] 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 {

From 36a1b2cdc2a3ccb852a32b26e8e9331eafb2cff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 16 Oct 2022 20:22:09 +0200
Subject: [PATCH 07/10] Allow different secondary colors per tenant

---
 .../budgets/investments/ballot.scss           |  2 +-
 app/assets/stylesheets/budgets/phases.scss    |  4 +--
 app/assets/stylesheets/custom/tenants.scss    |  1 +
 app/assets/stylesheets/mixins/colors.scss     | 25 +++++++++++++++++--
 app/assets/stylesheets/mixins/forms.scss      | 24 +++++++++++-------
 app/assets/stylesheets/participation.scss     |  2 +-
 6 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/budgets/investments/ballot.scss b/app/assets/stylesheets/budgets/investments/ballot.scss
index c98c861ec..1b5c88104 100644
--- a/app/assets/stylesheets/budgets/investments/ballot.scss
+++ b/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;
 
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index 750b965c7..a3f95ef04 100644
--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/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;
     }
   }
diff --git a/app/assets/stylesheets/custom/tenants.scss b/app/assets/stylesheets/custom/tenants.scss
index bac631ad5..d766eb8d5 100644
--- a/app/assets/stylesheets/custom/tenants.scss
+++ b/app/assets/stylesheets/custom/tenants.scss
@@ -9,6 +9,7 @@
 //
 // .tenant-public {
 //   --brand: #153;
+//   --brand-secondary: #173a00;
 //   --main-header: #351;
 // }
 //
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index fe99efdeb..92346e8ef 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/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;
-  color: var(--brand, $brand);
+  @include text-color($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;
 }
diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss
index 212c6c79a..9a42dda08 100644
--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/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;
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index e96752e9f..1708f6cd2 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/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;
   }
 }

From af040fcc2be3972cd7e235671cbdece4d59a57c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 16 Oct 2022 20:40:47 +0200
Subject: [PATCH 08/10] Allow different link colors per tenant

Just like we did with SCSS variables, we use the --anchor-color CSS
variable and, if it isn't defined, we use the --brand CSS variable
instead.
---
 app/assets/stylesheets/custom/tenants.scss |  9 ++++++---
 app/assets/stylesheets/layout.scss         | 18 +++++++++++-------
 app/assets/stylesheets/mixins/buttons.scss | 22 +++++++++++++++++-----
 app/assets/stylesheets/mixins/colors.scss  |  8 ++++++++
 app/assets/stylesheets/mixins/icons.scss   |  2 +-
 5 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/custom/tenants.scss b/app/assets/stylesheets/custom/tenants.scss
index d766eb8d5..418fed93d 100644
--- a/app/assets/stylesheets/custom/tenants.scss
+++ b/app/assets/stylesheets/custom/tenants.scss
@@ -5,9 +5,12 @@
 // `.tenant-public` selector.
 //
 // You can use CSS variables to customize the colors. Here's an example
-// changing the brand and main header colors for just the main tenant.
+// changing the brand, links and main header colors for just the main
+// tenant.
 //
 // .tenant-public {
+//   --anchor-color: #372;
+//   --anchor-color-hover: #137;
 //   --brand: #153;
 //   --brand-secondary: #173a00;
 //   --main-header: #351;
@@ -15,8 +18,8 @@
 //
 // 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.
+// `--main-header` and `--anchor-color` colors will use the `--brand`
+// color if `--main-header` or `--anchor-color` are 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 264344ca7..ab03ede65 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -95,10 +95,7 @@ p {
 }
 
 a {
-  &:hover,
-  &:active {
-    text-decoration: underline;
-  }
+  @include link;
 }
 
 a,
@@ -134,8 +131,15 @@ button,
 
 .button.hollow {
   @include normal-selection;
+  @include anchor-color;
   border: 1px solid;
-  color: $anchor-color;
+
+  &:hover,
+  &:focus {
+    $hover-color: scale-color($anchor-color, $lightness: $button-hollow-hover-lightness);
+    color: $hover-color;
+    color: var(--anchor-color-hover, $hover-color);
+  }
 }
 
 .button.hollow.error {
@@ -769,7 +773,7 @@ body > header,
       width: auto;
 
       &:hover {
-        color: $anchor-color;
+        @include anchor-color;
       }
 
       &.is-active {
@@ -938,8 +942,8 @@ footer {
 
 .categories a,
 .geozone a {
+  @include anchor-color;
   background: $highlight;
-  color: $anchor-color;
 
   &:hover,
   &.is-active {
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index 9d0338399..b300a3207 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -40,23 +40,35 @@
   color: $color;
   margin-bottom: 0;
 
-  @if $color == $brand {
+  @if $color == $anchor-color {
+    @include anchor-color;
+  } @else if $color == $brand {
     @include brand-color;
   }
 
   &:hover,
   &:focus {
-    color: scale-color($color, $lightness: $button-hollow-hover-lightness);
+    $hover-color: scale-color($color, $lightness: $button-hollow-hover-lightness);
+    color: $hover-color;
+
+    @if $color == $anchor-color {
+      color: var(--anchor-color-hover, $hover-color);
+    }
   }
 }
 
 @mixin link {
-  color: $anchor-color;
+  @include anchor-color;
   cursor: pointer;
 
+  &:hover,
+  &:active,
+  &:focus {
+    @include anchor-color-hover;
+  }
+
   &:hover,
   &:active {
-    color: $anchor-color-hover;
     text-decoration: underline;
   }
 }
@@ -65,7 +77,7 @@
   color: inherit;
 
   &:hover {
-    color: $anchor-color;
+    @include anchor-color;
   }
 }
 
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index 92346e8ef..d40c9b9a4 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -86,6 +86,14 @@
   @include text-color($brand-secondary, brand-secondary);
 }
 
+@mixin anchor-color {
+  @include text-color($anchor-color, [anchor-color, brand]);
+}
+
+@mixin anchor-color-hover {
+  @include text-color($anchor-color-hover, anchor-color-hover);
+}
+
 %brand-background {
   @include brand-background;
 }
diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss
index 73336eaba..2d32ce7d2 100644
--- a/app/assets/stylesheets/mixins/icons.scss
+++ b/app/assets/stylesheets/mixins/icons.scss
@@ -1516,7 +1516,7 @@ $font-awesome-icons: (
 
   &:hover,
   &:focus {
-    color: $anchor-color-hover;
+    @include anchor-color-hover;
     text-decoration: none;
   }
 

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 09/10] 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;

From ccbdfb8e7863cf910b724811ca42fc9023cac9a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 29 Oct 2022 01:02:51 +0200
Subject: [PATCH 10/10] Allow different hover button colors per tenant

---
 app/assets/stylesheets/custom/tenants.scss |  6 ++++--
 app/assets/stylesheets/layout.scss         |  1 -
 app/assets/stylesheets/mixins/buttons.scss | 10 +++++-----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/custom/tenants.scss b/app/assets/stylesheets/custom/tenants.scss
index e54206cdc..9bc7053a3 100644
--- a/app/assets/stylesheets/custom/tenants.scss
+++ b/app/assets/stylesheets/custom/tenants.scss
@@ -5,14 +5,16 @@
 // `.tenant-public` selector.
 //
 // You can use CSS variables to customize the colors. Here's an example
-// changing the brand, links and main layout colors for just the main
-// tenant.
+// changing the brand, buttons, links and main layout colors for just
+// the main tenant.
 //
 // .tenant-public {
 //   --anchor-color: #372;
 //   --anchor-color-hover: #137;
 //   --brand: #153;
 //   --brand-secondary: #134a00;
+//   --button-background-hover: #fa0;
+//   --button-background-hover-contrast: #{$black};
 //   --footer: #e6e6e6;
 //   --main-header: #351;
 //   --top-links: var(--main-header);
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 28fbcf1e7..83a9f6cd6 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -122,7 +122,6 @@ button,
 
 .button {
   @extend %button;
-  @include brand-background;
 
   &.medium {
     font-size: $small-font-size;
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index b300a3207..1674e8705 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -14,10 +14,6 @@
   }
 }
 
-%button {
-  @include base-button;
-}
-
 @mixin regular-button($color: $brand) {
   @include base-button;
 
@@ -29,10 +25,14 @@
 
   &:hover,
   &:focus {
-    @include background-with-text-contrast($button-background-hover);
+    @include background-with-text-contrast($button-background-hover, button-background-hover);
   }
 }
 
+%button {
+  @include regular-button;
+}
+
 @mixin hollow-button($color: $anchor-color) {
   @include normal-selection;
   @include base-button;