use euiFocusBackgroundColor for EuiFacetButton :focus (elastic#2365)

* use  for EuiFacetButton :focus

* Updated changelog

* removed trailing whitespace

* fixed indentation

* fixed my mistake / leftover code

* use euiSizeXS instead of px value

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Modified `EuiFacetButton` to use `$euiFocusBackgroundColor` for `:focus` state ([2365](https://github.com/elastic/eui/pull/2365))
 - Added a `showMaxPopover` option for `EuiBreadcrumbs` to display all items when a `max` is set. ([#2342](https://github.com/elastic/eui/pull/2342))
 - Added `data-test-subj` support for basic and in-memory tables' actions ([#2353](https://github.com/elastic/eui/pull/2353))
 - Added `ip` icon to glyph set ([#2371](https://github.com/elastic/eui/pull/2371))

src/components/facet/_facet_button.scss

@@ -25,7 +25,9 @@
   }
 
   &:focus {
-    background-color: $euiColorLightestShade;
+    background-color: $euiFocusBackgroundColor;
+    // use box-shadow as a "faux outline" to apply left/right padding only
+    box-shadow: -$euiSizeXS 0 $euiFocusBackgroundColor, $euiSizeXS 0 $euiFocusBackgroundColor;
   }
 
   &:disabled {