From a9b24f5e1f8f24dbc81420d5ee480915c13df34a Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 23 Apr 2020 22:07:32 +1000
Subject: [PATCH] Use custom properties in demo

---
 demo/src/sass/bundles/demo.scss  |  3 +++
 demo/src/sass/settings/plyr.scss | 36 +++++++++++++-------------------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/demo/src/sass/bundles/demo.scss b/demo/src/sass/bundles/demo.scss
index 2f89b858..6592013c 100644
--- a/demo/src/sass/bundles/demo.scss
+++ b/demo/src/sass/bundles/demo.scss
@@ -3,6 +3,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import '../../../../src/sass/lib/css-vars';
+$css-vars-use-native: true;
+
 // Settings
 @import '../settings/breakpoints';
 @import '../settings/colors';
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
index 575c4a6c..67bde8d3 100644
--- a/demo/src/sass/settings/plyr.scss
+++ b/demo/src/sass/settings/plyr.scss
@@ -2,25 +2,17 @@
 // Plyr Settings
 // ==========================================================================
 
-// Font sizes
-$plyr-font-size-base: 13px;
-$plyr-font-size-small: 12px;
-$plyr-font-size-time: 11px;
-$plyr-font-size-badges: 9px;
-
-// Font weight
-$plyr-font-weight-regular: 500;
-$plyr-font-weight-bold: 600;
-
-// Font smoothing
-$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;
-$plyr-font-size-captions-medium: 18px;
-$plyr-font-size-captions-large: 21px;
-$plyr-font-size-menu: $plyr-font-size-base;
+@include css-vars(
+  (
+    --plyr-color-main: $color-brand-primary,
+    --plyr-font-size-base: 13px,
+    --plyr-font-size-small: 12px,
+    --plyr-font-size-time: 11px,
+    --plyr-font-size-badges: 9px,
+    --plyr-font-size-menu: var(--plyr-font-size-base),
+    --plyr-font-weight-regular: 500,
+    --plyr-font-weight-bold: 600,
+    --plyr-font-size-captions-medium: 18px,
+    --plyr-font-size-captions-large: 21px
+  )
+);