@rackbops/styles 0.1.0 → 0.1.2

package/arcane-obsidian/components/table.css

@@ -21,6 +21,20 @@
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).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="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: -2px;
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table--interactive tbody tr:focus-visible td,
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table--interactive tbody tr:has(:focus-visible) td {
+  background: var(--rb-surface-2);
+}
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table .rb-num {
   text-align: right;
   font-variant-numeric: tabular-nums;

package/arcane-obsidian/design.md

@@ -51,6 +51,12 @@ Muted-on-surface is tuned to clear WCAG AA (4.5:1) on every surface; the light
 - **Numerals:** `font-variant-numeric: tabular-nums` everywhere data is shown.
 - **Labels** (eyebrows, badges, table headers): mono, uppercase, ~11px, tracked
   `0.06em`.
+- **Bare tags:** unclassed `h1`-`h6` pick up the mono display voice directly —
+  weight 600, tracking `-0.01em`, `--rb-space-3` margin below. `.rb-card`
+  renders a bare `<h3>` and gets this treatment too, since `card.css` declares
+  no heading rule of its own. 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
 
@@ -76,10 +82,16 @@ Class prefix `rb-`; shared token/class contract with the other themes.
   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.
+  `--ghost` chromeless. `--sm` is a compact size — tighter padding, type down
+  ~1px — for inline and table-row actions. `.rb-icon-btn` is a square icon-only
+  hit target (>=2rem) — pair it with `.rb-btn` (+ an optional color variant)
+  for close/edit/delete glyph buttons.
 - **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.
+- **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 + wash ring; controls use `accent-color`.
@@ -93,11 +105,27 @@ Class prefix `rb-`; shared token/class contract with the other themes.
 - **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.
+  tabular numerals, row hover to surface-2. `--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 with an
   accent fill; the spinner is a single accent arc.
+- **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 and a
+  `shadow-lg` lift, 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.
 - **Eyebrow** `.rb-eyebrow` — small mono uppercase section label in the accent,
   wide-tracked; subtler than the studio eyebrow (no leading rule).
+- **Muted text** `.rb-muted` — faint secondary/empty-state text;
+  `color: var(--rb-text-faint)`, italic.
+- **Pre / log block** `.rb-pre` — command/log `<pre>`; surface-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.
 
 ## Code syntax
 

package/arcane-obsidian/index.css

@@ -4,6 +4,7 @@
 @import "./components/button.css";
 @import "./components/card.css";
 @import "./components/link.css";
+@import "./components/nav-rail.css";
 @import "./components/form.css";
 @import "./components/badge.css";
 @import "./components/alert.css";
@@ -11,6 +12,10 @@
 @import "./components/tabs.css";
 @import "./components/table.css";
 @import "./components/progress.css";
+@import "./components/stepper.css";
 @import "./components/eyebrow.css";
 @import "./components/wordmark.css";
 @import "./components/tabstrip.css";
+@import "./components/muted.css";
+@import "./components/pre.css";
+@import "./components/log.css";

package/arcane-parchment/base.css

@@ -31,6 +31,26 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* Monospace IS the display voice here — same "Display / wordmark" treatment
+ * design.md documents, wired to bare headings too. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *):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="arcane-parchment"], [data-rb-style="arcane-parchment"] *):where(p) {
+  margin: 0 0 var(--rb-space-3);
+}
+
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *):where(ul, ol) {
+  margin: 0 0 var(--rb-space-3);
+  padding-inline-start: var(--rb-space-4);
+}
+
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *):where(a) {
   color: var(--rb-accent);
 }

package/arcane-parchment/components/button.css

@@ -21,6 +21,21 @@
     background var(--rb-transition),
     color var(--rb-transition);
 }
+/* --sm: compact size for inline/table-row actions (composes with any variant) */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).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="arcane-parchment"], [data-rb-style="arcane-parchment"] *).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="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);

package/arcane-parchment/components/log.css

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

package/arcane-parchment/components/muted.css

@@ -0,0 +1,7 @@
+/* arcane-parchment — 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="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-muted {
+  color: var(--rb-text-faint);
+  font-style: italic;
+}

package/arcane-parchment/components/nav-rail.css

@@ -0,0 +1,14 @@
+/* arcane-parchment — 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="arcane-parchment"], [data-rb-style="arcane-parchment"] *).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/arcane-parchment/components/pre.css

@@ -0,0 +1,13 @@
+/* arcane-parchment — 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="arcane-parchment"], [data-rb-style="arcane-parchment"] *).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/arcane-parchment/components/stepper.css

@@ -0,0 +1,87 @@
+/* arcane-parchment — 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
+ * glow here -- depth is flat/shadow-based, so the current node's elevation
+ * is the theme's own shadow-lg, not a glow. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).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="arcane-parchment"], [data-rb-style="arcane-parchment"] *).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="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).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="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper--current .rb-stepper__node {
+  background: var(--rb-surface);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).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="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__step:not(:first-child)::before {
+    transition: none;
+  }
+}

package/arcane-parchment/components/table.css

@@ -21,6 +21,20 @@
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).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="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: -2px;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table--interactive tbody tr:focus-visible td,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-table--interactive tbody tr:has(:focus-visible) 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;

package/arcane-parchment/design.md

@@ -45,7 +45,10 @@ hues appear. Muted-on-surface is tuned to clear WCAG AA (4.5:1) on every surface
 
 Identical to arcane-obsidian: monospace display voice (the wordmark, weight 600,
 tracking `-0.01em`) over a `system-ui` body (weight 400); `tabular-nums` wherever
-data is shown; mono uppercase labels tracked `0.06em`.
+data is shown; mono uppercase labels tracked `0.06em`. Bare `h1`-`h6`/`p`/`ul`/`ol`
+get the same treatment as arcane-obsidian too: unclassed headlines carry that
+same mono voice with `--rb-space-3` margin, and bare `ul`/`ol` add
+`--rb-space-4` marker indent with real disc/decimal markers.
 
 ## Shape & effects
 
@@ -64,11 +67,12 @@ data is shown; mono uppercase labels tracked `0.06em`.
 ## Components
 
 Class prefix `rb-`; the full arcane-obsidian inventory, styled identically from
-tokens: `.rb-wordmark` (+ `__spark`), `.rb-btn` (+ `--primary/--accent/--danger/--ghost`),
-`.rb-card` (+ `--raised`), `.rb-link`, the form set, `.rb-badge`, `.rb-alert`,
-`.rb-dialog`, `.rb-tabs`, `.rb-tabstrip`, `.rb-table` (+ `.rb-num`),
-`.rb-progress` / `.rb-spinner`, `.rb-eyebrow`. See arcane-obsidian's `design.md`
-for the per-component notes — the behaviour is the same; only the palette is light.
+tokens: `.rb-wordmark` (+ `__spark`), `.rb-btn` (+ `--primary/--accent/--danger/--ghost`, `--sm` compact size, `.rb-icon-btn` icon-only square),
+`.rb-card` (+ `--raised`), `.rb-link`, `.rb-nav-rail`, the form set, `.rb-badge`, `.rb-alert`,
+`.rb-dialog`, `.rb-tabs`, `.rb-tabstrip`, `.rb-table` (+ `.rb-num`, `--interactive`),
+`.rb-progress` / `.rb-spinner`, `.rb-stepper`, `.rb-eyebrow`, `.rb-muted`, `.rb-pre` (+ `.rb-log`). See
+arcane-obsidian's `design.md` for the per-component notes — the behaviour is
+the same; only the palette is light.
 
 ## Code syntax
 

package/arcane-parchment/index.css

@@ -4,6 +4,7 @@
 @import "./components/button.css";
 @import "./components/card.css";
 @import "./components/link.css";
+@import "./components/nav-rail.css";
 @import "./components/form.css";
 @import "./components/badge.css";
 @import "./components/alert.css";
@@ -11,6 +12,10 @@
 @import "./components/tabs.css";
 @import "./components/table.css";
 @import "./components/progress.css";
+@import "./components/stepper.css";
 @import "./components/eyebrow.css";
 @import "./components/wordmark.css";
 @import "./components/tabstrip.css";
+@import "./components/muted.css";
+@import "./components/pre.css";
+@import "./components/log.css";

package/concrete-signal/base.css

@@ -0,0 +1,57 @@
+/* concrete-signal — base styles
+ * Scoped defaults. Requires tokens.css. Fonts are a system stack — nothing to
+ * load; the industrial voice comes from weight/case/tracking, not font family.
+ *
+ * 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="concrete-signal"]) {
+  background-color: var(--rb-bg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+}
+
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *),
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *)::before,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *)::after {
+  box-sizing: border-box;
+}
+
+:where(html[data-rb-style="concrete-signal"]) 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);
+}
+
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *):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.1;
+  text-wrap: balance;
+}
+
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *):where(p) {
+  margin: 0 0 var(--rb-space-3);
+}
+
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *):where(ul, ol) {
+  margin: 0 0 var(--rb-space-3);
+  padding-inline-start: var(--rb-space-4);
+}
+
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *):where(a) {
+  color: var(--rb-accent);
+}
+
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *)::selection {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}

package/concrete-signal/components/alert.css

@@ -0,0 +1,44 @@
+/* concrete-signal — alert / callout
+ * A square-cornered surface panel with a 6px solid left bar — thicker than
+ * the library norm, read like a hazard stripe. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).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: 6px solid var(--rb-accent);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-alert__title {
+  text-transform: uppercase;
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-alert--info {
+  border-left-color: var(--rb-info);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-alert--success {
+  border-left-color: var(--rb-success);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-alert--warning {
+  border-left-color: var(--rb-warning);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-alert--danger {
+  border-left-color: var(--rb-danger);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-alert--info .rb-alert__title {
+  color: var(--rb-info);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-alert--success .rb-alert__title {
+  color: var(--rb-success);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-alert--warning .rb-alert__title {
+  color: var(--rb-warning);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-alert--danger .rb-alert__title {
+  color: var(--rb-danger);
+}

package/concrete-signal/components/badge.css

@@ -0,0 +1,38 @@
+/* concrete-signal — badge / status chip
+ * A stamped label: a 16%-tint fill of its hue behind full-strength text, plus
+ * a 1px solid border of that same hue — badges get a border here, unlike
+ * softer themes, to keep the stamped-label feel. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-1);
+  padding: 2px var(--rb-space-2);
+  border: 1px solid var(--rb-accent);
+  border-radius: var(--rb-radius-pill);
+  background: var(--rb-accent-wash);
+  color: var(--rb-accent);
+  text-transform: uppercase;
+  font-weight: var(--rb-font-weight-bold);
+  font-size: 11px;
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-badge--info {
+  border-color: var(--rb-info);
+  background: color-mix(in srgb, var(--rb-info) 16%, transparent);
+  color: var(--rb-info);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-badge--success {
+  border-color: var(--rb-success);
+  background: color-mix(in srgb, var(--rb-success) 16%, transparent);
+  color: var(--rb-success);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-badge--warning {
+  border-color: var(--rb-warning);
+  background: color-mix(in srgb, var(--rb-warning) 16%, transparent);
+  color: var(--rb-warning);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-badge--danger {
+  border-color: var(--rb-danger);
+  background: color-mix(in srgb, var(--rb-danger) 16%, transparent);
+  color: var(--rb-danger);
+}

package/concrete-signal/components/button.css

@@ -0,0 +1,98 @@
+/* concrete-signal — button
+ * Uppercase, heavy weight — the industrial label voice. Default is an
+ * outlined ghost; --primary is the one solid accent fill and carries the
+ * theme's signature press interaction: the offset shadow disappears and the
+ * button translates into the surface by the shadow's own offset, like a
+ * stamped card being pressed flat. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).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);
+  text-transform: uppercase;
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight-bold);
+  font-size: var(--rb-text-sm);
+  letter-spacing: var(--rb-label-tracking);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color var(--rb-transition),
+    color var(--rb-transition);
+}
+/* --sm: compact size for inline/table-row actions (composes with any variant) */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).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="concrete-signal"], [data-rb-style="concrete-signal"] *).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="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn:hover,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn:focus-visible {
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+  outline: none;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary {
+  background: var(--rb-accent);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent-fg);
+  box-shadow: var(--rb-shadow-sm);
+  transition:
+    transform var(--rb-transition),
+    box-shadow var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:hover,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:focus-visible,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:active {
+  border-color: var(--rb-accent);
+  color: var(--rb-accent-fg);
+  outline: none;
+  transform: translate(2px, 2px);
+  box-shadow: none;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--accent {
+  background: var(--rb-accent-wash);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--danger {
+  background: transparent;
+  border-color: var(--rb-danger);
+  color: var(--rb-danger);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--rb-text-soft);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--ghost:hover,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--ghost:focus-visible {
+  background: var(--rb-surface-2);
+  border-color: var(--rb-border);
+  color: var(--rb-text);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn,
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary {
+    transition: none;
+  }
+}

package/concrete-signal/components/card.css

@@ -0,0 +1,21 @@
+/* concrete-signal — card
+ * A poured-concrete panel: square corners, a thicker-than-usual structural
+ * border, and a hard offset shadow instead of blur — depth reads as a
+ * physically stamped slab, not a glow. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-card {
+  padding: var(--rb-space-5);
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border-strong);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  box-shadow: var(--rb-shadow-sm);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-card--raised {
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-card > :first-child {
+  margin-top: 0;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-card > :last-child {
+  margin-bottom: 0;
+}