Styling tweaks for demo

9 files changed, 46 insertions, 25 deletions

diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 6afe98d7..279007fb 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -6,11 +6,9 @@
 .button,
 .button__count {
     align-items: center;
-    background: $color-button-background;
     border: 0;
     border-radius: $border-radius-base;
     box-shadow: 0 1px 1px rgba(#000, 0.1);
-    color: $color-button-text;
     display: inline-flex;
     padding: ($spacing-base * 0.75);
     position: relative;
@@ -21,6 +19,8 @@
 
 // Buttons
 .button {
+    background: $color-button-background;
+    color: $color-button-text;
     font-weight: $font-weight-bold;
     padding-left: ($spacing-base * 1.25);
     padding-right: ($spacing-base * 1.25);
@@ -28,7 +28,7 @@
 
     &:hover,
     &:focus {
-        color: $color-button-text-hover;
+        background: $color-button-background-hover;
 
         // Remove the underline/border
         &::after {
@@ -65,12 +65,14 @@
 // Count bubble
 .button__count {
     animation: fadein 0.2s ease;
+    background: $color-button-count-background;
+    color: $color-button-count-text;
     margin-left: ($spacing-base * 0.75);
 
     &::before {
         border: $arrow-size solid transparent;
         border-left-width: 0;
-        border-right-color: $color-button-background;
+        border-right-color: $color-button-count-background;
         content: '';
         height: 0;
         position: absolute;
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index b2930862..1d49be3a 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -12,7 +12,6 @@ button.faux-link {
 a {
     border-bottom: 1px dotted currentColor;
     color: $color-link;
-    font-weight: $font-weight-bold;
     position: relative;
     text-decoration: none;
     transition: all 0.2s ease;
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index 2bdbb762..573b4cb0 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -5,7 +5,7 @@
 // Example players
 .plyr {
     border-radius: $border-radius-base;
-    box-shadow: 0 2px 5px rgba(#000, 0.2);
+    box-shadow: 0 2px 15px rgba(#000, 0.1);
     margin: $spacing-base auto;
 
     &.plyr--audio {
@@ -27,6 +27,10 @@
 }
 
 // Style full supported player
-.plyr__cite .icon {
-    margin-right: ceil($spacing-base / 6);
+.plyr__cite {
+    color: $color-gray-5;
+
+    .icon {
+        margin-right: ceil($spacing-base / 6);
+    }
 }
diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss
index 0501c1df..b9b2d4d5 100644
--- a/demo/src/sass/layout/core.scss
+++ b/demo/src/sass/layout/core.scss
@@ -35,11 +35,10 @@ main {
 aside {
     align-items: center;
     background: #fff;
-    color: $gray;
     display: flex;
     flex-shrink: 0;
     justify-content: center;
-    padding: ($spacing-base * 0.75);
+    padding: $spacing-base;
     position: relative;
     text-align: center;
     text-shadow: none;
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
index 61363e67..308e6757 100644
--- a/demo/src/sass/settings/colors.scss
+++ b/demo/src/sass/settings/colors.scss
@@ -2,27 +2,41 @@
 // Colors
 // ==========================================================================
 
-// Greyscale
-$gray-dark: #343f4a;
-$gray: #55646b;
+// Grayscale
+$color-gray-9: hsl(210, 15%, 16%);
+$color-gray-8: lighten($color-gray-9, 9%);
+$color-gray-7: lighten($color-gray-8, 9%);
+$color-gray-6: lighten($color-gray-7, 9%);
+$color-gray-5: lighten($color-gray-6, 9%);
+$color-gray-4: lighten($color-gray-5, 9%);
+$color-gray-3: lighten($color-gray-4, 9%);
+$color-gray-2: lighten($color-gray-3, 9%);
+$color-gray-1: lighten($color-gray-2, 9%);
+$color-gray-0: lighten($color-gray-1, 9%);
 
-// Text
-$color-text: #fff;
+// Branding
+$color-brand-primary: hsl(198, 100%, 50%);
 
-// Plyr
-$color-brand-primary: #1aafff; // #7bc47f
+// Text
+$color-text: $color-gray-7;
+$color-headings: $color-brand-primary;
 
 // Brands
 $color-twitter: #4baaf4;
 
 // Elements
-$color-link: #fff;
-$color-background: $color-brand-primary;
+$color-link: $color-brand-primary;
+
+// Background
+$color-background-from: hsl(198, 100%, 94%);
+$color-background-to: hsl(198, 100%, 98%);
 
 // Buttons
-$color-button-background: #fff;
-$color-button-text: $gray;
-$color-button-text-hover: $gray-dark;
+$color-button-background: $color-brand-primary;
+$color-button-text: #fff;
+$color-button-background-hover: hsl(198, 100%, 55%);
+$color-button-count-background: #fff;
+$color-button-count-text: $color-gray-6;
 
 // Focus
 $tab-focus-default-color: #fff;
diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss
index d750efe2..84ff819f 100644
--- a/demo/src/sass/settings/cosmetic.scss
+++ b/demo/src/sass/settings/cosmetic.scss
@@ -9,4 +9,4 @@ $arrow-size: 5px;
 $border-radius-base: 4px;
 
 // Background
-$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
+$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
index ae6be636..edd917c4 100644
--- a/demo/src/sass/settings/plyr.scss
+++ b/demo/src/sass/settings/plyr.scss
@@ -14,6 +14,9 @@ $plyr-font-size-badges: 9px;
 // Other
 $plyr-font-smoothing: true;
 
+// Colors
+$plyr-color-main: $color-brand-primary;
+
 // Captions
 $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;
diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss
index 4473cb81..736d8e89 100644
--- a/demo/src/sass/type/base.scss
+++ b/demo/src/sass/type/base.scss
@@ -14,7 +14,6 @@ body {
     font-family: $font-sans-serif;
     font-weight: $font-weight-medium;
     line-height: $line-height-base;
-    text-shadow: 0 1px 1px rgba(#000, 0.15);
 }
 
 button,
diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss
index c7449efa..670619e8 100644
--- a/demo/src/sass/type/headings.scss
+++ b/demo/src/sass/type/headings.scss
@@ -4,7 +4,8 @@
 
 h1 {
     @include font-size($font-size-h1);
-    font-weight: $font-weight-medium;
+    color: $color-headings;
+    font-weight: $font-weight-bold;
     letter-spacing: $letter-spacing-headings;
     line-height: 1.2;
     margin: 0 0 ($spacing-base * 1.5);