Fix loading state - force subtle token to exist (#8153)

* Fix loading state - force subtle token to exist

* Add opacity

apps/web/pages/auth/login.tsx

@@ -131,6 +131,7 @@ export default function Login({
           "--cal-brand": "#111827",
           "--cal-brand-emphasis": "#101010",
           "--cal-brand-text": "white",
+          "--cal-brand-subtle": "#9CA3AF",
         } as CSSProperties
       }>
       <AuthContainer

apps/web/pages/getting-started/[[...step]].tsx

@@ -88,6 +88,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
           "--cal-brand": "#111827",
           "--cal-brand-emphasis": "#101010",
           "--cal-brand-text": "white",
+          "--cal-brand-subtle": "#9CA3AF",
         } as CSSProperties
       }
       key={router.asPath}>

apps/web/pages/signup.tsx

@@ -80,6 +80,7 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
             "--cal-brand": "#111827",
             "--cal-brand-emphasis": "#101010",
             "--cal-brand-text": "white",
+            "--cal-brand-subtle": "#9CA3AF",
           } as CSSProperties
         }
         aria-labelledby="modal-title"

packages/ui/components/button/Button.tsx

@@ -73,12 +73,12 @@ const buttonClasses = cva(
       {
         disabled: true,
         color: "primary",
-        className: "bg-brand-subtle bg-opacity-30",
+        className: "bg-brand-subtle text-brand-subtle opacity-40",
       },
       {
         loading: true,
         color: "primary",
-        className: "bg-brand-default bg-opacity-30 text-brand-subtle",
+        className: "bg-brand-subtle text-brand-subtle",
       },
       // Secondary variants
       {