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

fix(icon): theme topbar separator + drop accent focus on search

Browse Source 
Two related tweaks to the picker topbar/search chrome:

1. The horizontal separators (`.icon-picker-separator` between tabs and
   search input, and `.search-section`/`.asset-picker-search` bottom
   border) were raw `var(--lx-gray-N, var(--rx-gray-N))` — neutral gray
   in OG, out of theme. Inject `--ls-border-color` as the middle step
   (#0e5263 in OG, a themed teal that matches the picker hue).

2. Drop the `:focus-within { border-bottom-color: var(--lx-accent-09) }`
   accent on `.search-section` and `.asset-picker-search`. The search
   input has no validation state to communicate, and the search icon
   already brightens on focus (opacity-50 → opacity-75). The blue
   accent line was redundant chrome.

Radix themes unaffected (--lx-gray-N still wins step 1).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-05-21 14:04:20 +02:00
parent 6fb90c5804
commit ace3317721
1 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,9 +28,11 @@
overflow-y: hidden !important;
}
/* More visible separator like combobox */
/* Themed separator. `--ls-border-color` is OG's themed border (#0e5263,
a one-shade-lighter teal that matches the picker hue). Radix themes
still pick up --lx-gray-05 at step 1. */
.icon-picker-separator {
background-color: var(--lx-gray-05, var(--rx-gray-05)) !important;
background-color: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05))) !important;
}
/* Topbar wrapper for easier inspection */
@@ -47,15 +49,11 @@
falling back to `--ls-tertiary-background-color`. Raw
`var(--lx-gray-03)` would be invalid in OG → transparent. */
@apply bg-gray-03;
border-bottom: 1px solid var(--lx-gray-06, var(--rx-gray-06));
/* Focus-within tell: the borderless input has no focus ring of its
own, so the section's existing bottom-border lights up the
theme accent when the input is focused. Themed, accessible,
and preserves the edge-to-edge feel. */
&:focus-within {
border-bottom-color: var(--lx-accent-09);
}
/* Themed bottom border (--ls-border-color middle step for OG). The
search input has no validation state to communicate, so the
border doesn't change on focus — the search icon's opacity
change provides enough active-state feedback. */
border-bottom: 1px solid var(--lx-gray-06, var(--ls-border-color, var(--rx-gray-06)));
}
/* Icon-picker-specific tab bar look (gray backdrop, right-side actions slot).
@@ -955,13 +953,10 @@
/* Tailwind utility for the proper themed fallback chain (see icon
picker .search-section comment). */
@apply bg-gray-03;
/* Grey line at bottom of header section, matching icon picker */
border-bottom: 1px solid var(--lx-gray-06, var(--rx-gray-06));
/* Focus-within accent (see icon picker .search-section). */
&:focus-within {
border-bottom-color: var(--lx-accent-09);
}
/* Themed bottom border (matches icon picker — `--ls-border-color`
middle step for OG). No focus accent: search icon opacity is the
active-state signal. */
border-bottom: 1px solid var(--lx-gray-06, var(--ls-border-color, var(--rx-gray-06)));
.search-input {
@apply relative flex-1 px-2;