From ad232b7d2958dd3a3778a63a59c8971c542547a5 Mon Sep 17 00:00:00 2001
From: Adrian Simmons <adrian@perlucida.co.uk>
Date: Thu, 16 Sep 2021 13:20:36 +0100
Subject: [PATCH] Revert "Convert $light-background to CSS custom property"

This reverts commit dd942428e3cb5f844cc3ed0f339e296bf81ac803.
---
 src/styles/components/task.scss     | 4 ++--
 src/styles/theme/background.scss    | 2 +-
 src/styles/theme/content.scss       | 2 +-
 src/styles/theme/navigation.scss    | 2 +-
 src/styles/theme/theme.scss         | 2 +-
 src/styles/variables/colors.scss    | 2 --
 src/styles/variables/variables.scss | 3 ++-
 7 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index abc959064..9aad37370 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -2,7 +2,7 @@
   // This is a workaround to hide the llama background from the top on the task detail page
   margin-top: -1.5rem;
   padding: 1rem;
-  background-color: var(--light-background);
+  background-color: $light-background;
 
   @media screen and (max-width: $desktop) {
     padding-bottom: 0;
@@ -225,7 +225,7 @@
   border-radius: $radius;
   padding: 1rem;
   color: $text;
-  background-color: var(--light-background) !important;
+  background-color: $light-background !important;
 
   @media screen and (max-width: 800px) {
     border-radius: 0;
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index a9f18e4b1..5a4664a51 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -6,7 +6,7 @@
   min-height: 100vh;
 
   .pagination-link:not(.is-current) {
-    background: var(--light-background);
+    background: $light-background;
   }
 
   .box,
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 10108459d..6642241b2 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -35,7 +35,7 @@
 }
 
 .no-auth-wrapper {
-  background: url('/images/llama.svg') no-repeat bottom left fixed var(--light-background);
+  background: url('/images/llama.svg') no-repeat bottom left fixed $light-background;
   min-height: 100vh;
 
   .noauth-container {
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 41997f187..f3d21ea1a 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -19,7 +19,7 @@
 }
 
 .navbar.main-theme {
-	background: var(--light-background);
+	background: $light-background;
 	z-index: 5 !important;
 	justify-content: space-between;
 	align-items: center;
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 5e61cf442..a516dcf82 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -25,7 +25,7 @@
 }
 
 body {
-  background: var(--light-background);
+  background: $light-background;
   min-height: 100vh;
 }
 
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index 93671b41a..bf3b1956b 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -14,8 +14,6 @@
 
   --white: hsl(0, 0%, 100%);
   --black: hsl(0, 0%, 4%);
-
-  --light-background: var(--grey-100);
 }
 
 $grey-50: #F9FAFB;
diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss
index 1c388e926..91101334b 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -8,13 +8,14 @@ $navbar-item-active-color: $primary;
 $dropdown-content-shadow: none;
 $navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
 $bulmaswatch-import-font: false !default;
+$light-background: var(--grey-100);
 $transition-duration: 100ms;
 $flash-background-duration: 750ms;
 
 $vikunja-font: 'Quicksand', sans-serif;
 
 $navbar-padding: 2rem;
-$vikunja-nav-background: var(--light-background);
+$vikunja-nav-background: $light-background;
 $vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
 $vikunja-nav-logo-full-width: 164px;