Fix non-semantic use of text colour for borders.

CHANGELOG.md

@@ -10,10 +10,20 @@ Breaking changes:
   `.govuk-section-break--visible` as it is a modifier, not an element.
   (PR [#547](https://github.com/alphagov/govuk-frontend/pull/547)
 
+New features:
+
+- A new variable `$govuk-input-border-colour` has been introduced to define the
+  border colour for inputs. The Input, Select and Textarea components have been
+  updated to use it.
+  (PR [#551](https://github.com/alphagov/govuk-frontend/pull/551)
+
 Fixes:
 
 - Fieldset legends now correctly use 'full black' text colour when printed
   (PR [#544](https://github.com/alphagov/govuk-frontend/pull/544)
+- Radio and Checkbox components now explicitly use currentColor for their
+  borders, rather than relying on inheriting it
+  (PR [#551](https://github.com/alphagov/govuk-frontend/pull/551)
 
 ## 0.0.23-alpha (Breaking release)
 

src/components/checkboxes/_checkboxes.scss

@@ -56,7 +56,7 @@
     left: 0;
     width: $govuk-spacing-scale-7;
     height: $govuk-spacing-scale-7;
-    border: $govuk-border-width-form-element solid $govuk-text-colour;
+    border: $govuk-border-width-form-element solid currentColor;
     background: transparent;
 
     // padding-bottom: 1px;

src/components/input/_input.scss

@@ -15,7 +15,7 @@
     padding: $govuk-spacing-scale-1;
     // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
     // as background-color and color need to always be set together, color should not be set either
-    border: $govuk-border-width-form-element solid $govuk-text-colour;
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     border-radius: 0;
 
     // Disable inner shadow and remove rounded corners

src/components/radios/_radios.scss

@@ -65,7 +65,7 @@
     width: $govuk-spacing-scale-7;
     height: $govuk-spacing-scale-7;
 
-    border: $govuk-border-width-form-element solid;
+    border: $govuk-border-width-form-element solid currentColor;
     border-radius: 50%;
     background: transparent;
   }
@@ -80,7 +80,7 @@
     width: 0;
     height: 0;
 
-    border: $govuk-spacing-scale-2 solid;
+    border: $govuk-spacing-scale-2 solid currentColor;
     border-radius: 50%;
     opacity: 0;
     background: currentColor;

src/components/select/_select.scss

@@ -15,7 +15,7 @@
     height: 40px;
 
     padding: $govuk-spacing-scale-1; // was 5px 4px 4px - size of it should be adjusted to match other form elements
-    border: $govuk-border-width-form-element solid $govuk-text-colour;
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
   }
 
   .govuk-c-select option:active,

src/components/textarea/_textarea.scss

@@ -17,7 +17,7 @@
     @include govuk-responsive-margin($govuk-spacing-responsive-6, "bottom");
     padding: $govuk-spacing-scale-1;
 
-    border: $govuk-border-width-form-element solid $govuk-text-colour;
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     border-radius: 0;
 
     -webkit-appearance: none;

src/globals/scss/settings/_colours-applied.scss

@@ -40,6 +40,10 @@ $govuk-error-colour: $govuk-red;
 
 $govuk-border-colour: $govuk-grey-2;
 
+// Used for form inputs and controls
+
+$govuk-input-border-colour: $govuk-black;
+
 // Buttons
 
 $govuk-button-colour: #00823b;