Migrate $primary color variations to CSS variables

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;
   }
-}
-
+}

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>

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;