fix(webapp): give loading spinners a color that suits the theme

A Button's loading spinner was always white, so on the neutral variants it
was white-on-near-white once the theme was light. It now takes the variant's
text color: still white on primary and danger, dark ink on secondary,
tertiary and minimal when the theme is light.

The muted spinner was a fixed dark navy for the same reason and now comes
from theme tokens, so it stays muted against a light surface too.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/primitives/Buttons.tsx

@@ -351,8 +351,13 @@ export function ButtonContent(props: ButtonContentPropsType) {
             renderShortcutKey()}
         </div>
         {showSpinner && (
-          <span className="absolute inset-0 flex items-center justify-center">
-            <Spinner className="size-3.5" color="white" />
+          // Wears the variant's text color so the spinner tracks the button it's
+          // on: white on primary and danger, and dark ink on the neutral
+          // variants once the theme is light rather than white on near-white.
+          <span
+            className={cn("absolute inset-0 flex items-center justify-center", textColorClassName)}
+          >
+            <Spinner className="size-3.5" color="inherit" />
           </span>
         )}
       </div>

apps/webapp/app/components/primitives/Spinner.tsx

@@ -11,7 +11,7 @@ export function Spinner({
   color = "blue",
 }: {
   className?: string;
-  color?: "blue" | "white" | "muted" | "dark" | CustomColor;
+  color?: "blue" | "white" | "muted" | "dark" | "inherit" | CustomColor;
 }) {
   const colors = {
     blue: {
@@ -22,13 +22,22 @@ export function Spinner({
       background: "rgba(255, 255, 255, 0.4)",
       foreground: "rgba(255, 255, 255)",
     },
+    /* Theme tokens rather than fixed values, so a muted spinner stays muted
+       against a light surface instead of staying dark-theme navy. */
     muted: {
-      background: "#1C2433",
-      foreground: "#3C4B62",
+      background: "var(--color-grid-bright)",
+      foreground: "var(--color-text-dimmed)",
     },
     dark: {
-      background: "rgba(18, 19, 23, 0.35)",
-      foreground: "#1A1B1F",
+      background: "color-mix(in srgb, var(--color-charcoal-900) 35%, transparent)",
+      foreground: "var(--color-charcoal-900)",
+    },
+    /* Takes the surrounding text color, so it follows both the theme and
+       whatever it sits on - white on a primary button, dark ink on a
+       secondary one once the theme is light. */
+    inherit: {
+      background: "color-mix(in srgb, currentColor 40%, transparent)",
+      foreground: "currentColor",
     },
   };
 

apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx

@@ -527,7 +527,8 @@ export function TierHobby({
                 <Button
                   variant="secondary/medium"
                   disabled={isLoading}
-                  LeadingIcon={isLoading ? () => <Spinner color="white" /> : undefined}
+                  // A white spinner would vanish on this button's light surface
+                  LeadingIcon={isLoading ? () => <Spinner color="inherit" /> : undefined}
                   form="subscribe-hobby"
                 >
                   {`Downgrade to ${plan.title}`}