From 104cac5dca42dc505e4f6a4c01d83a5fe10bd74c Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 28 May 2026 00:56:47 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui):=20tooltip=20readability=20=E2=80=94=20?=
 =?UTF-8?q?dark=20bg=20+=20parchment=20text=20(was=20light-on-light)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Operator-flagged 2026-05-28: tooltips (e.g. the action buttons in
Subscriptions → Subscriptions) render near-white-on-near-white,
unreadable.

Cause: Vuetify's default v-tooltip pairs `on-surface-variant` text with
an `surface-variant` background. FC's theme deliberately maps
`on-surface-variant` to vellum (#C2BFB4 — a light cream, the correct
muted-text token for captions/hints on the dark page) but never defines
`surface-variant`, so Vuetify auto-generates a light-ish tooltip
background. Light text on light bg.

Fix is tooltip-specific so it doesn't disturb the (correctly light)
muted-text token elsewhere. New app-global stylesheet
frontend/src/styles/app.css, imported in main.js AFTER vuetify/styles
(equal-specificity rule wins by source order), overrides
`.v-tooltip > .v-overlay__content` to a dark elevated panel
(surface-bright = slate #2C313A) with high-contrast parchment text
(#E8E4D8) + a subtle border + shadow. Applies to every tooltip in the
app, so the fix is consistent rather than per-component.
---
 frontend/src/main.js        |  3 +++
 frontend/src/styles/app.css | 21 +++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 frontend/src/styles/app.css

diff --git a/frontend/src/main.js b/frontend/src/main.js
index 0882de9..d4ce856 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,6 +3,9 @@ import { createPinia } from 'pinia'
 import { createVuetify } from 'vuetify'
 import 'vuetify/styles'
 import '@mdi/font/css/materialdesignicons.css'
+// App-global CSS overrides — imported AFTER vuetify/styles so equal-
+// specificity rules (e.g. the tooltip readability fix) win by source order.
+import './styles/app.css'
 
 import App from './App.vue'
 import router from './router.js'
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
new file mode 100644
index 0000000..55b13a4
--- /dev/null
+++ b/frontend/src/styles/app.css
@@ -0,0 +1,21 @@
+/* App-global overrides. Imported in main.js AFTER 'vuetify/styles' so
+   these win on equal selector specificity by source order. */
+
+/* Tooltip readability fix (operator-flagged 2026-05-28).
+   Vuetify's default v-tooltip pairs `on-surface-variant` TEXT with an
+   `surface-variant` BACKGROUND. FC's theme deliberately maps
+   `on-surface-variant` to vellum (#C2BFB4 — a light cream, correct for
+   muted captions/hints on the dark page) but never defines
+   `surface-variant`, so Vuetify auto-generates a light-ish background:
+   light text on light bg → near-white-on-near-white, unreadable.
+
+   Tooltips want the inverse of muted body text — a dark, slightly
+   elevated panel with the HIGH-contrast parchment text. Fixing it here
+   (not by changing on-surface-variant) keeps captions/empty-states
+   correct while making every tooltip in the app legible. */
+.v-tooltip > .v-overlay__content {
+  background: rgb(var(--v-theme-surface-bright));   /* slate #2C313A */
+  color: rgb(var(--v-theme-on-surface));            /* parchment #E8E4D8 */
+  border: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.25);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}