feat(scss): add $swal2-close-button-font-family and $swal2-button-foc…

…us-background-color variables (#1753)

Add two SCSS variables:

- $swal2-close-button-font-family
- $swal2-button-focus-background-color: the default value of this variable is `null`. That means that doesn't get set until it's overridden

Both variables are used in the material-ui theme

src/scss/_core.scss

@@ -301,6 +301,7 @@
 
   &:focus {
     outline: none;
+    background-color: $swal2-button-focus-background-color;
     box-shadow: 0 0 0 2px $swal2-white, 0 0 0 4px $swal2-button-focus-outline;
   }
 
@@ -341,7 +342,7 @@
   outline: $swal2-close-button-outline;
   background: $swal2-close-button-background;
   color: $swal2-close-button-color;
-  font-family: serif;
+  font-family: $swal2-close-button-font-family;
   font-size: $swal2-close-button-font-size;
   line-height: $swal2-close-button-line-height;
   cursor: pointer;

src/variables.scss

@@ -124,6 +124,7 @@ $swal2-close-button-border-radius: 0 !default;
 $swal2-close-button-outline: initial !default;
 $swal2-close-button-background: transparent !default;
 $swal2-close-button-color: lighten($swal2-black, 80) !default;
+$swal2-close-button-font-family: serif !default;
 $swal2-close-button-font-size: 2.5em !default;
 
 // CLOSE BUTTON:HOVER
@@ -156,6 +157,7 @@ $swal2-cancel-button-font-size: 1.0625em !default;
 $swal2-button-darken-hover: rgba($swal2-black, .1) !default;
 $swal2-button-darken-active: rgba($swal2-black, .2) !default;
 $swal2-button-focus-outline: rgba(50, 100, 150, .4) !default;
+$swal2-button-focus-background-color: null !default;
 
 // TOASTS
 $swal2-toast-show-animation: swal2-toast-show .5s !default;