From 62a0c13a4fb7c133c8fce9c56e1cb21f10203064 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Mon, 19 Oct 2026 07:05:31 -0400
Subject: [PATCH] fix(#2839): white hero text for themed App Space banners

The Joule/Sapphire App Space hero gradients are dark in both light and
dark mode, but the base .hero only inherited --sapShell_TextColor, which
resolves to a dark value under the Horizon light theme. That left the
banner text near-illegible on the purple gradient
(/app-space/?theme=joule in light mode, reported by DJ Adams).

Pin the themed hero (and its loading skeleton) to white regardless of the
active Horizon palette. Verified via vite dev harness: hero text is
rgb(255,255,255) with the fix and rgb(34,53,72) without, in light+joule;
dark mode unchanged.
---
 hugo-apps/src/app-space/AppSpace.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/hugo-apps/src/app-space/AppSpace.vue b/hugo-apps/src/app-space/AppSpace.vue
index 3e6225b18..63ae089e9 100644
--- a/hugo-apps/src/app-space/AppSpace.vue
+++ b/hugo-apps/src/app-space/AppSpace.vue
@@ -1325,6 +1325,25 @@ const emptyStateMessage = computed(() => {
   }
 }
 
+/* ═══════════════════════════════════════════════════════════════════
+   Themed heroes — text colour (#2839)
+   The Joule/Sapphire hero gradients are dark in both light AND dark mode,
+   but the base .hero only inherits --sapShell_TextColor, which resolves to
+   a DARK value in the Horizon light theme → near-illegible banner text on
+   the purple/blue gradient. Pin white here (and on the skeleton) so the
+   themed hero reads correctly regardless of the active Horizon palette.
+   ═══════════════════════════════════════════════════════════════════ */
+
+.app-space[data-theme="joule"] .hero,
+.app-space[data-theme="sapphire"] .hero {
+  color: #fff;
+}
+
+.app-space[data-theme="joule"] .hero-title-skeleton,
+.app-space[data-theme="sapphire"] .hero-title-skeleton {
+  background: rgba(255, 255, 255, 0.18);
+}
+
 /* ═══════════════════════════════════════════════════════════════════
    Joule Theme — Light Mode
    ═══════════════════════════════════════════════════════════════════ */