chore: sunset card shadow color (#6152)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/emailTemplate.test.tsx

@@ -101,7 +101,7 @@ const mockProject = {
     highlightBorderColor: null,
     cardBackgroundColor: { light: "#FFFFFF", dark: "#000000" },
     cardBorderColor: { light: "#FFFFFF", dark: "#000000" },
-    cardShadowColor: { light: "#FFFFFF", dark: "#000000" },
+
     questionColor: { light: "#FFFFFF", dark: "#000000" },
     inputColor: { light: "#FFFFFF", dark: "#000000" },
     inputBorderColor: { light: "#FFFFFF", dark: "#000000" },
@@ -123,7 +123,7 @@ const mockComputedStyling = {
   inputBorderColor: "#000000",
   cardBackgroundColor: "#FFFFFF",
   cardBorderColor: "#EEEEEE",
-  cardShadowColor: "#AAAAAA",
+
   highlightBorderColor: null,
   thankYouCardIconColor: "#007BFF",
   thankYouCardIconBgColor: "#DDDDDD",

apps/web/lib/styling/constants.ts

@@ -8,7 +8,6 @@ export const COLOR_DEFAULTS = {
   inputBorderColor: "#cbd5e1",
   cardBackgroundColor: "#ffffff",
   cardBorderColor: "#f8fafc",
-  cardShadowColor: "#000000",
   highlightBorderColor: "#64748b",
 } as const;
 
@@ -32,9 +31,6 @@ export const defaultStyling: TProjectStyling = {
   cardBorderColor: {
     light: COLOR_DEFAULTS.cardBorderColor,
   },
-  cardShadowColor: {
-    light: COLOR_DEFAULTS.cardShadowColor,
-  },
   isLogoHidden: false,
   highlightBorderColor: undefined,
   isDarkModeEnabled: false,

apps/web/locales/de-DE.json

@@ -1296,7 +1296,6 @@
         "card_arrangement_for_survey_type_derived": "Kartenanordnung für {surveyTypeDerived} Umfragen",
         "card_background_color": "Hintergrundfarbe der Karte",
         "card_border_color": "Farbe des Kartenrandes",
-        "card_shadow_color": "Farbton des Kartenschattens",
         "card_styling": "Kartenstil",
         "casual": "Lässig",
         "caution_edit_duplicate": "Duplizieren & bearbeiten",
@@ -1321,7 +1320,6 @@
         "change_the_brand_color_of_the_survey": "Markenfarbe der Umfrage ändern.",
         "change_the_placement_of_this_survey": "Platzierung dieser Umfrage ändern.",
         "change_the_question_color_of_the_survey": "Fragefarbe der Umfrage ändern.",
-        "change_the_shadow_color_of_the_card": "Schattenfarbe der Karte ändern.",
         "changes_saved": "Änderungen gespeichert.",
         "character_limit_toggle_description": "Begrenzen Sie, wie kurz oder lang eine Antwort sein kann.",
         "character_limit_toggle_title": "Fügen Sie Zeichenbeschränkungen hinzu",
@@ -2819,4 +2817,4 @@
     "understand_purchase_intention_question_3_headline": "Was, wenn überhaupt, hält Dich heute davon ab, einen Kauf zu tätigen?",
     "understand_purchase_intention_question_3_placeholder": "Tippe deine Antwort hier..."
   }
-}
+}

apps/web/locales/en-US.json

@@ -1296,7 +1296,6 @@
         "card_arrangement_for_survey_type_derived": "Card Arrangement for {surveyTypeDerived} Surveys",
         "card_background_color": "Card background color",
         "card_border_color": "Card border color",
-        "card_shadow_color": "Card shadow color",
         "card_styling": "Card Styling",
         "casual": "Casual",
         "caution_edit_duplicate": "Duplicate & edit",
@@ -1321,7 +1320,6 @@
         "change_the_brand_color_of_the_survey": "Change the brand color of the survey.",
         "change_the_placement_of_this_survey": "Change the placement of this survey.",
         "change_the_question_color_of_the_survey": "Change the question color of the survey.",
-        "change_the_shadow_color_of_the_card": "Change the shadow color of the card.",
         "changes_saved": "Changes saved.",
         "character_limit_toggle_description": "Limit how short or long an answer can be.",
         "character_limit_toggle_title": "Add character limits",
@@ -2819,4 +2817,4 @@
     "understand_purchase_intention_question_3_headline": "What, if anything, is holding you back from making a purchase today?",
     "understand_purchase_intention_question_3_placeholder": "Type your answer here..."
   }
-}
+}

apps/web/locales/fr-FR.json

@@ -1296,7 +1296,6 @@
         "card_arrangement_for_survey_type_derived": "Disposition des cartes pour les enquêtes {surveyTypeDerived}",
         "card_background_color": "Couleur de fond de la carte",
         "card_border_color": "Couleur de la bordure de la carte",
-        "card_shadow_color": "Couleur de l'ombre de la carte",
         "card_styling": "Style de carte",
         "casual": "Décontracté",
         "caution_edit_duplicate": "Dupliquer et modifier",
@@ -1321,7 +1320,6 @@
         "change_the_brand_color_of_the_survey": "Changez la couleur de la marque du sondage.",
         "change_the_placement_of_this_survey": "Changez le placement de cette enquête.",
         "change_the_question_color_of_the_survey": "Changez la couleur des questions du sondage.",
-        "change_the_shadow_color_of_the_card": "Changez la couleur de l'ombre de la carte.",
         "changes_saved": "Modifications enregistrées.",
         "character_limit_toggle_description": "Limitez la longueur des réponses.",
         "character_limit_toggle_title": "Ajouter des limites de caractères",
@@ -2819,4 +2817,4 @@
     "understand_purchase_intention_question_3_headline": "Qu'est-ce qui vous empêche de faire un achat aujourd'hui, s'il y a quelque chose ?",
     "understand_purchase_intention_question_3_placeholder": "Entrez votre réponse ici..."
   }
-}
+}

apps/web/locales/pt-BR.json

@@ -1296,7 +1296,6 @@
         "card_arrangement_for_survey_type_derived": "Arranjo de Cartões para Pesquisas {surveyTypeDerived}",
         "card_background_color": "Cor de fundo do cartão",
         "card_border_color": "Cor da borda do cartão",
-        "card_shadow_color": "cor da sombra do cartão",
         "card_styling": "Estilização de Cartão",
         "casual": "Casual",
         "caution_edit_duplicate": "Duplicar e editar",
@@ -1321,7 +1320,6 @@
         "change_the_brand_color_of_the_survey": "Muda a cor da marca da pesquisa.",
         "change_the_placement_of_this_survey": "Muda a posição dessa pesquisa.",
         "change_the_question_color_of_the_survey": "Muda a cor da pergunta da pesquisa.",
-        "change_the_shadow_color_of_the_card": "Muda a cor da sombra do cartão.",
         "changes_saved": "Mudanças salvas.",
         "character_limit_toggle_description": "Limite o quão curta ou longa uma resposta pode ser.",
         "character_limit_toggle_title": "Adicionar limites de caracteres",
@@ -2819,4 +2817,4 @@
     "understand_purchase_intention_question_3_headline": "O que, se é que tem algo, está te impedindo de fazer a compra hoje?",
     "understand_purchase_intention_question_3_placeholder": "Digite sua resposta aqui..."
   }
-}
+}

apps/web/locales/pt-PT.json

@@ -1296,7 +1296,6 @@
         "card_arrangement_for_survey_type_derived": "Arranjo de Cartões para Inquéritos {surveyTypeDerived}",
         "card_background_color": "Cor de fundo do cartão",
         "card_border_color": "Cor da borda do cartão",
-        "card_shadow_color": "Cor da sombra do cartão",
         "card_styling": "Estilo do cartão",
         "casual": "Casual",
         "caution_edit_duplicate": "Duplicar e editar",
@@ -1321,7 +1320,6 @@
         "change_the_brand_color_of_the_survey": "Alterar a cor da marca do inquérito",
         "change_the_placement_of_this_survey": "Alterar a colocação deste inquérito.",
         "change_the_question_color_of_the_survey": "Alterar a cor da pergunta do inquérito",
-        "change_the_shadow_color_of_the_card": "Alterar a cor da sombra do cartão.",
         "changes_saved": "Alterações guardadas.",
         "character_limit_toggle_description": "Limitar o quão curta ou longa uma resposta pode ser.",
         "character_limit_toggle_title": "Adicionar limites de caracteres",
@@ -2819,4 +2817,4 @@
     "understand_purchase_intention_question_3_headline": "O que, se alguma coisa, o está a impedir de fazer uma compra hoje?",
     "understand_purchase_intention_question_3_placeholder": "Escreva a sua resposta aqui..."
   }
-}
+}

apps/web/locales/zh-Hant-TW.json

@@ -1296,7 +1296,6 @@
         "card_arrangement_for_survey_type_derived": "'{'surveyTypeDerived'}' 問卷的卡片排列",
         "card_background_color": "卡片背景顏色",
         "card_border_color": "卡片邊框顏色",
-        "card_shadow_color": "卡片陰影顏色",
         "card_styling": "卡片樣式設定",
         "casual": "隨意",
         "caution_edit_duplicate": "複製 & 編輯",
@@ -1321,7 +1320,6 @@
         "change_the_brand_color_of_the_survey": "變更問卷的品牌顏色。",
         "change_the_placement_of_this_survey": "變更此問卷的位置。",
         "change_the_question_color_of_the_survey": "變更問卷的問題顏色。",
-        "change_the_shadow_color_of_the_card": "變更卡片的陰影顏色。",
         "changes_saved": "已儲存變更。",
         "character_limit_toggle_description": "限制答案的長度或短度。",
         "character_limit_toggle_title": "新增字元限制",
@@ -2819,4 +2817,4 @@
     "understand_purchase_intention_question_3_headline": "有什麼阻礙您今天進行購買嗎？",
     "understand_purchase_intention_question_3_placeholder": "在此輸入您的答案..."
   }
-}
+}

apps/web/modules/ee/whitelabel/remove-branding/lib/project.test.ts

@@ -39,7 +39,7 @@ describe("updateProjectBranding", () => {
         inputBorderColor: { light: "#cbd5e1" },
         cardBackgroundColor: { light: "#ffffff" },
         cardBorderColor: { light: "#f8fafc" },
-        cardShadowColor: { light: "#000000" },
+
         isLogoHidden: false,
         isDarkModeEnabled: false,
         background: { bg: "#fff", bgType: "color" as const },

apps/web/modules/survey/editor/components/form-styling-settings.test.tsx

@@ -56,7 +56,6 @@ describe("FormStylingSettings Component", () => {
           inputBorderColor: { light: "#cccccc" },
           cardBackgroundColor: { light: "#ffffff" },
           cardBorderColor: { light: "#eeeeee" },
-          cardShadowColor: { light: "#dddddd" },
         },
       }) as UseFormReturn<TProjectStyling | TSurveyStyling>;
 
@@ -106,7 +105,6 @@ describe("FormStylingSettings Component", () => {
           inputBorderColor: { light: "#cccccc" },
           cardBackgroundColor: { light: "#ffffff" },
           cardBorderColor: { light: "#eeeeee" },
-          cardShadowColor: { light: "#dddddd" },
         },
       }) as UseFormReturn<TProjectStyling | TSurveyStyling>;
 
@@ -169,7 +167,6 @@ describe("FormStylingSettings Component", () => {
           inputBorderColor: { light: "#cccccc" },
           cardBackgroundColor: { light: "#ffffff" },
           cardBorderColor: { light: "#eeeeee" },
-          cardShadowColor: { light: "#dddddd" },
         },
       }) as UseFormReturn<TProjectStyling | TSurveyStyling>;
 
@@ -215,7 +212,6 @@ describe("FormStylingSettings Component", () => {
           inputBorderColor: { light: "#cccccc" },
           cardBackgroundColor: { light: "#ffffff" },
           cardBorderColor: { light: "#eeeeee" },
-          cardShadowColor: { light: "#dddddd" },
         },
       }) as UseFormReturn<TProjectStyling | TSurveyStyling>;
 
@@ -261,7 +257,6 @@ describe("FormStylingSettings Component", () => {
           inputBorderColor: { light: "#cccccc" },
           cardBackgroundColor: { light: "#ffffff" },
           cardBorderColor: { light: "#eeeeee" },
-          cardShadowColor: { light: "#dddddd" },
         },
       }) as UseFormReturn<TProjectStyling | TSurveyStyling>;
 
@@ -384,7 +379,6 @@ describe("FormStylingSettings Component", () => {
           inputBorderColor: { light: "#cccccc" },
           cardBackgroundColor: { light: "#ffffff" },
           cardBorderColor: { light: "#eeeeee" },
-          cardShadowColor: { light: "#dddddd" },
         },
       }) as UseFormReturn<TProjectStyling | TSurveyStyling>;
 

apps/web/modules/survey/editor/components/form-styling-settings.tsx

@@ -40,7 +40,7 @@ export const FormStylingSettings = ({
   const setInputBorderColor = (color: string) => form.setValue("inputBorderColor.light", color);
   const setCardBackgroundColor = (color: string) => form.setValue("cardBackgroundColor.light", color);
   const setCardBorderColor = (color: string) => form.setValue("cardBorderColor.light", color);
-  const setCardShadowColor = (color: string) => form.setValue("cardShadowColor.light", color);
+
   const setBackgroundColor = (color: string) => {
     form.setValue("background", {
       bg: color,
@@ -59,7 +59,6 @@ export const FormStylingSettings = ({
 
     setCardBackgroundColor(mixColor(brandColor, "#ffffff", 0.97));
     setCardBorderColor(mixColor(brandColor, "#ffffff", 0.8));
-    setCardShadowColor(brandColor);
 
     if (!background || background?.bgType === "color") {
       setBackgroundColor(mixColor(brandColor, "#ffffff", 0.855));

apps/web/modules/ui/components/card-styling-settings/index.test.tsx

@@ -82,7 +82,6 @@ const TestWrapper = ({
     isLogoHidden: false,
     cardBackgroundColor: { light: "#ffffff" },
     cardBorderColor: { light: "#e2e8f0" },
-    cardShadowColor: { light: "#f1f5f9" },
   },
 }) => {
   const methods = useForm({ defaultValues });
@@ -109,7 +108,6 @@ const TestComponent = ({
       isLogoHidden: false,
       cardBackgroundColor: { light: "#ffffff" },
       cardBorderColor: { light: "#e2e8f0" },
-      cardShadowColor: { light: "#f1f5f9" },
     },
   });
 
@@ -176,7 +174,7 @@ describe("CardStylingSettings", () => {
     // Check for color picker labels
     expect(screen.getByText("environments.surveys.edit.card_background_color")).toBeInTheDocument();
     expect(screen.getByText("environments.surveys.edit.card_border_color")).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.edit.card_shadow_color")).toBeInTheDocument();
+
   });
 
   test("renders slider for roundness adjustment", () => {

apps/web/modules/ui/components/card-styling-settings/index.tsx

@@ -162,28 +162,7 @@ export const CardStylingSettings = ({
             )}
           />
 
-          <FormField
-            control={form.control}
-            name="cardShadowColor.light"
-            render={({ field }) => (
-              <FormItem className="space-y-4">
-                <div>
-                  <FormLabel>{t("environments.surveys.edit.card_shadow_color")}</FormLabel>
-                  <FormDescription>
-                    {t("environments.surveys.edit.change_the_shadow_color_of_the_card")}
-                  </FormDescription>
-                </div>
 
-                <FormControl>
-                  <ColorPicker
-                    color={field.value || COLOR_DEFAULTS.cardShadowColor}
-                    onChange={(color) => field.onChange(color)}
-                    containerClass="max-w-xs"
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
 
           <FormField
             control={form.control}

docs/api-v2-reference/openapi.yml

@@ -4297,21 +4297,7 @@ components:
                   pattern: ^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
               required:
                 - light
-            cardShadowColor:
-              type:
-                - object
-                - "null"
-              properties:
-                light:
-                  type: string
-                  pattern: ^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
-                dark:
-                  type:
-                    - string
-                    - "null"
-                  pattern: ^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
-              required:
-                - light
+
             highlightBorderColor:
               type:
                 - object

docs/xm-and-surveys/core-features/styling-theme.mdx

@@ -33,7 +33,7 @@ In the left side bar, you find the `Configuration` page. On this page you find t
 - **Roundness**: Adjusts the corner roundness of the survey card and its components (including input boxes, buttons).
 - **Card Background Color**: Sets the card's main background color.
 - **Card Border Color**: Changes the border color of the card
-- **Card Shadow Color**: Adds a shadow effect for depth
+
 - **Hide Progress Bar**: Optionally remove the progress bar to simplify the survey experience
 - **Add Highlight Border**: Adds a distinct border for emphasis.
 

docs/xm-and-surveys/surveys/general-features/overwrite-styling.mdx

@@ -48,7 +48,6 @@ You can overwrite the default CSS styles for app and website surveys by adding t
 --fb-accent-background-color: rgb(13, 13, 12);
 --fb-accent-background-color-selected: red;
 --fb-placeholder-color: white;
---fb-shadow-color: var(--fb-brand-color);
 --fb-rating-fill: rgb(13, 13, 12);
 --fb-rating-hover: green;
 --fb-back-btn-border: blue;

packages/android/formbricksSDK/src/androidTest/resources/Environment.json

@@ -59,7 +59,11 @@
           "questions": [
             {
               "allowMultipleFiles": true,
-              "allowedFileExtensions": ["jpeg", "jpg", "png"],
+              "allowedFileExtensions": [
+                "jpeg",
+                "jpg",
+                "png"
+              ],
               "backButtonLabel": {
                 "default": "Back"
               },
@@ -302,7 +306,9 @@
             "filters": [],
             "id": "cm6ovw6jl000hsf0knn547w0y",
             "isPrivate": true,
-            "surveys": ["cm6ovw6j7000gsf0kduf4oo4i"],
+            "surveys": [
+              "cm6ovw6j7000gsf0kduf4oo4i"
+            ],
             "title": "cm6ovw6j7000gsf0kduf4oo4i",
             "updatedAt": "2025-02-03T10:04:21.922Z"
           },
@@ -326,9 +332,6 @@
             "cardBorderColor": {
               "light": "#f8fafc"
             },
-            "cardShadowColor": {
-              "light": "#000000"
-            },
             "inputBorderColor": {
               "light": "#090e14"
             },
@@ -372,4 +375,4 @@
     },
     "expiresAt": "2035-03-06T10:33:38.647Z"
   }
-}
+}

packages/database/zod/surveys.ts

@@ -173,7 +173,6 @@ const ZSurveyBase = z.object({
       inputBorderColor: ZStylingColor.nullish(),
       cardBackgroundColor: ZStylingColor.nullish(),
       cardBorderColor: ZStylingColor.nullish(),
-      cardShadowColor: ZStylingColor.nullish(),
       highlightBorderColor: ZStylingColor.nullish(),
       isDarkModeEnabled: z.boolean().nullish(),
       roundness: z.number().nullish(),

packages/ios/FormbricksSDK/FormbricksSDKTests/Mock/Response/Environment.json

@@ -59,7 +59,11 @@
           "questions": [
             {
               "allowMultipleFiles": true,
-              "allowedFileExtensions": ["jpeg", "jpg", "png"],
+              "allowedFileExtensions": [
+                "jpeg",
+                "jpg",
+                "png"
+              ],
               "backButtonLabel": {
                 "default": "Back"
               },
@@ -302,7 +306,9 @@
             "filters": [],
             "id": "cm6ovw6jl000hsf0knn547w0y",
             "isPrivate": true,
-            "surveys": ["cm6ovw6j7000gsf0kduf4oo4i"],
+            "surveys": [
+              "cm6ovw6j7000gsf0kduf4oo4i"
+            ],
             "title": "cm6ovw6j7000gsf0kduf4oo4i",
             "updatedAt": "2025-02-03T10:04:21.922Z"
           },
@@ -326,9 +332,6 @@
             "cardBorderColor": {
               "light": "#f8fafc"
             },
-            "cardShadowColor": {
-              "light": "#000000"
-            },
             "inputBorderColor": {
               "light": "#090e14"
             },
@@ -372,4 +375,4 @@
     },
     "expiresAt": "2035-03-06T10:33:38.647Z"
   }
-}
+}

packages/js-core/src/types/config.ts

@@ -100,7 +100,6 @@ export interface TBaseStyling {
   inputBorderColor?: TStylingColor | null;
   cardBackgroundColor?: TStylingColor | null;
   cardBorderColor?: TStylingColor | null;
-  cardShadowColor?: TStylingColor | null;
   highlightBorderColor?: TStylingColor | null;
   isDarkModeEnabled?: boolean | null;
   roundness?: number | null;

packages/surveys/src/components/general/survey.tsx

@@ -109,14 +109,14 @@ export function Survey({
             setErrorType(errorCode);
 
             if (getSetIsError) {
-              getSetIsError((_prev) => {});
+              getSetIsError((_prev) => { });
             }
           },
           onResponseSendingFinished: () => {
             setIsResponseSendingFinished(true);
 
             if (getSetIsResponseSendingFinished) {
-              getSetIsResponseSendingFinished((_prev) => {});
+              getSetIsResponseSendingFinished((_prev) => { });
             }
           },
         },
@@ -698,7 +698,6 @@ export function Survey({
         <div
           className={cn(
             "fb-no-scrollbar fb-bg-survey-bg fb-flex fb-h-full fb-w-full fb-flex-col fb-justify-between fb-overflow-hidden fb-transition-all fb-duration-1000 fb-ease-in-out",
-            cardArrangement === "simple" ? "fb-survey-shadow" : "",
             offset === 0 || cardArrangement === "simple" ? "fb-opacity-100" : "fb-opacity-0"
           )}>
           <div className="fb-flex fb-h-6 fb-justify-end fb-pr-2 fb-pt-2">

packages/surveys/src/components/wrappers/stacked-cards-container.test.tsx

@@ -158,7 +158,7 @@ const mockProjectStyling: TProjectStyling = {
   cardBorderColor: { light: "#projCardBorder", dark: "#projCardBorder_dark" },
   brandColor: { light: "#brand", dark: "#brand_dark" },
   cardBackgroundColor: { light: "#projCardBg", dark: "#projCardBg_dark" },
-  cardShadowColor: { light: "#projCardShadow", dark: "#projCardShadow_dark" },
+
   questionColor: { light: "#projQ", dark: "#projQ_dark" },
   inputColor: { light: "#projInput", dark: "#projInput_dark" },
   inputBorderColor: { light: "#projInputBorder", dark: "#projInputBorder_dark" },

packages/surveys/src/lib/styles.test.ts

@@ -27,7 +27,7 @@ const getBaseProjectStyling = (overrides: Partial<TProjectStyling> = {}): TProje
     brandColor: null,
     cardBackgroundColor: null,
     cardBorderColor: null,
-    cardShadowColor: null,
+
     questionColor: null,
     inputColor: null,
     inputBorderColor: null,
@@ -171,7 +171,7 @@ describe("addCustomThemeToDom", () => {
       inputBorderColor: { light: "#DDDDDD" },
       cardBackgroundColor: { light: "#EEEEEE" },
       cardBorderColor: { light: "#CCCCCC" },
-      cardShadowColor: { light: "#BBBBBB" },
+
       inputColor: { light: "#F0F0F0" },
       roundness: 12,
       hideProgressBar: false,
@@ -186,7 +186,6 @@ describe("addCustomThemeToDom", () => {
     expect(variables["--fb-brand-color"]).toBe("#112233");
     expect(variables["--fb-focus-color"]).toBe("#112233");
     expect(variables["--fb-brand-text-color"]).toBe("white");
-    expect(variables["--fb-survey-shadow-color"]).toBeDefined(); // Relies on mixColor
     expect(variables["--fb-heading-color"]).toBe("#AABBCC");
     expect(variables["--fb-subheading-color"]).toBe("#AABBCC");
     expect(variables["--fb-placeholder-color"]).toBeDefined(); // Relies on mixColor
@@ -280,7 +279,7 @@ describe("getBaseProjectStyling_Helper", () => {
     expect(baseStyling.brandColor).toBeNull();
     expect(baseStyling.cardBackgroundColor).toBeNull();
     expect(baseStyling.cardBorderColor).toBeNull();
-    expect(baseStyling.cardShadowColor).toBeNull();
+
     expect(baseStyling.questionColor).toBeNull();
     // Specifically testing lines highlighted by user
     expect(baseStyling.inputColor).toBeNull();

packages/surveys/src/lib/styles.ts

@@ -53,10 +53,7 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
     appendCssVariable("brand-text-color", "#ffffff");
   }
 
-  if (styling.cardShadowColor?.light) {
-    // mix the shadow color with white to get a lighter shadow
-    appendCssVariable("survey-shadow-color", mixColor(styling.cardShadowColor.light, "#ffffff", 0.4));
-  }
+
 
   appendCssVariable("heading-color", styling.questionColor?.light);
   appendCssVariable("subheading-color", styling.questionColor?.light);

packages/surveys/src/styles/global.css

@@ -42,10 +42,6 @@ p.fb-editor-paragraph {
   overflow-wrap: break-word;
 }
 
-.fb-survey-shadow {
-  box-shadow: 0px 0px 90px -40px var(--fb-survey-shadow-color);
-}
-
 /* theming */
 :root {
   --brand-default: #64748b;
@@ -79,13 +75,11 @@ p.fb-editor-paragraph {
   --fb-branding-text-color: var(--slate-500);
   --fb-survey-background-color: white;
   --fb-survey-border-color: var(--slate-50);
-  --fb-survey-shadow-color: rgba(0, 0, 0, 0.4);
   --fb-accent-background-color: var(--slate-200);
   --fb-accent-background-color-selected: var(--slate-100);
   --fb-input-background-color: var(--slate-50);
   --fb-input-background-color-selected: var(--slate-200);
   --fb-placeholder-color: var(--slate-400);
-  --fb-shadow-color: var(--slate-300);
   --fb-rating-fill: var(--yellow-100);
   --fb-rating-hover: var(--yellow-500);
   --fb-back-btn-border: transparent;
@@ -128,4 +122,4 @@ p.fb-editor-paragraph {
 
 .grecaptcha-badge {
   visibility: hidden;
-}
+}

packages/surveys/tailwind.config.cjs

@@ -23,13 +23,11 @@ module.exports = {
         "branding-text": "var(--fb-branding-text-color)",
         "survey-bg": "var(--fb-survey-background-color)",
         "survey-border": "var(--fb-survey-border-color)",
-        "survey-shadow": "var(--fb-survey-shadow-color)",
         "accent-bg": "var(--fb-accent-background-color)",
         "accent-selected-bg": "var(--fb-accent-background-color-selected)",
         "input-bg": "var(--fb-input-background-color)",
         "input-bg-selected": "var(--fb-input-background-color-selected)",
         placeholder: "var(--fb-placeholder-color)",
-        shadow: "var(--fb-shadow-color)",
         "rating-fill": "var(--fb-rating-fill)",
         "rating-focus": "var(--fb-rating-hover)",
         "rating-selected": "var(--fb-rating-selected)",

packages/types/styling.ts

@@ -41,7 +41,6 @@ export const ZBaseStyling = z.object({
   inputBorderColor: ZStylingColor.nullish(),
   cardBackgroundColor: ZStylingColor.nullish(),
   cardBorderColor: ZStylingColor.nullish(),
-  cardShadowColor: ZStylingColor.nullish(),
   highlightBorderColor: ZStylingColor.nullish(),
   isDarkModeEnabled: z.boolean().nullish(),
   roundness: z.number().nullish(),