@rackbops/styles 0.1.10 → 0.2.3

package/amber-ember/components/button.css

@@ -40,8 +40,10 @@
 }
 :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn:focus-visible {
+  /* Hover firms the border; focus additionally keeps the base accent outline
+     (base.css) -- "Focus is the accent" -- so keyboard focus reads distinctly
+     and accent-based, not just a neutral border shift. */
   border-color: var(--rb-border-strong);
-  outline: none;
 }
 :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary {
   background: var(--rb-accent);

package/amber-ember/components/tabs.css

@@ -19,9 +19,13 @@
   cursor: pointer;
   transition: color var(--rb-transition);
 }
-:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab:hover {
+:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab.rb-tab--active,
 :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-accent);

package/amber-hearth/components/button.css

@@ -40,8 +40,10 @@
 }
 :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn:focus-visible {
+  /* Hover firms the border; focus additionally keeps the base accent outline
+     (base.css) -- "Focus is the accent" -- so keyboard focus reads distinctly
+     and accent-based, not just a neutral border shift. */
   border-color: var(--rb-border-strong);
-  outline: none;
 }
 :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary {
   background: var(--rb-accent);

package/amber-hearth/components/tabs.css

@@ -19,9 +19,13 @@
   cursor: pointer;
   transition: color var(--rb-transition);
 }
-:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab:hover {
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab.rb-tab--active,
 :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-accent);

package/arcane-obsidian/components/button.css

@@ -38,8 +38,10 @@
 }
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:focus-visible {
+  /* Keep the base :focus-visible accent outline (base.css) as the focus
+     indicator -- "interactive elements take a 2px accent outline" (design.md);
+     hover shares the accent border but not the outline (it isn't focus). */
   border-color: var(--rb-accent);
-  outline: none;
 }
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary {
   background: var(--rb-accent);

package/arcane-obsidian/components/tabs.css

@@ -18,9 +18,13 @@
   cursor: pointer;
   transition: color var(--rb-transition);
 }
-:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab:hover {
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab.rb-tab--active,
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-accent);

package/arcane-obsidian/components/tabstrip.css

@@ -19,9 +19,13 @@
   cursor: pointer;
   transition: border-color var(--rb-transition);
 }
-:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabstrip__tab:hover {
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabstrip__tab:not(:disabled):hover {
   border-color: var(--rb-accent);
 }
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabstrip__tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabstrip__tab.rb-tabstrip__tab--active {
   color: var(--rb-accent);
   border-color: color-mix(in srgb, var(--rb-accent) 40%, var(--rb-border));

package/arcane-parchment/components/button.css

@@ -38,8 +38,10 @@
 }
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn:focus-visible {
+  /* Keep the base :focus-visible accent outline (base.css) as the focus
+     indicator -- "interactive elements take a 2px accent outline" (design.md);
+     hover shares the accent border but not the outline (it isn't focus). */
   border-color: var(--rb-accent);
-  outline: none;
 }
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary {
   background: var(--rb-accent);

package/arcane-parchment/components/tabs.css

@@ -18,9 +18,13 @@
   cursor: pointer;
   transition: color var(--rb-transition);
 }
-:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab:hover {
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab.rb-tab--active,
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-accent);

package/arcane-parchment/components/tabstrip.css

@@ -19,9 +19,13 @@
   cursor: pointer;
   transition: border-color var(--rb-transition);
 }
-:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabstrip__tab:hover {
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabstrip__tab:not(:disabled):hover {
   border-color: var(--rb-accent);
 }
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabstrip__tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabstrip__tab.rb-tabstrip__tab--active {
   color: var(--rb-accent);
   border-color: color-mix(in srgb, var(--rb-accent) 40%, var(--rb-border));

package/concrete-signal/components/button.css

@@ -42,9 +42,11 @@
 }
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn:focus-visible {
+  /* Hover and focus both firm the border/text to accent; focus additionally
+     keeps the base hard accent outline (base.css) -- hard-edged, no wash or
+     glow -- so keyboard focus stays distinct from a pointer hover. */
   border-color: var(--rb-accent);
   color: var(--rb-accent);
-  outline: none;
 }
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary {
   background: var(--rb-accent);
@@ -56,7 +58,6 @@
     box-shadow var(--rb-transition);
 }
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:not(:disabled):hover,
-:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:focus-visible,
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:active {
   border-color: var(--rb-accent);
   color: var(--rb-accent-fg);
@@ -64,6 +65,16 @@
   transform: translate(2px, 2px);
   box-shadow: none;
 }
+/* Focus: a 1->2px border-weight change is invisible on the accent fill
+   (border == fill), so focus is a hard 2px accent outline offset from the
+   button -- hard-edged, not a soft wash ring or glow -- distinct from the
+   hover/active press. Text stays --accent-fg so it doesn't inherit the default
+   .rb-btn:focus-visible accent color against the accent fill. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:focus-visible {
+  color: var(--rb-accent-fg);
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--accent {
   background: var(--rb-accent-wash);
   border-color: var(--rb-accent);

package/concrete-signal/components/tabs.css

@@ -21,9 +21,13 @@
   cursor: pointer;
   transition: color var(--rb-transition);
 }
-:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab:hover {
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab.rb-tab--active,
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-accent);

package/concrete-signal/design.md

@@ -67,8 +67,13 @@ gradient has no soft midpoint.
   `--rb-shadow-lg` (`4px 4px 0`) for dialogs and raised cards. `--rb-blur` is
   `0px` — this theme never applies `backdrop-filter` or any soft blur.
   Dialog backdrops are a flat `rgba(0,0,0,.6)` scrim.
-  Focus is a hard border-weight change (1px to 2px solid accent), never a
-  soft wash ring or glow.
+  Focus is a hard border-weight change (1px to 2px solid accent) on form
+  controls, never a soft wash ring or glow. Buttons instead keep the theme's
+  base hard 2px accent outline offset from the button (also hard-edged, no wash
+  or glow), so keyboard focus reads distinctly from a pointer hover; the
+  accent-fill `--primary` in particular relies on it, since a border-weight
+  change is invisible against its own fill, and it stays distinct from the
+  press translate.
 - Primary buttons carry the theme's signature interaction: the offset shadow
   disappears and the button translates by the shadow's own offset on
   hover/active (`transform: translate(2px, 2px); box-shadow: none;`) — the

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

@@ -42,9 +42,11 @@
 }
 :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn:focus-visible {
+  /* Hover and focus both firm the border/text to accent; focus additionally
+     keeps the base hard accent outline (base.css) -- hard-edged, no wash or
+     glow -- so keyboard focus stays distinct from a pointer hover. */
   border-color: var(--rb-accent);
   color: var(--rb-accent);
-  outline: none;
 }
 :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary {
   background: var(--rb-accent);
@@ -56,7 +58,6 @@
     box-shadow var(--rb-transition);
 }
 :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:not(:disabled):hover,
-:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:focus-visible,
 :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:active {
   border-color: var(--rb-accent);
   color: var(--rb-accent-fg);
@@ -64,6 +65,16 @@
   transform: translate(2px, 2px);
   box-shadow: none;
 }
+/* Focus: a 1->2px border-weight change is invisible on the accent fill
+   (border == fill), so focus is a hard 2px accent outline offset from the
+   button -- hard-edged, not a soft wash ring or glow -- distinct from the
+   hover/active press. Text stays --accent-fg so it doesn't inherit the default
+   .rb-btn:focus-visible accent color against the accent fill. */
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:focus-visible {
+  color: var(--rb-accent-fg);
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
 :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--accent {
   background: var(--rb-accent-wash);
   border-color: var(--rb-accent);

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

@@ -21,9 +21,13 @@
   cursor: pointer;
   transition: color var(--rb-transition);
 }
-:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab:hover {
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :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);

package/concrete-signal-light/design.md

@@ -53,7 +53,9 @@ tables.
 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
+shadows instead of blur, a hard border-weight focus change on form controls
+(buttons keep an offset accent outline instead, per concrete-signal's
+`design.md`), the theme's one
 rationed gradient on the active-tab underline only, and `0.1s` snap
 transitions.
 

package/contract.json

@@ -52,7 +52,7 @@
     "dialog": {
       "react": "Dialog",
       "classes": ["rb-dialog", "rb-dialog__title", "rb-dialog__actions", "rb-dialog__body"],
-      "notes": "native <dialog>, open/onClose/actions; __body is a documented no-op in four themes (section 5.3)"
+      "notes": "native <dialog>; required open + onClose (onClose keeps the parent in sync after a native Escape close, so it must set open=false to reopen); optional actions; __body is a documented no-op in four themes (section 5.3)"
     },
     "tabs": {
       "react": "Tabs",
@@ -154,5 +154,13 @@
       { "theme": "concrete-signal", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true },
       { "theme": "concrete-signal-light", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true }
     ]
+  },
+  "permittedLiterals": {
+    "//": "Hex colours permitted outside color-mix (STANDARD.md 4.2, issue #94): documented per-theme literals no token expresses -- hand-tuned AA inks on a semantic fill (summer-cloud) and the rack panels' fixed-dark local palette (rackbops pair). Each is named in that theme's design.md. Data-URI SVG chevron strokes are %23-encoded and so never match the hex scan.",
+    "summer-cloud/alert.css": ["#1a7a1a", "#594400", "#93000a"],
+    "summer-cloud/badge.css": ["#004261", "#0a2e0a", "#241a00", "#4a0000"],
+    "summer-cloud/button.css": ["#4a0000"],
+    "rackbops-noir/rack.css": ["#0a121a", "#e7eef4", "#7d90a2", "#1e2b37"],
+    "rackbops-studio/rack.css": ["#101a24", "#e7eef4", "#7d90a2", "#26333f"]
   }
 }

package/luminous-precision/base.css

@@ -35,11 +35,29 @@
  * obsidian base — the "luminous underlay" treatment. Apply to <body>, or to
  * the attributed container itself. */
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-bg {
+  position: relative;
+  isolation: isolate;
+  background: var(--rb-bg);
+}
+
+/* The radial underlays ride a viewport-fixed ::before rather than
+ * background-attachment: fixed, which iOS Safari silently ignores — there it
+ * would scroll with the page and leave the backdrop-filter cards compositing
+ * over a moving ground. A position: fixed pseudo pins to the viewport (or the
+ * nearest transformed/filtered ancestor, if any). z-index: -1 keeps it behind
+ * the container's own content; isolation: isolate contains it so it never
+ * slips under siblings. Apply .rb-bg to the page root — on a sub-viewport
+ * container the underlay still fills the viewport, not the element's box. */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-bg::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
   background:
     radial-gradient(50rem 30rem at 12% -5%, rgba(198, 165, 255, 0.08), transparent 70%),
     radial-gradient(55rem 35rem at 90% 105%, rgba(0, 245, 255, 0.05), transparent 70%),
     var(--rb-bg);
-  background-attachment: fixed;
+  pointer-events: none;
 }
 
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *):where(h1, h2, h3, h4, h5, h6) {

package/luminous-precision/components/tabs.css

@@ -19,9 +19,13 @@
   cursor: pointer;
   transition: color var(--rb-transition), border-color var(--rb-transition);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tab:hover {
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tab--active,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-accent-2);

package/luminous-precision/design.md

@@ -105,7 +105,9 @@ Class prefix `rb-` (shared token/class contract with the other themes).
   square icon-only hit target (>=2rem), paired with `.rb-btn`.
 - **Form** `.rb-input`, `.rb-textarea`, `.rb-select`, `.rb-label`,
   `.rb-field`, `.rb-checkbox`, `.rb-radio`, `.rb-switch`, `.rb-choice` —
-  checked/focus states glow teal.
+  checked/focus states glow teal. The `.rb-select` arrow is an inline data-URI
+  SVG, so its stroke is a literal (`#958e9b`, matching `--rb-text-faint`) — an
+  inline SVG can't reference a custom property.
 - **Badge** `.rb-badge` — pill chip: 15% tint of its hue behind
   full-saturation text (+ semantic modifiers).
 - **Alert** `.rb-alert` — glass, 3px left bar carries the semantic color.

package/mono-field/components/tabs.css

@@ -19,9 +19,13 @@
   cursor: pointer;
   transition: color var(--rb-transition);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab.rb-tab--active,
 :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-accent);

package/mono-field/design.md

@@ -109,7 +109,9 @@ extras.
 - **Form** `.rb-input` / `.rb-textarea` / `.rb-select` / `.rb-label` /
   `.rb-field` / `.rb-choice` / `.rb-checkbox` / `.rb-radio` / `.rb-switch` —
   sunken fields; focus swaps to the accent border plus a barely-there wash
-  ring; labels are normal case, weight 500.
+  ring; labels are normal case, weight 500. The `.rb-select` arrow's data-URI
+  SVG hardcodes its stroke (`#5a5a5a`, matching `--rb-text-soft`), since an
+  inline SVG can't take a custom property.
 - **Badge** `.rb-badge` — pill, normal case (unusual for a badge, but matches
   this theme's no-shouting rule), weight 500, a 12%-alpha tint of its hue
   behind full-strength (but desaturated) text.

package/neon-butterfly/base.css

@@ -31,12 +31,35 @@
 }
 
 /* Opt-in page background: the butterfly circuit artwork blended into the navy.
- * Matches the switchboard landing page. Apply to <body>, or to the attributed
- * container itself. */
+ * Matches the switchboard landing page. Apply .rb-bg to <body> or the page
+ * root; on a sub-viewport container the underlay still fills the viewport (see
+ * the ::before note below). */
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-bg {
-  background: var(--rb-bg) url("./assets/butterfly-circuit.png") center / cover fixed;
-  background-blend-mode: luminosity;
+  position: relative;
+  isolation: isolate;
+  background: var(--rb-bg-blend);
+}
+
+/* The artwork rides a viewport-fixed ::before rather than the `fixed` keyword
+ * of the background shorthand (i.e. background-attachment: fixed), which iOS
+ * Safari silently ignores — there it would scroll with the page and leave the
+ * backdrop-filter glass surfaces compositing over a moving ground. A
+ * position: fixed pseudo pins to the viewport (or the nearest
+ * transformed/filtered ancestor, if any); z-index: -1 keeps it behind the
+ * container's own content; isolation: isolate contains it so it never slips
+ * under siblings. The luminosity blend of the artwork over --rb-bg-blend is
+ * preserved on the pseudo. */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-bg::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
   background-color: var(--rb-bg-blend);
+  background-image: url("./assets/butterfly-circuit.png");
+  background-position: center;
+  background-size: cover;
+  background-blend-mode: luminosity;
+  pointer-events: none;
 }
 
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *):where(h1, h2, h3, h4, h5, h6) {

package/neon-butterfly/components/tabs.css

@@ -19,9 +19,13 @@
   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 {
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :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);

package/neon-butterfly/design.md

@@ -94,6 +94,9 @@ Class prefix `rb-`. Variants use BEM-ish modifiers (`rb-btn--accent`).
   square icon-only hit target (>=2rem), paired with `.rb-btn`.
 - **Form** `.rb-input`, `.rb-textarea`, `.rb-select`, `.rb-label`, `.rb-field`,
   `.rb-checkbox`, `.rb-radio`, `.rb-switch`, `.rb-choice` — checked states glow lime.
+  The `.rb-select` arrow is an inline data-URI SVG whose stroke is a literal
+  (`#958da1`, matching `--rb-text-faint`) — an inline SVG can't reference a
+  custom property.
 - **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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/styles",
-  "version": "0.1.10",
+  "version": "0.2.3",
   "description": "Rackbops design-system styles: tokens, base styles, and component classes per theme.",
   "license": "MIT",
   "repository": {

package/rackbops-noir/components/tabs.css

@@ -18,9 +18,13 @@
   cursor: pointer;
   transition: color var(--rb-transition);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab:hover {
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active,
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-text);

package/rackbops-studio/components/tabs.css

@@ -18,9 +18,13 @@
   cursor: pointer;
   transition: color var(--rb-transition);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab:hover {
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab:not(:disabled):hover {
   color: var(--rb-text);
 }
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab[aria-selected="true"] {
   color: var(--rb-text);

package/summer-cloud/base.css

@@ -37,8 +37,26 @@
  * the gradient is the signature — the theme reads as "airy" only against it.
  * Apply to <body>, or to the attributed container itself. */
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-bg {
+  position: relative;
+  isolation: isolate;
+  background: var(--rb-bg);
+}
+
+/* The gradient rides a viewport-fixed ::before underlay rather than
+ * background-attachment: fixed, which iOS Safari silently ignores — there it
+ * would scroll with the page and leave the backdrop-filter cards compositing
+ * over a moving ground. A position: fixed pseudo pins to the viewport (or the
+ * nearest transformed/filtered ancestor, if any). z-index: -1 keeps it behind
+ * the container's own content; isolation: isolate contains it so it never
+ * slips under siblings. Apply .rb-bg to the page root — on a sub-viewport
+ * container the underlay still fills the viewport, not the element's box. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-bg::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
   background: linear-gradient(135deg, var(--rb-sky-start) 0%, var(--rb-sky-end) 100%);
-  background-attachment: fixed;
+  pointer-events: none;
 }
 
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *):where(h1, h2, h3, h4, h5, h6) {

package/summer-cloud/components/badge.css

@@ -15,7 +15,7 @@
   letter-spacing: var(--rb-label-tracking);
   box-shadow: 0 1px 2px rgba(93, 43, 255, 0.06);
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--primary { background: var(--rb-accent);  border-color: transparent; color: #fff; }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--primary { background: var(--rb-accent);  border-color: transparent; color: var(--rb-accent-fg); }
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--info    { background: var(--rb-info);     border-color: transparent; color: #004261; }
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--success { background: var(--rb-success);  border-color: transparent; color: #0a2e0a; }
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--warning { background: var(--rb-warning);  border-color: transparent; color: #241a00; }
@@ -38,12 +38,16 @@
   transition: background var(--rb-transition), color var(--rb-transition),
     border-color var(--rb-transition);
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-chip:hover {
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-chip:not(:disabled):hover {
   background: var(--rb-sky-tint);
 }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-chip:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-chip--selected,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-chip[aria-pressed="true"] {
   background: var(--rb-accent-bright);
   border-color: transparent;
-  color: #fff;
+  color: var(--rb-accent-fg);
 }

package/summer-cloud/components/button.css

@@ -56,18 +56,18 @@
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--primary {
   background: var(--rb-accent);
   border-color: transparent;
-  color: #fff;
+  color: var(--rb-accent-fg);
   font-weight: var(--rb-font-weight-bold);
   box-shadow: var(--rb-shadow-raised);
 }
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--primary:not(:disabled):hover {
   background: var(--rb-accent-bright);
-  color: #fff;
+  color: var(--rb-accent-fg);
   box-shadow: var(--rb-shadow-raised-hover);
 }
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--primary:focus-visible {
   background: var(--rb-accent-bright);
-  color: #fff;
+  color: var(--rb-accent-fg);
   box-shadow: var(--rb-shadow-raised-hover), 0 0 0 4px var(--rb-accent-glow);
 }
 
@@ -96,7 +96,7 @@
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger {
   background: var(--rb-danger-deep);
   border-color: transparent;
-  color: #fff;
+  color: var(--rb-accent-fg);
   font-weight: var(--rb-font-weight-bold);
   box-shadow: 0 4px 14px rgba(204, 31, 31, 0.39);
 }

package/summer-cloud/components/form.css

@@ -127,7 +127,7 @@
   width: calc(1.75rem - 6px);
   height: calc(1.75rem - 6px);
   border-radius: 50%;
-  background: #fff;
+  background: var(--rb-surface);
   box-shadow: 0 2px 6px rgba(93, 43, 255, 0.2);
   transition: transform var(--rb-transition) var(--rb-ease-bounce);
 }

package/summer-cloud/components/tabs.css

@@ -19,10 +19,14 @@
   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 {
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-tab:not(:disabled):hover {
   background: var(--rb-sky-tint);
   color: var(--rb-accent);
 }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :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);

package/summer-cloud/design.md

@@ -40,7 +40,7 @@ here; that is intended, not a bug.
 
 | 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` |
+| Background | `#f6fafe` | Flat page ground; the `.rb-bg` sky gradient runs `--rb-sky-start` `#f0f4f8` → `--rb-sky-end` `#c9e6ff` at 135°, pinned to the viewport by a `position: fixed` `::before` underlay (not `background-attachment: fixed`, which iOS Safari ignores) |
 | 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) |
@@ -129,8 +129,15 @@ theme-agnostic). Variants use BEM-ish modifiers (`rb-btn--primary`).
 - **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.
+  "cloud-toggle": squishy, and green when live. The `.rb-select` arrow is an
+  inline data-URI SVG, so its stroke is a literal (`#484457`, matching
+  `--rb-text-faint`); an inline SVG can't reference a custom property.
+- **Badge** `.rb-badge` + semantic modifiers — solid pills, mono uppercase. The
+  dark ink on each semantic fill (`#004261`/`#0a2e0a`/`#241a00`/`#4a0000`), and
+  the alert titles (`#1a7a1a`/`#594400`/`#93000a`), are hand-tuned per-theme
+  literals chosen to read AA on that specific fill — a separate decision from
+  the fill's semantic token, so they don't track `--rb-success`/`--rb-danger`/
+  etc. (a permitted literal, STANDARD.md §4.2; allowlisted in `contract.json`).
   **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.