Color Coded Changelog Block for React

Edit RELEASES at the top of the file, newest first: each has a version, a date as an ISO day, a title, a summary and its kind. A kind is a constant (NEW, IMPROVED, FIXED, SECURITY, DEPRECATED) with an icon, an id, a label, a strip (the classes that draw its pattern) and a weight (its headline's font weight). Add one to the constants and to KINDS, and the legend, the counts and the status follow.

A colour that carries meaning fails for anyone who can't tell it apart, in print and in greyscale. Here a kind is its pattern, its icon and its word together, and the word is always text, so a screen reader hears "Security" whatever the theme. The strips draw in the text colour, so they follow your theme and invert inside a pressed legend button.

So the log keeps its length and its place: nothing below a row moves when you pick a kind, and the rows you dimmed are still there to read. A dimmed row takes a solid tint and a slightly softer text colour, never an opacity, so its text stays readable. The block that hides rows is the filterable changelog.

The legend is a labelled group of buttons, each named by its kind and its count. Choosing one changes a polite status ("Fixed: 1 of 6 releases highlighted, the rest dimmed."). Each row is an article with its version, day, kind and title in reading order; the strips and the legend's patterns are decoration and hidden from assistive technology.

Below sm each row stacks its version, day and tag above the title and sentence, and the legend scrolls sideways inside its own row; nothing else scrolls at 320 pixels. In a right-to-left layout the strips move to the start edge, the legend starts at the start edge, and versions keep their reading order.

The header and list fade up once on load, and a row's tint fades when you pick a kind. With reduced motion both are off: the block appears at once and the tint changes instantly.