@rackbops/styles 0.1.0

package/summer-cloud/components/form.css

@@ -0,0 +1,146 @@
+/* summer-cloud — form controls: input, textarea, select, checkbox, radio, switch
+ * Fields are sunken (no resting border) and bloom a sky-blue ring on focus. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-input,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-select,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-textarea {
+  display: block;
+  width: 100%;
+  padding: 0.75rem var(--rb-space-3);
+  background: var(--rb-surface-sunken);
+  border: 1px solid transparent;
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+  font-size: 16px;
+  transition: border-color var(--rb-transition), box-shadow var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).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='%23484457' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-input::placeholder,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-textarea::placeholder {
+  color: var(--rb-outline);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-input:focus,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-select:focus,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-textarea:focus {
+  outline: none;
+  border-color: var(--rb-accent-2);
+  box-shadow: 0 0 0 4px var(--rb-accent-2-glow);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-input[aria-invalid="true"],
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-textarea[aria-invalid="true"] {
+  border-color: var(--rb-danger);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-input[aria-invalid="true"]:focus,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-textarea[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.2);
+}
+
+/* Labels are the mono voice: small, tracked, utility-grade. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-label {
+  display: block;
+  margin-bottom: var(--rb-space-1);
+  padding-left: var(--rb-space-1);
+  color: var(--rb-text-faint);
+  font-family: var(--rb-font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: var(--rb-label-tracking);
+}
+
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-field {
+  margin-bottom: var(--rb-space-3);
+}
+
+/* checkbox & radio */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-checkbox,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-radio {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-outline);
+  border-radius: var(--rb-radius-sm);
+  cursor: pointer;
+  transition: background var(--rb-transition), border-color var(--rb-transition),
+    box-shadow var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-radio {
+  border-radius: 50%;
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-checkbox:checked,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-radio:checked {
+  background: var(--rb-accent);
+  border-color: var(--rb-accent);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-checkbox:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-radio:checked {
+  box-shadow: inset 0 0 0 4px var(--rb-surface);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-checkbox:focus-visible,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-radio:focus-visible,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-switch:focus-visible {
+  outline: none;
+  border-color: var(--rb-accent-2);
+  box-shadow: 0 0 0 4px var(--rb-accent-2-glow);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).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;
+}
+
+/* switch — the cloud-toggle: oversized, squishy, green when live */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-switch {
+  appearance: none;
+  width: 3rem;
+  height: 1.75rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-outline);
+  border-radius: var(--rb-radius-pill);
+  cursor: pointer;
+  position: relative;
+  transition: background var(--rb-transition), border-color var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(1.75rem - 6px);
+  height: calc(1.75rem - 6px);
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(93, 43, 255, 0.2);
+  transition: transform var(--rb-transition) var(--rb-ease-bounce);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-switch:checked {
+  background: var(--rb-success);
+  border-color: var(--rb-success);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-switch:checked::after {
+  transform: translateX(1.25rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-switch::after {
+    transition: none;
+  }
+}

package/summer-cloud/components/link.css

@@ -0,0 +1,60 @@
+/* summer-cloud — nav link: pill that fills with sky tint, arrow slides out */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border: 1px solid transparent;
+  border-radius: var(--rb-radius-pill);
+  color: var(--rb-text-faint);
+  text-decoration: none;
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  transition:
+    background var(--rb-transition),
+    color var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link::after {
+  content: "→";
+  color: var(--rb-accent-2);
+  transition: transform var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link:focus-visible {
+  background: var(--rb-sky-tint);
+  color: var(--rb-accent);
+  outline: none;
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link:hover::after,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link:focus-visible::after {
+  transform: translateX(4px);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link:active {
+  transform: scale(0.95);
+}
+
+/* Current page: violet with the underline rule from the top nav. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link--active,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link[aria-current="page"] {
+  background: none;
+  border-radius: 0;
+  border-bottom: 2px solid var(--rb-accent);
+  color: var(--rb-accent);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link--active::after,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link[aria-current="page"]::after {
+  content: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link,
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link::after {
+    transition: none;
+  }
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link:hover::after,
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link:focus-visible::after,
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-link:active {
+    transform: none;
+  }
+}

package/summer-cloud/components/progress.css

@@ -0,0 +1,43 @@
+/* summer-cloud — progress bar & spinner: glowing violet indicators */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress {
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--rb-bg-blend);
+  border-radius: var(--rb-radius-pill);
+  overflow: hidden;
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-progress__bar {
+  height: 100%;
+  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 {
+  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-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--rb-outline);
+  border-top-color: var(--rb-accent);
+  border-radius: 50%;
+  animation: rb-sc-spin 0.8s linear infinite;
+}
+@keyframes rb-sc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :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/table.css

@@ -0,0 +1,34 @@
+/* summer-cloud — table: mono header labels, sky-tint row hover */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table th {
+  padding: var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-outline);
+  color: var(--rb-text-faint);
+  text-align: left;
+  text-transform: uppercase;
+  font-family: var(--rb-font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table td {
+  padding: var(--rb-space-3);
+  border-bottom: 1px solid rgba(201, 195, 218, 0.4);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table tbody tr {
+  transition: background var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-table tbody tr:hover {
+  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 {
+  font-family: var(--rb-font-mono);
+  text-align: right;
+}

package/summer-cloud/components/tabs.css

@@ -0,0 +1,38 @@
+/* summer-cloud — tabs: violet underline on the active tab, sky tint on hover */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-2);
+  border-bottom: 1px solid var(--rb-outline);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-tab {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  margin-bottom: -1px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: var(--rb-radius-sm) var(--rb-radius-sm) 0 0;
+  color: var(--rb-text-faint);
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  cursor: pointer;
+  transition: color var(--rb-transition), background var(--rb-transition),
+    border-color var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-tab:hover {
+  background: var(--rb-sky-tint);
+  color: var(--rb-accent);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px var(--rb-accent-2-glow);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-tab--active,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-tab[aria-selected="true"] {
+  color: var(--rb-accent);
+  border-bottom-color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-bold);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-tabpanel {
+  padding: var(--rb-space-3) 0;
+}

package/summer-cloud/design.md

@@ -0,0 +1,165 @@
+# summer-cloud
+
+> **Source & attribution.** Ported from
+> [`nazuraki/ui-std-lib`](https://github.com/nazuraki/ui-std-lib)'s
+> `@nazuraki/styles` "summer-cloud" theme (MIT, Copyright (c) 2026 nazuraki — see
+> the repo [`NOTICE`](../../NOTICE)), re-namespaced from `--nb-*` / `.nb-*` /
+> `data-nb-style` to the rackbops `--rb-*` contract. The aesthetic below is
+> nazuraki's; only the token/class names changed.
+
+Light, airy, high-velocity retail aesthetic — "Airy Energetic." Frosted white
+glass floating on a sky gradient, with a vivid violet doing all the work of
+emphasis. Where neon-butterfly is a command console, summer-cloud is a summer
+storefront: weightless, optimistic, effortless. Nothing sits flat on the page;
+everything hovers.
+
+Derived from the Stitch project *Summer Cloud UI System*
+(`15973631330153907862`): Style Guide, Components Showcase, Retail Dashboard.
+
+## Token mapping (dual accent + tinted shadows)
+
+summer-cloud is a two-accent design; the rackbops baseline carries a single
+`--rb-accent`. It also ships real shadow/tracking/pill tokens that fill baseline
+slots the darker themes had to synthesize:
+
+| Role | rackbops token | Value |
+| --- | --- | --- |
+| Primary / brand voice (violet) | `--rb-accent` (+ `--rb-accent-fg`, `--rb-accent-bright`, `--rb-accent-glow`, `--rb-accent-border`) | `#4500d9` |
+| Active / secondary (sky blue) | `--rb-accent-2` (+ `--rb-accent-2-glow`, `--rb-accent-2-deep`) — theme extras | `#0cb3ff` |
+| Glass tiers | `--rb-surface-glass` / `--rb-surface-glass-high` — extras | `0.6` / `0.8` white |
+| Tinted shadows | `--rb-shadow-sm` / `--rb-shadow-lg` (+ `--rb-shadow-raised`, `--rb-shadow-raised-hover` extras) | primary-tinted |
+| Display tracking | `--rb-heading-tracking` | `-0.02em` |
+
+summer-cloud's shadow scale is airy by design: `--rb-shadow-sm` is a soft
+`0 10px 30px` ambient (not the tight 1–3px the console themes use), and `.rb-card`
+wears `--rb-shadow-lg` at rest — the "everything hovers" look. A shared component
+written against the usual sm=resting / lg=elevated convention will read heavier
+here; that is intended, not a bug.
+
+## Color
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#f6fafe` | Flat page ground; the `.rb-bg` sky gradient runs `--rb-sky-start` `#f0f4f8` → `--rb-sky-end` `#c9e6ff` at 135°, `fixed` |
+| Surface | `#ffffff` | Dialogs and fully opaque panels |
+| Surface sunken | `#f0f4f8` | Inset form fields |
+| Surface glass | `rgba(255,255,255,0.6)` + 12px blur | Cards, alerts (Level 1) |
+| Surface glass high | `rgba(255,255,255,0.8)` + 20px blur | Floating/hover cards, modals (Level 2) |
+| Text | `#171c1f` | Body text |
+| Text faint | `#484457` | Secondary text, labels, idle nav |
+| Accent (violet) | `#4500d9` | Headings, CTAs, active states, prices, progress |
+| Accent bright | `#5d2bff` | Shadow/glow tint and primary hover fill |
+| Accent-2 (sky blue) | `#0cb3ff` | Focus rings, secondary path, info — the interactive signal |
+| Accent-2 deep | `#006492` | Sky blue as *text* (the bright value fails contrast) |
+| Info | `#0cb3ff` | Informational callouts and badges |
+| Success | `#30e330` | Switch "on" state — deliberately vibrant, the one high-energy pop |
+| Warning | `#f2c025` | Caution states, "New" badges |
+| Danger | `#ff4d4d` (retail red) | Errors, "Sale" badges, alert rules — carries dark text, never white |
+| Danger deep | `#cc1f1f` | Danger where white text sits on it (destructive buttons) |
+| Border | `rgba(255,255,255,0.4)` | Glass edges — the highlight that makes glass read as glass |
+| Outline | `#c9c3da` | Hairlines on opaque surfaces (chips, table rules, checkboxes) |
+| Sky tint | `rgba(255,255,255,0.7)` | Hover wash on ghost/nav elements |
+
+Rules: the violet is the only loud color and carries emphasis alone — resting UI
+is faint grey on white glass. Sky blue means "you can interact with this" (focus,
+secondary actions, info). Never use pure black; never use a grey shadow. The
+gradient is not decoration — on a flat white page the glass has nothing to be
+glass against, and the theme collapses.
+
+## Typography
+
+Three voices, per the project's design system:
+
+- **Display & headings:** Plus Jakarta Sans (600/700/800), letter-spacing
+  `-0.02em` (`--rb-heading-tracking`) at display sizes — friendly rounded
+  terminals, tucked in tight.
+- **Body:** Inter 400, 16px/24px. Sentence case, always.
+- **Data & labels:** JetBrains Mono 500, 12px, tracking `0.05em`
+  (`--rb-label-tracking`). Field labels, badges, table headers, prices, metadata.
+  Uppercase for badges and table headers (furniture); sentence case for field
+  labels, which people read as words.
+
+Interactive text (buttons, links, tabs) is Plus Jakarta Sans 600 at 14px,
+sentence case. Uppercase never appears outside the mono voice.
+
+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.
+
+## Shape & effects
+
+- Radius `1rem` (16px) for cards, panels, and fields; **pills**
+  (`--rb-radius-pill`) for every button, badge, and chip; `--rb-radius-sm`
+  (`0.25rem`) minimum anywhere else. Never 0.
+- Depth is **blur + tinted shadow**, never grey drop shadows. Shadows are tinted
+  with `#5d2bff`: `--rb-shadow-lg` (`0 20px 40px rgba(93,43,255,0.08)`) at rest,
+  `--rb-shadow-raised` (`0 4px 14px rgba(93,43,255,0.39)`) for raised CTAs.
+- Two elevation tiers only — Level 1 glass (0.6 white / 12px blur) for content,
+  Level 2 (0.8 white / 20px blur + lift) for interactive and floating things.
+- **Bouncy, not linear.** Buttons scale to 1.03 on hover and 0.95 on press with
+  `--rb-ease-bounce` (`cubic-bezier(0.34,1.56,0.64,1)`); floating cards translate
+  `-4px`.
+- Focus is a 4px sky-blue ring (`0 0 0 4px rgba(12,179,255,0.2)`), never an
+  outline suppression without a replacement.
+- Spacing is strictly multiples of 8px. When in doubt, add 8.
+- Respect `prefers-reduced-motion` — every transform is dropped.
+
+## Components
+
+Class prefix `rb-` (shared across themes so `@rackbops/ui-react` stays
+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.
+- **Button** `.rb-btn` — glass by default; `--primary` (solid violet CTA, one
+  per view), `--accent` (sky-edged glass), `--ghost`, `--danger`.
+- **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
+  "cloud-toggle": squishy, and green when live.
+- **Badge** `.rb-badge` + semantic modifiers — solid pills, mono uppercase.
+  **Chip** `.rb-chip` — outlined filter chip; `--selected` fills violet (a
+  summer-cloud extra, beyond the shared component set).
+- **Alert** `.rb-alert` — glass card with a 4px semantic left rule.
+- **Dialog** `.rb-dialog` — native `<dialog>`, opaque white, blurred backdrop.
+- **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.
+- **Progress** `.rb-progress`, **Spinner** `.rb-spinner` — glowing violet.
+
+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.
+
+## Deviations from the Stitch source
+
+*(nazuraki's own authoring record for this theme, carried over with the port — it
+describes nazuraki's decisions when building summer-cloud, not the rackbops copy.)*
+
+- The generated screens flattened all three type voices to Plus Jakarta Sans.
+  This theme follows the project's written design system instead (Inter body,
+  JetBrains Mono labels), the richer and intended spec.
+- The project's stored theme carried an earlier palette (near-black primary
+  `#01020e`, lavender secondary `#7248ae`). The rendered screens — all three, in
+  agreement — use violet `#4500d9` and sky blue `#0cb3ff`. This theme matches the
+  screens, since that is what Summer Cloud actually looks like.
+- Tabs, table, dialog, and spinner do not appear in the source screens; they are
+  extrapolated from the rules above to complete the component inventory.
+- The source screens set white text on retail red (`#ff4d4d`), which is 3.27:1 —
+  below AA at badge and button sizes. This theme keeps the vivid red and puts
+  dark text on it (4.97:1), and uses `--rb-danger-deep` for the solid destructive
+  button (5.55:1 on white). Every other foreground/background pair in the palette
+  clears AA.
+
+## Code syntax
+
+Tokens `--rb-code-*` (theme extra). Palette hues deepened for contrast on white:
+violet keywords, deep-green strings, deep-amber numbers, accent-deep functions,
+deep-teal types, danger-deep variables, muted-faint comments, faint meta.
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="summer-cloud"` (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/summer-cloud/index.css

@@ -0,0 +1,13 @@
+/* summer-cloud — full theme entry point */
+@import "./tokens.css";
+@import "./base.css";
+@import "./components/card.css";
+@import "./components/link.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";

package/summer-cloud/tokens.css

@@ -0,0 +1,103 @@
+/* summer-cloud — design tokens
+ * Ported from nazuraki/ui-std-lib's @nazuraki/styles "summer-cloud" theme (MIT,
+ * Copyright (c) 2026 nazuraki — see the repo NOTICE), re-namespaced to the
+ * rackbops (--rb-*) contract. Consume via:
+ *   @import "@rackbops/styles/summer-cloud/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-rb-style="summer-cloud" — 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.
+ *
+ * Names marked (extra) are additions beyond the baseline set that only this
+ * theme's own component CSS relies on. summer-cloud is a dual-accent light
+ * design: violet is the brand voice (baseline --rb-accent); sky blue marks
+ * active paths (the --rb-accent-2 extra). Depth is a primary-tinted soft shadow,
+ * never grey — its shadow-soft/shadow map onto baseline --rb-shadow-sm/-lg.
+ */
+:where([data-rb-style="summer-cloud"]) {
+  color-scheme: light;
+
+  /* color — airy off-white ground */
+  --rb-bg: #f6fafe;
+  --rb-bg-blend: #eaeef2; /* (extra) */
+  --rb-surface: #ffffff;
+  --rb-surface-2: #eef3f9; /* tinted raised panel */
+  --rb-surface-sunken: #f0f4f8; /* inset fields */
+  --rb-surface-glass: rgba(255, 255, 255, 0.6); /* (extra) glass panes */
+  --rb-surface-glass-high: rgba(255, 255, 255, 0.8); /* (extra) floating tier */
+  --rb-text: #171c1f;
+  --rb-text-soft: #2f2b3a; /* secondary body copy, above faint */
+  --rb-text-faint: #484457; /* labels, meta */
+  --rb-border: rgba(255, 255, 255, 0.4); /* on glass */
+  --rb-border-strong: rgba(255, 255, 255, 0.7); /* lit top edge of glass panes */
+  --rb-outline: #c9c3da; /* (extra) hairline on opaque surfaces */
+
+  /* accent — violet is the brand voice */
+  --rb-accent: #4500d9;
+  --rb-accent-fg: #ffffff; /* white ink on the solid violet fill */
+  --rb-accent-wash: rgba(69, 0, 217, 0.1); /* light violet tint */
+  --rb-accent-grad: linear-gradient(120deg, #4500d9, #0cb3ff); /* violet → sky */
+  --rb-accent-bright: #5d2bff; /* (extra) shadow/glow tint */
+  --rb-accent-glow: rgba(93, 43, 255, 0.4); /* (extra) */
+  --rb-accent-border: rgba(69, 0, 217, 0.2); /* (extra) */
+
+  /* accent-2 (extra) — sky blue: active states, links, focus */
+  --rb-accent-2: #0cb3ff;
+  --rb-accent-2-glow: rgba(12, 179, 255, 0.2);
+  --rb-accent-2-deep: #006492; /* readable accent text on white */
+
+  /* semantic */
+  --rb-info: #0cb3ff;
+  --rb-success: #30e330;
+  --rb-warning: #f2c025;
+  --rb-danger: #ff4d4d;
+  --rb-danger-deep: #cc1f1f; /* (extra) danger where white text sits on it */
+
+  /* sky gradient (extra) */
+  --rb-sky-start: #f0f4f8;
+  --rb-sky-end: #c9e6ff;
+  --rb-sky-tint: rgba(255, 255, 255, 0.7);
+
+  /* code syntax (extra) — deepened palette hues for contrast on white */
+  --rb-code-keyword: #4500d9;
+  --rb-code-string: #157a2a;
+  --rb-code-number: #9a6b00;
+  --rb-code-comment: #6e6880;
+  --rb-code-function: #006492;
+  --rb-code-variable: #cc1f1f;
+  --rb-code-type: #00877a;
+  --rb-code-meta: #484457;
+
+  /* typography */
+  --rb-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  --rb-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --rb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --rb-font-weight: 400;
+  --rb-font-weight-medium: 600;
+  --rb-font-weight-bold: 700;
+  --rb-heading-tracking: -0.02em; /* display sizes */
+  --rb-label-tracking: 0.05em;
+  --rb-text-sm: 14px;
+
+  /* shape & effects — big soft radii, primary-tinted soft shadows */
+  --rb-radius: 1rem;
+  --rb-radius-sm: 0.25rem; /* (extra) */
+  --rb-radius-lg: 1.5rem; /* cards and large containers */
+  --rb-radius-pill: 9999px; /* chips, badges, switches */
+  --rb-shadow-sm: 0 10px 30px rgba(0, 100, 146, 0.05); /* soft ambient */
+  --rb-shadow-lg: 0 20px 40px rgba(93, 43, 255, 0.08); /* large ambient */
+  --rb-shadow-raised: 0 4px 14px rgba(93, 43, 255, 0.39); /* (extra) raised button */
+  --rb-shadow-raised-hover: 0 6px 20px rgba(93, 43, 255, 0.5); /* (extra) */
+  --rb-blur: 12px;
+  --rb-blur-high: 20px; /* (extra) */
+  --rb-transition: 0.3s;
+  --rb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* (extra) */
+
+  /* spacing */
+  --rb-space-1: 0.25rem;
+  --rb-space-2: 0.5rem;
+  --rb-space-3: 1rem;
+  --rb-space-4: 1.5rem;
+  --rb-space-5: 2rem;
+}