DRY up colours

app/assets/stylesheets/application.scss

@@ -22,14 +22,14 @@ h1, h2 {
 }
 
 .bg-high {
-  color: lighten($glucose-measurement, 30%);
-  background-color: saturate($glucose-measurement, 50%);
+  color: lighten(map-get($palette, glucose-measurement), 30%);
+  background-color: saturate(map-get($palette, glucose-measurement), 50%);
   font-weight: bold;
 }
 
 .bg-low {
-  color: saturate($glucose-measurement, 50%);
-  background-color: lighten($glucose-measurement, 30%);
+  color: saturate(map-get($palette, glucose-measurement), 50%);
+  background-color: lighten(map-get($palette, glucose-measurement), 30%);
   font-weight: bold;
 }
 

app/assets/stylesheets/buttons.scss

@@ -6,34 +6,16 @@
   color: white;
 }
 
-.btn-glucose-measurement {
-  background-color: $glucose-measurement;
-}
-
-.btn-carbohydrate-intake {
-  background-color: $carbohydrate-intake;
-}
-
-.btn-medication-event {
-  background-color: $medication-event;
-}
-
-.btn-physical-exercise {
-  background-color: $physical-exercise;
-}
-
-.btn-glycated-haemoglobin {
-  background-color: $glycated-haemoglobin;
-}
-
-.btn-blood-pressure {
-  background-color: $blood-pressure;
-}
-
 .btn-back {
   background-color: $gray-light;
 }
 
 .btn-delete {
   background-color: $gray-dark;
 }
+
+@each $metric, $colour in $palette {
+  .btn-#{$metric} {
+    background-color: $colour;
+  }
+}

app/assets/stylesheets/colours.scss

@@ -1,11 +1,19 @@
 // http://paletton.com/#uid=40A0u0kw0vnjLCCp6xKyqoxDHjf
 
 $orange: #fa8000;
+$deep-blue: #1530ab;
+$green: #00b73e;
+$teal: #06779c;
+$deep-teal: #045d7a;
+$bright-green: #008f30;
+
 $brand-primary: $orange;
 
-$glucose-measurement: #fa8000;
-$medication-event: #1530ab;
-$carbohydrate-intake: #00b73e;
-$physical-exercise: #06779c;
-$glycated-haemoglobin: #045d7a;
-$blood-pressure: #008f30;
+$palette: (
+  glucose-measurement: $orange,
+  medication-event: $deep-blue,
+  carbohydrate-intake: $green,
+  physical-exercise: $teal,
+  glycated-haemoglobin: $deep-teal,
+  blood-pressure: $bright-green,
+);

app/assets/stylesheets/table-rows.scss

@@ -1,28 +1,10 @@
-tr.glucose-measurement {
-  background-color: lighten($glucose-measurement, 80%);
-}
-
-tr.carbohydrate-intake {
-  background-color: lighten($carbohydrate-intake, 80%);
-}
-
-tr.medication-event {
-  background-color: lighten($medication-event, 80%);
-}
-
-tr.physical-exercise {
-  background-color: lighten($physical-exercise, 80%);
-}
-
-tr.glycated-haemoglobin {
-  background-color: lighten($glycated-haemoglobin, 80%);
-}
-
-tr.blood-pressure {
-  background-color: lighten($blood-pressure, 80%);
-}
-
 #recent th {
   color: $gray-dark;
   background-color: $gray-lighter;
 }
+
+@each $metric, $colour in $palette {
+  tr.#{$metric} {
+    background-color: lighten($colour, 70%);
+  }
+}