fix(webapp): resolve theme variables before framer-motion color interpolation

framer-motion can't parse var() strings, so animated colors (usage bar
gradient, dashboard limit progress ring) snap instead of tweening. Adds a
useThemeColor hook that resolves theme variables via getComputedStyle on
mount, with dark-theme fallbacks for SSR.

Author: kathiekiwi

apps/webapp/app/components/billing/FreePlanUsage.tsx

@@ -1,21 +1,20 @@
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { Link } from "@remix-run/react";
 import { motion, useMotionValue, useTransform } from "framer-motion";
+import { useThemeColor } from "~/hooks/useThemeColor";
 import { cn } from "~/utils/cn";
 
 export function FreePlanUsage({ to, percentage }: { to: string; percentage: number }) {
   const cappedPercentage = Math.min(percentage, 1);
   const widthProgress = useMotionValue(cappedPercentage * 100);
+  // Resolved to concrete colors - framer-motion can't interpolate var() strings
+  const successColor = useThemeColor("--color-success", "#28bf5c");
+  const warningColor = useThemeColor("--color-warning", "#f59e0b");
+  const errorColor = useThemeColor("--color-error", "#e11d48");
   const color = useTransform(
     widthProgress,
     [0, 74, 75, 95, 100],
-    [
-      "var(--color-success)",
-      "var(--color-success)",
-      "var(--color-warning)",
-      "var(--color-error)",
-      "var(--color-error)",
-    ]
+    [successColor, successColor, warningColor, errorColor, errorColor]
   );
 
   const hasHitLimit = cappedPercentage >= 1;

apps/webapp/app/components/navigation/DashboardDialogs.tsx

@@ -24,6 +24,7 @@ import { Label } from "../primitives/Label";
 import { Paragraph } from "../primitives/Paragraph";
 import { TextLink } from "../primitives/TextLink";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
+import { useThemeColor } from "~/hooks/useThemeColor";
 import { v3BillingPath } from "~/utils/pathBuilder";
 import { type SideMenuEnvironment, type SideMenuProject } from "./SideMenu";
 
@@ -161,8 +162,6 @@ export function CreateDashboardPageButton({
 
 const PROGRESS_RING_R = 27.5;
 const PROGRESS_RING_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RING_R;
-const PROGRESS_COLOR_SUCCESS = "var(--color-success)"; // mint-500 / success
-const PROGRESS_COLOR_ERROR = "var(--color-error)"; // rose-600 / error
 
 function CreateDashboardUpgradeDialog({
   limits,
@@ -175,6 +174,11 @@ function CreateDashboardUpgradeDialog({
   isFreePlan: boolean;
   organization: { slug: string };
 }) {
+  // Resolved to concrete colors - framer-motion can't interpolate var() strings.
+  // Must be called before the early return below (rules of hooks).
+  const progressColorSuccess = useThemeColor("--color-success", "#28bf5c");
+  const progressColorError = useThemeColor("--color-error", "#e11d48");
+
   if (isFreePlan) {
     return (
       <DialogContent>
@@ -223,11 +227,11 @@ function CreateDashboardUpgradeDialog({
               strokeLinecap="round"
               initial={{
                 strokeDasharray: `0 ${PROGRESS_RING_CIRCUMFERENCE}`,
-                stroke: PROGRESS_COLOR_SUCCESS,
+                stroke: progressColorSuccess,
               }}
               animate={{
                 strokeDasharray: `${filled} ${PROGRESS_RING_CIRCUMFERENCE}`,
-                stroke: PROGRESS_COLOR_ERROR,
+                stroke: progressColorError,
               }}
               transition={{ duration: 1.2, ease: "easeInOut" }}
             />

apps/webapp/app/hooks/useThemeColor.ts

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+/**
+ * Resolve a theme CSS variable to its concrete color once on mount.
+ * framer-motion can't interpolate `var()` strings, so animated colors must be
+ * resolved to real values first. The fallback is used during SSR and should
+ * match the default dark theme (see tailwind.css).
+ */
+export function useThemeColor(variable: `--${string}`, fallback: string): string {
+  const [color] = useState(() => {
+    if (typeof document === "undefined") return fallback;
+    return getComputedStyle(document.documentElement).getPropertyValue(variable).trim() || fallback;
+  });
+  return color;
+}