feat(global-typography): add global typography stylesheet

[simeonoff]

Closes #295

This PR makes it easy to apply the included type category styles for h1-h6 and body-1 to the native heading(h1-h6) and paragraph elements.

To utilize the typography styles, import or link the igniteui-webcomponents/themes/extra/typography.css stylesheet.

👻⚠️IMPORTANT⚠️👻

Due to how specificity works for slotted children, using any of the aforementioned elements (h1-h6 and p) with the global typography stylesheet introduced in this PR will overwrite all styles defined by the component using the ::slotted selector.

Example:

<igc-card>
    <igc-card-content>
        <!-- The card content element defines styles for slotted elements, 
        however the global typography stylesheet will overwrite those styles. -->
        <p>Some text.</p>
    </igc-card-content>
</igc-card>

h1-h6 and p elements will be excluded from having the global typography styles applied to them if the slot or slotted-styles attributes are set on the element.

Example:

<igc-card>
    <igc-card-content>
        <!-- The <p> element will not receive the global typography styles for paragraphs. -->
        <p slotted-styles>Some text.</p>
    </igc-card-content>
</igc-card>

[damyanpetev]

@simeonoff Okay, my local build finally produced the extras css file and I have some comments:

• The typography is all global (not scoped under a specific class), not sure if intended and also not sure I mind at all :) Frankly, never applied the Angular version to something other than the body
• The current styles only target h1-h6 and p, so there's no provision for the "apply different header styling" via classes or the subtitle, caption, overline, etc. Something like:

  .igc-typography__overline {
      font-family: var(--igc-overline-font-family);
      font-weight: var(--igc-overline-font-weight);
  // ...

Also I saw what happens with components trying to define their own typography and yeah, we're a bit cornered. However, I'm wondering if ignoring items with slot="" as a generic solution is a good one - sounds very likely to have components where you'd want to project some heading into basic content and end up loosing the typography? And if we drop that the use of slotted-styles will be everywhere which sounds a bit annoying too.
Not sure how many components have conflicts like this, but I assume it's the handful that have title slots of some sort (card, navbar and list item atm?) or how many have specific typography requirements, but perhaps if we can't specify those through ::slotted styling internally, perhaps moving those externally to the typography styles? Something like

igc-navbar h1, igc-navbar h2, .... {
  font-family:var(--igc-h5-font-family)
  //...

This should have higher prio, but still only a suggestion. Want to make sure we've exhausted all options here. Alternatively, could we do something with the variables?