Formation: convert link colors to USWDS v3 (#989)

* formation: update blue colors to USWDS v3 colors * 7.1.0-color-beta * Update comment to be more accurate * convert link colors to USWDS v3, update version to 7.1.0 * Update places where updated hex values appear * Update more blue color references and variables * update file and stroke on icon to match, previous fill color did not look correct with new USWDS v3 color on stroke
department-of-veterans-affairs · Nov 15, 2023 · 011b922 · 011b922
1 parent 4a892f0
commit 011b922
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 18 deletions.
diff --git a/packages/documentation/src/pages/about-mdx.mdx b/packages/documentation/src/pages/about-mdx.mdx
@@ -43,7 +43,7 @@ export class InlineClassComponent extends React.Component {
   render() {
     return (
       <div className="site-c-reactcomp__rendered">
-        <div style={{ backgroundColor: '#112e51' }}>
+        <div style={{ backgroundColor: '#162e51' }}>
           <DropDownPanel
             buttonText='Helpdesk'
             cssClass='va-dropdown'

diff --git a/packages/documentation/src/scss/_dashboard.scss b/packages/documentation/src/scss/_dashboard.scss
@@ -1,5 +1,5 @@
 .dash-build-pannel {
-  background-color: #112e51;
+  background-color: #162e51;
   font-weight: bold;
 }
 

diff --git a/packages/formation/assets/img/close-primary.svg b/packages/formation/assets/img/close-primary.svg
diff --git a/packages/formation/assets/img/icon-dot-gov.svg b/packages/formation/assets/img/icon-dot-gov.svg
diff --git a/packages/formation/package.json b/packages/formation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/formation",
-  "version": "7.1.0-color-beta",
+  "version": "7.1.0",
   "description": "The VA design system",
   "keywords": [
     "va",

diff --git a/packages/formation/sass/base/_b-variables.scss b/packages/formation/sass/base/_b-variables.scss
@@ -49,13 +49,23 @@ $color-primary-alt:          $color-aqua;
 $color-primary-alt-light:    #97d4ea;
 $color-primary-alt-lightest: $color-aqua-lightest;
 $color-primary-alt-dark:     #28a0cb;
+$color-primary-alt-darkest:  #07648d;
+
+$color-visited:              #54278f;
+$color-link-default:         $color-primary;
+$color-link-visited:         #54278f;
+$color-link-active:          #0b4778;
+
+$color-purple:               #54278f;
+$color-light-blue: #005ea2;
+$color-old-browser-background-start: #005ea2;
+$color-old-browser-background-end: #162e51;
 
 //===================================
 // Formation colors that override (or restate) USWDS values
 // Also see: https://standards.usa.gov/components/colors/
 //===================================
 
-$color-purple:               #4c2c92;
 $color-white:                #ffffff;
 $color-red:                  #e31c3d;
 $color-red-lightest:         #f9dede;
@@ -89,7 +99,7 @@ $color-gold-lightest:        #fff1d2;
 $color-gold-lighter:         #fad980;
 $color-gold-light:           #f9c642;
 
-$color-visited:              $color-purple;
+
 $color-focus:                #3e94cf;
 
 $focus-outline:              2px solid $color-gold-light;
@@ -104,9 +114,8 @@ $color-cool-blue-lightest:  #dce4ef;
 //===================================
 
 $color-black:                #000;
-$color-link-default:         #004795;
 $color-link-default-hover:   rgba($color-black, 0.05);
-$color-primary-alt-darkest:  #046b99;
+
 $color-green-darker:         #195c27;
 $color-va-accent:            #988530; // New gold "metal" acccent
 $color-gold:                 #fdb81e;
@@ -121,12 +130,8 @@ $color-white-alpha70:        rgba(255,255,255,.7);
 
 $color-sidebar-nav-bg:   rgba($color-black, 0.25);
 
-
 $color-orange: #EB7F29;
 $color-gold-darker: #988530;
-$color-light-blue: #0071bb;
-$color-old-browser-background-start: #0071bb;
-$color-old-browser-background-end: #112e51;
 
 //===================================
 // Hub Icon colors for BC

diff --git a/packages/formation/sass/base/_va.scss b/packages/formation/sass/base/_va.scss
@@ -89,11 +89,11 @@ a {
     text-decoration: underline;
   }
   &:active {
-    background: $color-link-default-hover;
+    background: $color-link-active;
   }
   &:visited,
   &:visited abbr {
-    color: $color-visited;
+    color: $color-link-visited;
   }
 }
 

diff --git a/packages/formation/sass/modules/_m-alert.scss b/packages/formation/sass/modules/_m-alert.scss
@@ -222,7 +222,7 @@ p.usa-alert-heading {
           padding-top: 0;
           font-weight: 700;
           text-decoration: underline;
-          color: #003e73;
+          color: #1a4480;
           cursor: pointer;
         }
       }

diff --git a/packages/formation/sass/site/color-palette.scss b/packages/formation/sass/site/color-palette.scss
@@ -31,7 +31,7 @@ $color-gold-darker: #988530;
       }
 
       &.color-visited {
-        background-color: $color-visited;
+        background-color: $color-link-visited;
       }
 
       &.color-focus {

diff --git a/packages/formation/sass/site/style.fractal.scss b/packages/formation/sass/site/style.fractal.scss
@@ -1,5 +1,5 @@
 $color-white: #ffffff;
-$color-primary-darkest: #112e51;
+$color-primary-darkest: #162e51;
 $color-gray-lightest: #f1f1f1;
 
 .fractal-vets-logo {