Define custom colour style and their inverse in variables.less

webapp/src/assets/less/variables.less

@@ -160,27 +160,6 @@
 @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
  */
@@ -281,3 +260,23 @@
     }
 
 }
+
+
+/*
+ * Interactive elements
+ */
+
+.ofm-muted-interactive-text{
+    color: @global-muted-color;
+
+    &:hover {
+        color: @global-color;
+    }
+}
+.hook-inverse() {
+    .ofm-muted-interactive-text{
+        &:hover {
+            color: @inverse-global-color;
+        }
+    }
+}