Inline sul_styles

This helps us so that we can migrate from libsass to dart sass

Gemfile

@@ -115,7 +115,6 @@ source 'https://gems.contribsys.com/' do
 end
 
 gem 'sidekiq', '~> 7.0'
-gem 'sul_styles'
 gem 'dotenv'
 gem 'riiif'
 gem 'rsolr'

Gemfile.lock

@@ -711,8 +711,6 @@ GEM
     stanford-mods (3.3.1)
       activesupport
       mods (~> 3.0, >= 3.0.3)
-    sul_styles (0.7.0)
-      rails (>= 4.1, < 8)
     test_xml (0.1.8)
       diffy (~> 3.0)
       nokogiri (>= 1.3.2)
@@ -864,7 +862,6 @@ DEPENDENCIES
   sprockets-rails
   sqlite3
   stanford-mods (~> 3.0)
-  sul_styles
   traject
   turbolinks (~> 5)
   turnout

app/assets/stylesheets/sul-styles.scss

@@ -0,0 +1,4 @@
+@import 'sul-styles/su_web_colors';
+@import 'sul-styles/su_primary_colors';
+@import 'sul-styles/variables';
+@import 'sul-styles/sul_footer';

app/assets/stylesheets/sul-styles/su_primary_colors.scss

@@ -0,0 +1,34 @@
+/*
+  Stanford Primary Colors
+  from https://identity.stanford.edu/overview/color.html
+*/
+
+// Primary Palette
+$color-cardinal-red: #8c1515;
+$color-cool-gray: #4d4f53;
+$color-black: #000;
+
+// Neutral Color Palette
+$color-pantone-467: #d2c295;
+$color-pantone-465: #b3995d;
+$color-pantone-403: #928b81;
+$color-pantone-401: #b6b1a9;
+$color-pantone-7527: #dad7cb;
+$color-pantone-5665: #c7d1c5;
+$color-pantone-445: #4d5357;
+$color-pantone-405: #5f574f;
+
+// Deep Tone Color Palette
+$color-pantone-1817: #5e3032;
+$color-pantone-7526: #8d3c1e;
+$color-pantone-3165: #00505c;
+$color-pantone-561: #175e54;
+$color-pantone-262: #53284f;
+
+// Bright Color Palette
+$color-pantone-2925: #0098db;
+$color-pantone-3145: #007c92;
+$color-pantone-334: #009b76;
+$color-pantone-7511: #b26f16;
+$color-pantone-144: #e98300;
+$color-pantone-124: #eaab00;

app/assets/stylesheets/sul-styles/su_web_colors.scss

@@ -0,0 +1,34 @@
+/*
+  Stanford Web Colors
+  from https://identity.stanford.edu/web-toolkit/color.html
+*/
+
+// Red
+$color-cardinal-red: #8c1515;
+$color-dark-red: #820000;
+
+// Black
+$color-blackish: #2e2d29;
+$color-black-80: #585754;
+
+// Warm Gray
+$color-gray: #3f3c30;
+$color-gray-90: #565347;
+$color-gray-60: #8a887d;
+
+// Sandstone
+$color-sandstone: #ddcf99;
+$color-sandstone-50: #eee6cb;
+$color-sandstone-35: #f3efd8;
+$color-sandstone-25: #f6f3e5;
+$color-sandstone-20: #f8f6ea;
+
+// Beige
+$color-beige: #9d9573;
+$color-beige-85: #aca68d;
+$color-beige-60: #c4bfa9;
+$color-beige-40: #d5d0c0;
+$color-beige-30: #e3dfd5;
+$color-beige-20: #e9e6df;
+$color-beige-10: #f2f1eb;
+$color-beige-05: #fbfbf9;

app/assets/stylesheets/sul-styles/sul_footer.scss

@@ -0,0 +1,77 @@
+#su-content {
+  padding-bottom: $footer-height !important;
+}
+
+#sul-footer-container {
+  background-color: $sul-footer-bg-color;
+  border-top: 1px solid $sul-footer-border-top-color;
+  -webkit-box-shadow: $sul-footer-shadow;
+  box-shadow: $sul-footer-shadow;
+  clear: both;
+  margin-top: -1 * $footer-height;
+  min-height: $footer-height;
+  padding: 0 !important;
+  position: relative;
+}
+
+#sul-footer {
+  display: table;
+  font-size: small;
+  height: 80px;
+  margin: 0 auto;
+  padding: 0;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+  }
+
+  li {
+    display: inline;
+    margin: 0 13px 3px 0;
+    padding: 0;
+
+    a {
+      color: $color-blackish;
+      white-space: nowrap;
+    }
+
+    a,
+    a:hover,
+    a:focus {
+      border-bottom: 1px dotted $color-gray-60;
+      text-decoration: none;
+    }
+  }
+}
+
+#sul-footer-img {
+  display: table-cell;
+  vertical-align: middle;
+  width: 162px;
+}
+
+#sul-footer-links {
+  display: table-cell;
+  padding-left: 15px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+@media (min-width: 768px) {
+  #sul-footer {
+    width: 750px;
+  }
+}
+
+@media (min-width: 980px) {
+  #sul-footer {
+    width: 970px;
+  }
+}
+
+@media (min-width: 1200px) {
+  #sul-footer {
+    width: 1170px;
+  }
+}

app/assets/stylesheets/sul-styles/variables.scss

@@ -0,0 +1,5 @@
+$sul-footer-bg-color: $color-beige-10;
+$sul-footer-border-top-color: $color-beige-20;
+$footer-height: 200px;
+$sul-footer-shadow-color: rgba(0, 0, 0, 0.2);
+$sul-footer-shadow: 0 4px 8px -8px $sul-footer-shadow-color inset;