From 22be0581089fff41b1ddcfb61cc102900fc7121f Mon Sep 17 00:00:00 2001
From: Lotus CI <ci@lotusguild.org>
Date: Mon, 29 Jun 2026 23:30:57 -0400
Subject: [PATCH] lotus(#5): native transparent-background + Lotus theme hooks

Adds body.lotus-transparent (lotusTransparent=1) so the host wallpaper
shows through the call natively, retiring cinny's injected
`html,body{background:none!important}` hack; and body.lotus-theme
(lotusTheme=1) as a source-level Compound-token override hook for the
Lotus/TDS palette (driven by the existing setTheme channel / URL flags).
Additive: no-op without the flags.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/index.css   | 19 +++++++++++++++++++
 src/useTheme.ts |  6 ++++++
 2 files changed, 25 insertions(+)

diff --git a/src/index.css b/src/index.css
index 039b2a42..a11a69ed 100644
--- a/src/index.css
+++ b/src/index.css
@@ -85,6 +85,25 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+/* [lotus] When embedded in the Lotus host with lotusTransparent=1, make the
+app background transparent so the host's wallpaper shows through natively —
+replacing the host's injected `html, body { background: none !important }`
+override. */
+body.lotus-transparent,
+body.lotus-transparent #root {
+  background: transparent !important;
+}
+
+/* [lotus] Native Lotus/TDS theme, applied when lotusTheme=1, instead of the
+host injecting CSS into the iframe after load. Overrides Compound design tokens
+with Lotus values at the source so theming is complete and flash-free. Extend
+this block with the full Lotus token map from the design system; the canvas
+override below is a safe starting point that matches the Lotus dark surface. */
+body.lotus-theme {
+  --cpd-color-bg-canvas-default: #0c0d10;
+  --video-tile-background: var(--cpd-color-bg-subtle-secondary);
+}
+
 /* This prohibits the view to scroll for pages smaller than 122px in width
 we use this for mobile pip webviews */
 .no-scroll-body {
diff --git a/src/useTheme.ts b/src/useTheme.ts
index e992aee7..daf85016 100644
--- a/src/useTheme.ts
+++ b/src/useTheme.ts
@@ -11,6 +11,7 @@ import { type IThemeChangeActionRequest } from "matrix-widget-api";
 
 import { getUrlParams } from "./UrlParams";
 import { widget } from "./widget";
+import { lotusFlag } from "./lotus/lotusWidget";
 
 export const useTheme = (): void => {
   const [requestedTheme, setRequestedTheme] = useState(
@@ -57,5 +58,10 @@ export const useTheme = (): void => {
       previousTheme.current = themeString;
     }
     document.body.classList.remove("no-theme");
+    // [lotus #5] Native theming hooks, opted in by the host via URL flags, so
+    // it no longer has to inject CSS into the iframe after load.
+    if (lotusFlag("lotusTransparent"))
+      document.body.classList.add("lotus-transparent");
+    if (lotusFlag("lotusTheme")) document.body.classList.add("lotus-theme");
   }, [previousTheme, requestedTheme]);
 };