fix(colors): sync variants for RAW variable references

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Fixed
 
+- Fixed transparent variants and shade/tint counts for RAW colors that reference another variable, such as `var(--bg-body)`. Generated variants now follow the current source color, while manually edited swatches are preserved. Older saved swatches without edit history are left unchanged on load; use Reset on a stale swatch to return it to automatic generation, then save to update the site's CSS.
 - Fixed the block editor going blank with the Core Framework Gutenberg integration enabled. The editor script was loaded with an outdated, hard-coded dependency list that left out WordPress's `react-jsx-runtime`, so rendering the Core Framework class panel threw on an undefined `ReactJSXRuntime` and took the whole editor down. The script now loads the dependencies its build declares.
 - Fixed saving from the Figma plugin to a connected WordPress site, which waited 15 seconds and then reported "Failed to sync css with Figma" and "Failed to update project" even though the changes had reached the site. The plugin handed WordPress's reply back under the wrong message type, so the editor never recognised it. Builder synchronization now also waits for the stylesheet and project to finish saving, so Bricks global variables, color swatches and the Style Manager show the values you just saved, including on projects that define variables but no classes. An empty class list no longer creates a blank Oxygen selector.
 - Stopped disabled shades and tints from appearing as variables in the Oxygen and Bricks builders. The generated CSS already left out a color's shades or tints once you switched them off, but the builder variable dropdowns and Oxygen Classic's Alt-click variable panel still listed them, so picking one pointed at a custom property that did not exist.

docs.md

@@ -71,6 +71,8 @@ The project schema is defined in the shared core and describes:
 - breakpoints and responsive settings
 - project preferences and version information
 
+Color shade/tint entries support an optional `isCustom` flag: `false` identifies an automatically generated swatch, `true` preserves a manual edit, and an absent flag represents older data with unknown edit history. Reset returns a swatch to automatic generation. Loading a preset refreshes known automatic variants of RAW variable references using the current color data, while preserving custom and unclassified older swatches. This normalization is independent of the existing versioned migrations; older presets remain valid without the new field, and color IDs and variant names are unchanged.
+
 The usual load flow is:
 
 1. Load project data from browser storage, WordPress, or an explicit import.

package.json

@@ -26,6 +26,7 @@
 		"fast-uri": "3.1.5",
 		"flatted": "3.4.4",
 		"follow-redirects": "1.16.0",
+		"handlebars": "4.7.10",
 		"http-proxy-middleware": "2.0.10",
 		"ip-address": "10.5.0",
 		"js-yaml": "4.3.1",
@@ -35,6 +36,8 @@
 		"micromatch": "4.0.8",
 		"nanoid": "3.3.18",
 		"postcss": "8.5.26",
+		"proxy-addr": "2.0.8",
+		"shell-quote": "1.11.0",
 		"svgo": "3.3.4",
 		"websocket-driver": "0.7.5",
 		"yaml": "1.10.3"

packages/core/src/components/modules/colorSystem/components/ColorAdditionalVariations.tsx

@@ -1,7 +1,8 @@
-import { ChangeEvent, memo, useCallback, useMemo, useState } from "react";
+import { ChangeEvent, memo, useCallback, useMemo } from "react";
 import { Info } from "assets/icons/Info.icon";
 import { NumberInput } from "components/basic/NumberInput";
 import { Tooltip } from "components/ui/Tooltip";
+import { useGetColor } from "hooks/useGetColor";
 import { getColorOnIndex } from "../functions/getColorOnIndex";
 import { ColorFormatValue, ColorItem, DEFAULT_SHADES_COUNT, DEFAULT_TINTS_COUNT, Shade } from "../index";
 import { Collapse, Switch } from "@mantine/core";
@@ -12,12 +13,12 @@ const getInitialVariation = (color: ColorItem, variant: Variant): VariantValues
 	if (variant === "shade") {
 		return {
 			isActive: color.isShades ?? false,
-			number: color.shadesNumber || DEFAULT_SHADES_COUNT,
+			number: color.shadesNumber || color.shades?.length || DEFAULT_SHADES_COUNT,
 		};
 	} else {
 		return {
 			isActive: color.isTints ?? false,
-			number: color.tintsNumber || DEFAULT_TINTS_COUNT,
+			number: color.tintsNumber || color.tints?.length || DEFAULT_TINTS_COUNT,
 		};
 	}
 };
@@ -33,28 +34,27 @@ interface ColorAdditionalVariations {
 	color: ColorItem;
 	variant: Variant;
 	onChange: (value: VariantValues) => void;
-	onUpdateColor: (value: string, index: number, isDark: boolean) => void;
+	onUpdateColor: (value: string, index: number, isDark: boolean, reset?: boolean) => void;
 }
 
 export const ColorAdditionalVariations = memo<ColorAdditionalVariations>(
 	({ color, variant, onChange, onUpdateColor }) => {
-		const [variation, setVariation] = useState(() => getInitialVariation(color, variant));
+		const variation = getInitialVariation(color, variant);
+		const { colorVariables } = useGetColor();
 
 		const items = useMemo(() => (variant === "shade" ? color.shades : color.tints), [color, variant]);
 		const darkItems = useMemo(() => (variant === "shade" ? color.darkShades : color.darkTints), [color, variant]);
 
 		const handleSwitchChange = useCallback(
 			({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
 				onChange({ ...variation, isActive: checked });
-				setVariation((prev) => ({ ...prev, isActive: checked }));
 			},
 			[onChange, variation],
 		);
 
 		const handleNumberChange = useCallback(
 			(value: number | string) => {
 				onChange({ ...variation, number: Number(value) });
-				setVariation((prev) => ({ ...prev, number: Number(value) }));
 			},
 			[onChange, variation],
 		);
@@ -72,7 +72,7 @@ export const ColorAdditionalVariations = memo<ColorAdditionalVariations>(
 						<label htmlFor="shades">
 							<h5
 								className="pointer"
-								onClick={() => setVariation((prev) => ({ ...prev, isActive: !variation.isActive }))}
+								onClick={() => onChange({ ...variation, isActive: !variation.isActive })}
 							>
 								{label}
 							</h5>
@@ -106,7 +106,7 @@ export const ColorAdditionalVariations = memo<ColorAdditionalVariations>(
 					<Collapse in={Boolean(variation.isActive)}>
 						<div className="row">
 							{items?.map(({ value, name }, index) => {
-								const defaultValue = getColorOnIndex({ state: color, index, type: variant });
+								const defaultValue = getColorOnIndex({ state: color, index, type: variant, colorVariables });
 								return (
 									<ColorVariationPreview
 										key={name}
@@ -115,7 +115,7 @@ export const ColorAdditionalVariations = memo<ColorAdditionalVariations>(
 										format={color.format as ColorFormatValue}
 										defaultValue={defaultValue}
 										onChangeEnd={(value) => onUpdateColor(value, index, false)}
-										onReset={() => onUpdateColor(defaultValue, index, false)}
+										onReset={() => onUpdateColor(defaultValue, index, false, true)}
 									/>
 								);
 							})}
@@ -124,7 +124,13 @@ export const ColorAdditionalVariations = memo<ColorAdditionalVariations>(
 						{color.isDarkMode && (
 							<div className="row margin-top-m">
 								{darkItems?.map(({ value, name }, index) => {
-									const defaultValue = getColorOnIndex({ state: color, index, type: variant });
+									const defaultValue = getColorOnIndex({
+										state: color,
+										index,
+										type: variant,
+										dark: true,
+										colorVariables,
+									});
 									return (
 										<ColorVariationPreview
 											key={name}
@@ -133,7 +139,7 @@ export const ColorAdditionalVariations = memo<ColorAdditionalVariations>(
 											format={color.format as ColorFormatValue}
 											defaultValue={defaultValue}
 											onChangeEnd={(value) => onUpdateColor(value, index, true)}
-											onReset={() => onUpdateColor(defaultValue, index, true)}
+											onReset={() => onUpdateColor(defaultValue, index, true, true)}
 										/>
 									);
 								})}

packages/core/src/components/modules/colorSystem/components/ColorBodyValues.tsx

@@ -1,8 +1,9 @@
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { useGetColor } from "hooks/useGetColor";
 import { convertToDesiredColorFormat } from "utils";
+import { updateColorVariation, updateColorVariations } from "../functions/updateColorVariations";
 import { generateWithCheck } from "../functions/generateShadesTints";
-import { ClassGeneratorValue, ColorItem, DEFAULT_OPACITY_VARIANTS, Shade } from "../index";
+import { ClassGeneratorValue, ColorItem, DEFAULT_OPACITY_VARIANTS } from "../index";
 import { colord } from "colord";
 import { ColorAdditionalVariations, VariantValues } from "./ColorAdditionalVariations";
 import { ColorFeatureToggle } from "./ColorFeatureToggle";
@@ -14,7 +15,7 @@ interface ColorBodyValues {
 }
 
 export const ColorBodyValues = memo<ColorBodyValues>(({ color, onUpdateItem }) => {
-	const { getColor } = useGetColor();
+	const { getColor, colorVariables } = useGetColor();
 	const prevState = useRef<any>();
 	const [prevFormat, setPrevFormat] = useState(color.format);
 
@@ -70,66 +71,14 @@ export const ColorBodyValues = memo<ColorBodyValues>(({ color, onUpdateItem }) =
 
 	const handleColorVariationChange = useCallback(
 		(type: "shade" | "tint", value: VariantValues) => {
-			const { isActive, number } = value;
-			const { value: midColor, isDarkMode, darkValue, darkShades, darkTints, shades, tints } = color;
-			const isShadeType = type === "shade";
-			const isTintType = type === "tint";
-
-			const generate = (colorValue: string, isDark = false) => {
-				const baseProps = { ...color, isShades: isShadeType && isActive, isTints: isTintType && isActive };
-				return {
-					shades:
-						isShadeType && isActive
-							? generateWithCheck(
-									{ ...baseProps, shadesNumber: number, prevFormat },
-									colorValue,
-									"shade",
-									isDark,
-							  )
-							: (isDark ? darkShades : shades) ?? [],
-					tints:
-						isTintType && isActive
-							? generateWithCheck(
-									{ ...baseProps, tintsNumber: number, prevFormat },
-									colorValue,
-									"tint",
-									isDark,
-							  )
-							: (isDark ? darkTints : tints) ?? [],
-				};
-			};
-
-			const { shades: newShades, tints: newTints } = generate(midColor);
-			const { shades: newDarkShades, tints: newDarkTints } =
-				isDarkMode && darkValue ? generate(darkValue, true) : { shades: [], tints: [] };
-
-			onUpdateItem({
-				...color,
-				isShades: isShadeType ? isActive : color.isShades,
-				isTints: isTintType ? isActive : color.isTints,
-				shadesNumber: newShades.length,
-				tintsNumber: newTints.length,
-				...(newShades.length ? { shades: newShades } : {}),
-				...(newTints.length ? { tints: newTints } : {}),
-				...(newDarkShades.length ? { darkShades: newDarkShades } : {}),
-				...(newDarkTints.length ? { darkTints: newDarkTints } : {}),
-			});
+			onUpdateItem(updateColorVariations(color, type, value.isActive, value.number, colorVariables, prevFormat));
 		},
-		[color, onUpdateItem, prevFormat],
+		[color, onUpdateItem, prevFormat, colorVariables],
 	);
 
 	const handleColorChange = useCallback(
-		(value: string, index: number, isDark: boolean, type: "shade" | "tint") => {
-			const updateColorArray = (colorArray?: Shade[]) =>
-				colorArray?.map((item, i) => (i === index ? { ...item, value } : item));
-
-			onUpdateItem({
-				...color,
-				shades: !isDark && type === "shade" ? updateColorArray(color.shades) : color.shades,
-				tints: !isDark && type === "tint" ? updateColorArray(color.tints) : color.tints,
-				darkShades: isDark && type === "shade" ? updateColorArray(color.darkShades) : color.darkShades,
-				darkTints: isDark && type === "tint" ? updateColorArray(color.darkTints) : color.darkTints,
-			});
+		(value: string, index: number, isDark: boolean, type: "shade" | "tint", reset = false) => {
+			onUpdateItem(updateColorVariation(color, type, index, value, isDark, reset));
 		},
 		[color, onUpdateItem],
 	);
@@ -162,15 +111,15 @@ export const ColorBodyValues = memo<ColorBodyValues>(({ color, onUpdateItem }) =
 				color={color}
 				variant="shade"
 				onChange={(value) => handleColorVariationChange("shade", value)}
-				onUpdateColor={(...props) => handleColorChange(...props, "shade")}
+				onUpdateColor={(value, index, isDark, reset) => handleColorChange(value, index, isDark, "shade", reset)}
 			/>
 
 			<hr />
 			<ColorAdditionalVariations
 				color={color}
 				variant="tint"
 				onChange={(value) => handleColorVariationChange("tint", value)}
-				onUpdateColor={(...props) => handleColorChange(...props, "tint")}
+				onUpdateColor={(value, index, isDark, reset) => handleColorChange(value, index, isDark, "tint", reset)}
 			/>
 		</div>
 	);

packages/core/src/components/modules/colorSystem/components/ColorSingleRow.tsx

@@ -55,6 +55,14 @@ export const ColorSingleRow = memo<ColorSingleRow>(
 
 		const [copy, setCopy] = useReducer(singleColorReducer, color);
 		const debouncedCopy = useDebounce(copy, 500);
+		const previousVariables = useRef(colorVariables);
+		useEffect(() => {
+			setCopy({
+				type: "refreshReferences",
+				payload: { previousVariables: previousVariables.current, colorVariables },
+			});
+			previousVariables.current = colorVariables;
+		}, [colorVariables]);
 
 		const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
 			id: color.id,