Merge pull request #3438 from projectblacklight/logo

Allow managing all settings from blacklight_defaults.scss via CSS variables

app/assets/stylesheets/blacklight/_facets.scss

@@ -1,6 +1,6 @@
 .sidenav {
-  --bl-facet-active-bg: #{$facet-active-bg};
-  --bl-facet-active-item-color: #{$facet-active-item-color};
+  --bl-facet-active-bg: var(--bs-success);
+  --bl-facet-active-item-color: var(--bs-success);
   --bl-facet-remove-color: var(--bs-secondary-color);
 
   .facet-toggle-button {
@@ -66,7 +66,7 @@
 .facet-limit-active {
   --bs-accordion-btn-bg: var(--bl-facet-active-bg);
   --bs-btn-hover-bg: var(--bs-accordion-btn-bg);
-  --bs-accordion-btn-color: #{color-contrast($facet-active-bg)};
+  --bs-accordion-btn-color: var(--bs-light);
   --bs-btn-hover-color: var(--bs-accordion-btn-color);
   --bs-accordion-active-color: var(--bs-accordion-btn-color);
 }

app/assets/stylesheets/blacklight/_header.scss

@@ -4,15 +4,13 @@
 
 .navbar-logo {
   /* The main logo image for the Blacklight instance */
-  @if $logo-image {
-    background: transparent $logo-image no-repeat top left;
-    background-size: $logo-width $logo-height;
-  }
-  height: $logo-height;
+  background: transparent var(--bl-logo-image) no-repeat top left;
+  background-size: var(--bl-logo-width) var(--bl-logo-height);
+  height: var(--bl-logo-height);
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
-  width: $logo-width;
+  width: var(--bl-logo-width);
 }
 
 .navbar-search {

app/assets/stylesheets/blacklight/blacklight_defaults.scss

@@ -1,17 +1,13 @@
-/* Warning! If you want to change these, just copy them into your own theme css. But you want to remove the !default, which only will set them if not already set. */
-
-$logo-image: url("blacklight/logo.png") !default;
-$logo-width: 150px !default;
-$logo-height: 50px !default;
-
-$facet-active-bg: $success !default;
-$facet-active-item-color: $success !default;
-
-/* for compatability with BS < 5.3  */
-$body-secondary-color: rgba($body-color, 0.75) !default;
-
 :root {
-  --bs-secondary-color: #{$body-secondary-color}; /* for compatability with BS < 5.3  */
+  --bl-logo-image: url("blacklight/logo.png");
+  --bl-logo-width: 150px;
+  --bl-logo-height: 50px;
+  --bs-secondary-color: rgba(
+    33,
+    37,
+    41,
+    0.75
+  ); /* for compatability with BS < 5.3  */
 
   --bl-main-padding-y: 0.5rem;