Prune away unnecessary sass

Gemfile.lock

@@ -81,7 +81,7 @@ GEM
     afm (0.2.2)
     airbrussh (1.5.2)
       sshkit (>= 1.6.1, != 1.7.0)
-    arclight (1.3.0)
+    arclight (1.4.0)
       blacklight (>= 8.0.0, < 9)
       gretel
       rails (~> 7.0)
@@ -326,7 +326,7 @@ GEM
     puma (6.4.2)
       nio4r (~> 2.0)
     racc (1.8.0)
-    rack (3.0.11)
+    rack (3.1.0)
     rack-session (2.0.0)
       rack (>= 3.0.0)
     rack-test (2.1.0)
@@ -379,7 +379,7 @@ GEM
       actionpack (>= 5.2)
       railties (>= 5.2)
     retriable (3.1.2)
-    rexml (3.2.9)
+    rexml (3.3.0)
       strscan
     rsolr (2.6.0)
       builder (>= 2.1.2)

app/assets/stylesheets/application.sass.scss

@@ -1,26 +1,110 @@
 // Entry point for your Sass build
 
-@import "palette";
-@import "bootstrapVariables";
+@import url("palette");
 @import "bootstrap/scss/bootstrap";
 
-$logo-image: url(StanfordLibraries-logo-whitetext.svg);
-$logo-width: 200px;
-$logo-height: 35px;
-
-$link-light-color: $stanford-white;
-$link-dark-color: $stanford-digital-blue;
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");
-$font-family-serif: "Source Serif 4", serif;
+
 :root {
+  --font-family-serif: "Source Serif 4", serif;
   --sul-link-color-rgb: 0, 108, 184; /* Digital blue #006CB8; */
-  --bs-link-color: #006cb8; /* for .btn-link */
-  --bs-link-hover-color: #006cb8; /* for .btn-link */
+  --stanford-palo-alto-dark: #014240;
+  --stanford-digital-blue: #006cb8;
+  --bs-dark-rgb: 1, 66, 64; // same as stanford-palo-alto-dark
+
+  --bs-border-radius: 0;
+  --bs-font-sans-serif: "Source Sans 3", "Source Sans Pro", "Helvetica Neue",
+    Helvetica, Arial, sans-serif;
+  --bs-link-color: var(--stanford-digital-blue); /* for .btn-link */
   --bs-link-color-rgb: var(--sul-link-color-rgb);
+  --bs-link-hover-color: var(--stanford-digital-blue); /* for .btn-link */
   --bs-link-hover-color-rgb: var(--sul-link-color-rgb);
   --bs-link-decoration: none;
   --bs-link-hover-decoration: underline;
+
+  --bs-dropdown-link-active-color: var(--stanford-palo-alto-dark);
+
+  --bs-info-text-emphasis: #002b4a;
+  --bs-info-bg-subtle: #cce2f1;
+  --bs-info-border-subtle: #99c4e3;
+
+  --bs-secondary-rgb: var(--bs-dark-rgb);
+  --btn-secondary-bg: var(--stanford-palo-alto-dark);
+  --btn-secondary-hover-bg: color-mix(
+    in srgb,
+    var(--stanford-palo-alto-dark) 85%,
+    white
+  );
+  --btn-secondary-hover-border-color: color-mix(
+    in srgb,
+    var(--stanford-palo-alto-dark) 90%,
+    white
+  );
+  --btn-secondary-active-bg: color-mix(
+    in srgb,
+    var(--stanford-palo-alto-dark) 80%,
+    white
+  );
+}
+
+.btn-dark,
+.btn-secondary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--btn-secondary-bg);
+  --bs-btn-border-color: var(--btn-secondary-bg);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
+  --bs-btn-hover-border-color: var(--btn-secondary-hover-border-color);
+  --bs-btn-focus-shadow-rgb: 39, 94, 93;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--btn-secondary-hover-border-color);
+  --bs-btn-active-border-color: var(--btn-secondary-hover-border-color);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: var(--stanford-palo-alto-dark);
+  --bs-btn-disabled-border-color: var(--stanford-palo-alto-dark);
+}
+
+.btn-secondary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--btn-secondary-bg);
+  --bs-btn-border-color: var(--btn-secondary-bg);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
+  --bs-btn-hover-border-color: var(--btn-secondary-hover-border-color);
+  --bs-btn-focus-shadow-rgb: 39, 94, 93;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--btn-secondary-hover-border-color);
+  --bs-btn-active-border-color: var(--btn-secondary-hover-border-color);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: var(--stanford-palo-alto-dark);
+  --bs-btn-disabled-border-color: var(--stanford-palo-alto-dark);
 }
+
+.btn-outline-secondary,
+.applied-filter .remove:hover {
+  --bs-btn-color: var(--btn-secondary-bg);
+  --bs-btn-border-color: var(--btn-secondary-bg);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--btn-secondary-bg);
+  --bs-btn-hover-border-color: var(--btn-secondary-bg);
+  --bs-btn-focus-shadow-rgb: 1, 66, 64;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--btn-secondary-bg);
+  --bs-btn-active-border-color: var(--btn-secondary-bg);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: var(--btn-secondary-bg);
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: var(--btn-secondary-bg);
+  --bs-gradient: none;
+}
+.navbar-dark {
+  --bs-navbar-color: #fff;
+  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
 @import "blacklight-frontend/app/assets/stylesheets/blacklight/blacklight";
 @import "arclight/app/assets/stylesheets/arclight/application";
 @import "stanfordStripe";

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

@@ -9,10 +9,6 @@
   padding-right: 20px;
   border: none;
 
-  a.btn {
-    color: $link-light-color;
-  }
-
   .card-img-top,
   .card-body {
     width: 100%;
@@ -22,9 +18,9 @@
   }
 
   .card-img-top {
-    // to make the image sizes consistent:
+    /* to make the image sizes consistent: */
     height: 230px;
-    // Crop the image to cover the specified height without changing aspect ratio
+    /* Crop the image to cover the specified height without changing aspect ratio */
     object-fit: cover;
   }
 
@@ -36,37 +32,40 @@
     }
   }
 
-  ul {
-    padding-left: 1.25rem;
-  }
-
-  li::marker {
-    color: $link-dark-color;
+  h2,
+  h3 {
+    font-weight: bold;
   }
+}
 
-  h2 {
-    font-size: calc(1.3rem + 0.6vw);
-    @include media-breakpoint-up(xxl) {
+@media (min-width: 1400px) {
+  .blacklight-landing_page,
+  .al-repositories {
+    .card h2 {
       font-size: 1.75rem;
     }
   }
+}
 
-  h2,
-  h3 {
-    font-weight: bold;
+.blacklight-landing_page {
+  ul.locations {
+    padding-left: 1.25rem;
+    li::marker {
+      color: var(--stanford-digital-blue);
+    }
   }
 }
 
 .blacklight-landing_page .card-container,
 .al-repositories .card-container {
-  // this centers the cards if there are less than 3 in a row
+  /* this centers the cards if there are less than 3 in a row */
   justify-content: center;
 }
 
 /* specific to repositories page */
 .al-repositories .card-container {
-  // this margin counteracts the negative margin on the cards to create spacing between multiple rows of card-containers.
-  // On the landing page there is only one row of card-containers so this is not needed
+  /* this margin counteracts the negative margin on the cards to create spacing between multiple rows of card-containers. */
+  /* On the landing page there is only one row of card-containers so this is not needed */
   margin-top: 2rem;
 
   &:last-child {
@@ -77,14 +76,6 @@
     margin-bottom: 2rem;
   }
 
-  // for single stacked cards on small screen
-  @include media-breakpoint-down(lg) {
-    margin-top: 0;
-    .card-col {
-      margin-top: 5rem;
-    }
-  }
-
   .card-text {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -93,3 +84,13 @@
     -webkit-box-orient: vertical;
   }
 }
+
+/* for single stacked cards on small screen */
+@media (max-width: 991.98px) {
+  .al-repositories .card-container {
+    margin-top: 0;
+    .card-col {
+      margin-top: 5rem;
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-// this css copies from bootstrap's carousel component
+/* this css copies from bootstrap's carousel component */
 .featured-item {
   position: relative;
   float: left;
@@ -18,7 +18,7 @@
   color: #fff;
 
   a {
-    color: $white;
+    color: var(--bs-white);
     font-weight: 600;
   }
 }

app/assets/stylesheets/palette.css

@@ -0,0 +1,18 @@
+:root {
+  /* https://identity.stanford.edu/design-elements/color/primary-colors/ */
+  --stanford-cardinal: #8c1515;
+  --stanford-black: #2e2d29; /* "100% black" in Stanford brand identity*/
+  --stanford-white: #ffffff;
+
+  /* https://identity.stanford.edu/design-elements/color/web/ */
+  --stanford-palo-alto-light: #2d716f;
+  --stanford-digital-red: #b1040e;
+
+  /* https://identity.stanford.edu/design-elements/color/accent-colors/ */
+  --stanford-illuminating: #fedd5c;
+
+  /* Non-Stanford identity colors */
+  --grey-lighter: #ededed;
+  --whisper: #eaeaea;
+  --green-white: #ebf5f1;
+}

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

@@ -1,16 +1,16 @@
-// Stanford Stripe
-$stanford-stripe-color: $stanford-black;
+/* Stanford Stripe */
 
 .su-brand-bar {
   width: 100%;
   height: 30px;
 }
 
 .su-brand-bar__logo {
-  color: $stanford-stripe-color;
+  --stanford-stripe-color: var(--stanford-black);
+  color: var(--stanford-stripe-color);
   display: inline-block;
   font-size: 1rem;
-  font-family: $font-family-serif;
+  font-family: var(--font-family-serif);
   font-weight: 400;
   font-variant-ligatures: discretionary-ligatures;
   font-feature-settings: "liga";
@@ -20,7 +20,7 @@ $stanford-stripe-color: $stanford-black;
   &:hover,
   &:active,
   &:focus {
-    color: $stanford-stripe-color;
+    color: var(--stanford-stripe-color);
     text-decoration: none;
   }
 }