Label colors
View on GitHubLabel colors
Issue labels (bug, feature, performance, design, ux,
chore) each have a fixed color dot rendered next to them
(LabelBadge) — a third color system in this codebase, entirely
separate from theme colors and
accent colors: a label's color is part
of its identity, the same reasoning
../accent-colors/02-use-the-accent-color-in-a-component.md
gives for why a project's badge color doesn't use a theme token
either. Unlike the other two color systems, there's no context/
provider here at all — just a static map and a closed set of six
enum cases, currently duplicated across five places.
Guides, in the order you'd actually need them
- Add a new label — worked example
adding a seventh label,
security, across every one of the five places that need it.
The architecture in one paragraph
App\Enums\IssueLabel (backend) and IssueLabel (frontend,
resources/js/types/Issues.ts) are two independently-maintained
closed unions of the same six string values — no codegen keeps them in
sync, the same convention every other backend-enum/frontend-type pair
in this codebase follows (see
../architecture/03-frontend-architecture-and-atomic-design.md).
resources/js/utils/labelColors.ts's LABEL_COLORS maps each label
to a single hex value, read directly as an inline style= by
LabelBadge — no theme variants, since a label's color is meant to
look identical in dark and light mode, exactly like a project's own
badge color. Two more places hold their own hardcoded copy of the
same six-value list: EditableLabelList's private AVAILABLE_LABELS
constant (the label picker shown when editing an issue) and
FilterDropdown's FILTER_CONFIG.labels.options (the label filter in
the issue list toolbar) — neither imports from the other or from a
shared constant, so a new label needs its own line in both.
