More work on variable usage

demo/index.html

@@ -124,9 +124,9 @@
                     </span>
                 </div>
             </header>
-
             <main>
-                <div id="container" style="--plyr-color-main: #e00202">
+                <!-- style="--plyr-color-main: #47bb4d; --plyr-video-control-bg-hover: var(--plyr-color-main); " -->
+                <div id="container">
                     <video
                         controls
                         crossorigin

package.json

@@ -36,12 +36,12 @@
     },
     "devDependencies": {
         "ansi-colors": "^3.2.4",
-        "aws-sdk": "^2.422.0",
+        "aws-sdk": "^2.427.0",
-        "@babel/core": "^7.3.4",
+        "@babel/core": "^7.4.0",
-        "@babel/preset-env": "^7.3.4",
+        "@babel/preset-env": "^7.4.2",
         "babel-eslint": "^10.0.1",
         "del": "^4.0.0",
-        "eslint": "^5.15.2",
+        "eslint": "^5.15.3",
         "eslint-config-airbnb-base": "^13.1.0",
         "eslint-config-prettier": "^4.1.0",
         "eslint-plugin-import": "^2.16.0",
@@ -70,8 +70,8 @@
         "prettier-eslint": "^8.8.2",
         "prettier-stylelint": "^0.4.2",
         "remark-cli": "^6.0.1",
-        "remark-validate-links": "^8.0.1",
+        "remark-validate-links": "^8.0.2",
-        "rollup": "^1.6.0",
+        "rollup": "^1.7.3",
         "rollup-plugin-babel": "^4.3.2",
         "rollup-plugin-commonjs": "^9.2.1",
         "rollup-plugin-node-resolve": "^4.0.1",
@@ -85,7 +85,7 @@
         "through2": "^3.0.1"
     },
     "dependencies": {
-        "core-js": "^2.6.5",
+        "core-js": "^3.0.0",
         "custom-event-polyfill": "^1.0.6",
         "loadjs": "^3.6.0",
         "rangetouch": "^2.0.0",

src/sass/base.scss

@@ -7,10 +7,10 @@
     @include plyr-font-smoothing($plyr-font-smoothing);
 
     direction: ltr;
-    font-family: $plyr-font-family;
+    font-family: var(--plyr-font-family);
     font-variant-numeric: tabular-nums; // Force monosace-esque number widths
-    font-weight: $plyr-font-weight-regular;
+    font-weight: var(--plyr-font-weight-regular);
-    line-height: $plyr-line-height;
+    line-height: var(--plyr-line-height);
     max-width: 100%;
     min-width: 200px;
     position: relative;

src/sass/components/badges.scss

@@ -6,7 +6,7 @@
     background: $plyr-badge-bg;
     border-radius: 2px;
     color: $plyr-badge-color;
-    font-size: $plyr-font-size-badge;
+    font-size: var(--plyr-font-size-badge);
     line-height: 1;
     padding: 3px 4px;
 }

src/sass/components/captions.scss

@@ -56,4 +56,3 @@
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
     transform: translateY(-($plyr-control-spacing * 4));
 }
-

src/sass/components/control.scss

@@ -82,7 +82,7 @@ a.plyr__control {
     border: 0;
     border-radius: 100%;
     box-shadow: 0 1px 1px rgba(#000, 0.15);
-    color: var(--plyr-video-control-color);
+    color: var(--plyr-video-control-color-hover);
     display: none;
     left: 50%;
     padding: ceil($plyr-control-spacing * 1.5);

src/sass/lib/css-vars.scss

@@ -1,6 +1,4 @@
-// Downloaded from https://github.com/malyw/css-vars
+// Downloaded from https://github.com/malyw/css-vars (and modified)
-
-//// VARIABLES ////
 
 // global map to be filled via variables
 $css-vars: ();
@@ -9,29 +7,16 @@ $css-vars: ();
 // 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) {
+@function css-var-assign($varName: null, $varValue: null) {
-    // CHECK PARAMS
+    @return map-merge(
-    @if ($varName==null) {
+        $css-vars,
-        @error 'Variable name is expected, instead got: null';
+        (
-    }
+            $varName: $varValue,
-    @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));
 }
 
 ///
@@ -54,42 +39,28 @@ $css-vars-debug-log: false !default;
     }
 
     // PROCESS
-    $varName: nth($args, 1);
+    $var-name: nth($args, 1);
-    $varValue: map-get($css-vars, $varName);
+    $var-value: map-get($css-vars, $var-name);
-
-    @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 {
+        @if ($var-value == null) {
+            // variable is not provided so far
+            @if (length($args) == 2) {
+                $var-value: nth($args, 2);
+            }
+        }
+
         // Sass: return value from the map
-        @return $varValue;
+        @return $var-value;
     }
 }
 
-//// MIXIN ////
-
 ///
-// CSS mixin to provide variables
+// SASS mixin to provide variables
 // E.G.:
 // @include css-vars((
 //    --color: rebeccapurple,
@@ -97,35 +68,33 @@ $css-vars-debug-log: false !default;
 //    --margin-top: calc(2vh + 20px)
 // ));
 ///
-@mixin css-vars($varMap: null) {
+@mixin css-vars($var-map: null) {
     // CHECK PARAMS
-    @if ($varMap==null) {
+    @if ($var-map == null) {
         @error 'Map of variables is expected, instead got: null';
     }
-    @if (type_of($varMap) !=map) {
+    @if (type_of($var-map) != map) {
-        @error 'Map of variables is expected, instead got another type passed: #{type_of($varMap)}';
+        @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
     }
 
     // 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 {
+            @each $var-name, $var-value in $var-map {
-                @if (type_of($varValue) ==string) {
+                @if (type_of($var-value) == string) {
-                    #{$varName}: $varValue; // to prevent quotes interpolation
+                    #{$var-name}: $var-value; // to prevent quotes interpolation
                 } @else {
-                    #{$varName}: #{$varValue};
+                    #{$var-name}: #{$var-value};
                 }
             }
         }
+    } @else {
+        // Sass or debug
+        // merge variables and values to the global map (provides no output)
+        @each $var-name, $var-value in $var-map {
+            $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
+        }
     }
 }

src/sass/settings/colors.scss

@@ -2,7 +2,7 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: #1aafff !default;
+$plyr-color-main: #fff !default;
 $plyr-color-gunmetal: #2f343d !default;
 $plyr-color-fiord: #4f5b5f !default;
 $plyr-color-lynch: #6b7d85 !default;

src/sass/settings/controls.scss

@@ -9,7 +9,7 @@ $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-color-hover: #000 !default;
 $plyr-video-control-bg-hover: var(--plyr-color-main) !default;
 
 $plyr-audio-controls-bg: #fff !default;

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