@rackbops/styles 0.1.3 → 0.1.5

package/arcane-obsidian/design.md

@@ -49,8 +49,9 @@ Muted-on-surface is tuned to clear WCAG AA (4.5:1) on every surface; the light
   weight 600, tight tracking (`-0.01em`). Monospace *is* the display voice.
 - **Body & UI:** `system-ui, -apple-system, "Segoe UI", Roboto, …`, weight 400.
 - **Numerals:** `font-variant-numeric: tabular-nums` everywhere data is shown.
-- **Labels** (eyebrows, badges, table headers): mono, uppercase, ~11px, tracked
-  `0.06em`.
+- **Labels** (eyebrows, badges): mono, uppercase, ~11px, tracked `0.06em`.
+  Table headers are the one stated departure — body-sans, normal case
+  (`components/table.css:9-15`; badges stay mono uppercase, `badge.css:10-14`).
 - **Bare tags:** unclassed `h1`-`h6` pick up the mono display voice directly —
   weight 600, tracking `-0.01em`, `--rb-space-3` margin below. `.rb-card`
   renders a bare `<h3>` and gets this treatment too, since `card.css` declares
@@ -140,8 +141,8 @@ voices reused, never new decorative hues.
 
 ## Light counterpart — "Parchment"
 
-The AA-tuned light secondary. Not shipped as a separate theme yet; documented so
-it can become one additively.
+The AA-tuned light secondary, shipped as its own theme: `arcane-parchment`
+(`styles/arcane-parchment/design.md`).
 
 | Role | Value |
 | --- | --- |

package/arcane-obsidian/tokens.css

@@ -11,8 +11,8 @@
  * Every theme declares the same baseline token set (styles/test enforces
  * parity); names marked (extra) are additions beyond it that only this
  * theme's own component CSS may rely on. This theme ships its dark, primary
- * look ("Obsidian"); its AA-tuned light counterpart ("Parchment") is
- * documented in design.md and can become its own theme later.
+ * look ("Obsidian"); its AA-tuned light counterpart ("Parchment") ships as
+ * its own theme, arcane-parchment (see design.md).
  */
 :where([data-rb-style="arcane-obsidian"]) {
   color-scheme: dark;

package/arcane-parchment/design.md

@@ -45,7 +45,9 @@ hues appear. Muted-on-surface is tuned to clear WCAG AA (4.5:1) on every surface
 
 Identical to arcane-obsidian: monospace display voice (the wordmark, weight 600,
 tracking `-0.01em`) over a `system-ui` body (weight 400); `tabular-nums` wherever
-data is shown; mono uppercase labels tracked `0.06em`. Bare `h1`-`h6`/`p`/`ul`/`ol`
+data is shown; mono uppercase labels tracked `0.06em` (table headers are the
+one stated departure — body-sans, normal case, `components/table.css:9-15`).
+Bare `h1`-`h6`/`p`/`ul`/`ol`
 get the same treatment as arcane-obsidian too: unclassed headlines carry that
 same mono voice with `--rb-space-3` margin, and bare `ul`/`ol` add
 `--rb-space-4` marker indent with real disc/decimal markers.

package/mono-field/design.md

@@ -87,8 +87,10 @@ and the accent itself is spent sparingly — never for decoration.
 
 ## Components
 
-Class prefix `rb-`; shared token/class contract with the other themes. Only
-the baseline ten — no theme 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` — plain bordered ghost on white by default;
   `--primary` is the one solid accent fill (barely-there shadow lift on

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/styles",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Rackbops design-system styles: tokens, base styles, and component classes per theme.",
   "license": "MIT",
   "repository": {

package/rackbops-noir/design.md

@@ -76,12 +76,7 @@ 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
+One component diverges beyond palette. `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.

package/rackbops-studio/components/button.css

@@ -41,7 +41,7 @@
 }
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--primary {
   background: var(--rb-text);
-  color: #f4f7f9;
+  color: var(--rb-bg);
 }
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--primary:hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--primary:focus-visible {
@@ -54,7 +54,7 @@
 }
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--accent:hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--accent:focus-visible {
-  background: #c93c1c;
+  background: color-mix(in srgb, var(--rb-accent), var(--rb-text) 15%);
 }
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--ghost {
   background: transparent;

package/rackbops-studio/design.md

@@ -107,12 +107,9 @@ 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`. 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.
+  (>=2rem), paired with `.rb-btn`. `--primary`'s label colour is `var(--rb-bg)`
+  and `--accent`'s hover/focus fill is `color-mix(in srgb, var(--rb-accent),
+  var(--rb-text) 15%)` — identical to rackbops-noir's `components/button.css`.
 - **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
@@ -170,8 +167,8 @@ Class prefix `rb-`; shared token/class contract with the other themes.
 
 ## Dark counterpart
 
-The dark mode rackbops.com toggles into. Not shipped as a separate theme yet;
-documented so it can become one additively.
+The dark mode rackbops.com toggles into, shipped as its own theme:
+`rackbops-noir` (`styles/rackbops-noir/design.md`).
 
 | Role | Value |
 | --- | --- |

package/rackbops-studio/tokens.css

@@ -8,8 +8,8 @@
  * The :where() keeps specificity at zero, so any consumer rule overrides.
  *
  * This theme ships its canonical, primary look (light); the dark counterpart
- * that rackbops.com toggles into is documented in design.md and can become its
- * own theme later. Every theme declares the same baseline token set (styles/test
+ * that rackbops.com toggles into ships as its own theme, rackbops-noir (see
+ * design.md). Every theme declares the same baseline token set (styles/test
  * enforces parity); names marked (extra) are additions this theme's own
  * component CSS may rely on.
  */