src/styles/buttons.css

@@ -490,3 +490,20 @@
   .btn-spark:focus-visible .btn-spark-hex { fill: var(--on-accent); }
   .btn-gloss::after { display: none; }
 }
+
+/* Sparkle glow, disabled: a solid readable face, no glow, no sparks, no fade. */
+.btn-spark:disabled {
+  opacity: 1;
+  cursor: not-allowed;
+  background: var(--tile-3);
+  color: var(--ink-2);
+  box-shadow: inset 0 0 0 1px var(--line-2);
+  transform: none;
+}
+.btn-spark:disabled .btn-spark-inner,
+.btn-spark:disabled .btn-spark-hex { color: var(--ink-2); }
+.btn-spark:disabled .btn-spark-hex { stroke: var(--ink-2); animation: none; }
+.btn-spark:disabled::before,
+.btn-spark:disabled::after,
+.btn-spark:disabled .btn-spark-fold,
+.btn-spark:disabled .btn-spark-pts { display: none; }

src/styles/legacy.css

@@ -8,7 +8,6 @@ label { font-size: 14px; font-weight: 500; margin-top: 8px; }
 input { font: inherit; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--tile-2); color: var(--ink); }
 input:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
 button { font: inherit; font-weight: 500; margin-top: 16px; padding: 12px; border: 0; border-radius: 8px; background: var(--accent); color: white; cursor: pointer; }
-button:disabled { opacity: .5; cursor: not-allowed; }
 .error { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; color: var(--danger); background: var(--accent-soft); font-size: 14px; }
 .shell header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--tile); border-bottom: 1px solid var(--line); }
 .shell header div { display: flex; flex-direction: column; font-size: 14px; }

tests/buttons.test.ts

@@ -27,6 +27,18 @@ function rule(selector: string): string {
   return m[1];
 }
 
+describe("SparkleButton disabled", () => {
+  it("keeps full opacity and a solid readable face", () => {
+    const body = rule(".btn-spark:disabled");
+    expect(body).toMatch(/opacity:\s*1\b/);
+    expect(body).toContain("var(--tile-3)");
+    expect(body).toContain("var(--ink-2)");
+    expect(body).toContain("not-allowed");
+    expect(readFileSync(path.resolve(__dirname, "../src/styles/legacy.css"), "utf8")).not.toMatch(/button:disabled\s*\{[^}]*opacity/);
+    expect(html(createElement(SparkleButton, { label: "Sign in", disabled: true }))).toContain("disabled");
+  });
+});
+
 describe("FlipButton states", () => {
   it("ready: POST plus send icon, flips to PUBLISH with the icon", () => {
     expect(flipLabels("ready")).toEqual({ front: "Post", back: "Publish", icon: true });