Palette

A standard set of board colors so boards are told apart at a glance, the way Trello backgrounds do it. Each color has a background, a slightly deeper shade for lane headers, and an ink that reads on both. boardColor(name) looks one up; colorFor(text) picks one deterministically from any string, so a lane or a person gets the same color every time without anyone choosing it.

import { PALETTE, colorFor } from 'tosijs-virta'
import { elements } from 'tosijs'
const { div, span } = elements

preview.append(
  div({ style: { display: 'flex', gap: '6px', flexWrap: 'wrap' } },
    ...Object.entries(PALETTE).map(([name, c]) =>
      span({ style: { background: c.bg, color: c.ink, padding: '8px 12px', borderRadius: '8px', fontWeight: 600 } }, name)
    )
  ),
  div({ style: { marginTop: '8px' } }, `colorFor('tosijs-ui') → ${colorFor('tosijs-ui').name}`)
)

test('eight swatches render, each painted', () => {
  const swatches = Array.from(preview.querySelectorAll('span'))
  expect(swatches.length).toBe(8)
  expect(swatches.every((s) => s.style.background !== '')).toBe(true)
})