#137, #851, #911, #1031 cleaning up remainder of direct references to theme colors

Author: rjzupkoii

_sass/_syntax.scss

@@ -17,7 +17,7 @@ div.highlighter-rouge, figure.highlight {
     top: 0;
     right: 0;
     padding: 0.5em;
-    background-color: $lighter-gray;
+    background-color: mix(#fff, #7a8288, 90%);
     content: "\f121";
     font-family: "Font Awesome 6 Free" !important;
     font-size: $type-size-6;

_sass/_themes.scss

@@ -1,14 +1,7 @@
 /* ==========================================================================
-   COMMON COLOR CODES
+   SHARED THEME SETTINGS
    ========================================================================== */
 
-/* Color codes used throughout the site */
-$gray                          : #7a8288;
-$dark-gray                     : mix(#000, $gray, 40%);
-$darker-gray                   : mix(#000, $gray, 60%);
-$light-gray                    : mix(#fff, $gray, 50%);
-$lighter-gray                  : mix(#fff, $gray, 90%);
-
 /* ==========================================================================
    TYPOGRAPHY
    ========================================================================== */

_sass/include/_utilities.scss

@@ -485,7 +485,7 @@ body:hover .visually-hidden button {
 }
 
 a.reversefootnote {
-  color: $gray;
+  color: var(--global-text-color-light);
   text-decoration: none;
 
   &:hover {

_sass/layout/_archive.scss

@@ -31,7 +31,7 @@
   margin: 1.414em 0 0;
   padding-bottom: 0.5em;
   font-size: $type-size-5;
-  color: mix(#fff, $gray, 25%);
+  color: var(--global-text-color-light);
   border-bottom: 1px solid var(--global-border-color);
 
   + .list__item .archive__item-title {

_sass/layout/_base.scss

@@ -145,7 +145,7 @@ td > code {
   padding-bottom: 0.1rem;
   font-size: $type-size-6;
   background: var(--global-code-background-color);
-  border: 1px solid $lighter-gray;
+  border: 1px solid var(--global-thead-color);
   border-radius: $border-radius;
   box-shadow: $box-shadow;
   color: var(--global-code-text-color);
@@ -248,7 +248,7 @@ figcaption {
   a {
     color: inherit;
     text-decoration: none;
-    border-bottom: 1px solid $light-gray;
+    border-bottom: 1px solid var(--global-border-color );
     -webkit-transition: $global-transition;
     transition: $global-transition;
 

_sass/layout/_buttons.scss

@@ -48,13 +48,13 @@
   /* for dark backgrounds */
 
   &--inverse {
-    color: $gray !important;
-    border: 1px solid $light-gray !important; /* override*/
+    color: var(--global-text-color-light) !important;
+    border: 1px solid var(--global-border-color) !important; /* override*/
     background-color: #fff;
 
     &:hover {
       color: #fff !important;
-      border-color: $gray;
+      border-color: var(--global-text-color-light);
     }
   }
 

_sass/layout/_footer.scss

@@ -25,7 +25,7 @@
           animation: intro 0.3s both;
   -webkit-animation-delay: 0.45s;
           animation-delay: 0.45s;
-  border-top: 1px solid $light-gray;
+  border-top: 1px solid var(var(--global-border-color));
 
   footer {
     @include clearfix;
@@ -53,7 +53,7 @@
   .fab,
   .far,
   .fal {
-    color: mix(#fff, $gray, 25%);
+    color: var(--global-text-color-light);
   }
 }
 

_sass/layout/_masthead.scss

@@ -47,6 +47,7 @@
 }
 
 .masthead__menu-item {
+  background-color: var(--global-bg-color);
   display: block;
   list-style-type: none;
   white-space: nowrap;

_sass/layout/_navigation.scss

@@ -83,8 +83,8 @@
       line-height: 1.5;
       text-align: center;
       text-decoration: none;
-      color: mix(#fff, $gray, 25%);
-      border: 1px solid $light-gray;
+      color: var(--global-text-color-light);
+      border: 1px solid var(var(--global-border-color));
       border-radius: 0;
 
       &:hover {
@@ -97,7 +97,7 @@
       }
 
       &.disabled {
-        color: mix(#fff, $gray, 75%);
+        color: var(--global-text-color-light);
         pointer-events: none;
         cursor: not-allowed;
       }
@@ -131,8 +131,8 @@
     font-weight: bold;
     text-align: center;
     text-decoration: none;
-    color: mix(#fff, $gray, 50%);
-    border: 1px solid $light-gray;
+    color: var(--global-text-color-light);
+    border: 1px solid var(var(--global-border-color));
     border-radius: $border-radius;
 
     &:hover {
@@ -151,7 +151,7 @@
     }
 
     &.disabled {
-      color: mix(#fff, $gray, 75%);
+      color: var(--global-text-color-light);
       pointer-events: none;
       cursor: not-allowed;
     }
@@ -373,7 +373,7 @@
 
 .toc {
   font-family: $sans-serif-narrow;
-  color: $gray;
+  color: var(--global-text-color-light);
   text-transform: uppercase;
   letter-spacing: 1px;
   background-color: #fff;
@@ -400,7 +400,7 @@
   a {
     display: block;
     padding: 0.5rem 1rem;
-    color: $gray;
+    color: var(--global-text-color-light);
     font-size: $type-size-7;
     font-weight: bold;
     line-height: 1.5;
@@ -409,7 +409,7 @@
 
     &:hover {
       color: #000;
-      background: $lighter-gray;
+      background: var(--global-link-color-hover);
     }
   }
 

_sass/layout/_notices.scss

@@ -66,7 +66,7 @@
 /* Default notice */
 
 .notice {
-  @include notice($light-gray);
+  @include notice($notice-color);
 }
 
 /* Primary notice */