@rackbops/styles 0.1.0

package/neon-butterfly/components/form.css

@@ -0,0 +1,124 @@
+/* neon-butterfly — form controls: input, textarea, select, checkbox, radio, switch */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-input,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-select,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-textarea {
+  display: block;
+  width: 100%;
+  padding: var(--rb-space-2) var(--rb-space-3);
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-mono);
+  font-weight: var(--rb-font-weight);
+  font-size: var(--rb-text-sm);
+  transition: border-color var(--rb-transition), box-shadow var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).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='%23958da1' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-input::placeholder,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-textarea::placeholder {
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-input:focus,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-select:focus,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-textarea:focus {
+  outline: none;
+  border-color: var(--rb-accent-border);
+  box-shadow: 0 0 8px rgba(210, 187, 255, 0.3);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-input[aria-invalid="true"],
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-textarea[aria-invalid="true"] {
+  border-color: var(--rb-danger);
+}
+
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-label {
+  display: block;
+  margin-bottom: var(--rb-space-1);
+  color: var(--rb-text-faint);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-label-tracking);
+}
+
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-field {
+  margin-bottom: var(--rb-space-3);
+}
+
+/* checkbox & radio */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-checkbox,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-radio {
+  appearance: none;
+  width: 1.1rem;
+  height: 1.1rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: border-color var(--rb-transition), box-shadow var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-radio {
+  border-radius: 50%;
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-checkbox:checked,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-radio:checked {
+  border-color: var(--rb-accent-2);
+  box-shadow: inset 0 0 0 3px var(--rb-surface), inset 0 0 0 1rem var(--rb-accent-2),
+    0 0 6px var(--rb-accent-2-glow);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-checkbox:focus-visible,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-radio:focus-visible,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-switch:focus-visible {
+  outline: none;
+  border-color: var(--rb-accent-border);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).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 */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-switch {
+  appearance: none;
+  width: 2.4rem;
+  height: 1.3rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: 1rem;
+  cursor: pointer;
+  position: relative;
+  transition: border-color var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(1.3rem - 6px);
+  height: calc(1.3rem - 6px);
+  border-radius: 50%;
+  background: var(--rb-text-faint);
+  transition: transform var(--rb-transition), background var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-switch:checked {
+  border-color: var(--rb-accent-2);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-switch:checked::after {
+  transform: translateX(1.1rem);
+  background: var(--rb-accent-2);
+  box-shadow: 0 0 6px var(--rb-accent-2-glow);
+}

package/neon-butterfly/components/link.css

@@ -0,0 +1,55 @@
+/* neon-butterfly — nav link: uppercase mono link with ">" chevron and glow hover */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link {
+  display: flex;
+  align-items: baseline;
+  gap: var(--rb-space-3);
+  padding: 1.25rem var(--rb-space-4);
+  background: var(--rb-surface-glass);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  backdrop-filter: blur(var(--rb-blur));
+  color: var(--rb-text);
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: var(--rb-font-weight-bold);
+  font-size: var(--rb-text-sm);
+  letter-spacing: var(--rb-label-tracking);
+  transition:
+    border-color var(--rb-transition),
+    color var(--rb-transition),
+    transform var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link::before {
+  content: ">";
+  color: var(--rb-text-faint);
+  transition: color var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link:hover {
+  border-color: var(--rb-accent-border);
+  color: var(--rb-accent);
+  transform: translateX(4px);
+  animation: rb-nb-pulse-glow 2s infinite;
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link:hover::before {
+  color: var(--rb-accent-2);
+  text-shadow: 0 0 5px var(--rb-accent-2-glow);
+}
+
+@keyframes rb-nb-pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 5px rgba(210, 187, 255, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 20px var(--rb-accent-glow);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link {
+    transition: none;
+  }
+  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link:hover {
+    animation: none;
+  }
+}

package/neon-butterfly/components/progress.css

@@ -0,0 +1,41 @@
+/* neon-butterfly — progress bar & spinner */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress {
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: 1rem;
+  overflow: hidden;
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress__bar {
+  height: 100%;
+  background: var(--rb-accent);
+  box-shadow: 0 0 8px var(--rb-accent-glow);
+  border-radius: 1rem;
+  transition: width var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress__bar--accent {
+  background: var(--rb-accent-2);
+  box-shadow: 0 0 8px var(--rb-accent-2-glow);
+}
+
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--rb-border);
+  border-top-color: var(--rb-accent);
+  border-radius: 50%;
+  animation: rb-nb-spin 0.8s linear infinite;
+}
+@keyframes rb-nb-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-spinner {
+    animation-duration: 2s;
+  }
+}

package/neon-butterfly/components/table.css

@@ -0,0 +1,27 @@
+/* neon-butterfly — table */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table th {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-accent-border);
+  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="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table td {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table tbody tr {
+  transition: background var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table tbody tr:hover {
+  background: var(--rb-surface-glass);
+}

package/neon-butterfly/components/tabs.css

@@ -0,0 +1,33 @@
+/* neon-butterfly — tabs */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-2);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-tab {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  margin-bottom: -1px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--rb-text-faint);
+  text-transform: uppercase;
+  font-family: var(--rb-font-mono);
+  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), border-color var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-tab:hover {
+  color: var(--rb-text);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-tab--active,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-tab[aria-selected="true"] {
+  color: var(--rb-accent);
+  border-bottom-color: var(--rb-accent);
+  text-shadow: 0 0 8px var(--rb-accent-glow);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-tabpanel {
+  padding: var(--rb-space-3) 0;
+}

package/neon-butterfly/design.md

@@ -0,0 +1,103 @@
+# neon-butterfly
+
+> **Source & attribution.** Ported from
+> [`nazuraki/ui-std-lib`](https://github.com/nazuraki/ui-std-lib)'s
+> `@nazuraki/styles` "neon-butterfly" 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.
+
+Dark, mono-spaced, neon-accented terminal aesthetic. Deep navy backgrounds with
+frosted-glass surfaces; lilac is the primary voice, neon lime the accent that
+signals activity. Everything is uppercase, tracked-out JetBrains Mono — the UI
+should feel like a beautiful command console, not a document.
+
+## Token mapping (dual accent)
+
+neon-butterfly is a two-accent design, but the rackbops baseline carries a single
+`--rb-accent`. The mapping:
+
+| Role | rackbops token | Value |
+| --- | --- | --- |
+| Primary / brand voice (lilac) | `--rb-accent` (+ `--rb-accent-fg`, `--rb-accent-glow`, `--rb-accent-border`) | `#d2bbff` |
+| Active / critical (neon lime) | `--rb-accent-2` (+ `--rb-accent-2-glow`) — theme extra | `#39ff14` |
+| Lit glass edge | `--rb-border-strong` | `rgba(255,255,255,0.25)` |
+| Glass pane fill | `--rb-surface-glass` — theme extra | `rgba(23,31,51,0.55)` |
+
+## Color
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#0b1326` | Page background (often blended over imagery with `luminosity`) |
+| Surface | `#171f33` | Solid panels, inputs, dialogs |
+| Surface glass | `rgba(23,31,51,0.55)` + 12px blur | Cards, nav links, alerts |
+| Text | `#dae2fd` | Body text |
+| Text faint | `#958da1` | Secondary text, labels, idle chevrons |
+| Accent (lilac) | `#d2bbff` | Emphasis, hover states, active tabs, glow |
+| Accent-2 (neon lime) | `#39ff14` | Activity signals: checked states, chevrons on hover, success |
+| Info | `#4dc9ff` | Informational callouts and badges |
+| Success | `#39ff14` | Shares the accent-2 hue — success *is* the neon signal |
+| Warning | `#ffd23f` | Caution states |
+| Danger | `#ff2d78` | Destructive actions, errors |
+| Border | `rgba(255,255,255,0.1)` | All resting borders |
+
+The signature page background is the butterfly-circuit artwork
+(`assets/butterfly-circuit.png`) blended into the navy with `luminosity` — apply
+via `.rb-bg` on `<body>`. Optional; plain `--rb-bg` navy is also correct.
+
+Rules: color is communication — resting UI stays in navy/faint; lilac and lime
+appear only on interaction or state. Never use pure white or pure black.
+
+## Typography
+
+- **Family:** JetBrains Mono (weights 450 regular, 700 bold; `--rb-font-weight`
+  is 450, `--rb-font-weight-medium`/`-bold` are 700); fallback `ui-monospace`.
+- **Interactive text** (buttons, links, tabs, labels, table headers): uppercase,
+  700, 14px (labels/headers 11–12px), letter-spacing `0.1em` (`--rb-label-tracking`).
+- **Body text:** sentence case, 450.
+
+Webfonts (JetBrains Mono) are declared in `styles/manifest.json`
+(`neon-butterfly.fonts`); consumers load that stylesheet or self-host, and the
+token stack falls back to `ui-monospace`.
+
+## Shape & effects
+
+- Radius `0.5rem` everywhere (`--rb-radius` == `--rb-radius-lg`); pills
+  (`--rb-radius-pill`) for switches/progress.
+- Borders are 1px hairlines; emphasis comes from border *color*, not weight.
+- Glow, not shadow: elevation is expressed with colored `box-shadow` glows
+  (`rb-nb-pulse-glow` on hover) rather than dark drop shadows. `--rb-shadow-*`
+  exist for baseline parity but the components lean on glow.
+- Transitions 0.3s; hover motion is a 4px `translateX` slide on links.
+- Respect `prefers-reduced-motion`.
+
+## Components
+
+Class prefix `rb-`. Variants use BEM-ish modifiers (`rb-btn--accent`).
+
+- **Card** `.rb-card` — frosted glass panel.
+- **NavLink** `.rb-link` — the switchboard link: `>` chevron turns lime on hover.
+- **Button** `.rb-btn` — `--primary`, `--accent`, `--danger` variants.
+- **Form** `.rb-input`, `.rb-textarea`, `.rb-select`, `.rb-label`, `.rb-field`,
+  `.rb-checkbox`, `.rb-radio`, `.rb-switch`, `.rb-choice` — checked states glow lime.
+- **Badge** `.rb-badge` + semantic modifiers.
+- **Alert** `.rb-alert` — left accent bar carries the semantic color.
+- **Dialog** `.rb-dialog` — native `<dialog>`, lilac border + glow, blurred backdrop.
+- **Tabs** `.rb-tabs`/`.rb-tab`/`.rb-tabpanel` — active tab underlined in lilac with text glow.
+- **Table** `.rb-table` — lilac header rule, glass row hover.
+- **Progress** `.rb-progress`, **Spinner** `.rb-spinner` — glowing lilac indicators.
+
+This port carries nazuraki's original component set; the rackbops-specific
+`eyebrow`, `tabstrip`, `wordmark`, and `card--raised` surfaces are not part of it.
+
+## Code syntax
+
+Tokens `--rb-code-*` (theme extra). Lilac keywords, neon-lime strings, gold
+numbers, info-cyan functions, light-cyan types, softened-pink variables,
+dimmed-faint comments, faint meta.
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="neon-butterfly"` (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/neon-butterfly/index.css

@@ -0,0 +1,13 @@
+/* neon-butterfly — 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/neon-butterfly/tokens.css

@@ -0,0 +1,89 @@
+/* neon-butterfly — design tokens
+ * Ported from nazuraki/ui-std-lib's @nazuraki/styles "neon-butterfly" theme
+ * (MIT, Copyright (c) 2026 nazuraki — see the repo NOTICE), re-namespaced to the
+ * rackbops (--rb-*) contract. Consume via:
+ *   @import "@rackbops/styles/neon-butterfly/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-rb-style="neon-butterfly" — 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. neon-butterfly is a dual-accent design:
+ * lilac is the brand voice (baseline --rb-accent); neon green marks active
+ * paths and critical signals (the --rb-accent-2 extra). All-mono type; depth is
+ * glow, not shadow, so --rb-shadow-* are declared for parity but the components
+ * lean on the glow extras.
+ */
+:where([data-rb-style="neon-butterfly"]) {
+  color-scheme: dark;
+
+  /* color — deep navy foundation */
+  --rb-bg: #0b1326;
+  --rb-bg-blend: #1a1f2e; /* (extra) blend behind the butterfly-circuit bg */
+  --rb-surface: #171f33;
+  --rb-surface-2: #1f2740; /* raised panel, a step above surface */
+  --rb-surface-sunken: #0e1526; /* inset fields */
+  --rb-surface-glass: rgba(23, 31, 51, 0.55); /* (extra) glass panes over blur */
+  --rb-text: #dae2fd;
+  --rb-text-soft: #aeb4cf; /* secondary body copy */
+  --rb-text-faint: #958da1; /* labels, idle tabs, meta */
+  --rb-border: rgba(255, 255, 255, 0.1);
+  --rb-border-strong: rgba(255, 255, 255, 0.25); /* lit top edge of glass panes */
+
+  /* accent — lilac is the brand voice */
+  --rb-accent: #d2bbff;
+  --rb-accent-fg: #0b1326; /* dark ink on the solid lilac fill */
+  --rb-accent-wash: rgba(210, 187, 255, 0.16);
+  --rb-accent-grad: linear-gradient(120deg, #d2bbff, #39ff14); /* lilac → neon */
+  --rb-accent-glow: rgba(210, 187, 255, 0.6); /* (extra) lilac glow */
+  --rb-accent-border: rgba(210, 187, 255, 0.8); /* (extra) lit lilac edge */
+
+  /* accent-2 (extra) — neon green: active states, focus, critical paths */
+  --rb-accent-2: #39ff14;
+  --rb-accent-2-glow: rgba(57, 255, 20, 0.5);
+
+  /* semantic */
+  --rb-info: #4dc9ff;
+  --rb-success: #39ff14;
+  --rb-warning: #ffd23f;
+  --rb-danger: #ff2d78;
+
+  /* code syntax (extra) — lilac keywords, neon strings */
+  --rb-code-keyword: #d2bbff;
+  --rb-code-string: #39ff14;
+  --rb-code-number: #ffd23f;
+  --rb-code-comment: #8a8199;
+  --rb-code-function: #4dc9ff;
+  --rb-code-variable: #ff6ba0;
+  --rb-code-type: #7fdcff;
+  --rb-code-meta: #958da1;
+
+  /* typography — all-mono: display and body share the JetBrains Mono stack */
+  --rb-font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --rb-font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --rb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --rb-font-weight: 450;
+  --rb-font-weight-medium: 700; /* only 450 + 700 webfont weights load */
+  --rb-font-weight-bold: 700;
+  --rb-heading-tracking: 0.1em; /* mono headings ride the wide tracking */
+  --rb-label-tracking: 0.1em; /* uppercase labels, buttons, tabs */
+  --rb-text-sm: 14px;
+
+  /* shape & effects — one radius everywhere; glow over drop shadow */
+  --rb-radius: 0.5rem;
+  --rb-radius-lg: 0.5rem; /* one radius everywhere is the look */
+  --rb-radius-pill: 999px; /* chips, badges, switches */
+  --rb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); /* baseline parity; theme uses glow */
+  --rb-shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.55);
+  --rb-blur: 12px; /* glass backdrop-filter */
+  --rb-transition: 0.3s;
+
+  /* spacing */
+  --rb-space-1: 0.25rem;
+  --rb-space-2: 0.5rem;
+  --rb-space-3: 1rem;
+  --rb-space-4: 1.5rem;
+  --rb-space-5: 2rem;
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@rackbops/styles",
+  "version": "0.1.0",
+  "description": "Rackbops design-system styles: tokens, base styles, and component classes per theme.",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/roshne/rackbops-ui-ux-std-lib.git",
+    "directory": "styles"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "node --test"
+  },
+  "files": [
+    "arcane-obsidian",
+    "arcane-parchment",
+    "rackbops-studio",
+    "rackbops-noir",
+    "luminous-precision",
+    "neon-butterfly",
+    "summer-cloud",
+    "all.css",
+    "manifest.json"
+  ],
+  "exports": {
+    "./all": "./all.css",
+    "./manifest": "./manifest.json",
+    "./arcane-obsidian": "./arcane-obsidian/index.css",
+    "./arcane-obsidian/tokens": "./arcane-obsidian/tokens.css",
+    "./arcane-obsidian/base": "./arcane-obsidian/base.css",
+    "./arcane-obsidian/components/*": "./arcane-obsidian/components/*.css",
+    "./arcane-parchment": "./arcane-parchment/index.css",
+    "./arcane-parchment/tokens": "./arcane-parchment/tokens.css",
+    "./arcane-parchment/base": "./arcane-parchment/base.css",
+    "./arcane-parchment/components/*": "./arcane-parchment/components/*.css",
+    "./rackbops-studio": "./rackbops-studio/index.css",
+    "./rackbops-studio/tokens": "./rackbops-studio/tokens.css",
+    "./rackbops-studio/base": "./rackbops-studio/base.css",
+    "./rackbops-studio/components/*": "./rackbops-studio/components/*.css",
+    "./rackbops-noir": "./rackbops-noir/index.css",
+    "./rackbops-noir/tokens": "./rackbops-noir/tokens.css",
+    "./rackbops-noir/base": "./rackbops-noir/base.css",
+    "./rackbops-noir/components/*": "./rackbops-noir/components/*.css",
+    "./luminous-precision": "./luminous-precision/index.css",
+    "./luminous-precision/tokens": "./luminous-precision/tokens.css",
+    "./luminous-precision/base": "./luminous-precision/base.css",
+    "./luminous-precision/components/*": "./luminous-precision/components/*.css",
+    "./neon-butterfly": "./neon-butterfly/index.css",
+    "./neon-butterfly/tokens": "./neon-butterfly/tokens.css",
+    "./neon-butterfly/base": "./neon-butterfly/base.css",
+    "./neon-butterfly/components/*": "./neon-butterfly/components/*.css",
+    "./summer-cloud": "./summer-cloud/index.css",
+    "./summer-cloud/tokens": "./summer-cloud/tokens.css",
+    "./summer-cloud/base": "./summer-cloud/base.css",
+    "./summer-cloud/components/*": "./summer-cloud/components/*.css"
+  }
+}

package/rackbops-noir/base.css

@@ -0,0 +1,53 @@
+/* rackbops-noir — base styles
+ * Scoped defaults. Requires tokens.css. Fonts are system stacks — nothing to
+ * load. The element carrying data-rb-style is the theme's canvas (page <html>
+ * or an embedded island container).
+ */
+:where([data-rb-style="rackbops-noir"]) {
+  background-color: var(--rb-bg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+  font-size: 17px;
+  line-height: 1.6;
+}
+
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *),
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *)::before,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *)::after {
+  box-sizing: border-box;
+}
+
+:where(html[data-rb-style="rackbops-noir"]) 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);
+}
+
+/* Heavy, balanced headlines with tight tracking — the studio's editorial voice. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(h1, h2, h3) {
+  margin: 0;
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-heading-tracking);
+  line-height: 1.08;
+  text-wrap: balance;
+}
+
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(a) {
+  color: inherit;
+}
+
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(:focus-visible) {
+  outline: 2.5px solid var(--rb-accent);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *)::selection {
+  background: var(--rb-accent);
+  color: #fff;
+}

package/rackbops-noir/components/alert.css

@@ -0,0 +1,30 @@
+/* rackbops-noir — alert
+ * A surface card with a soft resting shadow and a 4px left bar in the
+ * semantic colour. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).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: 4px solid var(--rb-accent);
+  border-radius: var(--rb-radius);
+  box-shadow: var(--rb-shadow-sm);
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-alert__title {
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-alert--info {
+  border-left-color: var(--rb-info);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-alert--success {
+  border-left-color: var(--rb-success);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-alert--warning {
+  border-left-color: var(--rb-warning);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-alert--danger {
+  border-left-color: var(--rb-danger);
+}