# 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.

```js
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
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)
})
```