Create a css variable for icon colors (#1543)

projectblacklight · Jun 11, 2024 · 6fb5202 · 6fb5202
1 parent 5a10b98
commit 6fb5202
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/app/assets/stylesheets/arclight/modules/icons.scss b/app/assets/stylesheets/arclight/modules/icons.scss
@@ -1,3 +1,6 @@
+:root {
+  --al-online-icon-color: #{$online-icon-color};
+}
 .toggle-bookmark,
 .breadcrumb-item,
 .document,
@@ -9,7 +12,7 @@
 }
 
 .al-online-content-icon .blacklight-icons svg {
-  fill: $online-icon-color;
+  fill: var(--al-online-icon-color);
 }
 
 .btn > .bi:first-child {

diff --git a/app/assets/stylesheets/arclight/modules/search_results.scss b/app/assets/stylesheets/arclight/modules/search_results.scss
@@ -1,3 +1,7 @@
+:root {
+  --al-content-icon-color: #{$secondary};
+}
+
 .documents-list {
   margin-bottom: $spacer;
 
@@ -43,10 +47,7 @@
 
 article.document {
   .blacklight-icons svg {
-    fill: $secondary;
-  }
-  .al-online-content-icon .blacklight-icons svg {
-    fill: $online-icon-color;
+    fill: var(--al-content-icon-color);
   }
   div.breadcrumb-links,
   dd.al-document-abstract-or-scope,