bug(input): placeholder text inside toolbar is difficult to read

[robertmesserle]

HTML:

<md-toolbar>
  <header class="md-toolbar-tools">
    <div>
      <md-input-container md-no-float>
        <input placeholder="placeholder" />
      </md-input-container>
    </div>
  </header>
</md-toolbar>

[devversion]

Just writing it here. I'm currently looking for a good / the right solution.

The placeholder currently uses the foreground-1 hue, which is actually for disabled texts and also looking as same as in the specs. (Not chosen by me)

The foreground palettes are supporting Dark and Light themes, which means that those palettes are not caring about the primary / accent / warn color.

      self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND;
      self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW;

So, as shown in your screenshot, you're using Indigo, which is likely dark.
But as the foreground palette is not caring about the primary color, it will be still dark and not good to read.

I think we need to find another palette / solution.

For comparison in Material 2. See here

[EladBezalel]

@devversion any update on this?

[epelc]

@devversion I think the real problem here is that the forground-*'s only support light or dark. There needs to be a foreground-opposite or something similar for when you are ontop of a background that is opposite of the normal isDark.

Would be nice to get this fixed. Hopefully it'll also fix the same issue with md-select in dark toolbars.

[clshortfuse]

I have somewhat a solution for this, but I can't find a neat way to get it all working as I want. Right now I was thinking of doing adding support for

foreground-1-contrast
foregroundLight-1-contrast
foregroundDark-2-contrast-0.50

The problem is, though you can force light and dark, that's not really much of the solution. The reality is that contrast and foreground are somewhat same thing.

Right now, contrast == foreground-1 but no ability to select any other levels of foreground. I have a solution ready, but I'm just trying to get it all working without breaking other changes. The idea of using foreground-1 syntax instead of foreground1 is the root of my issue.

Edit: I figured it out. I'm going to deprecate foreground-* and -contrast. Instead, I'm going to add:

• contrastPrimary
• contrastSecondary
• contrastDisabled | contrastHint | contrastIcon
• contrastDivider.

Any reference to -contrast would be replaced with contrastPrimary. foreground-* values would be replaced with the specified contrast level and background color. ie: foreground-1 becomes background-default-contrastPrimary