Move color definitions out of response rate presenter and into _colors.scss

app/assets/stylesheets/partials/_colors.scss

@@ -25,6 +25,11 @@ $growth: $gold;
 $approval: $purple;
 $ideal: $purple;
 
+:root {
+  --color-purple: #{$purple};
+  --color-gold: #{$gold};
+}
+
 .color-red {
   color: $red;
 }

app/presenters/response_rate_presenter.rb

@@ -18,11 +18,7 @@ class ResponseRatePresenter
   end
 
   def color
-    # Problem: the color (either $gold or $purple) is determined by the scss variable, but the
-    # percentage is decided by the presenter. Therefore the class style must be generated
-    # within this file and not the scss file.
-    # TODO: Fix this.
-    percentage > 75 ? "#49416D" : "#FFC857"
+    percentage > 75 ? "purple" : "gold"
   end
 
   private

app/views/overview/_response_rate_graphic.html.erb

@@ -26,7 +26,7 @@
   position: absolute;
   border-radius: 50%;
   inset: 0;
-  background: conic-gradient(<%= response_rate_presenter.color %> calc(<%= response_rate_presenter.percentage %>*1%),#0000 0);
+  background: conic-gradient(var(--color-<%= response_rate_presenter.color %>) calc(<%= response_rate_presenter.percentage %>*1%),#0000 0);
 }
 </style>