more lines

frontend/src/assets/variables.scss

@@ -1,19 +1,48 @@
-$white-1: oklch(90% 0 0);
-$white-2: oklch(80% 0 0);
-$gray-1: oklch(70% 0 0);
-$gray-2: oklch(60% 0 0);
-$gray-3: oklch(50% 0 0);
-$gray-4: oklch(40% 0 0);
-$gray-5: oklch(30% 0 0);
-$black-1: oklch(20% 0 0);
-$black-2: oklch(10% 0 0);
+$gray-1: oklch(90% 0 0);
+$gray-2: oklch(80% 0 0);
+$gray-3: oklch(70% 0 0);
+$gray-4: oklch(60% 0 0);
+$gray-5: oklch(50% 0 0);
+$gray-6: oklch(40% 0 0);
+$gray-7: oklch(30% 0 0);
+$gray-8: oklch(20% 0 0);
+$gray-9: oklch(10% 0 0);
 
-$text-color: $white-1;
-$background-color: $gray-5;
+$red-1: oklch(75% 0.4 030);
+$orange-1: oklch(75% 0.4 090);
+$green-1: oklch(75% 0.4 150);
+$cyan-1: oklch(75% 0.4 210);
+$blue-1: oklch(75% 0.4 270);
+$magenta-1: oklch(75% 0.4 330);
 
-$time-tick: $white-1;
-$grid-line: $white-1;
-$major-tick: $gray-2;
-$minor-tick: $gray-3;
+$red-2: oklch(75% 0.2 030);
+$orange-2: oklch(75% 0.2 090);
+$green-2: oklch(75% 0.2 150);
+$cyan-2: oklch(75% 0.2 210);
+$blue-2: oklch(75% 0.2 270);
+$magenta-2: oklch(75% 0.2 330);
+
+$text-color: $gray-1;
+$background-color: $gray-7;
+
+$time-tick: $gray-1;
+$grid-line: $gray-1;
+$major-tick: $gray-4;
+$minor-tick: $gray-5;
 
 $text-font: Helvetica, sans-serif;
+
+$colors: (
+    $red-1,
+    $green-1,
+    $blue-1,
+    $orange-1,
+    $cyan-1,
+    $magenta-1,
+    $red-2,
+    $green-2,
+    $blue-2,
+    $orange-2,
+    $cyan-2,
+    $magenta-2
+);