Sass variables for default link colour/decoration.

You can now set link colours in your `_colours.scss` file, rather than
having to override the base colours. The variables are:

    $link-color
    $link-hover-color
    $link-visited-color
    $link-text-decoration
    $link-hover-text-decoration

22 files changed, 54 insertions, 112 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9af06e8df..3bf04d429 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@
         - Upgrade the underlying framework and a number of other packages.
         - Add feature cobrand helper function.
         - Add front-end testing support for WSL.
+        - Sass variables for default link colour and decoration.
     - Open311 improvements:
         - Support use of 'private' service definition <keywords> to mark
           reports made in that category private.
diff --git a/web/cobrands/bathnes/base.scss b/web/cobrands/bathnes/base.scss
index f84323b1c..611f71094 100644
--- a/web/cobrands/bathnes/base.scss
+++ b/web/cobrands/bathnes/base.scss
@@ -4,10 +4,6 @@
 
 @import "../sass/base";
 
-a { color: $link-colour; }
-a:visited { color: $link-visited-colour; }
-a:active, a:hover { color: $link-hover-colour; }
-
 @import "pattern-lib/header";
 @import "pattern-lib/navigation";
 @import "pattern-lib/footer";
diff --git a/web/cobrands/bexley/_colours.scss b/web/cobrands/bexley/_colours.scss
index e2c1657bb..615ef65a4 100644
--- a/web/cobrands/bexley/_colours.scss
+++ b/web/cobrands/bexley/_colours.scss
@@ -21,10 +21,10 @@ $sprint_lt: #B8E26A;
 $text_black: #0B0C0C;
 $text_grey: #6F777B;
 
-$link: #005EA5;
-$hover: #2B8CC4;
-$visited: #4C2C92;
-$focus: #FFBF47;
+$link-color: #005EA5;
+$link-hover-color: #2B8CC4;
+$link-visited-color: #4C2C92;
+$link-focus-color: #FFBF47;
 
 $grey_border: #BFC1C3;
 $grey_panel: #DEE0E2;
diff --git a/web/cobrands/bexley/base.scss b/web/cobrands/bexley/base.scss
index bedd5b21b..7132f33ab 100644
--- a/web/cobrands/bexley/base.scss
+++ b/web/cobrands/bexley/base.scss
@@ -71,28 +71,11 @@ small {
 
 a,
 .fake-link {
-  text-decoration: none;
-  color: $link;
-
-  &:visited {
-    color: $visited;
-  }
-
-  &:hover,
-  &:active {
-    text-decoration: underline;
-    color: $hover;
-  }
-
   &:focus {
-    color: $focus;
+    color: $link-focus-color;
   }
 }
 
-.dz-clickable .dz-message u {
-  color: $link;
-}
-
 .btn-primary,
 .green-btn,
 .btn--primary {
diff --git a/web/cobrands/bristol/_colours.scss b/web/cobrands/bristol/_colours.scss
index 4e72e90b3..cd87161a8 100644
--- a/web/cobrands/bristol/_colours.scss
+++ b/web/cobrands/bristol/_colours.scss
@@ -19,6 +19,9 @@ $primary: $bcc_red;
 $primary_b: $g1;
 $primary_text: $g1;
 
+$link-color: $b3;
+$link-hover-color: $b3;
+
 $base_bg: white;
 $base_fg: $g1;
 
diff --git a/web/cobrands/bristol/base.scss b/web/cobrands/bristol/base.scss
index e0dc1bdb5..dea303f42 100644
--- a/web/cobrands/bristol/base.scss
+++ b/web/cobrands/bristol/base.scss
@@ -109,12 +109,6 @@ dl dt {
   }
 }
 
-p, dd, aside {
-  a, a:visited, a:hover {
-    color: $b3;
-  }
-}
-
 a#geolocate_link {
   color: $b3;
 }
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index 1eb0b8bdb..f00922435 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -10,6 +10,10 @@ $primary: $bromley_blue;
 $primary_b: #ffffff;
 $primary_text: #ffffff;
 
+$link-color: $bromley_green;
+$link-hover-color: $bromley_green;
+$link-visited-color: $bromley_dark_green;
+
 $base_bg: #f4f4f4;
 $base_fg: #1a1a1a;
 
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 9435aa35d..b2492d928 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -63,17 +63,15 @@ body.frontpage.fullwidthpage {
 
 // Override the links to match Bromley's
 a {
-  text-decoration:none;
-  color: $bromley_green;
   opacity: 1;
 }
+
 a:hover {
   opacity: 0.8;
-  text-decoration:underline;
 }
-a:visited,
+
 a:active {
-  color: $bromley_dark_green;
+  color: $link-visited-color;
 }
 
 // The map page header looks a bit high for some reason
diff --git a/web/cobrands/buckinghamshire/_colours.scss b/web/cobrands/buckinghamshire/_colours.scss
index 1557b790c..9a5f36960 100644
--- a/web/cobrands/buckinghamshire/_colours.scss
+++ b/web/cobrands/buckinghamshire/_colours.scss
@@ -22,6 +22,9 @@ $primary: $bucks_dark_green;
 $primary_b: $g1;
 $primary_text: $g1;
 
+$link-color: $b3;
+$link-hover-color: $b3;
+
 $base_bg: white;
 $base_fg: $g1;
 
diff --git a/web/cobrands/buckinghamshire/base.scss b/web/cobrands/buckinghamshire/base.scss
index 0d3e6ec74..1d9edf02f 100644
--- a/web/cobrands/buckinghamshire/base.scss
+++ b/web/cobrands/buckinghamshire/base.scss
@@ -74,12 +74,6 @@ dl dt {
   }
 }
 
-p, dd, aside {
-  a, a:visited, a:hover {
-    color: $b3;
-  }
-}
-
 a#geolocate_link {
   color: $b3;
 }
diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss
index 7a4da5b43..d79126bae 100644
--- a/web/cobrands/hart/_colours.scss
+++ b/web/cobrands/hart/_colours.scss
@@ -9,6 +9,9 @@ $col_fixed_label: $hart_primary;
 $primary_b: #000000;
 $primary_text: #ffffff;
 
+$link-color: #369;
+$link-hover-color: #369;
+
 $base_bg: #ffffff;
 $base_fg: #1a1a1a;
 
diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss
index 62a4250f3..ffcf1c256 100644
--- a/web/cobrands/hart/base.scss
+++ b/web/cobrands/hart/base.scss
@@ -4,13 +4,6 @@
 
 @import "../sass/base";
 
-a, a:visited {
-    color: #369;
-    &:hover, &:active {
-        color: #369;
-    }
-}
-
 .item-list--reports__item {
   color: #666;
   a {
diff --git a/web/cobrands/lincolnshire/_colours.scss b/web/cobrands/lincolnshire/_colours.scss
index 7adecfdcb..8d8ad2bf4 100644
--- a/web/cobrands/lincolnshire/_colours.scss
+++ b/web/cobrands/lincolnshire/_colours.scss
@@ -27,6 +27,10 @@ $primary: $lincs-highlight;
 $primary_b: $lincs-pop;
 $primary_text: $lincs-text;
 
+$link-color: $lincs-link;
+$link-hover-color: $lincs-link-hover;
+$link-visited-color: $lincs-link-visited;
+
 $base_bg: $lincs-page;
 $base_fg: #000;
 
diff --git a/web/cobrands/lincolnshire/base.scss b/web/cobrands/lincolnshire/base.scss
index de1e4789f..edae2baec 100644
--- a/web/cobrands/lincolnshire/base.scss
+++ b/web/cobrands/lincolnshire/base.scss
@@ -14,20 +14,6 @@ h1, h2, h3 {
   font-weight: bold;
 }
 
-a {
-  color: $lincs-link;
-
-  &:visited {
-    color: $lincs-link-visited;
-  }
-  
-  &:hover,
-  &:active,
-  &:focus {
-    color: $lincs-link-hover;
-  }
-}
-
 #site-header {
   background-color: $primary;
   border-top: 0;
diff --git a/web/cobrands/northamptonshire/_colours.scss b/web/cobrands/northamptonshire/_colours.scss
index 0dfd512a7..17c7822fb 100644
--- a/web/cobrands/northamptonshire/_colours.scss
+++ b/web/cobrands/northamptonshire/_colours.scss
@@ -12,6 +12,10 @@ $primary: $green;
 $primary_b: $dark;
 $primary_text: $white;
 
+$link-color: $blue;
+$link-hover-color: $blue;
+$link-visited-color: $blue;
+
 $base_bg: $white;
 $base_fg: $dark;
 
diff --git a/web/cobrands/northamptonshire/base.scss b/web/cobrands/northamptonshire/base.scss
index 55a4e6610..9f01a6b6e 100644
--- a/web/cobrands/northamptonshire/base.scss
+++ b/web/cobrands/northamptonshire/base.scss
@@ -22,26 +22,6 @@
     color: $white;
 }
 
-a,
-.fake-link {
-  text-decoration: none;
-  color: $blue;
-
-  &:visited {
-    color: $blue;
-  }
-
-  &:hover,
-  &:active {
-    text-decoration: underline;
-    color: $blue;
-  }
-}
-
-.dz-clickable .dz-message u {
-  color: $blue;
-}
-
 .btn-primary,
 .green-btn,
 .btn--primary {
diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
index a42d96b2b..7ef941660 100644
--- a/web/cobrands/oxfordshire/_colours.scss
+++ b/web/cobrands/oxfordshire/_colours.scss
@@ -15,6 +15,9 @@ $primary: $color-oxfordshire-bright-green;
 $primary_b: $color-oxfordshire-dark-green;
 $primary_text: #fff;
 
+$link-color: $color-oxfordshire-link-blue;
+$link-hover-color: $color-oxfordshire-bright-yellow;
+
 $base_bg: #cfcfcf;
 $base_fg: #333;
 
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index a14e018b2..989c3b19c 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -16,17 +16,9 @@ body {
     color: #333;
 }
 
-a {
-    color: $color-oxfordshire-link-blue;
-
-    &:hover {
-        color: $color-oxfordshire-bright-yellow;
-    }
-
-    a:not([class]):focus {
-        background-color: $color-oxfordshire-bright-yellow;
-        outline: 2px solid $color-oxfordshire-bright-yellow;
-    }
+a:not([class]):focus {
+    background-color: $color-oxfordshire-bright-yellow;
+    outline: 2px solid $color-oxfordshire-bright-yellow;
 }
 
 .form-control,
@@ -126,12 +118,12 @@ a {
         padding: 0;
         background: transparent;
         font-size: inherit;
-        color: $color-oxfordshire-link-blue;
+        color: $link-color;
         margin-top: 0.5em;
 
         &:hover {
             background-color: transparent;
-            color: $color-oxfordshire-bright-yellow;
+            color: $link-hover-color;
         }
 
         &:focus {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index b410649a8..659002c57 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -5,6 +5,12 @@ $meta-font: Helmet, Freesans, sans-serif !default;
 $heading-font: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif !default;
 $menu-image: 'menu-white' !default;
 
+$link-color: #0BA7D1 !default;
+$link-hover-color: #0D7CCE !default;
+$link-visited-color: $link-color !default;
+$link-text-decoration: none !default;
+$link-hover-text-decoration: underline !default;
+
 $itemlist_item_background: #f6f6f6 !default;
 $itemlist_item_background_hover: #e6e6e6 !default;
 $col_big_numbers: #ccc !default;
@@ -184,17 +190,17 @@ select {
 
 a,
 .fake-link {
-  text-decoration: none;
-  color: #0BA7D1;
+  text-decoration: $link-text-decoration;
+  color: $link-color;
 
   &:visited {
-    color: #0BA7D1;
+    color: $link-visited-color;
   }
 
   &:hover,
   &:active {
-    text-decoration: underline;
-    color: #0D7CCE;
+    text-decoration: $link-hover-text-decoration;
+    color: $link-hover-color;
   }
 }
 
diff --git a/web/cobrands/sass/_dropzone.scss b/web/cobrands/sass/_dropzone.scss
index 0d440c85b..0bd616b16 100644
--- a/web/cobrands/sass/_dropzone.scss
+++ b/web/cobrands/sass/_dropzone.scss
@@ -1,5 +1,5 @@
-$dropzone-link-color: #0BA7D1; // match default `a` styling
-$dropzone-link-color--awakened: #0D7CCE; // match default `a:hover` styling
+$dropzone-link-color: $link-color;
+$dropzone-link-color--awakened: $link-hover-color;
 $dropzone-border-color--awakened: $dropzone-link-color--awakened;
 $dropzone-border-color--full: #bf002a;
 $dropzone-background-color: #fff;
diff --git a/web/cobrands/zurich/_colours.scss b/web/cobrands/zurich/_colours.scss
index 4b59cfe28..d5b391ba1 100644
--- a/web/cobrands/zurich/_colours.scss
+++ b/web/cobrands/zurich/_colours.scss
@@ -7,6 +7,9 @@ $primary: $zurich_blue;
 $primary_b: $dark_blue;
 $primary_text: #fff;
 
+$link-color: #126094;
+$link-hover-color: lighten(#126094, 5%);
+
 $base_bg: #fff;
 $base_fg: #3c3c3c;
 
diff --git a/web/cobrands/zurich/_zurich.scss b/web/cobrands/zurich/_zurich.scss
index e4ff44220..d1f6991c5 100644
--- a/web/cobrands/zurich/_zurich.scss
+++ b/web/cobrands/zurich/_zurich.scss
@@ -1,13 +1,5 @@
 // Some things from the Zurich stylesheet
 
-a {
-    color: #126094;
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
-}
-
 #zurich-footer {
     margin: 2em auto; // mySociety
     font-size: 67.5%;