feat(ui): thin kind-coloured border on tag chips so they don't wash out
The tonal fill (esp. character = info) is intentionally faint and blends into the dark tag rail. Add a thin border in each chip's own kind colour via color-mix on currentColor (the tonal chip's themed foreground), defining the edge without changing the fill. Theme-aware in both light and dark. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -143,6 +143,12 @@ function iconFor (k) { return KIND_ICONS[k] || 'mdi-tag' }
|
||||
chip's hover title. */
|
||||
.fc-tag-chip { display: inline-flex; align-items: center; gap: 1px; max-width: 100%; min-width: 0; }
|
||||
.fc-tag-chip__nav { max-width: 100%; min-width: 0; }
|
||||
/* Tonal chips (esp. character = info) wash out against the dark rail — the fill
|
||||
is intentionally faint. Give every tag chip a thin border in its OWN kind
|
||||
colour (currentColor = the tonal chip's themed foreground) so the edge reads
|
||||
clearly without touching the fill (operator-asked 2026-07-08). Theme-aware:
|
||||
currentColor tracks the kind colour in either light or dark. */
|
||||
.fc-tag-chip__nav { border: thin solid color-mix(in srgb, currentColor 55%, transparent); }
|
||||
.fc-tag-chip__nav :deep(.v-chip__content) { min-width: 0; overflow: hidden; }
|
||||
/* The bigger size=default chip widens Vuetify's negative start-margin on the
|
||||
leading kind-icon, pulling it LEFT of the content box above — where that
|
||||
|
||||
Reference in New Issue
Block a user