Issue #3353641 by Gauravvvv, Santosh_Verma, smustgrave, nod_, bnjmnm, lauriii,...

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

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,

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,