updated color styles and made them dynamic

PascalKleindienst · Oct 31, 2018 · 61fcfb7 · 61fcfb7
1 parent e881398
commit 61fcfb7
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 21 deletions.
diff --git a/scss/_colors.scss b/scss/_colors.scss
@@ -1,24 +1,38 @@
-.bg-red        { background-color: $red; }
-.bg-magenta    { background-color: $magenta; }
-.bg-green      { background-color: $green; }
-.bg-blue       { background-color: $blue; }
-.bg-cyan       { background-color: $cyan; }
+@each $idx, $color in $colors {
+  // Background Color
+  .bg-#{$idx},
+  .btn-#{$idx} {
+    background-color: $color;
+  }
 
-.bg-yellow     {
-  background-color: $yellow;
-  color: $dark-background;
-}
+  // Text Colors
+  .text-#{$idx},
+  .anchor-#{$idx} a {
+    color: $color;
+  }
 
-.bg-white      {
-  background-color: $white;
-  color: $dark-background;
-}
+  .anchor-#{$idx} a:hover,
+  .anchor-#{$idx} a:active,
+  .anchor-#{$idx} a:focus {
+    color: darken($color, 15%);
+  }
+
+  // Buttons
+  .btn-#{$idx} {
+    @extend .text-white;
 
+    &:active,
+    &:focus,
+    &:hover {
+      @extend .text-white;
+      background-color: darken($color, 15%);
+    }
+  }
+}
 
-.text-red        { color: $red; }
-.text-magenta    { color: $magenta; }
-.text-green      { color: $green; }
-.text-yellow     { color: $yellow; }
-.text-blue       { color: $blue; }
-.text-cyan       { color: $cyan; }
-.text-white      { color: $white; }
+.bg-yellow, .bg-white, .btn-yellow {
+  @extend .text-dark;
+}
+.bg-dark {
+  @extend .text-white;
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -7,6 +7,20 @@ $magenta: #d80073 !default;
 $cyan:    #00bcd4 !default;
 $white:   #ecf0f1 !default;
 $gray:    #2c3e50 !default;
+$dark:    darken($gray, 4%) !default;
+$light:   darken($white, 8%) !default;
+$colors: (
+    'red':     $red,
+    'green':   $green,
+    'yellow':  $yellow,
+    'blue':    $blue,
+    'magenta': $magenta,
+    'cyan':    $cyan,
+    'white':   $white,
+    'gray':    $gray,
+    'light':   $light,
+    'dark':    $dark
+) !default;
 
 // Viewports
 $viewport-m: 32rem !default;
@@ -19,10 +33,19 @@ $font-weight: 400 !default;
 $font-family: 'Inconsolata', 'Lucida Console', Courier, monospace !default;
 
 // Dark Theme (default)
-$dark-background: $gray !default;
+$dark-background: $dark !default;
 $dark-font-color: $white !default;
 $dark-link-color: $yellow !default;
 
+// Light Theme
+$light-background: $light !default;
+$light-font-color: $gray !default;
+$light-link-color: $blue !default;
+
+// Menu
+$menu-item-before: '[' !default;
+$menu-item-after: ']' !default;
+
 // Code
 $code-color: darken($green, 15%) !default;
 $code-bg:    darken($gray, 15%) !default;