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

@@ -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"] },
   };

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);
 
   /* ---------------------------------------------------------------------------