Tag colors

One registry decides how every tag is colored, everywhere it appears: chips on cards and in the card window, and the dots beside items in the filter menu. Resolution order: an exact rule for the tag (priority:critical), a rule for its key (kind:), then a color derived from the key so tags of one family look alike. The defaults make the tags that must stand out loud: priorities, bugs, and blockers.

import { tagColor, setTagColor } from 'tosijs-virta'
import { elements } from 'tosijs'
const { div, span } = elements

setTagColor('area:', { bg: '#0b5cad', ink: '#ffffff' })      // a whole key
setTagColor('kind:question', { bg: '#7f5f01', ink: '#ffffff' }) // one tag
const chip = (tag) => { const c = tagColor(tag); return span({ style: { background: c.bg, color: c.ink, padding: '2px 8px', borderRadius: '4px', marginRight: '6px', fontWeight: c.loud ? 700 : 500 } }, tag) }
preview.append(div(...['priority:critical', 'priority:low', 'kind:bug', 'blocked', 'area:store', 'kind:question', 'kind:docs', 'upstream'].map(chip)))
setTagColor('area:', null)
setTagColor('kind:question', null)

test('eight chips, the loud ones bold', () => {
  const chips = Array.from(preview.querySelectorAll('span'))
  expect(chips.length).toBe(8)
  expect(chips.filter((c) => c.style.fontWeight === '700').length).toBe(4)
})