WIP

src/sass/components/captions.scss

@@ -10,7 +10,7 @@
 .plyr__captions {
     animation: plyr-fade-in 0.3s ease;
     bottom: 0;
-    color: $plyr-captions-color;
+    color: var(--plyr-captions-text-color);
     display: none;
     font-size: $plyr-font-size-captions-small;
     left: 0;
@@ -22,7 +22,7 @@
     width: 100%;
 
     span {
-        background: $plyr-captions-bg;
+        background: var(--plyr-captions-background);
         border-radius: 2px;
         box-decoration-break: clone;
         line-height: 185%;

src/sass/components/control.scss

@@ -5,21 +5,21 @@
 .plyr__control {
     background: transparent;
     border: 0;
-    border-radius: $plyr-control-radius;
+    border-radius: var(--plyr-control-radius);
     color: inherit;
     cursor: pointer;
     flex-shrink: 0;
     overflow: visible; // IE11
-    padding: $plyr-control-padding;
+    padding: var(--plyr-control-padding);
     position: relative;
     transition: all 0.3s ease;
 
     svg {
         display: block;
         fill: currentColor;
-        height: $plyr-control-icon-size;
+        height: var(--plyr-control-icon-size);
         pointer-events: none;
-        width: $plyr-control-icon-size;
+        width: var(--plyr-control-icon-size);
     }
 
     // Default focus
@@ -46,18 +46,18 @@
     &.plyr__tab-focus,
     &:hover,
     &[aria-expanded='true'] {
-        background: $plyr-audio-control-bg-hover;
-        color: $plyr-audio-control-color-hover;
+        background: var(--plyr-audio-control-bg-hover);
+        color: var(--plyr-audio-control-color-hover);
     }
 }
 
 // Large play button (video only)
 .plyr__control--overlaid {
-    background: rgba($plyr-video-control-bg-hover, 0.8);
+    background: var(--plyr-video-control-bg-hover);
     border: 0;
     border-radius: 100%;
     box-shadow: 0 1px 1px rgba(#000, 0.15);
-    color: $plyr-video-control-color;
+    color: var(--plyr-video-control-color);
     display: none;
     left: 50%;
     padding: ceil($plyr-control-spacing * 1.5);
@@ -67,15 +67,15 @@
     z-index: 2;
 
     svg {
-        height: $plyr-control-icon-size-large;
+        height: var(--plyr-control-icon-size-large);
         left: 2px; // Offset to make the play button look right
         position: relative;
-        width: $plyr-control-icon-size-large;
+        width: var(--plyr-control-icon-size-large);
     }
 
     &:hover,
     &:focus {
-        background: $plyr-video-control-bg-hover;
+        background: var(--plyr-video-control-bg-hover);
     }
 }
 

src/sass/lib/css-vars.scss

@@ -0,0 +1,131 @@
+// Downloaded from https://github.com/malyw/css-vars
+
+//// VARIABLES ////
+
+// global map to be filled via variables
+$css-vars: ();
+
+// the variable may be set to "true" anywhere in the code,
+// so native CSS custom properties will be used instead of the Sass global map
+$css-vars-use-native: false !default;
+
+// enables the output of debug messages
+$css-vars-debug-log: false !default;
+
+//// FUNCTIONS ////
+
+///
+// Assigns a variable to the global map
+///
+@function _cssVarAssign($varName: null, $varValue: null) {
+    // CHECK PARAMS
+    @if ($varName==null) {
+        @error 'Variable name is expected, instead got: null';
+    }
+    @if ($varValue==null) {
+        @error 'Variable value is expected, instead got: null';
+    }
+
+    // assign to the global map
+    @if ($css-vars-debug-log and map-get($css-vars, $varName)) {
+        @debug "'#{$varName}' variable is reassigned";
+    }
+
+    @return map-merge($css-vars, ($varName: $varValue));
+}
+
+///
+// Emulates var() CSS native function behavior
+//
+// $args[0] {String} "--" + variable name
+// [$args[1]] Optional default value if variable is not assigned yet
+//
+// E.G.:
+// color: var(--main-color);
+// background: var(--main-bg, green);
+///
+@function var($args...) {
+    // CHECK PARAMS
+    @if (length($args) ==0) {
+        @error 'Variable name is expected to be passed to the var() function';
+    }
+    @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
+        @error "Variable name is expected to start from '--'";
+    }
+
+    // PROCESS
+    $varName: nth($args, 1);
+    $varValue: map-get($css-vars, $varName);
+
+    @if ($css-vars-debug-log or not $css-vars-use-native) {
+        // Sass or debug
+        @if ($varValue==null) {
+            // variable is not provided so far
+            @if (length($args) ==2) {
+                // the default value is passed
+                @if ($css-vars-debug-log) {
+                    @debug "Provided default value is used for the variable: '#{$varName}'";
+                }
+                $varValue: nth($args, 2);
+            } @else if ($css-vars-debug-log) {
+                @debug "Variable '#{$varName}' is not assigned";
+                @if (not $css-vars-use-native) {
+                    @debug "The 'var(#{$varName}...)' usage will be skipped in the output CSS";
+                }
+            }
+        }
+    }
+
+    @if ($css-vars-use-native) {
+        // CSS variables
+        // Native CSS: don't process function in case of native
+        @return unquote('var(' + $args + ')');
+    } @else {
+        // Sass: return value from the map
+        @return $varValue;
+    }
+}
+
+//// MIXIN ////
+
+///
+// CSS mixin to provide variables
+// E.G.:
+// @include css-vars((
+//    --color: rebeccapurple,
+//    --height: 68px,
+//    --margin-top: calc(2vh + 20px)
+// ));
+///
+@mixin css-vars($varMap: null) {
+    // CHECK PARAMS
+    @if ($varMap==null) {
+        @error 'Map of variables is expected, instead got: null';
+    }
+    @if (type_of($varMap) !=map) {
+        @error 'Map of variables is expected, instead got another type passed: #{type_of($varMap)}';
+    }
+
+    // PROCESS
+    @if ($css-vars-debug-log or not $css-vars-use-native) {
+        // Sass or debug
+        // merge variables and values to the global map (provides no output)
+        @each $varName, $varValue in $varMap {
+            $css-vars: _cssVarAssign($varName, $varValue) !global; // store in global variable
+        }
+    }
+
+    @if ($css-vars-use-native) {
+        // CSS variables
+        // Native CSS: assign CSS custom properties to the global scope
+        @at-root :root {
+            @each $varName, $varValue in $varMap {
+                @if (type_of($varValue) ==string) {
+                    #{$varName}: $varValue; // to prevent quotes interpolation
+                } @else {
+                    #{$varName}: #{$varValue};
+                }
+            }
+        }
+    }
+}

src/sass/plyr.scss

@@ -5,6 +5,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import 'lib/css-vars';
+$css-vars-use-native: true;
+
 @import 'settings/breakpoints';
 @import 'settings/colors';
 @import 'settings/cosmetics';

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
+    )
+);

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
+    )
+);

src/sass/settings/controls.scss

@@ -11,9 +11,27 @@ $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-icon-size-large: $plyr-control-icon-size-large,
+        --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
+    )
+);

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));

src/sass/settings/sliders.scss

@@ -16,7 +16,7 @@ $plyr-range-track-height: 6px !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;