Programmatically-generated colours

app/assets/stylesheets/application.scss

@@ -6,6 +6,7 @@
 @import 'nav';
 @import 'slider';
 @import 'buttons';
+@import 'table-rows';
 
 html {
   position: relative;
@@ -21,14 +22,14 @@ h1, h2 {
 }
 
 .bg-high {
-  color: $bg-high;
-  background-color: lighten($bg-high, 50%);
+  color: lighten($glucose-measurement, 30%);
+  background-color: saturate($glucose-measurement, 50%);
   font-weight: bold;
 }
 
 .bg-low {
-  color: $bg-low;
-  background-color: lighten($bg-low, 50%);
+  color: saturate($glucose-measurement, 50%);
+  background-color: lighten($glucose-measurement, 30%);
   font-weight: bold;
 }
 

app/assets/stylesheets/buttons.scss

@@ -23,7 +23,7 @@
 }
 
 .btn-glycated-haemoglobin {
-  background-color: $glycated-haemoglibin;
+  background-color: $glycated-haemoglobin;
 }
 
 .btn-blood-pressure {

app/assets/stylesheets/colours.scss

@@ -13,7 +13,7 @@ $glucose-measurement: $orange;
 $medication-event: $blue;
 $carbohydrate-intake: $yellow;
 $physical-exercise: $green;
-$glycated-haemoglibin: $pale-blue;
+$glycated-haemoglobin: $pale-blue;
 $blood-pressure: $dirty-yellow;
 
 $bg-high: $purple;

app/assets/stylesheets/table-rows.scss

@@ -0,0 +1,23 @@
+tr.glucose-measurement {
+  background-color: lighten($glucose-measurement, 45%);
+}
+
+tr.carbohydrate-intake {
+  background-color: lighten($carbohydrate-intake, 45%);
+}
+
+tr.medication-event {
+  background-color: lighten($medication-event, 45%);
+}
+
+tr.physical-exercise {
+  background-color: lighten($physical-exercise, 45%);
+}
+
+tr.glycated-haemoglobin {
+  background-color: lighten($glycated-haemoglobin, 45%);
+}
+
+tr.blood-pressure {
+  background-color: lighten($blood-pressure, 45%);
+}