footer sass vars, better parallel naming for variables

Author: PeterBreen

civictechprojects/static/css/_vars.scss

@@ -3,7 +3,8 @@
 
 //colors
 $color-orange: #f79e02; // brand
-$color-orange-darker: #de8e01; // for button hover, border, whatever
+$color-orange-dark: #de8e01; // accent/button borders
+$color-orange-light: #f7cf88; // footer button hover
 $color-green: #86c232; //confirm-role buttons
 $color-green-dark: #61892f; //tag selectors and selected tags
 $color-text-light: #ffffff;

civictechprojects/static/css/partials/_AboutProject.scss

@@ -17,7 +17,7 @@
     text-decoration: none;
   }
   a:hover {
-    color: $color-orange-darker;
+    color: $color-orange-dark;
     text-decoration: underline;
   }
 }

civictechprojects/static/css/partials/_DonateController.scss

@@ -31,13 +31,13 @@
     background: none;
   }
   &:focus {
-    box-shadow: 0 0 0 .2rem rgba($color-orange-darker, 0.5)
+    box-shadow: 0 0 0 .2rem rgba($color-orange-dark, 0.5)
   }
 }
 
 .checked .radio-button {
-  color: $color-orange-darker;
-  border-color: $color-orange-darker;
+  color: $color-orange-dark;
+  border-color: $color-orange-dark;
 }
 
 @media (min-width: 900px) {

civictechprojects/static/css/partials/_Global.scss

@@ -5,22 +5,24 @@ body {
 // footer buttons are difficult to theme in Bootstrap, so define manually
 //TODO: Sass variables
 .btn-footer {
-  background-color: #fff;
+  background-color: $color-background-light;
   color: $color-text-dark;
 }
 .btn-footer a, .btn-footer a[type="button"] {
   color: $color-text-dark;
   text-decoration: none;
 }
 .btn-footer:hover, .btn-footer:active {
-  background-color: #f7cf88;
+  background-color: $color-orange-light;
   color: $color-text-dark;
-  border-color: $color-orange-darker;
+  border-color: $color-orange-dark;
 }
 a.btn-footer:hover, a.btn-footer:active, a[type="button"].btn-footer:hover, a[type="button"].btn-footer:active  {
   text-decoration: none;
 }
+
 //Sets button states to be our specific values instead of default computed by Bootstrap
+//I don't think we're going to call these colors manually at any point so no vars here
 .btn-success:active, .btn-success:hover {
   background-color: #395e00;
 }

civictechprojects/static/css/partials/_PartnerWithUsController.scss

@@ -17,7 +17,7 @@
 }
 
 .PartnerWithUsController-sponsorAmount {
-  color: $color-orange-darker;
+  color: $color-orange-dark;
 }
 
 .PartnerWithUsController-partners {

civictechprojects/static/css/partials/_Press.scss

@@ -24,7 +24,7 @@
   font-size: 20px;
   color: $color-orange;
   &:hover {
-    color: $color-orange-darker;
+    color: $color-orange-dark;
   }
 }
 .press-presslink {

civictechprojects/static/css/partials/_ProjectTag.scss

@@ -11,7 +11,7 @@
 
 .ProjectTag-closeButton {
   align-items: center;
-  background-color: $color-orange-darker;
+  background-color: $color-orange-dark;
   border-radius: 50%;
   cursor: pointer;
   display: inline-flex;