Added overrides for Bootstrap styles to use CSS variables

app/assets/stylesheets/application.css.scss

@@ -45,13 +45,57 @@ $navbar-inverse-toggle-hover-bg: #512da8;
 $navbar-inverse-toggle-icon-bar-bg: #7e57c2;
 $navbar-inverse-toggle-border-color: #512da8;
 
+/**
+ SETTINGS
+ ----------------------------------------------
+ Variable definitions, tools and mixins used
+ across all styling definitions.
+ */
 
+@import
+"variables";
 
-@import "variables";
+/**
+ VENDOR
+ ----------------------------------------------
+ Imported vendor assets used by Retrospring.
+ */
 
-@import "bootstrap";
+@import
+"bootstrap",
+"font-awesome",
+"nprogress",
+"nprogress-bootstrap";
 
-@import "overrides/card";
+/**
+ OVERRIDES
+ ----------------------------------------------
+ The imports from "overrides/" define almost barely
+ any style adjustments but rather override default
+ Bootstrap behaviour.
+
+ The largest change to regular bootstrap is the switch
+ to using the available CSS variables for most elements
+ used on the site, so theming can be done with changing
+ only those.
+ */
+
+@import
+"overrides/buttons",
+"overrides/colors",
+"overrides/card",
+"overrides/links",
+"overrides/list-group",
+"overrides/navbar";
+
+/**
+ COMPONENTS
+ ----------------------------------------------
+ Custom components defined for Retrospring.
+ */
+
+@import
+"components/jumbotron";
 
 body { padding-top: 50px; }
 
@@ -60,16 +104,8 @@ body { padding-top: 50px; }
   display: none
 }
 
-@import "components/jumbotron";
-
 @import "base";
 
-@import "font-awesome";
-
-$nprogress-color: lighten($navbar-inverse-bg, 25%);
-@import 'nprogress';
-@import 'nprogress-bootstrap';
-
 .minicolors-theme-bootstrap .minicolors-swatch {
   top:           0;
   left:          0;

app/assets/stylesheets/overrides/_buttons.scss

@@ -0,0 +1,14 @@
+$colors: (
+  "primary", 
+  "danger",
+  "warning",
+  "info",
+  "success"
+);
+
+@each $color in $colors {
+  .btn-#{$color} {
+    background-color: var(--#{$color});
+    border-color: var(--#{$color});
+  }
+}

app/assets/stylesheets/overrides/_card.scss

@@ -1,8 +1,14 @@
 .card {
   margin-bottom: map-get($spacers, 3);
   box-shadow: $box-shadow-sm;
+  background-color: var(--card-bg);
 
   p:only-child {
     margin-bottom: 0;
   }
+}
+
+.card-header,
+.card-footer {
+  background-color: var(--card-cap-bg);
 }

app/assets/stylesheets/overrides/_colors.scss

@@ -0,0 +1,17 @@
+$colors: (
+  "primary", 
+  "danger",
+  "warning",
+  "info",
+  "success"
+);
+
+@each $color in $colors {
+  .bg-#{$color} {
+    background-color: var(--#{$color}) !important;
+  }
+
+  .text-#{$color} {
+    color: var(--#{$color}) !important;
+  }
+}

app/assets/stylesheets/overrides/_links.scss

@@ -0,0 +1,7 @@
+a {
+  color: var(--primary);
+
+  &:hover {
+    color: var(--primary);
+  }
+}

app/assets/stylesheets/overrides/_list-group.scss

@@ -0,0 +1,4 @@
+.list-group-item.active {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}