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

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;

assets/sass/reset/forms/_forms.scss

@@ -2,6 +2,11 @@
 
 // Form defaults.
 
+form {
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+}
+
 input,
 button,
 textarea,
@@ -12,7 +17,7 @@ select {
 
 label {
   display: block;
-  font-weight: bold;
+  font-weight: var(--fw-bold);
 }
 
 fieldset {

assets/sass/reset/grouping/_grouping.scss

@@ -12,38 +12,42 @@
 
 blockquote {
   // Add vertical rhythm margins.
+  @include margin-block(1);
   // Also indent the quote on both sides.
-  @include margin(1 $indent-amount);
+  margin-inline: var(--indent-amount);
 }
 
 // Lists
 
 dl,
 ol,
-ul {
+ul,
+menu {
   // Add vertical rhythm margins.
-  @include margin(1 0);
+  @include margin-block(1);
 }
 
 dd {
-  margin: 0 0 0 $indent-amount;
+  margin: 0 0 0 var(--indent-amount);
 
   @include rtl {
-    margin: 0 $indent-amount 0 0;
+    margin: 0 var(--indent-amount) 0 0;
   }
 }
 
 ol,
-ul {
-  padding: 0 0 0 $indent-amount;
+ul,
+menu {
+  padding: 0 0 0 var(--indent-amount);
 
   @include rtl {
-    padding: 0 $indent-amount 0 0;
+    padding: 0 var(--indent-amount) 0 0;
   }
 
   // Turn off margins on nested lists.
   ol,
-  ul {
+  ul,
+  menu {
     margin: 0;
   }
 }
@@ -52,7 +56,7 @@ ul {
 
 figure {
   // Add vertical rhythm margins.
-  @include margin(1 0);
+  @include margin-block(1);
 }
 
 // Horizontal rule
@@ -66,11 +70,12 @@ hr {
 
 p,
 pre {
-  @include margin(.75 0);
+  // Add vertical rhythm margins.
+  @include margin-block(.75);
 }
 
 // Preformatted text
 
 pre {
-  @extend %monospace;
+  font-family: var(--ff-monospace);
 }

assets/sass/reset/interactive/_interactive.scss

@@ -1,21 +0,0 @@
-// Interactive
-
-// Menu
-
-menu {
-  // Set 1 unit of vertical rhythm on the top and bottom margin.
-  @include margin(1 0);
-  // Set consistent space for the list style image.
-  padding: 0 0 0 $indent-amount;
-
-  @include rtl {
-    padding: 0 $indent-amount 0 0;
-  }
-
-  // Turn off margins on nested lists.
-  menu &,
-  ol &,
-  ul & {
-    margin: 0;
-  }
-}

assets/sass/reset/links/_links.scss

@@ -31,3 +31,36 @@ a:focus {
 a:active {
   color: var(--color-link-active);
 }
+
+.link-nav,
+%link-nav {
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+}
+
+// Inverted links, for dark backgrounds.
+.link-inverted,
+%link-inverted {
+  a {
+    color: var(--color-link-inverted);
+
+    &:visited {
+      color: var(--color-link-visited-inverted);
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--color-link-hover-inverted);
+    }
+
+    &:active {
+      color: var(--color-link-active-inverted);
+    }
+  }
+}

assets/sass/reset/sections/_sections.scss

@@ -1,9 +1,6 @@
 // Sections
 
 body {
-  // Output a horizontal grid to help with debugging typography. The
-  // $typey-debug variable will toggle its output.
-  @include typey-debug-grid();
   // Remove the margin in all browsers (opinionated).
   margin: 0;
   padding: 0;
@@ -14,62 +11,49 @@ body {
 // All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
 // classes are also available, for when you want to match the font styling of a
 // heading but still want your text to be displayed inline.
-
-// Correct the font size and margin on `h1` elements within `section` and
-// `article` contexts in Chrome, Firefox, and Safari.
 h1,
 %h1 {
-  // Set the font-size while keeping a proper vertical rhythm.
-  @include font-size(xxl);
-
-  // Set 1 unit of vertical rhythm on the top and bottom margins.
-  @include margin-top(1, xxl);
-  @include margin-bottom(1, xxl);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-xxl);
+  line-height: var(--heading-line-height);
 }
 
 h2,
 %h2 {
-  @include font-size(xl);
-  @include margin-top(1, xl);
-  @include margin-bottom(1, xl);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-xl);
+  line-height: var(--heading-line-height);
 }
 
 h3,
 %h3 {
-  @include font-size(l);
-  @include margin-top(1, l);
-  @include margin-bottom(1, l);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-l);
+  line-height: var(--heading-line-height);
 }
 
 h4,
 %h4 {
-  @include font-size(m);
-  @include margin-top(1, m);
-  @include margin-bottom(1, m);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-m);
+  line-height: var(--heading-line-height);
 }
 
 h5,
 %h5 {
-  @include font-size(s);
-  @include margin-top(1, s);
-  @include margin-bottom(1, s);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-s);
+  line-height: var(--heading-line-height);
 }
 
 h6,
 %h6 {
-  @include font-size(xs);
-  @include margin-top(1, xs);
-  @include margin-bottom(1, xs);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-xs);
+  line-height: var(--heading-line-height);
 }
 
 // Set max text line width for readability.
-
 .main {
   h2,
   h3,
@@ -80,6 +64,6 @@ h6,
   ol,
   dl,
   p {
-    max-width: $max-line-width;
+    max-width: var(--max-line-width);
   }
 }

assets/sass/reset/tables/_tables.scss

@@ -4,7 +4,7 @@
 
 table {
   // Add vertical rhythm margins.
-  @include margin(1 0);
+  @include margin-block(1);
   // Remove most spacing between table cells.
   border-collapse: collapse;
   border-spacing: 0;

assets/sass/reset/text/_text.scss

@@ -7,14 +7,13 @@
 code,
 kbd,
 samp {
-  @extend %monospace;
+  font-family: var(--ff-monospace);
 }
 
-// Small text
+// Mark text
 
-small {
-  // Add the correct font size in all browsers.
-  @include font-size(s);
+mark {
+  @extend %highlight-mark;
 }
 
 // Superscript / Subscript
@@ -23,7 +22,7 @@ sub,
 sup {
   // Prevent `sub` and `sup` elements from affecting the line height in
   // all browsers.
-  @include font-size(xs);
+  font-size: var(--fs-xs);
   line-height: 0;
   position: relative;
   vertical-align: baseline;