From 9dda522151c14f45cf7f6eb599ab5d93746a46cd Mon Sep 17 00:00:00 2001
From: Adrian Simmons <adrian@perlucida.co.uk>
Date: Thu, 4 Nov 2021 15:56:52 +0000
Subject: [PATCH] Migrate $primary color variations to CSS variables

---
 src/styles/variables/colors.scss      | 5 +++--
 src/views/migrator/MigrateService.vue | 2 +-
 src/views/tasks/TaskDetailView.vue    | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index fd6ca96e5..cab71e07b 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -66,6 +66,8 @@
   --primary-a: 1 !important;
   --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
 
+  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
+	--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
 	--primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
 }
 
@@ -92,5 +94,4 @@
     --text-light: var(--grey-300) !important;
     --text-strong: var(--grey-900) !important;
   }
-}
-
+}
\ No newline at end of file
diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue
index 3dac7621c..5b9a1fd4a 100644
--- a/src/views/migrator/MigrateService.vue
+++ b/src/views/migrator/MigrateService.vue
@@ -246,7 +246,7 @@ export default {
 	}
 	10% {
 		transform: translate(0, -15px);
-		background-color: $primary-dark;
+		background-color: var(--primary-dark);
 	}
 }
 </style>
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index aa6da31ea..f450e05ce 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -929,7 +929,7 @@ $flash-background-duration: 750ms;
 
 @keyframes flash-background {
   0% {
-    background: lighten($primary, 30);
+    background: var(--primary-light);
   }
   100% {
     background: transparent;