Verified Commit c9453274 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

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
parent b173b839

core/themes/claro/css/components/form--password-confirm.css

+13 −37
Original line number Diff line number Diff line
@@ -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

+13 −35
Original line number Diff line number Diff line
@@ -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,