_base_typography-definitions.scss

@mixin vf-b-typography-definitions {
  %vf-is-accent {
    &.is-accent {
      color: $colors--theme--accent;
    }
  }

  %vf-heading--common {
    font-style: normal;
    margin-top: 0;
    max-width: $text-max-width;
  }

  //@section Heading styling in placeholders
  %vf-heading-1 {
    @extend %vf-heading--common;
    @extend %vf-is-accent;

    font-size: #{map-get($font-sizes, h1-mobile)}rem;
    font-weight: $font-weight-bold;
    line-height: map-get($line-heights, h1-mobile);
    margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, h1-mobile);
    padding-top: map-get($nudges, h1-mobile);

    @media (min-width: $breakpoint-heading-threshold) {
      font-size: #{map-get($font-sizes, h1)}rem;
      line-height: map-get($line-heights, h1);
      margin-bottom: map-get($sp-after, h1) - map-get($nudges, h1);
      padding-top: map-get($nudges, h1);
    }

    &.u-no-margin--bottom {
      @extend %u-no-margin--bottom--h1;
    }

    &:not(.u-no-margin):not(.u-no-margin--bottom) + & {
      // move it up under the heading above by the amount of bottom margin + top padding
      margin-top: calc(-1 * map-get($sp-after, h1-mobile));

      @media (min-width: $breakpoint-heading-threshold) {
        margin-top: calc(-1 * map-get($sp-after, h1));
      }
    }
  }

  %vf-heading-2 {
    @extend %vf-heading--common;
    @extend %vf-heading-1;
    font-weight: 180; // custom font weight adjusted for h2
  }

  %vf-heading-display {
    @extend %vf-heading--common;

    font-size: #{map-get($font-sizes, display-mobile)}rem;
    font-weight: $font-weight-display-heading;
    line-height: map-get($line-heights, display-mobile);
    margin-bottom: map-get($sp-after, display-mobile) - map-get($nudges, display-mobile);
    padding-top: map-get($nudges, display-mobile);

    @media (min-width: $breakpoint-heading-threshold) {
      font-size: #{map-get($font-sizes, display)}rem;
      line-height: map-get($line-heights, display);
      margin-bottom: map-get($sp-after, display) - map-get($nudges, display);
      padding-top: map-get($nudges, display);
    }
  }

  %vf-heading-3 {
    @extend %vf-heading--common;
    @extend %vf-is-accent;

    font-size: #{map-get($font-sizes, h3-mobile)}rem;
    font-weight: $font-weight-bold;
    line-height: map-get($line-heights, h3-mobile);
    margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, h3-mobile);
    padding-top: map-get($nudges, h3-mobile);

    @media (min-width: $breakpoint-heading-threshold) {
      font-size: #{map-get($font-sizes, h3)}rem;
      line-height: map-get($line-heights, h3);
      margin-bottom: map-get($sp-after, h3) - map-get($nudges, h3);
      padding-top: map-get($nudges, h3);
    }

    &.u-no-margin--bottom {
      @extend %u-no-margin--bottom--h3;
    }

    &:not(.u-no-margin):not(.u-no-margin--bottom) + & {
      // move it up under the heading above by the amount of bottom margin + top padding
      margin-top: calc(-1 * map-get($sp-after, h3-mobile));

      @media (min-width: $breakpoint-heading-threshold) {
        margin-top: calc(-1 * map-get($sp-after, h3));
      }
    }
  }

  %vf-heading-4 {
    @extend %vf-heading--common;
    @extend %vf-heading-3;
    font-weight: 275; // custom font weight adjusted for h4
  }

  %vf-heading-5 {
    @extend %vf-heading--common;

    font-size: 1rem;
    font-weight: $font-weight-bold;
    line-height: map-get($line-heights, default-text);
    margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
    padding-top: map-get($nudges, p);

    &.u-no-margin--bottom {
      @extend %u-no-margin--bottom--default-text;
    }

    &:not(.u-no-margin):not(.u-no-margin--bottom) + & {
      // move it up under the heading above by the amoung of bottom margin + top padding
      margin-top: calc(-1 * map-get($sp-after, p));
    }
  }

  %vf-heading-6 {
    @extend %vf-heading--common;
    @extend %vf-heading-5;

    font-style: italic;
    font-weight: $font-weight-regular-text;

    @if ($increase-font-size-on-larger-screens) {
      @media (min-width: $breakpoint-x-large) {
        padding-top: map-get($nudges, h6-large);
      }
    }
  }

  %common-default-text-properties {
    line-height: map-get($line-heights, default-text);
    margin-top: 0;
    padding-top: map-get($nudges, p);
  }

  %default-text {
    @extend %common-default-text-properties;
    font-size: 1rem;
    font-weight: $font-weight-regular-text;

    margin-bottom: map-get($sp-after, default-text) - map-get($nudges, p);
  }

  %paragraph {
    @extend %common-default-text-properties;

    margin-bottom: map-get($sp-after, p) - map-get($nudges, p);

    &:not([class*='p-heading--']):not([class*='p-muted-heading']) + & {
      margin-top: -#{$sp-unit};
    }

    &.u-no-margin--bottom {
      @extend %u-no-margin--bottom--default-text;
    }
  }

  %small-text {
    font-size: #{map-get($font-sizes, small)}rem;
    line-height: map-get($line-heights, small);
    margin-bottom: map-get($sp-after, small) - map-get($nudges, small);
    padding-top: map-get($nudges, small);

    @if ($increase-font-size-on-larger-screens) {
      @media (min-width: $breakpoint-x-large) {
        padding-top: map-get($nudges, small);
      }
    }

    &.u-no-margin--bottom {
      @extend %u-no-margin--bottom--small;
    }
  }

  %x-small-text {
    font-size: #{map-get($font-sizes, x-small)}rem;
    font-weight: $font-weight-bold;
    line-height: map-get($line-heights, x-small);
    margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small);
    padding-top: map-get($nudges, x-small);

    @if ($increase-font-size-on-larger-screens) {
      @media (min-width: $breakpoint-x-large) {
        padding-top: map-get($nudges, x-small);
      }
    }

    &.u-no-margin--bottom {
      @extend %u-no-margin--bottom--small;
    }
  }

  %muted-text {
    color: $colors--theme--text-muted;
  }

  %small-caps-text {
    @extend %default-text;
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0.05em;
    margin-bottom: map-get($sp-after, p-small-caps) - map-get($nudges, p);

    &.u-no-margin--bottom {
      @extend %u-no-margin--bottom--default-text;
    }

    // deprecated: the use of .u-align-text--x-small-to-default on small caps text is deprecated
    // previously small caps was implemented as x-small text variant requiring .u-align-text--x-small-to-default compensations
    // but now it's implemented with default text size not requiring any compensations,
    // so we need to reset the padding-top to the default value
    &.u-align-text--x-small-to-default {
      padding-top: map-get($nudges, p);
    }
  }

  %table-header-label {
    // TODO: table header should use %small-caps-text,
    // but we need to test it in the context of MAAS dense tables first
    @extend %x-small-text;

    text-transform: uppercase;
  }

  %muted-heading {
    @extend %small-caps-text;
    @extend %bold;
  }

  %bold {
    font-weight: $font-weight-bold;
  }

  // @section Adjustments to spacing between pairs of text elements e.g. p + h1
  // Placeholder naming: $sp + -- + {preceding element} + {following element}, e.g. for p + h1: $sp--ph1

  %sp--ph1 {
    padding-top: map-get($nudges, h1-mobile) + $spv--x-large;

    @media (min-width: $breakpoint-heading-threshold) {
      padding-top: map-get($nudges, h1) + $spv--x-large;
    }
  }

  %sp--ph2 {
    padding-top: map-get($nudges, h2-mobile) + $spv--x-large;

    @media (min-width: $breakpoint-heading-threshold) {
      padding-top: map-get($nudges, h2) + $spv--x-large;
    }
  }

  %sp--ph3 {
    padding-top: map-get($nudges, h3-mobile) + $spv--x-large;

    @media (min-width: $breakpoint-heading-threshold) {
      padding-top: map-get($nudges, h3) + $spv--x-large;
    }
  }

  %sp--ph4 {
    padding-top: map-get($nudges, h4-mobile) + $spv--x-large;

    @media (min-width: $breakpoint-heading-threshold) {
      padding-top: map-get($nudges, h4) + $spv--x-large;
    }
  }

  %sp--ph5 {
    padding-top: map-get($nudges, p) + $spv--x-large;
  }

  %sp--pmuted {
    padding-top: map-get($nudges, small) + $spv--x-large;
  }
}