fix(color-picker): use canonical separator color chain

Three separator declarations used `var(--lx-gray-04)` with no
fallback. In OG/OG-turquoise themes that variable resolves to a tone
nearly identical to the popover surface, so the vertical rule
between Default/Custom column and preset grid, the border under the
hex input, and the pane's top border on open all read as invisible.
Switch to the canonical
`var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)))` chain
already used by every other separator in icon.css.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-05-22 12:44:48 +02:00
parent 34b42d70bf
commit fec588153e

View File

@@ -467,12 +467,15 @@
@apply flex flex-col gap-0.5 flex-shrink-0;
}
/* 1px vertical rule between control col and preset grid. */
/* 1px vertical rule between control col and preset grid. Uses the
canonical separator chain so the line stays visible in OG/
OG-turquoise themes (where `--lx-gray-04` resolved to a tone
nearly identical to the popover surface). */
.divider-rule {
@apply self-stretch flex-shrink-0;
width: 1px;
margin: 4px 2px;
background-color: var(--lx-gray-04);
background-color: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
}
/* 4-wide × 2-row preset grid. */
@@ -1875,7 +1878,7 @@
all three sit at the same 175px outer width. Closed: zero vertical
padding + zero border so the box collapses cleanly. */
padding: 0;
border-top: 0 solid var(--lx-gray-04);
border-top: 0 solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
/* Slightly darker than the popover surface so the picker pane reads as
a distinct pocket within the popover. Animates with the height. */
background-color: hsl(var(--popover));
@@ -1898,7 +1901,7 @@
position: relative;
height: 32px;
padding: 0 10px;
border-bottom: 1px solid var(--lx-gray-04);
border-bottom: 1px solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
}
/* Inline indicator overlaid on the hex input's right edge. Visible when