#151, move SCSS vars to CSS vars, implement dark and light modes by browser preference

1 files changed, 8 insertions, 8 deletions

diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss
index 7802078..714de2a 100644
--- a/assets/_shortcodes.scss
+++ b/assets/_shortcodes.scss
@@ -4,13 +4,13 @@
     margin-top: $padding-16;
     margin-bottom: $padding-16;
 
-    border: $padding-1 solid $gray-200;
+    border: $padding-1 solid var(--gray-200);
     border-radius: $border-radius;
 
     overflow: hidden;
 
     .book-expand-head {
-      background: $gray-100;
+      background: var(--gray-100);
       padding: $padding-8 $padding-16;
       cursor: pointer;
     }
@@ -30,7 +30,7 @@
     margin-top: $padding-16;
     margin-bottom: $padding-16;
 
-    border: $padding-1 solid $gray-200;
+    border: $padding-1 solid var(--gray-200);
     border-radius: $border-radius;
 
     overflow: hidden;
@@ -48,19 +48,19 @@
     .book-tabs-content {
       order: 999; //Move content blocks to the end
       width: 100%;
-      border-top: $padding-1 solid $gray-100;
+      border-top: $padding-1 solid var(--gray-100);
       padding: $padding-16;
       display: none;
     }
 
     input[type="radio"]:checked + label {
-      border-bottom: $padding-1 solid $color-link;
+      border-bottom: $padding-1 solid var(--color-link);
     }
     input[type="radio"]:checked + label + .book-tabs-content {
       display: block;
     }
     input[type="radio"]:focus + label {
-      @include outline
+      @include outline;
     }
   }
 
@@ -80,10 +80,10 @@
   a.book-btn {
     display: inline-block;
     font-size: $font-size-14;
-    color: $color-link;
+    color: var(--color-link);
     line-height: $padding-16 * 2;
     padding: 0 $padding-16;
-    border: $padding-1 solid $color-link;
+    border: $padding-1 solid var(--color-link);
     border-radius: $border-radius;
     cursor: pointer;