fix(autocomplete): autocomplete panel theme supports dark mode

[rudzikdawid]

PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

The autocomplete panel is always using light mode hues even when the theme is dark mode.

Issue Number:
#11202

What is the new behavior?

The autocomplete panel use dark mode hues when the theme is set to dark mode.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Before:

After:

[Splaktar]

The focus background color in light mode has gotten significantly lighter. It should stay the same or at minimum be visually indistinguishable.

Before:

After:

Before:

After:

[Splaktar]

Please ensure that the light mode colors don't change.

[rudzikdawid]

You have right
hover background: '{{background-300-0.2}}'; wasn't perfect

so i tried your solution from #11198
but then i realized that background: '{{background-hue-2}}' also have problems, mostly in dark mode

after that i tried with hover background: '{{background-500-0.17}}';
and it seems ok

before:

after:

dark mode:

you can check it again, i made git push --force with fixes

[Splaktar]

Thanks for the update. I went with background-500-0.20 after some testing in the select PR. Does it make sense to use that here as well?

[rudzikdawid]

I think that background-500-0.20 seems to be a little bit darker than master build, esspecially in light theme. background-500-0.18 looks mutch better.

master build https://material.angularjs.org/latest/demo/autocomplete:

.md-autocomplete-suggestions-container li:hover {
    background: rgb(238,238,238);
}

hover changes with 0.18:

li:hover {
    background: rgba(158,158,158,0.18);
}

i use converter rgba to rgb
http://marcodiiga.github.io/rgba-to-rgb-conversion

result of convert:
0.18 background: rgba(158,158,158,0.18); === background: rgb(238,238,238);
0.20 background: rgba(158,158,158,0.20); === background: rgb(236,236,236);

master build: background: rgb(238,238,238);

results of difference between master:
0.18 no difference, perfect match
0.20 differ by 2 point (darker)

at this moment the differences are really small, cosmetic :)
I think now It does not matter which value we choose. Both values are much better than my first proposal background-300-0.2

[Splaktar]

Yep, as mentioned in #11198 (comment), let's use 0.18.

[rudzikdawid]

done

[Splaktar]

According to https://material.io/guidelines/components/text-fields.html#text-fields-states, it appears that a disabled dark mode text field (md-autocomplete with md-floating-label) should be have the default background color (i.e. the same as the content area). This seems to be displayed properly.

According to https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes (I think that this maps closest to our autocomplete design w/o md-floating-label), it appears that the disabled dark mode should have a background color (#262626) that is slightly lighter than the default background (#1D1D1D) and slightly darker than the non-disabled background (#2F2F2F). Currently in this branch, it is darker than the default background in dark mode.

[Splaktar]

I don't see any combination that we have available atm that meets the requirements listed in my last post. I think that we should go with the following for the time being:

  &[disabled]:not([md-floating-label]) {
    background: '{{background-default}}';
  }

It still provides a difference between enabled/disabled styling, but avoids applying a darker background color than the default background.

[Splaktar]

But then again, testing light mode background-hue-2 gives us the same styling as previously, so if we use the background-default, it could cause problems. So let's keep it like you have it with background-hue-2 as I would rather have the inconsistency on the dark mode side rather than light mode.

[rudzikdawid]

i see this issue also on master build. So maybe we should open another issue/PR for that.
This issue #11202 was opened to prepare fix for dark theme.

[Splaktar]

I think that we can send this for presubmit testing now.