klara-ui/style/typography.styl

$font-size = 16px;
$font-size-smaller = 12px;
$font-size-small = 14px;
$font-size-large = 18px;
$font-size-huge = 20px;
$font-weight = 300;
$font-weight-thin = 300;
$font-weight-bold = 500;
$line-height = 1.4;
$line-height-big = 1.6;

.klara-ui-typography {
  color: $c-gray-darker;
  font-weight: $font-weight;
  font-size: $font-size;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: $line-height;

  h1, h2, h3 {
    margin: .2em 0;
    font-weight: $font-weight-bold;
    line-height: $line-height-big;
  }

  h1 {
    font-size: 29px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 25px;
  }

  ol, ul {
    font-size: $font-size;
    line-height: $line-height-big;
  }

  input, textarea, select, button {
    font-size: inherit;
  }

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

  .font-ui {
    $font-size-small = 14px;
    $font-size = 16px;
    $font-size-large = 18px;
    $font-weight = 300;
    $font-weight-bold = 400;

    color: $c-gray-base;
    font-size: $font-size;

    &__button {
      color: $c-gray-darker;
      font-size: $font-size;

      &--large {
        color: $c-gray-darker;
        font-weight: $font-weight-bold;
        font-size: $font-size-large;
      }
    }

    &__placeholder {
      color: $c-gray-base !important;
      font-weight: $font-weight;
      font-size: $font-size;
    }

    &__text {
      color: $c-gray-darker;
      font-size: $font-size;
    }

    &__label {
      color: $c-gray-dark;
      font-weight: $font-weight;
      font-size: $font-size;

      &--sub {
        color: $c-gray-dark;
        font-size: $font-size-small;
      }
    }

    p {
      @extend .klara-ui-typography .font-ui__text;
    }

    button {
      @extend .klara-ui-typography .font-ui__button;
    }

    label {
      @extend .klara-ui-typography .font-ui__label;
    }

    *::placeholder, *::-webkit-input-placeholder {
      @extend .klara-ui-typography .font-ui__placeholder;
    }
  }

  .font-content {
    $font-size-small = 14px;
    $font-size = 16px;
    $font-size-large = 21px;
    $font-size-huge = 26px;
    $line-height-small = 1.2;
    $line-height = 1.4;
    $line-height-big = 1.625;
    $font-weight-thin = 300;
    $font-weight = 400;
    $font-weight-bold = 500;

    font-size: $font-size;

    &__headline {
      font-size: $font-size-huge;
    }

    &__headline--sub {
      font-size: $font-size-large;
    }

    &__preamble {
      font-weight: $font-weight-bold;
      font-size: $font-size;
    }

    &__quote {
      font-weight: $font-weight-bold;
      font-style: italic;
      font-size: $font-size-large;
    }

    &__paragraph {
      font-size: $font-size;
      line-height: $line-height;
    }

    &__link {
      color: $c-link-base;
      font-weight: $font-weight;

      &:hover {
        color: $c-link-light;
      }
    }

    &__card {
      font-size: $font-size-small;
      line-height: $line-height-small;

      &__headline {
        font-weight: $font-weight-bold;
        font-size: $font-size;
      }

      &__preamble {
        font-weight: $font-weight-bold;
        font-size: $font-size-small;
      }

      &__paragraph {
        font-size: $font-size-small;
      }
    }

    h2 {
      @extend .klara-ui-typography .font-content__headline;
    }

    h3:not(.font-content__card__headline) {
      @extend .klara-ui-typography .font-content__headline--sub;
    }

    p:not(.font-content__card__paragraph):not(.font-content__card__preamble) {
      @extend .klara-ui-typography .font-content__paragraph;
    }

    blockquote {
      @extend .klara-ui-typography .font-content__quote;
    }
  }
}