From c9453274e5f68d46a14a34d7db6ec9645a3783ca Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Thu, 30 Nov 2023 17:18:13 +0200
Subject: [PATCH] Issue #3353641 by Gauravvvv, Santosh_Verma, smustgrave, nod_,
 bnjmnm, lauriii, quietone: make use of component-level CSS custom properties
 in Claro's form--password-confirm stylesheet

---
 .../css/components/form--password-confirm.css | 50 +++++--------------
 .../form--password-confirm.pcss.css           | 48 +++++-------------
 2 files changed, 26 insertions(+), 72 deletions(-)

diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index f95335e2b59..83b3ce9fec2 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -10,21 +10,6 @@
  * Visual styles for the Password widgets.
  */
 
-:root {
-  /* Weak */
-  --password-strength-bar-weak-bg-color: var(--color-maximumred);
-  --password-strength-bar-weak-border-color: var(--color-maximumred);
-  /* Fair */
-  --password-strength-bar-fair-bg-color: var(--color-sunglow);
-  --password-strength-bar-fair-border-color: #977405;
-  /* Good */
-  --password-strength-bar-good-bg-color: var(--color-lightninggreen);
-  --password-strength-bar-good-border-color: var(--color-lightninggreen);
-  /* Strong */
-  --password-strength-bar-strong-bg-color: var(--color-lightninggreen);
-  --password-strength-bar-strong-border-color: var(--color-lightninggreen);
-}
-
 /**
  * Password confirm widget styles.
  */
@@ -77,6 +62,19 @@
  */
 
 .password-strength {
+  /* Weak */
+  --password-strength-bar-weak-bg-color: var(--color-maximumred);
+  --password-strength-bar-weak-border-color: var(--color-maximumred);
+  /* Fair */
+  --password-strength-bar-fair-bg-color: var(--color-sunglow);
+  --password-strength-bar-fair-border-color: #977405;
+  /* Good */
+  --password-strength-bar-good-bg-color: var(--color-lightninggreen);
+  --password-strength-bar-good-border-color: var(--color-lightninggreen);
+  /* Strong */
+  --password-strength-bar-strong-bg-color: var(--color-lightninggreen);
+  --password-strength-bar-strong-border-color: var(--color-lightninggreen);
+
   margin-block: var(--progress-bar-spacing-size);
 }
 
@@ -150,28 +148,6 @@
   font-weight: bold;
 }
 
-/* Password strength states */
-
-.password-strength__bar.is-weak {
-  border-color: var(--password-strength-bar-weak-border-color);
-  background-color: var(--password-strength-bar-weak-bg-color);
-}
-
-.password-strength__bar.is-fair {
-  border-color: var(--password-strength-bar-fair-border-color);
-  background-color: var(--password-strength-bar-fair-bg-color);
-}
-
-.password-strength__bar.is-good {
-  border-color: var(--password-strength-bar-good-border-color);
-  background-color: var(--password-strength-bar-good-bg-color);
-}
-
-.password-strength__bar.is-strong {
-  border-color: var(--password-strength-bar-strong-border-color);
-  background-color: var(--password-strength-bar-strong-bg-color);
-}
-
 @media (forced-colors: active) {
   .password-strength__bar.is-weak,
   .password-strength__bar.is-fair,
diff --git a/core/themes/claro/css/components/form--password-confirm.pcss.css b/core/themes/claro/css/components/form--password-confirm.pcss.css
index 7f967a68b7a..b66c138bcc3 100644
--- a/core/themes/claro/css/components/form--password-confirm.pcss.css
+++ b/core/themes/claro/css/components/form--password-confirm.pcss.css
@@ -3,21 +3,6 @@
  * Visual styles for the Password widgets.
  */
 
-:root {
-  /* Weak */
-  --password-strength-bar-weak-bg-color: var(--color-maximumred);
-  --password-strength-bar-weak-border-color: var(--color-maximumred);
-  /* Fair */
-  --password-strength-bar-fair-bg-color: var(--color-sunglow);
-  --password-strength-bar-fair-border-color: #977405;
-  /* Good */
-  --password-strength-bar-good-bg-color: var(--color-lightninggreen);
-  --password-strength-bar-good-border-color: var(--color-lightninggreen);
-  /* Strong */
-  --password-strength-bar-strong-bg-color: var(--color-lightninggreen);
-  --password-strength-bar-strong-border-color: var(--color-lightninggreen);
-}
-
 /**
  * Password confirm widget styles.
  */
@@ -64,6 +49,19 @@
  * Description and strength indicator for the main input.
  */
 .password-strength {
+  /* Weak */
+  --password-strength-bar-weak-bg-color: var(--color-maximumred);
+  --password-strength-bar-weak-border-color: var(--color-maximumred);
+  /* Fair */
+  --password-strength-bar-fair-bg-color: var(--color-sunglow);
+  --password-strength-bar-fair-border-color: #977405;
+  /* Good */
+  --password-strength-bar-good-bg-color: var(--color-lightninggreen);
+  --password-strength-bar-good-border-color: var(--color-lightninggreen);
+  /* Strong */
+  --password-strength-bar-strong-bg-color: var(--color-lightninggreen);
+  --password-strength-bar-strong-border-color: var(--color-lightninggreen);
+
   margin-block: var(--progress-bar-spacing-size);
 }
 
@@ -136,26 +134,6 @@
   font-weight: bold;
 }
 
-/* Password strength states */
-.password-strength__bar {
-  &.is-weak {
-    border-color: var(--password-strength-bar-weak-border-color);
-    background-color: var(--password-strength-bar-weak-bg-color);
-  }
-  &.is-fair {
-    border-color: var(--password-strength-bar-fair-border-color);
-    background-color: var(--password-strength-bar-fair-bg-color);
-  }
-  &.is-good {
-    border-color: var(--password-strength-bar-good-border-color);
-    background-color: var(--password-strength-bar-good-bg-color);
-  }
-  &.is-strong {
-    border-color: var(--password-strength-bar-strong-border-color);
-    background-color: var(--password-strength-bar-strong-bg-color);
-  }
-}
-
 @media (forced-colors: active) {
   .password-strength__bar {
     &.is-weak,