From c88d9875c14aa219c609225b12bcdacb0bb6e987 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Wed, 20 Dec 2023 10:27:03 -0500
Subject: [PATCH] Use design sytem colors for password strength meter

changelog: User-Facing Improvements, Password Strength, Use consistent colors for password strength feedback
---
 .../stylesheets/components/_password.scss     | 49 +++++++++----------
 .../devise/shared/_password_strength.html.erb | 10 ++--
 2 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/app/assets/stylesheets/components/_password.scss b/app/assets/stylesheets/components/_password.scss
index 9b537c3e1fb..34ea8217bb2 100644
--- a/app/assets/stylesheets/components/_password.scss
+++ b/app/assets/stylesheets/components/_password.scss
@@ -1,39 +1,34 @@
 @use 'uswds-core' as *;
 
-$weak: #e80e0e;
-$average: #ffac00;
-$good: #9ac056;
-$great: #00b200;
-
-.pw-bar {
-  background-color: #e9e9e9;
-  border: units(0.5) solid #fff;
-  border-radius: 6px;
-  float: left;
-  height: 16px;
-  width: 25%;
+.password-strength__meter {
+  display: flex;
+  margin-top: units(1);
+  margin-bottom: units(0.5);
 }
 
-.pw-weak {
-  .pw-bar:nth-child(-n + 1) {
-    background-color: $weak;
+.password-strength__meter-bar {
+  flex-basis: 25%;
+  background-color: color('base-lighter');
+  border-radius: 2px;
+  height: units(1);
+
+  & + & {
+    margin-left: units(1);
   }
-}
 
-.pw-average {
-  .pw-bar:nth-child(-n + 2) {
-    background-color: $average;
+  .pw-weak &:nth-child(-n + 1) {
+    background-color: color('error');
   }
-}
 
-.pw-good {
-  .pw-bar:nth-child(-n + 3) {
-    background-color: $good;
+  .pw-average &:nth-child(-n + 2) {
+    background-color: color('warning');
+  }
+
+  .pw-good &:nth-child(-n + 3) {
+    background-color: color('success-light');
   }
-}
 
-.pw-great {
-  .pw-bar {
-    background-color: $great;
+  .pw-great &:nth-child(-n + 4) {
+    background-color: color('success');
   }
 }
diff --git a/app/views/devise/shared/_password_strength.html.erb b/app/views/devise/shared/_password_strength.html.erb
index 98eae167a2f..f1e3d3a77a5 100644
--- a/app/views/devise/shared/_password_strength.html.erb
+++ b/app/views/devise/shared/_password_strength.html.erb
@@ -1,10 +1,10 @@
 <div id='pw-strength-cntnr' class='display-none' aria-live='polite' aria-atomic='true' data-pw-min-length='<%= Devise.password_length.min %>'>
   <div class="margin-bottom-4">
-    <div class='clearfix margin-x-neg-05 padding-top-05'>
-      <div class='pw-bar'></div>
-      <div class='pw-bar'></div>
-      <div class='pw-bar'></div>
-      <div class='pw-bar'></div>
+    <div class="password-strength__meter">
+      <div class="password-strength__meter-bar"></div>
+      <div class="password-strength__meter-bar"></div>
+      <div class="password-strength__meter-bar"></div>
+      <div class="password-strength__meter-bar"></div>
     </div>
     <div class='h5'>
       <%= t('instructions.password.strength.intro') %>