Add customisation variables

sass/components/panel.sass

@@ -1,3 +1,28 @@
+$panel-item-border: 1px solid $border !default
+
+$panel-heading-background-color: $background !default
+$panel-heading-color: $text-strong !default
+$panel-heading-line-height: 1.25 !default
+$panel-heading-padding: 0.5em 0.75em !default
+$panel-heading-radius: $radius !default
+$panel-heading-size: 1.25em !default
+$panel-heading-weight: $weight-light !default
+
+$panel-tab-border-bottom: 1px solid $border !default
+$panel-tab-active-border-bottom-color: $link-active-border !default
+$panel-tab-active-color: $link-active !default
+
+$panel-list-item-color: $text !default
+$panel-list-item-hover-color: $link !default
+
+$panel-block-color: $text-strong !default
+$panel-block-hover-background-color: $background !default
+$panel-block-active-border-left-color: $link !default
+$panel-block-active-color: $link-active !default
+$panel-block-active-icon-color: $link !default
+
+$panel-icon-color: $text-light !default
+
 .panel
   font-size: $size-normal
   &:not(:last-child)
@@ -6,20 +31,20 @@
 .panel-heading,
 .panel-tabs,
 .panel-block
-  border-bottom: 1px solid $border
-  border-left: 1px solid $border
-  border-right: 1px solid $border
+  border-bottom: $panel-item-border
+  border-left: $panel-item-border
+  border-right: $panel-item-border
   &:first-child
-    border-top: 1px solid $border
+    border-top: $panel-item-border
 
 .panel-heading
-  background-color: $background
-  border-radius: $radius $radius 0 0
-  color: $text-strong
-  font-size: 1.25em
-  font-weight: $weight-light
-  line-height: 1.25
-  padding: 0.5em 0.75em
+  background-color: $panel-heading-background-color
+  border-radius: $panel-heading-radius $panel-heading-radius 0 0
+  color: $panel-heading-color
+  font-size: $panel-heading-size
+  font-weight: $panel-heading-weight
+  line-height: $panel-heading-line-height
+  padding: $panel-heading-padding
 
 .panel-tabs
   align-items: flex-end
@@ -27,23 +52,23 @@
   font-size: 0.875em
   justify-content: center
   a
-    border-bottom: 1px solid $border
+    border-bottom: $panel-tab-border-bottom
     margin-bottom: -1px
     padding: 0.5em
     // Modifiers
     &.is-active
-      border-bottom-color: $link-active-border
-      color: $link-active
+      border-bottom-color: $panel-tab-active-border-bottom-color
+      color: $panel-tab-active-color
 
 .panel-list
   a
-    color: $text
+    color: $panel-list-item-color
     &:hover
-      color: $link
+      color: $panel-list-item-hover-color
 
 .panel-block
   align-items: center
-  color: $text-strong
+  color: $panel-block-color
   display: flex
   justify-content: flex-start
   padding: 0.5em 0.75em
@@ -56,20 +81,20 @@
   &.is-wrapped
     flex-wrap: wrap
   &.is-active
-    border-left-color: $link
-    color: $link-active
+    border-left-color: $panel-block-active-border-left-color
+    color: $panel-block-active-color
     .panel-icon
-      color: $link
+      color: $panel-block-active-icon-color
 
 a.panel-block,
 label.panel-block
   cursor: pointer
   &:hover
-    background-color: $background
+    background-color: $panel-block-hover-background-color
 
 .panel-icon
   +fa(14px, 1em)
-  color: $text-light
+  color: $panel-icon-color
   margin-right: 0.75em
   .fa
     font-size: inherit