mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-17 10:19:55 -06:00
Code Issues Packages Projects Releases 124 Wiki Activity

fix: input placeholder color (#7265)

Browse Source
This commit is contained in:
Theodór Tómas
2026-02-17 12:11:01 +07:00
committed by GitHub
parent d7c57a7a48
commit 21559045ba
4 changed files with 45 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/playwright/survey-styling.spec.ts
View File

@@ -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");

2
packages/survey-ui/src/styles/globals.css
View File

@@ -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;

33
packages/surveys/src/lib/styles.test.ts
View File

@@ -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

12
packages/surveys/src/lib/styles.ts
View File

@@ -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)