Improve accessibility story for custom focus styles (#2460)

* Improve accessibility story for custom focus styles

* Update fixtures

* Make outline configurable, add white/black dotted outlines

* Update changelog

src/plugins/outline.js

@@ -1,10 +1,21 @@
+import _ from 'lodash'
+
 export default function() {
-  return function({ addUtilities, variants }) {
-    addUtilities(
-      {
-        '.outline-none': { outline: '0' },
-      },
-      variants('outline')
+  return function({ addUtilities, e, theme, variants }) {
+    const utilities = _.fromPairs(
+      _.map(theme('outline'), (value, modifier) => {
+        const [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
+
+        return [
+          `.${e(`outline-${modifier}`)}`,
+          {
+            outline,
+            outlineOffset,
+          },
+        ]
+      })
     )
+
+    addUtilities(utilities, variants('outline'))
   }
 }