7 files changed, 21 insertions, 13 deletions
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 4f98c9a8..5fd0c138 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -2,5 +2,5 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-bg: $plyr-color-fiord !default;
+$plyr-badge-bg: $plyr-color-gray-7 !default;
 $plyr-badge-color: #fff !default;
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index c9ea580c..e3883eef 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -2,8 +2,16 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: #1aafff !default;
-$plyr-color-gunmetal: #2f343d !default;
-$plyr-color-fiord: #4f5b5f !default;
-$plyr-color-lynch: #6b7d85 !default;
-$plyr-color-heather: #b7c5cd !default;
+$plyr-color-main: hsl(198, 100%, 50%) !default;
+
+// Grayscale
+$plyr-color-gray-9: hsl(210, 15%, 16%);
+$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%);
+$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%);
+$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%);
+$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%);
+$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%);
+$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%);
+$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%);
+$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%);
+$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%);
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index d6d2c153..da9f4e58 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -13,6 +13,6 @@ $plyr-video-control-color-hover: #fff !default;
 $plyr-video-control-bg-hover: $plyr-color-main !default;
 
 $plyr-audio-controls-bg: #fff !default;
-$plyr-audio-control-color: $plyr-color-fiord !default;
+$plyr-audio-control-color: $plyr-color-gray-7 !default;
 $plyr-audio-control-color-hover: #fff !default;
 $plyr-audio-control-bg-hover: $plyr-color-main !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index 64df9863..420ebb03 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -3,8 +3,8 @@
 // ==========================================================================
 
 $plyr-menu-bg: rgba(#fff, 0.9) !default;
-$plyr-menu-color: $plyr-color-fiord !default;
+$plyr-menu-color: $plyr-color-gray-7 !default;
 $plyr-menu-arrow-size: 6px !default;
-$plyr-menu-border-color: $plyr-color-heather !default;
+$plyr-menu-border-color: $plyr-color-gray-2 !default;
 $plyr-menu-border-shadow-color: #fff !default;
 $plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index 074ee3c6..10b6ebb7 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -4,8 +4,8 @@
 
 // Loading
 $plyr-progress-loading-size: 25px !default;
-$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.6) !default;
+$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
 
 // Buffered
 $plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
-$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
+$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 6ac053b0..c4d239ae 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -9,7 +9,7 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
 $plyr-range-thumb-height: 13px !default;
 $plyr-range-thumb-bg: #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-gunmetal, 0.2) !default;
+$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
 
 // Track
 $plyr-range-track-height: 5px !default;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
index fd304d60..2d298ef8 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -3,7 +3,7 @@
 // ==========================================================================
 
 $plyr-tooltip-bg: rgba(#fff, 0.9) !default;
-$plyr-tooltip-color: $plyr-color-fiord !default;
+$plyr-tooltip-color: $plyr-color-gray-7 !default;
 $plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
 $plyr-tooltip-arrow-size: 4px !default;
 $plyr-tooltip-radius: 3px !default;