From e27cb6dc7b772f72e53ab8668762f23598d0c22f Mon Sep 17 00:00:00 2001
From: xdavidwu <xdavidwuph@gmail.com>
Date: Thu, 21 Jan 2021 15:02:22 +0800
Subject: [PATCH] move most colors to a individual file

---
 _sass/minimal-mistakes.scss             |   2 +
 _sass/minimal-mistakes/_archive.scss    |   6 +-
 _sass/minimal-mistakes/_base.scss       |  27 +-
 _sass/minimal-mistakes/_buttons.scss    |  29 --
 _sass/minimal-mistakes/_colors.scss     | 603 ++++++++++++++++++++++++
 _sass/minimal-mistakes/_footer.scss     |   6 -
 _sass/minimal-mistakes/_masthead.scss   |   4 +-
 _sass/minimal-mistakes/_navigation.scss | 105 +----
 _sass/minimal-mistakes/_noscript.scss   |   6 -
 _sass/minimal-mistakes/_page.scss       |  76 ++-
 _sass/minimal-mistakes/_reset.scss      |  12 -
 _sass/minimal-mistakes/_search.scss     |  15 -
 _sass/minimal-mistakes/_sidebar.scss    |  12 +-
 _sass/minimal-mistakes/_tables.scss     |   7 +-
 _sass/minimal-mistakes/_utilities.scss  | 182 +------
 assets/css/main.scss                    |   2 +-
 16 files changed, 688 insertions(+), 406 deletions(-)
 create mode 100644 _sass/minimal-mistakes/_colors.scss

diff --git a/_sass/minimal-mistakes.scss b/_sass/minimal-mistakes.scss
index b30450c..97fe78e 100644
--- a/_sass/minimal-mistakes.scss
+++ b/_sass/minimal-mistakes.scss
@@ -40,3 +40,5 @@
 @import "minimal-mistakes/print";
 
 @import "minimal-mistakes/noscript";
+
+@import "minimal-mistakes/colors";
diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss
index 930a53d..271087e 100644
--- a/_sass/minimal-mistakes/_archive.scss
+++ b/_sass/minimal-mistakes/_archive.scss
@@ -33,7 +33,8 @@
 .archive__subtitle {
   margin: 0.75rem 0;
   padding-bottom: 0.5em;
-  border-bottom: 1px solid $border-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 
   + .list__item .archive__item-title {
     margin-top: 0.5em;
@@ -237,7 +238,8 @@
 .feature__wrapper {
   @include clearfix();
   margin-bottom: 2em;
-  border-bottom: 1px solid $border-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 
   .archive__item-title {
     margin-bottom: 0;
diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss
index e4db210..0eafa5e 100644
--- a/_sass/minimal-mistakes/_base.scss
+++ b/_sass/minimal-mistakes/_base.scss
@@ -7,13 +7,11 @@ html {
   position: relative;
   min-height: 100%;
   scroll-behavior: smooth;
-  scrollbar-color: $primary-color rgba(0, 0, 0, 0);
 }
 
 body {
   margin: 0;
   padding: 0;
-  color: $text-color;
   line-height: 1.5;
   font-family: $sans-serif;
 
@@ -71,7 +69,8 @@ p {
 u,
 ins {
   text-decoration: none;
-  border-bottom: 1px solid $text-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
   a {
     color: inherit;
   }
@@ -102,7 +101,8 @@ abbr[title],
 abbr[data-original-title] {
   text-decoration: none;
   cursor: help;
-  border-bottom: 1px dotted $text-color;
+  border-bottom-width: 1px;
+  border-bottom-style: dotted;
 }
 
 /* blockquotes */
@@ -112,7 +112,8 @@ blockquote {
   padding-left: 1em;
   padding-right: 1em;
   font-style: italic;
-  border-left: 0.25em solid $primary-color;
+  border-left-width: 0.25em;
+  border-left-style: solid;
 
   cite {
     font-style: italic;
@@ -131,19 +132,14 @@ a {
     @extend %tab-focus;
   }
 
-  &:visited {
-    color: $link-color-visited;
-  }
-
   &:hover {
-    color: $link-color-hover;
     outline: 0;
   }
 
   &:link, &:visited {
     text-decoration: none;
   }
-  
+
   &:hover, &:active {
     text-decoration: underline;
   }
@@ -167,7 +163,6 @@ figcaption > code,
 td > code {
   padding: 0.1em 0.25em;
   font-size: 0.8em;
-  background: $code-background-color;
   border-radius: $border-radius;
 }
 
@@ -177,7 +172,8 @@ hr {
   display: block;
   margin: 1em 0;
   border: 0;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 }
 
 /* lists */
@@ -252,15 +248,10 @@ figure {
 
 figcaption {
   margin-bottom: 0.5em;
-  color: $muted-text-color;
   font-size: $type-size-6;
 
   a {
     transition: $global-transition;
-
-    &:hover {
-      color: $link-color-hover;
-    }
   }
 }
 
diff --git a/_sass/minimal-mistakes/_buttons.scss b/_sass/minimal-mistakes/_buttons.scss
index 606173c..cf2fb0e 100644
--- a/_sass/minimal-mistakes/_buttons.scss
+++ b/_sass/minimal-mistakes/_buttons.scss
@@ -26,35 +26,6 @@
     margin-left: -0.5em; /* override for hidden text*/
   }
 
-  /* button colors */
-  $buttoncolors:
-  (primary, $primary-color),
-  (inverse, #fff),
-  (light-outline, transparent),
-  (success, $success-color),
-  (warning, $warning-color),
-  (danger, $danger-color),
-  (info, $info-color),
-  (facebook, $facebook-color),
-  (twitter, $twitter-color),
-  (linkedin, $linkedin-color);
-
-  @each $buttoncolor, $color in $buttoncolors {
-    &--#{$buttoncolor} {
-      @include yiq-contrasted($color);
-      @if ($buttoncolor == inverse) {
-        border: 1px solid $border-color;
-      }
-      @if ($buttoncolor == light-outline) {
-        border: 1px solid #fff;
-      }
-
-      &:not(label):hover {
-        @include yiq-contrasted(mix(#000, $color, 20%));
-      }
-    }
-  }
-
   /* fills width of parent container */
   &--block {
     display: block;
diff --git a/_sass/minimal-mistakes/_colors.scss b/_sass/minimal-mistakes/_colors.scss
new file mode 100644
index 0000000..0c9f899
--- /dev/null
+++ b/_sass/minimal-mistakes/_colors.scss
@@ -0,0 +1,603 @@
+html {
+  scrollbar-color: $primary-color rgba(0, 0, 0, 0);
+  background: $background-color;
+}
+
+body {
+  color: $text-color;
+}
+
+::selection {
+  color: $background-color;
+  background: $masthead-link-color-hover;
+}
+
+a {
+  color: $link-color;
+}
+
+.archive__subtitle, .feature__wrapper, .masthead {
+  border-bottom-color: $border-color;
+}
+
+u, ins, abbr[title], abbr[data-original-title] {
+  border-bottom-color: $text-color;
+}
+
+blockquote {
+  border-left-color: $primary-color;
+}
+
+a {
+  &:visited {
+    color: $link-color-visited;
+  }
+
+  &:hover {
+    color: $link-color-hover;
+  }
+}
+
+p > code,
+a > code,
+li > code,
+figcaption > code,
+td > code {
+  background: $code-background-color;
+}
+
+hr {
+  border-top-color: $border-color;
+}
+
+figcaption {
+  color: $muted-text-color;
+  a:hover {
+    color: $link-color-hover;
+  }
+}
+
+.btn {
+  $buttoncolors:
+  (primary, $primary-color),
+  (inverse, #fff),
+  (light-outline, transparent),
+  (success, $success-color),
+  (warning, $warning-color),
+  (danger, $danger-color),
+  (info, $info-color),
+  (facebook, $facebook-color),
+  (twitter, $twitter-color),
+  (linkedin, $linkedin-color);
+
+  @each $buttoncolor, $color in $buttoncolors {
+    &--#{$buttoncolor} {
+      @include yiq-contrasted($color);
+      @if ($buttoncolor == inverse) {
+        border: 1px solid $border-color;
+      }
+      @if ($buttoncolor == light-outline) {
+        border: 1px solid #fff;
+      }
+
+      &:not(label):hover {
+        @include yiq-contrasted(mix(#000, $color, 20%));
+      }
+    }
+  }
+}
+
+.page__footer {
+  color: $muted-text-color;
+  background: $footer-background-color;
+
+  a {
+    color: inherit;
+  }
+}
+
+.masthead {
+  background: $background-color;
+}
+
+.pagination {
+  li {
+    a {
+      color: $muted-text-color;
+      border-color: mix(#000, $border-color, 25%);
+
+      &:hover {
+        color: $link-color-hover;
+      }
+
+      &.current,
+      &.current.disabled {
+        color: #fff;
+        background: $primary-color;
+      }
+
+      &.disabled {
+        color: rgba($muted-text-color, 0.5);
+      }
+    }
+  }
+
+  &--pager {
+    color: $pager-text-color;
+    background: $primary-color;
+    border-color: $background-color;
+
+    &:visited {
+      color: $pager-text-color;
+    }
+
+    &:hover {
+      background: $primary-color-raised;
+    }
+
+    &.disabled {
+      color: $pager-text-color-disabled;
+      background: $primary-color-disabled;
+    }
+  }
+}
+
+.page__content + .pagination,
+.page__meta + .pagination,
+.page__share + .pagination,
+.page__comments + .pagination {
+  border-top-color: $border-color;
+}
+
+.greedy-nav {
+  background: $background-color;
+
+  a {
+    color: $masthead-link-color;
+
+    &:hover {
+      color: $masthead-link-color-hover;
+    }
+  }
+
+  &__toggle {
+    background: transparent;
+  }
+
+  .hidden-links {
+    border-color: $border-color;
+    background: $background-color;
+
+    a:hover {
+      color: $masthead-link-color-hover;
+      background: $navicon-link-color-hover;
+    }
+
+    &:before {
+      border-color: $border-color transparent;
+    }
+
+    &:after {
+      border-color: $border-color transparent;
+    }
+
+    li {
+      border-bottom-color: $border-color;
+    }
+  }
+}
+
+.nav__list {
+  @include breakpoint(max-width $large - 1px) {
+    label {
+      color: $gray;
+      border-color: $light-gray;
+    }
+
+    &:before,
+    &:after {
+      background: $gray;
+    }
+
+    &:hover {
+      color: #fff;
+      border-color: $gray;
+      background: mix(white, #000, 20%);
+
+      &:before,
+      &:after {
+        background: #fff;
+      }
+    }
+
+    input:checked + label {
+      color: white;
+      background: mix(white, #000, 20%);
+
+      &:before,
+      &:after {
+        background: #fff;
+      }
+    }
+  }
+}
+
+.nav__list .nav__items {
+  a {
+    color: inherit;
+  }
+}
+
+.nav__sub-title {
+  border-bottom-color: $border-color;
+}
+
+.toc {
+  color: $gray;
+  background: $background-color;
+  border-color: $border-color;
+
+  .nav__title {
+    color: #fff;
+    background: $primary-color;
+  }
+
+  .active a { // scroll spy
+    @include yiq-contrasted($active-color);
+  }
+}
+
+.toc__menu {
+  a {
+    color: $muted-text-color;
+    border-bottom-color: $border-color;
+
+    &:hover {
+      color: $text-color;
+    }
+  }
+}
+
+#follow-button {
+  &:checked + label {
+    background-color: $primary-color-disabled;
+  }
+  &:hover + label {
+    background-color: $primary-color-raised;
+  }
+}
+
+.page__content {
+  h2 {
+    border-bottom-color: $border-color;
+  }
+}
+
+.page__hero {
+  &--overlay {
+    a {
+      color: #fff;
+    }
+
+    .page__title,
+    .page__meta,
+    .page__lead,
+    .btn {
+      color: #fff;
+      text-shadow: 1px 1px 4px rgba(#000, 0.5);
+    }
+  }
+}
+
+.page__hero-caption {
+  color: #fff;
+  background: #000;
+
+  a {
+    color: #fff;
+  }
+}
+
+.page__share {
+  border-top-color: $border-color;
+}
+
+.page__meta {
+  color: $muted-text-color;
+
+  a {
+    color: inherit;
+  }
+}
+
+.page__taxonomy-item {
+  border-color: mix(#000, $border-color, 25%);
+
+  &:hover {
+    color: $link-color-hover;
+  }
+}
+
+.taxonomy__section {
+  &:not(:last-child) {
+    border-bottom-color: $border-color;
+  }
+}
+
+.taxonomy__count, .taxonomy__title {
+  color: $muted-text-color
+}
+
+.taxonomy__index {
+  a {
+    color: inherit;
+    border-bottom-color: $border-color;
+  }
+}
+
+.back-to-top {
+  color: $muted-text-color;
+}
+
+.page__comments-title, .page__related {
+  border-top-color: $border-color;
+}
+
+.page__related {
+  a {
+    color: inherit;
+  }
+}
+
+.search__toggle {
+  color: $primary-color;
+  background: transparent;
+
+  &:hover {
+    color: $primary-color-raised;
+  }
+}
+
+.search-content {
+  &__form {
+    background: transparent;
+  }
+
+  .search-input {
+    background: transparent;
+    color: $text-color;
+  }
+}
+
+.archive__item-title .ais-Highlight {
+  color: $primary-color;
+}
+
+.archive__item-excerpt .ais-Highlight {
+  color: $primary-color;
+}
+
+.author__avatar {
+  img {
+    @include breakpoint($large) {
+      border-color: $border-color;
+    }
+  }
+}
+
+.author__content {
+  a {
+    color: inherit;
+  }
+}
+
+.author__urls {
+  border-color: $border-color;
+  background: $background-color;
+
+  @include breakpoint($large) {
+    background: transparent;
+  }
+
+  &:before, &:after {
+    border-color: $border-color transparent;
+  }
+
+  a {
+    color: inherit;
+  }
+}
+
+thead {
+  background: $border-color;
+  border-bottom-color: mix(#000, $border-color, 25%);
+}
+
+td {
+  border-bottom-color: mix(#000, $border-color, 25%);
+}
+
+.social-icons {
+  .fas,
+  .fab,
+  .far,
+  .fal {
+    color: $text-color;
+  }
+/*
+  .fa-behance,
+  .fa-behance-square {
+    color: $behance-color;
+  }
+
+  .fa-bitbucket {
+    color: $bitbucket-color;
+  }
+
+  .fa-dribbble,
+  .fa-dribble-square {
+    color: $dribbble-color;
+  }
+
+  .fa-facebook,
+  .fa-facebook-square,
+  .fa-facebook-f {
+    color: $facebook-color;
+  }
+
+  .fa-flickr {
+    color: $flickr-color;
+  }
+
+  .fa-foursquare {
+    color: $foursquare-color;
+  }
+
+  .fa-github,
+  .fa-github-alt,
+  .fa-github-square {
+    color: $github-color;
+  }
+
+  .fa-gitlab {
+    color: $gitlab-color;
+  }
+
+  .fa-instagram {
+    color: $instagram-color;
+  }
+
+  .fa-keybase {
+    color: $keybase-color;
+  }
+
+  .fa-lastfm,
+  .fa-lastfm-square {
+    color: $lastfm-color;
+  }
+
+  .fa-linkedin,
+  .fa-linkedin-in {
+    color: $linkedin-color;
+  }
+
+  .fa-mastodon,
+  .fa-mastodon-square {
+    color: $mastodon-color;
+  }
+
+  .fa-pinterest,
+  .fa-pinterest-p,
+  .fa-pinterest-square {
+    color: $pinterest-color;
+  }
+
+  .fa-reddit {
+    color: $reddit-color;
+  }
+
+  .fa-rss,
+  .fa-rss-square {
+    color: $rss-color;
+  }
+
+  .fa-soundcloud {
+    color: $soundcloud-color;
+  }
+
+  .fa-stack-exchange,
+  .fa-stack-overflow {
+    color: $stackoverflow-color;
+  }
+
+  .fa-tumblr,
+  .fa-tumblr-square {
+    color: $tumblr-color;
+  }
+
+  .fa-twitter,
+  .fa-twitter-square {
+    color: $twitter-color;
+  }
+
+  .fa-vimeo,
+  .fa-vimeo-square,
+  .fa-vimeo-v {
+    color: $vimeo-color;
+  }
+
+  .fa-vine {
+    color: $vine-color;
+  }
+
+  .fa-youtube {
+    color: $youtube-color;
+  }
+
+  .fa-xing,
+  .fa-xing-square {
+    color: $xing-color;
+  }*/
+}
+
+.navicon {
+  background: $primary-color;
+  &:before, &:after {
+    background: $primary-color;
+  }
+}
+
+.close .navicon {
+  background: transparent;
+}
+
+.greedy-nav__toggle {
+  &:before {
+    background: $background-color;
+  }
+}
+
+.greedy-nav__toggle:hover {
+  .navicon,
+  .navicon:before,
+  .navicon:after {
+    background: mix(#000, $primary-color, 25%);
+  }
+
+  &.close {
+    .navicon {
+      background: transparent;
+    }
+  }
+}
+
+.well {
+  background: #f5f5f5;
+  border-color: #e3e3e3;
+}
+
+.show-modal {
+  &:before {
+    background: rgba(255, 255, 255, 0.85);
+  }
+}
+
+.modal {
+  background: #fff;
+  border-color: $border-color;
+  &__actions {
+    border-top-color: $border-color;
+  }
+}
+
+.footnote, .footnotes {
+  color: mix(#fff, $gray, 25%);
+}
+
+a.reversefootnote {
+  color: $gray;
+}
+
+.required {
+  color: $danger-color;
+}
diff --git a/_sass/minimal-mistakes/_footer.scss b/_sass/minimal-mistakes/_footer.scss
index e14028c..cae892e 100644
--- a/_sass/minimal-mistakes/_footer.scss
+++ b/_sass/minimal-mistakes/_footer.scss
@@ -8,10 +8,8 @@
   margin-left: 0;
   margin-right: 0;
   width: 100%;
-  color: $muted-text-color;
   animation: $intro-transition;
   animation-delay: 0.45s;
-  background-color: $footer-background-color;
 
   footer {
     @include clearfix;
@@ -25,10 +23,6 @@
       max-width: $x-large;
     }
   }
-
-  a {
-    color: inherit;
-  }
 }
 
 .page__footer-copyright {
diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss
index 9f5ed1c..8fcbed6 100644
--- a/_sass/minimal-mistakes/_masthead.scss
+++ b/_sass/minimal-mistakes/_masthead.scss
@@ -3,12 +3,12 @@
    ========================================================================== */
 
 .masthead {
-  border-bottom: 1px solid $border-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
   animation: $intro-transition;
   animation-delay: 0.15s;
   z-index: 20;
 	position: sticky;
-	background: $background-color;
 	top: 0;
 
   &__inner-wrap {
diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss
index 4c6bc34..29e5149 100644
--- a/_sass/minimal-mistakes/_navigation.scss
+++ b/_sass/minimal-mistakes/_navigation.scss
@@ -75,22 +75,11 @@
       line-height: 1.5;
       text-align: center;
       text-decoration: none;
-      color: $muted-text-color;
-      border: 1px solid mix(#000, $border-color, 25%);
+      border-width: 1px;
+      border-style: solid;
       border-radius: 0;
 
-      &:hover {
-        color: $link-color-hover;
-      }
-
-      &.current,
-      &.current.disabled {
-        color: #fff;
-        background: $primary-color;
-      }
-
       &.disabled {
-        color: rgba($muted-text-color, 0.5);
         pointer-events: none;
         cursor: not-allowed;
       }
@@ -124,17 +113,11 @@
     text-align: center;
     text-decoration: none;
     border-radius: $border-radius;
-    color: $pager-text-color;
-    background-color: $primary-color;
-    border: 1px solid $background-color;
-    transition: background-color 0.2s ease-in-out;
-
-    &:visited {
-      color: $pager-text-color;
-    }
+    border-width: 1px;
+    border-style: solid;
+    transition: 0.2s ease-in-out;
 
     &:hover {
-      background-color: $primary-color-raised;
       text-decoration: none;
     }
 
@@ -150,10 +133,8 @@
     }
 
     &.disabled {
-      color: $pager-text-color-disabled;
       pointer-events: none;
       cursor: not-allowed;
-      background-color: $primary-color-disabled;
     }
   }
 }
@@ -164,7 +145,8 @@
 .page__comments + .pagination {
   margin-top: 2em;
   padding-top: 2em;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 }
 
 /*
@@ -176,18 +158,12 @@
   display: flex;
   align-items: center;
   min-height: $nav-height;
-  background: $background-color;
 
   a {
     display: block;
     margin: 0 1rem;
-    color: $masthead-link-color;
     text-decoration: none;
 
-    &:hover {
-      color: $masthead-link-color-hover;
-    }
-
     &.site-logo {
       margin-left: 0;
       margin-right: 0.5rem;
@@ -203,7 +179,6 @@
     height: $nav-toggle-height;
     border: 0;
     outline: none;
-    background-color: transparent;
     cursor: pointer;
   }
 
@@ -228,9 +203,7 @@
     right: 0;
     margin-top: 15px;
     padding: 5px;
-    border: 1px solid $border-color;
     border-radius: $border-radius;
-    background: $background-color;
     box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
 
     &.hidden {
@@ -241,11 +214,6 @@
       margin: 0;
       padding: 10px 20px;
       font-size: $type-size-5;
-
-      &:hover {
-        color: $masthead-link-color-hover;
-        background: $navicon-link-color-hover;
-      }
     }
 
     &:before {
@@ -256,7 +224,6 @@
       width: 0;
       border-style: solid;
       border-width: 0 10px 10px;
-      border-color: $border-color transparent;
       display: block;
       z-index: 0;
     }
@@ -269,14 +236,14 @@
       width: 0;
       border-style: solid;
       border-width: 0 10px 10px;
-      border-color: $background-color transparent;
       display: block;
       z-index: 1;
     }
 
     li {
       display: block;
-      border-bottom: 1px solid $border-color;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
 
       &:last-child {
         border-bottom: none;
@@ -302,10 +269,10 @@
       position: relative;
       display: inline-block;
       padding: 0.5em 2.5em 0.5em 1em;
-      color: $gray;
       font-size: $type-size-6;
       font-weight: bold;
-      border: 1px solid $light-gray;
+      border-width: 1px;
+      border-style: solid;
       border-radius: $border-radius;
       z-index: 20;
       transition: 0.2s ease-out;
@@ -320,35 +287,12 @@
         width: 0.75em;
         height: 0.125em;
         line-height: 1;
-        background-color: $gray;
         transition: 0.2s ease-out;
       }
 
       &:after {
         transform: rotate(90deg);
       }
-
-      &:hover {
-        color: #fff;
-        border-color: $gray;
-        background-color: mix(white, #000, 20%);
-
-        &:before,
-        &:after {
-          background-color: #fff;
-        }
-      }
-    }
-
-    /* selected*/
-    input:checked + label {
-      color: white;
-      background-color: mix(white, #000, 20%);
-
-      &:before,
-      &:after {
-        background-color: #fff;
-      }
     }
 
     /* on hover show expand*/
@@ -384,10 +328,6 @@
   margin: 0;
   font-size: 1.25rem;
 
-  a {
-    color: inherit;
-  }
-
   .active {
     margin-left: -0.5em;
     padding-left: 0.5em;
@@ -431,7 +371,8 @@
   font-size: $type-size-6;
   font-weight: bold;
   text-transform: uppercase;
-  border-bottom: 1px solid $border-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 }
 
 /*
@@ -439,24 +380,16 @@
      ========================================================================== */
 
 .toc {
-  color: $gray;
-  background-color: $background-color;
-  border: 1px solid $border-color;
+  border-width: 1px;
+  border-style: solid;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 
   .nav__title {
-    color: #fff;
     font-size: $type-size-6;
-    background: $primary-color;
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
   }
-
-  // Scrollspy marks toc items as .active when they are in focus
-  .active a {
-    @include yiq-contrasted($active-color);
-  }
 }
 
 .toc__menu {
@@ -473,14 +406,10 @@
   a {
     display: block;
     padding: 0.25rem 0.75rem;
-    color: $muted-text-color;
     font-weight: bold;
     line-height: 1.5;
-    border-bottom: 1px solid $border-color;
-
-    &:hover {
-      color: $text-color;
-    }
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
   }
 
   li ul > li a {
diff --git a/_sass/minimal-mistakes/_noscript.scss b/_sass/minimal-mistakes/_noscript.scss
index f7f8d2d..0a56e2d 100644
--- a/_sass/minimal-mistakes/_noscript.scss
+++ b/_sass/minimal-mistakes/_noscript.scss
@@ -15,10 +15,4 @@
 
 #follow-button {
   display: none;
-  &:checked + label {
-    background-color: $primary-color-disabled;
-  }
-  &:hover + label {
-    background-color: $primary-color-raised;
-  }
 }
diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss
index a7e2dc7..c3c2d24 100644
--- a/_sass/minimal-mistakes/_page.scss
+++ b/_sass/minimal-mistakes/_page.scss
@@ -67,7 +67,8 @@ body {
 .page__content {
   h2 {
     padding-bottom: 0.5em;
-    border-bottom: 1px solid $border-color;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
   }
 
   h1, h2, h3, h4, h5, h6 {
@@ -152,10 +153,6 @@ body {
     animation: $intro-transition;
     animation-delay: 0.25s;
 
-    a {
-      color: #fff;
-    }
-
     .wrapper {
       padding-left: 1em;
       padding-right: 1em;
@@ -165,14 +162,6 @@ body {
       }
     }
 
-    .page__title,
-    .page__meta,
-    .page__lead,
-    .btn {
-      color: #fff;
-      text-shadow: 1px 1px 4px rgba(#000, 0.5);
-    }
-
     .page__lead {
       max-width: $medium;
     }
@@ -198,9 +187,7 @@ body {
   right: 0;
   margin: 0 auto;
   padding: 2px 5px;
-  color: #fff;
   font-size: $type-size-7;
-  background: #000;
   text-align: right;
   z-index: 5;
   opacity: 0.5;
@@ -211,7 +198,6 @@ body {
   }
 
   a {
-    color: #fff;
     text-decoration: none;
   }
 }
@@ -223,7 +209,8 @@ body {
 .page__share {
   margin-top: 2em;
   padding-top: 1em;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 
   @include breakpoint(max-width $small) {
     .btn span {
@@ -249,16 +236,11 @@ body {
 
 .page__meta {
   margin-top: 2em;
-  color: $muted-text-color;
   font-size: $type-size-6;
 
   p {
     margin: 0;
   }
-
-  a {
-    color: inherit;
-  }
 }
 
 .page__meta-title {
@@ -293,12 +275,12 @@ body {
   margin-bottom: 8px;
   padding: 4px 8px;
   text-decoration: none;
-  border: 1px solid mix(#000, $border-color, 25%);
+  border-width: 1px;
+  border-style: solid;
   border-radius: $border-radius;
 
   &:hover {
     text-decoration: none;
-    color: $link-color-hover;
   }
 }
 
@@ -307,7 +289,8 @@ body {
   padding-bottom: 1em;
 
   &:not(:last-child) {
-    border-bottom: solid 1px $border-color;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
   }
 
   .archive__item-title {
@@ -326,11 +309,6 @@ body {
 
 .taxonomy__title {
   margin-bottom: 0.5em;
-  color: $muted-text-color;
-}
-
-.taxonomy__count {
-  color: $muted-text-color;
 }
 
 .taxonomy__index {
@@ -350,16 +328,15 @@ body {
     display: flex;
     padding: 0.25em 0;
     justify-content: space-between;
-    color: inherit;
     text-decoration: none;
-    border-bottom: 1px solid $border-color;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
   }
 }
 
 .back-to-top {
   display: block;
   clear: both;
-  color: $muted-text-color;
   font-size: 0.6em;
   text-transform: uppercase;
   text-align: right;
@@ -377,13 +354,14 @@ body {
 .page__comments-title {
   padding-top: 2rem;
   font-size: $type-size-6;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 }
 
 @if $comments-provider == staticman or $comments-provider == staticman_v2 {
   .page__comments-form {
     transition: $global-transition;
-  
+
     &.disabled {
       input,
       button,
@@ -397,32 +375,32 @@ body {
       }
     }
   }
-  
+
   .comment {
     @include clearfix();
     margin: 1em 0;
-  
+
     &:not(:last-child) {
       border-bottom: 1px solid $border-color;
     }
   }
-  
+
   .comment__avatar-wrapper {
     float: left;
     width: 60px;
     height: 60px;
-  
+
     @include breakpoint($large) {
       width: 100px;
       height: 100px;
     }
   }
-  
+
   .comment__avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-  
+
     @include breakpoint($large) {
       width: 80px;
       height: 80px;
@@ -430,28 +408,28 @@ body {
       border: 1px solid $border-color;
     }
   }
-  
+
   .comment__content-wrapper {
     float: right;
     width: calc(100% - 60px);
-  
+
     @include breakpoint($large) {
       width: calc(100% - 100px);
     }
   }
-  
+
   .comment__author {
     margin: 0;
-  
+
     a {
       text-decoration: none;
     }
   }
-  
+
   .comment__date {
     @extend .page__meta;
     margin: 0;
-  
+
     a {
       text-decoration: none;
     }
@@ -465,10 +443,10 @@ body {
   @include clearfix();
   margin-top: 2em;
   padding-top: 1em;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 
   a {
-    color: inherit;
     text-decoration: none;
   }
 }
diff --git a/_sass/minimal-mistakes/_reset.scss b/_sass/minimal-mistakes/_reset.scss
index c55264a..e0a5ebf 100644
--- a/_sass/minimal-mistakes/_reset.scss
+++ b/_sass/minimal-mistakes/_reset.scss
@@ -7,7 +7,6 @@
 html {
   /* apply a natural box layout model to all elements */
   box-sizing: border-box;
-  background-color: $background-color;
   font-size: 16px;
 
   @include breakpoint($medium) {
@@ -28,13 +27,6 @@ html {
 
 body { margin: 0; }
 
-/* Selected elements */
-
-::selection {
-  color: $background-color;
-  background: $masthead-link-color-hover;
-}
-
 /* Display HTML5 elements in IE6-9 and FF3 */
 
 article,
@@ -65,10 +57,6 @@ audio:not([controls]) {
   display: none;
 }
 
-a {
-  color: $link-color;
-}
-
 /* Apply focus state */
 
 a:focus {
diff --git a/_sass/minimal-mistakes/_search.scss b/_sass/minimal-mistakes/_search.scss
index a7bd198..2e223de 100644
--- a/_sass/minimal-mistakes/_search.scss
+++ b/_sass/minimal-mistakes/_search.scss
@@ -14,14 +14,8 @@
   height: $nav-toggle-height;
   border: 0;
   outline: none;
-  color: $primary-color;
-  background-color: transparent;
   cursor: pointer;
   transition: 0.2s;
-
-  &:hover {
-    color: $primary-color-raised;
-  }
 }
 
 .search-icon {
@@ -41,11 +35,6 @@
     @include breakpoint($x-large) {
       max-width: $max-width;
     }
-
-  }
-
-  &__form {
-    background-color: transparent;
   }
 
   .search-input {
@@ -55,9 +44,7 @@
     border: none;
     outline: none;
     box-shadow: none;
-    background-color: transparent;
     font-size: $type-size-3;
-    color: $text-color;
 
     @include breakpoint($large) {
       font-size: $type-size-2;
@@ -106,13 +93,11 @@
 }
 
 .archive__item-title .ais-Highlight {
-  color: $primary-color;
   font-style: normal;
   text-decoration: underline;
 }
 
 .archive__item-excerpt .ais-Highlight {
-  color: $primary-color;
   font-style: normal;
   font-weight: bold;
 }
diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss
index 35f0e80..7ae4d77 100644
--- a/_sass/minimal-mistakes/_sidebar.scss
+++ b/_sass/minimal-mistakes/_sidebar.scss
@@ -126,7 +126,8 @@
 
     @include breakpoint($large) {
       padding: 5px;
-      border: 1px solid $border-color;
+      border-width: 1px;
+      border-style: solid;
     }
   }
 }
@@ -146,7 +147,6 @@
   }
 
   a {
-    color: inherit;
     text-decoration: none;
   }
 }
@@ -230,9 +230,9 @@
   margin-top: 16px;
   padding: 8px;
   list-style-type: none;
-  border: 1px solid $border-color;
+  border-width: 1px;
+  border-style: solid;
   border-radius: $border-radius;
-  background: $background-color;
   box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
   cursor: default;
 
@@ -246,7 +246,6 @@
     margin: 0;
     padding: 0;
     border: 0;
-    background: transparent;
     box-shadow: none;
   }
 
@@ -259,7 +258,6 @@
     width: 0;
     border-style: solid;
     border-width: 0 10px 10px;
-    border-color: $border-color transparent;
     z-index: 0;
 
     @include breakpoint($large) {
@@ -276,7 +274,6 @@
     width: 0;
     border-style: solid;
     border-width: 0 10px 10px;
-    border-color: $background-color transparent;
     z-index: 1;
 
     @include breakpoint($large) {
@@ -292,7 +289,6 @@
     display: block;
     padding-right: 4px;
     padding-top: 2px;
-    color: inherit;
     font-size: $type-size-5;
     text-decoration: none;
 
diff --git a/_sass/minimal-mistakes/_tables.scss b/_sass/minimal-mistakes/_tables.scss
index 1b1cd97..6f2010e 100644
--- a/_sass/minimal-mistakes/_tables.scss
+++ b/_sass/minimal-mistakes/_tables.scss
@@ -16,8 +16,8 @@ table {
 }
 
 thead {
-  background-color: $border-color;
-  border-bottom: 2px solid mix(#000, $border-color, 25%);
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
 }
 
 th {
@@ -28,7 +28,8 @@ th {
 
 td {
   padding: 0.5em;
-  border-bottom: 1px solid mix(#000, $border-color, 25%);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 }
 
 tr,
diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss
index 8ffe957..d6dbb03 100644
--- a/_sass/minimal-mistakes/_utilities.scss
+++ b/_sass/minimal-mistakes/_utilities.scss
@@ -200,131 +200,6 @@ body:hover .visually-hidden button {
   vertical-align: middle;
 }
 
-/* social icons*/
-
-.social-icons {
-  .fas,
-  .fab,
-  .far,
-  .fal {
-    color: $text-color;
-  }
-/*
-  .fa-behance,
-  .fa-behance-square {
-    color: $behance-color;
-  }
-
-  .fa-bitbucket {
-    color: $bitbucket-color;
-  }
-
-  .fa-dribbble,
-  .fa-dribble-square {
-    color: $dribbble-color;
-  }
-
-  .fa-facebook,
-  .fa-facebook-square,
-  .fa-facebook-f {
-    color: $facebook-color;
-  }
-
-  .fa-flickr {
-    color: $flickr-color;
-  }
-
-  .fa-foursquare {
-    color: $foursquare-color;
-  }
-
-  .fa-github,
-  .fa-github-alt,
-  .fa-github-square {
-    color: $github-color;
-  }
-
-  .fa-gitlab {
-    color: $gitlab-color;
-  }
-
-  .fa-instagram {
-    color: $instagram-color;
-  }
-
-  .fa-keybase {
-    color: $keybase-color;
-  }
-
-  .fa-lastfm,
-  .fa-lastfm-square {
-    color: $lastfm-color;
-  }
-
-  .fa-linkedin,
-  .fa-linkedin-in {
-    color: $linkedin-color;
-  }
-
-  .fa-mastodon,
-  .fa-mastodon-square {
-    color: $mastodon-color;
-  }
-
-  .fa-pinterest,
-  .fa-pinterest-p,
-  .fa-pinterest-square {
-    color: $pinterest-color;
-  }
-
-  .fa-reddit {
-    color: $reddit-color;
-  }
-
-  .fa-rss,
-  .fa-rss-square {
-    color: $rss-color;
-  }
-
-  .fa-soundcloud {
-    color: $soundcloud-color;
-  }
-
-  .fa-stack-exchange,
-  .fa-stack-overflow {
-    color: $stackoverflow-color;
-  }
-
-  .fa-tumblr,
-  .fa-tumblr-square {
-    color: $tumblr-color;
-  }
-
-  .fa-twitter,
-  .fa-twitter-square {
-    color: $twitter-color;
-  }
-
-  .fa-vimeo,
-  .fa-vimeo-square,
-  .fa-vimeo-v {
-    color: $vimeo-color;
-  }
-
-  .fa-vine {
-    color: $vine-color;
-  }
-
-  .fa-youtube {
-    color: $youtube-color;
-  }
-
-  .fa-xing,
-  .fa-xing-square {
-    color: $xing-color;
-  }*/
-}
-
 /*
    Navicons
    ========================================================================== */
@@ -333,7 +208,6 @@ body:hover .visually-hidden button {
   position: relative;
   width: $navicon-width;
   height: $navicon-height;
-  background: $primary-color;
   margin: auto;
   transition: 0.3s;
 
@@ -344,7 +218,6 @@ body:hover .visually-hidden button {
     left: 0;
     width: $navicon-width;
     height: $navicon-height;
-    background: $primary-color;
     transition: 0.3s;
   }
 
@@ -358,9 +231,6 @@ body:hover .visually-hidden button {
 }
 
 .close .navicon {
-  /* hide the middle line*/
-  background: transparent;
-
   /* overlay the lines by setting both their top values to 0*/
   &:before,
   &:after {
@@ -380,18 +250,15 @@ body:hover .visually-hidden button {
 
 .greedy-nav__toggle {
   &:before {
-    @supports (pointer-events: none) {
-      content: '';
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      background-color: $background-color;
-      transition: $global-transition;
-      pointer-events: none;
-    }
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: $global-transition;
+    pointer-events: none;
   }
 
   &.close {
@@ -403,20 +270,6 @@ body:hover .visually-hidden button {
   }
 }
 
-.greedy-nav__toggle:hover {
-  .navicon,
-  .navicon:before,
-  .navicon:after {
-    background: mix(#000, $primary-color, 25%);
-  }
-
-  &.close {
-    .navicon {
-      background: transparent;
-    }
-  }
-}
-
 /*
    Sticky, fixed to top content
    ========================================================================== */
@@ -442,8 +295,8 @@ body:hover .visually-hidden button {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
+  border-width: 1px;
+  border-style: solid;
   border-radius: $border-radius;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
@@ -464,7 +317,6 @@ body:hover .visually-hidden button {
     width: 100%;
     height: 100%;
     z-index: 999;
-    background-color: rgba(255, 255, 255, 0.85);
   }
 
   .modal {
@@ -482,8 +334,8 @@ body:hover .visually-hidden button {
   margin-top: -150px;
   min-height: 0;
   z-index: 9999;
-  background: #fff;
-  border: 1px solid $border-color;
+  border-width: 1px;
+  border-style: solid;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 
@@ -498,7 +350,8 @@ body:hover .visually-hidden button {
 
   &__actions {
     padding: 0.5em 1em;
-    border-top: 1px solid $border-color;
+    border-top-width: 1px;
+    border-top-style: solid;
   }
 }
 
@@ -507,13 +360,10 @@ body:hover .visually-hidden button {
    ========================================================================== */
 
 .footnote {
-  color: mix(#fff, $gray, 25%);
   text-decoration: none;
 }
 
 .footnotes {
-  color: mix(#fff, $gray, 25%);
-
   ol,
   li,
   p {
@@ -523,7 +373,6 @@ body:hover .visually-hidden button {
 }
 
 a.reversefootnote {
-  color: $gray;
   text-decoration: none;
 
   &:hover {
@@ -536,7 +385,6 @@ a.reversefootnote {
    ========================================================================== */
 
 .required {
-  color: $danger-color;
   font-weight: bold;
 }
 
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 9e92de8..6d37757 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -13,7 +13,7 @@ $comments-provider: {{ site.comments.provider }};
 
 @media (prefers-color-scheme: light) {
 	@import "minimal-mistakes/skins/{{ site.minimal_mistakes_light_skin | default: 'default' }}"; // skin
-  @import "minimal-mistakes"; // main partials
+  @import "minimal-mistakes/colors"; // color overrides
 }
 
 
-- 
2.45.2