[feat](trx-frontend-http): assign distinct colours to bookmark categories

Named categories are sorted alphabetically and assigned colours from an
8-colour palette (blue, green, orange, red, purple, teal, pink, indigo).
Uncategorised bookmarks fall back to --accent-yellow (the leading UI
colour). Both the canvas dashed lines and the axis span labels (icon,
text, border, background) reflect the category colour via CSS custom
properties --bm-cat-color / --bm-cat-bg / --bm-cat-border.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-01 20:30:36 +01:00
parent 0af9b73bb9
commit 55e0a62e4b
2 changed files with 45 additions and 6 deletions
@@ -1539,9 +1539,9 @@ button:focus-visible, input:focus-visible, select:focus-visible {
cursor: pointer;
font-weight: 600;
font-size: 0.66rem;
background: var(--card-bg);
color: var(--accent-yellow);
border: 1px solid color-mix(in srgb, var(--accent-yellow) 55%, transparent);
background: var(--bm-cat-bg, var(--card-bg));
color: var(--bm-cat-color, var(--accent-yellow));
border: 1px solid var(--bm-cat-border, color-mix(in srgb, var(--accent-yellow) 55%, transparent));
border-radius: 3px;
padding: 2px 8px;
max-width: 130px;
@@ -1553,10 +1553,11 @@ button:focus-visible, input:focus-visible, select:focus-visible {
gap: 4px;
}
#spectrum-bookmark-axis span:hover {
background: color-mix(in srgb, var(--accent-yellow) 28%, transparent);
background: var(--bm-cat-bg, color-mix(in srgb, var(--accent-yellow) 28%, transparent));
filter: brightness(1.15);
}
.bm-icon-svg path {
fill: var(--accent-yellow);
fill: var(--bm-cat-color, var(--accent-yellow));
}
#spectrum-tooltip {
display: none;