From 6c7aa64d2ebec43329ab466524389379f7258cc9 Mon Sep 17 00:00:00 2001 From: TheodorTomas Date: Fri, 6 Feb 2026 20:53:59 +0800 Subject: [PATCH] fix: revert CSS defaults to static values and align ADVANCED_DEFAULTS with main branch - Revert globals.css to pre-bug static defaults (no var(--fb-survey-brand-color) live bindings) so changing the brand color picker doesn't cascade to other elements - Align ADVANCED_DEFAULTS with old main branch visual defaults (button px-3 py-3 text-base font-medium rounded-custom, headline font-semibold, description slate-700, input border radius 8, etc.) - Add missing color fields to getBrandDerivedDefaults (questionColor, inputColor, inputBorderColor, cardBackgroundColor, cardBorderColor) so first-time users with no saved styles get a fully brand-derived theme --- apps/web/lib/styling/constants.ts | 42 +++++++++++++++++------ packages/survey-ui/src/styles/globals.css | 18 +++++----- 2 files changed, 40 insertions(+), 20 deletions(-) diff --git a/apps/web/lib/styling/constants.ts b/apps/web/lib/styling/constants.ts index fbe6f9d9c7..ffadf6992c 100644 --- a/apps/web/lib/styling/constants.ts +++ b/apps/web/lib/styling/constants.ts @@ -17,16 +17,15 @@ export const ADVANCED_DEFAULTS = { accentBgColorSelected: "#f1f5f9", buttonBgColor: COLOR_DEFAULTS.brandColor, buttonTextColor: "#ffffff", - buttonBorderRadius: 10, - buttonHeight: 36, - buttonFontSize: 14, + buttonBorderRadius: 8, + buttonFontSize: 16, buttonFontWeight: "500", - buttonPaddingX: 16, - buttonPaddingY: 8, + buttonPaddingX: 12, + buttonPaddingY: 12, inputBgColor: "#f8fafc", - inputBorderColor: "#64748b", + inputBorderColor: COLOR_DEFAULTS.inputBorderColor, inputTextColor: "#0f172a", - inputBorderRadius: 10, + inputBorderRadius: 8, inputHeight: 40, inputFontSize: 14, inputPaddingX: 16, @@ -35,16 +34,16 @@ export const ADVANCED_DEFAULTS = { inputShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)", optionBgColor: "#f8fafc", optionLabelColor: "#0f172a", - optionBorderRadius: 10, + optionBorderRadius: 8, optionPaddingX: 16, optionPaddingY: 16, optionFontSize: 14, elementHeadlineFontSize: 16, - elementHeadlineFontWeight: "400", + elementHeadlineFontWeight: "600", elementHeadlineColor: "#0f172a", elementDescriptionFontSize: 14, elementDescriptionFontWeight: "400", - elementDescriptionColor: "#0f172a", + elementDescriptionColor: "#334155", elementUpperLabelFontSize: 12, elementUpperLabelColor: "#64748b", elementUpperLabelFontWeight: "400", @@ -94,7 +93,6 @@ export const defaultStyling: TProjectStyling = { light: ADVANCED_DEFAULTS.buttonTextColor, }, buttonBorderRadius: ADVANCED_DEFAULTS.buttonBorderRadius, - buttonHeight: ADVANCED_DEFAULTS.buttonHeight, buttonFontSize: ADVANCED_DEFAULTS.buttonFontSize, buttonFontWeight: ADVANCED_DEFAULTS.buttonFontWeight, buttonPaddingX: ADVANCED_DEFAULTS.buttonPaddingX, @@ -226,17 +224,39 @@ export const getBrandDerivedDefaults = (brandColor: string) => { const suggested = getSuggestedColors(brandColor); return { + // General colors + questionColor: { light: suggested["questionColor.light"] }, + + // Accent accentBgColor: { light: suggested["accentBgColor.light"] }, accentBgColorSelected: { light: suggested["accentBgColorSelected.light"] }, + + // Headlines & Descriptions elementHeadlineColor: { light: suggested["elementHeadlineColor.light"] }, elementDescriptionColor: { light: suggested["elementDescriptionColor.light"] }, elementUpperLabelColor: { light: suggested["elementUpperLabelColor.light"] }, + + // Buttons buttonBgColor: { light: suggested["buttonBgColor.light"] }, buttonTextColor: { light: suggested["buttonTextColor.light"] }, + + // Inputs + inputColor: { light: suggested["inputColor.light"] }, + inputBorderColor: { light: suggested["inputBorderColor.light"] }, inputTextColor: { light: suggested["inputTextColor.light"] }, + + // Options (Radio / Checkbox) optionBgColor: { light: suggested["optionBgColor.light"] }, optionLabelColor: { light: suggested["optionLabelColor.light"] }, + + // Card + cardBackgroundColor: { light: suggested["cardBackgroundColor.light"] }, + cardBorderColor: { light: suggested["cardBorderColor.light"] }, + + // Highlight / Focus highlightBorderColor: { light: suggested["highlightBorderColor.light"] }, + + // Progress Bar progressIndicatorBgColor: { light: suggested["progressIndicatorBgColor.light"] }, progressTrackBgColor: { light: suggested["progressTrackBgColor.light"] }, }; diff --git a/packages/survey-ui/src/styles/globals.css b/packages/survey-ui/src/styles/globals.css index fcb32fda6c..912b2b6d30 100644 --- a/packages/survey-ui/src/styles/globals.css +++ b/packages/survey-ui/src/styles/globals.css @@ -59,8 +59,8 @@ --------------------------------------------------------------------------- */ --fb-survey-brand-color: #64748b; - --fb-accent-background-color: var(--fb-survey-brand-color); - --fb-accent-background-color-selected: color-mix(in srgb, var(--fb-survey-brand-color) 90%, white); + --fb-accent-background-color: var(--slate-200); + --fb-accent-background-color-selected: var(--slate-100); /* --------------------------------------------------------------------------- Element Headline Tokens @@ -69,7 +69,7 @@ --fb-element-headline-font-family: inherit; --fb-element-headline-font-weight: 600; --fb-element-headline-font-size: 1rem; - --fb-element-headline-color: var(--fb-survey-brand-color); + --fb-element-headline-color: var(--input); --fb-element-headline-opacity: 1; /* --------------------------------------------------------------------------- @@ -79,7 +79,7 @@ --fb-element-description-font-family: inherit; --fb-element-description-font-weight: 400; --fb-element-description-font-size: 0.875rem; - --fb-element-description-color: color-mix(in srgb, var(--fb-survey-brand-color) 70%, white); + --fb-element-description-color: var(--input); /* --------------------------------------------------------------------------- Element Upper Label Tokens Used for "Required" label and other upper label text. @@ -87,8 +87,8 @@ --fb-element-upper-label-font-family: inherit; --fb-element-upper-label-font-weight: 400; --fb-element-upper-label-font-size: 0.75rem; - --fb-element-upper-label-color: color-mix(in srgb, var(--fb-survey-brand-color) 50%, white); - --fb-element-upper-label-opacity: 1; + --fb-element-upper-label-color: var(--muted-foreground); + --fb-element-upper-label-opacity: 0.6; /* --------------------------------------------------------------------------- Label Tokens @@ -125,7 +125,7 @@ --fb-input-font-family: inherit; --fb-input-font-size: 0.875rem; --fb-input-font-weight: 400; - --fb-input-color: color-mix(in srgb, var(--fb-survey-brand-color) 10%, #0f172a); + --fb-input-color: var(--foreground); --fb-input-placeholder-color: var(--fb-input-color); --fb-input-placeholder-opacity: 0.5; --fb-input-width: 100%; @@ -139,9 +139,9 @@ Used for the Progress component track and indicator. --------------------------------------------------------------------------- */ --fb-progress-track-height: 0.5rem; - --fb-progress-track-bg-color: color-mix(in srgb, var(--fb-survey-brand-color) 20%, transparent); + --fb-progress-track-bg-color: hsl(222.2 47.4% 11.2% / 0.2); --fb-progress-track-border-radius: var(--radius); - --fb-progress-indicator-bg-color: var(--fb-survey-brand-color); + --fb-progress-indicator-bg-color: hsl(222.2 47.4% 11.2%); --fb-progress-indicator-border-radius: var(--radius); /* ---------------------------------------------------------------------------