_typography.scss

/* ==========================================================================
    tools.typography
/ =========================================================================== */

@use 'sass:meta';
@use 'sass:math';
@use '../settings/defaults';
@use 'rem';

/**
 * Font size
 * Generates a rem font-size and a baseline-compatible unitless line-height
 * from a pixel font-size value. Basic usage is simply:
@include typography.font-size(18px);
 * You can force a specific line-height by passing it as the second argument:
@include typography.font-size(16px, 1);
 * You can also modify the line-height by increments, while staying in the
 * baseline grid, by setting the `$modifier` parameter. It takes a positive
 * or negative integer, and it will add or remove 'lines' to the  generated
 * line-height. This is the recomended way to do it, unless you really need
 * an absolute value. i.e.:
// add 2 lines:
@include typography.font-size(24px, $modifier: +2);

// subtract 1 line:
@include typography.font-size(24px, $modifier: -1);
 */
@mixin font-size(
  $font-size,
  $line-height: auto,
  $modifier: 0,
  $important: false
) {
  @if meta.type-of($font-size) == number {
    @if math.unit($font-size) != 'px' {
      @error '`#{$font-size}` needs to be a pixel value.';
    }
  } @else {
    @error '`#{$font-size}` needs to be a number.';
  }

  @if $important == true {
    $important: '!important';
  } @else if $important == false {
    $important: null;
  } @else {
    @error '`#{$important}` needs to be `true` or `false`.';
  }
  font-size: rem.convert($font-size);

  @if $line-height == 'auto' {
    // Define how many grid lines each text line should span.
    // By default, we set it to the minimum number of lines necessary
    // in order to contain the defined font-size, +1 for some breathing room.
    // This can be modified with the `$modifier` parameter.
    $lines: math.ceil(math.div($font-size, defaults.$baseline)) + $modifier + 1;
    $line-height: $lines * defaults.$baseline;
    line-height: math.div($line-height, $font-size) $important;
  } @else {
    @if (meta.type-of($line-height) == number) or
      ($line-height == 'inherit') or
      ($line-height == 'normal')
    {
      line-height: $line-height $important;
    } @else if $line-height != 'none' and $line-height != false {
      @error 'Oh noes! `#{$line-height}` is not a valid value for `$line-height`.';
    }
  }
}