From eccb247a1dece3af7fd51d5fe9a4e95ef7f4f139 Mon Sep 17 00:00:00 2001 From: scheinriese Date: Thu, 21 May 2026 15:46:40 +0200 Subject: [PATCH] fix(asset-picker): theme tip-bar footer for OG (elevated bg + border) The asset-picker footer (`Tip: Drop an image, paste a link, or browse`) used raw var(--lx-gray-05) for the top border and var(--lx-gray-03) for the bg, both invalid in OG (where --lx-gray-N is unset). The result: no top border + transparent bg, killing the elevated-footer effect the Radix theme gets. Fixes: - border-top: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05))) - bg: @apply bg-gray-03 (themed tertiary teal in OG, same chain as topbar) - .tip-label color: gains --ls-secondary-text-color middle - .tip-body color: gains --ls-primary-text-color middle Tip-link colors already used --lx-accent-11/12 which are theme-adaptive, so the "browse" link continues to honor the theme accent. Radix themes preserved via --lx-gray-N winning step 1 of every chain. Co-Authored-By: Claude Opus 4.7 --- src/main/frontend/components/icon.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css index 0b4a473785..ad324c296b 100644 --- a/src/main/frontend/components/icon.css +++ b/src/main/frontend/components/icon.css @@ -1206,17 +1206,22 @@ in gray-11, inline links in accent-11. */ .asset-picker-footer-hint { @apply flex w-full items-center px-3 py-2 gap-1.5 text-sm; - border-top: 1px solid var(--lx-gray-05); - background-color: var(--lx-gray-03); + /* Raw `var(--lx-gray-05)` / `var(--lx-gray-03)` were invalid in OG + (where those vars are unset) — the top border disappeared and the + bg fell to transparent, killing the elevated footer effect. The + Tailwind utility chain gives `--ls-border-color` / themed tertiary + teal in OG; Radix themes still use --lx-gray-N at step 1. */ + border-top: 1px solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05))); + @apply bg-gray-03; .tip-label { @apply font-medium; - color: var(--lx-gray-12); + color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12))); } .tip-body { @apply flex flex-row flex-wrap items-center gap-1; - color: var(--lx-gray-11); + color: var(--lx-gray-11, var(--ls-primary-text-color, var(--rx-gray-11))); } .tip-link,