From 21559045ba11794f792d89b1048ea09f490776cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Theod=C3=B3r=20T=C3=B3mas?= Date: Tue, 17 Feb 2026 12:11:01 +0700 Subject: [PATCH] fix: input placeholder color (#7265) --- apps/web/playwright/survey-styling.spec.ts | 1 + packages/survey-ui/src/styles/globals.css | 2 +- packages/surveys/src/lib/styles.test.ts | 33 ++++++++++++++++++++++ packages/surveys/src/lib/styles.ts | 12 ++++++-- 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/apps/web/playwright/survey-styling.spec.ts b/apps/web/playwright/survey-styling.spec.ts index 68508d1486..1d0c422171 100644 --- a/apps/web/playwright/survey-styling.spec.ts +++ b/apps/web/playwright/survey-styling.spec.ts @@ -96,6 +96,7 @@ test.describe("Survey Styling", async () => { expect(css).toContain("--fb-input-background-color: #eeeeee"); expect(css).toContain("--fb-input-border-color: #cccccc"); expect(css).toContain("--fb-input-text-color: #024eff"); + expect(css).toContain("--fb-input-placeholder-color:"); expect(css).toContain("--fb-input-border-radius: 5px"); expect(css).toContain("--fb-input-height: 50px"); expect(css).toContain("--fb-input-font-size: 16px"); diff --git a/packages/survey-ui/src/styles/globals.css b/packages/survey-ui/src/styles/globals.css index 71ad9e1b88..9201532e22 100644 --- a/packages/survey-ui/src/styles/globals.css +++ b/packages/survey-ui/src/styles/globals.css @@ -127,7 +127,7 @@ --fb-input-font-size: 14px; --fb-input-font-weight: 400; --fb-input-color: #414b5a; - --fb-input-placeholder-color: var(--fb-input-color); + --fb-input-placeholder-color: var(--fb-input-text-color, var(--fb-input-color)); --fb-input-placeholder-opacity: 0.5; --fb-input-width: 100%; --fb-input-height: 40px; diff --git a/packages/surveys/src/lib/styles.test.ts b/packages/surveys/src/lib/styles.test.ts index d4955f45d9..4c6092a310 100644 --- a/packages/surveys/src/lib/styles.test.ts +++ b/packages/surveys/src/lib/styles.test.ts @@ -443,6 +443,39 @@ describe("addCustomThemeToDom", () => { expect(variables["--fb-button-font-size"]).toBe("1.5rem"); }); + test("should derive input-placeholder-color from inputTextColor when set", () => { + const styling: TSurveyStyling = { + ...getBaseProjectStyling(), + questionColor: { light: "#AABBCC" }, + inputTextColor: { light: "#112233" }, + }; + addCustomThemeToDom({ styling }); + const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement; + const variables = getCssVariables(styleElement); + + // Placeholder should be derived from inputTextColor, not questionColor + expect(variables["--fb-input-placeholder-color"]).toBeDefined(); + expect(variables["--fb-placeholder-color"]).toBeDefined(); + // Both should be based on inputTextColor (#112233) mixed with white, not questionColor (#AABBCC) + // We can verify by checking the placeholder color doesn't contain the questionColor mix + expect(variables["--fb-input-placeholder-color"]).toBe(variables["--fb-placeholder-color"]); + }); + + test("should derive input-placeholder-color from questionColor when inputTextColor is not set", () => { + const styling: TSurveyStyling = { + ...getBaseProjectStyling(), + questionColor: { light: "#AABBCC" }, + }; + addCustomThemeToDom({ styling }); + const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement; + const variables = getCssVariables(styleElement); + + // Placeholder should fall back to questionColor when inputTextColor is not set + expect(variables["--fb-input-placeholder-color"]).toBeDefined(); + expect(variables["--fb-placeholder-color"]).toBeDefined(); + expect(variables["--fb-input-placeholder-color"]).toBe(variables["--fb-placeholder-color"]); + }); + test("should set signature and branding text colors for dark questionColor", () => { const styling = getBaseProjectStyling({ questionColor: { light: "#202020" }, // A dark color diff --git a/packages/surveys/src/lib/styles.ts b/packages/surveys/src/lib/styles.ts index ebccebdb03..b767e07223 100644 --- a/packages/surveys/src/lib/styles.ts +++ b/packages/surveys/src/lib/styles.ts @@ -111,8 +111,10 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS // Backwards-compat: legacy variables still used by some consumers/tests appendCssVariable("subheading-color", styling.questionColor?.light); - if (styling.questionColor?.light) { - appendCssVariable("placeholder-color", mixColor(styling.questionColor.light, "#ffffff", 0.3)); + const placeholderBaseColor = styling.inputTextColor?.light ?? styling.questionColor?.light; + if (placeholderBaseColor) { + appendCssVariable("placeholder-color", mixColor(placeholderBaseColor, "#ffffff", 0.3)); + appendCssVariable("input-placeholder-color", mixColor(placeholderBaseColor, "#ffffff", 0.3)); } appendCssVariable("border-color", styling.inputBorderColor?.light); @@ -210,6 +212,12 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS // Inputs (Advanced) appendCssVariable("input-background-color", styling.inputBgColor?.light ?? styling.inputColor?.light); appendCssVariable("input-text-color", styling.inputTextColor?.light); + if (styling.inputTextColor?.light) { + appendCssVariable( + "input-placeholder-color", + mixColor(styling.inputTextColor.light, "#ffffff", 0.3) + ); + } if (styling.inputBorderRadius !== undefined) appendCssVariable("input-border-radius", formatDimension(styling.inputBorderRadius)); if (styling.inputHeight !== undefined)