From bdf424a234f9e603233d18ef0d602115d411d7b2 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 28 Feb 2020 16:27:38 -0500
Subject: [PATCH] Start alt-colors overrides (#126)

---
 src/styles/themes/_default.scss    | 17 ++++++++++++-----
 src/views/private/private-view.vue |  4 ++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/styles/themes/_default.scss b/src/styles/themes/_default.scss
index 5d2c565874..0fd750b687 100644
--- a/src/styles/themes/_default.scss
+++ b/src/styles/themes/_default.scss
@@ -1,5 +1,6 @@
 /* stylelint-disable custom-property-empty-line-before, declaration-colon-space-after */
-body {
+body,
+.default-colors {
 	/* Global */
 	--brand: 										var(--blue-grey-900);
 
@@ -88,8 +89,14 @@ body {
 	--overlay-color: 								rgba(38, 50, 56, 0.75);
 	--divider-color:								var(--blue-grey-50);
 
-	--tooltip-foreground-color: var(--button-primary-foreground-color);
-	--tooltip-background-color: var(--button-primary-background-color-hover);
-	--tooltip-foreground-color-inverted: var(--input-foreground-color);
-	--tooltip-background-color-inverted: var(--button-secondary-background-color);
+	--tooltip-foreground-color:                     var(--button-primary-foreground-color);
+	--tooltip-background-color:                     var(--button-primary-background-color-hover);
+	--tooltip-foreground-color-inverted:            var(--input-foreground-color);
+	--tooltip-background-color-inverted:            var(--button-secondary-background-color);
+}
+
+.alt-colors {
+	--background-color:                             var(--background-color-alt);
+	--background-color-hover:                       #dde3e6;
+	--background-color-active:                      var(--blue-grey-100);
 }
diff --git a/src/views/private/private-view.vue b/src/views/private/private-view.vue
index bf13f25d6a..aa9f1c7c14 100644
--- a/src/views/private/private-view.vue
+++ b/src/views/private/private-view.vue
@@ -2,7 +2,7 @@
 	<div class="private-view">
 		<aside class="navigation" :class="{ 'is-open': navOpen }">
 			<module-bar />
-			<div class="module-nav">
+			<div class="module-nav alt-colors">
 				<div
 					style="height: 64px; padding: 20px; color: red; font-family: 'Comic Sans MS', cursive;"
 				>
@@ -26,7 +26,7 @@
 		</div>
 		<aside
 			v-if="drawerHasContent"
-			class="drawer"
+			class="drawer alt-colors"
 			:class="{ 'is-open': drawerOpen }"
 			@click="drawerOpen = true"
 		>