Merge pull request #717 from sul-dlss/bootstrap-variables

Only bootstrap variables should be in the bootstrapVariables.scss
sul-dlss · Jun 5, 2024 · c86b6a5 · c86b6a5
2 parents dc5e91b + e9e68d0
commit c86b6a5
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
   }
-}
+}
diff --git 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);
   }
 }