From 2356befbcfa21bad70d1c3186cd665b69c803cf0 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Sat, 24 Jan 2026 13:21:59 -0500
Subject: [PATCH] Use semantic theme variables for QR code colors

- Add --qr and --qr-foreground CSS variables to theme
- Light mode: standard gruvbox bg/fg for high contrast
- Dark mode: warm cream background, easier on eyes
- QRCode component now uses bg-qr and text-qr-foreground classes
- Reads CSS variables for qrcode.vue library props

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../apps/machine/src/components/QRCode.vue    | 25 +++++++++----------
 lamassu-next/apps/machine/src/style.css       | 11 ++++++++
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/lamassu-next/apps/machine/src/components/QRCode.vue b/lamassu-next/apps/machine/src/components/QRCode.vue
index aa3401f..044d6c9 100644
--- a/lamassu-next/apps/machine/src/components/QRCode.vue
+++ b/lamassu-next/apps/machine/src/components/QRCode.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import QrcodeVue from 'qrcode.vue'
 
 const props = defineProps<{
@@ -9,17 +9,19 @@ const props = defineProps<{
 
 const qrSize = computed(() => props.size ?? 200)
 
-// Warm cream background - easier on eyes in dark mode
-// Dark brown foreground - maintains high contrast for scanning
-const qrBackground = '#f5f0e6' // Warm cream
-const qrForeground = '#3c3836' // Gruvbox dark0_hard - ensures scanability
+// Read CSS variables for theme-aware colors
+const qrBackground = ref('#f5f0e6')
+const qrForeground = ref('#3c3836')
+
+onMounted(() => {
+  const styles = getComputedStyle(document.documentElement)
+  qrBackground.value = styles.getPropertyValue('--qr').trim() || '#f5f0e6'
+  qrForeground.value = styles.getPropertyValue('--qr-foreground').trim() || '#3c3836'
+})
 </script>
 
 <template>
-  <div
-    class="flex flex-col items-center justify-center rounded-xl p-5"
-    :style="{ backgroundColor: qrBackground }"
-  >
+  <div class="flex flex-col items-center justify-center rounded-xl bg-qr p-5">
     <QrcodeVue
       :value="value"
       :size="qrSize"
@@ -28,10 +30,7 @@ const qrForeground = '#3c3836' // Gruvbox dark0_hard - ensures scanability
       :background="qrBackground"
       :foreground="qrForeground"
     />
-    <code
-      class="mt-3 block max-w-full break-all px-2 text-center text-xs"
-      :style="{ color: qrForeground }"
-    >
+    <code class="mt-3 block max-w-full break-all px-2 text-center text-xs text-qr-foreground">
       {{ value.slice(0, 32) }}...
     </code>
   </div>
diff --git a/lamassu-next/apps/machine/src/style.css b/lamassu-next/apps/machine/src/style.css
index 9e65621..99b529a 100644
--- a/lamassu-next/apps/machine/src/style.css
+++ b/lamassu-next/apps/machine/src/style.css
@@ -33,6 +33,9 @@
   --color-warning-foreground: var(--warning-foreground);
   --color-bitcoin: var(--bitcoin);
   --color-bitcoin-foreground: var(--bitcoin-foreground);
+  /* QR code colors - high contrast for scanning */
+  --color-qr: var(--qr);
+  --color-qr-foreground: var(--qr-foreground);
 }
 
 /*
@@ -70,6 +73,10 @@
   --warning-foreground: #3c3836;
   --bitcoin: #d65d0e; /* orange */
   --bitcoin-foreground: #fbf1c7;
+
+  /* QR code - high contrast for scanning */
+  --qr: #fbf1c7; /* bg0 - light background */
+  --qr-foreground: #282828; /* dark0 - dark modules */
 }
 
 .dark {
@@ -100,6 +107,10 @@
   --warning-foreground: #282828;
   --bitcoin: #fe8019; /* bright orange */
   --bitcoin-foreground: #282828;
+
+  /* QR code - warm tones easier on eyes in dark environments */
+  --qr: #f5f0e6; /* warm cream - softer than pure white */
+  --qr-foreground: #3c3836; /* gruvbox fg - maintains contrast */
 }
 
 @layer base {