#137 update base colors

Author: rjzupkoii

_sass/_base.scss

@@ -100,7 +100,7 @@ blockquote {
   padding-left: 1em;
   padding-right: 1em;
   font-style: italic;
-  border-left: 0.25em solid $primary-color;
+  border-left: 0.25em solid var(--global-base-color);
 
   cite {
     font-style: italic;

_sass/_buttons.scss

@@ -17,7 +17,7 @@
   font-weight: bold;
   text-align: center;
   text-decoration: none;
-  background-color: $primary-color;
+  background-color: var(--global-base-color);
   border: 0 !important;
   border-radius: $border-radius;
   cursor: pointer;

_sass/_forms.scss

@@ -86,7 +86,7 @@ select {
   box-shadow: $box-shadow;
 
   &:hover {
-    border-color: mix(#fff, $primary-color, 50%);
+    border-color: var(--global-base-color);
   }
 }
 
@@ -221,7 +221,7 @@ textarea[readonly] {
 
 input:focus,
 textarea:focus {
-  border-color: $primary-color;
+  border-color: var(--global-border-color);
   outline: 0;
   outline: thin dotted \9;
 }

_sass/_navigation.scss

@@ -93,7 +93,7 @@
 
       &.current {
         color: #fff;
-        background: $primary-color;
+        background: var(--global-base-color);
       }
 
       &.disabled {
@@ -181,11 +181,11 @@
     display: block;
     margin: 0 1rem;
     padding: 0.5rem 0;
-    color: $masthead-link-color;
+    color: var(--global-masthead-link-color);
     text-decoration: none;
 
     &:hover {
-      color: $masthead-link-color-hover;
+      color: var(--global-masthead-link-color-hover);
     }
   }
 
@@ -196,7 +196,7 @@
     padding: 0 0.5rem;
     border: 0;
     outline: none;
-    background-color: $primary-color;
+    background-color: var(--global-primary-color);
     color: #fff;
     cursor: pointer;
     z-index: 100;
@@ -234,7 +234,7 @@
         left: 0;
         bottom: 0;
         height: 4px;
-        background: mix(#fff, $primary-color, 50%);
+        background: var(--global-border-color);
         width: 100%;
         -webkit-transition: $global-transition;
         transition: $global-transition;
@@ -268,8 +268,8 @@
       font-size: $type-size-5;
 
       &:hover {
-        color: $masthead-link-color-hover;
-        background: mix(#fff, $primary-color, 75%);
+        color: var(--global-masthead-link-color-hover);
+        background: var(--global-border-color);
       }
     }
 
@@ -338,7 +338,7 @@
     padding-right: 0.5em;
     color: #fff;
     font-weight: bold;
-    background: $primary-color;
+    background: var(--global-primary-color);
     border-radius: $border-radius;
 
     &:hover {
@@ -384,7 +384,7 @@
   .nav__title {
     color: #fff;
     font-size: $type-size-6;
-    background: $primary-color;
+    background: var(--global-primary-color);
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
   }

_sass/_notices.scss

@@ -71,7 +71,7 @@
 /* Primary notice */
 
 .notice--primary {
-  @include notice($primary-color);
+  @include notice($notice-color);
 }
 
 /* Info notice */

_sass/_themes.scss

@@ -9,11 +9,21 @@ $darker-gray                   : mix(#000, $gray, 60%);
 $light-gray                    : mix(#fff, $gray, 50%);
 $lighter-gray                  : mix(#fff, $gray, 90%);
 
+/* Color codes used for the site */
+$success-color              : #62c462;
+$warning-color              : #f89406;
+$danger-color               : #ee5f5b;
+$info-color                 : #2f7f93;
+$notice-color               : #7a8288;
+
 /* Default light theme for the site */
 :root {
+    --global-base-color                 : #{$gray};
     --global-bg-color                   : #fff;
     --global-border-color               : #{$lighter-gray};
     --global-code-background-color      : #fafafa;
     --global-fig-caption-color          : mix(#fff,  #{$dark-gray}, 25%);
+    --global-masthead-link-color        : #{$gray};
+    --global-masthead-link-color-hover  : mix(#000, #{$gray}, 25%);    
     --global-text-color                 : #{$dark-gray};
 }

_sass/_variables.scss

@@ -52,16 +52,8 @@ $sidebar-link-max-width     : 250px;
 
 
 /*
-   Colors
+   Brand Colors
    ========================================================================== */
-
-$primary-color              : #7a8288;
-$success-color              : #62c462;
-$warning-color              : #f89406;
-$danger-color               : #ee5f5b;
-$info-color                 : #2f7f93;
-
-/* brands */
 $behance-color              : #1769FF;
 $bluesky-color              : #1184fe;
 $dribbble-color             : #ea4c89;
@@ -87,14 +79,10 @@ $vine-color                 : #00bf8f;
 $youtube-color              : #bb0000;
 $xing-color                 : #006567;
 
-
 /* links */
 $link-color                 : $info-color;
 $link-color-hover           : mix(#000, $link-color, 25%);
 $link-color-visited         : mix(#fff, $link-color, 25%);
-$masthead-link-color        : $primary-color;
-$masthead-link-color-hover  : mix(#000, $primary-color, 25%);
-
 
 /*
    Breakpoints