5 files changed, 43 insertions, 6 deletions
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 0c259046..46c9cfc8 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -2,9 +2,17 @@
 // 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;
 $plyr-font-size-captions-large: $plyr-font-size-xlarge !default;
+
+@include css-vars(
+    (
+        --plyr-captions-background: $plyr-captions-background,
+        --plyr-captions-text-color: $plyr-captions-text-color
+    )
+);
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index c9ea580c..5a2f4e82 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -7,3 +7,13 @@ $plyr-color-gunmetal: #2f343d !default;
 $plyr-color-fiord: #4f5b5f !default;
 $plyr-color-lynch: #6b7d85 !default;
 $plyr-color-heather: #b7c5cd !default;
+
+@include css-vars(
+    (
+        --plyr-color-main: $plyr-color-main,
+        --plyr-color-gunmetal: $plyr-color-gunmetal,
+        --plyr-color-fiord: $plyr-color-fiord,
+        --plyr-color-lynch: $plyr-color-lynch,
+        --plyr-color-heather: $plyr-color-heather
+    )
+);
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index d6d2c153..906744b2 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -10,9 +10,26 @@ $plyr-control-radius: 3px !default;
 $plyr-video-controls-bg: #000 !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-bg-hover: var(--plyr-color-main) !default;
 
 $plyr-audio-controls-bg: #fff !default;
-$plyr-audio-control-color: $plyr-color-fiord !default;
+$plyr-audio-control-color: var(--plyr-color-fiord) !default;
 $plyr-audio-control-color-hover: #fff !default;
-$plyr-audio-control-bg-hover: $plyr-color-main !default;
+$plyr-audio-control-bg-hover: var(--plyr-color-main) !default;
+
+@include css-vars(
+    (
+        --plyr-control-icon-size: $plyr-control-icon-size,
+        --plyr-control-spacing: $plyr-control-spacing,
+        --plyr-control-padding: $plyr-control-padding,
+        --plyr-control-radius: $plyr-control-radius,
+        --plyr-video-controls-bg: $plyr-video-controls-bg,
+        --plyr-video-control-color: $plyr-video-control-color,
+        --plyr-video-control-color-hover: $plyr-video-control-color-hover,
+        --plyr-video-control-bg-hover: $plyr-video-control-bg-hover,
+        --plyr-audio-controls-bg: $plyr-audio-controls-bg,
+        --plyr-audio-control-color: $plyr-audio-control-color,
+        --plyr-audio-control-color-hover: $plyr-audio-control-color-hover,
+        --plyr-audio-control-bg-hover: $plyr-audio-control-bg-hover
+    )
+);
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/sliders.scss b/src/sass/settings/sliders.scss
index 6ac053b0..3d77f485 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -16,7 +16,7 @@ $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-bg: var(--plyr-color-main);
 
 // Type specific
 $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;