feat: advance css vars (#7135)

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

apps/web/modules/projects/settings/look/components/theme-styling.tsx

@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Project } from "@prisma/client";
-import { RotateCcwIcon } from "lucide-react";
+import { RotateCcwIcon, SparklesIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 import { SubmitHandler, UseFormReturn, useForm } from "react-hook-form";
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { TProjectStyling, ZProjectStyling } from "@formbricks/types/project";
 import { TSurveyStyling, TSurveyType } from "@formbricks/types/surveys/types";
 import { previewSurvey } from "@/app/lib/templates";
-import { defaultStyling } from "@/lib/styling/constants";
+import { STYLE_DEFAULTS, getSuggestedColors } from "@/lib/styling/constants";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { updateProjectAction } from "@/modules/projects/settings/actions";
 import { FormStylingSettings } from "@/modules/survey/editor/components/form-styling-settings";
@@ -20,6 +20,7 @@ import { AlertDialog } from "@/modules/ui/components/alert-dialog";
 import { BackgroundStylingCard } from "@/modules/ui/components/background-styling-card";
 import { Button } from "@/modules/ui/components/button";
 import { CardStylingSettings } from "@/modules/ui/components/card-styling-settings";
+import { ColorPicker } from "@/modules/ui/components/color-picker";
 import {
   FormControl,
   FormDescription,
@@ -53,35 +54,55 @@ export const ThemeStyling = ({
   const { t } = useTranslation();
   const router = useRouter();
 
+  const savedStyling = project.styling as Partial<TProjectStyling> | null;
+
+  // Strip null/undefined values so they don't override STYLE_DEFAULTS.
+  // Saved styling from before advanced fields existed will have nullish entries.
+  const cleanSaved = savedStyling
+    ? Object.fromEntries(Object.entries(savedStyling).filter(([, v]) => v != null))
+    : {};
+
   const form = useForm<TProjectStyling>({
-    defaultValues: { ...defaultStyling, ...project.styling },
+    defaultValues: { ...STYLE_DEFAULTS, ...cleanSaved },
     resolver: zodResolver(ZProjectStyling),
   });
 
   const [previewSurveyType, setPreviewSurveyType] = useState<TSurveyType>("link");
   const [confirmResetStylingModalOpen, setConfirmResetStylingModalOpen] = useState(false);
+  const [confirmSuggestColorsOpen, setConfirmSuggestColorsOpen] = useState(false);
 
   const [formStylingOpen, setFormStylingOpen] = useState(false);
   const [cardStylingOpen, setCardStylingOpen] = useState(false);
   const [backgroundStylingOpen, setBackgroundStylingOpen] = useState(false);
-
   const onReset = useCallback(async () => {
     const updatedProjectResponse = await updateProjectAction({
       projectId: project.id,
       data: {
-        styling: { ...defaultStyling },
+        styling: { ...STYLE_DEFAULTS },
       },
     });
 
     if (updatedProjectResponse?.data) {
-      form.reset({ ...defaultStyling });
+      form.reset({ ...STYLE_DEFAULTS });
       toast.success(t("environments.workspace.look.styling_updated_successfully"));
       router.refresh();
     } else {
       const errorMessage = getFormattedErrorMessage(updatedProjectResponse);
       toast.error(errorMessage);
     }
-  }, [form, project.id, router]);
+  }, [form, project.id, router, t]);
+
+  const handleSuggestColors = () => {
+    const brandColor = form.getValues().brandColor?.light ?? STYLE_DEFAULTS.brandColor?.light;
+    const suggested = getSuggestedColors(brandColor);
+
+    for (const [key, value] of Object.entries(suggested)) {
+      form.setValue(key as keyof TProjectStyling, value, { shouldDirty: true });
+    }
+
+    toast.success(t("environments.workspace.look.styling_updated_successfully"));
+    setConfirmSuggestColorsOpen(false);
+  };
 
   const onSubmit: SubmitHandler<TProjectStyling> = async (data) => {
     const updatedProjectResponse = await updateProjectAction({
@@ -144,7 +165,38 @@ export const ThemeStyling = ({
                 </div>
               </div>
 
-              <div className="flex flex-col gap-3 rounded-lg bg-slate-50 p-4">
+              <div className="flex flex-col gap-4 rounded-lg bg-slate-50 p-4">
+                <div className="grid grid-cols-2 items-end gap-4">
+                  <FormField
+                    control={form.control}
+                    name="brandColor.light"
+                    render={({ field }) => (
+                      <FormItem className="space-y-1">
+                        <FormLabel>{t("environments.surveys.edit.brand_color")}</FormLabel>
+                        <FormDescription>
+                          {t("environments.surveys.edit.brand_color_description")}
+                        </FormDescription>
+                        <FormControl>
+                          <ColorPicker
+                            color={field.value ?? STYLE_DEFAULTS.brandColor?.light}
+                            onChange={(color) => field.onChange(color)}
+                            containerClass="w-full"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <div className="flex flex-col gap-1">
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      className="h-10 w-full justify-center gap-2"
+                      onClick={() => setConfirmSuggestColorsOpen(true)}>
+                      <SparklesIcon className="mr-2 h-4 w-4" />
+                      {t("environments.workspace.look.suggest_colors")}
+                    </Button>
+                  </div>
+                </div>
                 <FormStylingSettings
                   open={formStylingOpen}
                   setOpen={setFormStylingOpen}
@@ -192,12 +244,12 @@ export const ThemeStyling = ({
           {/* Survey Preview */}
 
           <div className="relative w-1/2 rounded-lg bg-slate-100 pt-4">
-            <div className="sticky top-4 mb-4 h-[600px]">
+            <div className="sticky top-4 mb-4 max-h-[calc(100vh-2rem)]">
               <ThemeStylingPreviewSurvey
                 survey={previewSurvey(project.name, t)}
                 project={{
                   ...project,
-                  styling: form.watch(),
+                  styling: form.watch("allowStyleOverwrite") ? form.watch() : STYLE_DEFAULTS,
                 }}
                 previewType={previewSurveyType}
                 setPreviewType={setPreviewSurveyType}
@@ -206,6 +258,18 @@ export const ThemeStyling = ({
             </div>
           </div>
 
+          {/* Confirm reset styling modal */}
+          <AlertDialog
+            open={confirmSuggestColorsOpen}
+            setOpen={setConfirmSuggestColorsOpen}
+            headerText={t("environments.workspace.look.generate_theme_header")}
+            mainText={t("environments.workspace.look.generate_theme_confirmation")}
+            confirmBtnLabel={t("environments.workspace.look.generate_theme_btn")}
+            declineBtnLabel={t("common.cancel")}
+            onConfirm={handleSuggestColors}
+            onDecline={() => setConfirmSuggestColorsOpen(false)}
+          />
+
           {/* Confirm reset styling modal */}
           <AlertDialog
             open={confirmResetStylingModalOpen}