From 48aa6bf4894cc654c9e9c4fe2ebe144aec315fef Mon Sep 17 00:00:00 2001
From: Vansh Gilhotra <140490653+Vansh5632@users.noreply.github.com>
Date: Wed, 20 Aug 2025 18:29:03 +0530
Subject: [PATCH] fix: Add missing CSS variable for switch component accent
 color in getting-started flow (#23129)

- Fix switch component thumb appearing all white when ON
- Add --cal-brand-accent CSS variable definitions for light and dark modes
- Ensures proper contrast: white accent on dark bg, black accent on light bg
- Resolves UI issue on /getting-started/connected-calendar and /getting-started/setup-availability pages

Fixes switch components using bg-brand-accent class that maps to var(--cal-brand-accent,white)
When CSS variable was undefined, it defaulted to white causing invisible thumbs.

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
---
 .../modules/getting-started/[[...step]]/onboarding-view.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
index 5a23603152..ae998ef7c4 100644
--- a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
+++ b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
@@ -138,7 +138,8 @@ const OnboardingPage = (props: PageProps) => {
         "dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand:#111827] dark:[--cal-brand:#FFFFFF]",
         "[--cal-brand-emphasis:#101010] dark:[--cal-brand-emphasis:#e1e1e1]",
         "[--cal-brand-subtle:#9CA3AF]",
-        "[--cal-brand-text:#FFFFFF]  dark:[--cal-brand-text:#000000]"
+        "[--cal-brand-text:#FFFFFF]  dark:[--cal-brand-text:#000000]",
+        "[--cal-brand-accent:#FFFFFF] dark:[--cal-brand-accent:#000000]"
       )}
       data-testid="onboarding"
       key={pathname}>