Merge pull request #4567 from sul-dlss/no-sass

Only compile sass for blacklight

app/assets/stylesheets/application.css

@@ -0,0 +1,21 @@
+@import url("variables.css");
+@import url("bootstrap-overrides.css");
+/* Override before importing Blacklight */
+@import url("blacklight.css");
+@import url("tabulator.min.css");
+@import url("tabulator_bootstrap5.min.css");
+
+@import url("argo.css");
+@import url("bulk-actions.css");
+@import url("document.css");
+@import url("document-component.css");
+@import url("icons.css");
+@import url("profile.css");
+@import url("search_results.css");
+@import url("show.css");
+@import url("layout.css");
+@import url("impersonate_groups.css");
+@import url("workflow_grid.css");
+@import url("tags-autocomplete.css");
+@import url("registration.css");
+@import url("text-extraction.css");

app/assets/stylesheets/argo.scss → app/assets/stylesheets/argo.css

@@ -1,14 +1,14 @@
-// Header color
+/* Header color */
 .stone-dark {
   --bs-dark-rgb: var(--stanford-stone-dark-rgb);
 }
 
-// Overriding blacklight to keep the border-color
+/* Overriding blacklight to keep the border-color */
 .applied-filter {
   .constraint-value {
     &:hover,
     &:active {
-      border-color: $body-color;
+      border-color: var(--bs-body-color);
     }
   }
 }
@@ -18,7 +18,7 @@
     background-color: inherit;
 
     &::before {
-      color: $text-muted;
+      color: var(--bs-secondary-color);
       content: "• ";
       left: 10px;
       position: fixed;

app/assets/stylesheets/blacklight.scss

@@ -0,0 +1,3 @@
+@import "bootstrap/scss/bootstrap";
+@import "blacklight-frontend/app/assets/stylesheets/blacklight/blacklight";
+@import "blacklight-hierarchy/app/assets/stylesheets/blacklight/hierarchy/hierarchy";

app/assets/stylesheets/bootstrap-overrides.scss → app/assets/stylesheets/bootstrap-overrides.css

@@ -1,15 +1,15 @@
-// Set color of selected facet
+/* Set color of selected facet */
 .card-header {
   background-color: var(--argo-floral-white);
 }
 
-// Override text color of selected facets
-// https://github.com/projectblacklight/blacklight/blob/abf6f24bb8e53354dc91db8520f029bee68c4a4c/app/assets/stylesheets/blacklight/_facets.scss#L146
+/* Override text color of selected facets
+https://github.com/projectblacklight/blacklight/blob/abf6f24bb8e53354dc91db8520f029bee68c4a4c/app/assets/stylesheets/blacklight/_facets.scss#L146 */
 .facet-values li .selected {
   --bs-success-rgb: var(--bs-body-color);
 }
 
-// Set border color of facets
+/* Set border color of facets */
 .facet-limit {
   border-color: var(--argo-tahuna-sands);
 }

app/assets/stylesheets/document-component.scss → app/assets/stylesheets/document-component.css

@@ -54,7 +54,7 @@
     }
   }
 
-  // For events
+  /* For events */
   table.detail {
     thead {
       border-bottom: 1px solid;

app/assets/stylesheets/document.scss → app/assets/stylesheets/document.css

@@ -13,10 +13,10 @@ dl.deflist {
 
 .errortext {
   color: red;
-  --bs-table-color: red; // override bootstrap table text color
+  --bs-table-color: red; /* override bootstrap table text color */
 }
 
 .notetext {
   color: green;
-  --bs-table-color: green; // override bootstrap table text color
+  --bs-table-color: green; /* override bootstrap table text color */
 }

app/assets/stylesheets/impersonate_groups.css

@@ -0,0 +1,4 @@
+.auth-groups {
+  margin: 0 auto;
+  width: 500px;
+}

app/assets/stylesheets/show.scss → app/assets/stylesheets/show.css

@@ -1,13 +1,13 @@
 .show-document {
-  $button-width: 11rem;
+  --button-width: 11rem;
   --external-link-button-width: 9rem;
 
   .document-header {
-    border-bottom: 1px solid $gray-300;
+    border-bottom: 1px solid var(--bs-gray-300);
   }
 
   .search-links {
-    border-bottom: $pagination-border-width solid $pagination-border-color;
+    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
     margin-bottom: 1em;
     padding-bottom: 1em;
 
@@ -45,7 +45,7 @@
 
   .argo-show-btn-group {
     .btn {
-      min-width: $button-width;
+      min-width: var(--button-width);
       margin-right: 0.5rem;
       margin-bottom: 0.5rem;
     }
@@ -87,7 +87,7 @@
     padding: 0;
 
     .resource {
-      background-color: $gray-200;
+      background-color: var(--bs-gray-200);
       padding: 1rem;
       margin-bottom: 1rem;
 
@@ -144,15 +144,13 @@
   }
 
   .table-light {
-    --bs-table-bg: #{$table-border-color};
-    @extend .header;
+    --bs-table-bg: var(--bs-border-color);
   }
 
   .caption-header > caption {
+    --bs-secondary-color: var(--bs-body-color);
     caption-side: top;
-    @extend .header;
     background-color: var(--bs-table-border-color);
-    color: $body-color;
   }
 
   #filehierarchy {

app/assets/stylesheets/variables.css

@@ -0,0 +1,14 @@
+:root {
+  /* Stanford colors that are not defined in the component library */
+  --stanford-illuminating-light: #ffe781;
+  --stanford-sky-light: #67afd2;
+  --stanford-bay-light: #8ab8a7;
+  --stanford-60-black: #767674;
+  --stanford-stone-dark-rgb: 84, 73, 72;
+  --stanford-poppy-light: #f9a44a;
+  --stanford-palo-verde-light: #59b3a9;
+
+  /* non-standard colors (not part of Stanford's palette) */
+  --argo-floral-white: #f9f6ef;
+  --argo-tahuna-sands: #d2c295;
+}

app/assets/stylesheets/workflow_grid.scss → app/assets/stylesheets/workflow_grid.css

@@ -1,8 +1,4 @@
 .workflow-grid-table {
-  .zero {
-    @extend .text-muted;
-  }
-
   table {
     counter-reset: rowNumber;
   }
@@ -18,14 +14,9 @@
   }
 }
 
-// reset button
+/* reset button */
 .errors {
   form {
     display: inline-block;
   }
-
-  .btn {
-    @extend .p-0;
-    @extend .text-danger;
-  }
 }

app/components/show/agreement/details_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 caption-header border">
-    <caption>Details</caption>
+    <caption class="header">Details</caption>
     <tbody>
       <tr>
         <th class="col-3" scope="row">Object type</th>

app/components/show/agreement/overview_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 caption-header border">
-    <caption>Overview</caption>
+    <caption class="header">Overview</caption>
     <tbody>
       <tr>
         <th class="col-3" scope="row">DRUID</th>

app/components/show/apo/default_object_rights_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 caption-header border">
-    <caption>Default object rights</caption>
+    <caption class="header">Default object rights</caption>
     <tbody>
       <tr>
         <th class="col-3" scope="row">Access rights</th>

app/components/show/apo/details_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 caption-header border">
-    <caption>Details</caption>
+    <caption class="header">Details</caption>
     <tbody>
       <tr>
         <th class="col-3" scope="row">Created</th>

app/components/show/apo/overview_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 caption-header border">
-    <caption>Overview</caption>
+    <caption class="header">Overview</caption>
     <tbody>
       <tr>
         <th class="col-3" scope="row">DRUID</th>

app/components/show/apo/roles_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 border">
-    <thead class="table-light">
+    <thead class="table-light header">
       <tr>
         <th>Group name</th>
         <th>Role</th>

app/components/show/collection/details_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 caption-header border">
-    <caption>Details</caption>
+    <caption class="header">Details</caption>
     <tbody>
       <tr>
         <th class="col-3" scope="row">Object type</th>

app/components/show/collection/overview_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 caption-header border">
-    <caption>Overview</caption>
+    <caption class="header">Overview</caption>
     <tbody>
       <tr>
         <th class="col-3" scope="row">DRUID</th>

app/components/show/external_links_component.rb

@@ -19,7 +19,7 @@ def purl_link
     end
 
     def searchworks_link
-      return tag.span('SearchWorks', class: 'external-link-button disabled btn') unless released_to_searchworks?
+      return tag.span('SearchWorks', class: 'external-link-button disabled btn btn-outline-primary') unless released_to_searchworks?
 
       id = document.catalog_record_id.presence || document.druid
       url = Kernel.format(Settings.searchworks_url, id:)

app/components/show/item/details_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 caption-header border">
-    <caption>Details</caption>
+    <caption class="header">Details</caption>
     <tbody>
       <tr>
         <th class="col-3" scope="row">Object type</th>

app/components/show/item/overview_component.html.erb

@@ -1,5 +1,5 @@
 <table class="table table-sm mb-5 caption-header border">
-    <caption>Overview</caption>
+    <caption class="header">Overview</caption>
     <tbody>
       <tr>
         <th class="col-3" scope="row">DRUID</th>

app/components/top_navbar_component.html.erb

@@ -37,7 +37,7 @@
           <hr>
           <% if session[:groups].present? %>
             <li class='dropdown nav-item d-md-none'>
-              <a href='#' class='dropdown-toggle impersonating nav-link' data-bs-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>
+              <a href='#' class='dropdown-toggle impersonating link-warning nav-link' data-bs-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>
                 Impersonating: <%= session[:groups].join(' ') %>
                 <span class='caret'></span>
               </a>

app/components/workflow_table_process_component.rb

@@ -25,7 +25,7 @@ def workflow_item_count(status)
     if data[process] && data[process][status] && (item = data[process][status][:_])
       item_count = item.hits
     end
-    item_count = tag.span item_count, class: 'zero' if item_count.zero?
+    item_count = tag.span item_count, class: 'text-body-secondary' if item_count.zero?
     link_to(item_count, new_params)
   end
 
@@ -74,7 +74,7 @@ def workflow_reset_link(status = 'error')
                                reset_step: process
                              )
 
-    raw " | #{button_to('reset', report_reset_path(new_params), class: 'btn btn-link')}"
+    raw " | #{button_to('reset', report_reset_path(new_params), class: 'btn btn-link p-0 text-danger')}"
   end
 
   delegate :blacklight_config, to: :search_state

config/initializers/assets.rb

@@ -6,7 +6,7 @@
 # Rails.application.config.assets.version = '1.0'
 
 # Add additional assets to the asset load path.
-# Rails.application.config.assets.paths << Emoji.images_path
+Rails.application.config.assets.paths << Rails.root.join('node_modules/tabulator-tables/dist/css')
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets

package.json

@@ -25,7 +25,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "esbuild app/javascript/*.* --bundle --inject:app/javascript/jquery-shim.js --define:global=window --outdir=app/assets/builds",
-    "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules",
+    "build:css": "sass ./app/assets/stylesheets/blacklight.scss ./app/assets/builds/blacklight.css --no-source-map --load-path=node_modules",
     "lint": "standard app/javascript/**/*.js",
     "lint_fix": "standard --fix app/javascript/**/*.js"
   }

public/sul-components/v2024-07-30/styles/header.css

@@ -43,10 +43,6 @@
   .navbar-nav {
     --bs-nav-link-font-weight: 700;
 
-    li.active a {
-      color: $navbar-dark-color;
-    }
-
     li {
       display: inline-block;
       position: relative;