fix: Multiple gradient fixes (#5464)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-gradient.tsx

@@ -142,9 +142,13 @@ export const BackgroundGradient = ({
 }) => {
   const styleDecl = useComputedStyleDecl("background-image");
   let styleValue = styleDecl.cascadedValue;
+  let computedStyleValue = styleDecl.computedValue;
   if (styleValue.type === "layers") {
     styleValue = styleValue.value[index];
   }
+  if (computedStyleValue.type === "layers") {
+    computedStyleValue = computedStyleValue.value[index];
+  }
 
   const gradientString = toValue(styleValue);
   const { normalizedGradientString, initialIsRepeating } =
@@ -157,6 +161,17 @@ export const BackgroundGradient = ({
     return ensureGradientHasStops(parsed);
   }, [gradientType, normalizedGradientString]);
 
+  const computedGradientString = toValue(computedStyleValue);
+  const { normalizedGradientString: normalizedComputedGradientString } =
+    normalizeGradientInput(computedGradientString, gradientType);
+
+  const computedParsedGradient = useMemo(() => {
+    const parsed =
+      parseAnyGradient(normalizedComputedGradientString) ??
+      createDefaultGradient(gradientType);
+    return ensureGradientHasStops(parsed);
+  }, [gradientType, normalizedComputedGradientString]);
+
   const handleGradientSave = useCallback(
     (nextGradient: ParsedGradient) => {
       const gradientValue = formatGradientValue(nextGradient);
@@ -249,6 +264,7 @@ export const BackgroundGradient = ({
         <>
           <GradientPickerSection
             gradient={gradient}
+            computedGradient={computedParsedGradient}
             gradientType={gradientType}
             hintOverrides={hintOverrides}
             setHintOverrides={setHintOverrides}
@@ -287,6 +303,7 @@ export const BackgroundGradient = ({
 
 type GradientPickerSectionProps = {
   gradient: ParsedGradient;
+  computedGradient: ParsedGradient;
   gradientType: GradientType;
   hintOverrides: Map<number, PercentUnitValue>;
   setHintOverrides: Dispatch<SetStateAction<Map<number, PercentUnitValue>>>;
@@ -297,16 +314,18 @@ type GradientPickerSectionProps = {
 
 const GradientPickerSection = ({
   gradient,
+  computedGradient,
   gradientType,
   hintOverrides,
   setHintOverrides,
   setSelectedStopIndex,
   applyGradient,
   selectedStopIndex,
 }: GradientPickerSectionProps) => {
-  const gradientForPickerBase = useMemo(() => {
-    return resolveGradientForPicker(gradient, hintOverrides);
-  }, [gradient, hintOverrides]);
+  // Use computed gradient for picker (resolves all CSS variables)
+  const computedGradientForPicker = useMemo(() => {
+    return resolveGradientForPicker(computedGradient, hintOverrides);
+  }, [computedGradient, hintOverrides]);
 
   const handlePickerChange = useCallback(
     (nextGradient: ParsedGradient) => {
@@ -329,20 +348,17 @@ const GradientPickerSection = ({
     [setSelectedStopIndex]
   );
 
-  // Gradient stops are already sorted in applyGradient, no need to sort here
-  const gradientForPicker = gradientForPickerBase;
-
   const previewGradientForTrack = useMemo<ParsedLinearGradient>(() => {
     const previewGradient: ParsedLinearGradient = {
       type: "linear",
       angle: leftToRightAngle,
-      stops: gradientForPicker.stops,
+      stops: computedGradientForPicker.stops,
     };
-    if (gradientForPicker.repeating) {
+    if (computedGradientForPicker.repeating) {
       previewGradient.repeating = true;
     }
     return previewGradient;
-  }, [gradientForPicker]);
+  }, [computedGradientForPicker]);
 
   return (
     <Flex
@@ -352,7 +368,7 @@ const GradientPickerSection = ({
       css={{ padding: theme.panel.padding }}
     >
       <GradientPicker
-        gradient={gradientForPicker}
+        gradient={computedGradientForPicker}
         backgroundImage={formatLinearGradient(previewGradientForTrack)}
         type={gradientType}
         onChange={handlePickerChange}
@@ -362,6 +378,7 @@ const GradientPickerSection = ({
       />
       <GradientStopControls
         gradient={gradient}
+        computedGradient={computedGradient}
         selectedStopIndex={selectedStopIndex}
         setSelectedStopIndex={setSelectedStopIndex}
         hintOverrides={hintOverrides}
@@ -687,6 +704,7 @@ const SolidColorControls = ({
 
 type GradientStopControlsProps = {
   gradient: ParsedGradient;
+  computedGradient: ParsedGradient;
   selectedStopIndex: number;
   setSelectedStopIndex: Dispatch<SetStateAction<number>>;
   hintOverrides: Map<number, PercentUnitValue>;
@@ -696,6 +714,7 @@ type GradientStopControlsProps = {
 
 const GradientStopControls = ({
   gradient,
+  computedGradient,
   selectedStopIndex,
   setSelectedStopIndex,
   hintOverrides,
@@ -931,6 +950,9 @@ const GradientStopControls = ({
         };
 
         const stopColor = (stop.color ?? fallbackStopColor) as StyleValue;
+        // Use computed color for display (resolves CSS variables)
+        const computedStop = computedGradient.stops[stopIndex];
+        const currentColor = (computedStop?.color ?? stopColor) as StyleValue;
 
         return (
           <Flex
@@ -987,7 +1009,7 @@ const GradientStopControls = ({
                   <ColorPickerControl
                     property="color"
                     value={stopColor}
-                    currentColor={stopColor}
+                    currentColor={currentColor}
                     onChange={handleStopColorChange}
                     onChangeComplete={handleStopColorChangeComplete}
                     onAbort={() => {}}

apps/builder/app/builder/features/style-panel/shared/repeated-style.test.ts

@@ -300,6 +300,47 @@ test("unpack item from layers value in repeated style", () => {
   );
 });
 
+test("set item on second layer when property is not defined on first layer", () => {
+  // This tests the fix for the bug where setting a property like background-clip
+  // on layer 1 when layer 0 doesn't have that property would create undefined values
+  const $backgroundClip = createComputedStyleDeclStore("background-clip");
+
+  // Set two background images
+  setRawProperty("background-image", "url(image1.jpg), url(image2.jpg)");
+
+  // background-clip is not yet defined, so cascadedValue should be default
+  expect($backgroundClip.get().source.name).toEqual("default");
+
+  // Now set background-clip on the second layer (index 1)
+  // This should fill index 0 with the initial value (border-box) instead of undefined
+  setRepeatedStyleItem($backgroundClip.get(), 1, {
+    type: "keyword",
+    value: "padding-box",
+  });
+
+  // Should have created layers with initial value at index 0
+  expect(toValue($backgroundClip.get().cascadedValue)).toEqual(
+    "border-box, padding-box"
+  );
+  expect($backgroundClip.get().cascadedValue.type).toEqual("layers");
+
+  // Verify the values are properly set and not undefined
+  const cascadedValue = $backgroundClip.get().cascadedValue;
+  if (cascadedValue.type === "layers") {
+    expect(cascadedValue.value[0]).toEqual({
+      type: "keyword",
+      value: "border-box",
+    });
+    expect(cascadedValue.value[1]).toEqual({
+      type: "keyword",
+      value: "padding-box",
+    });
+    // Ensure no undefined values
+    expect(cascadedValue.value[0]).toBeDefined();
+    expect(cascadedValue.value[1]).toBeDefined();
+  }
+});
+
 describe("delete repeated item", () => {
   test("delete var or other not releated value in repeated style", () => {
     const $backgroundImage = createComputedStyleDeclStore("background-image");

apps/builder/app/builder/features/style-panel/shared/repeated-style.tsx

@@ -226,7 +226,19 @@ export const setRepeatedStyleItem = (
   const value = styleDecl.cascadedValue;
   const valueType: ItemType = value.type === "tuple" ? "tuple" : "layers";
   const oldItems = value.type === valueType ? value.value : [];
+
+  // Fill missing items with initial value instead of undefined
   const newItems: StyleValue[] = repeatUntil(oldItems, index);
+  if (oldItems.length === 0 && index > 0) {
+    const meta = propertiesData[styleDecl.property];
+    if (meta) {
+      const initialValue = meta.initial as UnparsedValue;
+      for (let i = 0; i < index; i++) {
+        newItems[i] = initialValue;
+      }
+    }
+  }
+
   // unpack item when layers or tuple is provided
   newItems[index] = newItem.type === valueType ? newItem.value[0] : newItem;
   batch.setProperty(styleDecl.property)({

packages/design-system/src/components/gradient-picker.tsx

@@ -948,12 +948,10 @@ export const GradientPicker = <T extends ParsedGradient>({
         })}
 
         {hints.map((hint) => {
-          const stop = stops[hint.stopIndex];
-          const hintColor = stop?.color ? toValue(stop.color) : undefined;
           return (
             <SliderHint
               key={`${hint.stopIndex}-${hint.value}`}
-              style={{ left: `${hint.value}%`, color: hintColor }}
+              style={{ left: `${hint.value}%` }}
               onPointerDown={handleHintPointerDown(hint.stopIndex)}
             >
               <ChevronFilledUpIcon size="100%" />
@@ -1055,6 +1053,7 @@ const SliderHint = styled(Flex, {
   cursor: "grab",
   touchAction: "none",
   userSelect: "none",
+  color: "black",
   "&:active": {
     cursor: "grabbing",
   },