@rackbops/styles 0.1.0 → 0.1.2

package/luminous-precision/base.css

@@ -43,9 +43,21 @@
 }
 
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *):where(h1, h2, h3, h4, h5, h6) {
+  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);
+  line-height: 1.15;
+  text-wrap: balance;
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *):where(p) {
+  margin: 0 0 var(--rb-space-3);
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *):where(ul, ol) {
+  margin: 0 0 var(--rb-space-3);
+  padding-inline-start: var(--rb-space-4);
 }
 
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *):where(a) {

package/luminous-precision/components/button.css

@@ -19,6 +19,21 @@
     color var(--rb-transition),
     box-shadow var(--rb-transition);
 }
+/* --sm: compact size for inline/table-row actions (composes with any variant) */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--sm {
+  padding: var(--rb-space-1) var(--rb-space-2);
+  font-size: calc(var(--rb-text-sm) - 1px);
+}
+/* --icon: square icon-only hit target (>=2rem); pair with .rb-btn (+ an
+ * optional color variant) — inherits color/border/hover/focus from it. */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-icon-btn {
+  padding: var(--rb-space-2);
+  min-width: 2rem;
+  min-height: 2rem;
+  gap: 0;
+  justify-content: center;
+  line-height: 1;
+}
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:focus-visible {
   border-color: var(--rb-accent-border);
@@ -61,6 +76,16 @@
   color: var(--rb-danger);
 }
 
+/* ghost: minimal-emphasis variant — no border until hover reveals a surface fill */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--ghost {
+  border-color: transparent;
+  color: var(--rb-text-soft);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--ghost:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--ghost:focus-visible {
+  background: var(--rb-surface-2);
+}
+
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;

package/luminous-precision/components/link.css

@@ -28,6 +28,14 @@
     inset 2px 0 0 0 var(--rb-accent-2),
     0 0 12px var(--rb-accent-2-glow);
 }
+/* --active: the current route, styled as the resting version of :hover */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link--active {
+  background: var(--rb-surface);
+  color: var(--rb-accent-2);
+  box-shadow:
+    inset 2px 0 0 0 var(--rb-accent-2),
+    0 0 12px var(--rb-accent-2-glow);
+}
 
 @keyframes rb-lp-pulse-glow {
   0%,

package/luminous-precision/components/log.css

@@ -0,0 +1,19 @@
+/* luminous-precision — 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="luminous-precision"], [data-rb-style="luminous-precision"] *).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="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-pre.rb-log {
+  overflow-x: hidden;
+}

package/luminous-precision/components/muted.css

@@ -0,0 +1,7 @@
+/* luminous-precision — muted / empty-state text
+ * Faint secondary text — captions, meta, "No results yet." style empty
+ * states. Italic distinguishes it from regular body copy at a glance. */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-muted {
+  color: var(--rb-text-faint);
+  font-style: italic;
+}

package/luminous-precision/components/nav-rail.css

@@ -0,0 +1,17 @@
+/* luminous-precision — nav rail (vertical sidebar container)
+ * Flush edge chrome, not a floating card: fixed-width flex column, the same
+ * glass panel + blur as .rb-card, 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="luminous-precision"], [data-rb-style="luminous-precision"] *).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-glass);
+  border-right: 1px solid var(--rb-border);
+  backdrop-filter: blur(var(--rb-blur));
+  -webkit-backdrop-filter: blur(var(--rb-blur));
+}

package/luminous-precision/components/pre.css

@@ -0,0 +1,14 @@
+/* luminous-precision — command / log block
+ * Styled <pre> for shell commands or short log output: the surface-sunken
+ * well (already the theme's documented "log wells" token), hairline border,
+ * small mono, scrolls horizontally instead of wrapping. */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).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/luminous-precision/components/progress.css

@@ -1,5 +1,6 @@
 /* luminous-precision — progress bar & spinner */
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress {
+  appearance: none;
   display: block;
   width: 100%;
   height: 0.5rem;
@@ -8,14 +9,22 @@
   border-radius: 1rem;
   overflow: hidden;
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress__bar {
-  height: 100%;
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress::-webkit-progress-bar {
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress::-webkit-progress-value {
   background: var(--rb-accent);
   box-shadow: 0 0 8px var(--rb-accent-glow);
-  border-radius: 1rem;
-  transition: width var(--rb-transition);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress__bar--accent {
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress::-moz-progress-bar {
+  background: var(--rb-accent);
+  box-shadow: 0 0 8px var(--rb-accent-glow);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress--accent::-webkit-progress-value {
+  background: var(--rb-accent-2);
+  box-shadow: 0 0 8px var(--rb-accent-2-glow);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress--accent::-moz-progress-bar {
   background: var(--rb-accent-2);
   box-shadow: 0 0 8px var(--rb-accent-2-glow);
 }

package/luminous-precision/components/stepper.css

@@ -0,0 +1,89 @@
+/* luminous-precision — 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.
+ * Elevation here is glow, not shadow: a filled segment and the current node
+ * both take the same accent-glow box-shadow .rb-progress's value fill already
+ * uses. */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).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="luminous-precision"], [data-rb-style="luminous-precision"] *).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), box-shadow var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+  box-shadow: 0 0 8px var(--rb-accent-glow);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).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="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--current .rb-stepper__node {
+  background: var(--rb-surface);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+  box-shadow: 0 0 8px var(--rb-accent-glow);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).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="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step:not(:first-child)::before {
+    transition: none;
+  }
+}

package/luminous-precision/components/table.css

@@ -19,6 +19,10 @@
   padding: var(--rb-space-2) var(--rb-space-3);
   border-bottom: 1px solid var(--rb-border);
 }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-table .rb-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-table tbody tr {
   transition: background var(--rb-transition), box-shadow var(--rb-transition);
 }
@@ -26,3 +30,16 @@
   background: var(--rb-surface-glass);
   box-shadow: inset 2px 0 0 0 var(--rb-accent-2);
 }
+/* --interactive: clickable rows (a tabindex tr, or a row-wrapping button/link) —
+ * pointer cursor plus a keyboard-equivalent of the hover glass/teal-bar and a
+ * focus ring. */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: -2px;
+  background: var(--rb-surface-glass);
+  box-shadow: inset 2px 0 0 0 var(--rb-accent-2);
+}

package/luminous-precision/design.md

@@ -66,6 +66,11 @@ Webfonts are declared in `styles/manifest.json` (`luminous-precision.fonts`);
 consumers load that stylesheet (Sora + JetBrains Mono) or self-host. The token
 stacks fall back to system families when the webfonts are absent.
 
+Bare (unclassed) `h1`-`h6` carry the Sora display voice directly — weight 600,
+`--rb-heading-tracking`, `--rb-space-3` margin below. 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.5rem` for buttons and inputs; `1rem` for cards, dialogs, and large
@@ -86,9 +91,18 @@ Class prefix `rb-` (shared token/class contract with the other themes).
 
 - **Card** `.rb-card` — glass pane, 1rem radius, lit top edge.
 - **NavLink** `.rb-link` — glass list row; hover shifts to solid indigo and
-  lights a 2px teal bar on the left edge.
-- **Button** `.rb-btn` — ghost by default; `--primary` is the one solid fill
-  (orchid, dark text), `--accent` teal ghost, `--danger` rose ghost.
+  lights a 2px teal bar on the left edge; `--active` applies that same
+  treatment at rest, for the current route.
+- **Nav rail** `.rb-nav-rail` — the sidebar container: 14rem fixed-width flex
+  column, the same glass panel + blur as `.rb-card`, a hairline right edge.
+  Composes with `.rb-link` for items; introduces no active-state convention
+  of its own.
+- **Button** `.rb-btn` — border-only by default (already reads ghost-like);
+  `--primary` is the one solid fill (orchid, dark text), `--accent` teal
+  ghost, `--danger` rose ghost, `--ghost` drops the border entirely until
+  hover reveals a surface fill — the lowest-emphasis tier. `--sm` is
+  the compact size for inline and table-row actions. `.rb-icon-btn` is a
+  square icon-only hit target (>=2rem), paired with `.rb-btn`.
 - **Form** `.rb-input`, `.rb-textarea`, `.rb-select`, `.rb-label`,
   `.rb-field`, `.rb-checkbox`, `.rb-radio`, `.rb-switch`, `.rb-choice` —
   checked/focus states glow teal.
@@ -99,16 +113,37 @@ Class prefix `rb-` (shared token/class contract with the other themes).
   Sora title, blurred obsidian backdrop.
 - **Tabs** `.rb-tabs`/`.rb-tab`/`.rb-tabpanel` — active tab underlined in
   teal with text glow.
-- **Table** `.rb-table` — lit header rule; row hover shifts glass and lights
-  the teal left bar.
+- **Table** `.rb-table` (+ `.rb-num`) — lit header rule; row hover shifts glass and lights
+  the teal left bar. `--interactive` marks clickable rows: pointer cursor,
+  plus a focus-visible ring (and the same glass/teal-bar wash) for a
+  `tabindex` row or a row-wrapping button/link.
 - **Progress** `.rb-progress`, **Spinner** `.rb-spinner` — glowing orchid
   indicators (`--accent` bar variant in teal).
+- **Stepper** `.rb-stepper` (+ `__step` / `__node` / `__label`, `--complete` /
+  `--current` / `--upcoming`) — a milestone rail: complete nodes solid accent
+  with a checkmark, current a surface-fill ring with an accent border, both
+  the rail fill and the current node glowing with the same `--rb-accent-glow` box-shadow
+  `.rb-progress`'s value fill uses. Upcoming reads faint surface-2; rail track is
+  `surface-sunken`, and each connector segment picks up that same glow once
+  its own step is reached (complete or current) -- no separate progress
+  value to keep in sync with the step states.
+- **Muted text** `.rb-muted` — faint secondary/empty-state text;
+  `color: var(--rb-text-faint)`, italic.
+- **Pre / log block** `.rb-pre` — command/log `<pre>`; the surface-sunken
+  well (already documented above as this theme's "log wells" token),
+  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.
 
 This port carries nazuraki's original component set; the rackbops-specific
-`eyebrow`, `tabstrip`, `wordmark`, and `card--raised` surfaces are not part of
-it. It also keeps nazuraki's `.rb-badge--primary` variant (orchid pill), which
-the other rackbops themes don't define — a `@rackbops/ui-react` `Badge` never
-emits it, so it is a theme extra, harmless where unused.
+`eyebrow`, `tabstrip`, and `wordmark` surfaces are not part of it.
+`.rb-card--raised` is also absent: nazuraki's own card never had a second
+elevation tier, so the port doesn't invent one — `Card raised` is a
+documented no-op here (see `contract.test.mjs`'s allowlist). It also keeps
+nazuraki's `.rb-badge--primary` variant (orchid pill), which the other
+rackbops themes don't define — a `@rackbops/ui-react` `Badge` never emits it,
+so it is a theme extra, harmless where unused.
 
 ## Code syntax
 

package/luminous-precision/index.css

@@ -3,6 +3,7 @@
 @import "./base.css";
 @import "./components/card.css";
 @import "./components/link.css";
+@import "./components/nav-rail.css";
 @import "./components/button.css";
 @import "./components/form.css";
 @import "./components/badge.css";
@@ -11,3 +12,7 @@
 @import "./components/tabs.css";
 @import "./components/table.css";
 @import "./components/progress.css";
+@import "./components/stepper.css";
+@import "./components/muted.css";
+@import "./components/pre.css";
+@import "./components/log.css";

package/manifest.json

@@ -34,6 +34,26 @@
       "fonts": [
         "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap"
       ]
+    },
+    "concrete-signal": {
+      "scheme": "dark",
+      "fonts": []
+    },
+    "concrete-signal-light": {
+      "scheme": "light",
+      "fonts": []
+    },
+    "amber-hearth": {
+      "scheme": "light",
+      "fonts": []
+    },
+    "amber-ember": {
+      "scheme": "dark",
+      "fonts": []
+    },
+    "mono-field": {
+      "scheme": "light",
+      "fonts": []
     }
   }
 }

package/mono-field/base.css

@@ -0,0 +1,59 @@
+/* mono-field — base styles
+ * Scoped defaults. Requires tokens.css. Fonts are system stacks — nothing to
+ * load, this theme 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="mono-field"]) {
+  background-color: var(--rb-bg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *),
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *)::before,
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *)::after {
+  box-sizing: border-box;
+}
+
+:where(html[data-rb-style="mono-field"]) 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);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *):where(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 var(--rb-space-3);
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-heading-tracking);
+  line-height: 1.3;
+  text-wrap: balance;
+}
+
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *):where(p) {
+  margin: 0 0 var(--rb-space-3);
+}
+
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *):where(ul, ol) {
+  margin: 0 0 var(--rb-space-3);
+  padding-inline-start: var(--rb-space-4);
+}
+
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *):where(a) {
+  color: var(--rb-accent);
+}
+
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *)::selection {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}

package/mono-field/components/alert.css

@@ -0,0 +1,35 @@
+/* mono-field — alert / callout
+ * A surface-2 panel — a rare use of the theme's one non-white surface, to
+ * read as "flagged". A thin 2px left bar carries the semantic color; kept
+ * quiet, not bold. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).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-2);
+  border: 1px solid var(--rb-border);
+  border-left: 2px solid var(--rb-accent);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-alert__title {
+  display: block;
+  margin-bottom: var(--rb-space-1);
+  color: var(--rb-text);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-alert--info {
+  border-left-color: var(--rb-info);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-alert--success {
+  border-left-color: var(--rb-success);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-alert--warning {
+  border-left-color: var(--rb-warning);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-alert--danger {
+  border-left-color: var(--rb-danger);
+}

package/mono-field/components/badge.css

@@ -0,0 +1,34 @@
+/* mono-field — badge
+ * A pill: a 12%-alpha tint of its hue behind full-strength (but desaturated)
+ * text. Normal case, weight 500 — no shouting, even here (unusual for a
+ * badge, but matches this theme's no-shouting rule). */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).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);
+  color: var(--rb-accent);
+  background: color-mix(in srgb, var(--rb-accent) 12%, transparent);
+  font-family: var(--rb-font-body);
+  font-size: 12px;
+  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-badge--info {
+  background: color-mix(in srgb, var(--rb-info) 12%, transparent);
+  color: var(--rb-info);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-badge--success {
+  background: color-mix(in srgb, var(--rb-success) 12%, transparent);
+  color: var(--rb-success);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-badge--warning {
+  background: color-mix(in srgb, var(--rb-warning) 12%, transparent);
+  color: var(--rb-warning);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-badge--danger {
+  background: color-mix(in srgb, var(--rb-danger) 12%, transparent);
+  color: var(--rb-danger);
+}

package/mono-field/components/button.css

@@ -0,0 +1,101 @@
+/* mono-field — button
+ * Plain bordered ghost on white by default; --primary is the one solid
+ * ink-blue fill. No hover lift, no glow ring — just a barely-there shadow
+ * change on primary and a plain accent outline on focus. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).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);
+  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);
+  text-transform: none;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color var(--rb-transition),
+    background var(--rb-transition),
+    color var(--rb-transition),
+    box-shadow var(--rb-transition);
+}
+/* --sm: compact size for inline/table-row actions (composes with any variant) */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--sm {
+  padding: var(--rb-space-1) var(--rb-space-3);
+  font-size: calc(var(--rb-text-sm) - 1px);
+}
+/* --icon: square icon-only hit target (>=2rem); pair with .rb-btn (+ an
+ * optional color variant) — inherits color/border/hover/focus from it. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-icon-btn {
+  padding: var(--rb-space-2);
+  min-width: 2rem;
+  min-height: 2rem;
+  gap: 0;
+  justify-content: center;
+  line-height: 1;
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn:hover {
+  border-color: var(--rb-border-strong);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn:focus-visible {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
+/* Primary — the one solid fill. Barely-there shadow lift on hover only. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--primary {
+  background: var(--rb-accent);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent-fg);
+  box-shadow: var(--rb-shadow-sm);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--primary:hover {
+  box-shadow: var(--rb-shadow-lg);
+}
+
+/* Accent — an accent-wash chip. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--accent {
+  background: var(--rb-accent-wash);
+  border-color: transparent;
+  color: var(--rb-accent);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--accent:hover {
+  border-color: var(--rb-accent);
+}
+
+/* Danger — a danger-colored ghost. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--danger {
+  background: var(--rb-surface);
+  border-color: var(--rb-border);
+  color: var(--rb-danger);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--danger:hover {
+  border-color: var(--rb-danger);
+}
+
+/* Ghost — chromeless. */
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--rb-text-soft);
+}
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--ghost:hover {
+  border-color: transparent;
+  color: var(--rb-text);
+}
+
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn {
+    transition: none;
+  }
+}