Merge pull request #7905 from cfpb/ans_color_vars

Financial Well-Being: Replace hardcoded hex values with color variables | Replace hardcoded ems with unit helper

cfgov/unprocessed/apps/financial-well-being/css/main.less

@@ -1,6 +1,8 @@
+@import (reference) 'cfpb-core.less';
+
 .save-links {
   padding-bottom: 15px;
-  border-bottom: 1px solid #b4b5b6;
+  border-bottom: 1px solid @gray-40;
   margin: 30px 0;
   text-align: right;
 }
@@ -14,7 +16,7 @@
 
 .score-box {
   height: 150px;
-  border-color: #101820;
+  border-color: @black;
   border-style: solid;
   position: absolute;
   top: 0;
@@ -43,9 +45,9 @@
 .spectrum_x-label {
   padding-top: 5px;
   padding-left: 5px;
-  border-left: 1px solid #b4b5b6;
+  border-left: 1px solid @gray-40;
   position: absolute;
-  font-size: 0.75em;
+  font-size: unit(12px / @base-font-size-px, em);
   list-style: none;
 }
 
@@ -79,15 +81,15 @@
 
 .comparison-chart_toggle-button {
   margin-bottom: 5px;
-  background-color: #d6e8fa;
-  color: #101820;
-  font-size: 0.875em;
+  background-color: @pacific-20;
+  color: @black;
+  font-size: unit(14px / @base-font-size-px, em);
 }
 
 .comparison-chart_toggle-button:hover,
 .comparison-chart_toggle-button:focus,
 .comparison-chart_toggle-button__selected {
-  background-color: #7eb7e8;
+  background-color: @pacific-60;
 }
 
 .comparison-chart_title {
@@ -114,7 +116,7 @@
 
 .comparison-chart_list dd {
   width: 65%;
-  border-bottom: 1px solid #b4b5b6;
+  border-bottom: 1px solid @gray-40;
   position: relative;
   bottom: 0.25em;
 }
@@ -136,10 +138,10 @@
 
 .comparison-chart_source {
   padding-top: 15px;
-  border-top: 1px solid #b4b5b6;
+  border-top: 1px solid @gray-40;
   margin-top: 30px;
-  color: #75787b;
-  font-size: 0.75em;
+  color: @gray-80;
+  font-size: unit(12px / @base-font-size-px, em);
 }
 
 /* CF Enhancements */