From 288b2e6039540781cb2018f891287b186d1fa41b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 4 Oct 2019 21:30:45 +0200
Subject: [PATCH] dark text input

---
 src/components/Layout.module.scss             |  2 +-
 src/components/Search/SearchInput.module.scss |  5 -----
 src/components/atoms/Input.module.scss        | 10 +++++++---
 src/components/molecules/Menu.module.scss     | 11 +++++++++++
 src/styles/_variables.scss                    | 11 ++++++-----
 src/styles/global.scss                        |  2 +-
 6 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index 7f516f15..8304f409 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -35,7 +35,7 @@
   transition-property: transform, background;
 
   :global(.has-menu-open) & {
-    transform: translate3d(0, ($spacer * 3), 0);
+    transform: translate3d(0, ($spacer * 3.5), 0);
   }
 
   :global(.dark) & {
diff --git a/src/components/Search/SearchInput.module.scss b/src/components/Search/SearchInput.module.scss
index f84f46b6..bad30172 100644
--- a/src/components/Search/SearchInput.module.scss
+++ b/src/components/Search/SearchInput.module.scss
@@ -2,15 +2,10 @@
 
 .searchInput {
   composes: input from '../atoms/Input.module.scss';
-  background: $input-bg-focus;
 
   &::-webkit-search-cancel-button {
     display: none;
   }
-
-  &:hover {
-    background: $input-bg-focus;
-  }
 }
 
 .searchInputClose {
diff --git a/src/components/atoms/Input.module.scss b/src/components/atoms/Input.module.scss
index f9a6473f..e456a821 100644
--- a/src/components/atoms/Input.module.scss
+++ b/src/components/atoms/Input.module.scss
@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 
 .input {
   display: block;
@@ -16,12 +17,15 @@
   transition: all ease-in-out 0.15s;
   appearance: none;
 
-  &:hover {
-    background: lighten($input-bg, 30%);
+  @include placeholder();
+
+  :global(.dark) & {
+    color: $input-color--dark;
+    background-color: $input-bg--dark;
+    @include placeholder($input-color-placeholder--dark);
   }
 
   &:focus {
-    background-color: $input-bg-focus;
     border-color: $input-border-focus;
     outline: 0;
   }
diff --git a/src/components/molecules/Menu.module.scss b/src/components/molecules/Menu.module.scss
index ecbc11f1..1f4b5a59 100644
--- a/src/components/molecules/Menu.module.scss
+++ b/src/components/molecules/Menu.module.scss
@@ -44,8 +44,19 @@
     display: block;
     text-align: center;
 
+    &:hover,
+    &:focus {
+      color: $link-color-hover;
+    }
+
     :global(.dark) & {
+      color: $text-color--dark;
       text-shadow: 0 -1px 0 rgba(#000, 0.5);
+
+      &:hover,
+      &:focus {
+        color: $link-color-hover;
+      }
     }
   }
 }
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index fdb55f64..e5e4e2b2 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -59,7 +59,6 @@ $line-height-small: 1.1428571429;
 $font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
   Helvetica, Arial, sans-serif;
 $font-weight-base: 400;
-$font-color-base: $text-color;
 
 $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
   'Courier New', monospace;
@@ -103,15 +102,17 @@ $screen-lg: 87.5em;
 // Forms
 /////////////////////////////////////
 
-$input-bg: rgba(#fff, 0.85);
-$input-bg-focus: #fff;
+$input-bg: darken($body-background-color, 5%);
+$input-bg--dark: darken($body-background-color--dark, 5%);
 $input-bg-disabled: $brand-grey-light;
 
 $input-font-size: $font-size-base;
 $input-font-weight: $font-weight-base;
 
-$input-color: $font-color-base;
-$input-color-placeholder: rgba(46, 79, 92, 0.3);
+$input-color: $text-color;
+$input-color--dark: $text-color--dark;
+$input-color-placeholder: $brand-grey-light;
+$input-color-placeholder--dark: $brand-grey;
 
 $input-border: $brand-grey-light;
 $input-border-radius: $border-radius;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 4f1787ae..54f61e1c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -24,7 +24,7 @@ body {
   font-weight: $font-weight-base;
   font-size: $font-size-base;
   line-height: $line-height;
-  color: $font-color-base;
+  color: $text-color;
   text-rendering: optimizeLegibility;
   letter-spacing: -0.01em;
   font-feature-settings: 'liga', 'kern';