11 files changed, 115 insertions, 111 deletions
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 7915c048..0148f570 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -2,5 +2,6 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-background: $plyr-color-gray-700 !default;
-$plyr-badge-color: #fff !default;
+$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
+$plyr-badge-color: var(--plyr-badge-color, #fff) !default;
+$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;
diff --git a/src/sass/settings/breakpoints.scss b/src/sass/settings/breakpoints.scss
index 77a5b93a..daa58f68 100644
--- a/src/sass/settings/breakpoints.scss
+++ b/src/sass/settings/breakpoints.scss
@@ -1,12 +1,9 @@
 // ==========================================================================
 // Breakpoints
+// NOTE: we can't use CSS variables for breakpoints unfortunately
+// https://www.w3.org/TR/css-variables-1/#using-variables
 // ==========================================================================
 
 $plyr-bp-sm: 480px !default;
 $plyr-bp-md: 768px !default;
 $plyr-bp-lg: 1024px !default;
-
-// Max-width media queries
-$plyr-bp-xs-max: ($plyr-bp-sm - 1);
-$plyr-bp-sm-max: ($plyr-bp-md - 1);
-$plyr-bp-md-max: ($plyr-bp-lg - 1);
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 50f577dc..85735faf 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -2,10 +2,10 @@
 // Captions
 // ==========================================================================
 
-$plyr-captions-background: rgba(#000, 0.8) !default;
-$plyr-captions-text-color: #fff !default;
+$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
+$plyr-captions-text-color: 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: var(--plyr-font-size-captions-base, $plyr-font-size-base) !default;
+$plyr-font-size-captions-small: var(--plyr-font-size-captions-small, $plyr-font-size-small) !default;
+$plyr-font-size-captions-medium: var(--plyr-font-size-captions-medium, $plyr-font-size-large) !default;
+$plyr-font-size-captions-large: var(--plyr-font-size-captions-large, $plyr-font-size-xlarge) !default;
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index 6c9b0a3f..f1364905 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -2,32 +2,16 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: hsl(198, 100%, 50%) !default;
+$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
 
 // Grayscale
-$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
-    )
-);
+$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
+$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
+$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
+$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
+$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
+$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
+$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
+$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
+$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
+$plyr-color-gray-50: hsl(216, 15%, 97%) !default;
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index a4009758..64882f4e 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -2,17 +2,31 @@
 // Controls
 // ==========================================================================
 
-$plyr-control-icon-size: 18px !default;
-$plyr-control-spacing: 10px !default;
-$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
-$plyr-control-radius: 3px !default;
+$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
+$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
+$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default;
+$plyr-control-radius: var(--plyr-control-radius, 3px) !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-background-hover: $plyr-color-main !default;
+$plyr-control-toggle-checked-background: var(
+  --plyr-control-toggle-checked-background,
+  var(--plyr-color-main, $plyr-color-main)
+) !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-background-hover: $plyr-color-main !default;
+$plyr-video-controls-background: 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-background-hover,
+  var(--plyr-color-main, $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-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;
diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss
index 80063850..3320ae7f 100644
--- a/src/sass/settings/cosmetics.scss
+++ b/src/sass/settings/cosmetics.scss
@@ -2,6 +2,4 @@
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-default-color: $plyr-color-main !default;
-
-@include css-vars((--plyr-tab-focus-default-color: $plyr-tab-focus-default-color));
+$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index 62c3dd04..bdd1eb36 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -2,9 +2,14 @@
 // Menus
 // ==========================================================================
 
-$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-500, 0.2) !default;
-$plyr-menu-border-shadow-color: #fff !default;
-$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
+$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
+
+$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
+
+$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 6px) !default;
+$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
+
+// Border seperators
+$plyr-menu-border-color: var(--plyr-menu-border-color, $plyr-color-gray-100) !default;
+$plyr-menu-border-shadow-color: var(--plyr-menu-border-shadow-color, #fff) !default;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index a0e7f755..7e76da19 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -3,9 +3,12 @@
 // ==========================================================================
 
 // Loading
-$plyr-progress-loading-size: 25px !default;
-$plyr-progress-loading-background: rgba($plyr-color-gray-900, 0.6) !default;
+$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;
 
 // Buffered
-$plyr-video-progress-buffered-background: rgba(#fff, 0.25) !default;
-$plyr-audio-progress-buffered-background: rgba($plyr-color-gray-200, 0.66) !default;
+$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
+$plyr-audio-progress-buffered-background: var(
+  --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 17740623..928a46b3 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -2,23 +2,40 @@
 // Sliders
 // ==========================================================================
 
-// Active state
-$plyr-range-thumb-active-shadow-width: 3px !default;
-
 // Thumb
-$plyr-range-thumb-height: 13px !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-900, 0.2) !default;
+$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
+$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
+$plyr-range-thumb-border: var(--plyr-range-thumb-border, 2px solid transparent) !default;
+$plyr-range-thumb-shadow: var(
+  --plyr-range-thumb-shadow,
+  0 1px 1px rgba($plyr-color-gray-900, 0.15),
+  0 0 0 1px rgba($plyr-color-gray-900, 0.2)
+) !default;
+
+// Active state
+$plyr-range-thumb-active-shadow-color: var(--plyr-range-thumb-active-shadow-color, rgba(#fff, 0.5));
+$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
 
 // Track
-$plyr-range-track-height: 5px !default;
-$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
+$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
+$plyr-range-max-height: var(
+  --plyr-range-max-height,
+  calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height})
+) !default;
 
 // Fill
-$plyr-range-fill-background: var(--plyr-color-main);
+$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
 
 // Type specific
-$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;
+$plyr-video-range-track-background: var(
+  --plyr-video-range-track-background,
+  $plyr-video-progress-buffered-background
+) !default;
+$plyr-audio-range-track-background: var(
+  --plyr-audio-range-track-background,
+  $plyr-audio-progress-buffered-background
+) !default;
+$plyr-audio-range-thumb-shadow-color: var(
+  --plyr-audio-range-thumb-shadow-color,
+  rgba($plyr-color-gray-900, 0.1)
+) !default;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
index 0ea5c582..76a9855a 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -2,9 +2,9 @@
 // Tooltips
 // ==========================================================================
 
-$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;
-$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
+$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
+$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
+$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
+$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
+$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index e9ee2671..f424ecef 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -2,35 +2,20 @@
 // Typography
 // ==========================================================================
 
-$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
-$plyr-font-size-base: 16px !default;
-$plyr-font-size-small: 14px !default;
-$plyr-font-size-large: 18px !default;
-$plyr-font-size-xlarge: 21px !default;
+$plyr-font-family: var(--plyr-font-family) !default;
+$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
+$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
+$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
+$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
 
-$plyr-font-size-time: var(--plyr-font-size-small) !default;
-$plyr-font-size-badge: 9px !default;
-$plyr-font-size-menu: var(--plyr-font-size-small) !default;
+$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
+$plyr-font-size-menu: var(--plyr-font-size-time, $plyr-font-size-small) !default;
+$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
+$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
 
-$plyr-font-weight-regular: 500 !default;
-$plyr-font-weight-bold: 600 !default;
+$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
+$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
 
-$plyr-line-height: 1.7 !default;
+$plyr-line-height: var(--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
-    )
-);