clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-27 14:14:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(asset-picker): make banner recess mode-aware (subtle in light, strong in dark)

Browse Source 
Previous `color-mix(picker-bg 65%, black)` worked great in dark mode
but rendered the light-mode banner as muddy mid-gray — the same 35%
black blend that produces a clear recess on dark teal kills text
contrast against a near-white bg, making "Letters, rectangle" almost
illegible.

Split the recipe by mode:
- Default (light): mix(picker-bg 95%, black) — subtle 5% darkening
- html.dark override: mix(picker-bg 65%, black) — stronger 35% for visible recess on dark bgs

Both branches use the same Tailwind-style chain so OG and Radix themes
adapt cleanly. Hover state (still @apply bg-gray-03) is mode-agnostic
via the Tailwind utility, so no separate override needed there.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-05-21 16:15:04 +02:00
parent 97e0f30baa
commit e7c2c51453
1 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/main/frontend/components/icon.css
View File

@@ -2175,16 +2175,18 @@
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. */
/* Resting state: a clearly recessed band, ~35% darker than the
picker bg. We can't use `--lx-gray-01` directly because in OG it
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 35% with black,
giving a noticeably recessed band that's still distinct from page
bg in every theme. Hover lifts via `:has()` below. */
/* Resting state: recessed band relative to the picker bg. We can't
use `--lx-gray-01` directly because in OG it 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 bg with black; the mix amount differs by mode
because the same percentage reads very differently in light vs
dark themes (35% black on a near-white bg becomes a mid-gray that
kills text contrast, while 5% black on a near-black bg is invisible).
Default (light mode) gets a subtle darkening; `html.dark` ramps up. */
background-color: color-mix(
in srgb,
var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02))) 65%,
var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02))) 95%,
black
);
transition: background-color 120ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -2206,6 +2208,18 @@
--avatar-size: 20px;
}
/* Dark-mode override: same color-mix recipe but with much more black
so the recessed effect is actually visible on a dark picker bg.
In light mode this would render as muddy mid-gray and kill text
contrast (see the parent rule's comment), hence the per-mode split. */
html.dark .avatar-customize-zone {
background-color: color-mix(
in srgb,
var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02))) 65%,
black
);
}
.avatar-customize-zone[data-expanded="true"] {
--avatar-size: 56px;
}