@rackbops/styles 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/styles",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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