From e9e68d02f7b49d2632bb4ed127effaa192406fef Mon Sep 17 00:00:00 2001
From: Justin Coyne <jcoyne@justincoyne.com>
Date: Tue, 4 Jun 2024 17:02:01 -0700
Subject: [PATCH] Only bootstrap variables should be in the
 bootstrapVariables.scss

---
 app/assets/stylesheets/application.sass.scss  |  6 +++++
 .../stylesheets/bootstrapVariables.scss       | 22 +++++--------------
 app/assets/stylesheets/cards.scss             |  2 +-
 app/assets/stylesheets/palette.scss           |  4 +++-
 app/assets/stylesheets/stanfordStripe.scss    |  5 ++++-
 app/assets/stylesheets/sulHeader.scss         |  4 +++-
 6 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
index 95418970..9894c1d4 100644
--- a/app/assets/stylesheets/application.sass.scss
+++ b/app/assets/stylesheets/application.sass.scss
@@ -7,6 +7,12 @@
 $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+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");
+$font-family-serif: "Source Serif 4", serif;
+
 @import 'blacklight-frontend/app/assets/stylesheets/blacklight/blacklight';
 @import 'arclight/app/assets/stylesheets/arclight/application';
 @import 'stanfordStripe';
diff --git a/app/assets/stylesheets/bootstrapVariables.scss b/app/assets/stylesheets/bootstrapVariables.scss
index 54249835..01d64fd0 100644
--- a/app/assets/stylesheets/bootstrapVariables.scss
+++ b/app/assets/stylesheets/bootstrapVariables.scss
@@ -1,3 +1,5 @@
+// This file overrides variables set by Bootstrap (see https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss)
+
 // Colors
 $primary: $stanford-cardinal;
 $danger: $stanford-digital-red;
@@ -6,30 +8,18 @@ $success: $stanford-fog;
 $dark: $stanford-palo-alto-dark;
 $secondary: $stanford-palo-alto-dark;
 
+// Components
+$border-radius: 0;
+
+// Typography
 $headings-color: $stanford-white;
-$link-light-color: $stanford-white;
-$link-dark-color: $stanford-digital-blue;
 
 // Fonts
-@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");
 @import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
 $font-family-base: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-serif: "Source Serif 4", serif;
-
-// Stanford Stripe
-$stanford-stripe-color: $stanford-black;
-
-// Masthead
-$masthead-color: $stanford-white;
 
 // Navbar
 $navbar-padding-y: 0;
 $navbar-dark-color: white;
 $navbar-background-color: $stanford-black;
 $nav-link-padding-y: 0.3rem;
-
-// Landing
-$card-background-color: $grey-lighter;
-
-// Buttons
-$border-radius: 0;
diff --git a/app/assets/stylesheets/cards.scss b/app/assets/stylesheets/cards.scss
index d7f1e68d..1dc31bef 100644
--- a/app/assets/stylesheets/cards.scss
+++ b/app/assets/stylesheets/cards.scss
@@ -4,7 +4,7 @@
 .al-repositories .card {
   margin-top: 2rem;
   margin-bottom: -1.5rem;
-  background-color: $card-background-color;
+  background-color: var(--grey-lighter);
   padding-left: 20px;
   padding-right: 20px;
   border: none;
diff --git a/app/assets/stylesheets/palette.scss b/app/assets/stylesheets/palette.scss
index 46996f9b..4b88b5a8 100644
--- a/app/assets/stylesheets/palette.scss
+++ b/app/assets/stylesheets/palette.scss
@@ -27,5 +27,7 @@ $stanford-stone-light: #D4D1D1;
 // Non-Stanford identity colors
 $cyan-blue-light: #f8f9fa;
 $gray-light: #fafafa;
-$grey-lighter: #ededed;
 $green-white: #EBF5F1;
+:root {
+  --grey-lighter: #ededed;
+}
diff --git a/app/assets/stylesheets/stanfordStripe.scss b/app/assets/stylesheets/stanfordStripe.scss
index b632504a..c50ecc76 100644
--- a/app/assets/stylesheets/stanfordStripe.scss
+++ b/app/assets/stylesheets/stanfordStripe.scss
@@ -1,3 +1,6 @@
+// Stanford Stripe
+$stanford-stripe-color: $stanford-black;
+
 .su-brand-bar {
   width: 100%;
   height: 30px;
@@ -20,4 +23,4 @@
     color: $stanford-stripe-color;
     text-decoration: none;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/sulHeader.scss b/app/assets/stylesheets/sulHeader.scss
index 0b605834..90c85b76 100644
--- a/app/assets/stylesheets/sulHeader.scss
+++ b/app/assets/stylesheets/sulHeader.scss
@@ -1,3 +1,5 @@
+$masthead-color: $stanford-white;
+
 .navbar {
   --bs-navbar-hover-color: rgba(255, 255, 255, 1);
   padding-top: 0.75rem;
@@ -107,7 +109,7 @@ header .topbar > .container-fluid {
 
   > .search-autocomplete-wrapper ul li:active {
     color: $stanford-black;
-    background-color: $grey-lighter;
+    background-color: var(--grey-lighter);
   }
 }