FWB: Replace hardcoded hex values with color variables

cfpb · Aug 8, 2023 · 0e61f66 · 0e61f66
1 parent 3b7d8e6
commit 0e61f66
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/cfgov/unprocessed/apps/financial-well-being/css/main.less b/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,7 +45,7 @@
 .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;
   list-style: none;
@@ -79,15 +81,15 @@
 
 .comparison-chart_toggle-button {
   margin-bottom: 5px;
-  background-color: #d6e8fa;
-  color: #101820;
+  background-color: @pacific-20;
+  color: @black;
   font-size: 0.875em;
 }
 
 .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,9 +138,9 @@
 
 .comparison-chart_source {
   padding-top: 15px;
-  border-top: 1px solid #b4b5b6;
+  border-top: 1px solid @gray-40;
   margin-top: 30px;
-  color: #75787b;
+  color: @gray-80;
   font-size: 0.75em;
 }