Add blacklight-specific variables for the active facet state

... and use them in color contrast functions to derive an appropriate foreground color
projectblacklight · Feb 26, 2022 · f84095e · f84095e
1 parent 85d07c5
commit f84095e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -58,10 +58,20 @@
 }
 
 .facet-limit-active {
-  @extend .border-success;
+  border-color: $facet-active-border !important;
 
   .card-header {
-    @extend .bg-success;
+    background-color: $facet-active-bg !important;
+
+    .btn {
+      @if function-exists(color-contrast) {
+        color: color-contrast($facet-active-bg);
+      }
+
+      @if function-exists(color-yiq) {
+        color: color-yiq($facet-active-bg);
+      }
+    }
   }
 }
 

diff --git a/app/assets/stylesheets/blacklight/blacklight_defaults.scss b/app/assets/stylesheets/blacklight/blacklight_defaults.scss
@@ -10,3 +10,6 @@ $zindex-typeahead: $zindex-dropdown;
 // renders our remove icon as an emoji-sized x instead of what we see on all other platforms...
 // so, for now (until we replace it with an SVG icon or something), we get to override bootstrap:
 $remove-icon-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;
+
+$facet-active-border: $success !default;
+$facet-active-bg: $success !default;