From ea3ae4d26295135ff3561ff11d92204246e5e804 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 9 Oct 2022 22:11:33 +0200
Subject: [PATCH] Use $anchor-color instead of $link

The variables `$anchor-color` and `$anchor-color-hover` are the ones
Foundation uses internally; by using them, we make sure every link will
use the colors we define.

Now we can simplify the default styles for the `<a>` tags, since by
default they already use these variables.
---
 app/assets/stylesheets/_consul_settings.scss |  6 +++---
 app/assets/stylesheets/layout.scss           | 11 ++---------
 app/assets/stylesheets/mixins/buttons.scss   |  6 +++---
 app/assets/stylesheets/mixins/icons.scss     |  2 +-
 4 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index fe190497a..3fb21ba36 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -70,9 +70,6 @@ $text-light:        #bfbfbf !default;
 
 $border:            #dee0e3 !default;
 
-$link:              $brand !default;
-$link-hover:        darken($link, 20%) !default;
-
 $debates:           $brand !default;
 
 $like:              #7bd2a8 !default;
@@ -148,6 +145,9 @@ $sdg-colors: (
 // 3. Foundation overrides depending on CONSUL variables
 // -----------------------------------------------------
 
+$anchor-color: $brand !default;
+$anchor-color-hover: darken($anchor-color, 20%) !default;
+
 $tab-background-active: $white !default;
 
 $tab-item-font-size: $base-font-size !default;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index d745e38f6..8193cd87e 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -95,17 +95,10 @@ p {
 }
 
 a {
-  color: $link;
-
   &:hover,
   &:active {
-    color: $link-hover;
     text-decoration: underline;
   }
-
-  &:focus {
-    color: $link-hover;
-  }
 }
 
 a,
@@ -775,7 +768,7 @@ body > header,
       width: auto;
 
       &:hover {
-        color: $link;
+        color: $anchor-color;
       }
 
       &.is-active {
@@ -945,7 +938,7 @@ footer {
 .categories a,
 .geozone a {
   background: $highlight;
-  color: $link;
+  color: $anchor-color;
 
   &:hover,
   &.is-active {
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index bc494b083..90d2ad04b 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -31,12 +31,12 @@
 }
 
 @mixin link {
-  color: $link;
+  color: $anchor-color;
   cursor: pointer;
 
   &:hover,
   &:active {
-    color: $link-hover;
+    color: $anchor-color-hover;
     text-decoration: underline;
   }
 }
@@ -45,7 +45,7 @@
   color: inherit;
 
   &:hover {
-    color: $link;
+    color: $anchor-color;
   }
 }
 
diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss
index e2875c004..73336eaba 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: $link-hover;
+    color: $anchor-color-hover;
     text-decoration: none;
   }