@rackbops/styles 0.2.2 → 0.2.4

package/amber-ember/design.md

@@ -53,6 +53,10 @@ true pills for badges/progress; warm-toned diffused shadows (deepened to
 near-black for the dark ground); transitions `0.18s`; 4px spacing rhythm; the
 one gradient rationed to the active-tab underline only.
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). No deviations.
+
 ## Components
 
 Class prefix `rb-`; the full amber-hearth inventory, styled identically from

package/amber-hearth/design.md

@@ -75,6 +75,12 @@ progress fill and every other surface stay solid.
   `--rb-accent-wash` ring.
 - 4px spacing rhythm (`--rb-space-1..5`).
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). One note beyond the tested pairs:
+
+- **`--rb-accent` as bare `<a>` link text is ~4.47:1 on `--rb-bg`** -- essentially at the 4.5:1 AA text bar, and ~4.9:1 on `--rb-surface`, which clears it. It clears the 3:1 non-text/focus target the test checks `--rb-accent` against (accent is contracted as a non-text element, not body text).
+
 ## Components
 
 Class prefix `rb-`; shared token/class contract with the other themes. No

package/arcane-obsidian/design.md

@@ -75,6 +75,10 @@ Muted-on-surface is tuned to clear WCAG AA (4.5:1) on every surface; the light
   `prefers-reduced-motion`.
 - 4px spacing rhythm (`--rb-space-1..5`).
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). No deviations.
+
 ## Components
 
 Class prefix `rb-`; shared token/class contract with the other themes.

package/arcane-parchment/design.md

@@ -66,6 +66,10 @@ same mono voice with `--rb-space-3` margin, and bare `ul`/`ol` add
 - Transitions `0.15s`; every animation respects `prefers-reduced-motion`.
 - 4px spacing rhythm.
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). No deviations.
+
 ## Components
 
 Class prefix `rb-`; the full arcane-obsidian inventory, styled identically from

package/concrete-signal/design.md

@@ -85,6 +85,10 @@ gradient has no soft midpoint.
   respects `prefers-reduced-motion`.
 - 4px spacing rhythm (`--rb-space-1..5`).
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). No deviations.
+
 ## Components
 
 Class prefix `rb-`; shared token/class contract with the other themes (the

package/concrete-signal-light/design.md

@@ -59,6 +59,12 @@ shadows instead of blur, a hard border-weight focus change on form controls
 rationed gradient on the active-tab underline only, and `0.1s` snap
 transitions.
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). One note beyond the tested pairs:
+
+- **`--rb-accent` as bare `<a>` link text is below the 4.5:1 AA text bar** -- ~4.0:1 on `--rb-bg` and ~4.4:1 on `--rb-surface`. It clears the 3:1 non-text/focus target the test checks `--rb-accent` against (accent is contracted as a non-text element, not body text); reserve accent link text for non-essential navigation.
+
 ## Components
 
 Identical to concrete-signal — see its `design.md` for per-component notes;

package/contract.json

@@ -162,5 +162,21 @@
     "summer-cloud/button.css": ["#4a0000"],
     "rackbops-noir/rack.css": ["#0a121a", "#e7eef4", "#7d90a2", "#1e2b37"],
     "rackbops-studio/rack.css": ["#101a24", "#e7eef4", "#7d90a2", "#26333f"]
+  },
+  "contrast": {
+    "//": "WCAG contrast for the fixed token pairs, computed from each theme's tokens.css by styles/test/contrast.test.mjs (STANDARD.md 9). `min` is the ratio floor; `warnBelow` (text-faint only) diagnoses -- does not fail -- a value under AA that still clears the 3:1 non-text floor. A failing pair is fixed in the tokens or entered in `allowlist` with the design.md line documenting it.",
+    "pairs": [
+      { "fg": "text", "bg": "bg", "min": 4.5 },
+      { "fg": "text", "bg": "surface", "min": 4.5 },
+      { "fg": "text", "bg": "surface-2", "min": 4.5 },
+      { "fg": "text-soft", "bg": "bg", "min": 4.5 },
+      { "fg": "text-soft", "bg": "surface", "min": 4.5 },
+      { "fg": "accent-fg", "bg": "accent", "min": 4.5 },
+      { "fg": "accent", "bg": "bg", "min": 3.0 },
+      { "fg": "text-faint", "bg": "surface", "min": 3.0, "warnBelow": 4.5 }
+    ],
+    "allowlist": [
+      { "theme": "rackbops-studio", "fg": "accent-fg", "bg": "accent", "reason": "white on the vermillion accent fill is ~3.6:1 -- rackbops.com editorial fidelity; spent only on large/bold .rb-btn--accent and .rb-btn--primary hover text (large-text AA is 3:1), never small labels or essential body copy", "doc": "rackbops-studio/design.md:96-98" }
+    ]
   }
 }

package/luminous-precision/design.md

@@ -85,6 +85,10 @@ disc/decimal markers, not stripped).
   lean on glow. Transitions 0.3s. Respect `prefers-reduced-motion`.
 - 8px spacing rhythm; generous negative space so glows can breathe.
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). No deviations.
+
 ## Components
 
 Class prefix `rb-` (shared token/class contract with the other themes).

package/mono-field/design.md

@@ -85,6 +85,10 @@ and the accent itself is spent sparingly — never for decoration.
   respects `prefers-reduced-motion`.
 - Spacing rhythm `--rb-space-1..5` (0.25rem to 1.5rem).
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). No deviations.
+
 ## Components
 
 Class prefix `rb-`; shared token/class contract with the other themes (the

package/neon-butterfly/design.md

@@ -76,6 +76,10 @@ token stack falls back to `ui-monospace`.
 - Transitions 0.3s; hover motion is a 4px `translateX` slide on links.
 - Respect `prefers-reduced-motion`.
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). No deviations.
+
 ## Components
 
 Class prefix `rb-`. Variants use BEM-ish modifiers (`rb-btn--accent`).

package/package.json

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

package/rackbops-noir/design.md

@@ -65,6 +65,12 @@ unclassed headlines, `--rb-space-3` margin on headings/paragraphs/lists, and
   rack equaliser bars.
 - Every animation respects `prefers-reduced-motion`.
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes clear their WCAG targets, with one below-AA note the test emits as a warning (not a failure):
+
+- **`--rb-text-faint` on `--rb-surface` is ~3.8:1** -- below the 4.5:1 AA bar for normal text, above the 3:1 floor. Use it only for genuinely secondary meta (idle labels, footnotes, timestamps), never essential text; the shared `.rb-table` header uses `--rb-text-soft`, which passes.
+
 ## Components
 
 Class prefix `rb-`; the full rackbops-studio inventory, styled identically from

package/rackbops-studio/design.md

@@ -103,6 +103,11 @@ consumers can compensate rather than discover it:
   default chip, the active link/tab — sit near ~4.3:1). Reach for it where
   full-contrast UI matters.
 
+These are the ratios `styles/test/contrast.test.mjs` checks: `--rb-accent-fg` on
+`--rb-accent` (~3.6:1) is allowlisted in `contract.json`'s `contrast` block, and
+`--rb-text-faint` on `--rb-surface` (~3.2:1) is emitted as a below-AA warning;
+the remaining pairs clear their targets.
+
 ## Components
 
 Class prefix `rb-`; shared token/class contract with the other themes.

package/summer-cloud/design.md

@@ -109,6 +109,10 @@ family.
 - Spacing is strictly multiples of 8px. When in doubt, add 8.
 - Respect `prefers-reduced-motion` — every transform is dropped.
 
+## Accessibility
+
+The token pairs `styles/test/contrast.test.mjs` computes -- `--rb-text` / `--rb-text-soft` on their surfaces, `--rb-accent-fg` on `--rb-accent`, `--rb-accent` as non-text on `--rb-bg`, and `--rb-text-faint` on `--rb-surface` -- all clear their WCAG targets (4.5:1 text, 3:1 non-text; faint clears AA here too). No deviations.
+
 ## Components
 
 Class prefix `rb-` (shared across themes so `@rackbops/ui-react` stays