desaturate hidden variables colors

mrc-ide · Jun 14, 2024 · 472e0f5 · 472e0f5
1 parent 4db2847
commit 472e0f5
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 59 deletions.
diff --git a/app/static/package-lock.json b/app/static/package-lock.json
diff --git a/app/static/package.json b/app/static/package.json
@@ -31,6 +31,7 @@
         "@types/d3-format": "^3.0.1",
         "axios": "^0.26.0",
         "bootstrap": "^5.1.3",
+        "color": "^4.2.3",
         "csv-parse": "^5.2.1",
         "d3-format": "^3.1.0",
         "i18next": "^22.4.11",
@@ -50,6 +51,7 @@
     "devDependencies": {
         "@playwright/test": "1.37.0",
         "@types/bootstrap": "^5.2.6",
+        "@types/color": "^3.0.6",
         "@types/jest": "^27.4.0",
         "@types/markdown-it": "^12.2.3",
         "@types/plotly.js-basic-dist-min": "^2.12.1",

diff --git a/app/static/src/app/components/code/HiddenVariables.vue b/app/static/src/app/components/code/HiddenVariables.vue
@@ -25,6 +25,7 @@ import VueFeather from "vue-feather";
 import tooltip from "../../directives/tooltip";
 import { ModelMutation } from "../../store/model/mutations";
 import { ModelGetter } from "../../store/model/getters";
+import * as Color from "color";
 
 export default defineComponent({
     name: "SelectedVariables",
@@ -41,7 +42,8 @@ export default defineComponent({
 
         const getStyle = (variable: string) => {
             const bgcolor = palette.value ? palette.value[variable] : "#eee";
-            return { "background-color": bgcolor };
+            const desatBgColor = Color(bgcolor).desaturate(0.6).fade(0.4).rgb().string();
+            return { "background-color": desatBgColor };
         };
 
         const startDrag = (evt: DragEvent, variable: string) => {