ddplayer 1.11.1 → 25.12.1

package/src/sass/components/tooltips.scss

@@ -1,20 +1,24 @@
+@use "settings/controls";
+@use "settings/tooltips";
+@use "settings/type";
+
 // --------------------------------------------------------------
 // Tooltips
 // --------------------------------------------------------------
 
 .plyr__tooltip {
-  background: $plyr-tooltip-background;
-  border-radius: $plyr-tooltip-radius;
+  background: tooltips.$plyr-tooltip-background;
+  border-radius: tooltips.$plyr-tooltip-radius;
   bottom: 100%;
-  box-shadow: $plyr-tooltip-shadow;
-  color: $plyr-tooltip-color;
-  font-size: $plyr-font-size-small;
-  font-weight: $plyr-font-weight-regular;
+  box-shadow: tooltips.$plyr-tooltip-shadow;
+  color: tooltips.$plyr-tooltip-color;
+  font-size: type.$plyr-font-size-small;
+  font-weight: type.$plyr-font-weight-regular;
   left: 50%;
   line-height: 1.3;
-  margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
+  margin-bottom: calc(#{tooltips.$plyr-tooltip-padding} * 2);
   opacity: 0;
-  padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
+  padding: tooltips.$plyr-tooltip-padding calc(#{tooltips.$plyr-tooltip-padding} * 1.5);
   pointer-events: none;
   position: absolute;
   transform: translate(-50%, 10px) scale(0.8);
@@ -25,10 +29,10 @@
 
   // The background triangle
   &::before {
-    border-left: $plyr-tooltip-arrow-size solid transparent;
-    border-right: $plyr-tooltip-arrow-size solid transparent;
-    border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
-    bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
+    border-left: tooltips.$plyr-tooltip-arrow-size solid transparent;
+    border-right: tooltips.$plyr-tooltip-arrow-size solid transparent;
+    border-top: tooltips.$plyr-tooltip-arrow-size solid tooltips.$plyr-tooltip-background;
+    bottom: calc(#{tooltips.$plyr-tooltip-arrow-size} * -1);
     content: '';
     height: 0;
     left: 50%;
@@ -59,7 +63,7 @@
   transform-origin: 0 100%;
 
   &::before {
-    left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
+    left: calc((#{controls.$plyr-control-icon-size} / 2) + #{controls.$plyr-control-padding});
   }
 }
 
@@ -72,7 +76,7 @@
 
   &::before {
     left: auto;
-    right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
+    right: calc((#{controls.$plyr-control-icon-size} / 2) + #{controls.$plyr-control-padding});
     transform: translateX(50%);
   }
 }

package/src/sass/components/volume.scss

@@ -1,3 +1,5 @@
+@use "settings/controls";
+
 // --------------------------------------------------------------
 // Volume
 // --------------------------------------------------------------
@@ -11,8 +13,8 @@
   width: 20%;
 
   input[type='range'] {
-    margin-left: calc(#{$plyr-control-spacing} / 2);
-    margin-right: calc(#{$plyr-control-spacing} / 2);
+    margin-left: calc(#{controls.$plyr-control-spacing} / 2);
+    margin-right: calc(#{controls.$plyr-control-spacing} / 2);
     position: relative;
     z-index: 2;
   }

package/src/sass/lib/animation.scss

@@ -1,10 +1,12 @@
+@use "settings/progress";
+
 // --------------------------------------------------------------
 // Animations
 // --------------------------------------------------------------
 
 @keyframes plyr-progress {
   to {
-    background-position: $plyr-progress-loading-size 0;
+    background-position: progress.$plyr-progress-loading-size 0;
   }
 }
 

package/src/sass/lib/css-vars.scss

@@ -1,3 +1,7 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
 // Downloaded from https://github.com/malyw/css-vars (and modified)
 
 // global map to be filled via variables
@@ -11,7 +15,7 @@ $css-vars-use-native: false !default;
 // Assigns a variable to the global map
 ///
 @function css-var-assign($varName: null, $varValue: null) {
-  @return map-merge(
+  @return map.merge(
     $css-vars,
     (
       $varName: $varValue,
@@ -31,26 +35,26 @@ $css-vars-use-native: false !default;
 ///
 @function var($args...) {
   // CHECK PARAMS
-  @if (length($args) ==0) {
+  @if (list.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) != '--') {
+  @if (string.length(list.nth($args, 1)) < 2 or string.slice(list.nth($args, 1), 0, 2) != '--') {
     @error "Variable name is expected to start from '--'";
   }
 
   // PROCESS
-  $var-name: nth($args, 1);
-  $var-value: map-get($css-vars, $var-name);
+  $var-name: list.nth($args, 1);
+  $var-value: map.get($css-vars, $var-name);
 
   @if ($css-vars-use-native) {
     // CSS variables
     // Native CSS: don't process function in case of native
-    @return unquote('var(' + $args + ')');
+    @return string.unquote('var(' + $args + ')');
   } @else {
     @if ($var-value == null) {
       // variable is not provided so far
-      @if (length($args) == 2) {
-        $var-value: nth($args, 2);
+      @if (list.length($args) == 2) {
+        $var-value: list.nth($args, 2);
       }
     }
 
@@ -73,8 +77,8 @@ $css-vars-use-native: false !default;
   @if ($var-map == null) {
     @error 'Map of variables is expected, instead got: null';
   }
-  @if (type_of($var-map) != map) {
-    @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
+  @if (meta.type_of($var-map) != map) {
+    @error 'Map of variables is expected, instead got another type passed: #{meta.type_of($var, ap)}';
   }
 
   // PROCESS
@@ -83,7 +87,7 @@ $css-vars-use-native: false !default;
     // Native CSS: assign CSS custom properties to the global scope
     @at-root :root {
       @each $var-name, $var-value in $var-map {
-        @if (type_of($var-value) == string) {
+        @if (meta.type_of($var-value) == string) {
           #{$var-name}: $var-value; // to prevent quotes interpolation
         } @else {
           #{$var-name}: #{$var-value};

package/src/sass/lib/mixins.scss

@@ -1,10 +1,15 @@
+@use "settings/breakpoints";
+@use "settings/captions";
+@use "settings/cosmetics";
+@use "settings/sliders";
+
 // ==========================================================================
 // Mixins
 // ==========================================================================
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
+@mixin plyr-tab-focus($color: cosmetics.$plyr-tab-focus-color) {
   outline-color: $color;
   outline-offset: 2px;
   outline-style: dotted;
@@ -25,25 +30,25 @@
 @mixin plyr-range-track() {
   background: transparent;
   border: 0;
-  border-radius: calc(#{$plyr-range-track-height} / 2);
-  height: $plyr-range-track-height;
+  border-radius: calc(#{sliders.$plyr-range-track-height} / 2);
+  height: sliders.$plyr-range-track-height;
   transition: box-shadow 0.3s ease;
   user-select: none;
 }
 
 @mixin plyr-range-thumb() {
-  background: $plyr-range-thumb-background;
+  background: sliders.$plyr-range-thumb-background;
   border: 0;
   border-radius: 100%;
-  box-shadow: $plyr-range-thumb-shadow;
-  height: $plyr-range-thumb-height;
+  box-shadow: sliders.$plyr-range-thumb-shadow;
+  height: sliders.$plyr-range-thumb-height;
   position: relative;
   transition: all 0.2s ease;
-  width: $plyr-range-thumb-height;
+  width: sliders.$plyr-range-thumb-height;
 }
 
 @mixin plyr-range-thumb-active($color) {
-  box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
+  box-shadow: sliders.$plyr-range-thumb-shadow, 0 0 0 sliders.$plyr-range-thumb-active-shadow-width $color;
 }
 
 // Fullscreen styles
@@ -85,9 +90,9 @@
   }
 
   // Large captions in full screen on larger screens
-  @media (min-width: $plyr-bp-lg) {
+  @media (min-width: breakpoints.$plyr-bp-lg) {
     .plyr__captions {
-      font-size: $plyr-font-size-captions-large;
+      font-size: captions.$plyr-font-size-captions-large;
     }
   }
 }

package/src/sass/plugins/ads.scss

@@ -1,3 +1,7 @@
+@use "settings/colors";
+@use "settings/controls";
+@use "settings/sliders";
+
 // ==========================================================================
 // Advertisements
 // ==========================================================================
@@ -23,16 +27,16 @@
 
   // The countdown label
   &::after {
-    background: $plyr-color-gray-900;
+    background: colors.$plyr-color-gray-900;
     border-radius: 2px;
-    bottom: $plyr-control-spacing;
+    bottom: controls.$plyr-control-spacing;
     color: #fff;
     content: attr(data-badge-text);
     font-size: 11px;
     padding: 2px 6px;
     pointer-events: none;
     position: absolute;
-    right: $plyr-control-spacing;
+    right: controls.$plyr-control-spacing;
     z-index: 3;
   }
 
@@ -45,9 +49,9 @@
 .plyr__cues {
   background: currentColor;
   display: block;
-  height: $plyr-range-track-height;
+  height: sliders.$plyr-range-track-height;
   left: 0;
-  margin: -($plyr-range-track-height / 2) 0 0;
+  margin: calc(-1 * (sliders.$plyr-range-track-height / 2)) 0 0;
   opacity: 0.8;
   position: absolute;
   top: 50%;

package/src/sass/plugins/preview-thumbnails/index.scss

@@ -2,16 +2,16 @@
 // Preview Thumbnails
 // --------------------------------------------------------------
 
-@import './settings';
+@use 'settings';
 
 .plyr__preview-thumb {
-  background-color: $plyr-preview-background;
+  background-color: settings.$plyr-preview-background;
   border-radius: 3px;
   bottom: 100%;
-  box-shadow: $plyr-preview-shadow;
-  margin-bottom: calc(#{$plyr-preview-padding} * 2);
+  box-shadow: settings.$plyr-preview-shadow;
+  margin-bottom: calc(#{settings.$plyr-preview-padding} * 2);
   opacity: 0;
-  padding: $plyr-preview-radius;
+  padding: settings.$plyr-preview-radius;
   pointer-events: none;
   position: absolute;
   transform: translate(0, 10px) scale(0.8);
@@ -26,10 +26,10 @@
 
   // The background triangle
   &::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-background;
-    bottom: calc(#{$plyr-preview-arrow-size} * -1);
+    border-left: settings.$plyr-preview-arrow-size solid transparent;
+    border-right: settings.$plyr-preview-arrow-size solid transparent;
+    border-top: settings.$plyr-preview-arrow-size solid settings.$plyr-preview-background;
+    bottom: calc(#{settings.$plyr-preview-arrow-size} * -1);
     content: '';
     height: 0;
     left: 50%;
@@ -40,8 +40,8 @@
   }
 
   &__image-container {
-    background: $plyr-preview-image-background;
-    border-radius: calc(#{$plyr-preview-radius} - 1px);
+    background: settings.$plyr-preview-image-background;
+    border-radius: calc(#{settings.$plyr-preview-radius} - 1px);
     overflow: hidden;
     position: relative;
     z-index: 0;
@@ -59,7 +59,7 @@
 
   // Seek time text
   &__time-container {
-    bottom: $plyr-preview-time-bottom-offset;
+    bottom: settings.$plyr-preview-time-bottom-offset;
     left: 0;
     position: absolute;
     right: 0;
@@ -67,11 +67,11 @@
     z-index: 3;
 
     span {
-      background-color: $plyr-preview-time-background;
-      border-radius: calc(#{$plyr-preview-radius} - 1px);
-      color: $plyr-preview-time-color;
-      font-size: $plyr-preview-time-font-size;
-      padding: $plyr-preview-time-padding;
+      background-color: settings.$plyr-preview-time-background;
+      border-radius: calc(#{settings.$plyr-preview-radius} - 1px);
+      color: settings.$plyr-preview-time-color;
+      font-size: settings.$plyr-preview-time-font-size;
+      padding: settings.$plyr-preview-time-padding;
     }
   }
 }

package/src/sass/plugins/preview-thumbnails/settings.scss

@@ -1,14 +1,18 @@
+@use "settings/colors";
+@use "settings/tooltips";
+@use "settings/type";
+
 // --------------------------------------------------------------
 // Preview Thumbnails
 // --------------------------------------------------------------
 
-$plyr-preview-padding: $plyr-tooltip-padding !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-background: $plyr-color-gray-200 !default;
-$plyr-preview-time-font-size: $plyr-font-size-time !default;
+$plyr-preview-padding: tooltips.$plyr-tooltip-padding !default;
+$plyr-preview-background: tooltips.$plyr-tooltip-background !default;
+$plyr-preview-radius: tooltips.$plyr-tooltip-radius !default;
+$plyr-preview-shadow: tooltips.$plyr-tooltip-shadow !default;
+$plyr-preview-arrow-size: tooltips.$plyr-tooltip-arrow-size !default;
+$plyr-preview-image-background: colors.$plyr-color-gray-200 !default;
+$plyr-preview-time-font-size: type.$plyr-font-size-time !default;
 $plyr-preview-time-padding: 3px 6px !default;
 $plyr-preview-time-background: rgba(0, 0, 0, 0.55);
 $plyr-preview-time-color: #fff;

package/src/sass/plyr.scss

@@ -5,52 +5,51 @@
 // ==========================================================================
 @charset 'UTF-8';
 
-@import 'lib/css-vars';
+@use 'lib/css-vars';
 $css-vars-use-native: true;
 
-@import 'settings/breakpoints';
-@import 'settings/colors';
-@import 'settings/cosmetics';
-@import 'settings/type';
-
-@import 'settings/badges';
-@import 'settings/captions';
-@import 'settings/controls';
-@import 'settings/helpers';
-@import 'settings/menus';
-@import 'settings/progress';
-@import 'settings/sliders';
-@import 'settings/tooltips';
-
-@import 'lib/animation';
-@import 'lib/functions';
-@import 'lib/mixins';
-
-@import 'base';
-
-@import 'components/badges';
-@import 'components/captions';
-@import 'components/control';
-@import 'components/controls';
-@import 'components/menus';
-@import 'components/sliders';
-@import 'components/poster';
-@import 'components/times';
-@import 'components/tooltips';
-@import 'components/progress';
-@import 'components/volume';
-
-@import 'types/audio';
-@import 'types/video';
-
-@import 'states/fullscreen';
-
-@import 'plugins/ads';
-@import 'plugins/preview-thumbnails/index';
-
-@import 'utils/animation';
-@import 'utils/hidden';
-
+@use 'settings/breakpoints';
+@use 'settings/colors';
+@use 'settings/cosmetics';
+@use 'settings/type';
+
+@use 'settings/badges';
+@use 'settings/captions';
+@use 'settings/controls';
+@use 'settings/helpers';
+@use 'settings/menus';
+@use 'settings/progress';
+@use 'settings/sliders';
+@use 'settings/tooltips';
+
+@use 'lib/animation';
+@use 'lib/functions';
+@use 'lib/mixins';
+
+@use 'base';
+
+@use 'components/badges' as badges2;
+@use 'components/captions' as captions2;
+@use 'components/control';
+@use 'components/controls' as controls2;
+@use 'components/menus' as menus2;
+@use 'components/sliders' as sliders2;
+@use 'components/poster';
+@use 'components/times';
+@use 'components/tooltips' as tooltips2;
+@use 'components/progress' as progress2;
+@use 'components/volume';
+
+@use 'types/audio';
+@use 'types/video';
+
+@use 'states/fullscreen';
+
+@use 'plugins/ads';
+@use 'plugins/preview-thumbnails/index';
+
+@use 'utils/animation' as animation2;
+@use 'utils/hidden';
 
 // custom
-@import 'youtube';
+@use 'youtube';

package/src/sass/settings/badges.scss

@@ -1,7 +1,10 @@
+@use "lib/css-vars";
+@use "settings/colors";
+
 // ==========================================================================
 // Badges
 // ==========================================================================
 
-$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
-$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
-$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;
+$plyr-badge-background: css-vars.var(--plyr-badge-background, colors.$plyr-color-gray-700) !default;
+$plyr-badge-text-color: css-vars.var(--plyr-badge-text-color, #fff) !default;
+$plyr-badge-border-radius: css-vars.var(--plyr-badge-border-radius, 2px) !default;

package/src/sass/settings/captions.scss

@@ -1,11 +1,14 @@
+@use "lib/css-vars";
+@use "settings/type";
+
 // ==========================================================================
 // Captions
 // ==========================================================================
 
-$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
-$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
+$plyr-captions-background: css-vars.var(--plyr-captions-background, rgba(#000, 0.8)) !default;
+$plyr-captions-text-color: css-vars.var(--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;
+$plyr-font-size-captions-base: type.$plyr-font-size-base !default;
+$plyr-font-size-captions-small: type.$plyr-font-size-small !default;
+$plyr-font-size-captions-medium: type.$plyr-font-size-large !default;
+$plyr-font-size-captions-large: type.$plyr-font-size-xlarge !default;

package/src/sass/settings/colors.scss

@@ -1,8 +1,10 @@
+@use "lib/css-vars";
+
 // ==========================================================================
 // Colors
 // ==========================================================================
 
-$plyr-color-main: var(--plyr-color-main, #2ed573) !default;
+$plyr-color-main: css-vars.var(--plyr-color-main, #2ed573) !default;
 
 // Grayscale
 $plyr-color-gray-900: hsl(216, 15%, 16%) !default;

package/src/sass/settings/controls.scss

@@ -1,33 +1,36 @@
+@use "lib/css-vars";
+@use "settings/colors";
+
 // ==========================================================================
 // Controls
 // ==========================================================================
 
-$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
-$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
+$plyr-control-icon-size: css-vars.var(--plyr-control-icon-size, 18px) !default;
+$plyr-control-spacing: css-vars.var(--plyr-control-spacing, 10px) !default;
 $plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
-$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
-$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
+$plyr-control-padding: css-vars.var(--plyr-control-padding, $plyr-control-padding) !default;
+$plyr-control-radius: css-vars.var(--plyr-control-radius, 3px) !default;
 
-$plyr-control-toggle-checked-background: var(
+$plyr-control-toggle-checked-background: css-vars.var(
   --plyr-control-toggle-checked-background,
-  var(--plyr-color-main, $plyr-color-main)
+  css-vars.var(--plyr-color-main, colors.$plyr-color-main)
 ) !default;
 
-$plyr-video-controls-background: var(
+$plyr-video-controls-background: css-vars.var(
   --plyr-video-controls-background,
   linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
 ) !default;
-$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
-$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
-$plyr-video-control-background-hover: var(
+$plyr-video-control-color: css-vars.var(--plyr-video-control-color, #fff) !default;
+$plyr-video-control-color-hover: css-vars.var(--plyr-video-control-color-hover, #fff) !default;
+$plyr-video-control-background-hover: css-vars.var(
   --plyr-video-control-background-hover,
-  var(--plyr-color-main, $plyr-color-main)
+  css-vars.var(--plyr-color-main, colors.$plyr-color-main)
 ) !default;
 
-$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
-$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
-$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
-$plyr-audio-control-background-hover: var(
+$plyr-audio-controls-background: css-vars.var(--plyr-audio-controls-background, #fff) !default;
+$plyr-audio-control-color: css-vars.var(--plyr-audio-control-color, colors.$plyr-color-gray-700) !default;
+$plyr-audio-control-color-hover: css-vars.var(--plyr-audio-control-color-hover, #fff) !default;
+$plyr-audio-control-background-hover: css-vars.var(
   --plyr-audio-control-background-hover,
-  var(--plyr-color-main, $plyr-color-main)
+  css-vars.var(--plyr-color-main, colors.$plyr-color-main)
 ) !default;

package/src/sass/settings/cosmetics.scss

@@ -1,5 +1,8 @@
+@use "lib/css-vars";
+@use "settings/colors";
+
 // ==========================================================================
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
+$plyr-tab-focus-color: css-vars.var(--plyr-tab-focus-color, css-vars.var(--plyr-color-main, colors.$plyr-color-main)) !default;

package/src/sass/settings/menus.scss

@@ -1,15 +1,18 @@
+@use "lib/css-vars";
+@use "settings/colors";
+
 // ==========================================================================
 // Menus
 // ==========================================================================
 
-$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
-$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
-$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
-$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
-$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
+$plyr-menu-background: css-vars.var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
+$plyr-menu-radius: css-vars.var(--plyr-menu-radius, 4px) !default;
+$plyr-menu-color: css-vars.var(--plyr-menu-color, colors.$plyr-color-gray-700) !default;
+$plyr-menu-shadow: css-vars.var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
+$plyr-menu-arrow-size: css-vars.var(--plyr-menu-arrow-size, 4px) !default;
 
-$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
-$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
+$plyr-menu-item-arrow-size: css-vars.var(--plyr-menu-item-arrow-size, 4px) !default;
+$plyr-menu-item-arrow-color: css-vars.var(--plyr-menu-arrow-color, colors.$plyr-color-gray-500) !default;
 
-$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
-$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;
+$plyr-menu-back-border-color: css-vars.var(--plyr-menu-back-border-color, colors.$plyr-color-gray-100) !default;
+$plyr-menu-back-border-shadow-color: css-vars.var(--plyr-menu-back-border-shadow-color, #fff) !default;

package/src/sass/settings/progress.scss

@@ -1,14 +1,17 @@
+@use "lib/css-vars";
+@use "settings/colors";
+
 // ==========================================================================
 // Progress
 // ==========================================================================
 
 // Loading
-$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
-$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
+$plyr-progress-loading-size: css-vars.var(--plyr-progress-loading-size, 25px) !default;
+$plyr-progress-loading-background: css-vars.var(--plyr-progress-loading-background, rgba(colors.$plyr-color-gray-900, 0.6)) !default;
 
 // Buffered
-$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
-$plyr-audio-progress-buffered-background: var(
+$plyr-video-progress-buffered-background: css-vars.var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
+$plyr-audio-progress-buffered-background: css-vars.var(
   --plyr-audio-progress-buffered-background,
-  rgba($plyr-color-gray-200, 0.6)
+  rgba(colors.$plyr-color-gray-200, 0.6)
 ) !default;