@rackbops/styles 0.1.0 → 0.1.1

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

@@ -0,0 +1,138 @@
+/* concrete-signal-light — form controls: input, textarea, select, checkbox, radio, switch
+ * Sunken square-cornered fields; focus is a hard border-weight change (1px to
+ * 2px solid accent) — no soft wash ring, brutalism doesn't glow. Checked
+ * checkbox/radio/switch states are a flat accent fill, not a tinted ring. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rb-space-1);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-label {
+  color: var(--rb-text-soft);
+  text-transform: uppercase;
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-input,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-textarea,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-select {
+  display: block;
+  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-weight: var(--rb-font-weight);
+  font-size: var(--rb-text-sm);
+  transition: border-color var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-textarea {
+  min-height: 5rem;
+  resize: vertical;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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='%235f5d58' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--rb-space-3) center;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-input::placeholder,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-textarea::placeholder {
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-input:focus,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-textarea:focus,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-select:focus {
+  outline: none;
+  border: 2px solid var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-input[aria-invalid="true"],
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-textarea[aria-invalid="true"] {
+  border-color: var(--rb-danger);
+}
+
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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;
+}
+
+/* checkbox & radio — square, sunken; checked is a flat accent fill framed by
+   an inset ring of the field background, not a glow */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-checkbox,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-radio {
+  appearance: none;
+  width: 1.1rem;
+  height: 1.1rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  cursor: pointer;
+  transition: border-color var(--rb-transition), background var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-checkbox:checked,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-radio:checked {
+  background: var(--rb-accent);
+  border-color: var(--rb-accent);
+  box-shadow: inset 0 0 0 3px var(--rb-surface-sunken);
+}
+
+/* switch — square track and thumb; flat accent fill when on */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-switch {
+  appearance: none;
+  position: relative;
+  width: 2.4rem;
+  height: 1.3rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  cursor: pointer;
+  transition: border-color var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(1.3rem - 6px);
+  height: calc(1.3rem - 6px);
+  background: var(--rb-text-faint);
+  transition: transform var(--rb-transition), background var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-switch:checked {
+  border-color: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-switch:checked::after {
+  transform: translateX(1.1rem);
+  background: var(--rb-accent);
+}
+
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-checkbox:focus-visible,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-radio:focus-visible,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-switch:focus-visible {
+  outline: none;
+  border: 2px solid var(--rb-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-input,
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-textarea,
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-select,
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-checkbox,
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-radio,
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-switch,
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-switch::after {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,44 @@
+/* concrete-signal-light — nav link (tree/sidebar row)
+ * Hover fills to surface-2 and stamps a hard 3px solid accent bar on the left
+ * edge — no gradient, no blur, no glow; active carries the accent wash plus
+ * the same bar and bold text. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--rb-transition), color var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: transparent;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link:hover {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link:hover::before,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link.rb-link--active::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link.rb-link--active {
+  background: var(--rb-accent-wash);
+  color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-bold);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,19 @@
+/* concrete-signal-light — log / terminal block
+ * Pairs with .rb-pre for the shared look (surface-sunken well, hairline
+ * border, zero 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="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-pre.rb-log {
+  overflow-x: hidden;
+}

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

@@ -0,0 +1,7 @@
+/* concrete-signal-light — muted / empty-state text
+ * Faint secondary text — captions, meta, "No results yet." style empty
+ * states. No italic: brutalism carries its voice through weight, case, and
+ * tracking, never a softening slant. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-muted {
+  color: var(--rb-text-faint);
+}

package/concrete-signal-light/components/nav-rail.css

@@ -0,0 +1,15 @@
+/* concrete-signal-light — nav rail (vertical sidebar container)
+ * Flush edge chrome, not a floating card: 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 --
+ * active/hover are entirely that component's own tokens, nothing new here. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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-strong);
+}

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

@@ -0,0 +1,14 @@
+/* concrete-signal-light — command / log block
+ * Styled <pre> for shell commands or short log output: sunken well, hairline
+ * border, small mono, scrolls horizontally instead of wrapping. Zero radius
+ * falls out of --rb-radius automatically, same as every other panel here. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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/concrete-signal-light/components/progress.css

@@ -0,0 +1,44 @@
+/* concrete-signal-light — progress bar & spinner
+ * A sunken, square-cornered trough with a flat accent fill — no gradient fill,
+ * no glow. The spinner keeps the theme's zero-radius signature: a square
+ * rotating frame rather than a soft circular arc. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-progress {
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  overflow: hidden;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-progress::-webkit-progress-bar {
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-progress::-webkit-progress-value {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-progress::-moz-progress-bar {
+  background: var(--rb-accent);
+}
+
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-spinner {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--rb-border-strong);
+  border-top-color: var(--rb-accent);
+  border-radius: var(--rb-radius);
+  animation: rb-signal-light-spin 0.7s linear infinite;
+}
+@keyframes rb-signal-light-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-spinner {
+    animation-duration: 2s;
+  }
+}

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

@@ -0,0 +1,84 @@
+/* concrete-signal-light — 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 or blur -- ever, per this theme's rule -- so the current node's lift
+ * is the hard, literal offset shadow-lg, and a segment snaps instantly
+ * instead of transitioning. Identical to concrete-signal; only the palette
+ * differs. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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-bold);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+  text-transform: uppercase;
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper--current .rb-stepper__label {
+  color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-bold);
+}

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

@@ -0,0 +1,48 @@
+/* concrete-signal-light — table
+ * Dense, spec-sheet reading: 1px border-strong rules everywhere (not faint
+ * hairlines), uppercase tracked headers, tabular numerals, and a row hover
+ * that snaps instantly — no transition softness. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--rb-text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--rb-text);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-table th {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border-strong);
+  color: var(--rb-text-faint);
+  text-align: left;
+  text-transform: uppercase;
+  font-size: 12px;
+  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-table td {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border-strong);
+  color: var(--rb-text);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).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;
+ * no transition here either, matching the table's instant-snap hover. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: -2px;
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-table--interactive tbody tr:focus-visible td,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-table--interactive tbody tr:has(:focus-visible) td {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-table .rb-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

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

@@ -0,0 +1,49 @@
+/* concrete-signal-light — tabs
+ * Uppercase text tabs; the active tab carries accent text and a hard 3px
+ * underline in the theme's one rationed gradient — its only appearance
+ * outside the token declaration itself. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-2);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab {
+  position: relative;
+  padding: var(--rb-space-2) var(--rb-space-4);
+  background: none;
+  border: none;
+  color: var(--rb-text-soft);
+  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);
+  cursor: pointer;
+  transition: color var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab:hover {
+  color: var(--rb-text);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab.rb-tab--active,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab[aria-selected="true"] {
+  color: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab.rb-tab--active::after,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab[aria-selected="true"]::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 3px;
+  background: var(--rb-accent-grad);
+}
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tabpanel {
+  padding: var(--rb-space-4) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab {
+    transition: none;
+  }
+}

package/concrete-signal-light/design.md

@@ -0,0 +1,82 @@
+# concrete-signal-light
+
+The light, AA-tuned counterpart of **concrete-signal** — the same brutalist
+industrial language (zero border-radius everywhere, thick hairline borders,
+hard offset shadows instead of blur, the sole safety-orange accent used
+functionally only, heavy-weight uppercase labels, tabular numerals, snappy
+`0.1s` transitions with no easing softness) rendered on a poured-concrete
+off-white ground instead of the dark slab. It ships the identical `rb-*`
+component set as concrete-signal — the components are token-driven, so only
+the palette differs — and swaps in with a single attribute flip.
+
+## Color
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#eeece6` (poured concrete, off-white) | Page canvas |
+| Surface | `#f7f6f2` | Cards, header, panels |
+| Surface 2 | `#e4e2da` | Raised/hover surface, row hover |
+| Surface sunken | `#dcdad2` | Inset fields, progress troughs |
+| Text | `#141311` | Body text |
+| Text soft | `#4a4844` | Secondary text |
+| Text faint | `#5f5d58` | Labels, idle tabs, meta |
+| Border | `#c9c6bc` | Resting hairline borders |
+| Border strong | `#a8a59a` | Card/table/dialog structural rules |
+| Accent | `#cc4611` (safety-orange, darkened for AA) | The sole brand voice: emphasis, active state, focus (4.72:1 as accent-fg text) |
+| Accent fg | `#ffffff` | White on the solid orange fill |
+| Accent wash | `rgba(204,70,17,.14)` | Default badge tint, active-link wash |
+| Gradient | `linear-gradient(90deg,#cc4611,#b8281f)` | The one rationed gradient: active-tab underline only |
+| Info | `#2f6fa8` | Informational chips (4.90:1 on surface) |
+| Success | `#3d7a45` | Healthy/live status (4.77:1 on surface) |
+| Warning | `#906721` | Caution status (darkened from `#b8842a`, 3.05:1, to 4.68:1 on surface) |
+| Danger | `#b8281f` | Destructive actions, errors (5.78:1 on surface) |
+
+**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 accent
+and the warning chip are both darkened from their naive values so every
+text/border use of a semantic colour clears WCAG AA (4.5:1) against
+`--rb-surface` — genuinely AA-tuned, not just labelled as such. The theme
+never softens with glow, blur, or gradient — the one exception is the
+2-stop hard gradient rationed to the active-tab underline.
+
+## Typography
+
+Identical to concrete-signal — see its `design.md` for per-component notes;
+behaviour is the same, only the palette differs. `system-ui` throughout at
+weight 800 for display/labels, uppercase and tracked; tabular numerals on
+tables.
+
+## Shape & effects
+
+Identical to concrete-signal — see its `design.md` for per-component notes;
+behaviour is the same, only the palette differs. Zero radius everywhere
+(save the near-square `--rb-radius-pill` used by badges), hard offset
+shadows instead of blur, a hard border-weight focus change, the theme's one
+rationed gradient on the active-tab underline only, and `0.1s` snap
+transitions.
+
+## Components
+
+Identical to concrete-signal — see its `design.md` for per-component notes;
+behaviour is the same, only the palette differs. The full baseline twelve:
+`.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-input`/`.rb-textarea`/
+`.rb-select`/`.rb-label`/`.rb-field`/`.rb-choice`/`.rb-checkbox`/`.rb-radio`/
+`.rb-switch`), `.rb-badge`, `.rb-alert`, `.rb-dialog`, `.rb-tabs`/`.rb-tab`/
+`.rb-tabpanel`, `.rb-table` (+ `.rb-num`, `--interactive`), `.rb-progress`/`.rb-spinner`, `.rb-stepper`,
+`.rb-muted` (no italic — brutalism never softens with a slant), `.rb-pre` (+ `.rb-log`)
+(zero radius falls out of `--rb-radius` automatically).
+
+## Dark counterpart
+
+`concrete-signal` — the primary, dark look. This theme and it share the
+same `--rb-*` baseline and `rb-*` classes, so switching `data-rb-style`
+between them restyles a page without touching markup.
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="concrete-signal-light"` (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-light/index.css

@@ -0,0 +1,18 @@
+/* concrete-signal-light — 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-light/tokens.css

@@ -0,0 +1,75 @@
+/* concrete-signal-light — design tokens
+ * The light, AA-tuned counterpart of concrete-signal: the same brutalist
+ * industrial language — zero border-radius everywhere, thick hairline
+ * borders, hard offset shadows instead of blur — rendered on a poured-
+ * concrete off-white ground instead of the dark slab. It ships the identical
+ * `rb-*` component set as concrete-signal (token-driven, so only the palette
+ * differs) and swaps in with a single attribute flip. Consume via:
+ *   @import "@rackbops/styles/concrete-signal-light/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries
+ * data-rb-style="concrete-signal-light" — 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.
+ */
+:where([data-rb-style="concrete-signal-light"]) {
+  color-scheme: light;
+
+  /* color — poured concrete, off-white */
+  --rb-bg: #eeece6;
+  --rb-surface: #f7f6f2;
+  --rb-surface-2: #e4e2da;
+  --rb-surface-sunken: #dcdad2;
+  --rb-text: #141311;
+  --rb-text-soft: #4a4844;
+  --rb-text-faint: #5f5d58;
+  --rb-border: #c9c6bc;
+  --rb-border-strong: #a8a59a;
+
+  /* accent — safety-orange is the sole brand voice: interaction/focus/emphasis only.
+     Darkened from the naive #d94a12 to #cc4611 so accent-fg-on-accent (the
+     primary button fill) clears WCAG AA (4.72:1, was 4.25:1). */
+  --rb-accent: #cc4611;
+  --rb-accent-fg: #ffffff;
+  --rb-accent-wash: rgba(204, 70, 17, 0.14);
+
+  /* the ONE gradient — rationed to the active-tab underline only */
+  --rb-accent-grad: linear-gradient(90deg, #cc4611, #b8281f);
+
+  /* semantic — colour beyond the accent is earned: severity/status only.
+     Warning darkened from #b8842a (3.05:1 on --rb-surface, failed AA) to
+     #906721 (4.68:1) — it's the sole failing semantic hue on this ground. */
+  --rb-info: #2f6fa8;
+  --rb-success: #3d7a45;
+  --rb-warning: #906721;
+  --rb-danger: #b8281f;
+
+  /* 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(20, 19, 17, 0.18);
+  --rb-shadow-lg: 4px 4px 0 rgba(20, 19, 17, 0.22);
+  --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/css-side-effect.d.ts

@@ -0,0 +1,5 @@
+// Every @rackbops/styles export below is CSS consumed for its side effect
+// only; this declares an empty module so TypeScript's stricter side-effect
+// import resolution (moduleResolution: "bundler"/"node16",
+// noUncheckedSideEffectImports) has a real type declaration to find.
+export {};