@rackbops/styles 0.1.1 → 0.1.3

package/amber-ember/design.md

@@ -63,7 +63,12 @@ tokens: `.rb-btn` (+ `--primary/--accent/--danger/--ghost`, `--sm` compact size,
 `.rb-dialog`, `.rb-tabs` / `.rb-tab` / `.rb-tabpanel`, `.rb-table` (+
 `.rb-num`, `--interactive`), `.rb-progress` / `.rb-spinner` (keyframe `rb-ember-spin`), `.rb-stepper`,
 `.rb-muted`, `.rb-pre` (+ `.rb-log`). See amber-hearth's `design.md` for the per-component
-notes — the behaviour is the same; only the palette is dark.
+notes — the behaviour is the same, with one exception:
+`components/dialog.css`'s `::backdrop` scrim is its own literal
+`rgba(8, 5, 3, 0.6)` here (a heavier, near-black wash for this espresso
+ground) rather than amber-hearth's lighter `rgba(43, 31, 20, 0.4)` — both are
+permitted literal alpha overlays per STANDARD.md 4.2. Otherwise only the
+palette is dark.
 
 ## Light counterpart
 

package/amber-hearth/design.md

@@ -106,6 +106,11 @@ Class prefix `rb-`; shared token/class contract with the other themes. No
   colour.
 - **Dialog** `.rb-dialog` — native `<dialog>`, generously rounded panel,
   blurred backdrop (`backdrop-filter: blur(var(--rb-blur))`), serif bold title.
+  Pair divergence: `components/dialog.css`'s `::backdrop` scrim is a literal
+  `rgba(43, 31, 20, 0.4)` here (a warm, lighter-alpha wash suited to this
+  theme's cream ground); amber-ember's is a heavier `rgba(8, 5, 3, 0.6)`
+  near-black scrim for its espresso ground — both are permitted literal alpha
+  overlays per STANDARD.md 4.2, just tuned per theme rather than shared.
 - **Tabs** `.rb-tabs` / `.rb-tab` / `.rb-tabpanel` — normal-case text tabs; the
   active tab is accent-coloured, underlined with the theme's one rationed
   gradient — the only place `--rb-accent-grad` appears in this theme.

package/arcane-obsidian/design.md

@@ -85,7 +85,11 @@ Class prefix `rb-`; shared token/class contract with the other themes.
   `--ghost` chromeless. `--sm` is a compact size — tighter padding, type down
   ~1px — for inline and table-row actions. `.rb-icon-btn` is a square icon-only
   hit target (>=2rem) — pair it with `.rb-btn` (+ an optional color variant)
-  for close/edit/delete glyph buttons.
+  for close/edit/delete glyph buttons. Pair divergence: `--primary`'s
+  hover/focus-visible fill lightens toward white
+  (`color-mix(in srgb, var(--rb-accent) 88%, #fff)`); the light "Parchment"
+  counterpart's `components/button.css` darkens toward `--rb-text` instead —
+  lightening on a light ground would drop the label below AA (STANDARD.md 5.2).
 - **Card** `.rb-card` (+ `--raised`) — solid panel, hairline border, shadow-sm.
 - **NavLink** `.rb-link` — tree/sidebar row; hover fills to surface-2 and lights a
   2px accent bar on the left edge; `--active` carries the accent wash.

package/arcane-parchment/design.md

@@ -72,7 +72,12 @@ tokens: `.rb-wordmark` (+ `__spark`), `.rb-btn` (+ `--primary/--accent/--danger/
 `.rb-dialog`, `.rb-tabs`, `.rb-tabstrip`, `.rb-table` (+ `.rb-num`, `--interactive`),
 `.rb-progress` / `.rb-spinner`, `.rb-stepper`, `.rb-eyebrow`, `.rb-muted`, `.rb-pre` (+ `.rb-log`). See
 arcane-obsidian's `design.md` for the per-component notes — the behaviour is
-the same; only the palette is light.
+the same, with one exception: `components/button.css`'s `--primary`
+hover/focus-visible fill darkens toward `--rb-text` here
+(`color-mix(in srgb, var(--rb-accent), var(--rb-text) 12%)`), rather than
+lightening toward white as arcane-obsidian does — lightening on this light
+ground would drop the label below AA (4.37:1; see the inline comment in that
+file). Otherwise only the palette is light.
 
 ## Code syntax
 

package/concrete-signal/design.md

@@ -82,8 +82,10 @@ gradient has no soft midpoint.
 
 ## Components
 
-Class prefix `rb-`; shared token/class contract with the other themes. Only
-the baseline ten — no theme-specific extras.
+Class prefix `rb-`; shared token/class contract with the other themes (the
+full required set is `styles/contract.json` / STANDARD.md 5.1 — not restated
+as a count here, since that count has drifted before) — no theme-specific
+extras.
 
 - **Button** `.rb-btn` — outlined ghost by default; `--primary` is a solid
   accent fill with the offset-shadow press interaction; `--accent` an
@@ -103,7 +105,11 @@ the baseline ten — no theme-specific extras.
   `.rb-field` / `.rb-choice` / `.rb-checkbox` / `.rb-radio` / `.rb-switch` —
   sunken square fields; focus swaps the border from 1px to 2px solid accent;
   checked checkbox/radio/switch states are a flat accent fill, not a tint
-  ring; labels are uppercase, tracked, weight 600.
+  ring; labels are uppercase, tracked, weight 600. Pair divergence:
+  `components/form.css`'s select-arrow SVG data-URI hardcodes its stroke
+  colour (`#8f8f8a`, matching this theme's `--rb-text-faint`) since an inline
+  SVG can't reference a CSS custom property; concrete-signal-light's icon
+  carries its own matching literal (`#5f5d58`) instead.
 - **Badge** `.rb-badge` — uppercase weight 700, near-square (`radius-pill`);
   a 16%-tint fill of its hue behind full-strength text, plus a 1px solid
   border of that same hue — badges carry a border here, unlike softer themes.
@@ -162,7 +168,9 @@ a poured-concrete off-white ground.
 | Gradient | `linear-gradient(90deg,#cc4611,#b8281f)` |
 
 See `concrete-signal-light`'s own `design.md` for its full color table and
-notes — the behaviour is identical; only the palette is light.
+notes — the behaviour is identical (the one exception is `components/form.css`'s
+select-arrow icon colour, its own literal per theme since SVG can't take a
+token); only the palette is otherwise light.
 
 ## Scoping
 

package/concrete-signal-light/design.md

@@ -60,14 +60,20 @@ transitions.
 ## Components
 
 Identical to concrete-signal — see its `design.md` for per-component notes;
-behaviour is the same, only the palette differs. The full baseline twelve:
+behaviour is the same, only the palette differs (the full required set is
+`styles/contract.json` / STANDARD.md 5.1 — not restated as a count here,
+since that count has drifted before):
 `.rb-btn` (+ `--primary/--accent/--danger/--ghost`, `--sm` compact size, `.rb-icon-btn` icon-only square), `.rb-card` (+
 `--raised`), `.rb-link`, `.rb-nav-rail`, the form set (`.rb-input`/`.rb-textarea`/
 `.rb-select`/`.rb-label`/`.rb-field`/`.rb-choice`/`.rb-checkbox`/`.rb-radio`/
 `.rb-switch`), `.rb-badge`, `.rb-alert`, `.rb-dialog`, `.rb-tabs`/`.rb-tab`/
 `.rb-tabpanel`, `.rb-table` (+ `.rb-num`, `--interactive`), `.rb-progress`/`.rb-spinner`, `.rb-stepper`,
 `.rb-muted` (no italic — brutalism never softens with a slant), `.rb-pre` (+ `.rb-log`)
-(zero radius falls out of `--rb-radius` automatically).
+(zero radius falls out of `--rb-radius` automatically). One exception:
+`components/form.css`'s select-arrow SVG data-URI hardcodes its own stroke
+colour (`#5f5d58`, matching this theme's `--rb-text-faint`) since an inline
+SVG can't reference a CSS custom property; concrete-signal's icon carries its
+own matching literal (`#8f8f8a`) instead.
 
 ## Dark counterpart
 

package/contract.json

@@ -0,0 +1,192 @@
+{
+  "contract": 1,
+  "tokens": [
+    "bg", "surface", "surface-2", "surface-sunken",
+    "text", "text-soft", "text-faint",
+    "border", "border-strong",
+    "accent", "accent-fg", "accent-wash", "accent-grad",
+    "info", "success", "warning", "danger",
+    "font-display", "font-body", "font-mono",
+    "font-weight", "font-weight-medium", "font-weight-bold",
+    "heading-tracking", "label-tracking", "text-sm",
+    "radius", "radius-lg", "radius-pill",
+    "shadow-sm", "shadow-lg", "blur", "transition",
+    "space-1", "space-2", "space-3", "space-4", "space-5"
+  ],
+  "components": {
+    "button": {
+      "react": "Button",
+      "classes": ["rb-btn", "rb-btn--primary", "rb-btn--accent", "rb-btn--danger", "rb-btn--ghost", "rb-btn--sm", "rb-icon-btn"],
+      "notes": "variants: primary, accent, danger, ghost; --sm compact size; .rb-icon-btn icon-only square"
+    },
+    "card": {
+      "react": "Card",
+      "classes": ["rb-card", "rb-card--raised"],
+      "notes": "raised prop; --raised is a documented no-op in the three nazuraki ports (section 5.3)"
+    },
+    "link": {
+      "react": "NavLink",
+      "classes": ["rb-link", "rb-link--active"],
+      "notes": "active prop; SHOULD also match [aria-current=\"page\"] (pending CSS sweep, #65)"
+    },
+    "nav-rail": {
+      "react": "NavRail",
+      "classes": ["rb-nav-rail"],
+      "notes": "composes .rb-link; owns no active convention"
+    },
+    "form": {
+      "react": ["Field", "Label", "Input", "Textarea", "Select", "Checkbox", "Radio", "Switch"],
+      "classes": ["rb-field", "rb-label", "rb-input", "rb-textarea", "rb-select", "rb-choice", "rb-checkbox", "rb-radio", "rb-switch"],
+      "notes": "pair with Field/Label; choice controls wrap in .rb-choice"
+    },
+    "badge": {
+      "react": "Badge",
+      "classes": ["rb-badge", "rb-badge--info", "rb-badge--success", "rb-badge--warning", "rb-badge--danger"],
+      "notes": "semantic variants"
+    },
+    "alert": {
+      "react": "Alert",
+      "classes": ["rb-alert", "rb-alert__title", "rb-alert--info", "rb-alert--success", "rb-alert--warning", "rb-alert--danger"],
+      "notes": "variant + optional title"
+    },
+    "dialog": {
+      "react": "Dialog",
+      "classes": ["rb-dialog", "rb-dialog__title", "rb-dialog__actions", "rb-dialog__body"],
+      "notes": "native <dialog>, open/onClose/actions; __body is a documented no-op in four themes (section 5.3)"
+    },
+    "tabs": {
+      "react": "Tabs",
+      "classes": ["rb-tabs", "rb-tab", "rb-tab--active", "rb-tabpanel"],
+      "notes": "items: {id, label, content}[]; --active SHOULD also match [aria-selected=\"true\"] (pending CSS sweep, #65)"
+    },
+    "table": {
+      "react": null,
+      "classes": ["rb-table", "rb-table--interactive", "rb-num"],
+      "notes": "style directly, no React wrapper"
+    },
+    "progress": {
+      "react": ["Progress", "Spinner"],
+      "classes": ["rb-progress", "rb-spinner"],
+      "notes": "native <progress> pseudo-element contract enforced separately (not class-based)"
+    },
+    "muted": {
+      "react": null,
+      "classes": ["rb-muted"],
+      "notes": "style directly, no React wrapper"
+    },
+    "pre": {
+      "react": null,
+      "classes": ["rb-pre"],
+      "notes": "style directly, no React wrapper"
+    },
+    "log": {
+      "react": null,
+      "classes": ["rb-log"],
+      "notes": "pairs with .rb-pre; style directly, no React wrapper"
+    },
+    "stepper": {
+      "react": "Stepper",
+      "classes": ["rb-stepper", "rb-stepper__step", "rb-stepper__node", "rb-stepper__label", "rb-stepper--complete", "rb-stepper--current", "rb-stepper--upcoming"],
+      "notes": "--upcoming is the resting state (allowlisted, no rule needed); --current SHOULD also match [aria-current=\"step\"] (pending CSS sweep, #65)"
+    }
+  },
+  "allowlist": [
+    { "theme": "luminous-precision", "class": "rb-card--raised", "reason": "nazuraki upstream has no second elevation tier for this port" },
+    { "theme": "neon-butterfly", "class": "rb-card--raised", "reason": "nazuraki upstream has no second elevation tier for this port" },
+    { "theme": "summer-cloud", "class": "rb-card--raised", "reason": "nazuraki upstream's second elevation tier is --floating, already carried over; --raised would just duplicate it" },
+    { "theme": "luminous-precision", "class": "rb-dialog__body", "reason": "pads .rb-dialog directly instead of a wrapper -- sanctioned by #42's verdict" },
+    { "theme": "mono-field", "class": "rb-dialog__body", "reason": "pads .rb-dialog directly instead of a wrapper -- sanctioned by #42's verdict" },
+    { "theme": "neon-butterfly", "class": "rb-dialog__body", "reason": "pads .rb-dialog directly instead of a wrapper -- sanctioned by #42's verdict" },
+    { "theme": "summer-cloud", "class": "rb-dialog__body", "reason": "pads .rb-dialog directly instead of a wrapper -- sanctioned by #42's verdict" },
+    { "theme": "amber-ember", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "amber-hearth", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "arcane-obsidian", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "arcane-parchment", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "concrete-signal", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "concrete-signal-light", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "luminous-precision", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "mono-field", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "neon-butterfly", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "rackbops-noir", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "rackbops-studio", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" },
+    { "theme": "summer-cloud", "class": "rb-stepper--upcoming", "reason": "default/resting state -- falls through to the base node/label rule, no override needed" }
+  ],
+  "extras": {
+    "arcane-obsidian": ["rb-wordmark", "rb-wordmark__spark", "rb-tabstrip", "rb-tabstrip__tab", "rb-tabstrip__tab--active", "rb-eyebrow"],
+    "arcane-parchment": ["rb-wordmark", "rb-wordmark__spark", "rb-tabstrip", "rb-tabstrip__tab", "rb-tabstrip__tab--active", "rb-eyebrow"],
+    "rackbops-studio": ["rb-rack", "rb-rack__top", "rb-rack__live", "rb-rack__bars", "rb-rack__foot", "rb-principles", "rb-principle", "rb-principle__n", "rb-principle__body", "rb-tags", "rb-tag", "rb-card__tag", "rb-btn__arrow", "rb-eyebrow"],
+    "rackbops-noir": ["rb-rack", "rb-rack__top", "rb-rack__live", "rb-rack__bars", "rb-rack__foot", "rb-principles", "rb-principle", "rb-principle__n", "rb-principle__body", "rb-tags", "rb-tag", "rb-card__tag", "rb-btn__arrow", "rb-eyebrow"],
+    "luminous-precision": ["rb-badge--primary", "rb-bg", "rb-progress--accent"],
+    "neon-butterfly": ["rb-badge--primary", "rb-bg", "rb-progress--accent"],
+    "summer-cloud": ["rb-badge--primary", "rb-bg", "rb-progress--accent", "rb-chip", "rb-chip--selected", "rb-card--floating"],
+    "concrete-signal": [],
+    "concrete-signal-light": [],
+    "amber-hearth": [],
+    "amber-ember": [],
+    "mono-field": []
+  },
+  "ariaPairs": [
+    {
+      "component": "tabs",
+      "class": "rb-tab--active",
+      "attribute": "[aria-selected=\"true\"]",
+      "baseSelector": "rb-tab",
+      "exempt": [
+        { "theme": "arcane-obsidian", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "arcane-parchment", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "rackbops-studio", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "rackbops-noir", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "amber-hearth", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "amber-ember", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" }
+      ]
+    },
+    {
+      "component": "link",
+      "class": "rb-link--active",
+      "attribute": "[aria-current=\"page\"]",
+      "baseSelector": "rb-link",
+      "exempt": [
+        { "theme": "amber-ember", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "amber-hearth", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "arcane-obsidian", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "arcane-parchment", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "concrete-signal", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "concrete-signal-light", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "luminous-precision", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "mono-field", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "neon-butterfly", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "rackbops-noir", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "rackbops-studio", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" }
+      ]
+    },
+    {
+      "component": "stepper",
+      "class": "rb-stepper--current",
+      "attribute": "[aria-current=\"step\"]",
+      "baseSelector": "rb-stepper__step",
+      "exempt": [
+        { "theme": "amber-ember", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "amber-hearth", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "arcane-obsidian", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "arcane-parchment", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "concrete-signal", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "concrete-signal-light", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "luminous-precision", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "mono-field", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "neon-butterfly", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "rackbops-noir", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "rackbops-studio", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
+        { "theme": "summer-cloud", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" }
+      ]
+    }
+  ],
+  "dialogBackdropBlur": {
+    "token": "--rb-blur",
+    "exempt": [
+      { "theme": "concrete-signal", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true },
+      { "theme": "concrete-signal-light", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true },
+      { "theme": "neon-butterfly", "reason": "hard-codes blur(4px), pending CSS fix, tracked in #65" },
+      { "theme": "summer-cloud", "reason": "hard-codes blur(4px), pending CSS fix, tracked in #65" }
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/styles",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Rackbops design-system styles: tokens, base styles, and component classes per theme.",
   "license": "MIT",
   "repository": {
@@ -32,11 +32,13 @@
     "mono-field",
     "all.css",
     "manifest.json",
+    "contract.json",
     "css-side-effect.d.ts"
   ],
   "exports": {
     "./all": { "types": "./css-side-effect.d.ts", "default": "./all.css" },
     "./manifest": "./manifest.json",
+    "./contract": "./contract.json",
     "./arcane-obsidian": { "types": "./css-side-effect.d.ts", "default": "./arcane-obsidian/index.css" },
     "./arcane-obsidian/tokens": { "types": "./css-side-effect.d.ts", "default": "./arcane-obsidian/tokens.css" },
     "./arcane-obsidian/base": { "types": "./css-side-effect.d.ts", "default": "./arcane-obsidian/base.css" },

package/rackbops-noir/design.md

@@ -76,6 +76,16 @@ matches rackbops.com's dark-mode rack — a near-canvas block set off by its bor
 the per-component notes. The Boppy mascot asset ships with rackbops-studio
 (`styles/rackbops-studio/assets/boppy.svg`) and is shared.
 
+Two components diverge beyond palette. `components/button.css`'s `--primary`
+label colour (`var(--rb-bg)`) and `--accent` hover/focus fill
+(`color-mix(in srgb, var(--rb-accent), var(--rb-text) 15%)`) are proper token
+expressions here; rackbops-studio's equivalents are pre-existing literal
+colours (`#f4f7f9`, `#c93c1c`) that predate STANDARD.md 4.2 and haven't been
+migrated yet (see its `design.md`). `components/rack.css` declares its own
+local `--rb-rack-panel`/`--rb-rack-line` values, tuned slightly darker here
+than rackbops-studio's to read correctly against this theme's already-dark
+canvas.
+
 ## Light counterpart
 
 `rackbops-studio` — the canonical light look. Same `--rb-*` baseline and `rb-*`

package/rackbops-studio/design.md

@@ -107,7 +107,12 @@ Class prefix `rb-`; shared token/class contract with the other themes.
   vermillion, `--ghost` bordered outline, `--danger` rose outline; `.rb-btn__arrow`
   slides on hover. `--sm` is a compact size for inline/table-row actions — the
   arrow scales with it. `.rb-icon-btn` is a square icon-only hit target
-  (>=2rem), paired with `.rb-btn`.
+  (>=2rem), paired with `.rb-btn`. Pair divergence: `components/button.css`
+  carries two literal (non-token) colours here that predate the "tokens, not
+  literals" rule (STANDARD.md 4.2) and haven't been migrated yet — `--primary`'s
+  label colour (`#f4f7f9`) and `--accent`'s hover/focus fill (`#c93c1c`).
+  rackbops-noir's equivalents already use `var(--rb-bg)` and a `color-mix()`
+  formula respectively; bringing this theme in line is tracked separately.
 - **Card** `.rb-card` (+ `__tag`) — white panel, soft shadow, `-4px` hover lift.
   `--raised` makes that lift the resting state (a further `-6px` on hover).
 - **NavLink** `.rb-link` — mono header nav; hover fills to a surface pill; accent
@@ -152,7 +157,11 @@ Class prefix `rb-`; shared token/class contract with the other themes.
 
 - **Rack** `.rb-rack` (+ `__top` / `__live` / `__bars` / `__foot`) — the dark navy
   equaliser panel; a pulsing live dot and animated vermillion bars. Its inverted
-  panel palette is fixed dark regardless of the light canvas.
+  panel palette is fixed dark regardless of the light canvas. Pair divergence:
+  `components/rack.css` declares its own local `--rb-rack-panel`/`--rb-rack-line`
+  custom properties with theme-specific literal values (a mini palette scoped to
+  this extra, the same way tokens.css carries the baseline palette) — rackbops-noir
+  tunes both slightly darker to sit correctly against its already-dark canvas.
 - **Principles** `.rb-principles` / `.rb-principle` (+ `__n` / `__body`) — the
   numbered `/0N` "how we work" list.
 - **Tags** `.rb-tags` / `.rb-tag` — mono capability pills in a flex-wrap row.