Refactor Claro's form--password-confirm stylesheet

Updated short-hand properties. Please review

This will need screenshots since .css changed.

I have added before/after patch screenshots. please review

Before patch

After patch

.js .is-initial:not(.form-item--error) .form-item__description {
  margin-block-start: 0;
}

.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
  display: none;
  max-block-size: 0;
  margin-block-start: 0;
}

.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);
  back

More nesting can be done.

Addressed #21, Attached patch and interdiff. please review

After

Nesting looks better
Adding some screenshots to show nothing broke.

Addressed #24, attached patch and interdiff for same. please review

See attached screenshot. Using claro test module and didn't see anything break.

Seems random failure

The last submitted patch, 25: 3294005-25.patch, failed testing. View results →

rckstr_rohan → closed merge request !3736

Random failure.

The last submitted patch, 25: 3294005-25.patch, failed testing. View results →

📌 make use of component-level CSS custom properties in Claro's form--password-confirm stylesheet RTBC

Committed f43ee84 and pushed to 10.1.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.