Refactor Claro's form--password-confirm stylesheet

No block for IE in this file. It's good to go for review

Hi @Aditya4478, I reviewed your patch #2. It is applying cleanly it looks good to me.

Lenovo@LAPTOP-PDE747K8 MINGW64 /c/xampp/htdocs/drupal-3294005 (9.5.x)
$ git apply -v 3294005-9.5.x.patch
Checking patch core/themes/claro/css/components/form--password-confirm.css...
Checking patch core/themes/claro/css/components/form--password-confirm.pcss.css...
Applied patch core/themes/claro/css/components/form--password-confirm.css cleanly.
Applied patch core/themes/claro/css/components/form--password-confirm.pcss.css cleanly.

Thanks for the patch.

Only nesting done with proper use of "&" . No scope for variable creation found. There is no IE block, so no removal needed. And since its 9.5.x version "rtl" statements are untouched.

Worked on "rtl" statements
Edited some CSS logical properties

Consider #6 & #7 patches

#10 Please review the patch

#9 changes included except media query (3rd).

Used & at last in nesting. You corrected me once not to use at last, but here it seems everything working. So ....

#11 Patch failed

#14 Please review the patch

Including #12 comments

This issue is being reviewed by the kind folks in Slack, #need-reveiw-queue. We are working to keep the size of Needs Review queue [2700+ issues] to around 200, following Review a patch or merge require as a guide.

Running #14 against 10.1 as I think we missed the boat for 10.0

Verified the form-password by creating a user and filling in the password field.

The suggestions appear correct and all styling around the password.

+1 for RTBC

Am moving back to NW because this was initially tagged for a followup and don't know what that's for. (maybe not needed)

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.

1. +++ b/core/themes/claro/css/components/form--password-confirm.pcss.css
   @@ -45,14 +45,16 @@
   +.js .is-initial {
   +  &:not(.form-item--error) .form-item__description {
   ...
   +  &.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
   

   These selectors are really hard to read, and I think nesting them like this makes them even harder 😐 Unless we can figure out how to make them read better, I would probably prefer reverting these lines back to the original code.

2. +++ b/core/themes/claro/css/components/form--password-confirm.pcss.css
   @@ -141,17 +165,14 @@
   +  .password-strength__bar {
   +    @nest .is-initial & {
   

   This should be merged with the rule above this.

3. We should also rename the custom properties to follow our new standards for custom property naming conventions. For example, we should remove the double dashes from the custom property names.

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

Random failure.

#3353641: make use of component-level CSS custom properties in Claro's form--password-confirm stylesheet

Committed f43ee84 and pushed to 10.1.x. Thanks!