Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.min.js.map
#	demo/index.html
#	dist/plyr.css
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs.map
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs.map
#	gulpfile.js
#	src/sass/base.scss
#	src/sass/components/control.scss
#	src/sass/settings/colors.scss
#	src/sass/settings/controls.scss

2 files changed, 8 insertions, 8 deletions

diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss
index c5acef75..a577e680 100644
--- a/src/sass/plugins/ads.scss
+++ b/src/sass/plugins/ads.scss
@@ -23,7 +23,7 @@
 
     // The countdown label
     &::after {
-        background: rgba($plyr-color-gunmetal, 0.8);
+        background: rgba($plyr-color-gray-900, 0.8);
         border-radius: 2px;
         bottom: $plyr-control-spacing;
         color: #fff;
diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/preview-thumbnails.scss
index 02a2f619..d20c9d18 100644
--- a/src/sass/plugins/previewThumbnails.scss
+++ b/src/sass/plugins/preview-thumbnails.scss
@@ -3,19 +3,19 @@
 // --------------------------------------------------------------
 
 $plyr-preview-padding: $plyr-tooltip-padding !default;
-$plyr-preview-bg: $plyr-tooltip-bg !default;
+$plyr-preview-background: $plyr-tooltip-background !default;
 $plyr-preview-radius: $plyr-tooltip-radius !default;
 $plyr-preview-shadow: $plyr-tooltip-shadow !default;
 $plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
-$plyr-preview-image-bg: $plyr-color-heather !default;
+$plyr-preview-image-background: $plyr-color-gray-200 !default;
 $plyr-preview-time-font-size: $plyr-font-size-time !default;
 $plyr-preview-time-padding: 3px 6px !default;
-$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
+$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
 $plyr-preview-time-color: #fff;
 $plyr-preview-time-bottom-offset: 6px;
 
 .plyr__preview-thumb {
-    background-color: $plyr-preview-bg;
+    background-color: $plyr-preview-background;
     border-radius: 3px;
     bottom: 100%;
     box-shadow: $plyr-preview-shadow;
@@ -38,7 +38,7 @@ $plyr-preview-time-bottom-offset: 6px;
     &::before {
         border-left: $plyr-preview-arrow-size solid transparent;
         border-right: $plyr-preview-arrow-size solid transparent;
-        border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
+        border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
         bottom: -$plyr-preview-arrow-size;
         content: '';
         height: 0;
@@ -50,7 +50,7 @@ $plyr-preview-time-bottom-offset: 6px;
     }
 
     &__image-container {
-        background: $plyr-preview-image-bg;
+        background: $plyr-preview-image-background;
         border-radius: ($plyr-preview-radius - 1px);
         overflow: hidden;
         position: relative;
@@ -77,7 +77,7 @@ $plyr-preview-time-bottom-offset: 6px;
         z-index: 3;
 
         span {
-            background-color: $plyr-preview-time-bg;
+            background-color: $plyr-preview-time-background;
             border-radius: ($plyr-preview-radius - 1px);
             color: $plyr-preview-time-color;
             font-size: $plyr-preview-time-font-size;