Merge pull request #2093 from GSA/2074-update-usagov-colors

PXBF-2074-update-usagov-colors: updated color adjustments
GSA · Feb 6, 2025 · ad6a0c4 · ad6a0c4
2 parents 05a7299 + fb5b670
commit ad6a0c4
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 12 deletions.
diff --git a/benefit-finder/src/App/_index.scss b/benefit-finder/src/App/_index.scss
@@ -1,7 +1,7 @@
 @use '../shared/styles/colors/index.scss' as color;
 
 html {
-  background-color: color.$officer-navy;
+  background-color: color.$dark-blue;
   height: 100%;
   min-height: 100vh;
 }
diff --git a/benefit-finder/src/Routes/LifeEventSection/_index.scss b/benefit-finder/src/Routes/LifeEventSection/_index.scss
@@ -5,7 +5,7 @@
 @use '@styles/functions' as *;
 
 .bf-verify-selections-view {
-  background-color: color.$officer-navy;
+  background-color: color.$dark-blue;
   margin: 0;
   padding-bottom: rem(64px);
 
@@ -69,7 +69,7 @@
 }
 
 .bf-section-heading {
-  background-color: color.$officer-navy;
+  background-color: color.$dark-blue;
   color: color.$white;
   margin: 0;
   padding: rem(48px) 0 rem(30rem);

diff --git a/benefit-finder/src/shared/components/Alert/_index.scss b/benefit-finder/src/shared/components/Alert/_index.scss
@@ -11,6 +11,8 @@ h2.bf-usa-alert__heading {
 
 .bf-usa-alert {
   padding: rem(25px) 0;
+  background-color: color.$alert-background;
+  border-left-color: color.$alert-red;
 
   p {
     padding-left: rem(16px);

diff --git a/benefit-finder/src/shared/components/Banner/_index.scss b/benefit-finder/src/shared/components/Banner/_index.scss
@@ -9,7 +9,7 @@ h1.bf-banner-heading {
 
 .bf-banner {
   position: relative;
-  background-color: color.$officer-navy;
+  background-color: color.$dark-blue;
   padding: rem(45px) 0 rem(60px);
   margin: 0 auto rem(24px);
   color: color.$white;
@@ -18,7 +18,7 @@ h1.bf-banner-heading {
     padding: 0 rem(20px);
   }
 
-  .bf-banner-heading  {
+  .bf-banner-heading {
     margin: 0 0 rem(16px);
   }
 

diff --git a/benefit-finder/src/shared/components/Button/_index.scss b/benefit-finder/src/shared/components/Button/_index.scss
@@ -22,3 +22,7 @@
     background-color: colors.$base-light-grey;
   }
 }
+
+.bf-usa-button--secondary {
+  border-color: colors.$dark-aqua;
+}
diff --git a/benefit-finder/src/shared/components/Card/_index.scss b/benefit-finder/src/shared/components/Card/_index.scss
@@ -9,7 +9,7 @@
   .bf-usa-card__container {
     border-radius: 0;
     border: rem(2px) solid color.$dark-teal;
-    color: color.$officer-navy;
+    color: color.$dark-blue;
     height: auto;
     margin: 0;
   }

diff --git a/benefit-finder/src/shared/components/Fieldset/_index.scss b/benefit-finder/src/shared/components/Fieldset/_index.scss
@@ -29,7 +29,7 @@
 
 // we check to see if any of the fieldsets in the wrapper have the error
 .bf-fieldset-wrapper:has(fieldset.usa-input--error) {
-  border-left: 0.25rem solid #c61f0c;
+  border-left: 0.25rem solid color.$alert-red;
   padding-left: rem(20px);
 }
 

diff --git a/benefit-finder/src/shared/components/Form/_index.scss b/benefit-finder/src/shared/components/Form/_index.scss
@@ -7,7 +7,7 @@ form.bf-usa-form {
   height: 100%;
   min-height: 100vh;
   margin: 0;
-  background-color: color.$officer-navy;
+  background-color: color.$dark-blue;
   padding-bottom: rem(64px);
 
   .bf-grid-container.grid-container {

diff --git a/benefit-finder/src/shared/components/StepIndicator/_index.scss b/benefit-finder/src/shared/components/StepIndicator/_index.scss
@@ -18,11 +18,11 @@
 
 .bf-usa-step-indicator__segment--complete {
   .bf-usa-step-indicator__segment-label {
-    color: color.$officer-navy;
+    color: color.$dark-blue;
   }
 
   &::after {
-    background-color: color.$officer-navy;
+    background-color: color.$dark-blue;
   }
 }
 

diff --git a/benefit-finder/src/shared/styles/colors/_index.scss b/benefit-finder/src/shared/styles/colors/_index.scss
@@ -1,4 +1,5 @@
-$officer-navy: #162e51;
+$dark-blue: #112f4e;
+$dark-aqua: #0081a1;
 $marine: #1a4480;
 $pop-blue: #005ea2;
 $sky: #d9e8f6;
@@ -17,5 +18,6 @@ $electric-blue: #0050d8;
 $teal: #00bde3;
 $medium-teal: #ccecf2;
 $dark-teal: #0081a1;
-$alert-red: #b50909;
+$alert-red: #8b0a03;
+$alert-background: #f4e3db;
 $green-check: #009831;