{ "schemaVersion": 1, "theme": "j3w1-theme", "version": "1.1.0", "profile": "default", "profileStatus": "approved", "release": { "version": "1.1.0", "stability": "release", "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens." }, "sourceDigest": "sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=", "id": "diagnostics", "family": "developer", "maturity": "stable", "priority": "R1", "coverage": { "family": "developer", "priority": "R1", "maturity": "stable", "specified": true, "demonstrated": true, "tested": false, "testImplemented": false, "states": 7 }, "title": "Diagnostics", "summary": "Inline problem markers in code (underline patterns, an error line and an overview stripe) and the problems panel that lists them as a listbox, each severity carrying its glyph.", "anchors": { "site": "https://j3w1.github.io/theme/reference/#c-diagnostics", "spec": "spec/components/diagnostics.md", "brief": "exports/components/diagnostics.brief.txt" }, "native": false, "aria": { "pattern": "inline: decorated spans inside a read-only textbox presentation; panel: APG listbox with aria-activedescendant", "apg": "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/", "role": "listbox" }, "variants": [ { "id": "inline", "name": "Inline markers", "description": "Error, warning, info, hint, unused and deprecated ranges in a code sample with the overview stripe." }, { "id": "panel", "name": "Problems panel", "description": "The listbox of problems with glyphs, counts, locations and rule codes." } ], "sizes": [ "compact", "comfortable" ], "states": [ "default", "hover", "focus-visible", "selected", "selected+focus-visible", "error", "empty" ], "tokens": { "root.bg": { "alias": "color.surface.default", "value": "#100c0c", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "root.border": { "alias": "color.border.control", "value": "#a3676b", "status": "proposed", "deprecated": false, "decisionId": "D-007", "eligibility": { "action": "use-and-report", "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.", "decisionIds": [ "D-007" ] } }, "code.bg": { "alias": "color.code.bg", "value": "#0c0909", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "code.text": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "code.line-number": { "alias": "color.code.line-number", "value": "#ad7175", "status": "approved", "deprecated": false, "decisionId": "D-003", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "code.gutter-rule": { "alias": "color.code.gutter-rule", "value": "#2b0e0d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "code.selection-bg": { "alias": "color.code.selection-bg", "value": "#420f0c", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "error.underline": { "alias": "color.diagnostic.error.underline", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "error.text": { "alias": "color.diagnostic.error.text", "value": "#f73f35", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "error.stripe": { "alias": "color.diagnostic.error.stripe", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "error.line-bg": { "alias": "color.diagnostic.error.bg", "value": "#2b0e0d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "warning.underline": { "alias": "color.diagnostic.warning.underline", "value": "#c9973f", "status": "approved", "deprecated": false, "decisionId": "D-001", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "warning.text": { "alias": "color.diagnostic.warning.text", "value": "#c9973f", "status": "approved", "deprecated": false, "decisionId": "D-001", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "warning.stripe": { "alias": "color.diagnostic.warning.stripe", "value": "#c9973f", "status": "approved", "deprecated": false, "decisionId": "D-001", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "info.underline": { "alias": "color.diagnostic.info.underline", "value": "#7e9ebb", "status": "approved", "deprecated": false, "decisionId": "D-001", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "info.text": { "alias": "color.diagnostic.info.text", "value": "#7e9ebb", "status": "approved", "deprecated": false, "decisionId": "D-001", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "hint.underline": { "alias": "color.diagnostic.hint.underline", "value": "#ad7175", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "hint.text": { "alias": "color.text.subtle", "value": "#ad7175", "status": "approved", "deprecated": false, "decisionId": "D-003", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "unused.text": { "alias": "color.diagnostic.unused.text", "value": "#bd787d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "deprecated.text": { "alias": "color.code.syntax.deprecated", "value": "#ad7175", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "row.text": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "row.location": { "alias": "color.text.muted", "value": "#bd787d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "row.divider": { "alias": "color.border.divider", "value": "#2b0e0d", "status": "proposed", "deprecated": false, "decisionId": "D-008", "eligibility": { "action": "use-and-report", "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.", "decisionIds": [ "D-008" ] } }, "row.bg-hover": { "alias": "color.interaction.hover.bg", "value": "#1c0a09", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "row.ring": { "alias": "color.interaction.focus.ring", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "row.bg-selected": { "alias": "color.interaction.selection.bg", "value": "#531310", "status": "approved", "deprecated": false, "decisionId": "D-027", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "row.text-selected": { "alias": "color.interaction.selection.text", "value": "#f4eeee", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "row.ring-selected": { "alias": "color.interaction.focus.ring-container", "value": "#ffa2a7", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "header.text": { "alias": "color.text.bright", "value": "#ffa2a7", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "status.text": { "alias": "color.status.danger.text", "value": "#f73f35", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "empty.text": { "alias": "color.text.muted", "value": "#bd787d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "empty.glyph": { "alias": "color.status.success.text", "value": "#86a46f", "status": "approved", "deprecated": false, "decisionId": "D-001", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } }, "stateRules": [ { "state": "default", "visual": "ranges decorated as above on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default} with 1px {color.border.divider} between them", "channel": "underline pattern; glyph", "tokens": { "fg": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.default", "value": "#100c0c", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "border": { "alias": "color.border.control", "value": "#a3676b", "status": "proposed", "deprecated": false, "decisionId": "D-007", "eligibility": { "action": "use-and-report", "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.", "decisionIds": [ "D-007" ] } } } }, { "state": "hover", "visual": "panel row background → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface)", "channel": "cursor: default on rows", "tokens": { "fg": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.interaction.hover.bg", "value": "#1c0a09", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "focus-visible", "visual": "the active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: the container ring 2px {color.interaction.focus.ring-container} at −3px", "channel": "the ring", "tokens": { "fg": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.default", "value": "#100c0c", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "outline": { "alias": "color.interaction.focus.ring", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "selected", "visual": "row filled {color.interaction.selection.bg}, text and glyph {color.interaction.selection.text}; the matching inline range filled {color.code.selection-bg} under its underline", "channel": "`aria-selected`; the glyph stays; the fill spans the row", "tokens": { "fg": { "alias": "color.interaction.selection.text", "value": "#f4eeee", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.interaction.selection.bg", "value": "#531310", "status": "approved", "deprecated": false, "decisionId": "D-027", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "selected+focus-visible", "visual": "the selection fill and a 1px dashed ring in {color.interaction.focus.ring-container}", "channel": "both at once", "tokens": { "fg": { "alias": "color.interaction.selection.text", "value": "#f4eeee", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.interaction.selection.bg", "value": "#531310", "status": "approved", "deprecated": false, "decisionId": "D-027", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "outline": { "alias": "color.interaction.focus.ring-container", "value": "#ffa2a7", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "error", "visual": "the provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the inline stripe shows the same `✕` at its top", "channel": "glyph; live announcement", "tokens": { "fg": { "alias": "color.status.danger.text", "value": "#f73f35", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.default", "value": "#100c0c", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "empty", "visual": "no problems: rows and stripe marks hidden; `✓ No problems` in {color.text.muted} with the glyph in {color.status.success.text}; inline decorations removed", "channel": "glyph; the absence of decoration", "tokens": { "fg": { "alias": "color.text.muted", "value": "#bd787d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.default", "value": "#100c0c", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } } ], "keyboard": [ { "key": "Tab / Shift+Tab", "action": "Moves focus to and from the list as one stop; the active row is restored." }, { "key": "Down / Up", "action": "Moves the active row; selection follows focus in this single-select listbox." }, { "key": "Home / End", "action": "First or last row." }, { "key": "Enter", "action": "Opens the location in the editor and moves focus there." }, { "key": "Type-ahead", "action": "Jumps to the next row whose message starts with the typed characters." }, { "key": "(host)", "action": "Inline markers have no keyboard of their own; navigation between problems (F8-style) is the host's binding." } ], "responsive": "The panel fills its container; message text wraps, location and rule code stay on the row's end and never truncate the glyph; at 320px the columns stack under the message. The inline sample scrolls horizontally inside its box; the stripe stays on the inline-end edge. RTL mirrors the stripe and the location column while code stays left-to-right.", "portability": { "web": "inline: spans with text-decoration inside the code-editor presentation; panel: