Replace color variables file with settings file that has a more extensive set of options daviddarnes#44

Author: daviddarnes

_sass/_colors.scss

@@ -0,0 +1,38 @@
+// Background colours
+$backgroundColour: #fff;
+$codeBackgroundColour: #f4f4f4;
+$featureBackgroundColour: #eee;
+$accentColour: #05bf85;
+
+// Text colours
+$headingColour: #333;
+$bodyColour: #111;
+$linkColour: #05bf85;
+$hoverColour: darken($linkColour, 10%);
+$captionColour: #aaa;
+$white: #fff;
+
+// Typography
+$bodytype: (
+  font-family: 'Georgia, serif',
+  regular: 400,
+  bold: 700,
+  italic: italic,
+  cap-height: 0.66
+);
+
+$headingtype: (
+  font-family: 'Helvetica, sans-serif',
+  regular: 400,
+  bold: 700,
+  cap-height: 0.66
+);
+
+$monospacetype: (
+  font-family: 'Menlo, monospace',
+  regular: 400,
+  cap-height: 0.68
+);
+
+// Font import, if you're using a non-standard web font
+// @import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

_sass/_settings.scss

@@ -94,15 +94,3 @@ $white: #FFFFFF !default;
 // Background colours.
 $backgroundColour: #FCFCFC !default;
 $codeBackgroundColour: #F5F4F2 !default;
-
-
-// Alembic reassigned variables
-$headingColour: $color__site--heading;
-$bodyColour: $color__site--body;
-$linkColour: $color__site--link;
-$hoverColour: $color__site--link--hover;
-$captionColour: $color__site--captions;
-$white: #fff;
-
-$backgroundColour: $color__site--background;
-$codeBackgroundColour: darken($color__site--background, 5%);

_sass/sassline-base/_variables.scss

@@ -5,7 +5,7 @@ title: false
 
 // Frameworks & Imports
 @charset "utf-8";
-@import "colors";
+@import "settings";
 @import "normalize";
 @import "sassline-base";
 @import "syntax";
@@ -14,8 +14,8 @@ title: false
 
 // Structural elements
 body {
-  background: $color__site--background;
-  color: $color__site--body;
+  background: $backgroundColour;
+  color: $bodyColour;
   height: 100%;
   display: flex;
   @include flex-direction(column);
@@ -52,7 +52,7 @@ body {
   padding-bottom: .4rem;
   margin-bottom: 1.6rem;
   text-align: center;
-  background: $color__site--accent;
+  background: $featureBackgroundColour;
   background-size: cover;
   background-position: center;
   @include flexbox;
@@ -75,16 +75,16 @@ body {
 
 .small {
   padding-top: .8rem;
-  color: $color__site--captions;
+  color: $captionColour;
   display: inline-block;
 }
 
 .footer {
-  background: lighten(invert($color__site--background), 15%);
+  background: lighten(invert($backgroundColour), 15%);
   a {
-    color: invert($color__site--heading);
+    color: darken($backgroundColour, 15%);
     &:hover {
-      color: lighten(invert($color__site--body), 15%);
+      color: $backgroundColour;
     }
   }
 }
@@ -95,7 +95,7 @@ body {
   &--paginator {
     @include flexbox;
     @include justify-content(space-between);
-    color: $color__site--captions;
+    color: $captionColour;
     text-align: center;
   }
   &--social {
@@ -212,7 +212,7 @@ body {
   }
   &--current {
     a {
-      color: $color__site--link--current;
+      opacity: 0.5;
     }
   }
 }
@@ -227,7 +227,7 @@ body {
     display: inline-block;
     transition: fill .1s;
     &:hover {
-      fill: darken($color__site--link, 10%);
+      fill: darken($linkColour, 10%);
     }
   }
 }
@@ -334,7 +334,7 @@ button,
 .button {
   cursor: pointer;
   display: inline-block;
-  background: $color__site--accent;
+  background: $accentColour;
   position: relative;
   transition: box-shadow .1s;
   will-change: box-shadow;
@@ -355,7 +355,7 @@ input,
 textarea {
   &:focus,
   &:hover:focus {
-    outline: solid .12rem invert($color__site--accent);
+    outline: solid .12rem invert($accentColour);
   }
 }
 
@@ -368,9 +368,9 @@ input[type="email"],
 input[type="search"],
 textarea {
   width: 100%;
-  border: 1px solid $color__site--captions;
+  border: 1px solid $captionColour;
   &:hover {
-    border-color: darken($color__site--captions, 20%);
+    border-color: darken($captionColour, 20%);
   }
 }
 
@@ -395,21 +395,21 @@ pre code {
 }
 
 ::-webkit-input-placeholder {
-  color: darken($color__site--captions, 30%);
+  color: darken($captionColour, 30%);
 }
 ::-moz-placeholder {
-  color: darken($color__site--captions, 30%);
+  color: darken($captionColour, 30%);
 }
 :-ms-input-placeholder {
-  color: darken($color__site--captions, 30%);
+  color: darken($captionColour, 30%);
 }
 :-moz-placeholder {
-  color: darken($color__site--captions, 30%);
+  color: darken($captionColour, 30%);
 }
 
 ::selection {
-  background: $color__site--heading;
-  color: $color__site--background;
+  background: invert($backgroundColour);
+  color: $backgroundColour;
   text-shadow: none;
 }
 
@@ -419,12 +419,12 @@ pre code {
   button {
     background-image: none;
     text-shadow: none;
-    color: lighten(invert($color__site--body), 15%);
+    color: $backgroundColour;
     &:hover,
     &:active,
     &:focus {
       background-image: none;
-      color: lighten(invert($color__site--body), 15%);
+      color: $backgroundColour;
     }
   }
   hr {