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

@@ -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`
+// `--main-header` and `--anchor-color` colors will use the `--brand`
-// is not defined.
+// 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

app/assets/stylesheets/layout.scss

@@ -95,10 +95,7 @@ p {
 }
 
 a {
-  &:hover,
+  @include link;
-  &:active {
-    text-decoration: underline;
-  }
 }
 
 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 {

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

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

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