docs(design): refresh design.json sidecar
status-channel didn't match the real --status-airing token, and the score heat scale (issue 111), the available check-glyph exemption, and the score chip component were undocumented. DESIGN.md untouched.
This commit is contained in:
+45
-4
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"schemaVersion": 2,
|
||||
"generatedAt": "2026-08-22T00:00:00.000Z",
|
||||
"generatedAt": "2026-08-26T00:00:00.000Z",
|
||||
"title": "Design System: arr — Master Control",
|
||||
"extensions": {
|
||||
"colorMeta": {
|
||||
@@ -96,7 +96,7 @@
|
||||
"oklch(0.8 0.015 250)"
|
||||
]
|
||||
},
|
||||
"status-channel": {
|
||||
"status-airing": {
|
||||
"role": "tertiary",
|
||||
"displayName": "Channel Violet",
|
||||
"canonical": "oklch(0.78 0.14 305)",
|
||||
@@ -106,6 +106,20 @@
|
||||
"oklch(0.78 0.14 305)",
|
||||
"oklch(0.86 0.09 305)"
|
||||
]
|
||||
},
|
||||
"score-heat": {
|
||||
"role": "tertiary",
|
||||
"displayName": "Score Heat",
|
||||
"canonical": "oklch(0.8 0.17 150)",
|
||||
"tonalRamp": [
|
||||
"oklch(0.68 0.19 25)",
|
||||
"oklch(0.7 0.185 46)",
|
||||
"oklch(0.72 0.175 67)",
|
||||
"oklch(0.75 0.165 88)",
|
||||
"oklch(0.77 0.16 108)",
|
||||
"oklch(0.79 0.165 129)",
|
||||
"oklch(0.8 0.17 150)"
|
||||
]
|
||||
}
|
||||
},
|
||||
"typographyMeta": {
|
||||
@@ -202,11 +216,27 @@
|
||||
{
|
||||
"name": "Status chip",
|
||||
"kind": "custom",
|
||||
"refersTo": "status-channel",
|
||||
"refersTo": "status-airing",
|
||||
"description": "Library status (§4.2): airing / incomplete / waiting / complete / ended. Informational, not severity — colour marks activity in one channel-violet family (airing brightest, incomplete, waiting dimmest), satisfaction is neutral (complete bright ink, ended faint). The mono word is always present.",
|
||||
"html": "<span class=\"chip readout\" data-status=\"airing\">airing</span>",
|
||||
"css": ".chip[data-status=\"airing\"] { color: var(--status-airing); border-color: oklch(from var(--status-airing) l c h / 45%); } .chip[data-status=\"incomplete\"] { color: var(--signal-warn); border-color: oklch(from var(--signal-warn) l c h / 55%); } .chip[data-status=\"complete\"], .chip[data-status=\"ended\"] { color: var(--signal-ok); border-color: oklch(from var(--signal-ok) l c h / 45%); } .chip[data-counts=\"complete\"] { color: var(--signal-ok); } .chip[data-counts=\"partial\"] { color: var(--signal-warn); }"
|
||||
},
|
||||
{
|
||||
"name": "Media state chip",
|
||||
"kind": "custom",
|
||||
"refersTo": "signal-ok",
|
||||
"description": "§4.2's per-title state chip. Every state keeps the word, with one drawn exemption: `available` renders as a check glyph instead of the word `available` — a shape, not only a hue, so it survives a greyscale read the rule otherwise protects. The word moves to the chip's aria-label (exposed via role=\"img\", since a bare span's aria-label is not reliably read).",
|
||||
"html": "<span class=\"chip readout\" role=\"img\" aria-label=\"available\" data-movie-state=\"available\"><svg viewBox=\"0 0 16 16\" width=\"12\" height=\"12\"><path d=\"M3.2 8.4l3 3 6.6-6.8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></span>",
|
||||
"css": ".chip[data-movie-state=\"available\"] { color: var(--signal-ok); border-color: oklch(from var(--signal-ok) l c h / 45%); } .chip[data-movie-state=\"missing\"][data-wanted=\"true\"] { color: var(--signal-warn); border-color: oklch(from var(--signal-warn) l c h / 55%); } .chip[data-movie-state=\"downloading\"] { color: var(--status-airing); border-color: oklch(from var(--status-airing) l c h / 45%); }"
|
||||
},
|
||||
{
|
||||
"name": "Score chip",
|
||||
"kind": "custom",
|
||||
"refersTo": "score-heat",
|
||||
"description": "Issue 111: the release deck's score column (§9.3) reads on a list-relative heat scale — seven stops from the lowest-scoring candidate on screen (red) to the highest (green) — rather than a flat eligible-green fill. Every other column chip stays the plain neutral Chip.",
|
||||
"html": "<span class=\"chip readout cw cw-score\" data-score=\"6\" aria-label=\"score 128\">128</span>",
|
||||
"css": ".cw-score[data-score=\"0\"] { color: var(--score-0); border-color: oklch(from var(--score-0) l c h / 45%); } .cw-score[data-score=\"6\"] { color: var(--score-6); border-color: oklch(from var(--score-6) l c h / 45%); }"
|
||||
},
|
||||
{
|
||||
"name": "Module (channel strip)",
|
||||
"kind": "card",
|
||||
@@ -290,6 +320,16 @@
|
||||
"name": "The Dead-Air Rule",
|
||||
"body": "When nothing is flowing, nothing animates. Pulse means probing; data-state=\"off\" is dark and still. Motion that misreports activity is a truth bug.",
|
||||
"section": "motion"
|
||||
},
|
||||
{
|
||||
"name": "The Check-Glyph Exemption",
|
||||
"body": "The one state chip drawn instead of worded: `available` is a check glyph, because a drawn shape survives the greyscale read the Word-Beside-The-Lamp doctrine otherwise protects with text alone. The word is not deleted — it moves to the chip's aria-label. No other state gets this treatment; `incomplete` and `waiting` have no unambiguous glyph, so they keep the word on the chip.",
|
||||
"section": "colors"
|
||||
},
|
||||
{
|
||||
"name": "The List-Relative Heat Rule",
|
||||
"body": "The release deck's score chip (issue 111) is not an absolute quality scale — its seven stops are relative to the lowest and highest score on screen right now. Colour there answers \"which of these\", not \"how good is this release in general\".",
|
||||
"section": "colors"
|
||||
}
|
||||
],
|
||||
"dos": [
|
||||
@@ -297,7 +337,8 @@
|
||||
"Do keep every control ≥44px, focus rings cyan and visible, and reduced-motion honored.",
|
||||
"Do keep muted text at or above 4.5:1 on panel ground (--ink-muted floor).",
|
||||
"Do self-host every asset; the SPA is embedded in the binary and must work with no network.",
|
||||
"Do take every colour, spacing and font-size from the :root tokens; the token check (web/scripts/check-tokens.mjs) fails CI on literals."
|
||||
"Do take every colour, spacing and font-size from the :root tokens; the token check (web/scripts/check-tokens.mjs) fails CI on literals.",
|
||||
"Do suppress a redundant status chip where another control on the same row already implies the exact same state one-to-one — the missing chip disappears from episode rows because the want button only ever renders for that state."
|
||||
],
|
||||
"donts": [
|
||||
"Colour state chips on the ramp — `complete` and `ended` green, `incomplete` and a partial count amber, `airing` and `downloading` violet, `waiting` and `untracked` neutral. The word stays in every chip, so state survives with colour removed.",
|
||||
|
||||
Reference in New Issue
Block a user