[lumo] Add a typography reset style module

[jouni]

Currently, all Lumo styled elements are responsible for specifying appropriate font reset styles. I think we should provide that as a style module which would be easy to include in all elements, including 3rd custom app elements.

Something like this, in typography.html:

<dom-module id="lumo-typography-reset">
  <template>
    <style>
      :host {
        font-family: var(--lumo-font-family);
        font-size: var(--lumo-font-size-m);
        font-weight: 400;
        line-height: var(--lumo-line-height-m);
        letter-spacing: 0;
        text-transform: none;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    </style>
  </template>
</dom-module>

It’s debatable what are the exact styles we should enforce for Lumo styled elements, as a base – the element is still free to deviate when needed. This would just provide a common starting point for all elements and ensure some amount of consistency.

@platosha, @web-padawan, thoughts?

[web-padawan]

The use case is valid, I have been using CSS mixins for that previously when working with Polymer 1, mostly because of these font smoothing properties. I don't see any particular reason for the text-transform and letter-spacing rules to be present here, though.

[jouni]

My intention was to reset most text styles that are inherited. Using initial might be a better alternative if that works reliably across browsers.

[platosha]

There is a whole lot more inherited text styles, e. g., text-shadow, word-break, word-spacing... I would just reset font, line-height, rendering, and that’s it.

[web-padawan]

BTW we could also use a shortcut:

font: 400 var(--lumo-font-size-m) / var(--lumo-line-height-m) var(--lumo-font-family);

[Haprog]

Is this still an issue?

typography.html also defines a style module lumo-typography and a part of that is:

      :host {
        font-family: var(--lumo-font-family);
        font-size: var(--lumo-font-size, var(--lumo-font-size-m));
        line-height: var(--lumo-line-height-m);
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

Doesn't including lumo-typography into your component/view accomplish what is described in this issue? Or is there something missing?

[jouni]

lumo-typography currently includes many other selectors as well, which you might or might not want to get applied in your shadow root. Having these modules separately would help.