Compile hook-inverse colours as CSS variables now components don't import the full less theme

webapp/src/assets/less/variables.less

@@ -160,6 +160,27 @@
 @sidebar-right-left: 0px;
 @sidebar-right-left-xl: 60px;
 
+/**
+ * Self inverting colours
+ *
+ * These invert automatically when the theme inverts. these need to be used as css variables.
+ * They can be used without importing uikit/src/less/uikit.theme.less fully into the
+ * component.
+ */
+
+:root {
+    --theme-text-colour: @global-color;
+    .hook-inverse() {
+        --theme-text-colour: @inverse-global-color;
+    }
+
+    --theme-primary-background: @global-primary-background;
+    .hook-inverse() {
+        --theme-primary-background: @inverse-primary-muted-color;
+    }
+
+}
+
 /*
  * Navbar
  */

webapp/src/components/genericComponents/progressBar.vue

@@ -63,14 +63,7 @@ export default {
 
 .progress .indeterminate,
 .progress .determinate {
-  background-color: @global-primary-background;
+  background-color: var(--theme-primary-background);
-}
-
-.hook-inverse() {
-  .progress .indeterminate,
-  .progress .determinate {
-    background-color: @inverse-primary-muted-color;
-  }
 }
 
 .progress .indeterminate::before {

webapp/src/components/labThingsComponents/actionProgressBar.vue

@@ -81,14 +81,7 @@ export default {
 
 .progress .indeterminate,
 .progress .determinate {
-  background-color: @global-primary-background;
+  background-color: var(--theme-primary-background);
-}
-
-.hook-inverse() {
-  .progress .indeterminate,
-  .progress .determinate {
-    background-color: @inverse-primary-muted-color;
-  }
 }
 
 .progress .indeterminate::before {

webapp/src/components/ui/matrixDisplay.vue

@@ -147,13 +147,7 @@ export default {
 }
 
 .copy-button:hover {
-  color: @global-color;
+  color: var(--themed-global-colour);
-}
-
-.hook-inverse() {
-  .copy-button:hover {
-    color: @inverse-global-color;
-  }
 }
 
 .copy-button.success {