_typography.scss

/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* stylelint-disable at-rule-disallowed-list */

@import 'tokens.scss';
@import 'borders.scss';
@import 'radii.scss';
@import 'utils.scss';

////
/// @group typography
////

/// Type factory.
///
/// @param {variable} $font-size
/// @param {variable} $line-height
/// @param {variable} $font-weight false
/// @param {variable} $letter-spacing false
///
/// @access private

@mixin _bpk-text-factory(
  $font-size,
  $line-height,
  $font-weight: false,
  $letter-spacing: false
) {
  font-size: $font-size;
  line-height: $line-height;

  @if $font-weight {
    font-weight: $font-weight;
  }

  @if $letter-spacing {
    letter-spacing: $letter-spacing;
  }
}

/// Text margin reset.
///
/// @example scss
///   .selector {
///     @include bpk-text;
///   }

@mixin bpk-text {
  margin: 0;
}

/// Extra small text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xs;
///   }

@mixin bpk-text--xs {
  @include _bpk-text-factory(
    $bpk-font-size-xs,
    $bpk-line-height-xs,
    $bpk-font-weight-book
  );
}

/// Extra small text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xs;
///   }

@mixin bpk-text-xs {
  @include bpk-text--xs;
}

/// Small text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--sm;
///   }

@mixin bpk-text--sm {
  @include _bpk-text-factory(
    $bpk-font-size-sm,
    $bpk-line-height-sm,
    $bpk-font-weight-book
  );
}

/// Small text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-sm;
///   }

@mixin bpk-text-sm {
  @include bpk-text--sm;
}

/// Base text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--base;
///   }

@mixin bpk-text--base {
  @include _bpk-text-factory(
    $bpk-font-size-base,
    $bpk-line-height-base,
    $bpk-font-weight-book
  );
}

/// Base text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-base;
///   }

@mixin bpk-text-base {
  @include bpk-text--base;
}

/// Large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--lg;
///   }

@mixin bpk-text--lg {
  @include _bpk-text-factory(
    $bpk-font-size-lg,
    $bpk-line-height-lg,
    $bpk-font-weight-book
  );
}

/// Large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-lg;
///   }

@mixin bpk-text-lg {
  @include bpk-text--lg;
}

/// Extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xl;
///   }

@mixin bpk-text--xl {
  @include _bpk-text-factory(
    $bpk-font-size-xl,
    $bpk-line-height-xl,
    $bpk-font-weight-book
  );
}

/// Extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xl;
///   }

@mixin bpk-text-xl {
  @include bpk-text--xl;
}

/// Extra extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xxl;
///   }

@mixin bpk-text--xxl {
  @include _bpk-text-factory(
    $bpk-font-size-xxl,
    $bpk-line-height-xxl,
    $bpk-font-weight-bold
  );
}

/// Extra extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xxl;
///   }

@mixin bpk-text-xxl {
  @include bpk-text--xxl;
}

/// Extra extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xxxl;
///   }

@mixin bpk-text--xxxl {
  @include _bpk-text-factory(
    $bpk-font-size-xxxl,
    $bpk-line-height-xxxl,
    $bpk-font-weight-bold
  );
}

/// Extra extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xxxl;
///   }

@mixin bpk-text-xxxl {
  @include bpk-text--xxxl;
}

/// Extra extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xxxxl;
///   }

@mixin bpk-text--xxxxl {
  @include _bpk-text-factory(
    $bpk-font-size-xxxxl,
    $bpk-line-height-xxxxl,
    $bpk-font-weight-bold,
    $bpk-letter-spacing-tight
  );
}

/// Extra extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xxxxl;
///   }

@mixin bpk-text-xxxxl {
  @include bpk-text--xxxxl;
}

/// Extra extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xxxxxl;
///   }

@mixin bpk-text--xxxxxl {
  @include _bpk-text-factory(
    $bpk-font-size-xxxxxl,
    $bpk-line-height-xxxxxl,
    $bpk-font-weight-bold,
    $bpk-letter-spacing-tight
  );
}

/// Extra extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xxxxxl;
///   }

@mixin bpk-text-xxxxxl {
  @include bpk-text--xxxxxl;
}

/// Bold text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--bold;
///   }

@mixin bpk-text--bold {
  font-weight: $bpk-font-weight-bold;
}

/// Bold text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-bold;
///   }

@mixin bpk-text-bold {
  @include bpk-text--bold;
}

/// Black text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--black;
///   }

@mixin bpk-text--black {
  font-weight: $bpk-font-weight-black;
}

/// Black text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-heavy;
///   }

@mixin bpk-text-black {
  @include bpk-text--black;
}

/// Caption text style
///
/// @example scss
///   .selector {
///     @include bpk-caption;
///   }

@mixin bpk-caption {
  @include _bpk-text-factory(
    $bpk-font-size-xs,
    $bpk-line-height-xs,
    $bpk-font-weight-book
  );
}

/// Footnote text style
///
/// @example scss
///   .selector {
///     @include bpk-footnote;
///   }

@mixin bpk-footnote {
  @include _bpk-text-factory(
    $bpk-font-size-sm,
    $bpk-line-height-sm,
    $bpk-font-weight-book
  );
}

/// Label-1 text style
///
/// @example scss
///   .selector {
///     @include bpk-label-1;
///   }

@mixin bpk-label-1 {
  @include _bpk-text-factory(
    $bpk-font-size-base,
    $bpk-line-height-base,
    $bpk-font-weight-bold
  );
}

/// Label-2 text style
///
/// @example scss
///   .selector {
///     @include bpk-label-2;
///   }

@mixin bpk-label-2 {
  @include _bpk-text-factory(
    $bpk-font-size-sm,
    $bpk-line-height-sm,
    $bpk-font-weight-bold
  );
}

/// Label-3 text style
///
/// @example scss
///   .selector {
///     @include bpk-label-3;
///   }

@mixin bpk-label-3 {
  @include _bpk-text-factory(
    $bpk-font-size-xs,
    $bpk-line-height-xs,
    $bpk-font-weight-bold
  );
}

/// Default body text style
///
/// @example scss
///   .selector {
///     @include bpk-body-default;
///   }

@mixin bpk-body-default {
  @include _bpk-text-factory(
    $bpk-font-size-base,
    $bpk-line-height-base,
    $bpk-font-weight-book
  );
}

/// Longform body text style
///
/// @example scss
///   .selector {
///     @include bpk-body-longform;
///   }

@mixin bpk-body-longform {
  @include _bpk-text-factory(
    $bpk-font-size-lg,
    $bpk-line-height-lg,
    $bpk-font-weight-book
  );
}

/// Subheading text style
///
/// @example scss
///   .selector {
///     @include bpk-subheading;
///   }

@mixin bpk-subheading {
  @include _bpk-text-factory(
    $bpk-font-size-xl,
    $bpk-line-height-xl,
    $bpk-font-weight-book
  );
}

/// Editorial 1 text style
///
/// @example scss
///   .selector {
///     @include bpk-editorial-1;
///   }

@mixin bpk-editorial-1 {
  font-family: $bpk-font-family-larken;

  @include _bpk-text-factory(
    $bpk-font-size-xxxxl,
    $bpk-line-height-xxxxl,
    $bpk-font-weight-light
  );
}

/// Editorial 2 text style
///
/// @example scss
///   .selector {
///     @include bpk-editorial-2;
///   }

@mixin bpk-editorial-2 {
  font-family: $bpk-font-family-larken;

  @include _bpk-text-factory(
    $bpk-font-size-xxl,
    $bpk-line-height-xxl,
    $bpk-font-weight-light
  );
}

/// Editorial 3 text style
///
/// @example scss
///   .selector {
///     @include bpk-editorial-3;
///   }

@mixin bpk-editorial-3 {
  font-family: $bpk-font-family-larken;

  @include _bpk-text-factory(
    $bpk-font-size-lg,
    $bpk-line-height-lg,
    $bpk-font-weight-book
  );
}

/// Hero 1 text style
///
/// @example scss
///   .selector {
///     @include bpk-hero-1;
///   }

@mixin bpk-hero-1 {
  @include _bpk-text-factory(
    $bpk-font-size-8-xl,
    $bpk-line-height-8-xl,
    $bpk-font-weight-black,
    $bpk-letter-spacing-hero
  );
}

/// Hero 2 text style
///
/// @example scss
///   .selector {
///     @include bpk-hero-2;
///   }

@mixin bpk-hero-2 {
  @include _bpk-text-factory(
    $bpk-font-size-7-xl,
    $bpk-line-height-7-xl,
    $bpk-font-weight-black,
    $bpk-letter-spacing-hero
  );
}

/// Hero 3 text style
///
/// @example scss
///   .selector {
///     @include bpk-hero-3;
///   }

@mixin bpk-hero-3 {
  @include _bpk-text-factory(
    $bpk-font-size-6-xl,
    $bpk-line-height-6-xl,
    $bpk-font-weight-black,
    $bpk-letter-spacing-hero
  );
}

/// Hero 4 text style
///
/// @example scss
///   .selector {
///     @include bpk-hero-4;
///   }

@mixin bpk-hero-4 {
  @include _bpk-text-factory(
    $bpk-font-size-xxxxxl,
    $bpk-line-height-xxxxxl,
    $bpk-font-weight-black,
    $bpk-letter-spacing-hero
  );
}

/// Hero 5 text style
///
/// @example scss
///   .selector {
///     @include bpk-hero-5;
///   }

@mixin bpk-hero-5 {
  @include _bpk-text-factory(
    $bpk-font-size-xxxxl,
    $bpk-line-height-xxxl,
    $bpk-font-weight-black,
    $bpk-letter-spacing-hero
  );
}

/// Hero 6 text style
///
/// @example scss
///   .selector {
///     @include bpk-hero-6;
///   }

@mixin bpk-hero-6 {
  @include _bpk-text-factory(
    $bpk-font-size-xxxl,
    $bpk-line-height-xxl,
    $bpk-font-weight-black,
    $bpk-letter-spacing-hero
  );
}

/// Level 1 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-1();
///   }

@mixin bpk-heading-1 {
  @include _bpk-text-factory(
    $bpk-font-size-xxxl,
    $bpk-line-height-xxxl,
    $bpk-font-weight-bold
  );
}

/// Level 2 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-2();
///   }

@mixin bpk-heading-2 {
  @include _bpk-text-factory(
    $bpk-font-size-xxl,
    $bpk-line-height-xxl,
    $bpk-font-weight-bold
  );
}

/// Level 3 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-3();
///   }

@mixin bpk-heading-3 {
  @include _bpk-text-factory(
    $bpk-font-size-xl,
    $bpk-line-height-xl-tight,
    $bpk-font-weight-bold
  );
}

/// Level 4 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-4();
///   }

@mixin bpk-heading-4 {
  @include _bpk-text-factory(
    $bpk-font-size-lg,
    $bpk-line-height-lg-tight,
    $bpk-font-weight-bold
  );
}

/// Level 5 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-5();
///   }

@mixin bpk-heading-5 {
  @include _bpk-text-factory(
    $bpk-font-size-base,
    $bpk-line-height-base-tight,
    $bpk-font-weight-bold
  );
}

/// Paragraph.
///
/// @example scss
///   .selector {
///     @include bpk-paragraph();
///   }

@mixin bpk-paragraph {
  margin-top: $bpk-spacing-none;
  margin-bottom: bpk-spacing-base();
}

/// List.
///
/// @example scss
///   .selector {
///     @include bpk-list();
///   }

@mixin bpk-list {
  margin-top: bpk-spacing-base();
  margin-bottom: bpk-spacing-base();
  padding-left: bpk-spacing-lg();
}

/// Nested list. Modifies the bpk-list mixin.
///
/// @require {mixin} bpk-list
///
/// @example scss
///   .selector {
///     @include bpk-list();
///     @include bpk-list--nested();
///   }

@mixin bpk-list--nested {
  margin-top: $bpk-spacing-none;
  margin-bottom: $bpk-spacing-none;
  padding-top: bpk-spacing-md();
  padding-bottom: bpk-spacing-sm();
}

/// List item.
///
/// @example scss
///   .selector {
///     @include bpk-list-item();
///   }

@mixin bpk-list-item {
  margin-top: 0;
  margin-bottom: bpk-spacing-sm();
}

/// Inline link.
///
/// @example scss
///   .selector {
///     @include bpk-link();
///   }

@mixin bpk-link {
  padding: 0;
  border: 0;
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
  appearance: none;

  @include bpk-themeable-property(color, --bpk-link-color, $bpk-text-link-day);

  @include bpk-hover {
    text-decoration: underline;

    @include bpk-themeable-property(
      color,
      --bpk-link-hover-color,
      $bpk-text-link-day
    );
  }

  &:visited {
    @include bpk-themeable-property(
      color,
      --bpk-link-visited-color,
      $bpk-text-link-day
    );
  }

  &:active {
    text-decoration: underline;

    @include bpk-themeable-property(
      color,
      --bpk-link-active-color,
      $bpk-text-link-day
    );
  }
}

/// White link. Modifies the bpk-link mixin.
///
/// @require {mixin} bpk-link
///
/// @example scss
///   .selector {
///     @include bpk-link();
///     @include bpk-link--white();
///   }

@mixin bpk-link--alternate {
  @include bpk-themeable-property(
    color,
    --bpk-link-alternate-color,
    $bpk-text-on-dark-day
  );

  @include bpk-hover {
    @include bpk-themeable-property(
      color,
      --bpk-link-alternate-hover-color,
      $bpk-text-on-dark-day
    );
  }

  &:visited {
    @include bpk-themeable-property(
      color,
      --bpk-link-alternate-visited-color,
      $bpk-text-on-dark-day
    );
  }

  &:active {
    @include bpk-themeable-property(
      color,
      --bpk-link-alternate-active-color,
      $bpk-text-on-dark-day
    );
  }
}

@mixin bpk-link--white {
  @include bpk-link--alternate;
}

/// Active link. Modifies the bpk-link mixin.
///
/// @require {mixin} bpk-link
///
/// @example scss
///   .selector {
///     @include bpk-link();
///     @include bpk-link--active();
///   }

@mixin bpk-link--active {
  color: $bpk-text-link-day;

  &:visited {
    color: $bpk-text-link-day;
  }

  &:active {
    color: $bpk-text-link-day;
  }
}

/// Table.
///
/// @example scss
///   .selector {
///     @include bpk-table();
///   }

@mixin bpk-table {
  width: 100%;
  margin-bottom: bpk-spacing-md();
  border-collapse: collapse;
  table-layout: fixed;

  @include bpk-border-sm($bpk-line-day, '');
}

/// Alternate table style.
/// @require {mixin} bpk-table
///
/// @example scss
///   .selector {
///     @include bpk-table();
///     @include bpk-table--alternate();
///   }

@mixin bpk-table--alternate {
  @include bpk-border-sm($bpk-line-day, '');
}

/// Table cell.
///
/// @example scss
///   .selector {
///     @include bpk-table__cell();
///   }

@mixin bpk-table__cell {
  padding: bpk-spacing-base();
}

/// Table head cell. Modifies the bpk-table__cell mixin.
///
/// @require {mixin} bpk-table__cell
///
/// @example scss
///   .selector {
///     @include bpk-table__cell();
///     @include bpk-table__cell--head();
///   }

@mixin bpk-table__cell--head {
  background-color: $bpk-canvas-contrast-day;
  text-align: left;

  @include bpk-label-1;

  @include bpk-rtl {
    text-align: right;
  }
}

/// Alternate table head cell. Modifies the bpk-table__cell mixin.
///
/// @require {mixin} bpk-table__cell
///
/// @example scss
///   .selector {
///     @include bpk-table__cell();
///     @include bpk-table__cell--head-alternate();
///   }

@mixin bpk-table__cell--head-alternate {
  background-color: $bpk-canvas-day;
  text-align: left;

  @include bpk-text--bold;

  @include bpk-rtl {
    text-align: right;
  }
}

/// Code.
///
/// @example scss
///   .selector {
///     @include bpk-code();
///   }

@mixin bpk-code {
  display: inline;
  padding: 0 bpk-spacing-sm();
  background-color: $bpk-surface-highlight-day;
  color: $bpk-text-primary-day;
  text-align: left;
  white-space: nowrap;
  vertical-align: bottom;

  @include bpk-border-radius-xs;

  @include bpk-rtl {
    direction: ltr;
  }
}

/// Alternate code style suited for display on non-white backgrounds.
///
/// @example scss
///   .selector {
///     @include bpk-code();
///     @include bpk-code--alternate();
///   }

@mixin bpk-code--alternate {
  background-color: $bpk-canvas-contrast-day;
  text-shadow: none;
}

/// Code block. Modifies the bpk-code mixin.
///
/// @require {mixin} bpk-code
///
/// @example scss
///   .selector {
///     @include bpk-code();
///     @include bpk-code--block();
///   }

@mixin bpk-code--block {
  display: block;
  margin: 0;
  padding: 0;
  background-color: transparent;
  white-space: inherit;
  overflow: auto;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

/// Pre (code block wrapper).
///
/// @example scss
///   .selector {
///     @include bpk-code__pre();
///   }

@mixin bpk-code__pre {
  margin: 0 0 bpk-spacing-base();
  padding: bpk-spacing-lg();
  background-color: $bpk-surface-highlight-day;

  @include bpk-border-radius-xs;
}

/// Pre (code block wrapper) alternate style.
///
/// @example scss
///   .selector {
///     @include bpk-code__pre();
///     @include bpk-code__pre--alternate();
///   }

@mixin bpk-code__pre--alternate {
  background-color: transparent;

  @include bpk-border-sm($bpk-line-day);
}

/// Blockquote.
///
/// @example scss
///   .selector {
///     @include bpk-blockquote();
///   }

@mixin bpk-blockquote {
  margin: 0 0 bpk-spacing-base() 0;
  padding: bpk-spacing-lg();

  @include bpk-border-left-lg($bpk-core-accent-day);
  @include bpk-border-left-lg(
    var(--bpk-blockquote-bar-color, $bpk-core-accent-day)
  );

  @include bpk-rtl {
    padding: bpk-spacing-lg();
    border-left: 0;

    @include bpk-border-right-lg($bpk-core-accent-day);
    @include bpk-border-right-lg(
      var(--bpk-blockquote-bar-color, $bpk-core-accent-day)
    );
  }

  > *:last-child {
    margin-bottom: 0;
  }
}

/// Adds additional spacing above and below blockquotes. Modifies the bpk-blockquote mixin.
///
/// @require {mixin} bpk-blockquote
///
/// @example scss
///   .selector {
///     @include bpk-blockquote();
///     @include bpk-blockquote--extra-spacing();
///   }

@mixin bpk-blockquote--extra-spacing {
  margin-top: bpk-spacing-xl();
  margin-bottom: bpk-spacing-xl();
}