assets/sass/abstracts/_functions.scss

@charset "UTF-8";

// Gradient hack to get our custom underline to wrap:
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@function underline-hack($color) {
  // [deprecated] Calculate lighter underline color compared to text
  // color by mix()'ing with background (#fff) to give the impression
  // of opacity but with MUCH better compatibility.
  // $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);

  // Less compatible but better for light/dark mode switching.
  // We fall back to non-alpha hex colors with postcss-color-rgba-fallback to mitigate this.
  $color-opaque-alpha: rgba($color, $link-underline-opacity / 100%);

  // Return non-gradient linear-gradient():
  @return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
}

// Web fonts (see components/_typography.scss)
@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap, $variable: false) {
  @font-face {
    font-family: $family;
    font-style: $style;
    font-weight: $weight;
    font-display: $display;

    @if $variable {
      // all browsers that support variable fonts also support woff2, so a woff file is unncessary
      // draft spec for formats: https://www.w3.org/TR/css-fonts-4/#src-desc
      src: url($base-url + $src + ".woff2") format("woff2-variations"), url($base-url + $src + ".woff2") format("woff2");
    } @else {
      src: url($base-url + $src + ".woff2") format("woff2"), url($base-url + $src + ".woff") format("woff");
    }

    // Allow additional rules to be passed in:
    @content;
  }
}

// Simple dark/light theme switching via <body> class and $themes map in abstracts/_themes.scss
// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
//
// Note: ONLY color rules should go in here (eg: just `border-color`, not the whole `border` rule)
@mixin colors() {
  @each $theme, $map in $themes {
    body.#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), "#{$key}");
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value,
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

// Just @include colors() and call c() when a rule depends on which theme is active.
// The argument is a key in the $themes array in abstracts/_themes.
//
//    img {
//      border: 1px solid;
//
//      @include colors() {
//        border-color: c(medium-dark);   // ONLY the color rules here.
//      }
//    }
//
@function c($key) {
  @return map-get($theme-map, $key);
}