@rackbops/styles 0.1.0 → 0.1.2

package/summer-cloud/components/muted.css

@@ -0,0 +1,8 @@
+/* summer-cloud — muted / empty-state text
+ * Faint secondary text — captions, meta, "No results yet." style empty
+ * states. Italic gives it a friendly, soft touch consistent with the
+ * theme's airy, optimistic voice. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-muted {
+  color: var(--rb-text-faint);
+  font-style: italic;
+}

package/summer-cloud/components/nav-rail.css

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

@@ -0,0 +1,16 @@
+/* summer-cloud — command / log block
+ * Styled <pre> for shell commands or short log output: sunken well, small
+ * mono, scrolls horizontally instead of wrapping. Uses --rb-outline, not
+ * --rb-border — border here is a glass-only token (translucent white) and
+ * would be invisible on this opaque surface; outline is this theme's own
+ * "hairline on opaque surfaces" token (see table.css for the same choice). */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-pre {
+  margin: 0;
+  padding: var(--rb-space-3) var(--rb-space-4);
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-outline);
+  border-radius: var(--rb-radius);
+  font-family: var(--rb-font-mono);
+  font-size: var(--rb-text-sm);
+  overflow-x: auto;
+}

package/summer-cloud/components/progress.css

@@ -1,5 +1,6 @@
 /* summer-cloud — progress bar & spinner: glowing violet indicators */
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress {
+  appearance: none;
   display: block;
   width: 100%;
   height: 0.5rem;
@@ -7,14 +8,22 @@
   border-radius: var(--rb-radius-pill);
   overflow: hidden;
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress__bar {
-  height: 100%;
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress::-webkit-progress-bar {
+  background: var(--rb-bg-blend);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress::-webkit-progress-value {
+  background: var(--rb-accent);
+  box-shadow: 0 0 10px rgba(69, 0, 217, 0.5);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress::-moz-progress-bar {
   background: var(--rb-accent);
-  border-radius: var(--rb-radius-pill);
   box-shadow: 0 0 10px rgba(69, 0, 217, 0.5);
-  transition: width var(--rb-transition);
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress__bar--accent {
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress--accent::-webkit-progress-value {
+  background: var(--rb-accent-2);
+  box-shadow: 0 0 10px rgba(12, 179, 255, 0.5);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress--accent::-moz-progress-bar {
   background: var(--rb-accent-2);
   box-shadow: 0 0 10px rgba(12, 179, 255, 0.5);
 }
@@ -37,7 +46,4 @@
   :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-spinner {
     animation-duration: 2s;
   }
-  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress__bar {
-    transition: none;
-  }
 }

package/summer-cloud/components/stepper.css

@@ -0,0 +1,90 @@
+/* summer-cloud — 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.
+ * Unfilled track is --rb-bg-blend (the same token .rb-progress already uses
+ * for its trough); a filled segment glows with --rb-accent-glow at the same
+ * 10px blur .rb-progress's value fill uses. The current node's lift is
+ * --rb-shadow-raised -- "nothing sits flat on the page". */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).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="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__step:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  right: 50%;
+  width: 100%;
+  height: 2px;
+  background: var(--rb-bg-blend);
+  z-index: -1;
+  transition: background-color var(--rb-transition), box-shadow var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+  box-shadow: 0 0 10px var(--rb-accent-glow);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).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="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper--current .rb-stepper__node {
+  background: var(--rb-surface);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+  box-shadow: var(--rb-shadow-raised);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).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="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__step:not(:first-child)::before {
+    transition: none;
+  }
+}

package/summer-cloud/components/table.css

@@ -26,6 +26,17 @@
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table tbody tr:hover {
   background: var(--rb-sky-tint);
 }
+/* --interactive: clickable rows (a tabindex tr, or a row-wrapping button/link) —
+ * pointer cursor plus a keyboard-equivalent of the sky-tint hover and a focus ring. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: -2px;
+  background: var(--rb-sky-tint);
+}
 /* Numeric cells take the mono voice — prices and data read as utility-grade. */
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table td.rb-num,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table th.rb-num {

package/summer-cloud/design.md

@@ -82,6 +82,11 @@ Three voices, per the project's design system:
 Interactive text (buttons, links, tabs) is Plus Jakarta Sans 600 at 14px,
 sentence case. Uppercase never appears outside the mono voice.
 
+Bare (unclassed) `h1`-`h6` carry the display voice directly — Plus Jakarta
+Sans 700, `--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).
+
 The three webfonts are declared in `styles/manifest.json` (`summer-cloud.fonts`);
 consumers load that stylesheet or self-host. Every stack falls back to a system
 family.
@@ -112,8 +117,15 @@ theme-agnostic). Variants use BEM-ish modifiers (`rb-btn--primary`).
 - **Card** `.rb-card` — glass panel; `--floating` adds the Level 2 hover lift.
 - **NavLink** `.rb-link` — pill, sky-tint wash, `→` slides 4px on hover;
   `--active` / `[aria-current=page]` becomes the violet underline rule.
+- **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` — glass by default; `--primary` (solid violet CTA, one
-  per view), `--accent` (sky-edged glass), `--ghost`, `--danger`.
+  per view), `--accent` (sky-edged glass), `--ghost`, `--danger`. `--sm` is a
+  compact size for inline and table-row actions — the pill shape is kept.
+  `.rb-icon-btn` is a square icon-only hit target (>=2rem), paired with
+  `.rb-btn` — the pill radius reads as a circle on the square box.
 - **Form** `.rb-input`, `.rb-textarea`, `.rb-select`, `.rb-label`, `.rb-field`,
   `.rb-checkbox`, `.rb-radio`, `.rb-switch`, `.rb-choice` — sunken fields, no
   resting border, sky-blue ring on focus. The switch is the oversized
@@ -126,11 +138,37 @@ theme-agnostic). Variants use BEM-ish modifiers (`rb-btn--primary`).
 - **Tabs** `.rb-tabs`/`.rb-tab`/`.rb-tabpanel` — violet underline when active.
 - **Table** `.rb-table` — mono uppercase headers, sky-tint row hover; add
   `.rb-num` to numeric cells for the mono/right-aligned treatment.
+  `--interactive` marks clickable rows: pointer cursor, plus a focus-visible
+  ring (and the same sky-tint wash) for a `tabindex` row or a row-wrapping
+  button/link.
 - **Progress** `.rb-progress`, **Spinner** `.rb-spinner` — glowing violet.
+- **Stepper** `.rb-stepper` (+ `__step` / `__node` / `__label`, `--complete` /
+  `--current` / `--upcoming`) — a milestone rail: complete nodes solid accent
+  with a checkmark, current a white-on-accent-border ring lifted with
+  `--rb-shadow-raised` ("nothing sits flat on the page"), upcoming faint
+  surface-2. Rail track is `--rb-bg-blend` (the same token `.rb-progress`
+  itself uses); each connector segment glows with `--rb-accent-glow` at the
+  same 10px blur `.rb-progress`'s value fill uses 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 — a friendly, soft touch consistent
+  with the theme's airy, optimistic voice.
+- **Pre / log block** `.rb-pre` — command/log `<pre>`; sunken background,
+  `--rb-outline` hairline (not `--rb-border`, which is the glass-only token
+  and would be invisible on this opaque surface — same choice `.rb-table`
+  makes), 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 (plus its `.rb-chip` and
-`.rb-card--floating` extras); the rackbops-specific `eyebrow`, `tabstrip`,
-`wordmark`, and `card--raised` surfaces are not part of it.
+`.rb-card--floating` extras); the rackbops-specific `eyebrow`, `tabstrip`, and
+`wordmark` surfaces are not part of it. `.rb-card--raised` is also absent:
+nazuraki's own second elevation tier is `--floating` ("Level 2," documented
+above), already carried over into this port under that name, so `--raised`
+would just be a near-duplicate of it — the port doesn't add one. `Card raised` is a documented no-op here (see `contract.test.mjs`'s
+allowlist).
 
 ## Deviations from the Stitch source
 

package/summer-cloud/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";