@rackbops/styles 0.1.0

package/arcane-obsidian/design.md

@@ -0,0 +1,133 @@
+# arcane-obsidian
+
+The design language of **artifact-console** — "Arcane Obsidian". A dark-primary
+developer console: deep obsidian foundation, tonal indigo surfaces, and a single
+brand voice — arcane-violet — used functionally, never for decoration. Depth is
+luminance-first (tonal layers + a restrained shadow ramp), not glass or glow;
+glass is reserved for the live interactive shell and never used on static report
+pages. The display voice is monospace — the gradient-clipped wordmark and mono
+labels give it a commanding developer-console feel — over a `system-ui` body,
+with tabular numerals so counts, ages, and sizes align in a column. Dark
+("Obsidian") is the primary look; an AA-tuned light counterpart ("Parchment") is
+documented at the end. Derived from artifact-console#31.
+
+## Color
+
+Values are the dark ("Obsidian") scheme; the light ("Parchment") counterpart is
+tabled at the end. Palette parity with `artifact-console/static/style.css` and
+`report_theme.py`.
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#0c0f14` (deep obsidian) | Page canvas |
+| Surface | `#141922` (indigo) | Cards, header, panels |
+| Surface 2 | `#1c2331` | Raised/hover surface, active tab wash base |
+| Surface sunken | `#080b10` | Inset fields, log wells, progress troughs |
+| Text | `#eceff4` | Body text |
+| Text soft | `#a6b0c0` | Secondary text |
+| Text faint | `#8290a6` | Labels, table headers, meta |
+| Border | `#232c39` | Resting hairline borders |
+| Border strong | `#33404f` | Dialog edges, header rules |
+| Accent | `#8b7cf6` (arcane-violet) | The sole brand voice: emphasis, active state, focus |
+| Accent fg | `#0c0f14` | Dark ink on the solid violet fill (keeps AA) |
+| Accent wash | `rgba(139,124,246,.16)` | Active/hover tint behind accent text |
+| Info | `#4c9df0` | Informational chips |
+| Success | `#43c97e` | Healthy/live status |
+| Warning | `#f2a93b` | Caution status |
+| Danger | `#f0616d` | Destructive actions, errors |
+
+**Rules.** Colour is functional. Resting UI is obsidian, indigo, and faint;
+violet appears only on interaction, focus, active state, and emphasis. Colour
+beyond the accent is *earned* — severity and status chips are the one place other
+hues appear. The dark resting palette never uses pure white or pure black.
+Muted-on-surface is tuned to clear WCAG AA (4.5:1) on every surface; the light
+"Parchment" counterpart tabled below does use `#ffffff` for its raised surface.
+
+## Typography
+
+- **Display / wordmark:** the mono stack (`ui-monospace, "Cascadia Code", …`),
+  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`.
+
+## Shape & effects
+
+- Radius `0.4375rem` (7px) for buttons, inputs, and rows; `0.75rem` (12px) for
+  cards and dialogs; pills reserved for chips/badges and progress troughs.
+- Depth is luminance-first: tonal surface layers do most of the work, with a
+  two-step shadow ramp (`--rb-shadow-sm` resting, `--rb-shadow-lg` for dialogs
+  and raised cards). No glow on resting UI.
+- Focus is the accent: inputs swap their border for a violet line plus a soft
+  `--rb-accent-wash` ring; interactive elements take a 2px accent outline.
+- The **one gradient** (`--rb-accent-grad`, violet → orchid → gold) is rationed
+  to exactly two places: the wordmark and the active-tab underline. Primary
+  buttons stay a solid AA-safe accent fill — never the gradient.
+- Transitions `0.15s`. Every animation and transition respects
+  `prefers-reduced-motion`.
+- 4px spacing rhythm (`--rb-space-1..5`).
+
+## Components
+
+Class prefix `rb-`; shared token/class contract with the other themes.
+
+- **Wordmark** `.rb-wordmark` (+ `__spark`) — mono h1 with the gradient clipped
+  into the text; the spark mark stays solid accent.
+- **Button** `.rb-btn` — surface-2 ghost by default; `--primary` is the one solid
+  violet fill (dark ink), `--accent` a violet-wash chip, `--danger` a rose ghost,
+  `--ghost` chromeless.
+- **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.
+- **Form** `.rb-input` / `.rb-textarea` / `.rb-select` / `.rb-label` / `.rb-field`
+  / `.rb-choice` / `.rb-checkbox` / `.rb-radio` / `.rb-switch` — sunken fields;
+  focus swaps to the accent border + wash ring; controls use `accent-color`.
+- **Badge** `.rb-badge` — mono uppercase pill: a 16% tint of its hue behind
+  full-strength text (semantic modifiers `--info/--success/--warning/--danger`).
+- **Alert** `.rb-alert` — surface panel, 3px left bar carries the semantic colour.
+- **Dialog** `.rb-dialog` — native `<dialog>`, obsidian pane, blurred backdrop,
+  mono title.
+- **Tabs** `.rb-tabs` / `.rb-tab` / `.rb-tabpanel` — text tabs; the active tab is
+  accent, underlined with the rationed gradient.
+- **Tabstrip** `.rb-tabstrip` — top-level view nav: bordered pill buttons; active
+  gets accent text + wash + accent-tinted border.
+- **Table** `.rb-table` (+ `.rb-num`) — dense data table, faint header rule,
+  tabular numerals, row hover to surface-2.
+- **Progress / Spinner** `.rb-progress` / `.rb-spinner` — sunken trough with an
+  accent fill; the spinner is a single accent arc.
+- **Eyebrow** `.rb-eyebrow` — small mono uppercase section label in the accent,
+  wide-tracked; subtler than the studio eyebrow (no leading rule).
+
+## Code syntax
+
+Tokens `--rb-code-*` (a per-theme extra, since only this theme renders code):
+violet keywords, green strings, gold numbers, info-blue functions, light-violet
+types, soft-rose variables, dimmed comments, faint meta — the palette's own
+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.
+
+| Role | Value |
+| --- | --- |
+| Background | `#f6f7f9` |
+| Surface | `#ffffff` |
+| Surface 2 | `#f1f3f7` |
+| Surface sunken | `#edeff3` |
+| Text | `#191d26` |
+| Text soft | `#4a5261` |
+| Text faint | `#5f6b7d` (a touch darker than report's `#7c8598` so muted-on-surface clears AA) |
+| Border | `#e2e6ec` |
+| Border strong | `#cbd2dc` |
+| Accent | `#6a4fe0` |
+| Accent fg | `#ffffff` |
+| Gradient | `linear-gradient(120deg,#6a4fe0,#a25be0 46%,#d99a2a)` |
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="arcane-obsidian"` (self or ancestor),
+wrapped in zero-specificity `:where()`. Set the attribute on `<html>` for a page
+or on a container for an embedded island.

package/arcane-obsidian/index.css

@@ -0,0 +1,16 @@
+/* arcane-obsidian — full theme entry point */
+@import "./tokens.css";
+@import "./base.css";
+@import "./components/button.css";
+@import "./components/card.css";
+@import "./components/link.css";
+@import "./components/form.css";
+@import "./components/badge.css";
+@import "./components/alert.css";
+@import "./components/dialog.css";
+@import "./components/tabs.css";
+@import "./components/table.css";
+@import "./components/progress.css";
+@import "./components/eyebrow.css";
+@import "./components/wordmark.css";
+@import "./components/tabstrip.css";

package/arcane-obsidian/tokens.css

@@ -0,0 +1,81 @@
+/* arcane-obsidian — design tokens
+ * Reverse-documented from artifact-console's "Arcane Obsidian" theme
+ * (artifact-console/static/style.css + report_theme.py). Consume via:
+ *   @import "@rackbops/styles/arcane-obsidian/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-rb-style="arcane-obsidian"
+ * — set it on <html> for a page, or on any container for an embedded island.
+ * The :where() keeps specificity at zero, so any consumer rule overrides.
+ *
+ * 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.
+ */
+:where([data-rb-style="arcane-obsidian"]) {
+  color-scheme: dark;
+
+  /* color — deep obsidian foundation, tonal indigo surfaces */
+  --rb-bg: #0c0f14;
+  --rb-surface: #141922;
+  --rb-surface-2: #1c2331;
+  --rb-surface-sunken: #080b10; /* inset fields, log wells */
+  --rb-text: #eceff4;
+  --rb-text-soft: #a6b0c0;
+  --rb-text-faint: #8290a6;
+  --rb-border: #232c39;
+  --rb-border-strong: #33404f;
+
+  /* accent — arcane-violet is the sole brand voice */
+  --rb-accent: #8b7cf6;
+  --rb-accent-fg: #0c0f14; /* dark ink on the light-violet solid fill (AA) */
+  --rb-accent-wash: rgba(139, 124, 246, 0.16);
+
+  /* the ONE gradient — rationed to wordmark + active tab only */
+  --rb-accent-grad: linear-gradient(120deg, #8b7cf6, #c48bff 46%, #f5c15a);
+
+  /* semantic — colour beyond the accent is earned: severity/status only */
+  --rb-info: #4c9df0;
+  --rb-success: #43c97e;
+  --rb-warning: #f2a93b;
+  --rb-danger: #f0616d;
+
+  /* code syntax (extra) — palette-derived; only this theme renders code */
+  --rb-code-keyword: #8b7cf6;
+  --rb-code-string: #43c97e;
+  --rb-code-number: #f5c15a;
+  --rb-code-comment: #6b7688;
+  --rb-code-function: #4c9df0;
+  --rb-code-variable: #f0879b;
+  --rb-code-type: #c48bff;
+  --rb-code-meta: #8290a6;
+
+  /* typography — monospace display voice over a system-ui body; tabular numerals */
+  --rb-font-display: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
+  --rb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --rb-font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
+  --rb-font-weight: 400;
+  --rb-font-weight-medium: 600;
+  --rb-font-weight-bold: 700;
+  --rb-heading-tracking: -0.01em;
+  --rb-label-tracking: 0.06em;
+  --rb-text-sm: 13px;
+
+  /* shape & effects — luminance-first depth, compact console radii */
+  --rb-radius: 0.4375rem; /* 7px — buttons, inputs, rows */
+  --rb-radius-lg: 0.75rem; /* 12px — cards, dialogs */
+  --rb-radius-pill: 999px;
+  --rb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
+  --rb-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
+  --rb-blur: 12px; /* glass is reserved for the interactive shell */
+  --rb-transition: 0.15s;
+
+  /* spacing — 4px rhythm */
+  --rb-space-1: 0.25rem;
+  --rb-space-2: 0.5rem;
+  --rb-space-3: 0.75rem;
+  --rb-space-4: 1rem;
+  --rb-space-5: 1.5rem;
+}

package/arcane-parchment/base.css

@@ -0,0 +1,46 @@
+/* arcane-parchment — base styles
+ * Scoped defaults. Requires tokens.css. Fonts are system stacks (system-ui +
+ * ui-monospace) — nothing to load; the console renders offline.
+ *
+ * The element carrying data-rb-style is the theme's canvas: it gets the
+ * background, text color, and body font — whether that is <html> for a page
+ * or a mount container for an embedded island. Page-only rules (body margin,
+ * viewport height) apply only when the attribute sits on <html>.
+ */
+:where([data-rb-style="arcane-parchment"]) {
+  background-color: var(--rb-bg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+  font-variant-numeric: tabular-nums; /* counts/ages/sizes align in a column */
+}
+
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *),
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *)::before,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *)::after {
+  box-sizing: border-box;
+}
+
+:where(html[data-rb-style="arcane-parchment"]) body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: var(--rb-bg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *):where(a) {
+  color: var(--rb-accent);
+}
+
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *):where(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *)::selection {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}

package/arcane-parchment/components/alert.css

@@ -0,0 +1,28 @@
+/* arcane-parchment — alert
+ * A surface panel with a 3px left bar carrying the semantic colour. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-alert {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rb-space-1);
+  padding: var(--rb-space-3) var(--rb-space-4);
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-left: 3px solid var(--rb-accent);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-alert__title {
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-alert--info {
+  border-left-color: var(--rb-info);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-alert--success {
+  border-left-color: var(--rb-success);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-alert--warning {
+  border-left-color: var(--rb-warning);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-alert--danger {
+  border-left-color: var(--rb-danger);
+}

package/arcane-parchment/components/badge.css

@@ -0,0 +1,33 @@
+/* arcane-parchment — badge / status chip
+ * A pill: a faint tint of its hue behind full-strength text. Severity and
+ * status are the one place colour beyond the accent is earned. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-1);
+  padding: 2px var(--rb-space-2);
+  border-radius: var(--rb-radius-pill);
+  font-family: var(--rb-font-mono);
+  font-size: 11px;
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+  text-transform: uppercase;
+  background: var(--rb-accent-wash);
+  color: var(--rb-accent);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-badge--info {
+  background: color-mix(in srgb, var(--rb-info) 16%, transparent);
+  color: var(--rb-info);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-badge--success {
+  background: color-mix(in srgb, var(--rb-success) 16%, transparent);
+  color: var(--rb-success);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-badge--warning {
+  background: color-mix(in srgb, var(--rb-warning) 16%, transparent);
+  color: var(--rb-warning);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-badge--danger {
+  background: color-mix(in srgb, var(--rb-danger) 16%, transparent);
+  color: var(--rb-danger);
+}

package/arcane-parchment/components/button.css

@@ -0,0 +1,75 @@
+/* arcane-parchment — button
+ * Ghost by default; --primary is the one solid accent fill (--accent-fg text).
+ * Flat depth: no glow, no drop shadow on resting UI. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-2) var(--rb-space-4);
+  background: var(--rb-surface-2);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color var(--rb-transition),
+    background var(--rb-transition),
+    color var(--rb-transition);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn:hover,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn:focus-visible {
+  border-color: var(--rb-accent);
+  outline: none;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary {
+  background: var(--rb-accent);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary:hover,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary:focus-visible {
+  /* Darken the fill on a light ground (mix toward --rb-text) so the white label
+     stays AA — lightening it, as the dark sibling does, would drop it to 4.37:1. */
+  background: color-mix(in srgb, var(--rb-accent), var(--rb-text) 12%);
+  border-color: color-mix(in srgb, var(--rb-accent), var(--rb-text) 12%);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--accent {
+  background: var(--rb-accent-wash);
+  border-color: color-mix(in srgb, var(--rb-accent) 40%, var(--rb-border));
+  color: var(--rb-accent);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--danger {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
+  color: var(--rb-danger);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--danger:hover,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--danger:focus-visible {
+  border-color: var(--rb-danger);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--rb-text-soft);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--ghost:hover,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--ghost:focus-visible {
+  background: var(--rb-surface-2);
+  border-color: var(--rb-border);
+  color: var(--rb-text);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn {
+    transition: none;
+  }
+}

package/arcane-parchment/components/card.css

@@ -0,0 +1,14 @@
+/* arcane-parchment — card
+ * Solid raised panel, hairline border, shadow-based elevation (no glass). */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-card {
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius-lg);
+  padding: var(--rb-space-5);
+  color: var(--rb-text);
+  box-shadow: var(--rb-shadow-sm);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-card--raised {
+  background: var(--rb-surface-2);
+  box-shadow: var(--rb-shadow-lg);
+}

package/arcane-parchment/components/dialog.css

@@ -0,0 +1,31 @@
+/* arcane-parchment — dialog
+ * Native <dialog>: a raised surface pane over a blurred backdrop. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-dialog {
+  padding: 0;
+  border: 1px solid var(--rb-border-strong);
+  border-radius: var(--rb-radius-lg);
+  background: var(--rb-surface);
+  color: var(--rb-text);
+  box-shadow: var(--rb-shadow-lg);
+  max-width: min(92vw, 34rem);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-dialog::backdrop {
+  background: rgba(8, 11, 16, 0.6);
+  backdrop-filter: blur(var(--rb-blur));
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-dialog__body {
+  padding: var(--rb-space-5);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-dialog__title {
+  margin: 0 0 var(--rb-space-3);
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-heading-tracking);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-3) var(--rb-space-5);
+  border-top: 1px solid var(--rb-border);
+}

package/arcane-parchment/components/eyebrow.css

@@ -0,0 +1,12 @@
+/* arcane-parchment — eyebrow (section / kicker label)
+ * Small mono uppercase label in the accent, wide-tracked. Subtler than the
+ * studio eyebrow: no leading rule, this is a data console. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-eyebrow {
+  display: inline-block;
+  font-family: var(--rb-font-mono);
+  font-size: 11px;
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+  text-transform: uppercase;
+  color: var(--rb-accent);
+}

package/arcane-parchment/components/form.css

@@ -0,0 +1,70 @@
+/* arcane-parchment — form controls
+ * Sunken fields on the surface; focus swaps the border for the accent
+ * plus a faint accent ring. checked/accent states use the accent, not glow. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rb-space-1);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-label {
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+  color: var(--rb-text-soft);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-input,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-textarea,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-select {
+  width: 100%;
+  padding: var(--rb-space-2) var(--rb-space-3);
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-size: var(--rb-text-sm);
+  transition:
+    border-color var(--rb-transition),
+    box-shadow var(--rb-transition);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-textarea {
+  min-height: 5rem;
+  resize: vertical;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-input:focus-visible,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-textarea:focus-visible,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-select:focus-visible {
+  outline: none;
+  border-color: var(--rb-accent);
+  box-shadow: 0 0 0 3px var(--rb-accent-wash);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-input::placeholder,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-textarea::placeholder {
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text);
+  cursor: pointer;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-checkbox,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-radio,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-switch {
+  accent-color: var(--rb-accent);
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-switch {
+  width: 2rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-input,
+  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-textarea,
+  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-select {
+    transition: none;
+  }
+}

package/arcane-parchment/components/link.css

@@ -0,0 +1,46 @@
+/* arcane-parchment — nav link (tree/sidebar row)
+ * A list row; hover fills to surface-2 and lights a 2px accent bar on the left
+ * edge; active carries a faint accent wash. Mirrors the console's tree rows. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background var(--rb-transition),
+    color var(--rb-transition);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link:hover {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 6px;
+  bottom: 6px;
+  width: 2px;
+  border-radius: 2px;
+  background: transparent;
+  transition: background var(--rb-transition);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link:hover::before,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link.rb-link--active::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link.rb-link--active {
+  background: var(--rb-accent-wash);
+  color: var(--rb-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link {
+    transition: none;
+  }
+}

package/arcane-parchment/components/progress.css

@@ -0,0 +1,40 @@
+/* arcane-parchment — progress + spinner
+ * A sunken trough with an accent fill; the spinner is a single accent arc. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-progress {
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border: 0;
+  border-radius: var(--rb-radius-pill);
+  overflow: hidden;
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-progress::-webkit-progress-bar {
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-progress::-webkit-progress-value {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-progress::-moz-progress-bar {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-spinner {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--rb-border-strong);
+  border-top-color: var(--rb-accent);
+  border-radius: 50%;
+  animation: rb-parchment-spin 0.7s linear infinite;
+}
+@keyframes rb-parchment-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-spinner {
+    animation-duration: 2s;
+  }
+}

package/arcane-parchment/components/table.css

@@ -0,0 +1,27 @@
+/* arcane-parchment — table
+ * Dense data table: a header rule, tabular numerals, row hover to surface-2. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--rb-text-sm);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table th {
+  text-align: left;
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border-strong);
+  color: var(--rb-text-faint);
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table td {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border);
+  color: var(--rb-text);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table tbody tr:hover td {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table .rb-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}