From 76c91180b0dfe09a1c74aef2cbca0966ffa4d120 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 18:38:24 +0200
Subject: [PATCH] Added overrides for Bootstrap styles to use CSS variables

---
 app/assets/stylesheets/application.css.scss   | 58 +++++++++++++++----
 .../stylesheets/overrides/_buttons.scss       | 14 +++++
 app/assets/stylesheets/overrides/_card.scss   |  6 ++
 app/assets/stylesheets/overrides/_colors.scss | 17 ++++++
 app/assets/stylesheets/overrides/_links.scss  |  7 +++
 .../stylesheets/overrides/_list-group.scss    |  4 ++
 6 files changed, 95 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/stylesheets/overrides/_buttons.scss
 create mode 100644 app/assets/stylesheets/overrides/_colors.scss
 create mode 100644 app/assets/stylesheets/overrides/_links.scss
 create mode 100644 app/assets/stylesheets/overrides/_list-group.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 4ea479bf..516d937c 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/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;
diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
new file mode 100644
index 00000000..2c443789
--- /dev/null
+++ b/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});
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_card.scss b/app/assets/stylesheets/overrides/_card.scss
index ef1111ae..a6f6d434 100644
--- a/app/assets/stylesheets/overrides/_card.scss
+++ b/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);
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_colors.scss b/app/assets/stylesheets/overrides/_colors.scss
new file mode 100644
index 00000000..2b25c91e
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_links.scss b/app/assets/stylesheets/overrides/_links.scss
new file mode 100644
index 00000000..34bbae92
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_links.scss
@@ -0,0 +1,7 @@
+a {
+  color: var(--primary);
+
+  &:hover {
+    color: var(--primary);
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_list-group.scss b/app/assets/stylesheets/overrides/_list-group.scss
new file mode 100644
index 00000000..a10a8df5
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_list-group.scss
@@ -0,0 +1,4 @@
+.list-group-item.active {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
\ No newline at end of file