Redesign focus outline styles

CHANGELOG.md

@@ -8,6 +8,7 @@ project adheres to [Semantic Versioning](http://semver.org).
 ### Added
 
 - Set `margin` to `0` on the `body` element. ([#280])
+- Global variables for the styling of focus outlines. ([#284])
 
 ### Changed
 
@@ -19,6 +20,9 @@ project adheres to [Semantic Versioning](http://semver.org).
   element. ([#279])
 - `a` elements no longer have `text-decoration` set to `none`. They also now
   have `text-decoration-skip` set to `ink`. ([#283])
+- The visual style of outlines on focused elements (`a`, `$all-buttons`,
+  `[type="checkbox"]`, `[type="radio"]`, `[type="file"]`, `select`) is now solid
+  and offset from the element. ([#284])
 
 ### Removed
 
@@ -31,6 +35,7 @@ project adheres to [Semantic Versioning](http://semver.org).
 [#279]: https://github.com/thoughtbot/bitters/pull/279
 [#280]: https://github.com/thoughtbot/bitters/pull/280
 [#283]: https://github.com/thoughtbot/bitters/pull/283
+[#284]: https://github.com/thoughtbot/bitters/pull/284
 
 ## [1.5.0] - 2016-11-08
 

core/_buttons.scss

@@ -19,12 +19,16 @@
   vertical-align: middle;
   white-space: nowrap;
 
-  &:hover,
-  &:focus {
+  &:hover {
     background-color: shade($action-color, 20%);
     color: #fff;
   }
 
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.5;

core/_forms.scss

@@ -83,3 +83,13 @@ select {
   margin-bottom: $small-spacing;
   width: 100%;
 }
+
+[type="checkbox"],
+[type="radio"],
+[type="file"],
+select {
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}

core/_typography.scss

@@ -26,11 +26,14 @@ a {
   text-decoration-skip: ink;
   transition: color $base-duration $base-timing;
 
-  &:active,
-  &:focus,
   &:hover {
     color: shade($action-color, 25%);
   }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
 }
 
 hr {

core/_variables.scss

@@ -34,6 +34,12 @@ $base-border: 1px solid $base-border-color;
 $base-background-color: #fff;
 $secondary-background-color: tint($base-border-color, 75%);
 
+// Focus
+$focus-outline-color: transparentize($action-color, 0.4);
+$focus-outline-width: 3px;
+$focus-outline: $focus-outline-width solid $focus-outline-color;
+$focus-outline-offset: 2px;
+
 // Animations
 $base-duration: 150ms;
 $base-timing: ease;