Update sass reset and componets to use modern css and internal mixins to replace typey.

assets/sass/_fonts.scss

@@ -5,30 +5,23 @@
 // browser. Because of the bandwidth and rendering resources required, web fonts
 // should be used with care.
 //
-// Numerous resources for web fonts can be found on Google. Here are a few
+// Numerous resources for web fonts can be found on the web. Here are a few
 // websites where you can find Open Source fonts to download:
-// - http://www.fontsquirrel.com/fontface
+// - https://www.fontsquirrel.com/
-// - http://www.theleagueofmoveabletype.com
+// - https://www.theleagueofmoveabletype.com
 // - https://fonts.google.com
 //
-// In order to use these fonts, you will need to convert them into formats
+// In order to use fonts on a web site you will need to convert them into woff2 format.
-// suitable for web fonts. We recommend the free-to-use Font Squirrel's
+// Font Squirrel's Font-Face Generator is a good option:
-// Font-Face Generator:
+//   https://www.fontsquirrel.com/tools/webfont-generator
-//   http://www.fontsquirrel.com/fontface/generator
 //
 // The following is an example @font-face declaration. This font can then be
 // used in any ruleset using a property like this:  font-family: Example, serif;
 //
-// Since we're using Sass, you'll need to declare your font faces here, then you
-// can add them to the font variables in the _init.scss partial.
-
 // @font-face {
 //   font-family: 'Example';
-//   src: url('../fonts/example.eot');
+//   src: url('../fonts/example.woff2') format('woff2');
-//   src: url('../fonts/example.eot?iefix') format('eot'),
-//     url('../fonts/example.woff') format('woff'),
-//     url('../fonts/example.ttf') format('truetype'),
-//     url('../fonts/example.svg#webfontOkOndcij') format('svg');
 //   font-weight: normal;
 //   font-style: normal;
+//   font-display: swap;
 // }

assets/sass/_variables.scss

@@ -2,8 +2,6 @@
 
 // Variables
 
-// Set variables for this site before a library sets its !default value.
-
 // Font faces, stacks and sizes.
 
 // Font styling and line heights are controlled by the several variables that
@@ -12,28 +10,54 @@
 // homepage](https://github.com/jptaranto/typey).
 
 // The font size set on the root html element.
-$base-font-size:    18px;
+// Specify unitless, it will be recalculated as %.
+$base-font-size:      18;
 
-// The base line height determines the basic unit of vertical rhythm.
+// Base and heading line height, unitless.
-$base-line-height:  $base-font-size * 1.5;
+$base-line-height:    1.5;
+$heading-line-height: 1.3;
+
+// The pt font-size to be used for printing.
+$print-font-size:     12pt;
 
 // The font sizes in our type hierarchy as tee shirt sizes.
-$font-size: (
+// Size m is base.
-  xxl:              36px,
+$font-size-fixed: (
-  xl:               28px,
+  xxxxl:      2.778rem,
-  l:                22px,
+  xxxl:       2.335rem,
-  m:                $base-font-size,
+  xxl:        2rem,
-  s:                16px,
+  xl:         1.556rem,
-  xs:               14px,
+  l:          1.223rem,
+  m:          1rem,
+  s:          0.889rem,
+  xs:         0.778rem,
 );
 
-// Typey allows you to alter font weights site-wide with this map.
+// The responsive font sizes in our type hierarchy as tee shirt sizes.
+// Size m is base.
+$font-size-fluid: (
+  xxxxl:      clamp(1.80rem, calc(1.45rem + 1.73vw), 2.80rem),
+  xxxl:       clamp(1.60rem, calc(1.35rem + 1.27vw), 2.33rem),
+  xxl:        clamp(1.42rem, calc(1.24rem + 0.90vw), 1.94rem),
+  xl:         clamp(1.27rem, calc(1.14rem + 0.62vw), 1.62rem),
+  l:          clamp(1.13rem, calc(1.05rem + 0.39vw), 1.35rem),
+  m:          1rem,
+  s:          0.889rem,
+  xs:         0.778rem,
+);
+
+// Set the font sizes to use, fixed or fluid.
+$font-size: $font-size-fixed;
+//$font-size: $font-size-fluid;
+
+// Font weights.
 $font-weight: (
-  bold:             bold,
+  bolder:     900,
-  medium:           500,
+  bold:       700,
-  normal:           normal,
+  medium:     500,
-  light:            300,
+  normal:     400,
-  lighter:          lighter,
+  light:      300,
+  lighter:    200,
 );
 
 // The following font family declarations use widely available fonts.
@@ -53,8 +77,6 @@ $garamond:        Garamond, Charter, 'Times New Roman', serif;
 $verdana:         Verdana, Tahoma, 'DejaVu Sans', sans-serif;
 $tahoma:          Tahoma, Verdana, 'DejaVu Sans', sans-serif;
 $helvetica:       Helvetica, Arial, 'Nimbus Sans L', sans-serif;
-$arial:           Arial, Helvetica, 'Nimbus Sans L', sans-serif;
-$impact:          Impact, 'Arial Narrow', Helvetica, sans-serif;
 $lucida:          'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif;
 $futura:          Futura, 'Century Gothic', AppleGothic, sans-serif;
 
@@ -64,81 +86,66 @@ $system-ui:       system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Rob
 // Monospace font stacks.
 // For an explanation of why "sans-serif" is at the end of this list, see
 // http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
-// $menlo:           Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
 $menlo:           Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif;
 
-// The font faces you specify in the $typefaces map can be used in the
+$font-family: (
-// typeface() mixin.
+  body:       $garamond,
-$typefaces: (
+  headings:   $futura,
-  body: (
+  alt:        $system-ui,
-    font-family: $garamond,
+  monospace:  $menlo,
-  ),
+);
-  headings: (
-    font-family: $futura,
-  ),
-  monospace: (
-    font-family: $menlo,
-  ),
-  compact: (
-    font-family: $impact,
-    weight: bold,
-    case: uppercase,
-    // We could also specify the following property:
-    // letter-spacing: .5px,
-  ),
-); // stylelint-disable indentation
-
-// Output a horizontal grid to help with debugging typography.
-$typey-debug: false;
-$with-wireframes: false;
-
-// The length unit in which to output font size and margin values.
-// Supported values: px, em, rem.
-$base-unit:         'rem';
-
-// px fallbacks for rem units are needed for IE 8 and earlier.
-$rem-fallback:      false;
-
-// We have separate print file.
-$auto-print-sizing: false;
 
 // Breakpoints
-
 // Use the `respond-to()` mixin to use named breakpoints.
-
 $breakpoints: (
-  'xxxs': 333px,
+  'xxxl':     1222px,
-  'xxs':  444px,
+  'xxl':      1111px,
-  'xs':   555px,
+  'xl':       999px,
-  's':    666px,
+  'l':        888px,
-  'm':    777px,
+  'm':        777px,
-  'l':    888px,
+  's':        666px,
-  'xl':   999px,
+  'xs':       555px,
-  'xxl':  1111px,
+  'xxs':      444px,
-  'xxxl': 1222px
+  'xxxs':     333px,
-) !default;
+);
-
-// Layout
-
-// The max content width.
-$max-content-width: 1000px;
-
-// The max line width for readability.
-$max-line-width: 70ch;
-
-// The default left/right gutter/padding.
-$zen-gutters: calc(5px + 1.5625vw);
-$zen-gutters-reverse: calc(0px - (5px + 1.5625vw));
 
 // Border radius.
-$s-radius: 3px;
+$border-radius: (
-$m-radius: .3rem;
+  l:          1rem,
-$l-radius: 1rem;
+  m:          0.3rem,
+  s:          3px,
+);
 
-// Miscellaneous variables
+// Spacing.
+$spacing: (
+  xxxl:       5rem,
+  xxl:        3rem,
+  xl:         2rem,
+  l:          1.5rem,
+  m:          1rem,
+  s:          0.75rem,
+  xs:         0.5rem,
+  xxs:        0.4rem,
+  xxxs:       0.3rem,
+);
 
-// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
+// The max content width. (Consider using one of the breakpoints.)
-$indent-amount: 2 * $base-font-size;
+$max-content-width:   1111px;
 
-// `$include-rtl` controls whether RTL styles are output.
+// The max page width. Defaults to max-content-width.
+// Setting this to a larger value than max-content-width allows
+// content with class "stetch" to strech out to the page edge.
+//$max-page-width:      1111px;
+
+// The max line width for readability.
+$max-line-width:      70ch;
+
+// The left/right gutter/padding.
+$gutters:             calc(5px + 1.5625vw);
+$gutters-reverse:     calc(0px - (5px + 1.5625vw));
+
+// The amount lists, blockquotes and comments are indented.
+$indent-amount:       2rem;
+
+// Control whether RTL styles are added.
 $include-rtl: false;

assets/sass/_zen.scss

@@ -11,12 +11,12 @@ body {
 }
 
 .header {
-  padding-top: $zen-gutters;
+  padding-top: var(--gutters);
 }
 
 .footer {
   @include margin-top(1.5);
-  @include padding(.5 0);
+  @include padding(.3);
   text-align: center;
   border-top: 2px solid var(--color-brand);
 
@@ -31,14 +31,14 @@ th,
 label,
 legend,
 figcaption {
-  @include font-size(s);
+  font-size: var(--fs-s);
 }
 
 .language-selector,
 article > header,
 .content-dates,
 .footer {
-  @include font-size(xs);
+  font-size: var(--fs-xs);
 }
 
 // Apply heading font stack to heading, labels etc.
@@ -54,9 +54,9 @@ article > header,
 .content-dates,
 .header,
 .footer {
-  @include typeface(headings);
+  font-family: var(--ff-headings);
+  font-weight: var(--fw-normal);
   color: var(--color-headings);
-  font-weight: normal;
 }
 
 article > .content,
@@ -72,16 +72,13 @@ aside {
 
 article {
   & > header {
+    @include margin-bottom(.75);
     color: var(--color-text-meta);
   }
 
-  .submitted {
-    margin-bottom: .5rem;
-  }
-
   .submitted,
   .tags {
-    @include respond-to(l) {
+    @include respond-to(s) {
       display: inline-block;
       padding-right: 1rem;
     }
@@ -96,8 +93,8 @@ article {
     }
 
     li {
-      @include padding-right(.2);
+      list-style: none;
-      list-style-type: none;
+      padding-right: .4rem;
     }
   }
 
@@ -107,13 +104,13 @@ article {
   }
 
   code {
-    @include font-size(xs);
+    font-size: var(--fs-xs);
     overflow-wrap: break-word;
   }
 
   pre {
     color: var(--color-code);
-    border-radius: $s-radius;
+    border-radius: var(--radius-s);
     padding: 5px;
     border: 1px solid var(--color-border);
     background-color: var(--color-text-bg);
@@ -131,10 +128,6 @@ article {
       white-space: pre;
     }
   }
-
-  .js-clipboard-button {
-    display: block;
-  }
 }
 
 .title-submitted {
@@ -146,8 +139,7 @@ img {
   &.image {
     @include respond-to(s) {
       &.center {
-        margin-left: auto;
+        margin-inline: auto;
-        margin-right: auto;
       }
 
       &.left {
@@ -246,11 +238,11 @@ figure {
 // Search
 
 .search-input {
-  @include margin(1 0);
+  @include margin-block(1);
 }
 
 .search-text {
-  @include font-size(l);
+  font-size: var(--fs-l);
   max-width: 80%;
 }
 

assets/sass/components/box/_box.scss

@@ -19,32 +19,17 @@
 
 .box,
 %box {
-  @include margin-bottom(1);
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+  @include padding(.5);
   border: 5px solid var(--color-border);
-  padding: 1em;
 
   // Sass compiles this to the selector: .box__title, %box__title {}
   // The "__" (double underscore) is part of a BEM naming convention that
   // indicates the "title" is an _element_ of (a piece of) the "box" component.
-  &__title {
+  &__title,
-    margin: 0;
+  .title {
-  }
+    margin-top: 0;
-
-  // Sass compiles this nested ruleset's selector into:
-  // .box:focus, .box:hover, .box.is-focus, .box--is-focus,
-  // %box:focus, %box:hover, %box.is-focus, %box--is-focus {}
-  //
-  // The ".box--is-focus" class is a stray class we don't actually want, but we
-  // deal with it because we often want a placeholder selector like
-  // %box--is-focus in case we need to use @extends later.
-  //
-  // The ".is-" part of the class name is a Drupal 8 BEM naming convention that
-  // indicates the "focus" is a _state_ of the "box" component.
-  &:focus,
-  &:hover,
-  &.is-focus,
-  &--is-focus {
-    border-color: var(--color-text);
   }
 
   // Sass compiles this to the selector: .box--highlight, %box--highlight {}
@@ -52,6 +37,22 @@
   // the "highlight" is a _modifier_, creating a new variation of the standard
   // "box" component.
   &--highlight {
-    border-color: var(--color-link);
+    border-color: var(--color-highlight);
+  }
+
+  &--inverted {
+    @extend %link-inverted;
+    background: var(--color-border);
+    color: var(--color-text-bg);
+  }
+
+  > * {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 }

assets/sass/components/button/_button.scss

@@ -15,12 +15,12 @@ button,
 [type='reset'],
 [type='submit'] {
   @extend %button--disabled;
-  @include typeface(headings);
   @include margin-right(.75);
   @include margin-bottom(.75);
   @include padding(.2 1);
   // Some styles don't apply to <a> links since they are inline elements by default.
   display: inline-block;
+  font-family: var(--ff-headings);
   text-decoration: none;
   text-align: center;
   // Improve usability and consistency of cursor style between image-type `input` and others.
@@ -28,7 +28,7 @@ button,
   color: var(--color-button-text);
   background-color: var(--color-button);
   border: 0;
-  border-radius: $m-radius;
+  border-radius: var(--radius-m);
 
   &:hover,
   &:focus,
@@ -44,10 +44,10 @@ button,
 .button,
 %button {
   &--small {
-    @include font-size(xs);
     @include margin-right(.3);
     @include margin-bottom(.3);
     @include padding(.1 .5);
+    font-size: var(--fs-xs);
   }
 
   &--alt {
@@ -79,18 +79,9 @@ button,
 // The disabled variation should always go last, so that it overrides any
 // other variations.
 %button--disabled[disabled] {
-  // Re-set default cursor for disabled elements.
+  @extend %disabled;
-  cursor: default;
-  color: var(--color-button-disabled);
   background-color: var(--color-grey-extra-light);
   border: 1px solid var(--color-button-disabled);
   background-image: none;
   text-shadow: none;
-
-  &:hover,
-  &:focus,
-  &:active {
-    // Override any link underlines and color changes.
-    color: var(--color-button-disabled);
-  }
 }

assets/sass/components/cookieconsent/_cookieconsent.scss

@@ -1,13 +1,13 @@
 // Cookieconsent
 
 .cookieconsent {
-  @include font-size(s);
   position: sticky;
   bottom: 0;
   width: 100%;
   color: var(--color-warning);
   background-color: var(--color-warning-bg);
   border-top: 4px solid var(--color-warning-border);
+  font-size: var(--fs-s);
   text-align: center;
   transform: translateY(100vh);
   transition: all 130ms ease-out;

assets/sass/components/divider/_divider.scss

@@ -4,7 +4,8 @@
 
 .divider,
 %divider {
-  @include margin(1 0);
+  // Add vertical rhythm margins.
+  @include margin-block(1);
   border: 0;
   border-top: 1px solid var(--color-border);
 

assets/sass/components/header/_header.scss

@@ -9,10 +9,10 @@
   // Wrapping link for logo.
   &__logo {
     @include respond-to(s) {
-      margin: 0 $zen-gutters 0 0;
+      margin: 0 var(--gutters) 0 0;
 
       @include rtl() {
-        margin: 0 0 0 $zen-gutters;
+        margin: 0 0 0 var(--gutters);
       }
     }
   }

assets/sass/components/highlight-mark/_highlight-mark.scss

@@ -7,6 +7,5 @@
 .highlight-mark,
 %highlight-mark {
   color: var(--color-mark-highlight);
-  // Remove background highlighting from <mark> in normalize.
+  background-color: var(--color-mark-bg);
-  background-color: transparent;
 }

assets/sass/components/inline-links/_inline-links.scss

@@ -1,20 +0,0 @@
-// Inline links
-//
-// A list of links that are inline with each other.
-
-.inline-links,
-%inline-links {
-  padding: 0;
-
-  &__item {
-    display: inline;
-    list-style-type: none;
-    padding: 0 1em 0 0;
-
-    @include rtl() {
-      // Bug in Safari causes display: inline to fail.
-      display: inline-block;
-      padding: 0 0 0 1em;
-    }
-  }
-}

assets/sass/components/list-straight-left/_list-straight-left.scss

@@ -9,10 +9,10 @@
     display: table-row;
 
     &::before {
-      @include font-size(s);
       @include padding-right(.5);
       display: table-cell;
       content: '\2022';
+      font-size: var(--fs-s);
     }
   }
 }
@@ -27,10 +27,10 @@
     counter-increment: table-ol;
 
     &::before {
-      @include font-size(s);
       @include padding-right(.5);
       display: table-cell;
       content: counter(table-ol) '.';
+      font-size: var(--fs-s);
       text-align: right;
     }
   }

assets/sass/components/responsive-video/_responsive-video.scss

@@ -10,7 +10,7 @@
 .responsive-video,
 %responsive-video {
   position: relative;
-  padding-bottom: (9 / 16) * 100%; // 16:9 aspect ratio
+  padding-bottom: calc(9 / 16 * 100%); // 16:9 aspect ratio
   padding-top: 25px; // Height of video controls
   height: 0;
 
@@ -27,6 +27,6 @@
   }
 
   &--4-3 {
-    padding-bottom: (3 / 4) * 100%; // 4:3 aspect ratio
+    padding-bottom: calc(3 / 4 * 100%); // 4:3 aspect ratio
   }
 }

assets/sass/layouts/_layouts.scss

@@ -2,10 +2,10 @@
 
 .layout {
   &__page {
-    max-width: $max-content-width;
+    max-width: var(--max-page-width);
 
     @include respond-to(s) {
-      margin: 0 auto;
+      margin-inline: auto;
       min-height: 100vh;
     }
   }
@@ -19,9 +19,28 @@
   &__page-top,
   &__page-bottom,
   &__cookieconsent {
-    padding: 0 $zen-gutters;
+    padding-inline: var(--gutters);
     min-width: 0;  // With display grid defaults to auto, making <pre> overflow.
   }
+
+  @if $max-page-width > $max-content-width {
+    &__main {
+      padding-inline: 0;
+    }
+
+    &__navigation > *,
+    &__main > * {
+      max-width: var(--max-content-width);
+
+      &:not(.stretch) {
+        padding-inline: var(--gutters);
+      }
+
+      @include respond-to(s) {
+        margin-inline: auto;
+      }
+    }
+  }
 }
 
 @supports (display: grid) {

assets/sass/mobile.scss

@@ -2,7 +2,6 @@
 // The mobile navigation stylesheet for this theme.
 
 @import 'init';
-@import 'extra';
 
 .main-menu,
 .header__region { // stylelint-disable selector-class-pattern
@@ -14,13 +13,13 @@
 } // stylelint-enable selector-class-pattern
 
 .mobile-nav {
-  @include typeface(headings);
   position: absolute;
   right: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  font-family: var(--ff-headings);
   z-index: 20;
   pointer-events: none;
 
@@ -54,10 +53,10 @@
     display: flex;
     align-items: center;
     position: absolute;
-    top: $zen-gutters;
+    top: var(--gutters);
-    right: $zen-gutters;
+    right: var(--gutters);
     margin: 0;
-    font-weight: bold;
+    font-weight: var(--fw-bold);
     background-color: transparent;
     color: var(--color-text);
     z-index: 22;
@@ -110,11 +109,11 @@
   }
 
   &__sheet {
+    @include padding(1.5);
     visibility: hidden;
     background-color: var(--color-mobile-menu);
     width: 90vw;
     height: 100vh;
-    padding: 2rem;
     transform: translateX(100vw);
     z-index: 21;
 
@@ -143,7 +142,7 @@
     margin: 0;
 
     li {
-      list-style-type: none;
+      list-style: none;
       margin: .4rem 0;
     }
   }

assets/sass/navigation/more-link/_more-link.scss

@@ -1,24 +0,0 @@
-// "More" link
-//
-// Styles the "Read more…" and "Help" links common on the web.
-
-.more-link,
-%more-link {
-  text-align: right;
-
-  @include rtl() {
-    text-align: left;
-  }
-
-  &__help-icon {
-    padding: 1px 0 1px 20px;
-    background-image: image-url('navigation', 'more-link/more-link__help-icon.svg');
-    background-position: 0 50%;
-    background-repeat: no-repeat;
-
-    @include rtl() {
-      padding: 1px 20px 1px 0;
-      background-position: 100% 50%;
-    }
-  }
-}

assets/sass/navigation/more-link/more-link__help-icon.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="8" cy="8" r="7" fill="#c5c5c5"/><path d="M8.767,10.847l-1.644,0c-0.004,-0.236 -0.007,-1.216 -0.007,-1.268c0,-0.533 0.089,-0.972 0.265,-1.316c0.176,-0.343 0.529,-0.73 1.058,-1.16c0.528,-0.43 0.844,-0.712 0.948,-0.845c0.159,-0.211 0.238,-0.443 0.238,-0.697c0,-0.352 -0.141,-0.654 -0.422,-0.906c-0.282,-0.251 -0.661,-0.377 -1.139,-0.377c-0.46,0 -0.844,0.131 -1.154,0.393c-0.309,0.263 -0.522,0.662 -0.638,1.2l-1.664,-0.207c0.047,-0.769 0.375,-1.423 0.983,-1.96c0.609,-0.538 1.407,-0.806 2.396,-0.806c1.041,0 1.868,0.272 2.483,0.816c0.615,0.543 0.922,1.177 0.922,1.899c0,0.4 -0.113,0.778 -0.338,1.135c-0.226,0.357 -0.709,0.843 -1.448,1.457c-0.383,0.319 -0.62,0.574 -0.713,0.768c-0.092,0.193 -0.134,1.376 -0.126,1.874ZM7.123,13.102l0,-1.629l1.666,0l0,1.629l-1.666,0Z" fill="#fff"/></svg>

assets/sass/navigation/navbar/_navbar.scss

@@ -1,24 +1,6 @@
 // Navbar
-//
-// A simple method to get navigation links to appear in one line.
 
-.navbar,
+.navbar {
-%navbar {
+  @extend %flex-inline;
-  display: flex;
+  margin-block: 0;
-  flex-wrap: wrap;
-  gap: .5rem;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-
-  @include rtl() {
-    flex-direction: row-reverse;
-    text-align: right;
-  }
-
-  &__item,
-  li {
-    list-style-type: none;
-    list-style-image: none;
-  }
 }

assets/sass/navigation/pager/_pager.scss

@@ -3,49 +3,30 @@
 // Paged navigation is a list of page numbers when more than 1 page of content
 // is available.
 
+.pagination,
 .pager,
 %pager {
-  @include margin-top(.5);
+  @extend %flex-inline;
-  @include margin-bottom(.5);
+  @extend %link-nav;
-  clear: both;
+  // Add vertical rhythm margins.
-  padding: 0;
+  @include margin-block(1);
-  text-align: center;
+  justify-content: center;
 
-  // A page item in the pager list.
+  .page-item {
-  &__item {
-    display: inline;
-    padding: 0 .5em;
-    list-style-type: none;
-    background-image: none;
   }
 
-  // The current page's list item.
+  &__item,
-  &__current-item {
+  .page-link {
-    @extend %pager__item;
+    padding-inline: 2px;
-    font-weight: bold;
+  }
+
+  .active {
+    font-weight: var(--fw-bold);
+  }
+
+  .disabled {
+    .page-link {
+      @extend %disabled;
+    }
   }
 }
-
-//
-// Zen selectors.
-//
-
-// .pager-item     - A list item containing a page number in the list of pages.
-// .pager-first    - The first page's list item.
-// .pager-previous - The previous page's list item.
-// .pager-next     - The next page's list item.
-// .pager-last     - The last page's list item.
-// .pager-ellipsis - A concatenation of several list items using an ellipsis.
-
-.pager-item,
-.pager-first,
-.pager-previous,
-.pager-next,
-.pager-last,
-.pager-ellipsis {
-  @extend %pager__item;
-}
-
-.pager-current {
-  @extend %pager__current-item;
-}

assets/sass/reset/_reset.scss

@@ -5,7 +5,6 @@
 @import 'embedded/embedded';
 @import 'forms/forms';
 @import 'grouping/grouping';
-@import 'interactive/interactive';
 @import 'links/links';
 @import 'sections/sections';
 @import 'tables/tables';

assets/sass/reset/document/_document.scss

@@ -4,11 +4,11 @@
 
 html {
   // Change the default font family in all browsers (opinionated).
-  @include typeface(body);
+  font-family: var(--ff-body);
   // Set base font size in percent.
-  font-size: $base-font-size / $browser-font-size * 100%;
+  font-size: calc(#{$base-font-size} / 16 * 100%);
   // Correct the line height in all browsers.
-  line-height: 1.5;
+  line-height: $base-line-height;
   // Prevent adjustments of font size.
   -webkit-text-size-adjust: none;
   text-size-adjust: none;