convert link colors to USWDS v3, update version to 7.1.0

department-of-veterans-affairs · Nov 10, 2023 · 94dd43a · 94dd43a
1 parent 78b3f9a
commit 94dd43a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
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
@@ -50,6 +50,11 @@ $color-primary-alt-light:    #97d4ea;
 $color-primary-alt-lightest: $color-aqua-lightest;
 $color-primary-alt-dark:     #28a0cb;
 
+$color-visited:              #54278f;
+$color-link-default:         $color-primary;
+$color-link-visited:         #54278f;
+$color-link-active:          #0b4778;
+
 //===================================
 // Formation colors that override (or restate) USWDS values
 // Also see: https://standards.usa.gov/components/colors/
@@ -89,7 +94,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,7 +109,6 @@ $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;

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/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 {