More work on custom properties and documentation

16 files changed, 63 insertions, 67 deletions

diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index 83d045a6..3acb3cc4 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -5,7 +5,7 @@
 .plyr__badge {
   background: $plyr-badge-background;
   border-radius: $plyr-badge-border-radius;
-  color: $plyr-badge-color;
+  color: $plyr-badge-text-color;
   font-size: $plyr-font-size-badge;
   line-height: 1;
   padding: 3px 4px;
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index eb3c9389..2acab086 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -19,21 +19,6 @@
   transition: transform 0.4s ease-in-out;
   width: 100%;
 
-  .plyr__caption {
-    background: $plyr-captions-background;
-    border-radius: 2px;
-    box-decoration-break: clone;
-    color: $plyr-captions-text-color;
-    line-height: 185%;
-    padding: 0.2em 0.5em;
-    white-space: pre-wrap;
-
-    // Firefox adds a <div> when using getCueAsHTML()
-    div {
-      display: inline;
-    }
-  }
-
   span:empty {
     display: none;
   }
@@ -56,3 +41,18 @@
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
   transform: translateY(calc(#{$plyr-control-spacing} * -4));
 }
+
+.plyr__caption {
+  background: $plyr-captions-background;
+  border-radius: 2px;
+  box-decoration-break: clone;
+  color: $plyr-captions-text-color;
+  line-height: 185%;
+  padding: 0.2em 0.5em;
+  white-space: pre-wrap;
+
+  // Firefox adds a <div> when using getCueAsHTML()
+  div {
+    display: inline;
+  }
+}
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 49cec6f5..fccf303e 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -44,12 +44,12 @@
 
     // Arrow
     &::after {
-      border: 4px solid transparent;
+      border: $plyr-menu-arrow-size solid transparent;
       border-top-color: $plyr-menu-background;
       content: '';
       height: 0;
       position: absolute;
-      right: 15px;
+      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
       top: 100%;
       width: 0;
     }
@@ -87,7 +87,7 @@
       }
 
       &::after {
-        border: 4px solid transparent;
+        border: $plyr-menu-item-arrow-size solid transparent;
         content: '';
         position: absolute;
         top: 50%;
@@ -98,8 +98,8 @@
         padding-right: calc(#{$plyr-control-padding} * 4);
 
         &::after {
-          border-left-color: $plyr-menu-arrow-color;
-          right: 5px;
+          border-left-color: $plyr-menu-item-arrow-color;
+          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &.plyr__tab-focus::after,
@@ -117,13 +117,13 @@
         width: calc(100% - (#{$plyr-control-padding} * 2));
 
         &::after {
-          border-right-color: $plyr-menu-arrow-color;
-          left: $plyr-control-padding;
+          border-right-color: $plyr-menu-item-arrow-color;
+          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &::before {
-          background: $plyr-menu-border-color;
-          box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+          background: $plyr-menu-back-border-color;
+          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
           content: '';
           height: 1px;
           left: 0;
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index b7872bcb..b90e7229 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -8,10 +8,10 @@
   background: transparent;
   border: 0;
   border-radius: calc(#{$plyr-range-thumb-height} * 2);
-  // color is used in JS to populate lower fill for WebKit
+  // `color` property is used in JS to populate lower fill for WebKit
   color: $plyr-range-fill-background;
   display: block;
-  height: $plyr-range-max-height;
+  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
   margin: 0;
   padding: 0;
   transition: box-shadow 0.3s ease;
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index 9186fec6..cbb8cc78 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -4,7 +4,7 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
+@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
   outline-color: $color;
   outline-offset: 2px;
   outline-style: dotted;
@@ -17,9 +17,6 @@
   @if $mode {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-  } @else {
-    -moz-osx-font-smoothing: auto;
-    -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -45,7 +42,7 @@
   width: $plyr-range-thumb-height;
 }
 
-@mixin plyr-range-thumb-active($color: $plyr-range-thumb-active-shadow-color) {
+@mixin plyr-range-thumb-active($color) {
   box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
 }
 
diff --git a/src/sass/plugins/preview-thumbnails/index.scss b/src/sass/plugins/preview-thumbnails/index.scss
index 6a0382d0..7a9eb991 100644
--- a/src/sass/plugins/preview-thumbnails/index.scss
+++ b/src/sass/plugins/preview-thumbnails/index.scss
@@ -2,7 +2,7 @@
 // Preview Thumbnails
 // --------------------------------------------------------------
 
-@import './settings.scss';
+@import './settings';
 
 .plyr__preview-thumb {
   background-color: $plyr-preview-background;
@@ -68,7 +68,7 @@
 
     span {
       background-color: $plyr-preview-time-background;
-      border-radius: ($plyr-preview-radius - 1px);
+      border-radius: calc(#{$plyr-preview-radius} - 1px);
       color: $plyr-preview-time-color;
       font-size: $plyr-preview-time-font-size;
       padding: $plyr-preview-time-padding;
@@ -84,6 +84,7 @@
   margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
   opacity: 0;
   overflow: hidden;
+  pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 0148f570..e56da1f8 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -3,5 +3,5 @@
 // ==========================================================================
 
 $plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
-$plyr-badge-color: var(--plyr-badge-color, #fff) !default;
+$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
 $plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 85735faf..23d944cb 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -5,7 +5,7 @@
 $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: 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;
+$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;
diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss
index 3320ae7f..4fc10de5 100644
--- a/src/sass/settings/cosmetics.scss
+++ b/src/sass/settings/cosmetics.scss
@@ -2,4 +2,4 @@
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default;
+$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index bdd1eb36..283a0c59 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -3,13 +3,13 @@
 // ==========================================================================
 
 $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-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !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-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;
+$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;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index 7e76da19..4e5105f0 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -10,5 +10,5 @@ $plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba(
 $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)
+  rgba($plyr-color-gray-200, 0.6)
 ) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 928a46b3..444b43da 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -5,7 +5,6 @@
 // Thumb
 $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),
@@ -13,15 +12,10 @@ $plyr-range-thumb-shadow: var(
 ) !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: 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-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
@@ -31,11 +25,16 @@ $plyr-video-range-track-background: var(
   --plyr-video-range-track-background,
   $plyr-video-progress-buffered-background
 ) !default;
+$plyr-video-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba(#fff, 0.5)
+) !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,
+$plyr-audio-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-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 76a9855a..629e9358 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -7,4 +7,4 @@ $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;
+$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index f424ecef..17db54f2 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -2,20 +2,19 @@
 // Typography
 // ==========================================================================
 
-$plyr-font-family: var(--plyr-font-family) !default;
+$plyr-font-family: var(--plyr-font-family, inherit) !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-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-size-badge: var(--plyr-font-size-badge, 9px) !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: var(--plyr-line-height, 1.7) !default;
 
-$plyr-font-smoothing: false !default;
+$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;
diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss
index 154d1ce9..a44244c9 100644
--- a/src/sass/types/audio.scss
+++ b/src/sass/types/audio.scss
@@ -42,15 +42,15 @@
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-      @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-      @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-      @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
   }
 }
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
index c18c1b45..0cfaeacb 100644
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@@ -144,15 +144,15 @@ $embed-padding: ((100 / 16) * 9);
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-      @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-      @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-      @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
   }
 }