Fix sl-input[type="date|time"] placeholder on macOS Safari

[brendon]

Allowing the background to inherit rather than removing it allows the weird date and time placeholder text opacity to work on macOS Safari.

• The change doesn't seem to affect macOS Firefox and Chrome. I've not tested further.
• Using inherit allows the dark and light theme background colours to come through correctly.
• Further investigation around how this interacts with 'filled' inputs is probably needed.

Fixes #1334

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	May 17, 2023 9:27pm

[claviska]

Before

Without any customizations, this is what it looks like in Safari right now:

The contrast between the blue highlight and the black text is 3.56 (AA).

After

Here's what it looks like after the proposed change:

Note that the contrast is now 2.12 (failing).

Reading through #1334 again, I'm not sure what this change is improving. Did I miss something when I reviewed it?

Thanks!

[brendon]

Hi @claviska, the original issue is that by removing the background on the input, the input appears to be already filled in even though it's not. The placeholder text becomes basically black instead of light grey. To me it becomes a usability thing as it's not easy to tell if the field is filled in or what parts of the field need to still be filled in.

[claviska]

Ah, thanks for clarifying. Well, if this is how the browser renders it by default, I guess we shouldn't override it and make it even more confusing. 🤷🏻‍♂️

[brendon]

Thanks Cory! :)