_config.scss

@use "sass:map";
@use "sass:math";
@use "sass:meta";

$_font-size: null;
$_font-stack: null;
$_line-height: null;
$_color: null;
$_whitespace: null;
$_font-size-scale: null;
$_whitespace-scale: null;

/**
 * Call this mixin first if you want to override GutenType's default config:
 *
 *   ```
 *   @use "guten-type";
 *
 *   main {
 *     @include guten-type.set(
 *       $font-size: 20px,
 *       $font-stack: (
 *         "serif": (Baskerville, serif),
 *         "sans": (Helvetica, sans-serif),
 *         "mono": (Consolas, monospace),
 *       )
 *     );
 *
 *     @include guten-type.press();
 *   }
 *   ```
 *
 * @param $font-size
 *   - The body text's font-size. Must be in px. This is automatically scaled
 *     smaller for elements like captions, code, etc.
 *
 * @param $font-stack
 *   - The various serif, sans-serif, and monospace fonts used for all text.
 *
 * @param $line-height
 *   - The body text's line-height. This is automatically scaled smaller for
 *     headings.
 *
 * @param $color
 *   - `normal` is used for text. `light` is used for lines (tables, hr, etc.).
 *     `action` is used for links.
 *
 * @param $whitespace
 *   - The size of line breaks. Must be in rem.
 *
 * @param $font-size-scale
 *  - The typographic scale for heading font-size.
 *
 *    E.g. given a `start` value of 4, the scale starts at h4. h4's font-size
 *    gets calculated as follows:
 *    h4-font-size = $font-size * `base`.
 *
 *    Then, the remaining headings scale exponentially:
 *    h3-font-size = h4-font-size * `ratio`^1
 *    h2-font-size = h4-font-size * `ratio`^2
 *    h1-font-size = h4-font-size * `ratio`^3
 *
 * @param $whitespace-scale
 *   - Same concept as $font-size-scale.
 */
@mixin set(
  $font-size: null,
  $font-stack: null,
  $line-height: null,
  $color: null,
  $whitespace: null,
  $font-size-scale: null,
  $whitespace-scale: null
) {
  @if $font-size {
    @include _expect-same-unit(font-size(), $font-size, "$font-size");
    $_font-size: $font-size !global;
  }

  @if $font-stack {
    @include _expect-same-keys(font-stack(), $font-stack, "$font-stack");
    $_font-stack: $font-stack !global;
  }

  @if $line-height {
    @include _expect-same-unit(line-height(), $line-height, "$line-height");
    $_line-height: $line-height !global;
  }

  @if $color {
    @include _expect-same-keys(color(), $color, "$color");
    $_color: $color !global;
  }

  @if $whitespace {
    @include _expect-same-unit(whitespace(), $whitespace, "$whitespace");
    $_whitespace: $whitespace !global;
  }

  @if $font-size-scale {
    @include _expect-same-keys(
      font-size-scale(),
      $font-size-scale,
      "$font-size-scale"
    );
    $_font-size-scale: $font-size-scale !global;
  }

  @if $whitespace-scale {
    @include _expect-same-keys(
      whitespace-scale(),
      $whitespace-scale,
      "$whitespace-scale"
    );
    $_whitespace-scale: $whitespace-scale !global;
  }
}

@function font-size() {
  @return $_font-size or 18px;
}

@function font-stack($key: null) {
  $map: $_font-stack or
    (
      "serif": (
        "Iowan Old Style",
        "Palatino Linotype",
        "URW Palladio L",
        P052,
        serif,
      ),
      "sans": (
        Inter,
        Roboto,
        "Helvetica Neue",
        "Arial Nova",
        "Nimbus Sans",
        Arial,
        sans-serif,
      ),
      "mono": (
        ui-monospace,
        "Cascadia Code",
        "Source Code Pro",
        Menlo,
        Consolas,
        "DejaVu Sans Mono",
        monospace,
      ),
    );

  @if ($key) {
    @return map.get($map, $key);
  } @else {
    @return $map;
  }
}

@function line-height() {
  @return $_line-height or 1.5;
}

@function color($key: null) {
  $map: $_color or
    (
      "normal": rgba(1, 2, 3, 0.95),
      "light": rgba(0, 0, 0, 0.55),
      "action": rgba(1, 2, 3, 0.95),
    );

  @if ($key) {
    @return map.get($map, $key);
  } @else {
    @return $map;
  }
}

@function whitespace() {
  @return $_whitespace or 1rem * line-height();
}

@function font-size-scale($key: null) {
  $map: $_font-size-scale or
    (
      "start": 4,
      "base": 1.33333,
      "ratio": 1.25,
    );

  @if ($key) {
    @return map.get($map, $key);
  } @else {
    @return $map;
  }
}

@function whitespace-scale($key: null) {
  $map: $_whitespace-scale or
    (
      "start": 4,
      "base": 1.5,
      "ratio": 1.33333,
    );

  @if ($key) {
    @return map.get($map, $key);
  } @else {
    @return $map;
  }
}

////////////////////////////////////////////////////////////////////////////////
// Private
////////////////////////////////////////////////////////////////////////////////

// Validate that the given numbers have the same unit.
@mixin _expect-same-unit($var1, $var2, $var2Name) {
  @include _expect-same-type($var1, $var2, $var2Name);

  $unit1: math.unit($var1);
  $unit2: math.unit($var2);

  @if $unit1 != $unit2 {
    @if $unit1 == "" {
      @include error("expected #{$var2Name} to be unitless.");
    } @else {
      @include error("expected #{$var2Name}'s units to be #{$unit1}.");
    }
  }
}

// Validate that the given maps have the same keys.
@mixin _expect-same-keys($var1, $var2, $var2Name) {
  @include _expect-same-type($var1, $var2, $var2Name);

  @each $key in map.keys($var1) {
    @if not map.has-key($var2, $key) {
      @include _error("expected #{$var2Name} to have a value for #{$key}.");
    }

    $value1: map.get($var1, $key);
    $value2: map.get($var2, $key);

    @include _expect-same-type($value1, $value2, "#{$var2Name}.#{$key}");

    @if meta.type-of($value1) == "number" {
      @include _expect-same-unit($value1, $value2, "#{$var2Name}.#{$key}");
    }
  }
}

// Validate that the given vars are the same type.
@mixin _expect-same-type($var1, $var2, $var2Name) {
  $type1: meta.type-of($var1);
  $type2: meta.type-of($var2);

  @if $type1 != $type2 {
    @include _error("expected #{$var2Name} to be a #{$type1}.");
  }
}

// Throws a formatted error message.
@mixin _error($message) {
  @error 'guten-type.set(): #{$message}';
}