@rackbops/styles 0.1.0 → 0.1.2

package/concrete-signal/design.md

@@ -0,0 +1,171 @@
+# concrete-signal
+
+A brutalist-industrial design language: raw poured concrete and hazard
+signage. It is the coldest, hardest theme in the library — zero
+border-radius everywhere, thick hairline borders, and its signature trait,
+**hard offset shadows instead of blur** (`Npx Npx 0 rgba(...)`, no blur
+radius at all), so depth reads as a literal physical offset — a stamped
+card, not a glow. The sole accent is safety-orange, used exactly as
+functionally as arcane-obsidian's violet: interaction, focus, and emphasis
+only, never decoration. Labels are heavy-weight and uppercase; numerals are
+tabular; transitions are snappy (`0.1s`, no easing softness — brutalism
+doesn't ease). Dark ("concrete-signal") is the primary look; its light
+counterpart ("concrete-signal-light") is documented at the end.
+
+## Color
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#121212` | Page canvas |
+| Surface | `#1a1a1a` | Cards, header, panels |
+| Surface 2 | `#232323` | Raised/hover surface, row hover |
+| Surface sunken | `#0a0a0a` | Inset fields, progress troughs |
+| Text | `#f2f2f0` | Body text |
+| Text soft | `#b8b8b4` | Secondary text |
+| Text faint | `#8f8f8a` | Labels, idle tabs, meta |
+| Border | `#3a3a38` | Resting hairline borders |
+| Border strong | `#55534e` | Card/table/dialog structural rules |
+| Accent | `#ff5e1a` (safety-orange) | The sole brand voice: emphasis, active state, focus |
+| Accent fg | `#121212` | Dark ink on the solid orange fill |
+| Accent wash | `rgba(255,94,26,.16)` | Default badge tint, active-link wash |
+| Gradient | `linear-gradient(90deg,#ff5e1a,#e8342a)` | The one rationed gradient: active-tab underline only |
+| Info | `#4ea1e0` | Informational chips |
+| Success | `#4caa5c` | Healthy/live status |
+| Warning | `#e8b23a` | Caution status |
+| Danger | `#e8342a` | Destructive actions, errors |
+
+**Rules.** Colour is functional. Resting UI is concrete grey and faint;
+safety-orange appears only on interaction, focus, active state, and
+emphasis — never as decoration. Colour beyond the accent is *earned*:
+severity and status chips are the one place other hues appear. The theme
+never softens with glow, blur, or gradient — the one exception is the
+2-stop hard gradient rationed to the active-tab underline, and even that
+gradient has no soft midpoint.
+
+## Typography
+
+- **Display / labels:** `system-ui` throughout — no serif, no
+  monospace-as-display. The industrial voice comes from weight, case, and
+  tracking, not font family. Buttons, badges, tabs, and table headers are
+  uppercase at weight 800, tracked `var(--rb-label-tracking)` (`0.08em`).
+- **Body:** `system-ui`, weight 400.
+- **Numerals:** `font-variant-numeric: tabular-nums` on tables, so counts
+  and sizes align in a column.
+- **Mono:** `ui-monospace` stack reserved for code-shaped content; not the
+  display voice.
+- **Bare tags:** unclassed `h1`-`h6` pick up the display voice directly —
+  weight 800, tracking `0.08em`, `--rb-space-3` margin below, tight
+  `line-height: 1.1`. 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` everywhere — buttons, cards, dialogs, inputs, tabs. The one
+  concession is `--rb-radius-pill` (`0.125rem`), used for badges: near-square,
+  never a true rounded pill.
+- Depth is a literal offset, not blur: `--rb-shadow-sm` (`2px 2px 0`) resting,
+  `--rb-shadow-lg` (`4px 4px 0`) for dialogs and raised cards. `--rb-blur` is
+  `0px` — this theme never applies `backdrop-filter` or any soft blur.
+  Dialog backdrops are a flat `rgba(0,0,0,.6)` scrim.
+  Focus is a hard border-weight change (1px to 2px solid accent), never a
+  soft wash ring or glow.
+- Primary buttons carry the theme's signature interaction: the offset shadow
+  disappears and the button translates by the shadow's own offset on
+  hover/active (`transform: translate(2px, 2px); box-shadow: none;`) — the
+  classic "pressed into the surface" brutalist button.
+- The **one gradient** (`--rb-accent-grad`, orange → red, 2-stop, no soft
+  midpoint) is rationed to exactly one place: the active-tab underline.
+  Everywhere else that reads as accent is a solid fill.
+- Transitions `0.1s`, no easing softness. 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. Only
+the baseline ten — no theme-specific extras.
+
+- **Button** `.rb-btn` — outlined ghost by default; `--primary` is a solid
+  accent fill with the offset-shadow press interaction; `--accent` an
+  accent-wash chip; `--danger` a danger-colored ghost; `--ghost` chromeless.
+  `--sm` is the compact size for dense toolbars and table-row actions.
+  `.rb-icon-btn` is a square icon-only hit target (>=2rem), paired with `.rb-btn`.
+- **Card** `.rb-card` (+ `--raised`) — surface panel, a thicker
+  `border-strong` edge, `shadow-sm` (`--raised` upgrades to `shadow-lg`).
+- **Link** `.rb-link` (nav/sidebar row) — hover fills to surface-2 and stamps
+  a hard 3px solid accent bar on the left edge; `--active` adds the accent
+  wash and bold text.
+- **Nav rail** `.rb-nav-rail` — the sidebar container: 14rem fixed-width flex
+  column, surface background, a 1px border-strong right edge (this theme's
+  spec-sheet convention, not a faint hairline). 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 square fields; focus swaps the border from 1px to 2px solid accent;
+  checked checkbox/radio/switch states are a flat accent fill, not a tint
+  ring; labels are uppercase, tracked, weight 600.
+- **Badge** `.rb-badge` — uppercase weight 700, near-square (`radius-pill`);
+  a 16%-tint fill of its hue behind full-strength text, plus a 1px solid
+  border of that same hue — badges carry a border here, unlike softer themes.
+- **Alert** `.rb-alert` — surface panel with a 6px solid left bar (thicker
+  than the library norm) in the semantic colour, square corners.
+- **Dialog** `.rb-dialog` — native `<dialog>`, surface bg, a 2px
+  `border-strong` edge, `shadow-lg`, a flat unblurred backdrop, uppercase
+  weight-800 title.
+- **Tabs** `.rb-tabs` / `.rb-tab` / `.rb-tabpanel` — uppercase text tabs; the
+  active tab is accent, underlined with the rationed 2-stop gradient.
+- **Table** `.rb-table` (+ `.rb-num`) — dense, uppercase weight-700 headers,
+  1px `border-strong` rules throughout (a spec-sheet read, not faint
+  hairlines), tabular numerals, instant row hover to surface-2.
+  `--interactive` marks clickable rows: pointer cursor, plus an (equally
+  instant) focus-visible ring and surface-2 wash for a `tabindex` row or a
+  row-wrapping button/link.
+- **Progress / Spinner** `.rb-progress` / `.rb-spinner` — sunken square
+  trough, solid accent fill (no gradient fill); the spinner keeps the
+  zero-radius signature as a square rotating frame.
+- **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,
+  lifted with the hard, literal offset `shadow-lg` (never a glow or blur), upcoming faint
+  surface-2. Labels carry the brutalist uppercase/tracked voice through
+  weight and case, same as every other label here. Rail fill snaps instantly
+  instead of transitioning, matching this theme's every other hover/fill.
+- **Muted text** `.rb-muted` — faint secondary/empty-state text;
+  `color: var(--rb-text-faint)` only, no italic — brutalism carries its voice
+  through weight, case, and tracking, never a softening slant.
+- **Pre / log block** `.rb-pre` — command/log `<pre>`; surface-sunken
+  background, hairline border, zero radius (falls out of `--rb-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.
+
+## Light counterpart
+
+`concrete-signal-light` — the AA-tuned light secondary, same brutalist
+mechanics, same `rb-*` classes and behaviour, only the palette inverted onto
+a poured-concrete off-white ground.
+
+| Role | Value |
+| --- | --- |
+| Background | `#eeece6` |
+| Surface | `#f7f6f2` |
+| Surface 2 | `#e4e2da` |
+| Surface sunken | `#dcdad2` |
+| Text | `#141311` |
+| Text soft | `#4a4844` |
+| Text faint | `#5f5d58` |
+| Border | `#c9c6bc` |
+| Border strong | `#a8a59a` |
+| Accent | `#cc4611` |
+| Accent fg | `#ffffff` |
+| Gradient | `linear-gradient(90deg,#cc4611,#b8281f)` |
+
+See `concrete-signal-light`'s own `design.md` for its full color table and
+notes — the behaviour is identical; only the palette is light.
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="concrete-signal"` (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/concrete-signal/index.css

@@ -0,0 +1,18 @@
+/* concrete-signal — full theme entry point */
+@import "./tokens.css";
+@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";
+@import "./components/alert.css";
+@import "./components/dialog.css";
+@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/concrete-signal/tokens.css

@@ -0,0 +1,75 @@
+/* concrete-signal — design tokens
+ * Brutalist industrial: raw poured concrete + hazard signage. The coldest,
+ * hardest theme in the library — zero border-radius everywhere, thick hairline
+ * borders, and hard offset shadows (Npx Npx 0, no blur) instead of glow or
+ * soft blur, so depth reads as literal physical offset, like a stamped card.
+ * Safety-orange is the sole accent, used exactly as functionally as
+ * arcane-obsidian's violet: interaction/focus/emphasis only, never decoration.
+ * Consume via:
+ *   @import "@rackbops/styles/concrete-signal/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-rb-style="concrete-signal" —
+ * 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.
+ *
+ * This theme ships its dark, primary look; its light counterpart
+ * "concrete-signal-light" is a separate theme directory with the identical
+ * component contract — only the palette differs.
+ */
+:where([data-rb-style="concrete-signal"]) {
+  color-scheme: dark;
+
+  /* color — raw poured concrete */
+  --rb-bg: #121212;
+  --rb-surface: #1a1a1a;
+  --rb-surface-2: #232323;
+  --rb-surface-sunken: #0a0a0a;
+  --rb-text: #f2f2f0;
+  --rb-text-soft: #b8b8b4;
+  --rb-text-faint: #8f8f8a;
+  --rb-border: #3a3a38;
+  --rb-border-strong: #55534e;
+
+  /* accent — safety-orange is the sole brand voice: interaction/focus/emphasis only */
+  --rb-accent: #ff5e1a;
+  --rb-accent-fg: #121212;
+  --rb-accent-wash: rgba(255, 94, 26, 0.16);
+
+  /* the ONE gradient — rationed to the active-tab underline only */
+  --rb-accent-grad: linear-gradient(90deg, #ff5e1a, #e8342a);
+
+  /* semantic — colour beyond the accent is earned: severity/status only */
+  --rb-info: #4ea1e0;
+  --rb-success: #4caa5c;
+  --rb-warning: #e8b23a;
+  --rb-danger: #e8342a;
+
+  /* typography — system-ui throughout; the industrial voice comes from
+     weight/case/tracking, not font family */
+  --rb-font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --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: 800;
+  --rb-heading-tracking: 0.01em;
+  --rb-label-tracking: 0.08em;
+  --rb-text-sm: 13px;
+
+  /* shape & effects — zero radius everywhere; hard offset shadows, no blur */
+  --rb-radius: 0;
+  --rb-radius-lg: 0;
+  --rb-radius-pill: 0.125rem; /* deliberately near-square, not a true pill — brutalism has no soft pills */
+  --rb-shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.6);
+  --rb-shadow-lg: 4px 4px 0 rgba(0, 0, 0, 0.6);
+  --rb-blur: 0px; /* this theme never uses blur/glass */
+  --rb-transition: 0.1s; /* snappy; brutalism doesn't ease */
+
+  /* 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/concrete-signal-light/base.css

@@ -0,0 +1,57 @@
+/* concrete-signal-light — 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-light"]) {
+  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-light"], [data-rb-style="concrete-signal-light"] *),
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *)::before,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *)::after {
+  box-sizing: border-box;
+}
+
+:where(html[data-rb-style="concrete-signal-light"]) 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-light"], [data-rb-style="concrete-signal-light"] *):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-light"], [data-rb-style="concrete-signal-light"] *):where(p) {
+  margin: 0 0 var(--rb-space-3);
+}
+
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *):where(ul, ol) {
+  margin: 0 0 var(--rb-space-3);
+  padding-inline-start: var(--rb-space-4);
+}
+
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *):where(a) {
+  color: var(--rb-accent);
+}
+
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *)::selection {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}

package/concrete-signal-light/components/alert.css

@@ -0,0 +1,44 @@
+/* concrete-signal-light — 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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).rb-alert--info {
+  border-left-color: var(--rb-info);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-alert--success {
+  border-left-color: var(--rb-success);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-alert--warning {
+  border-left-color: var(--rb-warning);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-alert--danger {
+  border-left-color: var(--rb-danger);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-alert--info .rb-alert__title {
+  color: var(--rb-info);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-alert--success .rb-alert__title {
+  color: var(--rb-success);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-alert--warning .rb-alert__title {
+  color: var(--rb-warning);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-alert--danger .rb-alert__title {
+  color: var(--rb-danger);
+}

package/concrete-signal-light/components/badge.css

@@ -0,0 +1,38 @@
+/* concrete-signal-light — 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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).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-light/components/button.css

@@ -0,0 +1,98 @@
+/* concrete-signal-light — 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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).rb-btn:hover,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn:focus-visible {
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+  outline: none;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:hover,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:focus-visible,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--accent {
+  background: var(--rb-accent-wash);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--danger {
+  background: transparent;
+  border-color: var(--rb-danger);
+  color: var(--rb-danger);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--rb-text-soft);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--ghost:hover,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).rb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn,
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary {
+    transition: none;
+  }
+}

package/concrete-signal-light/components/card.css

@@ -0,0 +1,21 @@
+/* concrete-signal-light — 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-light"], [data-rb-style="concrete-signal-light"] *).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-light"], [data-rb-style="concrete-signal-light"] *).rb-card--raised {
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-card > :first-child {
+  margin-top: 0;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-card > :last-child {
+  margin-bottom: 0;
+}

package/concrete-signal-light/components/dialog.css

@@ -0,0 +1,33 @@
+/* concrete-signal-light — dialog (native <dialog>)
+ * A square-cornered slab dropped onto a flat, unblurred backdrop — this
+ * theme never uses blur/glass, so the scrim behind the dialog stays flat. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-dialog {
+  padding: 0;
+  max-width: min(92vw, 32rem);
+  width: calc(100vw - 2rem);
+  background: var(--rb-surface);
+  border: 2px solid var(--rb-border-strong);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-dialog__body {
+  padding: var(--rb-space-5);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-dialog__title {
+  margin: 0 0 var(--rb-space-3);
+  text-transform: uppercase;
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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);
+}