Make password text easier to read when toggled

[huwshimi]

Done

• Improve the legibility of readonly passwords that have been displayed via the password toggle component.

Fixes #3975.

QA

• Open the password toggle example
• Inspect one of the inputs and add readonly to the input element.
• You should see the dots in the password field become light grey.
• Click the show button and the password should be displayed and the text should be the same as the default text colour.

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

Hidden:

Visible:

[webteam-app]

Demo starting at https://vanilla-framework-4591.demos.haus

[bartaz]

Isn't the previous line &[readonly] enough to cover the cases where readonly attribute is present with any value?

[huwshimi]

In my quick tests it did seem to work with just [readonly] but the base forms target both so I thought I better include both here so that there weren't any potential specificity clashes: https://github.com/canonical/vanilla-framework/blob/main/scss/_base_forms.scss#L52.

I'm happy to change that to [readonly] if you think that'd be fine.

[bartaz]

LGTM, just a small comment on possibly redundant selector.