_mixins.scss

@mixin custom-foundation-typography($reset: true) {
  @if ($reset) {
    // Typography resets
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    form,
    p,
    blockquote,
    th,
    td {
      margin: 0;
      padding: 0;
    }
  }

  @if ($reset != only) {
    // Paragraphs
    p {
      margin-bottom: $paragraph-margin-bottom;

      font-size: inherit;
      line-height: $paragraph-lineheight;
      text-rendering: $paragraph-text-rendering;
    }

    // Emphasized text
    em,
    i {
      font-style: italic;
      line-height: inherit;
    }

    // Strong text
    strong,
    b {
      font-weight: $global-weight-bold;
      line-height: inherit;
    }

    // Small text
    small {
      font-size: $small-font-size;
      line-height: inherit;
    }

    // Headings
    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6 {
      font-family: $header-font-family;
      font-style: $header-font-style;
      font-weight: $header-font-weight;
      color: $header-color;
      text-rendering: $header-text-rendering;

      small {
        line-height: 0;
        color: $header-small-font-color;
      }
    }

    // Heading styles
    @each $size, $headers in $header-styles {
      @include breakpoint($size) {
        @each $header, $header-defs in $headers {
          $font-size-temp: 1rem;

          #{$header}, .#{$header} {
            @if map-has-key($header-defs, font-size) {
              $font-size-temp: rem-calc(map-get($header-defs, font-size));
              font-size: $font-size-temp;
            } @else if map-has-key($header-defs, fs) {
              $font-size-temp: rem-calc(map-get($header-defs, fs));
              font-size: $font-size-temp;
            } @else if $size == $-zf-zero-breakpoint {
              font-size: $font-size-temp;
            }

            @if map-has-key($header-defs, line-height) {
              line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);
            } @else if map-has-key($header-defs, lh) {
              line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);
            } @else if $size == $-zf-zero-breakpoint {
              line-height: unitless-calc($header-lineheight, $font-size-temp);
            }

            @if map-has-key($header-defs, margin-top) {
              margin-top: rem-calc(map-get($header-defs, margin-top));
            } @else if map-has-key($header-defs, mt) {
              margin-top: rem-calc(map-get($header-defs, mt));
            } @else if $size == $-zf-zero-breakpoint {
              margin-top: 0;
            }

            @if map-has-key($header-defs, margin-bottom) {
              margin-bottom: rem-calc(map-get($header-defs, margin-bottom));
            } @else if map-has-key($header-defs, mb) {
              margin-bottom: rem-calc(map-get($header-defs, mb));
            } @else if $size == $-zf-zero-breakpoint {
              margin-bottom: rem-calc($header-margin-bottom);
            }
          }
        }
      }
    }

    // Links
    a {
      line-height: inherit;
      color: $anchor-color;
      text-decoration: $anchor-text-decoration;

      cursor: pointer;

      &:hover,
      &:focus {
        color: $anchor-color-hover;

        @if $anchor-text-decoration-hover != $anchor-text-decoration {
          text-decoration: $anchor-text-decoration-hover;
        }
      }

      img {
        border: 0;
      }
    }

    // Horizontal rule
    hr {
      clear: both;

      max-width: $hr-width;
      height: 0;
      margin: $hr-margin;

      border-top: 0;
      border-right: 0;
      border-bottom: $hr-border;
      border-left: 0;
    }

    // Lists
    ul,
    ol,
    dl {
      margin-bottom: $list-margin-bottom;
      list-style-position: $list-style-position;
      line-height: $list-lineheight;
    }

    // List items
    li {
      font-size: inherit;
    }

    // Unordered lists
    ul {
      margin-#{$global-left}: $list-side-margin;
      list-style-type: $list-style-type;
    }

    // Ordered lists
    ol {
      margin-#{$global-left}: $list-side-margin;
    }

    // Nested unordered/ordered lists
    ul, ol {
      & & {
        margin-#{$global-left}: $list-nested-side-margin;
        margin-bottom: 0;
      }
    }

    // Definition lists
    dl {
      margin-bottom: $defnlist-margin-bottom;

      dt {
        margin-bottom: $defnlist-term-margin-bottom;
        font-weight: $defnlist-term-weight;
      }
    }

    // Blockquotes
    blockquote {
      margin: 0 0 $paragraph-margin-bottom;
      padding: $blockquote-padding;
      border-#{$global-left}: $blockquote-border;

      &, p {
        line-height: $paragraph-lineheight;
        color: $blockquote-color;
      }
    }

    // Citations
    cite {
      display: block;
      font-size: $cite-font-size;
      color: $cite-color;

      &:before {
        content: $cite-pseudo-content;
      }
    }

    // Abbreviations
    abbr, abbr[title] {
      border-bottom: $abbr-underline;
      cursor: help;
      text-decoration: none;
    }

    // Figures
    figure {
      margin: 0;
    }

    // Code
    code {
      padding: $code-padding;

      border: $code-border;
      background-color: $code-background;

      font-family: $code-font-family;
      font-weight: $code-font-weight;
      color: $code-color;
    }

    // Keystrokes
    kbd {
      margin: 0;
      padding: $keystroke-padding;

      background-color: $keystroke-background;

      font-family: $keystroke-font;
      color: $keystroke-color;

      @if has-value($keystroke-radius) {
        border-radius: $keystroke-radius;
      }
    }
  }
}

frontend.scss

// Utilities and variables.
@import "~foundation-sites/scss/foundation";
@import "variables";
@import "mixins";

// Foundation
@include foundation-global-styles;
@include custom-foundation-typography($reset: only);
@include foundation-forms;

main.scss

// Utilities and variables.
@import "~foundation-sites/scss/foundation";
@import "variables";
@import "utils/foundation";

// Foundation
// @note this is included in frontend.scss so not to affect gutenberg.
// @include foundation-global-styles;

@include foundation-xy-grid-classes;
// @note this is using a split version to avoid overriding gutenberg selectors.
@include custom-foundation-typography($reset: false);
@include foundation-typography-helpers;
@include foundation-text-alignment;
@include foundation-print-styles;
@include foundation-button;
@include foundation-accordion;
// @include foundation-accordion-menu;
// @include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
// @include foundation-media-object;
// @include foundation-off-canvas;
// @include foundation-orbit;
@include foundation-pagination;
// @include foundation-progress-bar;
// @include foundation-slider;
// @include foundation-sticky;
@include foundation-reveal;
// @include foundation-switch;
@include foundation-table;
@include foundation-tabs;
// @include foundation-thumbnail;
@include foundation-title-bar;
// @include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-flex-classes;