assets/stylesheets/_typography.scss

// ---
// version: 7
// ---

@import "variables";
@import "mixins/breakpoints";
@import "mixins/md-typography";
@import "mixins/spacing";

.gl-docs {
  p,
  ul,
  ol,
  pre,
  blockquote {
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: normal;
    margin-top: 0;
    margin-bottom: 1.5em;
  }

  blockquote {
    background-color: $gds-gray-50;
    color: $gds-black;
    border: solid 1px $gray-100;
    border-radius: 0.313rem;
    margin: 1rem 0;
    padding: 1rem;

    ul {
      margin-bottom: 0;
    }
  }

  ul,
  ol {
    margin-top: 0.5rem;
    margin-left: 0;

    li {
      margin-bottom: 0.5rem;
    }
  }

  ol {
    ol {
      list-style-type: lower-alpha;
      ol {
        list-style-type: lower-roman;
      }
    }
  }

  ul ul,
  ol ol,
  ul ol,
  ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  b,
  strong,
  em,
  small {
    line-height: 1;
  }

  sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  // Keyboard input

  kbd {
    background-color: $gray-700;
    border-radius: 4px;
    color: $white;
    line-height: 1;
    overflow-wrap: break-word;
    padding: 2px 4px;
  }

  // Highlighted text

  mark {
    background-color: $blue-100;
  }

  // Code

  *:not(pre) > code {
    background-color: $gray-50;
    border-radius: 4px;
    line-height: 1;
    overflow-wrap: break-word;
    padding: 2px 4px;
    transition: background-color 0.15s linear;
  }

  pre {
    background-color: desaturate($theme-indigo-950, 20%);
    border-radius: 4px;
    color: $white;
    padding: 1rem;
  }

  .clip-btn {
    fill: $white;
    background-color: $pre-code-color;
    border: 0;
    svg {
      opacity: 0.5;
      transition: opacity 0.3s ease-in;
      pointer-events: none;
    }
    @media all and (max-width: $bp-sm) {
      display: none;
    }

    &:hover {
      svg {
        opacity: 1;
      }
    }
  }

  // Badge tier

  .badge-tier {
    color: $red-500;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;

    &:hover {
      border-bottom-color: $red-700;
      color: $red-700;
    }
  }

  .introduced-in {
    border-left: 4px solid $theme-indigo-200;
    padding-left: 0.75rem;
    margin-bottom: 1.5rem;

    p,
    li,
    a {
      font-size: 0.875rem;
    }
  }

  hr {
    border: 0;
    border-top: 1px solid rgba($theme-indigo-900, 0.16);
    height: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;

    @include breakpoint(md) {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }
  }

  @include gl-font-size-markdown;
  @include gl-line-height-24;
  @include gl-font-regular;
  @include gl-font-weight-normal;

  -webkit-font-smoothing: auto;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .gl-h1,
  .gl-h2,
  .gl-h3,
  .gl-h4,
  .gl-h5,
  .gl-h6 {
    @include gl-font-weight-bold;
    @include gl-mb-3;

    // Permalinks on header elements.
    .anchor {
      transition: all 0.3s;
      background: url("/assets/images/icon_anchor.svg") center center / contain
        no-repeat;
      opacity: 0;
      display: inline-block;
      width: 1em;
      height: 1em;
      max-height: 2rem;
      vertical-align: middle;
      border-bottom: 0;
      margin-left: 0.25rem;
      margin-top: -0.25rem;
      border-bottom: 0;
    }

    &:hover {
      .anchor {
        border-bottom: 0;
        opacity: 1;
      }
    }
  }

  h3,
  h4,
  h5,
  h6,
  .gl-h3,
  .gl-h4,
  .gl-h5,
  .gl-h6 {
    @include gl-mt-6;
    @include gl-mb-3;
  }

  h1,
  .gl-h1 {
    @include gl-font-size-markdown-h1;
    @include gl-line-height-32;
    @include gl-fluid-font-size(
      $min: $gl-font-size-markdown-h1-md,
      $max: $gl-font-size-markdown-h1-xl
    );
    @include gl-fluid-line-height(
      $min: $gl-line-height-36,
      $max: $gl-line-height-52
    );
    @include gl-mt-0;
  }

  h2,
  .gl-h2 {
    @include gl-font-size-markdown-h2;
    @include gl-line-height-28;
    @include gl-fluid-font-size(
      $min: $gl-font-size-markdown-h2-md,
      $max: $gl-font-size-markdown-h2-xl
    );
    @include gl-fluid-line-height(
      $min: $gl-line-height-28,
      $max: $gl-line-height-36
    );
    @include gl-mt-6;
  }

  h3,
  .gl-h3 {
    @include gl-font-size-markdown-h3;
    @include gl-line-height-24;
    @include gl-fluid-font-size(
      $min: $gl-font-size-markdown-h3-md,
      $max: $gl-font-size-markdown-h3-xl
    );
    @include gl-fluid-line-height(
      $min: $gl-line-height-24,
      $max: $gl-line-height-28
    );
  }

  h4,
  .gl-h4 {
    @include gl-font-size-markdown;
    @include gl-line-height-20;
  }

  h5,
  .gl-h5,
  h6,
  .gl-h6 {
    @include gl-font-size-markdown-sm;
    @include gl-line-height-20;
  }

  h6,
  .gl-h6 {
    @include gl-text-gray-700;
  }

  p,
  .gl-paragraph {
    @include gl-mt-0;
    @include gl-mb-0;

    + p,
    + .gl-paragraph {
      @include gl-mt-5;
    }

    &.sm {
      @include gl-font-size-markdown-sm;
      @include gl-line-height-20;
    }
  }

  .sm {
    @include gl-font-size-markdown-sm;
    @include gl-line-height-20;
  }

  .monospace {
    @include gl-font-monospace;
    @include gl-font-size-monospace-lg;
    @include gl-line-height-24;

    &.sm {
      @include gl-font-size-monospace;
      @include gl-line-height-20;
    }
  }

  // Links

  a {
    border-bottom: 1px solid rgba($purple-700, 0.24);
    color: $purple-700;
    text-decoration: none;
    transition: color 0.15s linear, border-bottom-color 0.15s linear;

    &:hover {
      border-bottom: 1px solid $purple-900;
      color: $purple-900;

      code {
        background-color: $theme-indigo-100;
      }
    }
  }

  // 	Headings
  // For the system of .h1-.h6 classes to properly overwrite the base tag, you must include all properties transformed
  // at every breakpoint, even if those properties are the default or assigned at an earlier breakpoint.

  // See the headings section in _variables.scss for the responsive properties.
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    margin-top: 2.5rem;
    text-rendering: optimizelegibility;
  }

  // Responsive Headers

  h1 {
    color: $theme-indigo-900;
    font-weight: 600;
    margin-top: 0;
    text-transform: none;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 1.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    h1 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h1 {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h1 {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  h2 {
    color: $theme-indigo-900;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 1.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    h2 {
      font-size: 1.5rem;
      line-height: 1.25;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h2 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h2 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  h3 {
    color: $theme-indigo-900;
    font-weight: 600;
    text-transform: none;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1rem;
  }
  @media screen and (min-width: $bp-sm) {
    h3 {
      font-size: 1.25rem;
      line-height: 1.4;
      margin-bottom: 1rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h3 {
      font-size: 1.5rem;
      line-height: 1.273;
      margin-bottom: 1rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h3 {
      font-size: 1.5rem;
      line-height: 1.273;
      margin-bottom: 1rem;
    }
  }
  h4 {
    color: $theme-indigo-900;
    text-transform: none;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }
  @media screen and (min-width: $bp-sm) {
    h4 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.75rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h4 {
      font-size: 1.125rem;
      line-height: 1.375;
      margin-bottom: 0.75rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h4 {
      font-size: 1.125rem;
      line-height: 1.375;
      margin-bottom: 0.75rem;
    }
  }
  h5 {
    color: $theme-indigo-900;
    font-weight: 700;
    text-transform: none;
    font-size: 0.875rem;
    line-height: 1.429;
    margin-bottom: 0.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    h5 {
      font-size: 0.875rem;
      line-height: 1.429;
      margin-bottom: 0.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h5 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h5 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
  }
  h6 {
    color: $theme-indigo-900;
    text-transform: none;
    font-size: 0.875rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
  }
  @media screen and (min-width: $bp-sm) {
    h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }

  // These declarations are kept separate from and placed after
  // the previous tag-based declarations so that the classes beat the tags in
  // the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.

  .h1 {
    color: $theme-indigo-900;
    font-weight: 600;
    margin-top: 0;
    text-transform: none;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 1.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h1 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h1 {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h1 {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  .h2 {
    color: $theme-indigo-900;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 1.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h2 {
      font-size: 1.5rem;
      line-height: 1.25;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h2 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h2 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  .h3 {
    color: $theme-indigo-900;
    font-weight: 600;
    text-transform: none;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h3 {
      font-size: 1.25rem;
      line-height: 1.4;
      margin-bottom: 1rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h3 {
      font-size: 1.5rem;
      line-height: 1.273;
      margin-bottom: 1rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h3 {
      font-size: 1.5rem;
      line-height: 1.273;
      margin-bottom: 1rem;
    }
  }
  .h4 {
    color: $theme-indigo-900;
    text-transform: none;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h4 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.75rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h4 {
      font-size: 1.125rem;
      line-height: 1.375;
      margin-bottom: 0.75rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h4 {
      font-size: 1.125rem;
      line-height: 1.375;
      margin-bottom: 0.75rem;
    }
  }
  .h5 {
    color: $theme-indigo-900;
    font-weight: 700;
    text-transform: none;
    font-size: 0.875rem;
    line-height: 1.429;
    margin-bottom: 0.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h5 {
      font-size: 0.875rem;
      line-height: 1.429;
      margin-bottom: 0.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h5 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h5 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
  }
  .h6 {
    color: $theme-indigo-900;
    text-transform: none;
    font-size: 0.875rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
}