10 files changed, 68 insertions, 33 deletions
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 5fd0c138..7915c048 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -2,5 +2,5 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-bg: $plyr-color-gray-7 !default;
+$plyr-badge-background: $plyr-color-gray-700 !default;
 $plyr-badge-color: #fff !default;
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 0c259046..50f577dc 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -2,8 +2,9 @@
 // Captions
 // ==========================================================================
 
-$plyr-captions-bg: rgba(#000, 0.8) !default;
-$plyr-captions-color: #fff !default;
+$plyr-captions-background: rgba(#000, 0.8) !default;
+$plyr-captions-text-color: #fff !default;
+
 $plyr-font-size-captions-base: $plyr-font-size-base !default;
 $plyr-font-size-captions-small: $plyr-font-size-small !default;
 $plyr-font-size-captions-medium: $plyr-font-size-large !default;
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index e3883eef..6c9b0a3f 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -5,13 +5,29 @@
 $plyr-color-main: hsl(198, 100%, 50%) !default;
 
 // Grayscale
-$plyr-color-gray-9: hsl(210, 15%, 16%);
-$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%);
-$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%);
-$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%);
-$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%);
-$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%);
-$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%);
-$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%);
-$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%);
-$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%);
+$plyr-color-gray-900: hsl(210, 15%, 16%);
+$plyr-color-gray-800: lighten($plyr-color-gray-900, 9%);
+$plyr-color-gray-700: lighten($plyr-color-gray-800, 9%);
+$plyr-color-gray-600: lighten($plyr-color-gray-700, 9%);
+$plyr-color-gray-500: lighten($plyr-color-gray-600, 9%);
+$plyr-color-gray-400: lighten($plyr-color-gray-500, 9%);
+$plyr-color-gray-300: lighten($plyr-color-gray-400, 9%);
+$plyr-color-gray-200: lighten($plyr-color-gray-300, 9%);
+$plyr-color-gray-100: lighten($plyr-color-gray-200, 9%);
+$plyr-color-gray-50: lighten($plyr-color-gray-100, 9%);
+
+@include css-vars(
+    (
+        --plyr-color-main: $plyr-color-main,
+        --plyr-color-gray-900: $plyr-color-gray-900,
+        --plyr-color-gray-800: $plyr-color-gray-800,
+        --plyr-color-gray-700: $plyr-color-gray-700,
+        --plyr-color-gray-600: $plyr-color-gray-600,
+        --plyr-color-gray-500: $plyr-color-gray-500,
+        --plyr-color-gray-400: $plyr-color-gray-400,
+        --plyr-color-gray-300: $plyr-color-gray-300,
+        --plyr-color-gray-200: $plyr-color-gray-200,
+        --plyr-color-gray-100: $plyr-color-gray-100,
+        --plyr-color-gray-50: $plyr-color-gray-50
+    )
+);
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index da9f4e58..a4009758 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -7,12 +7,12 @@ $plyr-control-spacing: 10px !default;
 $plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
 $plyr-control-radius: 3px !default;
 
-$plyr-video-controls-bg: #000 !default;
+$plyr-video-controls-background: linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) !default;
 $plyr-video-control-color: #fff !default;
 $plyr-video-control-color-hover: #fff !default;
-$plyr-video-control-bg-hover: $plyr-color-main !default;
+$plyr-video-control-background-hover: $plyr-color-main !default;
 
-$plyr-audio-controls-bg: #fff !default;
-$plyr-audio-control-color: $plyr-color-gray-7 !default;
+$plyr-audio-controls-background: #fff !default;
+$plyr-audio-control-color: $plyr-color-gray-700 !default;
 $plyr-audio-control-color-hover: #fff !default;
-$plyr-audio-control-bg-hover: $plyr-color-main !default;
+$plyr-audio-control-background-hover: $plyr-color-main !default;
diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss
index d6e4b86d..80063850 100644
--- a/src/sass/settings/cosmetics.scss
+++ b/src/sass/settings/cosmetics.scss
@@ -3,3 +3,5 @@
 // ==========================================================================
 
 $plyr-tab-focus-default-color: $plyr-color-main !default;
+
+@include css-vars((--plyr-tab-focus-default-color: $plyr-tab-focus-default-color));
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index 5e232d19..62c3dd04 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -2,9 +2,9 @@
 // Menus
 // ==========================================================================
 
-$plyr-menu-bg: rgba(#fff, 0.9) !default;
-$plyr-menu-color: $plyr-color-gray-7 !default;
+$plyr-menu-background: rgba(#fff, 0.9) !default;
+$plyr-menu-color: $plyr-color-gray-700 !default;
 $plyr-menu-arrow-size: 6px !default;
-$plyr-menu-border-color: rgba($plyr-color-gray-5, 0.2) !default;
+$plyr-menu-border-color: rgba($plyr-color-gray-500, 0.2) !default;
 $plyr-menu-border-shadow-color: #fff !default;
 $plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index 10b6ebb7..a0e7f755 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -4,8 +4,8 @@
 
 // Loading
 $plyr-progress-loading-size: 25px !default;
-$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
+$plyr-progress-loading-background: rgba($plyr-color-gray-900, 0.6) !default;
 
 // Buffered
-$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
-$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;
+$plyr-video-progress-buffered-background: rgba(#fff, 0.25) !default;
+$plyr-audio-progress-buffered-background: rgba($plyr-color-gray-200, 0.66) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index c4d239ae..17740623 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -7,18 +7,18 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
 
 // Thumb
 $plyr-range-thumb-height: 13px !default;
-$plyr-range-thumb-bg: #fff !default;
+$plyr-range-thumb-background: #fff !default;
 $plyr-range-thumb-border: 2px solid transparent !default;
-$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
+$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-900, 0.2) !default;
 
 // Track
 $plyr-range-track-height: 5px !default;
 $plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
 
 // Fill
-$plyr-range-fill-bg: $plyr-color-main !default;
+$plyr-range-fill-background: var(--plyr-color-main);
 
 // Type specific
-$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
-$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
+$plyr-video-range-track-background: $plyr-video-progress-buffered-background !default;
+$plyr-audio-range-track-background: $plyr-audio-progress-buffered-background !default;
 $plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
index 2d298ef8..0ea5c582 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -2,8 +2,8 @@
 // Tooltips
 // ==========================================================================
 
-$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
-$plyr-tooltip-color: $plyr-color-gray-7 !default;
+$plyr-tooltip-background: rgba(#fff, 0.9) !default;
+$plyr-tooltip-color: $plyr-color-gray-700 !default;
 $plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
 $plyr-tooltip-arrow-size: 4px !default;
 $plyr-tooltip-radius: 3px !default;
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index 79cb57de..e9ee2671 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -8,9 +8,9 @@ $plyr-font-size-small: 14px !default;
 $plyr-font-size-large: 18px !default;
 $plyr-font-size-xlarge: 21px !default;
 
-$plyr-font-size-time: $plyr-font-size-small !default;
+$plyr-font-size-time: var(--plyr-font-size-small) !default;
 $plyr-font-size-badge: 9px !default;
-$plyr-font-size-menu: $plyr-font-size-small !default;
+$plyr-font-size-menu: var(--plyr-font-size-small) !default;
 
 $plyr-font-weight-regular: 500 !default;
 $plyr-font-weight-bold: 600 !default;
@@ -18,3 +18,19 @@ $plyr-font-weight-bold: 600 !default;
 $plyr-line-height: 1.7 !default;
 
 $plyr-font-smoothing: false !default;
+
+@include css-vars(
+    (
+        --plyr-font-family: $plyr-font-family,
+        --plyr-font-size-base: $plyr-font-size-base,
+        --plyr-font-size-small: $plyr-font-size-small,
+        --plyr-font-size-large: $plyr-font-size-large,
+        --plyr-font-size-xlarge: $plyr-font-size-xlarge,
+        --plyr-font-size-time: $plyr-font-size-time,
+        --plyr-font-size-badge: $plyr-font-size-badge,
+        --plyr-font-size-menu: $plyr-font-size-menu,
+        --plyr-font-weight-regular: $plyr-font-weight-regular,
+        --plyr-font-weight-bold: $plyr-font-weight-bold,
+        --plyr-line-height: $plyr-line-height
+    )
+);