Paper-button does not follow MD typographical styles

[diogocamposwd]

https://material.google.com/components/buttons.html#buttons-style

[diogocamposwd]

(sigh) Just saw #95. Sorry.

Anyway:

• Paper-button is missing a dependency (paper-styles/typography.html) to satisfy the use of "--paper-font-common-base".
• Not applying the proper "--paper-font-button" mixin makes paper-button to miss:
  • white-space: nowrap;
  • overflow: hidden;
  • text-overflow: ellipsis;
  • font-size: 14px;
  • letter-spacing: 0.018em;
  • line-height: 24px;
  • text-transform: uppercase;*
• Changing the font-width on focus makes the paper-button itself to expand, which causes a weird visual/layout behavior.
• The focus style in the MD spec (I suppose) is fine. If correct:
  • The library developers should provide defaults that work (the spec defaults, in this case).
  • The app developers should take care of not choosing color combinations that hurt a11y.
• If changing 'background-color' really really will never work (spec problem?), I think a (dashed?) border simulating a good old outline can be better than a 'font-weight' change.

And, since I'm here: why paper-button is setting paddings, margins and width in 'em' units instead of CSS pixels?

Sorry for bad English. Hugs.

[notwaldorf]

Just a quick note: as I mentioned on the PR, not importing typography.html is intentional -- this way you can use the Roboto font if you want (by explicitly including typography.html in your app), but by default, the button would inherit whatever font you were using.

[diogocamposwd]

Interesting.

BTW, it can also be done with:

:root {
    --paper-font-common-base: {
        font-family: 'Comic Sans', sans-serif;
        -webkit-font-smoothing: antialiased;
    };
}

[notwaldorf]

Sure, but by then you've already downloaded the Roboto font (if you make paper-button always use it), only to un-use it. That's extra problematic if your app is offline, becausetypography.html tries to download it from google fonts. That's a whole network request and response you don't need

[RhysyG]

Hopefully this is somewhat related. In the paper-button demo the height of the button is 35.59 including the touchable target, however in MD spec it says the height should be 48px including touchable target? Also, when using the button from Polymer starter kit which sets the body line-height to 1.5, it ends up being 40.59. Am I interpreting this wrong or are there some inconsistency here?