From 7512070919dc4a280d057ea5d4d24bf51529fa1c Mon Sep 17 00:00:00 2001 From: scheinriese Date: Thu, 21 May 2026 15:26:15 +0200 Subject: [PATCH] fix(asset-picker): theme topbar, segmented control, and customize zone MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Asset-picker chrome rendered with neutral grays in OG turquoise: - topbar/tabrow used raw var(--lx-gray-03) — invalid in OG → transparent - segmented control bg used var(--lx-gray-06, --rx-gray-06) — neutral - active segment used raw var(--lx-gray-01) — invalid in OG → unset - customize zone used var(--lx-gray-01, --rx-gray-01) — fell through to --ls-primary-background-color (#002b36) which is the SAME color as the page bg behind the popover, making the band look like a hole punched through the picker - gray-05 borders + gray-10/11/12 text fell to neutral Fixes: - .asset-picker-tabrow bg → @apply bg-gray-03 (matches icon picker's tabs-section via the full Tailwind themed chain) - .segmented-control bg → @apply bg-gray-06 (themed quaternary teal) - .segment[data-active] bg → @apply bg-gray-01 (carved-in feel against the lighter control) - .avatar-customize-zone bg → color-mix(secondary-bg 90%, black) — a recessed-but-still-distinct band that doesn't bleed into page bg in OG - All gray-05 borders gain --ls-border-color middle step - All gray-10/11/12 text gains --ls-primary-/--ls-secondary-text-color middle steps Radix themes unaffected: --lx-gray-N still wins step 1. Co-Authored-By: Claude Opus 4.7 --- src/main/frontend/components/icon.css | 53 ++++++++++++++++----------- 1 file changed, 32 insertions(+), 21 deletions(-) diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css index 9b916f1dbe..c340e0d923 100644 --- a/src/main/frontend/components/icon.css +++ b/src/main/frontend/components/icon.css @@ -877,8 +877,10 @@ align-items: center; padding: 0 14px; height: 40px; - background-color: var(--lx-gray-03); - border-bottom: 1px solid var(--lx-gray-05, var(--rx-gray-05)); + /* Tailwind utility for the full themed chain (matches the icon + picker's tabs-section so both topbars read as the same chrome). */ + @apply bg-gray-03; + border-bottom: 1px solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05))); } .asset-picker-back { @@ -889,10 +891,10 @@ @apply text-sm font-medium cursor-pointer; @apply border-none bg-transparent p-0; @apply transition-colors duration-150; - color: var(--lx-gray-10, var(--rx-gray-10)); + color: var(--lx-gray-10, var(--ls-primary-text-color, var(--rx-gray-10))); &:hover { - color: var(--lx-gray-12, var(--rx-gray-12)); + color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12))); } } } @@ -911,11 +913,11 @@ of options, the active segment inverts to read as "current value". */ .segmented-control { @apply flex items-center; - /* Container bg sits on top of the asset-picker topbar's --lx-gray-03; - stepping up to --rx-gray-06 gives enough contrast in both themes - so the control reads as a bounded group instead of bleeding into - the topbar. */ - background-color: var(--lx-gray-06, var(--rx-gray-06)); + /* Container bg steps one step up from the topbar so the control reads + as a bounded group. Tailwind `bg-gray-06` chains through + `--ls-quaternary-background-color` (#094b5a in OG) — themed teal + instead of neutral gray. */ + @apply bg-gray-06; border-radius: 6px; padding: 2px; gap: 2px; @@ -926,19 +928,22 @@ @apply transition-colors duration-100; border: none; background: transparent; - color: var(--lx-gray-11, var(--rx-gray-11)); + color: var(--lx-gray-11, var(--ls-primary-text-color, var(--rx-gray-11))); padding: 2px 10px; border-radius: 4px; min-width: 56px; line-height: 1.4; &:hover { - color: var(--lx-gray-12, var(--rx-gray-12)); + color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12))); } &[data-active="true"] { - background-color: var(--lx-gray-01); - color: var(--lx-gray-12, var(--rx-gray-12)); + /* Active segment darkens to gray-01 — Tailwind chain hits + `--ls-primary-background-color` in OG, creating a "carved in" + feel against the lighter quaternary control bg. */ + @apply bg-gray-01; + color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12))); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } @@ -2156,15 +2161,21 @@ The expanded-state gradient (`::before`) layers on top — its peak opacity is capped at 0.55 so this veil still reads through under the gradient. */ - /* Solid theme-token background — no alpha veil. Resting state uses - gray-01 (the most-recessed surface in the gray scale, page-bg-ish - in both themes) so the banner reads as "tucked into" the popover - rather than a competing surface. Hover lifts one step to gray-02 - via `:has()` below; the transition is on background-color so - state changes interpolate cleanly across light + dark themes. */ - background-color: var(--lx-gray-01, var(--rx-gray-01)); + /* Resting state: a SLIGHTLY-DARKER-THAN-PICKER band so it reads as + "tucked into" without bleeding into the page bg behind the popover + (a problem in OG, where `--lx-gray-01` chains to `--ls-primary-bg` + — the same color the page itself uses, making the banner look + like a hole punched through the picker). color-mix darkens the + picker's secondary-bg by 10% with black, giving a recessed-but- + still-distinct color in every theme. Hover lifts via `:has()` + below. */ + background-color: color-mix( + in srgb, + var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02))) 90%, + black + ); transition: background-color 120ms cubic-bezier(0.32, 0.72, 0, 1); - border-bottom: 1px solid var(--lx-gray-05, var(--rx-gray-05)); + border-bottom: 1px solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05))); isolation: isolate; /* Isolate the band's layout from siblings: when the rail expands or collapses, the browser can compute layout for the band without