From dd942428e3cb5f844cc3ed0f339e296bf81ac803 Mon Sep 17 00:00:00 2001
From: Adrian Simmons <adrian@perlucida.co.uk>
Date: Fri, 10 Sep 2021 00:12:14 +0100
Subject: [PATCH] Convert $light-background to CSS custom property

---
 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, 9 insertions(+), 8 deletions(-)

diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 9aad37370..abc959064 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: $light-background;
+  background-color: var(--light-background);
 
   @media screen and (max-width: $desktop) {
     padding-bottom: 0;
@@ -225,7 +225,7 @@
   border-radius: $radius;
   padding: 1rem;
   color: $text;
-  background-color: $light-background !important;
+  background-color: var(--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 5a4664a51..a9f18e4b1 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: $light-background;
+    background: var(--light-background);
   }
 
   .box,
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 6642241b2..10108459d 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 $light-background;
+  background: url('/images/llama.svg') no-repeat bottom left fixed var(--light-background);
   min-height: 100vh;
 
   .noauth-container {
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index f3d21ea1a..41997f187 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -19,7 +19,7 @@
 }
 
 .navbar.main-theme {
-	background: $light-background;
+	background: var(--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 a516dcf82..5e61cf442 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -25,7 +25,7 @@
 }
 
 body {
-  background: $light-background;
+  background: var(--light-background);
   min-height: 100vh;
 }
 
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index bf3b1956b..93671b41a 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -14,6 +14,8 @@
 
   --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 91101334b..1c388e926 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -8,14 +8,13 @@ $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: $light-background;
+$vikunja-nav-background: var(--light-background);
 $vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
 $vikunja-nav-logo-full-width: 164px;