6 files changed, 13 insertions, 24 deletions
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 23d944cb..156e9291 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -4,7 +4,6 @@
 
 $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;
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index a9846b19..060564ee 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -2,17 +2,17 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
-$plyr-video-background: var(--plyr-video-background, rgba(0,0,0,1)) !default;
+$plyr-color-main: var(--plyr-color-main, hsl(198deg 100% 50%)) !default;
+$plyr-video-background: var(--plyr-video-background, rgb(0 0 0 / 100%)) !default;
 
 // Grayscale
-$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;
+$plyr-color-gray-900: hsl(216deg 15% 16%) !default;
+$plyr-color-gray-800: hsl(216deg 15% 25%) !default;
+$plyr-color-gray-700: hsl(216deg 15% 34%) !default;
+$plyr-color-gray-600: hsl(216deg 15% 43%) !default;
+$plyr-color-gray-500: hsl(216deg 15% 52%) !default;
+$plyr-color-gray-400: hsl(216deg 15% 61%) !default;
+$plyr-color-gray-300: hsl(216deg 15% 70%) !default;
+$plyr-color-gray-200: hsl(216deg 15% 79%) !default;
+$plyr-color-gray-100: hsl(216deg 15% 88%) !default;
+$plyr-color-gray-50: hsl(216deg 15% 97%) !default;
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index da4d5dbe..a9862734 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -7,15 +7,13 @@ $plyr-control-spacing: 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-toggle-checked-background: var(
   --plyr-control-toggle-checked-background,
   var(--plyr-color-main, $plyr-color-main)
 ) !default;
-
 $plyr-video-controls-background: var(
   --plyr-video-controls-background,
-  linear-gradient(rgba(#000, 0), rgba(#000, 0.8))
+  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;
@@ -23,7 +21,6 @@ $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;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index 283a0c59..bf47837a 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -7,9 +7,7 @@ $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-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-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/sliders.scss b/src/sass/settings/sliders.scss
index 444b43da..2f5448da 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -29,7 +29,6 @@ $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
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index 17db54f2..3c79291c 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -7,14 +7,10 @@ $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-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: var(--plyr-font-smoothing, false) !default;