From 512fd472ed51790e7b253d8755a13f1701ae1273 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Fri, 19 Apr 2024 09:18:26 +0300
Subject: [PATCH] Make virtual keyboard text color dynamic based on background

Use white text with dark backgrounds and black text with light background.

ref #661
---
 package-lock.json                     | 57 ++++++++++++++++++++++++++-
 package.json                          |  1 +
 src/components/VirtualKeyInfo.vue     |  4 +-
 src/components/VirtualKeyboardKey.vue |  9 +++--
 4 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bb234ea0..e3552a45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "sonic-weave": "github:xenharmonic-devs/sonic-weave#v0.0.21",
         "sw-synth": "^0.1.0",
         "temperaments": "^0.5.3",
+        "values.js": "^2.1.1",
         "vue": "^3.3.4",
         "vue-router": "^4.3.0",
         "webmidi": "^3.1.8",
@@ -2049,8 +2050,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colorette": {
       "version": "2.0.20",
@@ -3419,6 +3419,17 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hex-rgb": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz",
+      "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -4327,6 +4338,24 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mix-css-color": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/mix-css-color/-/mix-css-color-0.2.0.tgz",
+      "integrity": "sha512-mZugANySFPE21tjELbQddhC6HAZNzqp7gDxmW8fJFURSWtJ0nuXU26dyrb/1AR6ZYxdEAtW2bbWT9QnRtI6Jzg==",
+      "dependencies": {
+        "parse-css-color": "^0.1.2",
+        "pure-color": "^1.3.0"
+      }
+    },
+    "node_modules/mix-css-color/node_modules/parse-css-color": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/parse-css-color/-/parse-css-color-0.1.2.tgz",
+      "integrity": "sha512-z7v/tf0edGsnlm9VONQtH+u/YVrdUqZXrSBzqM13scef8Abl2VyZfYsZaJoyb/AyY4SIxtoJChSQ4MURHfY3Sg==",
+      "dependencies": {
+        "color-name": "^1.1.4",
+        "hex-rgb": "^4.1.0"
+      }
+    },
     "node_modules/mlly": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.6.1.tgz",
@@ -4594,6 +4623,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-css-color": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/parse-css-color/-/parse-css-color-0.2.0.tgz",
+      "integrity": "sha512-uWQyuOe+SMxnUgHf4mjdn2C/YzA1tOW+uU8Z2UiV3qnao9ZFnvYeyzeoU7TNv8NLIJo0PiRkETW48QNJZ4IA9g==",
+      "dependencies": {
+        "color-name": "^1.1.4",
+        "hex-rgb": "^4.1.0"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -4979,6 +5017,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/pure-color": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
+      "integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA=="
+    },
     "node_modules/qs": {
       "version": "6.12.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
@@ -6017,6 +6060,16 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/values.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/values.js/-/values.js-2.1.1.tgz",
+      "integrity": "sha512-pI6dKW3kv7BR/WzS0NvIuxegeH1r8gk8y6BuXrIYGVccynmUsUZPhSpTfkt39VBHyciD7WZi+lM+7Zyamowzeg==",
+      "dependencies": {
+        "mix-css-color": "0.2.0",
+        "parse-css-color": "0.2.0",
+        "pure-color": "1.3.0"
+      }
+    },
     "node_modules/verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
diff --git a/package.json b/package.json
index acd46011..dc374263 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "sonic-weave": "github:xenharmonic-devs/sonic-weave#v0.0.21",
     "sw-synth": "^0.1.0",
     "temperaments": "^0.5.3",
+    "values.js": "^2.1.1",
     "vue": "^3.3.4",
     "vue-router": "^4.3.0",
     "webmidi": "^3.1.8",
diff --git a/src/components/VirtualKeyInfo.vue b/src/components/VirtualKeyInfo.vue
index 0c66e113..947fc78b 100644
--- a/src/components/VirtualKeyInfo.vue
+++ b/src/components/VirtualKeyInfo.vue
@@ -34,12 +34,12 @@ const props = defineProps<{
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 }
 
-.black-key .key-info {
+.dark .key-info {
   color: white;
   text-shadow: none;
 }
 
-.white-key .key-info {
+.light .key-info {
   color: black;
   text-shadow: none;
 }
diff --git a/src/components/VirtualKeyboardKey.vue b/src/components/VirtualKeyboardKey.vue
index cebe4b72..028ba976 100644
--- a/src/components/VirtualKeyboardKey.vue
+++ b/src/components/VirtualKeyboardKey.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { LEFT_MOUSE_BTN } from '@/constants'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import Values from 'values.js'
 
 type NoteOff = () => void
 type NoteOnCallback = () => NoteOff
@@ -14,6 +15,8 @@ const props = defineProps<{
 
 const active = ref(false)
 
+const light = computed(() => new Values(props.color).getBrightness() > 50)
+
 const emit = defineEmits(['press', 'unpress'])
 
 let noteOff: NoteOff | null = null
@@ -100,7 +103,7 @@ onUnmounted(() => {
   <td
     :data-key-number="index"
     :style="'background-color:' + color"
-    :class="{ active, 'black-key': color === 'black', 'white-key': color === 'white' }"
+    :class="{ active, light, dark: !light }"
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
@@ -108,7 +111,7 @@ onUnmounted(() => {
     @mouseup="onMouseUp"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
-    >
+  >
     <slot></slot>
   </td>
 </template>