@rackbops/styles 0.1.0 → 0.1.2

package/mono-field/components/card.css

@@ -0,0 +1,20 @@
+/* mono-field — card
+ * White surface; the 1px hairline border does most of the definition work
+ * since surface equals bg in this theme (no color hierarchy between layers). */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-card {
+  padding: var(--rb-space-5);
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius-lg);
+  color: var(--rb-text);
+  box-shadow: var(--rb-shadow-sm);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-card > :first-child {
+  margin-top: 0;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-card > :last-child {
+  margin-bottom: 0;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-card--raised {
+  box-shadow: var(--rb-shadow-lg);
+}

package/mono-field/components/dialog.css

@@ -0,0 +1,34 @@
+/* mono-field — dialog (native <dialog>)
+ * White pane, subtle shadow, over a light blur and a lighter-than-usual scrim
+ * — quiet, not dramatic. Title stays normal case at the theme's max weight
+ * (600 — this theme's font-weight-bold ceiling). */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-dialog {
+  padding: var(--rb-space-5);
+  max-width: 32rem;
+  width: calc(100vw - 2rem);
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius-lg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(var(--rb-blur));
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-dialog__title {
+  margin: 0 0 var(--rb-space-3);
+  color: var(--rb-text);
+  font-family: var(--rb-font-display);
+  font-size: 1.25rem;
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-heading-tracking);
+  text-transform: none;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rb-space-2);
+  margin-top: var(--rb-space-5);
+}

package/mono-field/components/form.css

@@ -0,0 +1,91 @@
+/* mono-field — form controls: input, textarea, select, checkbox, radio, switch
+ * Sunken fields; focus swaps the border to accent plus a thin accent-wash
+ * ring (the wash token itself is only 6% alpha, so the ring reads as
+ * barely-there, consistent with the theme). Labels are normal case, weight
+ * 500 — no shouting. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rb-space-1);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-label {
+  color: var(--rb-text-soft);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  text-transform: none;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-input,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-textarea,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).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="mono-field"], [data-rb-style="mono-field"] *).rb-select {
+  appearance: none;
+  padding-right: 2.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a5a5a' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--rb-space-3) center;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-textarea {
+  min-height: 5rem;
+  resize: vertical;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-input::placeholder,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-textarea::placeholder {
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-input:focus-visible,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-textarea:focus-visible,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).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="mono-field"], [data-rb-style="mono-field"] *).rb-input[aria-invalid="true"],
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-textarea[aria-invalid="true"] {
+  border-color: var(--rb-danger);
+}
+
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+  cursor: pointer;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-checkbox,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-radio,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-switch {
+  accent-color: var(--rb-accent);
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-switch {
+  width: 2rem;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-checkbox:focus-visible,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-radio:focus-visible,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-switch:focus-visible {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-input,
+  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-textarea,
+  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-select {
+    transition: none;
+  }
+}

package/mono-field/components/link.css

@@ -0,0 +1,47 @@
+/* mono-field — nav link (sidebar/tree row)
+ * Hover fills to surface-2 — the one place a fill color isn't white — and a
+ * thin 2px accent bar lights the left edge on hover/active. Thin and quiet,
+ * not bold. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).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);
+  text-decoration: none;
+  font-size: var(--rb-text-sm);
+  cursor: pointer;
+  transition:
+    background var(--rb-transition),
+    color var(--rb-transition);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link:hover {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).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="mono-field"], [data-rb-style="mono-field"] *).rb-link:hover::before,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active {
+  background: var(--rb-surface-2);
+  color: var(--rb-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link {
+    transition: none;
+  }
+}

package/mono-field/components/log.css

@@ -0,0 +1,19 @@
+/* mono-field — log / terminal block
+ * Pairs with .rb-pre for the shared look (surface-sunken well, hairline
+ * border, radius, small mono) -- .rb-log itself only adds what changes for
+ * multi-line streaming output: a capped height with vertical scroll, wrapped
+ * long lines instead of .rb-pre's horizontal scroll, and a touch more
+ * line-height so dense text stays readable. Use together on one element:
+ * <pre class="rb-pre rb-log">. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-log {
+  max-height: 16rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+/* Specificity-pinned (not import-order-dependent) override of .rb-pre's
+ * overflow-x: auto -- .rb-log wraps instead of scrolling horizontally. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-pre.rb-log {
+  overflow-x: hidden;
+}

package/mono-field/components/muted.css

@@ -0,0 +1,7 @@
+/* mono-field — muted / empty-state text
+ * Faint secondary text — captions, meta, "No results yet." style empty
+ * states. No italic: this theme carries "close to zero visual flourish";
+ * faint color alone stays consistent with its quiet, unshouty voice. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-muted {
+  color: var(--rb-text-faint);
+}

package/mono-field/components/nav-rail.css

@@ -0,0 +1,14 @@
+/* mono-field — nav rail (vertical sidebar container)
+ * Flush edge chrome, not a floating card: fixed-width flex column, surface
+ * background, a hairline right edge. Composes with .rb-link for items --
+ * active/hover are entirely that component's own tokens, nothing new here. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-nav-rail {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--rb-space-1);
+  width: 14rem;
+  padding: var(--rb-space-3);
+  background: var(--rb-surface);
+  border-right: 1px solid var(--rb-border);
+}

package/mono-field/components/pre.css

@@ -0,0 +1,13 @@
+/* mono-field — command / log block
+ * Styled <pre> for shell commands or short log output: sunken well,
+ * hairline border, small mono, scrolls horizontally instead of wrapping. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-pre {
+  margin: 0;
+  padding: var(--rb-space-3) var(--rb-space-4);
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  font-family: var(--rb-font-mono);
+  font-size: var(--rb-text-sm);
+  overflow-x: auto;
+}

package/mono-field/components/progress.css

@@ -0,0 +1,42 @@
+/* mono-field — progress bar & spinner
+ * Sunken trough with a solid accent fill — no gradient here, it stays
+ * rationed to the tabs underline only. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-progress {
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--rb-surface-sunken);
+  border-radius: var(--rb-radius-pill);
+  overflow: hidden;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-progress::-webkit-progress-bar {
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-progress::-webkit-progress-value {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-progress::-moz-progress-bar {
+  background: var(--rb-accent);
+}
+
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--rb-border);
+  border-top-color: var(--rb-accent);
+  border-radius: 50%;
+  animation: rb-field-spin 0.8s linear infinite;
+}
+@keyframes rb-field-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-spinner {
+    animation-duration: 2s;
+  }
+}

package/mono-field/components/stepper.css

@@ -0,0 +1,86 @@
+/* mono-field — stepper (delivery / milestone tracker)
+ * <ol class="rb-stepper"> with one
+ * <li class="rb-stepper__step rb-stepper--complete|current|upcoming"> per
+ * milestone: a .rb-stepper__node icon/number circle + .rb-stepper__label.
+ * Each non-first step draws its OWN connector segment back to the previous
+ * step's node (right: 50%; width: 100% of that step's own flex slice, self-
+ * aligning to node centers regardless of item count or label width -- a
+ * single full-width rail can't do this without knowing how many steps there
+ * are, since node centers sit inset within their own slice). isolation:
+ * isolate keeps every segment's negative z-index scoped to this stepper, so
+ * it paints behind every node without needing per-node z-index of its own.
+ * A segment fills once its OWN step is reached (complete or current) -- the
+ * same state class already on the <li>, not a second progress mechanism. No
+ * shadow or glow anywhere in this theme -- the current node signals itself
+ * through border and weight alone. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--rb-space-2);
+  text-align: center;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  right: 50%;
+  width: 100%;
+  height: 2px;
+  background: var(--rb-surface-sunken);
+  z-index: -1;
+  transition: background-color var(--rb-transition);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid transparent;
+  border-radius: var(--rb-radius-pill);
+  background: var(--rb-surface-2);
+  color: var(--rb-text-faint);
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__node {
+  background: var(--rb-surface);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__label {
+  color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-medium);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child)::before {
+    transition: none;
+  }
+}

package/mono-field/components/table.css

@@ -0,0 +1,47 @@
+/* mono-field — table
+ * Dense data table: a faint header rule, tabular numerals, row hover to
+ * surface-2. Headers stay normal case, weight 500 — never uppercase. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-table th {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border);
+  color: var(--rb-text-faint);
+  text-align: left;
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+  text-transform: none;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).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="mono-field"], [data-rb-style="mono-field"] *).rb-table tbody tr:hover td {
+  background: var(--rb-surface-2);
+}
+/* --interactive: clickable rows (a tabindex tr, or a row-wrapping button/link) —
+ * pointer cursor plus a keyboard-equivalent of the hover wash and a focus ring. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: -2px;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-table--interactive tbody tr:focus-visible td,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-table--interactive tbody tr:has(:focus-visible) td {
+  background: var(--rb-surface-2);
+}
+/* Numeric cells take the tabular-numeral voice — prices and counts align. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-table td.rb-num,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-table th.rb-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

package/mono-field/components/tabs.css

@@ -0,0 +1,48 @@
+/* mono-field — tabs
+ * Normal-case text tabs. The active tab carries accent text and is
+ * underlined with the theme's one gradient — rationed here and nowhere else. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-2);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab {
+  position: relative;
+  padding: var(--rb-space-2) var(--rb-space-4);
+  background: transparent;
+  border: 0;
+  color: var(--rb-text-soft);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  text-transform: none;
+  cursor: pointer;
+  transition: color var(--rb-transition);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab:hover {
+  color: var(--rb-text);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab.rb-tab--active,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab[aria-selected="true"] {
+  color: var(--rb-accent);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab.rb-tab--active::after,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab[aria-selected="true"]::after {
+  content: "";
+  position: absolute;
+  left: var(--rb-space-3);
+  right: var(--rb-space-3);
+  bottom: -1px;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: var(--rb-accent-grad);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tabpanel {
+  padding: var(--rb-space-4) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab {
+    transition: none;
+  }
+}

package/mono-field/design.md

@@ -0,0 +1,151 @@
+# mono-field
+
+The library's deliberately restrained theme — a quiet foil to the glow,
+gradient, and neon themes elsewhere in the roster. Near-flat grayscale
+surfaces carry close to zero visual flourish: hierarchy comes from thin 1px
+hairline borders and generous spacing rather than color contrast between
+surface layers, shadows are barely perceptible, there is no glass and no
+glow, and type stays small, tight, and system-ui with no uppercase tricks
+anywhere — no shouty labels, everything stays normal sentence/title case. The
+accent is a near-black ink-blue rather than any saturated hue — just enough
+to be findable as "the interactive color" without ever reading as
+decoration. This is a **standalone** theme: it ships no light/dark pair and
+has no ported or reverse-documented source — it is purpose-built directly to
+the library's `--rb-*` contract.
+
+## Color
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#ffffff` | Page canvas |
+| Surface | `#ffffff` | Cards, dialogs, default buttons — same as bg |
+| Surface 2 | `#f7f7f7` | Link/row hover, the alert panel — the one non-white fill |
+| Surface sunken | `#f0f0f0` | Inset fields, progress trough |
+| Text | `#111111` | Body text |
+| Text soft | `#5a5a5a` | Secondary text, labels |
+| Text faint | `#6b6b6b` | Meta, table headers |
+| Border | `#e0e0e0` | Resting hairline borders |
+| Border strong | `#c4c4c4` | Hover/emphasis borders |
+| Accent | `#1d2733` (near-black ink-blue) | The sole interactive color: buttons, focus, active state |
+| Accent fg | `#ffffff` | White ink on the solid accent fill |
+| Accent wash | `rgba(29,39,51,.06)` | Focus ring — deliberately barely-there |
+| Info | `#4a6fa5` | Informational chips (desaturated vs. the rest of the roster; 4.77:1 on surface-2) |
+| Success | `#3f7d4f` | Positive status (desaturated; 4.60:1 on surface-2) |
+| Warning | `#91681b` | Caution status (desaturated; darkened from `#a9791f`, 3.60:1, to 4.67:1 on surface-2) |
+| Danger | `#a13a3a` | Destructive/error (desaturated; 6.16:1 on surface-2) |
+
+**Rules.** Visual hierarchy comes from thin 1px hairline borders and spacing,
+not from color contrast between surface layers — `--rb-surface` equals
+`--rb-bg`, and `--rb-surface-2` is spent in exactly two places (link/row
+hover, the alert panel). Even the required semantic status colors are
+desaturated compared to how other themes in the library render them, to keep
+this theme's voice consistently quiet. Colour beyond the accent is earned,
+and the accent itself is spent sparingly — never for decoration.
+
+## Typography
+
+- **Display & body:** the system-ui stack
+  (`system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`)
+  for both — there is no separate display voice.
+- **Mono:** `ui-monospace, "Cascadia Code", …` reserved for the `--rb-font-mono`
+  token; the baseline component set doesn't render code.
+- **Weight:** 400 body, 500 medium (labels, buttons, badges, table headers),
+  600 bold — this theme never goes past 600; there is no true bold-800 weight
+  anywhere, part of the quiet voice.
+- **Case:** normal sentence/title case everywhere. Buttons, badges, labels,
+  and table headers are never uppercase — unusual among the library's themes,
+  but consistent with this one's no-shouting rule.
+- **Size & tracking:** small and tight — `--rb-text-sm` is 13px,
+  `--rb-heading-tracking` is `-0.005em`, `--rb-label-tracking` is `0.02em`.
+- **Bare tags:** unclassed `h1`-`h6` pick up the same system-ui voice as the
+  body (weight 600, tracking `-0.005em`, `--rb-space-3` margin below,
+  relaxed `line-height: 1.3` — quiet, not tight). Bare `p` shares that
+  margin; bare `ul`/`ol` add it too, with `--rb-space-4` marker indent (real
+  disc/decimal markers, not stripped).
+
+## Shape & effects
+
+- Radius `0.25rem` for buttons, inputs, and alerts; `0.375rem` for cards and
+  dialogs; pills for badges and the progress trough.
+- Shadows are barely perceptible (`--rb-shadow-sm` resting, `--rb-shadow-lg`
+  for raised cards, dialogs, and the primary button's hover state) — no
+  glass, no glow, anywhere in this theme.
+- Focus is a plain 2px accent outline on buttons and choice controls; form
+  fields instead swap their border to accent and add a thin accent-wash ring
+  (the wash token itself is only 6% alpha, so the ring reads as barely-there,
+  consistent with the theme). Nav-link rows (`.rb-link`) don't carry a
+  themed focus style — matching this library's existing baseline (e.g.
+  arcane-obsidian) — so keyboard focus there falls back to the browser's
+  default outline.
+- The **one gradient** (`--rb-accent-grad`, a subtle two-stop near-grayscale
+  ramp) is rationed to exactly one place: the active-tab underline. It
+  appears nowhere else — primary buttons stay a solid accent fill, never the
+  gradient.
+- Transitions `0.12s` — quick, not showy. Every transition and animation
+  respects `prefers-reduced-motion`.
+- Spacing rhythm `--rb-space-1..5` (0.25rem to 1.5rem).
+
+## Components
+
+Class prefix `rb-`; shared token/class contract with the other themes. Only
+the baseline ten — no theme extras.
+
+- **Button** `.rb-btn` — plain bordered ghost on white by default;
+  `--primary` is the one solid accent fill (barely-there shadow lift on
+  hover, no transform, no lift); `--accent` an accent-wash chip; `--danger` a
+  danger-colored ghost; `--ghost` chromeless. `--sm` is a compact size for
+  inline and table-row actions. `.rb-icon-btn` is a square icon-only hit
+  target (>=2rem), paired with `.rb-btn`.
+- **Card** `.rb-card` (+ `--raised`) — white panel; the hairline border does
+  most of the definition work since surface equals bg.
+- **NavLink** `.rb-link` — sidebar/tree row; hover fills to surface-2 (the
+  one non-white fill besides the alert) and lights a thin 2px accent bar on
+  the left edge on hover/active.
+- **Nav rail** `.rb-nav-rail` — the sidebar container: 14rem fixed-width flex
+  column, surface background, a hairline right edge. Composes with `.rb-link`
+  for items; introduces no active-state convention of its own.
+- **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 plus a barely-there wash
+  ring; labels are normal case, weight 500.
+- **Badge** `.rb-badge` — pill, normal case (unusual for a badge, but matches
+  this theme's no-shouting rule), weight 500, a 12%-alpha tint of its hue
+  behind full-strength (but desaturated) text.
+- **Alert** `.rb-alert` — surface-2 panel, a rare use of the theme's one
+  non-white surface so a flagged message reads as such; a thin 2px semantic
+  left bar (not a bold 3-6px bar).
+- **Dialog** `.rb-dialog` — native `<dialog>`, white pane, subtle shadow, a
+  light blurred backdrop over a lighter-than-usual `rgba(0,0,0,.3)` scrim,
+  normal-case weight-600 title.
+- **Tabs** `.rb-tabs` / `.rb-tab` / `.rb-tabpanel` — normal-case text tabs;
+  the active tab is accent-colored and underlined with the theme's one
+  rationed gradient.
+- **Table** `.rb-table` (+ `.rb-num`) — faint header rule, tabular numerals,
+  row hover to surface-2, normal-case weight-500 headers (never uppercase).
+  `--interactive` marks clickable rows: pointer cursor, plus a focus-visible
+  ring (and the surface-2 wash) for a `tabindex` row or a row-wrapping
+  button/link.
+- **Progress / Spinner** `.rb-progress` / `.rb-spinner` — sunken
+  trough, solid accent fill (no gradient here — that stays rationed to tabs
+  only).
+- **Stepper** `.rb-stepper` (+ `__step` / `__node` / `__label`, `--complete` /
+  `--current` / `--upcoming`) — a milestone rail: complete nodes solid accent
+  with a checkmark, current a white-on-accent-border ring (no shadow or glow
+  anywhere in this theme — the ring and weight alone signal it), upcoming
+  faint surface-2. Rail track is `surface-sunken`; each connector segment
+  fills to accent once its own step is reached (complete or current), so
+  the rail can't drift out of sync with the step states.
+- **Muted text** `.rb-muted` — faint secondary/empty-state text;
+  `color: var(--rb-text-faint)` only, no italic — this theme's "close to zero
+  visual flourish" rule rules out a decorative slant too.
+- **Pre / log block** `.rb-pre` — command/log `<pre>`; sunken background,
+  hairline border, radius, small mono, horizontal scroll. Pair with `.rb-log`
+  (`<pre class="rb-pre rb-log">`) for multi-line streaming output: a capped
+  16rem height with vertical scroll, wrapped lines instead of horizontal
+  scroll, and roomier line-height for dense text.
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="mono-field"` (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/mono-field/index.css

@@ -0,0 +1,18 @@
+/* mono-field — full theme entry point */
+@import "./tokens.css";
+@import "./base.css";
+@import "./components/alert.css";
+@import "./components/badge.css";
+@import "./components/button.css";
+@import "./components/card.css";
+@import "./components/dialog.css";
+@import "./components/form.css";
+@import "./components/link.css";
+@import "./components/nav-rail.css";
+@import "./components/progress.css";
+@import "./components/stepper.css";
+@import "./components/table.css";
+@import "./components/tabs.css";
+@import "./components/muted.css";
+@import "./components/pre.css";
+@import "./components/log.css";