Rename semantic colour names to be general-to-specific

src/stylesheets/components/_components-breadcrumbs.scss

@@ -21,11 +21,11 @@
     }
 
     &--active {
-      color: $text-colour;
+      color: $colour-text;
     }
 
     a {
-      color: $text-colour;
+      color: $colour-text;
     }
   }
 }

src/stylesheets/components/_components-nav.scss

@@ -13,7 +13,7 @@
     }
 
     a {
-      color: $text-colour;
+      color: $colour-text;
       display: block;
       padding: 20px 15px;
       position: relative;

src/stylesheets/components/_components-panel.scss

@@ -5,7 +5,7 @@
 /// A panel is a container for visually separating content.
 /// Often used within a sidebar.
 .panel {
-  background: get-colour(grey, x-light);
+  background: $colour-panel;
   padding: 1em;
 
   &--dark {

src/stylesheets/components/_components-phase.scss

@@ -5,7 +5,7 @@
 /// A phase banner includes a tag and a label and is designed
 /// to designate that a service is in alpha or beta
 .phase-banner {
-  border-bottom: 1px solid $border-colour;
+  border-bottom: 1px solid $colour-border;
   display: table;
   margin: 0 0 em(24);
   padding: em(4) 0;
@@ -39,17 +39,17 @@
   vertical-align: middle;
 
   &--alpha {
-    background-color: $alpha-colour;
+    background-color: $colour-alpha;
     color: $white;
   }
 
   &--beta {
-    background-color: $beta-colour;
+    background-color: $colour-beta;
     color: $white;
   }
 
   &--live {
-    background-color: $live-colour;
+    background-color: $colour-live;
     color: $white;
   }
 }

src/stylesheets/components/_components-tables.scss

@@ -7,7 +7,7 @@
 
 // Tables
 // ==========================================================================
-$border-colour: #ccc;
+$colour-border: #ccc;
 
 table {
   border-collapse: collapse;
@@ -17,7 +17,7 @@ table {
   th,
   td {
     //@include core-19;
-    border-bottom: 1px solid $border-colour;
+    border-bottom: 1px solid $colour-border;
     color: $black;
     padding: em(12, 19) em(20, 19) em(9, 19) 0;
     text-align: left;

src/stylesheets/components/_components-tabs.scss

@@ -24,18 +24,18 @@
       padding: 0 1rem;
 
       &:hover {
-        background: get-colour(grey, x-light);
+        background: $colour-panel;
       }
     }
 
     &--active {
-      background: get-colour(grey, x-light);
+      background: $colour-panel;
     }
   }
 
   /// The tab content containing the tab panels
   &__content {
-    background: get-colour(grey, x-light);
+    background: $colour-panel;
     padding: 1rem;
   }
 

src/stylesheets/settings/_settings-colours.scss

@@ -186,34 +186,44 @@ $palettes: (
       @return map-get($colour, $tone);
     }
 
-    @warn 'Tone #{$tone} could not be found in colour #{$palette}. Auto-toning instead';
+    @warn 'Tone `#{$tone}` could not be found in colour `#{$palette}`. Auto-toning instead';
     @return apply-tone(map-get($colour, base), $tone);
   }
 
-  @error 'Palette #{$palette} could not be found';
+  @error 'Palette `#{$palette}` could not be found';
 }
 
 
-// Semantic colour names
-$page-colour: $white;                 // The page bg
-// LINKS
-$link-colour: get-colour(blue, light);          // Default link
-$link-hover-colour: get-colour(blue, x-light);      // Link hover
+// SEMANTIC COLOUR NAMES
+
+/// Page background colour
+$colour-page: $white;
+/// Link text colour
+$colour-link: get-colour(blue, light);
+/// Link hover colour
+$colour-link-hover: get-colour(blue, x-light);
+/// Link visited colour
+$colour-link-visited: get-colour(purple);
 // $link-active-colour: $light-blue;
-$link-visited-colour: get-colour(purple);       // Link visited
-// TEXT
-$focus-colour: get-colour(orange);            // Focus colour
-$text-colour: get-colour(grey, dark);         // Standard text colour
-// $secondary-text-colour: $grey-1;           // Section headers, help text etc.
-$border-colour: get-colour(grey, light);        // Borders, seperators, rules, keylines etc.
-// $panel-colour: $grey-3;                // Related links panel, page footer etc.
-// $highlight-colour: $grey-4;              // Table stripes etc.
-// PHASES
-$alpha-colour: get-colour(pink);            // Alpha badges and banners
-$beta-colour: get-colour(orange);           // Beta badges and banners
-$live-colour: get-colour(green);            // Live badges and banners
-// ALERTS
-$error-colour: get-colour(red);             // Error text and border colour
-$error-background-colour: get-colour(red, x-light);   // Error background colour
-// SUB-BRANDS
-$bnf-purple: $colour-base-purple;
+/// Focus colour
+$colour-focus: get-colour(orange);
+/// Standard text colour
+$colour-text: get-colour(grey, dark);
+/// Borders, seperators, rules, keylines etc.
+$colour-border: get-colour(grey, light);
+// Panels, tabs etc
+$colour-panel: get-colour(grey, x-light);
+// Table stripes etc.
+// $highlight-colour: $grey-4;
+/// Alpha badges and banners
+$colour-alpha: get-colour(pink);
+/// Beta badges and banners
+$colour-beta: get-colour(orange);
+/// Live badges and banners
+$colour-live: get-colour(green);
+/// Error text and border colour
+$colour-error: get-colour(red);
+/// Error background colour
+$colour-error-background: get-colour(pink, x-light);
+/// BNF brand colour
+$colour-bnf: $colour-base-purple;

src/stylesheets/typography/_typography-global.scss

@@ -7,16 +7,16 @@
 /// The default focus style used for elements like anchors and buttons
 /// @output the default focus styles ie background colour and outline
 @mixin default-focus-style {
-  outline: 3px solid $focus-colour;
+  outline: 3px solid $colour-focus;
 }
 
 html {
   @include root-size;
 }
 
 body {
-  background: $page-colour;
-  color: $text-colour;
+  background: $colour-page;
+  color: $colour-text;
   font-family: font-family(sans);
   font-style: normal;
   line-height: 1.6rem;
@@ -30,31 +30,31 @@ html {
 }
 
 a {
-  color: $link-colour;
+  color: $colour-link;
   text-decoration: underline;
 
   &:visited {
-    color: $link-visited-colour;
+    color: $colour-link-visited;
   }
 
   &:hover {
-    color: $link-hover-colour;
+    color: $colour-link-hover;
   }
 
   &:focus {
     @include default-focus-style;
-    background-color: $focus-colour;
+    background-color: $colour-focus;
   }
 
   // Add icon to external links
   &[rel='external'] {
     &::after {
-      color: $link-colour;
+      color: $colour-link;
       content: get-glyph(punc-space, box-box);
     }
 
     &:hover::after {
-      color: $link-hover-colour;
+      color: $colour-link-hover;
     }
   }
 }

src/stylesheets/typography/_typography-headings.scss

@@ -40,7 +40,7 @@ h6 {
   }
 
   &--separator {
-    border-bottom: 1px solid $border-colour;
+    border-bottom: 1px solid $colour-border;
   }
 }
 

web/client/stylesheets/components/_grid-example.scss

@@ -1,6 +1,6 @@
 .grid-example-item {
   background: get-colour(grey, x-light);
-  border: 5px solid $border-colour;
+  border: 5px solid $colour-border;
   margin-bottom: .5em;
   padding: .5em;
   text-align: center;