Move colors to one place

ParkingReformNetwork · Jun 30, 2024 · 2d35b95 · 2d35b95
1 parent 15ac21d
commit 2d35b95
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 22 deletions.
diff --git a/src/css/_about.scss b/src/css/_about.scss
@@ -1,13 +1,15 @@
+@use "colors";
+
 dd {
   margin-bottom: 10px;
 }
 
 div.about-text-popup {
   position: absolute;
   z-index: 2001;
-  background-color: white;
+  background-color: colors.$white;
   font-size: 18px;
-  border: 1px solid rgba(186, 186, 186, 0.7);
+  border: 1px solid colors.$gray-light-translucent;
   display: none;
   left: 10%;
   height: 60%;

diff --git a/src/css/_colors.scss b/src/css/_colors.scss
@@ -0,0 +1,7 @@
+$teal: #21ccb9;
+$gray: rgb(60, 60, 60);
+$gray-light: #4d4d4d;
+$gray-light-translucent: rgba(186, 186, 186, 0.7);
+$white: white;
+$black: black;
+$black-translucent: rgba(0, 0, 0, 0.2);
diff --git a/src/css/_header.scss b/src/css/_header.scss
@@ -1,9 +1,11 @@
+@use "colors";
+
 header {
   width: 100%;
   padding: 0.4em 1em;
 
-  background-color: #4d4d4d;
-  color: white;
+  background-color: colors.$gray-light;
+  color: colors.$white;
   font-size: 1.3em;
 
   display: flex;
@@ -15,7 +17,7 @@ header {
   cursor: pointer;
 
   svg {
-    color: white;
+    color: colors.$white;
   }
 
   .header-about-icon {
@@ -56,9 +58,9 @@ header {
 }
 
 .choices__inner {
-  border: 2px solid rgba(0, 0, 0, 0.2);
+  border: 2px solid colors.$black-translucent;
   border-radius: 10px;
-  color: black;
+  color: colors.$black;
   height: 40px;
 
   @media only screen and (min-width: 20em) {
@@ -83,5 +85,5 @@ header {
 .choices__list--dropdown,
 .choices__list[aria-expanded] {
   z-index: 1001;
-  color: black;
+  color: colors.$black;
 }
diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss
@@ -1,5 +1,4 @@
-$teal: #21ccb9;
-$gray: rgb(60, 60, 60);
+@use "colors";
 
 .popup-fixed {
   position: fixed;
@@ -29,23 +28,23 @@ div.leaflet-popup-content-wrapper div div {
 }
 
 div.leaflet-popup-content-wrapper > div > div.title {
-  color: $teal;
+  color: colors.$teal;
   font-weight: bold;
   font-size: 16px;
 }
 
 div.leaflet-popup-content-wrapper div span.details-title,
 div.leaflet-popup-content-wrapper div span.details-value {
   font-size: 14px;
-  color: black;
+  color: colors.$black;
 }
 
 div.leaflet-popup-content-wrapper span.details-value {
-  color: $teal;
+  color: colors.$teal;
 }
 
 div.leaflet-popup-content-wrapper > div > div.title {
-  color: $teal;
+  color: colors.$teal;
   font-weight: bold;
   font-size: 18px;
   display: inline-block;
@@ -63,30 +62,30 @@ div.leaflet-popup-content-wrapper > div > div.url-copy-button:hover {
 }
 
 div.leaflet-popup-content-wrapper > div > div.url-copy-button svg.fa-link {
-  color: $teal;
+  color: colors.$teal;
 }
 
 div.popup-button a {
-  background-color: $teal;
+  background-color: colors.$teal;
   padding: 10px;
   font-size: 16px;
-  color: white;
+  color: colors.$white;
   border-radius: 8px;
   font-weight: bold;
   text-decoration: none;
-  border: 1px solid $teal;
+  border: 1px solid colors.$teal;
   display: inline-block;
 }
 
 div.popup-button a:hover {
-  background-color: white;
-  color: $teal;
-  border: 1px solid $teal;
+  background-color: colors.$white;
+  color: colors.$teal;
+  border: 1px solid colors.$teal;
 }
 
 .community-tag {
   font-size: 14px;
-  color: $gray;
+  color: colors.$gray;
 }
 
 @media only screen and (max-width: 830px) {