Skip to content

Commit c21974b

Browse files
kofkof
committed
Merge branch 'main' into release-24-11-2025.staging
2 parents 76eb9fc + 5239670 commit c21974b

File tree

16 files changed

+279
-157
lines changed

16 files changed

+279
-157
lines changed

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

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,13 @@ export const BackgroundGradient = ({
142142
}) => {
143143
const styleDecl = useComputedStyleDecl("background-image");
144144
let styleValue = styleDecl.cascadedValue;
145+
let computedStyleValue = styleDecl.computedValue;
145146
if (styleValue.type === "layers") {
146147
styleValue = styleValue.value[index];
147148
}
149+
if (computedStyleValue.type === "layers") {
150+
computedStyleValue = computedStyleValue.value[index];
151+
}
148152

149153
const gradientString = toValue(styleValue);
150154
const { normalizedGradientString, initialIsRepeating } =
@@ -157,6 +161,17 @@ export const BackgroundGradient = ({
157161
return ensureGradientHasStops(parsed);
158162
}, [gradientType, normalizedGradientString]);
159163

164+
const computedGradientString = toValue(computedStyleValue);
165+
const { normalizedGradientString: normalizedComputedGradientString } =
166+
normalizeGradientInput(computedGradientString, gradientType);
167+
168+
const computedParsedGradient = useMemo(() => {
169+
const parsed =
170+
parseAnyGradient(normalizedComputedGradientString) ??
171+
createDefaultGradient(gradientType);
172+
return ensureGradientHasStops(parsed);
173+
}, [gradientType, normalizedComputedGradientString]);
174+
160175
const handleGradientSave = useCallback(
161176
(nextGradient: ParsedGradient) => {
162177
const gradientValue = formatGradientValue(nextGradient);
@@ -249,6 +264,7 @@ export const BackgroundGradient = ({
249264
<>
250265
<GradientPickerSection
251266
gradient={gradient}
267+
computedGradient={computedParsedGradient}
252268
gradientType={gradientType}
253269
hintOverrides={hintOverrides}
254270
setHintOverrides={setHintOverrides}
@@ -287,6 +303,7 @@ export const BackgroundGradient = ({
287303

288304
type GradientPickerSectionProps = {
289305
gradient: ParsedGradient;
306+
computedGradient: ParsedGradient;
290307
gradientType: GradientType;
291308
hintOverrides: Map<number, PercentUnitValue>;
292309
setHintOverrides: Dispatch<SetStateAction<Map<number, PercentUnitValue>>>;
@@ -297,16 +314,18 @@ type GradientPickerSectionProps = {
297314

298315
const GradientPickerSection = ({
299316
gradient,
317+
computedGradient,
300318
gradientType,
301319
hintOverrides,
302320
setHintOverrides,
303321
setSelectedStopIndex,
304322
applyGradient,
305323
selectedStopIndex,
306324
}: GradientPickerSectionProps) => {
307-
const gradientForPickerBase = useMemo(() => {
308-
return resolveGradientForPicker(gradient, hintOverrides);
309-
}, [gradient, hintOverrides]);
325+
// Use computed gradient for picker (resolves all CSS variables)
326+
const computedGradientForPicker = useMemo(() => {
327+
return resolveGradientForPicker(computedGradient, hintOverrides);
328+
}, [computedGradient, hintOverrides]);
310329

311330
const handlePickerChange = useCallback(
312331
(nextGradient: ParsedGradient) => {
@@ -329,20 +348,17 @@ const GradientPickerSection = ({
329348
[setSelectedStopIndex]
330349
);
331350

332-
// Gradient stops are already sorted in applyGradient, no need to sort here
333-
const gradientForPicker = gradientForPickerBase;
334-
335351
const previewGradientForTrack = useMemo<ParsedLinearGradient>(() => {
336352
const previewGradient: ParsedLinearGradient = {
337353
type: "linear",
338354
angle: leftToRightAngle,
339-
stops: gradientForPicker.stops,
355+
stops: computedGradientForPicker.stops,
340356
};
341-
if (gradientForPicker.repeating) {
357+
if (computedGradientForPicker.repeating) {
342358
previewGradient.repeating = true;
343359
}
344360
return previewGradient;
345-
}, [gradientForPicker]);
361+
}, [computedGradientForPicker]);
346362

347363
return (
348364
<Flex
@@ -352,7 +368,7 @@ const GradientPickerSection = ({
352368
css={{ padding: theme.panel.padding }}
353369
>
354370
<GradientPicker
355-
gradient={gradientForPicker}
371+
gradient={computedGradientForPicker}
356372
backgroundImage={formatLinearGradient(previewGradientForTrack)}
357373
type={gradientType}
358374
onChange={handlePickerChange}
@@ -362,6 +378,7 @@ const GradientPickerSection = ({
362378
/>
363379
<GradientStopControls
364380
gradient={gradient}
381+
computedGradient={computedGradient}
365382
selectedStopIndex={selectedStopIndex}
366383
setSelectedStopIndex={setSelectedStopIndex}
367384
hintOverrides={hintOverrides}
@@ -687,6 +704,7 @@ const SolidColorControls = ({
687704

688705
type GradientStopControlsProps = {
689706
gradient: ParsedGradient;
707+
computedGradient: ParsedGradient;
690708
selectedStopIndex: number;
691709
setSelectedStopIndex: Dispatch<SetStateAction<number>>;
692710
hintOverrides: Map<number, PercentUnitValue>;
@@ -696,6 +714,7 @@ type GradientStopControlsProps = {
696714

697715
const GradientStopControls = ({
698716
gradient,
717+
computedGradient,
699718
selectedStopIndex,
700719
setSelectedStopIndex,
701720
hintOverrides,
@@ -931,6 +950,9 @@ const GradientStopControls = ({
931950
};
932951

933952
const stopColor = (stop.color ?? fallbackStopColor) as StyleValue;
953+
// Use computed color for display (resolves CSS variables)
954+
const computedStop = computedGradient.stops[stopIndex];
955+
const currentColor = (computedStop?.color ?? stopColor) as StyleValue;
934956

935957
return (
936958
<Flex
@@ -987,7 +1009,7 @@ const GradientStopControls = ({
9871009
<ColorPickerControl
9881010
property="color"
9891011
value={stopColor}
990-
currentColor={stopColor}
1012+
currentColor={currentColor}
9911013
onChange={handleStopColorChange}
9921014
onChangeComplete={handleStopColorChangeComplete}
9931015
onAbort={() => {}}

‎apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { colord, extend, type RgbaColor } from "colord";
2-
import namesPlugin from "colord/plugins/names";
31
import {
42
toValue,
53
type CssProperty,
@@ -16,9 +14,6 @@ import {
1614
} from "../../shared/repeated-style";
1715
import { parseCssFragment } from "../../shared/css-fragment";
1816

19-
// To support color names
20-
extend([namesPlugin]);
21-
2217
export const properties = ["box-shadow"] satisfies [
2318
CssProperty,
2419
...CssProperty[],
@@ -46,11 +41,7 @@ const getItemProps = (layer: StyleValue, computedLayer?: StyleValue) => {
4641
} else {
4742
labels.push(toValue(shadowValue));
4843
}
49-
let color: undefined | RgbaColor;
50-
const colordValue = colord(toValue(shadowValue?.color));
51-
if (colordValue.isValid()) {
52-
color = colordValue.toRgb();
53-
}
44+
const color = shadowValue?.color ? toValue(shadowValue.color) : undefined;
5445
return { label: labels.join(" "), color };
5546
};
5647

‎apps/builder/app/builder/features/style-panel/sections/text-shadows/text-shadows.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { colord, extend, type RgbaColor } from "colord";
2-
import namesPlugin from "colord/plugins/names";
31
import {
42
toValue,
53
type CssProperty,
@@ -16,9 +14,6 @@ import {
1614
import { parseCssFragment } from "../../shared/css-fragment";
1715
import { useComputedStyleDecl } from "../../shared/model";
1816

19-
// To support color names
20-
extend([namesPlugin]);
21-
2217
export const properties = ["text-shadow"] satisfies [
2318
CssProperty,
2419
...CssProperty[],
@@ -40,11 +35,7 @@ const getItemProps = (layer: StyleValue, computedLayer?: StyleValue) => {
4035
} else {
4136
labels.push(toValue(shadowValue));
4237
}
43-
let color: undefined | RgbaColor;
44-
const colordValue = colord(toValue(shadowValue?.color));
45-
if (colordValue.isValid()) {
46-
color = colordValue.toRgb();
47-
}
38+
const color = shadowValue?.color ? toValue(shadowValue.color) : undefined;
4839
return { label: labels.join(" "), color };
4940
};
5041

‎apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -933,14 +933,7 @@ export const CssValueInput = ({
933933
</Text>
934934
)}
935935
{item.fallback?.type === "rgb" && (
936-
<ColorThumb
937-
color={{
938-
r: item.fallback.r,
939-
g: item.fallback.g,
940-
b: item.fallback.b,
941-
a: item.fallback.alpha,
942-
}}
943-
/>
936+
<ColorThumb color={toValue(item.fallback)} />
944937
)}
945938
</Flex>
946939
) : (

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,47 @@ test("unpack item from layers value in repeated style", () => {
300300
);
301301
});
302302

303+
test("set item on second layer when property is not defined on first layer", () => {
304+
// This tests the fix for the bug where setting a property like background-clip
305+
// on layer 1 when layer 0 doesn't have that property would create undefined values
306+
const $backgroundClip = createComputedStyleDeclStore("background-clip");
307+
308+
// Set two background images
309+
setRawProperty("background-image", "url(image1.jpg), url(image2.jpg)");
310+
311+
// background-clip is not yet defined, so cascadedValue should be default
312+
expect($backgroundClip.get().source.name).toEqual("default");
313+
314+
// Now set background-clip on the second layer (index 1)
315+
// This should fill index 0 with the initial value (border-box) instead of undefined
316+
setRepeatedStyleItem($backgroundClip.get(), 1, {
317+
type: "keyword",
318+
value: "padding-box",
319+
});
320+
321+
// Should have created layers with initial value at index 0
322+
expect(toValue($backgroundClip.get().cascadedValue)).toEqual(
323+
"border-box, padding-box"
324+
);
325+
expect($backgroundClip.get().cascadedValue.type).toEqual("layers");
326+
327+
// Verify the values are properly set and not undefined
328+
const cascadedValue = $backgroundClip.get().cascadedValue;
329+
if (cascadedValue.type === "layers") {
330+
expect(cascadedValue.value[0]).toEqual({
331+
type: "keyword",
332+
value: "border-box",
333+
});
334+
expect(cascadedValue.value[1]).toEqual({
335+
type: "keyword",
336+
value: "padding-box",
337+
});
338+
// Ensure no undefined values
339+
expect(cascadedValue.value[0]).toBeDefined();
340+
expect(cascadedValue.value[1]).toBeDefined();
341+
}
342+
});
343+
303344
describe("delete repeated item", () => {
304345
test("delete var or other not releated value in repeated style", () => {
305346
const $backgroundImage = createComputedStyleDeclStore("background-image");

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useMemo, type ComponentProps, type JSX, type ReactNode } from "react";
2-
import type { RgbaColor } from "colord";
32
import {
43
toValue,
54
type CssProperty,
@@ -227,7 +226,19 @@ export const setRepeatedStyleItem = (
227226
const value = styleDecl.cascadedValue;
228227
const valueType: ItemType = value.type === "tuple" ? "tuple" : "layers";
229228
const oldItems = value.type === valueType ? value.value : [];
229+
230+
// Fill missing items with initial value instead of undefined
230231
const newItems: StyleValue[] = repeatUntil(oldItems, index);
232+
if (oldItems.length === 0 && index > 0) {
233+
const meta = propertiesData[styleDecl.property];
234+
if (meta) {
235+
const initialValue = meta.initial as UnparsedValue;
236+
for (let i = 0; i < index; i++) {
237+
newItems[i] = initialValue;
238+
}
239+
}
240+
}
241+
231242
// unpack item when layers or tuple is provided
232243
newItems[index] = newItem.type === valueType ? newItem.value[0] : newItem;
233244
batch.setProperty(styleDecl.property)({
@@ -328,7 +339,7 @@ export const RepeatedStyle = (props: {
328339
getItemProps: (
329340
index: number,
330341
primaryValue: StyleValue
331-
) => { label: string; color?: RgbaColor };
342+
) => { label: string; color?: string };
332343
floatingPanelOffset?: ComponentProps<typeof FloatingPanel>["offset"];
333344
renderThumbnail?: (index: number, primaryItem: StyleValue) => JSX.Element;
334345
renderItemContent: (index: number, primaryItem: StyleValue) => JSX.Element;
@@ -426,7 +437,7 @@ export const RepeatedStyle = (props: {
426437
hidden={isHidden}
427438
thumbnail={
428439
renderThumbnail?.(index, primaryItem) ??
429-
(itemColor && <ColorThumb color={itemColor} />)
440+
(itemColor ? <ColorThumb color={itemColor} /> : undefined)
430441
}
431442
buttons={
432443
<>

‎apps/builder/app/builder/shared/css-editor/css-editor.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { mergeRefs } from "@react-aria/utils";
2-
import { colord } from "colord";
2+
import Color from "colorjs.io";
33
import {
44
memo,
55
useEffect,
@@ -132,7 +132,13 @@ const AdvancedPropertyValue = ({
132132
inputRef?: RefObject<HTMLInputElement>;
133133
}) => {
134134
const inputRef = useRef<HTMLInputElement>(null);
135-
const isColor = colord(toValue(styleDecl.usedValue)).isValid();
135+
let isColor = false;
136+
try {
137+
new Color(toValue(styleDecl.usedValue));
138+
isColor = true;
139+
} catch {
140+
isColor = false;
141+
}
136142

137143
return (
138144
<CssValueInputContainer

‎apps/builder/app/canvas/features/text-editor/text-editor.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ import {
6060
import { isDescendantOrSelf, type InstanceSelector } from "~/shared/tree-utils";
6161
import { ToolbarConnectorPlugin } from "./toolbar-connector";
6262
import { type Refs, $convertToLexical, $convertToUpdates } from "./interop";
63-
import { colord } from "colord";
63+
import Color from "colorjs.io";
6464
import { useEffectEvent } from "~/shared/hook-utils/effect-event";
6565
import {
6666
deleteInstanceMutable,
@@ -144,8 +144,16 @@ const CaretColorPlugin = () => {
144144

145145
const elementColor = window.getComputedStyle(rootElement).color;
146146

147-
const color = colord(elementColor).toRgb();
148-
if (color.a < 0.1) {
147+
let isLightBackground = false;
148+
try {
149+
const color = new Color(elementColor);
150+
const alpha = color.alpha ?? 1;
151+
isLightBackground = alpha < 0.1;
152+
} catch {
153+
// If we can't parse the color, assume it's not light
154+
}
155+
156+
if (isLightBackground) {
149157
// Apply caret color with animated color
150158
const sheet = createRegularStyleSheet({ name: "text-editor-caret" });
151159

‎apps/builder/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
"args-tokenizer": "^0.3.0",
8787
"bcp-47": "^2.1.0",
8888
"change-case": "^5.4.4",
89-
"colord": "^2.9.3",
89+
"colorjs.io": "^0.5.0",
9090
"cookie": "^1.0.1",
9191
"css-tree": "^3.1.0",
9292
"debug": "^4.3.7",

‎packages/css-data/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"dependencies": {
3535
"@webstudio-is/css-engine": "workspace:*",
3636
"change-case": "^5.4.4",
37-
"colord": "^2.9.3",
37+
"colorjs.io": "^0.5.0",
3838
"css-tree": "^3.1.0",
3939
"openai": "^3.2.1",
4040
"p-retry": "^6.2.1",

0 commit comments

Comments
 (0)