Provide global styles for consumer application

[pfecht]

It would be great to have a global stylesheet which can be imported to have typography and inovex branding in the consumer application.

Stencil provides https://stenciljs.com/docs/config#globalstyle this out of the box and inovex-elements use it so far only for a few variables.

Having such a stylesheet, the consumer can decide whether he wants to import global styles or not. It's shipped and distributed in dist/collection/inovex-elements.css but not part of the core components.

One possible way to import the style would be in an app.scss with:

@import "../../../node_modules/@mips-see/elements/dist/inovex-elements/inovex-elements.css";

An idea for the content: Theming (Typography, Colors, ...):

@import "./fonts.scss";


$headings-font-weight:         500 !default;
$headings-line-height:         1.2 !default;
$h1-font-size:                 26px !default;
$h2-font-size:                 24px !default;
$h3-font-size:                 22px !default;
$h4-font-size:                 20px !default;
$h5-font-size:                 18px !default;
$h6-font-size:                 16px !default;


:root, html {
  font-family: $font-family-sans-serif;
}

a {
  background-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
}

h1 {
  font-size: $h1-font-size;
}

h2 {
  font-size: $h2-font-size;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

small {
  font-size: 75%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

Second step: Move the entire "LatoImport"-Stuff to this global stylesheet and let the consumer decide, whether he wants to import lato or already has it (or any other typo) imported.