Make pane locate highlight more obvious (#2211)

Add a dedicated pane locate color token and use a stronger blue rim
with longer visible opacity so repeated focus flashes are easier to see.
This commit is contained in:
Jinjing
2026-05-17 20:48:41 -07:00
committed by GitHub
parent 5a11447f0e
commit 5cbf4a89ba
3 changed files with 12 additions and 10 deletions
+2
View File
@@ -103,6 +103,7 @@
--border: #e5e5e5;
--input: #e5e5e5;
--ring: #a1a1a1;
--terminal-pane-locate: var(--color-blue-600);
--chart-1: var(--color-blue-300);
--chart-2: var(--color-blue-500);
--chart-3: var(--color-blue-600);
@@ -156,6 +157,7 @@
--border: rgb(255 255 255 / 0.07);
--input: rgb(255 255 255 / 0.15);
--ring: #737373;
--terminal-pane-locate: var(--color-blue-400);
--chart-1: var(--color-blue-300);
--chart-2: var(--color-blue-500);
--chart-3: var(--color-blue-600);
+7 -7
View File
@@ -134,18 +134,18 @@
inset: 1px;
z-index: 30;
pointer-events: none;
border: 1px solid color-mix(in srgb, var(--ring) 82%, transparent);
border-radius: 3px;
border: 1.5px solid color-mix(in srgb, var(--terminal-pane-locate) 52%, transparent);
border-right-color: color-mix(in srgb, var(--terminal-pane-locate) 68%, transparent);
border-left-color: color-mix(in srgb, var(--terminal-pane-locate) 68%, transparent);
border-radius: 2px;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--ring) 44%, transparent),
0 0 0 2px color-mix(in srgb, var(--ring) 28%, transparent),
0 0 18px color-mix(in srgb, var(--ring) 28%, transparent);
0 0 0 2px color-mix(in srgb, var(--terminal-pane-locate) 34%, transparent),
0 0 20px color-mix(in srgb, var(--terminal-pane-locate) 40%, transparent);
animation: pane-focus-rim-flash 1.5s ease-out forwards;
}
@keyframes pane-focus-rim-flash {
0%,
72% {
0% {
opacity: 1;
}
100% {
@@ -42,12 +42,12 @@ describe('flashFocusedPaneRim', () => {
const pane = createPaneElement()
flashFocusedPaneRim(pane)
vi.advanceTimersByTime(800)
vi.advanceTimersByTime(FOCUSED_PANE_FLASH_MS - 100)
flashFocusedPaneRim(pane)
vi.advanceTimersByTime(600)
vi.advanceTimersByTime(FOCUSED_PANE_FLASH_MS - 100)
expect(pane.classList.contains('pane-focus-rim-flash')).toBe(true)
vi.advanceTimersByTime(900)
vi.advanceTimersByTime(100)
expect(pane.classList.contains('pane-focus-rim-flash')).toBe(false)
})
})