@rackbops/styles 0.1.6 → 0.1.8

package/amber-ember/base.css

@@ -55,6 +55,11 @@
   color: var(--rb-accent);
 }
 
+:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *):where(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
 :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *)::selection {
   background: var(--rb-accent);
   color: var(--rb-accent-fg);

package/amber-ember/components/button.css

@@ -38,7 +38,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn:hover,
+: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 {
   border-color: var(--rb-border-strong);
   outline: none;
@@ -49,7 +49,7 @@
   color: var(--rb-accent-fg);
   box-shadow: var(--rb-shadow-sm);
 }
-:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary:hover,
+:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary:focus-visible {
   box-shadow: var(--rb-shadow-lg);
 }
@@ -63,7 +63,7 @@
   border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
   color: var(--rb-danger);
 }
-:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--danger:hover,
+:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
 }
@@ -72,7 +72,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--ghost:hover,
+:where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-2);
   border-color: var(--rb-border);

package/amber-hearth/base.css

@@ -55,6 +55,11 @@
   color: var(--rb-accent);
 }
 
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *):where(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
 :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *)::selection {
   background: var(--rb-accent);
   color: var(--rb-accent-fg);

package/amber-hearth/components/button.css

@@ -38,7 +38,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn:hover,
+: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 {
   border-color: var(--rb-border-strong);
   outline: none;
@@ -49,7 +49,7 @@
   color: var(--rb-accent-fg);
   box-shadow: var(--rb-shadow-sm);
 }
-:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary:hover,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary:focus-visible {
   box-shadow: var(--rb-shadow-lg);
 }
@@ -63,7 +63,7 @@
   border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
   color: var(--rb-danger);
 }
-:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--danger:hover,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
 }
@@ -72,7 +72,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--ghost:hover,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-2);
   border-color: var(--rb-border);

package/arcane-obsidian/components/button.css

@@ -36,7 +36,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:hover,
+: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 {
   border-color: var(--rb-accent);
   outline: none;
@@ -46,7 +46,7 @@
   border-color: var(--rb-accent);
   color: var(--rb-accent-fg);
 }
-:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary:hover,
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary:focus-visible {
   background: color-mix(in srgb, var(--rb-accent) 88%, #fff);
   border-color: color-mix(in srgb, var(--rb-accent) 88%, #fff);
@@ -61,7 +61,7 @@
   border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
   color: var(--rb-danger);
 }
-:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--danger:hover,
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
 }
@@ -70,7 +70,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--ghost:hover,
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-2);
   border-color: var(--rb-border);

package/arcane-parchment/components/button.css

@@ -36,7 +36,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn:hover,
+: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 {
   border-color: var(--rb-accent);
   outline: none;
@@ -46,7 +46,7 @@
   border-color: var(--rb-accent);
   color: var(--rb-accent-fg);
 }
-:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary:hover,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary:focus-visible {
   /* Darken the fill on a light ground (mix toward --rb-text) so the white label
      stays AA — lightening it, as the dark sibling does, would drop it to 4.37:1. */
@@ -63,7 +63,7 @@
   border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
   color: var(--rb-danger);
 }
-:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--danger:hover,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
 }
@@ -72,7 +72,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--ghost:hover,
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-2);
   border-color: var(--rb-border);

package/concrete-signal/base.css

@@ -51,6 +51,11 @@
   color: var(--rb-accent);
 }
 
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *):where(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *)::selection {
   background: var(--rb-accent);
   color: var(--rb-accent-fg);

package/concrete-signal/components/button.css

@@ -40,7 +40,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn:hover,
+: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 {
   border-color: var(--rb-accent);
   color: var(--rb-accent);
@@ -55,7 +55,7 @@
     transform var(--rb-transition),
     box-shadow var(--rb-transition);
 }
-:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:hover,
+: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);
@@ -79,7 +79,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--ghost:hover,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-2);
   border-color: var(--rb-border);

package/concrete-signal-light/base.css

@@ -51,6 +51,11 @@
   color: var(--rb-accent);
 }
 
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *):where(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
 :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *)::selection {
   background: var(--rb-accent);
   color: var(--rb-accent-fg);

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

@@ -40,7 +40,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn:hover,
+: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 {
   border-color: var(--rb-accent);
   color: var(--rb-accent);
@@ -55,7 +55,7 @@
     transform var(--rb-transition),
     box-shadow var(--rb-transition);
 }
-:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:hover,
+: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);
@@ -79,7 +79,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--ghost:hover,
+:where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-2);
   border-color: var(--rb-border);

package/luminous-precision/base.css

@@ -64,6 +64,11 @@
   color: var(--rb-accent);
 }
 
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *):where(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *)::selection {
   background: var(--rb-accent);
   color: var(--rb-bg);

package/luminous-precision/components/button.css

@@ -34,7 +34,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:focus-visible {
   border-color: var(--rb-accent-border);
   color: var(--rb-accent);
@@ -48,7 +48,7 @@
   border-color: var(--rb-accent);
   color: var(--rb-accent-fg);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--primary:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--primary:focus-visible {
   border-color: var(--rb-accent);
   color: var(--rb-accent-fg);
@@ -59,7 +59,7 @@
   border-color: var(--rb-accent-2);
   color: var(--rb-accent-2);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--accent:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--accent:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--accent:focus-visible {
   border-color: var(--rb-accent-2);
   color: var(--rb-accent-2);
@@ -70,7 +70,7 @@
   border-color: var(--rb-danger);
   color: var(--rb-danger);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--danger:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
   color: var(--rb-danger);
@@ -81,7 +81,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--ghost:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-2);
 }
@@ -106,7 +106,7 @@
   :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn {
     transition: none;
   }
-  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:hover,
+  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:not(:disabled):hover,
   :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:focus-visible {
     animation: none;
   }

package/mono-field/base.css

@@ -53,6 +53,11 @@
   color: var(--rb-accent);
 }
 
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *):where(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
 :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *)::selection {
   background: var(--rb-accent);
   color: var(--rb-accent-fg);

package/mono-field/components/button.css

@@ -39,7 +39,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn:not(:disabled):hover {
   border-color: var(--rb-border-strong);
 }
 :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn:focus-visible {
@@ -54,7 +54,7 @@
   color: var(--rb-accent-fg);
   box-shadow: var(--rb-shadow-sm);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--primary:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--primary:not(:disabled):hover {
   box-shadow: var(--rb-shadow-lg);
 }
 
@@ -64,7 +64,7 @@
   border-color: transparent;
   color: var(--rb-accent);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--accent:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--accent:not(:disabled):hover {
   border-color: var(--rb-accent);
 }
 
@@ -74,7 +74,7 @@
   border-color: var(--rb-border);
   color: var(--rb-danger);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--danger:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--danger:not(:disabled):hover {
   border-color: var(--rb-danger);
 }
 
@@ -84,7 +84,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--ghost:hover {
+:where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-btn--ghost:not(:disabled):hover {
   border-color: transparent;
   color: var(--rb-text);
 }

package/neon-butterfly/base.css

@@ -61,6 +61,11 @@
   color: var(--rb-accent);
 }
 
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *):where(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *)::selection {
   background: var(--rb-accent);
   color: var(--rb-bg);

package/neon-butterfly/components/button.css

@@ -33,7 +33,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:hover,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:focus-visible {
   border-color: var(--rb-accent-border);
   color: var(--rb-accent);
@@ -58,7 +58,7 @@
   border-color: transparent;
   color: var(--rb-text-soft);
 }
-:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--ghost:hover,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-surface-glass);
 }
@@ -73,7 +73,7 @@
   :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn {
     transition: none;
   }
-  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:hover,
+  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:not(:disabled):hover,
   :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:focus-visible {
     animation: none;
   }

package/package.json

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

package/rackbops-noir/base.css

@@ -47,7 +47,7 @@
 }
 
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(a) {
-  color: inherit;
+  color: var(--rb-accent);
 }
 
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(:focus-visible) {

package/rackbops-noir/components/button.css

@@ -43,7 +43,7 @@
   background: var(--rb-text); /* light in this theme — a bright neutral fill */
   color: var(--rb-bg); /* dark ink on the light fill */
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--primary:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--primary:focus-visible {
   background: var(--rb-accent);
   color: var(--rb-accent-fg);
@@ -52,7 +52,7 @@
   background: var(--rb-accent);
   color: var(--rb-accent-fg);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--accent:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--accent:not(:disabled):hover,
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--accent:focus-visible {
   /* mix toward the text colour: lightens in a dark theme, darkens in a light one */
   background: color-mix(in srgb, var(--rb-accent), var(--rb-text) 15%);
@@ -62,7 +62,7 @@
   color: var(--rb-text);
   border-color: var(--rb-border-strong);
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--ghost:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--ghost:focus-visible {
   border-color: var(--rb-text);
   background: var(--rb-surface-2);
@@ -72,7 +72,7 @@
   color: var(--rb-danger);
   border-color: color-mix(in srgb, var(--rb-danger) 45%, var(--rb-border));
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--danger:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
 }
@@ -83,7 +83,7 @@
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn__arrow {
   transition: transform var(--rb-transition) ease;
 }
-:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn:hover .rb-btn__arrow {
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn:not(:disabled):hover .rb-btn__arrow {
   transform: translateX(3px);
 }
 

package/rackbops-studio/components/button.css

@@ -43,7 +43,7 @@
   background: var(--rb-text);
   color: var(--rb-bg);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--primary:hover,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--primary:not(:disabled):hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--primary:focus-visible {
   background: var(--rb-accent);
   color: var(--rb-accent-fg);
@@ -52,7 +52,7 @@
   background: var(--rb-accent);
   color: var(--rb-accent-fg);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--accent:hover,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--accent:not(:disabled):hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--accent:focus-visible {
   background: color-mix(in srgb, var(--rb-accent), var(--rb-text) 15%);
 }
@@ -61,7 +61,7 @@
   color: var(--rb-text);
   border-color: var(--rb-border-strong);
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--ghost:hover,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--ghost:focus-visible {
   border-color: var(--rb-text);
   background: var(--rb-surface-2);
@@ -71,7 +71,7 @@
   color: var(--rb-danger);
   border-color: color-mix(in srgb, var(--rb-danger) 45%, var(--rb-border));
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--danger:hover,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--danger:focus-visible {
   border-color: var(--rb-danger);
 }
@@ -82,7 +82,7 @@
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn__arrow {
   transition: transform var(--rb-transition) ease;
 }
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn:hover .rb-btn__arrow {
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn:not(:disabled):hover .rb-btn__arrow {
   transform: translateX(3px);
 }
 

package/rackbops-studio/design.md

@@ -85,6 +85,10 @@ consumers can compensate rather than discover it:
   kicker tag, the `/0N` principle markers, and the active nav link — all
   reproduced here. Treat accent-coloured text as decorative; never set body copy
   or the sole label of an interactive control in `--rb-accent`.
+- **Bare (unclassed) `<a>` uses `color: inherit`, not `--rb-accent`** — for the
+  same reason above: accent-as-text is decorative-only here, and a bare link is
+  ordinary body copy, not a decorative flourish. `.rb-link`'s nav component
+  still carries its own accent-driven active state.
 - **`--rb-text-faint` (#8091a1) is below AA on white** — use it only for
   genuinely secondary meta (as the source does for footnotes), never for
   essential text. The shared `.rb-table` header therefore uses `--rb-text-soft`,

package/summer-cloud/base.css

@@ -64,6 +64,11 @@
   color: var(--rb-accent);
 }
 
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *):where(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: 2px;
+}
+
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *)::selection {
   background: var(--rb-accent);
   color: #fff;

package/summer-cloud/components/button.css

@@ -37,7 +37,7 @@
   justify-content: center;
   line-height: 1;
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:not(:disabled):hover,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:focus-visible {
   background: rgba(255, 255, 255, 0.6);
   border-color: var(--rb-accent-border);
@@ -60,7 +60,7 @@
   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:hover {
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--primary:not(:disabled):hover {
   background: var(--rb-accent-bright);
   color: #fff;
   box-shadow: var(--rb-shadow-raised-hover);
@@ -76,7 +76,7 @@
   border-color: var(--rb-accent-2);
   color: var(--rb-accent-2-deep);
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--accent:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--accent:not(:disabled):hover,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--accent:focus-visible {
   color: var(--rb-accent-2-deep);
   box-shadow: 0 0 0 4px var(--rb-accent-2-glow);
@@ -88,7 +88,7 @@
   border-color: transparent;
   box-shadow: none;
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--ghost:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--ghost:not(:disabled):hover,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--ghost:focus-visible {
   background: var(--rb-sky-tint);
 }
@@ -100,7 +100,7 @@
   font-weight: var(--rb-font-weight-bold);
   box-shadow: 0 4px 14px rgba(204, 31, 31, 0.39);
 }
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger:not(:disabled):hover,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger:focus-visible {
   background: var(--rb-danger);
   color: #4a0000;
@@ -118,7 +118,7 @@
   :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn {
     transition: background var(--rb-transition), color var(--rb-transition);
   }
-  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:hover,
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:not(:disabled):hover,
   :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:focus-visible,
   :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:active {
     transform: none;