Tweak the colours of the password indicator

Adding link to Seven Color palette https://groups.drupal.org/node/283223#Color

It doesn't need to pass the WCAG test, (as I understand) but it's nice to have it as a reference. Calculator: http://snook.ca/technical/colour_contrast/colour.html

That calculator has a nice hue slider. Someone could start from a Seven Theme color (for example #0074bd) and pick colors from the same "color space" modifying only the hue.

We could add transition properties too. It helps to notice the bar changes:

From Bootstrap theme:

-webkit-transition: width .6s ease;
transition: width .6s ease;

I wonder what is causing these fails. IS it the background? The password checker colours should have been checked before

The red, yellow, blue and green indicator colours now use the messages colours and Drupal blue from the Seven style guide. I also changed the grey background to be a lighter grey also taken from the Seven style so the contrast between the grey and the indicator colour are much much better. The transition suggested above has also been added and I matched the value with the one set for the progress bar transition.

From this work I also noticed a few different bugs related to password strength so I have created follow up issues:
Password field focus is interfering with the password indicator. #2318677: Password field focus is interfering with the password indicator strength bar
Password strength title Strong drops onto a second line. #2318679: "Password strength: Strong" wraps onto a second line

Nice! Could you also post the patch :)?

*facepalm* here is the patch :)

Two notes:

1) The only color that is kinda weird, is the blue. Though from the style guide, we don't have another available color.
2) Shouldn't strong fill up the whole bar?

@Bojhan, I too was wondering about why the strong didn't fill up the whole bar too. Mind you, it doesn't in Core now. It just had never occurred to me, perhaps the animation helps raise awareness of this..

I like the solution. I can't see any accessibility problems with this CSS transition. +1.

@Bojhan These choices were already existing and originally decided within this gem of an issue :) #331893: Add colouring (and description) to password checker. The levels and colours were based off of Google's password strength indicator, so that is where the Blue - Good level comes from.
I still cannot work out why Strong is not 100%, Google used 100%. I did some research and couldn't find anything to explain the less than 100% green bar. Maybe the strength indicator is only to strongly prevent weak passwords but also not be a firm 100% guarantee of strong passwords (hope this makes sense).

To fill up the whole bar you need a password like qQ12se£$

Committed 4505b78 and pushed to 8.0.x. Thanks!

I know it's minor but still :p Why are we even hardcoding that in the JS anyway? shouldn't that be a class?

That would make it way easier to theme.. But probably should be a new issue.