Sass-> CSS Research

src/_sass/_base.scss

@@ -15,7 +15,7 @@ a:focus {
 }
 
 blockquote {
-  background-color: $gray-light;
+  background-color: var(--gray-light);
   border-radius: $border-radius-lg;
   border-width: 0;
   padding: 2rem;
@@ -40,7 +40,7 @@ blockquote {
 figure {
   background: none;
   border: none;
-  margin-bottom: map-get($spacers, 3);
+  margin-bottom: 1rem;
 
   figcaption {
     font-style: italic;
@@ -122,20 +122,20 @@ h5,
 }
 
 .subtext {
-  color: $primary;
+  color: var(--bs-primary);
   font-size: calc(14rem / 16);
   font-weight: 500;
 }
 
 hr {
-  margin-bottom: map-get($spacers, 4);
-  margin-top: map-get($spacers, 4);
+  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
   width: 100%;
 }
 
 .youtube {
   height: 315px;
-  margin-bottom: map-get($spacers, 3);
+  margin-bottom: 1rem;
   margin-left: auto;
   margin-right: auto;
   width: 100%;

src/_sass/_utilities.scss

@@ -2,27 +2,23 @@
 $mm-dark-tan: rgb(246, 243, 237);
 
 .bg-blue-lightest {
-  background-color: $blue-lightest;
+  background-color: var(--cal-itp-background-blue);
 }
 
 .bg-dark-tan {
   background-color: $mm-dark-tan;
 }
 
-.bg-gray-light {
-  background-color: $gray-light;
-}
-
 .bg-gray-lightest {
   background-color: $gray-lightest;
 }
 
 .bg-dark-blue {
-  background-color: $dark-blue;
+  background-color: var(--cal-itp-dark-blue);
 }
 
 .bg-blue-lightest {
-  background-color: $blue-lightest;
+  background-color: var(--cal-itp-background-blue);
 }
 
 // Text
@@ -55,10 +51,10 @@ $mm-dark-tan: rgb(246, 243, 237);
 
 .btn.btn-dark-blue-inverted {
   background-color: #ffffff;
-  color: $dark-blue;
+  color: var(--cal-itp-dark-blue);
   &:hover {
     background-color: $gray-1;
-    color: $dark-blue;
+    color: var(--cal-itp-dark-blue);
   }
 }
 
@@ -110,12 +106,12 @@ $mm-dark-tan: rgb(246, 243, 237);
 // Tables
 
 .table-dark-blue {
-  background-color: $dark-blue !important;
+  background-color: var(--cal-itp-dark-blue) !important;
   box-shadow: none !important;
 }
 
 .border-dark-blue {
-  border-color: $dark-blue !important;
+  border-color: var(--cal-itp-dark-blue) !important;
 }
 
 .table-sticky-column {

src/_sass/_variables.scss

@@ -3,21 +3,14 @@
 $headings-font-family: "Raleway", sans-serif;
 $text-color: #323a45;
 $headings-color: $text-color;
-$code-color: $text-color;
 
 // Colors
 
-$blue-lightest: #f5f9fb;
-$gray-light: #d1dee3;
 $gray-lightest: #f3f3f4;
 $hover-color: #035376;
 
 // New colors from 2023 / Figma
 
-$primary: #046b99;
-$primary-black: #212121;
-$dark-blue: #225173;
-
 $gray-1: #eeeeee;
 $gray-3: #8f9399;
 $gray-4: #60656b;
@@ -30,7 +23,7 @@ $focus: #99b5fa;
 $backgroundColor: #fff;
 $headerBackgroundColor: $backgroundColor;
 $rowBorderColor: #cccccc;
-$rowHoverBackground: $blue-lightest;
+$rowHoverBackground: #f5f9fb;
 $table-border-color: $rowBorderColor;
 
 // Down arrow icon used in selects and table sorts
@@ -41,30 +34,33 @@ $custom-select-indicator: url('data:image/svg+xml,<svg width="12" height="7" vie
 // Bootstrap CSS Variable Overrides
 
 :root {
-  --bs-primary: #{$primary};
-  --bs-body-color: #{$primary-black};
-  --bs-link-color: #{$primary};
+  --bs-primary: #046b99;
+  --bs-body-color: #212121;
+  --bs-link-color: #046b99;
   --bs-body-font-family: "Poppins", sans-serif;
-  --bs-link-hover-color: #{$dark-blue};
+  --bs-link-hover-color: #225173;
+  --gray-light: #d1dee3;
+  --cal-itp-dark-blue: #225173;
+  --cal-itp-background-blue: #f5f9fb;
 }
 
 .btn-primary {
-  --bs-btn-bg: #{$primary};
-  --bs-btn-border-color: #{$primary};
-  --bs-btn-hover-bg: #{$dark-blue};
+  --bs-btn-bg: #046b99;
+  --bs-btn-border-color: #046b99;
+  --bs-btn-hover-bg: #225173;
   --bs-btn-hover-color: #ffffff;
-  --bs-btn-hover-border-color: #{$dark-blue};
-  --bs-btn-active-bg: #{$dark-blue};
-  --bs-btn-active-border-color: #{$dark-blue};
+  --bs-btn-hover-border-color: #225173;
+  --bs-btn-active-bg: #225173;
+  --bs-btn-active-border-color: #225173;
 }
 
 .btn-outline-primary {
-  --bs-btn-color: #{$primary};
-  --bs-btn-border-color: #{$primary};
+  --bs-btn-color: #046b99;
+  --bs-btn-border-color: #046b99;
 }
 
 .dropdown-menu {
   --bs-dropdown-border-radius: 0;
   --bs-dropdown-link-hover-bg: #f7f8fa;
-  --bs-dropdown-link-active-bg: #{$gray-1};
+  --bs-dropdown-link-active-bg: #eeeeee;
 }

src/_sass/components/_filterable-table.scss

@@ -1,19 +1,13 @@
-.filterable-table-container {}
-
 .filterable-table__pills {
   width: 100%;
-
-  .pill {
-    margin-bottom: map-get($spacers, 3);
-    margin-left: map-get($spacers, 2);
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
 }
-
-// These are magic numbers that probably can be replaced by some CSS magic
+.filterable-table__pills .pill {
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+}
+.filterable-table__pills .pill:first-child {
+  margin-left: 0;
+}
 .filterable-table__pills--provider-map {
   left: 15px;
   position: absolute;

src/_sass/components/_footnotes.scss

@@ -1,38 +1,30 @@
 a.footnote-link {
   color: currentColor;
   display: inline-flex;
-
-  &::before {
-    content: '[';
-  }
-
-  &::after {
-    content: ']';
-  }
-}
-
+}
+a.footnote-link::before {
+  content: "[";
+}
+a.footnote-link::after {
+  content: "]";
+}
 .footnote-listing {
   font-size: 0.85rem;
   list-style: none;
-
-  li:target {
-    background-color: yellow;
-
-    // Stupid overrides for some very invasive CA Gov styles
-    &::before {
-      height: auto;
-      margin: 0;
-    }
-  }
-
-  li {
-    position: relative;
-  }
-
-  span.footnote-number {
-    position: absolute;
-    right: 100%;
-    white-space: nowrap;
-    margin-right: .4em;
-  }
+}
+.footnote-listing li:target {
+  background-color: yellow;
+}
+.footnote-listing li:target::before {
+  height: auto;
+  margin: 0;
+}
+.footnote-listing li {
+  position: relative;
+}
+.footnote-listing span.footnote-number {
+  position: absolute;
+  right: 100%;
+  white-space: nowrap;
+  margin-right: 0.4em;
 }