Enable input focus state customization

- Add new mixin to generate and customize focus state as needed
- Adds variable to set default color
- Include clear disclaimer about customizing this—it's about users', so
don't go making everything bright red and expect them not to be
confused or alarmed.

Relevant issues: #2742, #4185, #7942, #8171, #8610, #9044

3 files changed, 25 insertions, 5 deletions

diff --git a/less/forms.less b/less/forms.less
index 127f6a67a..027131b3b 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -129,11 +129,8 @@ input[type="number"] {
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
-  &:focus {
-    border-color: rgba(82,168,236,.8);
-    outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
-  }
+  // Customize the `:focus` state to imitate native WebKit styles.
+  .form-control-focus();
 
   // Disabled and read-only inputs
   // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
diff --git a/less/mixins.less b/less/mixins.less
index 77ed5d512..7e1b50b4e 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -544,3 +544,25 @@
     background-color: @background-color;
   }
 }
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `@input-focus-border` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+
+.form-control-focus(@color: @input-border-focus) {
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  &:focus {
+    border-color: @color;
+    outline: 0;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+  }
+}
diff --git a/less/variables.less b/less/variables.less
index a500097c9..b8c7cf6c8 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -131,6 +131,7 @@
 
 @input-border:                   #ccc;
 @input-border-radius:            @border-radius-base;
+@input-border-focus:             #66afe9;
 
 @input-color-placeholder:        @gray-light;