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

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.
-  cursor: default;
-  color: var(--color-button-disabled);
+  @extend %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);
-  }
 }