@skyscanner/backpack-web 26.0.0 → 27.0.0

package/bpk-mixins/src/mixins/_typography.scss

@@ -0,0 +1,1035 @@
+/*
+ * 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.
+ */
+
+@import '../bonds.scss';
+@import './borders.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
+  );
+}
+
+/// 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-bold,
+    $bpk-letter-spacing-tight
+  );
+}
+
+/// 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-bold,
+    $bpk-letter-spacing-tight
+  );
+}
+
+/// 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-bold,
+    $bpk-letter-spacing-tight
+  );
+}
+
+/// 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-bold,
+    $bpk-letter-spacing-tight
+  );
+}
+
+/// 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-xxxxl,
+    $bpk-font-weight-bold,
+    $bpk-letter-spacing-tight
+  );
+}
+
+/// 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();
+}