Merge branch '2080-nav-fg-rename'

33 files changed, 91 insertions, 80 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 621c61192..76e1e0170 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
         - Add cobrand hook for dashboard viewing permission. #2285
         - Have body.url work in hashref lookup. #2284
         - OSM based map types can now override zoom levels #2288
+        - Clearer name for navigation colours in SCSS. #2080
     - Internal things:
         - Move send-comments code to package for testing. #2109 #2170
 
diff --git a/docs/customising/css.md b/docs/customising/css.md
index c41d5b411..e444bb778 100644
--- a/docs/customising/css.md
+++ b/docs/customising/css.md
@@ -200,8 +200,8 @@ stylesheet:
     </tr>
     <tr>
         <td>
-            <code>$map_nav_bg</code><br>
-            <code>$nav_fg</code>
+            <code>$nav_background_colour</code><br>
+            <code>$nav_colour</code>
         </td>
         <td>
             Mobile width, the header's colours; large width, the navigation's
diff --git a/web/cobrands/bathnes/_colours.scss b/web/cobrands/bathnes/_colours.scss
index 18497f45b..2d58682fa 100644
--- a/web/cobrands/bathnes/_colours.scss
+++ b/web/cobrands/bathnes/_colours.scss
@@ -25,9 +25,9 @@ $primary_text: #0b0c0c;
 $base_bg: white;
 $base_fg: #0b0c0c;
 
-$map_nav_bg: #fff;
-$nav_fg: #000;
-$nav_fg_hover: #eee;
+$nav_background_colour: #fff;
+$nav_colour: #000;
+$nav_hover_background_colour: #eee;
 
 // Colour used for front page 'how to report a problem' steps
 $col_big_numbers: $bathnes-primary;
diff --git a/web/cobrands/borsetshire/_colours.scss b/web/cobrands/borsetshire/_colours.scss
index 78f06e1c8..66845a2a0 100644
--- a/web/cobrands/borsetshire/_colours.scss
+++ b/web/cobrands/borsetshire/_colours.scss
@@ -19,9 +19,9 @@ $primary_text: #fff; // text colour wherever $primary is the background
 $base_bg: white; // background on body and .tablewrapper on desktop
 $base_fg: #000; // text color on body and .tablewrapper on desktop
 
-$map_nav_bg: $color-borsetshire-blue; // background for #site-header on mobile, and `.mappage #site-header` on desktop
-$nav_fg: #fff; // text color for `.nav-menu a` on desktop
-$nav_fg_hover: $color-borsetshire-blue; // hover text color for `.nav-menu a`
+$nav_background_colour: $color-borsetshire-blue; // background for #site-header on mobile, and `.mappage #site-header` on desktop
+$nav_colour: #fff; // text color for `.nav-menu a` on desktop
+$nav_hover_background_colour: $color-borsetshire-blue; // hover text color for `.nav-menu a`
 
 $col_big_numbers: #ccc; // text color for ol.big-numbers list item counters on homepage
 
@@ -36,4 +36,4 @@ $mappage-header-height: 5em; // 3em #site-logo plus 1em padding top and bottom
 
 $body-font: Cabin, "Calibri", "Gill Sans", "Gill Sans MT", sans-serif;
 $meta-font: $body-font;
-$heading-font: $body-font;
\ No newline at end of file
+$heading-font: $body-font;
diff --git a/web/cobrands/bristol/_colours.scss b/web/cobrands/bristol/_colours.scss
index 02764ab43..7451305a8 100644
--- a/web/cobrands/bristol/_colours.scss
+++ b/web/cobrands/bristol/_colours.scss
@@ -22,9 +22,9 @@ $primary_text: $g1;
 $base_bg: white;
 $base_fg: $g1;
 
-$map_nav_bg: $g1;
-$nav_fg: #fff;
-$nav_fg_hover: $primary;
+$nav_background_colour: $g1;
+$nav_colour: #fff;
+$nav_hover_background_colour: $primary;
 
 $header-top-border: false;
 
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index 53dfcfc8a..df8e86ddb 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -13,9 +13,9 @@ $primary_text: #000000;
 $base_bg: #f4f4f4;
 $base_fg: #1a1a1a;
 
-$map_nav_bg: #f4f4f4;
-$nav_fg: #fff;
-$nav_fg_hover: #444;
+$nav_background_colour: #f4f4f4;
+$nav_colour: #fff;
+$nav_hover_background_colour: #444;
 
 $col_click_map: $bromley_blue;
 $col_fixed_label: $bromley_blue;
diff --git a/web/cobrands/bromley/_fonts.scss b/web/cobrands/bromley/_fonts.scss
index ca0b89983..b54d10542 100644
--- a/web/cobrands/bromley/_fonts.scss
+++ b/web/cobrands/bromley/_fonts.scss
@@ -7,4 +7,4 @@
 }
 $body-font: Arial,'Helvetica Neue',Helvetica,sans-serif;
 $meta-font: $body-font;
-$heading-font: 'Gill Sans condensed', 'Gill Sans','Trebuchet MS',Calibri,sans-serif;
\ No newline at end of file
+$heading-font: 'Gill Sans condensed', 'Gill Sans','Trebuchet MS',Calibri,sans-serif;
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index d53ff351a..f2e6c41c8 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -36,19 +36,19 @@ body.mappage {
 
   // Bromley doesn't have a special styling for the report button in the nav
   a.report-a-problem-btn {
-    color: $nav_fg;
+    color: $nav_colour;
     background: none;
     padding: 0.75em;
     margin: 0;
     @include border-radius(0);
     &:hover {
-      background: $nav_fg_hover;
+      background: $nav_hover_background_colour;
     }
   }
 }
 .nav-menu--main span {
-  color: $nav_fg;
-  background-color: $nav_fg_hover;
+  color: $nav_colour;
+  background-color: $nav_hover_background_colour;
 }
 
 // Fix bad margin on local alerts form
diff --git a/web/cobrands/buckinghamshire/_colours.scss b/web/cobrands/buckinghamshire/_colours.scss
index 4525989ad..685773382 100644
--- a/web/cobrands/buckinghamshire/_colours.scss
+++ b/web/cobrands/buckinghamshire/_colours.scss
@@ -25,9 +25,9 @@ $primary_text: $g1;
 $base_bg: white;
 $base_fg: $g1;
 
-$map_nav_bg: #fff;
-$nav_fg: #000;
-$nav_fg_hover: #eee;
+$nav_background_colour: #fff;
+$nav_colour: #000;
+$nav_hover_background_colour: #eee;
 
 $col_click_map: $g1;
 $col_click_map_dark: darken($g1, 10%);
diff --git a/web/cobrands/default/_colours.scss b/web/cobrands/default/_colours.scss
index 72f9607cd..83a646869 100644
--- a/web/cobrands/default/_colours.scss
+++ b/web/cobrands/default/_colours.scss
@@ -15,9 +15,9 @@ $primary_text: #222222;
 $base_bg: $bluey;
 $base_fg: #000;
 
-$map_nav_bg: $bluey;
-$nav_fg: #000;
-$nav_fg_hover: $primary;
+$nav_background_colour: $bluey;
+$nav_colour: #000;
+$nav_hover_background_colour: $primary;
 
 // Colour used for front page 'how to report a problem' steps
 $col_big_numbers: #ccc;
diff --git a/web/cobrands/eastherts/_colours.scss b/web/cobrands/eastherts/_colours.scss
index 2854c01bd..6233591d3 100644
--- a/web/cobrands/eastherts/_colours.scss
+++ b/web/cobrands/eastherts/_colours.scss
@@ -10,9 +10,9 @@ $primary_text: #fff;
 $base_bg: white;
 $base_fg: $eh_dark_grey;
 
-$map_nav_bg: #000;
-$nav_fg: #fff;
-$nav_fg_hover: $eh_green;
+$nav_background_colour: #000;
+$nav_colour: #fff;
+$nav_hover_background_colour: $eh_green;
 
 $header-top-border: false;
 
diff --git a/web/cobrands/fiksgatami/_colours.scss b/web/cobrands/fiksgatami/_colours.scss
index c7fb8b127..c78a15b05 100644
--- a/web/cobrands/fiksgatami/_colours.scss
+++ b/web/cobrands/fiksgatami/_colours.scss
@@ -11,9 +11,9 @@ $primary_text: #222222;
 $base_bg: $bg;
 $base_fg: #fff;
 
-$map_nav_bg: $bg;
-$nav_fg: #fff;
-$nav_fg_hover: $primary;
+$nav_background_colour: $bg;
+$nav_colour: #fff;
+$nav_hover_background_colour: $primary;
 
 $col_click_map: $bg;
 
diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss
index 555c2d7ae..0ec24d1ff 100644
--- a/web/cobrands/fixamingata/_colours.scss
+++ b/web/cobrands/fixamingata/_colours.scss
@@ -9,9 +9,9 @@ $primary_text: #222;
 $base_bg: #eee url(images/tile.jpg) 0 0 repeat;
 $base_fg: $primary_text;
 
-$map_nav_bg: #eee;
-$nav_fg: $primary_text;
-$nav_fg_hover: #444;
+$nav_background_colour: #eee;
+$nav_colour: $primary_text;
+$nav_hover_background_colour: #444;
 
 $header-top-border: false;
 
diff --git a/web/cobrands/fixamingata/layout.scss b/web/cobrands/fixamingata/layout.scss
index 3e0a999a3..60e72859b 100644
--- a/web/cobrands/fixamingata/layout.scss
+++ b/web/cobrands/fixamingata/layout.scss
@@ -72,7 +72,7 @@ body.mappage {
 }
 
 #site-header {
-    background: $map_nav_bg;
+    background: $nav_background_colour;
     padding: 1em 0;
 }
 
diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss
index b43c96791..1a6bb7ff1 100644
--- a/web/cobrands/fixmystreet.com/_colours.scss
+++ b/web/cobrands/fixmystreet.com/_colours.scss
@@ -8,9 +8,9 @@ $primary_text: #222;
 $base_bg: #272727 url(images/tile.jpg) 0 0 repeat;
 $base_fg: #fff;
 
-$map_nav_bg: #222;
-$nav_fg: #fff;
-$nav_fg_hover: #444;
+$nav_background_colour: #222;
+$nav_colour: #fff;
+$nav_hover_background_colour: #444;
 
 // The "Click map" box on /around
 $col_click_map: #00BD08;
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index f49d4f32f..c2bbd2d14 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -429,4 +429,4 @@ footer {
         margin-top: 1em;
         margin-bottom: 1em;
     }
-}
\ No newline at end of file
+}
diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss
index 447b5a134..0e6046efb 100644
--- a/web/cobrands/greenwich/_colours.scss
+++ b/web/cobrands/greenwich/_colours.scss
@@ -13,9 +13,9 @@ $primary_text: #222222;
 $base_bg: #fff;
 $base_fg: #000;
 
-$map_nav_bg: #fff;
-$nav_fg: #fff;
-$nav_fg_hover: transparent;
+$nav_background_colour: #fff;
+$nav_colour: #fff;
+$nav_hover_background_colour: transparent;
 
 $header-top-border: false;
 
diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss
index 48c5c642d..f46ab9a19 100644
--- a/web/cobrands/greenwich/base.scss
+++ b/web/cobrands/greenwich/base.scss
@@ -33,7 +33,7 @@ label[for=pc] {
 }
 
 #front_stats {
-    color: $nav_fg;
+    color: $nav_colour;
 }
 
 #greenwich-menu-desktop, #fms-menu-desktop, #greenwich-breadcrumb {
diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index 6c59dc123..7e6706c90 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -103,7 +103,7 @@ body.frontpage {
 
     li {
         span, a {
-            color: $nav_fg;
+            color: $nav_colour;
         }
     }
 }
@@ -176,7 +176,7 @@ body.mappage {
     }
 
     .nav-menu--main a.report-a-problem-btn {
-        color: $nav_fg;
+        color: $nav_colour;
     }
 
     .nav-menu {
diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss
index 3dce0d9b1..209a971e5 100644
--- a/web/cobrands/hart/_colours.scss
+++ b/web/cobrands/hart/_colours.scss
@@ -14,10 +14,10 @@ $base_bg: #ffffff;
 $base_fg: #1a1a1a;
 
 /* Unused here */
-$nav_fg: #fff;
-$nav_fg_hover: #444;
+$nav_colour: #fff;
+$nav_hover_background_colour: #444;
 
-$map_nav_bg: $primary;
+$nav_background_colour: $primary;
 $mappage-header-height: 173px + 32px;
 $header-top-border: false;
 
diff --git a/web/cobrands/lincolnshire/_colours.scss b/web/cobrands/lincolnshire/_colours.scss
index 21b67628c..e53d0cfcf 100644
--- a/web/cobrands/lincolnshire/_colours.scss
+++ b/web/cobrands/lincolnshire/_colours.scss
@@ -30,9 +30,9 @@ $primary_text: $lincs-text;
 $base_bg: $lincs-page;
 $base_fg: #000;
 
-$map_nav_bg: #eee;
-$nav_fg: #000;
-$nav_fg_hover: $primary;
+$nav_background_colour: #eee;
+$nav_colour: #000;
+$nav_hover_background_colour: $primary;
 
 // Colour used for front page 'how to report a problem' steps
 $col_big_numbers: $lincs-text-2nd;
diff --git a/web/cobrands/lincolnshire/base.scss b/web/cobrands/lincolnshire/base.scss
index 1d045f4ea..33ae1f3ce 100644
--- a/web/cobrands/lincolnshire/base.scss
+++ b/web/cobrands/lincolnshire/base.scss
@@ -167,4 +167,4 @@ body.mappage .big-green-banner {
 
 .admin-hint {
   background-color: $lincs-link-focus;
-}
\ No newline at end of file
+}
diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
index bb38e1ff5..b55727f79 100644
--- a/web/cobrands/oxfordshire/_colours.scss
+++ b/web/cobrands/oxfordshire/_colours.scss
@@ -18,9 +18,9 @@ $primary_text: #fff;
 $base_bg: #cfcfcf;
 $base_fg: #333;
 
-$map_nav_bg: $color-oxfordshire-dark-green;
-$nav_fg: #000;
-$nav_fg_hover: $nav_fg;
+$nav_background_colour: $color-oxfordshire-dark-green;
+$nav_colour: #000;
+$nav_hover_background_colour: $nav_colour;
 
 $col_click_map: $color-oxfordshire-bright-green;
 
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 6d4bad117..9a098c439 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -52,7 +52,7 @@ a {
 
 #site-logo {
     @include svg-background-image("images/site-logo-mobile");
-    background-color: $map_nav_bg;
+    background-color: $nav_background_colour;
     background-size: 175px 38px;
     background-repeat: no-repeat;
     background-position: 50% 50%;
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 9a831dd69..8fc66aac4 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -52,7 +52,7 @@ $mappage-header-height: 10em;
     a,
     a:hover,
     a:focus {
-        color: $nav_fg;
+        color: $nav_colour;
         background-color: transparent;
     }
 
diff --git a/web/cobrands/rutland/_colours.scss b/web/cobrands/rutland/_colours.scss
index c3666ca17..5cbd005e8 100755
--- a/web/cobrands/rutland/_colours.scss
+++ b/web/cobrands/rutland/_colours.scss
@@ -18,9 +18,9 @@ $primary_text: #222222;
 $base_bg: $RCCbg;
 $base_fg: #000;
 
-$map_nav_bg: $RCCbg;
-$nav_fg: #000;
-$nav_fg_hover: $primary;
+$nav_background_colour: $RCCbg;
+$nav_colour: #000;
+$nav_hover_background_colour: $primary;
 
 // Colour used for front page 'how to report a problem' steps
 $col_big_numbers: #ccc;
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 587ff59f3..c17790176 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -506,8 +506,8 @@ ul.error {
   @if ($header-top-border) {
     border-top: $header-top-border;
   }
-  color: $nav_fg;
-  background-color: $map_nav_bg;
+  color: $nav_colour;
+  background-color: $nav_background_colour;
   position: relative;
 }
 
@@ -548,13 +548,13 @@ ul.error {
   font-size: 0.9em;
   line-height: 1em;
   border: 1px solid #666;
-  color: $nav_fg;
+  color: $nav_colour;
   padding: 0.4em;
   border-radius: 0.3em;
 
   &:hover, &:focus {
     text-decoration: none;
-    background-color: $nav_fg_hover;
+    background-color: $nav_hover_background_colour;
   }
 }
 
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 7a6f7ba02..2c641f30c 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -112,12 +112,12 @@ h1 {
   }
   a, span {
     display: block;
-    color: $nav_fg;
+    color: $nav_colour;
     background-color: transparent;
     border-bottom: none;
   }
   a:visited {
-    color: $nav_fg;
+    color: $nav_colour;
   }
 }
 .nav-menu--main {
@@ -126,7 +126,7 @@ h1 {
     font-size: 0.9em;
   }
   a:hover {
-    background-color: $nav_fg_hover;
+    background-color: $nav_hover_background_colour;
   }
   a.report-a-problem-btn {
     color: $primary_text;
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index 392739db8..b78a699fe 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -1,5 +1,15 @@
 $direction: 'left' !default;
 
+@if (variable-exists(nav_fg)) {
+    $nav_colour: $nav_fg !global;
+}
+@if (variable-exists(nav_fg_hover)) {
+    $nav_hover_background_colour: $nav_fg_hover !global;
+}
+@if (variable-exists(map_nav_bg)) {
+    $nav_background_colour: $nav_fg_hover !global;
+}
+
 // Button reset
 // Uses !important a few times to quickly reset
 // styles from a:link, a:hover, a:visited etc.
diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss
index 42718421a..0211b6d57 100644
--- a/web/cobrands/stevenage/_colours.scss
+++ b/web/cobrands/stevenage/_colours.scss
@@ -9,9 +9,9 @@ $primary_text: #fff;
 $base_bg: #dddddb;
 $base_fg: #222;
 
-$map_nav_bg: #eee;
-$nav_fg: #fff;
-$nav_fg_hover: #444;
+$nav_background_colour: #eee;
+$nav_colour: #fff;
+$nav_hover_background_colour: #444;
 
 $col_click_map: #00BD08;
 $col_fixed_label: #00BD08;
diff --git a/web/cobrands/warwickshire/_colours.scss b/web/cobrands/warwickshire/_colours.scss
index 154cf1bef..8480841a1 100644
--- a/web/cobrands/warwickshire/_colours.scss
+++ b/web/cobrands/warwickshire/_colours.scss
@@ -10,9 +10,9 @@ $primary_text: #222222;
 $base_bg: #F9FFF8;
 $base_fg: #000;
 
-$map_nav_bg: #fff;
-$nav_fg: #000;
-$nav_fg_hover: $primary;
+$nav_background_colour: #fff;
+$nav_colour: #000;
+$nav_hover_background_colour: $primary;
 
 $col_click_map: $purple;
 
diff --git a/web/cobrands/whitelabel/_colours.scss b/web/cobrands/whitelabel/_colours.scss
index 1392663d5..f7e6e63c7 100644
--- a/web/cobrands/whitelabel/_colours.scss
+++ b/web/cobrands/whitelabel/_colours.scss
@@ -12,9 +12,9 @@ $primary_text: #222222;
 $base_bg: white;
 $base_fg: #000;
 
-$map_nav_bg: #eee;
-$nav_fg: #000;
-$nav_fg_hover: $primary;
+$nav_background_colour: #eee;
+$nav_colour: #000;
+$nav_hover_background_colour: $primary;
 
 // Colour used for front page 'how to report a problem' steps
 $col_big_numbers: #ccc;
diff --git a/web/cobrands/zurich/_colours.scss b/web/cobrands/zurich/_colours.scss
index 3bdbd7447..5f4416015 100644
--- a/web/cobrands/zurich/_colours.scss
+++ b/web/cobrands/zurich/_colours.scss
@@ -10,10 +10,10 @@ $primary_text: #fff;
 $base_bg: #fff;
 $base_fg: #3c3c3c;
 
-$map_nav_bg: #366AB6;
+$nav_background_colour: #366AB6;
 /* Unused here, main-nav is mobile only */
-$nav_fg: $primary_text;
-$nav_fg_hover: $primary/1.1;
+$nav_colour: $primary_text;
+$nav_hover_background_colour: $primary/1.1;
 
 $col_click_map: $zurich_blue;