diff --git a/CHANGELOG.md b/CHANGELOG.md
index f665b8f..a225e2d 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/bun.lock b/bun.lock
index 232f475..ce5d7a8 100644
--- a/bun.lock
+++ b/bun.lock
@@ -75,7 +75,7 @@
     },
     "packages/figma": {
       "name": "core-framework-figma",
-      "version": "2.0.0",
+      "version": "2.0.2",
       "dependencies": {
         "@fontsource-variable/inter": "^5.3.0",
         "colord": "^2.9.3",
@@ -102,7 +102,7 @@
     },
     "packages/gutenberg": {
       "name": "coreframework-gutenberg-integration",
-      "version": "2.0.0",
+      "version": "2.0.2",
       "devDependencies": {
         "@wordpress/block-editor": "^16.1.0",
         "@wordpress/browserslist-config": "^6.53.0",
@@ -119,7 +119,7 @@
     },
     "packages/wp": {
       "name": "coreframework",
-      "version": "2.0.0",
+      "version": "2.0.2",
       "dependencies": {
         "@adobe/react-spectrum": "^3.47.3",
         "@core-framework/core": "workspace:*",
@@ -167,7 +167,7 @@
     },
     "packages/www": {
       "name": "core-framework",
-      "version": "2.0.0",
+      "version": "2.0.2",
       "dependencies": {
         "@adobe/react-spectrum": "^3.47.3",
         "@core-framework/core": "workspace:*",
@@ -220,6 +220,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",
@@ -229,6 +230,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",
@@ -2338,7 +2341,7 @@
 
     "handle-thing": ["handle-thing@2.0.1", "", {}, "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="],
 
-    "handlebars": ["handlebars@4.7.9", "", { "dependencies": { "minimist": "^1.2.5", "neo-async": "^2.6.2", "source-map": "^0.6.1", "wordwrap": "^1.0.0" }, "optionalDependencies": { "uglify-js": "^3.1.4" }, "bin": { "handlebars": "bin/handlebars" } }, "sha512-4E71E0rpOaQuJR2A3xDZ+GM1HyWYv1clR58tC8emQNeQe3RH7MAzSbat+V0wG78LQBo6m6bzSG/L4pBuCsgnUQ=="],
+    "handlebars": ["handlebars@4.7.10", "", { "dependencies": { "minimist": "^1.2.8", "neo-async": "^2.6.2", "source-map": "^0.6.1", "wordwrap": "^1.0.0" }, "optionalDependencies": { "uglify-js": "^3.1.4" }, "bin": { "handlebars": "bin/handlebars" } }, "sha512-P5VJMVM7qgBn6vjXMw8WG9uVI+ncf2pi72j4de4yz5ZULLj2RGqLYaKOYGsgyrViQ0tePOVlN1tDCCXXtFqXKg=="],
 
     "hard-rejection": ["hard-rejection@2.1.0", "", {}, "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA=="],
 
@@ -3178,7 +3181,7 @@
 
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
 
-    "proxy-addr": ["proxy-addr@2.0.7", "", { "dependencies": { "forwarded": "0.2.0", "ipaddr.js": "1.9.1" } }, "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg=="],
+    "proxy-addr": ["proxy-addr@2.0.8", "", { "dependencies": { "forwarded": "0.2.0", "ipaddr.js": "1.9.1" } }, "sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ=="],
 
     "proxy-agent": ["proxy-agent@6.5.0", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "^4.3.4", "http-proxy-agent": "^7.0.1", "https-proxy-agent": "^7.0.6", "lru-cache": "^7.14.1", "pac-proxy-agent": "^7.1.0", "proxy-from-env": "^1.1.0", "socks-proxy-agent": "^8.0.5" } }, "sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A=="],
 
@@ -3386,7 +3389,7 @@
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
-    "shell-quote": ["shell-quote@1.9.0", "", {}, "sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA=="],
+    "shell-quote": ["shell-quote@1.11.0", "", {}, "sha512-JdxDPD0DBTyu08pq0kPC0xSNet/qsU07qT6IsX1AS8oO2ICNRY4ldNa8OAI6PuwAH8tG3lxEhbqmyp4Dw4036g=="],
 
     "shimmer": ["shimmer@1.2.1", "", {}, "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw=="],
 
diff --git a/docs.md b/docs.md
index b9da13e..0314b55 100644
--- a/docs.md
+++ b/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.
diff --git a/package.json b/package.json
index a9902c5..d28b20e 100644
--- a/package.json
+++ b/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"
diff --git a/packages/core/src/components/modules/colorSystem/components/ColorAdditionalVariations.tsx b/packages/core/src/components/modules/colorSystem/components/ColorAdditionalVariations.tsx
index dbc19d7..03dff37 100644
--- a/packages/core/src/components/modules/colorSystem/components/ColorAdditionalVariations.tsx
+++ b/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,12 +34,13 @@ 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]);
@@ -46,7 +48,6 @@ export const ColorAdditionalVariations = memo<ColorAdditionalVariations>(
 		const handleSwitchChange = useCallback(
 			({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
 				onChange({ ...variation, isActive: checked });
-				setVariation((prev) => ({ ...prev, isActive: checked }));
 			},
 			[onChange, variation],
 		);
@@ -54,7 +55,6 @@ export const ColorAdditionalVariations = memo<ColorAdditionalVariations>(
 		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)}
 										/>
 									);
 								})}
diff --git a/packages/core/src/components/modules/colorSystem/components/ColorBodyValues.tsx b/packages/core/src/components/modules/colorSystem/components/ColorBodyValues.tsx
index f42f3a5..0e004a4 100644
--- a/packages/core/src/components/modules/colorSystem/components/ColorBodyValues.tsx
+++ b/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,7 +111,7 @@ 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 />
@@ -170,7 +119,7 @@ export const ColorBodyValues = memo<ColorBodyValues>(({ color, onUpdateItem }) =
 				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>
 	);
diff --git a/packages/core/src/components/modules/colorSystem/components/ColorSingleRow.tsx b/packages/core/src/components/modules/colorSystem/components/ColorSingleRow.tsx
index 9c2cbcb..8004014 100644
--- a/packages/core/src/components/modules/colorSystem/components/ColorSingleRow.tsx
+++ b/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,
diff --git a/packages/core/src/components/modules/colorSystem/functions/__tests__/rawColorVariantPersistence.test.ts b/packages/core/src/components/modules/colorSystem/functions/__tests__/rawColorVariantPersistence.test.ts
new file mode 100644
index 0000000..501f742
--- /dev/null
+++ b/packages/core/src/components/modules/colorSystem/functions/__tests__/rawColorVariantPersistence.test.ts
@@ -0,0 +1,175 @@
+import { colord } from "colord";
+import { prepareColorSystem as prepareWebColors } from "functions/preparePresetToLoad";
+import { prepareColorSystem as prepareWordPressColors } from "../../../../../../../wp/src/functions/preparePresetToLoad";
+import { colorItemSchema, colorSystemSchema } from "../../schema/colorSystem.schema";
+import { ColorItem, ColorSystemFormData, ColorVariable } from "../../types";
+import { colorGroupsToVariables } from "../colorGroupsToVariables";
+import { refreshColorReferences, refreshColorSystemReferences } from "../refreshColorReferences";
+import { singleColorReducer } from "../singleColorReducer";
+import { updateColorVariation, updateColorVariations } from "../updateColorVariations";
+
+const purple = "hsla(242, 78%, 69%, 1)";
+const pink = "hsla(354, 78%, 69%, 1)";
+const body: ColorItem = { id: "body", name: "bg-body", value: purple, format: "hsla" };
+const light: ColorItem = { id: "light", name: "light", value: "var(--bg-body)", format: "raw" };
+const form = (...colors: ColorItem[]): ColorSystemFormData => ({
+	groups: [{ id: "g", name: "Colors", colors }],
+});
+const variables = (...colors: ColorItem[]) => colorGroupsToVariables(form(...colors)) as ColorVariable[];
+const oldVariables = variables(body);
+const newBody = { ...body, value: pink };
+const newVariables = variables(newBody);
+const generate = (vars = oldVariables) => updateColorVariations(light, "shade", true, 4, vars);
+const roundTrip = (color: ColorItem) => colorItemSchema.parse(JSON.parse(JSON.stringify(color)));
+
+test("an edited block survives save/load repair while automatic blocks follow the source", () => {
+	const generated = generate();
+	const edited = updateColorVariation(generated, "shade", 1, "#123456");
+	expect(edited.shades!.map((item) => item.isCustom)).toEqual([false, true, false, false]);
+	const saved = roundTrip(edited);
+	const state = form(newBody, saved);
+	const repaired = refreshColorSystemReferences(state);
+	const result = repaired.groups[0].colors[1];
+	const expected = generate(newVariables);
+	expect(result.shades![0]).toEqual(expected.shades![0]);
+	expect(result.shades![1]).toEqual(saved.shades![1]);
+	expect(result.shades![2]).toEqual(expected.shades![2]);
+	expect(state.groups[0].colors[1]).toEqual(saved);
+	expect(refreshColorSystemReferences(repaired)).toBe(repaired);
+	expect(colorSystemSchema.parse(repaired).groups[0].colors[1].shades).toEqual(result.shades);
+});
+
+test("opening a picker without changing its colour does not mark a generated block custom", () => {
+	const generated = generate();
+	expect(updateColorVariation(generated, "shade", 0, colord(generated.shades![0].value).toRgbString())).toBe(
+		generated,
+	);
+});
+
+test("Reset releases a custom block back to automatic generation, including after a reload", () => {
+	const generated = generate();
+	const edited = updateColorVariation(generated, "shade", 1, "#123456");
+	const reset = updateColorVariation(edited, "shade", 1, generated.shades![1].value, false, true);
+	expect(reset.shades![1].isCustom).toBe(false);
+	const reloaded = refreshColorReferences(roundTrip(reset), newVariables, newVariables);
+	expect(reloaded.shades).toEqual(generate(newVariables).shades);
+});
+
+test("explicit custom colours are retained even if they match a later automatic colour", () => {
+	const generated = generate();
+	const futureValue = generate(newVariables).shades![0].value;
+	const edited = updateColorVariation(generated, "shade", 0, futureValue);
+	const pinkState = refreshColorReferences(edited, oldVariables, newVariables);
+	const purpleState = refreshColorReferences(roundTrip(pinkState), newVariables, oldVariables);
+	expect(purpleState.shades![0]).toEqual(edited.shades![0]);
+	expect(purpleState.shades![1]).toEqual(generated.shades![1]);
+});
+
+test.each([0, 4])("legacy blocks with count %s are not guessed to be automatic", (count) => {
+	const generated = generate();
+	const legacy = {
+		...generated,
+		shadesNumber: count,
+		shades: generated.shades!.map(({ name, value }) => ({ name, value })),
+	};
+	legacy.shades[1].value = "#123456";
+	const state = form(newBody, legacy);
+	expect(refreshColorSystemReferences(state)).toBe(state);
+	const resized = updateColorVariations(legacy, "shade", true, 7, newVariables);
+	expect(resized.shades!.slice(0, 4)).toEqual(legacy.shades);
+	expect(resized.shades).toHaveLength(7);
+	expect(resized.shades![4].isCustom).toBe(false);
+});
+
+test("a mixed tracked/legacy row repairs only the tracked automatic blocks on load", () => {
+	const generated = generate();
+	delete generated.shades![1].isCustom;
+	const next = refreshColorReferences(generated, newVariables, newVariables);
+	expect(next.shades![0]).toEqual(generate(newVariables).shades![0]);
+	expect(next.shades![1].value).toBe(generated.shades![1].value);
+	expect(next.shades![1].isCustom).toBe(true);
+});
+
+test("dark shades and light tints retain their independent manual edits during load repair", () => {
+	const oldVars = variables({ ...body, isDarkMode: true, darkValue: pink });
+	const newVars = variables({ ...body, value: pink, isDarkMode: true, darkValue: purple });
+	let color = updateColorVariations(
+		{ ...light, isDarkMode: true, darkValue: "var(--bg-body)" },
+		"shade",
+		true,
+		4,
+		oldVars,
+	);
+	color = updateColorVariations(color, "tint", true, 3, oldVars);
+	color = updateColorVariation(color, "shade", 1, "#123456", true);
+	color = updateColorVariation(color, "tint", 0, "#abcdef");
+	const next = refreshColorReferences(roundTrip(color), newVars, newVars);
+	expect(next.darkShades![1]).toEqual(color.darkShades![1]);
+	expect(next.tints![0]).toEqual(color.tints![0]);
+	expect(next.darkShades![0].value).not.toBe(color.darkShades![0].value);
+	expect(next.tints![1].value).not.toBe(color.tints![1].value);
+});
+
+test("load repair settles aliases that reference another generated block", () => {
+	const source = generate();
+	const alias = updateColorVariations(
+		{ ...light, id: "alias", name: "alias", value: "var(--light-d-1)" },
+		"shade",
+		true,
+		3,
+		variables(body, source),
+	);
+	const next = refreshColorSystemReferences(form(newBody, alias, source));
+	const expectedSource = generate(newVariables);
+	const expectedAlias = updateColorVariations(
+		{ ...alias, shades: [] },
+		"shade",
+		true,
+		3,
+		variables(newBody, expectedSource),
+	);
+	expect(next.groups[0].colors[1].shades).toEqual(expectedAlias.shades);
+	expect(next.groups[0].colors[2].shades).toEqual(expectedSource.shades);
+	expect(refreshColorSystemReferences(next)).toBe(next);
+});
+
+test("unresolved references do not erase saved custom colours", () => {
+	const color = updateColorVariation(generate(), "shade", 0, "#123456");
+	const next = singleColorReducer(color, {
+		type: "updateColor",
+		payload: { value: "var(--missing)", colorVariables: newVariables },
+	});
+	expect(next.shades).toEqual(color.shades);
+});
+
+test.each([prepareWebColors, prepareWordPressColors])(
+	"preset loading repairs tracked colours before the version guard",
+	(prepare) => {
+		const edited = updateColorVariation(generate(), "shade", 1, "#123456");
+		const state = form(newBody, roundTrip(edited));
+		const prepared = prepare({ app_version: "99.0.0", modulesData: { COLOR_SYSTEM: state } } as Preset);
+		expect(prepared.modulesData!.COLOR_SYSTEM!.groups[0].colors[1].shades![0]).toEqual(
+			generate(newVariables).shades![0],
+		);
+		expect(prepared.modulesData!.COLOR_SYSTEM!.groups[0].colors[1].shades![1]).toEqual(edited.shades![1]);
+	},
+);
+
+test.each([prepareWebColors, prepareWordPressColors])(
+	"old preset polyfills preserve unclassified blocks with a zero count",
+	(prepare) => {
+		const legacy = {
+			...generate(),
+			shadesNumber: 0,
+			shades: generate().shades!.map(({ name, value }) => ({ name, value })),
+		};
+		legacy.shades[1].value = "#123456";
+		const prepared = prepare({
+			app_version: "1.0.0",
+			modulesData: { COLOR_SYSTEM: form(newBody, legacy) },
+		} as Preset);
+		const result = prepared.modulesData!.COLOR_SYSTEM!.groups[0].colors[1];
+		expect(result.shades).toEqual(legacy.shades);
+		expect(result.shadesNumber).toBe(4);
+	},
+);
diff --git a/packages/core/src/components/modules/colorSystem/functions/__tests__/rawColorVariants.test.ts b/packages/core/src/components/modules/colorSystem/functions/__tests__/rawColorVariants.test.ts
new file mode 100644
index 0000000..f5eaaf3
--- /dev/null
+++ b/packages/core/src/components/modules/colorSystem/functions/__tests__/rawColorVariants.test.ts
@@ -0,0 +1,199 @@
+import { colord } from "colord";
+import { ColorItem, ColorSystemFormData, ColorVariable } from "../../types";
+import { colorGroupsToVariables } from "../colorGroupsToVariables";
+import { generateColorSystemVariables, getTransparentVariable } from "../generateColorSystemVariables";
+import { getColor } from "../getColor";
+import { getColorOnIndex } from "../getColorOnIndex";
+import { refreshColorReferences } from "../refreshColorReferences";
+import { singleColorReducer } from "../singleColorReducer";
+import { updateColorVariation, updateColorVariations } from "../updateColorVariations";
+
+const purple = "hsla(242, 78%, 69%, 1)";
+const pink = "hsla(354, 78%, 69%, 1)";
+const body: ColorItem = { id: "body", name: "bg-body", value: pink, format: "hsla" };
+const light: ColorItem = {
+	id: "light",
+	name: "light",
+	value: "var(--bg-body)",
+	format: "raw",
+	transparent: true,
+	transparentVariables: [80],
+};
+const form = (...colors: ColorItem[]): ColorSystemFormData => ({
+	groups: [{ id: "group", name: "Colors", colors }],
+});
+const variables = (...colors: ColorItem[]) => colorGroupsToVariables(form(...colors)) as ColorVariable[];
+const declarations = (state: ColorSystemFormData, dark = false) =>
+	Object.fromEntries(
+		generateColorSystemVariables({ colorSystemState: state })[dark ? 1 : 0].declarations.map(
+			({ property, value }) => [property, value],
+		),
+	);
+
+test("transparency uses the supplied colours without a Preview CSS window snapshot", () => {
+	const previous = (window as any).colorVariables;
+	try {
+		for (const snapshot of [undefined, variables({ ...body, value: purple })]) {
+			(window as any).colorVariables = snapshot;
+			const css = declarations(form(body, light));
+			expect(css["--light"]).toBe("var(--bg-body)");
+			expect(css["--light-80"]).toBe("#ee727fcc");
+			expect(getTransparentVariable(light, 80, true, false, false, variables(body))?.value).toBe("#ee727fcc");
+		}
+	} finally {
+		(window as any).colorVariables = previous;
+	}
+});
+
+test("transparency follows nested references and successive base colour changes", () => {
+	const alias = { ...light, id: "alias", name: "alias", value: "var(--light)" };
+	expect(declarations(form({ ...body, value: purple }, light, alias))["--alias-80"]).toBe("#7672eecc");
+	expect(declarations(form(body, light, alias))["--alias-80"]).toBe("#ee727fcc");
+});
+
+test("dark references use the dark source, falling back to an unchanged light source", () => {
+	const darkLight = { ...light, isDarkMode: true, darkValue: "var(--bg-body)" };
+	expect(
+		declarations(form({ ...body, isDarkMode: true, darkValue: purple }, darkLight), true)["--light-80"],
+	).toBe("#7672eecc");
+	expect(declarations(form(body, darkLight), true)["--light-80"]).toBe("#ee727fcc");
+});
+
+test.each(["var(--theme-color)", "var(--theme-color, #ee727f)"])(
+	"preserves externally supplied RAW %s and saved variants without inventing transparency",
+	(value) => {
+		const external: ColorItem = {
+			...light,
+			value,
+			isDarkMode: true,
+			darkValue: value,
+			isShades: true,
+			shades: [{ name: "light-d-1", value: "#123456" }],
+			darkShades: [{ name: "light-d-1", value: "#654321" }],
+		};
+		for (const dark of [false, true]) {
+			const css = declarations(form(external), dark);
+			expect(css["--light"]).toBe(value);
+			expect(css["--light-d-1"]).toBe(dark ? "#654321" : "#123456");
+			expect(css["--light-80"]).toBeUndefined();
+		}
+	},
+);
+
+test.each(["var(--missing)", "var(--light)", "var(--loop)"])(
+	"unresolved/circular %s does not generate black transparency",
+	(value) => {
+		const invalid = { ...light, value };
+		const loop = { ...body, name: "loop", value: "var(--light)" };
+		expect(declarations(form(invalid, loop))["--light-80"]).toBeUndefined();
+		expect(getTransparentVariable(invalid, 80, false, false, false, variables(invalid, loop))).toBeNull();
+	},
+);
+
+test.each(["shade", "tint"] as const)(
+	"%s count follows 4 → 7 → 3 for references and literal formats",
+	(type) => {
+		for (const input of [
+			light,
+			{ ...light, format: "hsla", value: pink },
+			{ ...light, format: "rgb", value: "rgb(238, 114, 127)" },
+			{ ...light, value: "#ee727f" },
+		] as ColorItem[]) {
+			let color = input;
+			for (const count of [4, 7, 3]) {
+				color = updateColorVariations(color, type, true, count, variables(body));
+				const items = type === "shade" ? color.shades! : color.tints!;
+				expect(type === "shade" ? color.shadesNumber : color.tintsNumber).toBe(count);
+				expect(items).toHaveLength(count);
+				expect(items.every((item) => colord(item.value).isValid())).toBe(true);
+				expect(items.map((item) => item.name)).toEqual(
+					Array.from({ length: count }, (_, i) => `light-${type === "shade" ? "d" : "l"}-${i + 1}`),
+				);
+			}
+		}
+	},
+);
+
+test("changing the shade count leaves the tint count and custom tint untouched", () => {
+	let color = updateColorVariations(light, "tint", true, 4, variables(body));
+	color = updateColorVariation(color, "tint", 0, "#123456");
+	const next = updateColorVariations(color, "shade", true, 7, variables(body));
+	expect(next.shades).toHaveLength(7);
+	expect(next.tintsNumber).toBe(4);
+	expect(next.tints).toEqual(color.tints);
+});
+
+test("dark variant counts and reset values resolve the correct reference", () => {
+	const vars = variables({ ...body, isDarkMode: true, darkValue: purple });
+	const color = updateColorVariations(
+		{ ...light, isDarkMode: true, darkValue: "var(--bg-body)" },
+		"shade",
+		true,
+		7,
+		vars,
+	);
+	expect(color.shades).toHaveLength(7);
+	expect(color.darkShades).toHaveLength(7);
+	expect(
+		colord(getColorOnIndex({ state: color, type: "shade", index: 0, colorVariables: vars })).toHex(),
+	).toBe(color.shades![0].value);
+	expect(
+		colord(
+			getColorOnIndex({ state: color, type: "shade", index: 0, dark: true, colorVariables: vars }),
+		).toHex(),
+	).toBe(color.darkShades![0].value);
+	expect(color.darkShades![0].value).not.toBe(color.shades![0].value);
+});
+
+test("referenced colour changes regenerate automatic variants and retain manual overrides", () => {
+	const oldVars = variables({ ...body, value: purple });
+	const newVars = variables(body);
+	let color = updateColorVariations(light, "shade", true, 4, oldVars);
+	color = updateColorVariations(color, "tint", true, 4, oldVars);
+	color = updateColorVariation(color, "shade", 1, "#123456");
+	const next = singleColorReducer(color, {
+		type: "refreshReferences",
+		payload: { previousVariables: oldVars, colorVariables: newVars },
+	});
+	expect(next.value).toBe("var(--bg-body)");
+	expect(next.shades![0].value).not.toBe(color.shades![0].value);
+	expect(next.tints![0].value).not.toBe(color.tints![0].value);
+	expect(next.shades![1].value).toBe("#123456");
+	expect(next.shades).toHaveLength(4);
+	expect(refreshColorReferences(next, newVars, newVars)).toBe(next);
+	const resized = updateColorVariations(next, "shade", true, 7, newVars);
+	expect(resized.shades).toHaveLength(7);
+	expect(resized.shades![1].value).toBe("#123456");
+});
+
+test("changing an alias reference directly regenerates using both old and new resolved colours", () => {
+	const vars = variables(body, { ...body, name: "other", value: purple });
+	const color = updateColorVariations(light, "shade", true, 4, vars);
+	const next = singleColorReducer(color, {
+		type: "updateColor",
+		payload: { value: "var(--other)", colorVariables: vars },
+	});
+	expect(next.shades![0].value).not.toBe(color.shades![0].value);
+	expect(getColor(next.value, vars)).toBe(purple);
+});
+
+test("invalid references clear obsolete swatches without replacing the requested count with zero", () => {
+	const color = updateColorVariations(light, "shade", true, 4, variables(body));
+	const next = updateColorVariations(
+		{ ...color, value: "var(--missing)" },
+		"shade",
+		true,
+		7,
+		variables(body),
+	);
+	expect(next.shadesNumber).toBe(7);
+	expect(next.shades).toEqual([]);
+});
+
+test("a saved zero count can regenerate tracked automatic swatches", () => {
+	const stale = updateColorVariations(light, "shade", true, 4, variables({ ...body, value: purple }));
+	const next = updateColorVariations({ ...stale, shadesNumber: 0 }, "shade", true, 7, variables(body));
+	const expected = updateColorVariations(light, "shade", true, 7, variables(body));
+	expect(next.shadesNumber).toBe(7);
+	expect(next.shades).toEqual(expected.shades);
+});
diff --git a/packages/core/src/components/modules/colorSystem/functions/generateColorSystemVariables.ts b/packages/core/src/components/modules/colorSystem/functions/generateColorSystemVariables.ts
index da1bb53..c2a7bfd 100644
--- a/packages/core/src/components/modules/colorSystem/functions/generateColorSystemVariables.ts
+++ b/packages/core/src/components/modules/colorSystem/functions/generateColorSystemVariables.ts
@@ -11,13 +11,12 @@ export function getTransparentVariable(
 	includeRawValue: boolean = false,
 	darkMode: boolean = false,
 	includeVariants: boolean = false,
+	colorVariables: ColorVariable[] = [],
 ) {
 	const { format } = color;
-	const colorValue = darkMode
-		? getColor(color.darkValue as string, [], true, true)
-		: getColor(color.value, [], true);
+	const colorValue = getColor(darkMode ? color.darkValue ?? "" : color.value, colorVariables, darkMode);
 
-	if (!colorValue || !isValidColorValue(colorValue)) return null;
+	if (!colord(colorValue).isValid()) return null;
 
 	const name = `${color.name}-${String(variant).replace("0.", "")}`;
 	const instance = colord(colorValue).alpha(Number(variant) / 100);
@@ -60,7 +59,7 @@ function createDeclarations(
 
 		for (const color of colors) {
 			const colorValue = darkMode ? color.darkValue : color.value;
-			if (!colorValue || !isValidColorValue(getColor(colorValue, vars))) continue;
+			if (!colorValue || !isValidColorValue(getColor(colorValue, vars, darkMode))) continue;
 
 			const processedColor = darkMode ? { ...color, value: color.darkValue ?? "" } : color;
 			colorsToProcess.push({
@@ -70,7 +69,7 @@ function createDeclarations(
 
 			if (color?.transparent && color?.transparentVariables?.length) {
 				color.transparentVariables.forEach((variant) => {
-					const variable = getTransparentVariable(color, variant, false, darkMode, includeVariants);
+					const variable = getTransparentVariable(color, variant, false, darkMode, includeVariants, vars);
 					if (variable) colorsToProcess.push({ ...variable, ...(includeVariants ? { groupName } : {}) });
 				});
 			}
diff --git a/packages/core/src/components/modules/colorSystem/functions/generateShadesTints.ts b/packages/core/src/components/modules/colorSystem/functions/generateShadesTints.ts
index e71cfde..0ce45dc 100644
--- a/packages/core/src/components/modules/colorSystem/functions/generateShadesTints.ts
+++ b/packages/core/src/components/modules/colorSystem/functions/generateShadesTints.ts
@@ -1,5 +1,6 @@
 import { DEFAULT_SHADES_COUNT } from "../data/defaults";
-import { ColorItem, Shade } from "../types";
+import { ColorItem, ColorVariable, Shade } from "../types";
+import { getColor } from "./getColor";
 import { ColorFormat } from "@mantine/core/lib/ColorPicker/types";
 import chroma from "chroma-js";
 import { colord, getFormat } from "colord";
@@ -65,36 +66,62 @@ export function generateAdditionalColorName({ name, index, type }: IGenerateShad
 	return `${name}-${types[type]}-${index + 1}`;
 }
 
-export function generateWithCheck(state: ColorItem, newColor: string, type: ColorType, isDark = false) {
+export function generateWithCheck(
+	state: ColorItem,
+	newColor: string,
+	type: ColorType,
+	isDark = false,
+	colorVariables: ColorVariable[] = [],
+) {
 	const formatItem = (item: Shade) => ({
 		...item,
 		value: convertToDesiredColorFormat(item.value, state.format),
 	});
-	const generateItems = (color: string, count: number) =>
-		generateFn({ midColor: color, name: state.name, number: count, format: "hsla" }).map(formatItem);
+	const generateItems = (color: string, count: number): Shade[] =>
+		generateFn({ midColor: color, name: state.name, number: count, format: "hsla" }).map((item) => ({
+			...formatItem(item),
+			isCustom: false,
+		}));
 
 	const isShade = type === "shade";
 	const generateFn = isShade ? generateShades : generateTints;
 	const number = (isShade ? state.shadesNumber : state.tintsNumber) ?? 0;
-	const midColor = isDark ? state.darkValue ?? "" : state.value;
-	const existingItems = (
-		isDark ? (isShade ? state.darkShades : state.darkTints) : isShade ? state.shades : state.tints
-	)?.map(formatItem);
+	const midColor = getColor(isDark ? (state.darkValue ?? "") : state.value, colorVariables, isDark);
+	const savedItems = isDark
+		? isShade
+			? state.darkShades
+			: state.darkTints
+		: isShade
+			? state.shades
+			: state.tints;
+	const existingItems = savedItems?.map(formatItem);
 
 	let generatedItems =
 		number !== existingItems?.length
 			? generateItems(midColor, existingItems?.length ?? 0)
 			: generateItems(midColor, number);
-	const newGeneratedItems = generateItems(newColor, number);
+	const newGeneratedItems = generateItems(getColor(newColor, colorVariables, isDark), number);
+	// An unresolved reference must not erase custom or unclassified legacy values.
+	if (!newGeneratedItems.length && savedItems?.some((item) => item.isCustom !== false)) return savedItems;
 
-	for (let i = 0; i < generatedItems.length; i++) {
+	for (let i = 0; i < (existingItems?.length ?? 0); i++) {
 		const existingItem = existingItems?.[i];
 		const generatedItem = generatedItems[i];
 
 		if (existingItem && newGeneratedItems[i]) {
+			if (existingItem.isCustom === false) continue;
+			if (existingItem.isCustom === true || !generatedItem) {
+				newGeneratedItems[i] = savedItems![i];
+				continue;
+			}
 			const totalDiff = calculateTotalDifference(generatedItem.value, existingItem.value);
-			if (state.prevFormat !== state.format && totalDiff > PERCENTAGE_ERROR)
-				newGeneratedItems[i] = existingItem;
+			const isCustomRawColor =
+				state.format === "raw" && colord(generatedItem.value).toHex() !== colord(existingItem.value).toHex();
+			if (
+				isCustomRawColor ||
+				(state.format !== "raw" && state.prevFormat !== state.format && totalDiff > PERCENTAGE_ERROR)
+			)
+				newGeneratedItems[i] = savedItems![i];
 		}
 	}
 
@@ -111,7 +138,7 @@ function parseHSLA(hslaString: string) {
 				s: parseInt(result[2], 10),
 				l: parseInt(result[3], 10),
 				a: parseFloat(result[4]),
-		  }
+			}
 		: { h: 0, s: 0, l: 0, a: 0 };
 }
 
diff --git a/packages/core/src/components/modules/colorSystem/functions/getColor.ts b/packages/core/src/components/modules/colorSystem/functions/getColor.ts
index aa514c4..354a8d8 100644
--- a/packages/core/src/components/modules/colorSystem/functions/getColor.ts
+++ b/packages/core/src/components/modules/colorSystem/functions/getColor.ts
@@ -1,36 +1,35 @@
 import cssColorNames from "data/cssColorNames";
 import { isValidColor } from "utils";
-import { ColorVariable, UpdatedWindow } from "../types";
+import { ColorVariable } from "../types";
 
 const variableRegex = /^var\(--(.*?)\)$/;
 
 export const getColor = (
 	value: string,
-	colorVariables?: ColorVariable[],
-	fromWindow?: boolean,
+	colorVariables: ColorVariable[] = [],
 	isDark?: boolean,
 ): string => {
-	const variables = (fromWindow ? (window as unknown as UpdatedWindow).colorVariables : colorVariables) || [];
-
 	function resolveColor(
 		color: string,
 		visited: Set<string> = new Set(),
 		isDarkColor: boolean = isDark ?? false,
 	): string {
-		const regMatch = color.match(variableRegex);
+		const regMatch = color.trim().match(variableRegex);
 		if (!regMatch) return cssColorNames[color] ?? color;
 
 		const varName = regMatch[1];
-		const variable = variables.find((el) => el.name === varName);
+		const variable = colorVariables.find((el) => el.name === varName);
 
 		if (visited.has(varName)) return "";
 
 		if (variable) {
 			visited.add(varName);
-			const color = isDarkColor ? variable.colorDarkValue || "" : variable.colorValue;
+			const color = isDarkColor ? variable.colorDarkValue || variable.colorValue : variable.colorValue;
 			return resolveColor(color, visited, isDarkColor);
 		}
-		return cssColorNames[color] ?? color;
+		// Keep references supplied by themes/custom CSS in generated declarations.
+		// Callers doing colour arithmetic must still require a resolved literal.
+		return color;
 	}
 
 	return resolveColor(value);
diff --git a/packages/core/src/components/modules/colorSystem/functions/getColorOnIndex.ts b/packages/core/src/components/modules/colorSystem/functions/getColorOnIndex.ts
index db5c9e9..7516975 100644
--- a/packages/core/src/components/modules/colorSystem/functions/getColorOnIndex.ts
+++ b/packages/core/src/components/modules/colorSystem/functions/getColorOnIndex.ts
@@ -1,4 +1,5 @@
-import { ColorItem } from "../types";
+import { ColorItem, ColorVariable } from "../types";
+import { getColor } from "./getColor";
 import { generateShades, generateTints } from "./generateShadesTints";
 
 interface GetColorOnIndexProps {
@@ -6,13 +7,14 @@ interface GetColorOnIndexProps {
 	readonly index: number;
 	readonly type: "shade" | "tint";
 	readonly dark?: boolean;
+	readonly colorVariables?: ColorVariable[];
 }
 
-export function getColorOnIndex({ state, index, type, dark }: GetColorOnIndexProps) {
+export function getColorOnIndex({ state, index, type, dark, colorVariables }: GetColorOnIndexProps) {
 	const { value, darkValue, name, shadesNumber, tintsNumber } = state;
 
 	const options = {
-		midColor: dark ? darkValue ?? value : value,
+		midColor: getColor(dark ? darkValue ?? value : value, colorVariables, dark),
 		name: name,
 		number: type === "shade" ? shadesNumber : tintsNumber,
 	};
diff --git a/packages/core/src/components/modules/colorSystem/functions/refreshColorReferences.ts b/packages/core/src/components/modules/colorSystem/functions/refreshColorReferences.ts
new file mode 100644
index 0000000..4b8e723
--- /dev/null
+++ b/packages/core/src/components/modules/colorSystem/functions/refreshColorReferences.ts
@@ -0,0 +1,81 @@
+import { ColorItem, ColorSystemFormData, ColorVariable } from "../types";
+import { DEFAULT_SHADES_COUNT, DEFAULT_TINTS_COUNT } from "../data/defaults";
+import { colorGroupsToVariables } from "./colorGroupsToVariables";
+import { getColor } from "./getColor";
+import { generateWithCheck } from "./generateShadesTints";
+import { colord } from "colord";
+
+// Recalculate automatic variants using the previous resolved colour as the
+// baseline, so manually edited swatches survive changes to a referenced colour.
+export function refreshColorReferences(
+	color: ColorItem,
+	previousVariables: ColorVariable[],
+	colorVariables: ColorVariable[],
+): ColorItem {
+	if (color.format !== "raw") return color;
+	let next = color;
+	for (const isDark of [false, true]) {
+		if (isDark && !color.isDarkMode) continue;
+		const value = isDark ? (color.darkValue ?? "") : color.value;
+		if (!value.trim().startsWith("var(")) continue;
+		const previousValue = getColor(value, previousVariables, isDark);
+		const resolvedValue = getColor(value, colorVariables, isDark);
+		if (!colord(resolvedValue).isValid()) continue;
+
+		const previous = { ...color, [isDark ? "darkValue" : "value"]: previousValue };
+		for (const type of ["shade", "tint"] as const) {
+			if (!(type === "shade" ? color.isShades : color.isTints)) continue;
+			const key = isDark
+				? type === "shade"
+					? "darkShades"
+					: "darkTints"
+				: type === "shade"
+					? "shades"
+					: "tints";
+			const items = color[key];
+			// On load there is no previous source colour. Only explicitly automatic
+			// blocks (or missing blocks) can be repaired without guessing about edits.
+			const sourceChanged = previousValue !== resolvedValue;
+			if (!sourceChanged && items?.length && !items.some((item) => item.isCustom === false)) continue;
+			const countKey = type === "shade" ? "shadesNumber" : "tintsNumber";
+			const count =
+				color[countKey] || items?.length || (type === "shade" ? DEFAULT_SHADES_COUNT : DEFAULT_TINTS_COUNT);
+			const generationState = {
+				...previous,
+				[countKey]: count,
+				// Unknown legacy blocks must remain unchanged during a load-time repair.
+				...(!sourceChanged && items
+					? { [key]: items.map((item) => ({ ...item, isCustom: item.isCustom ?? true })) }
+					: {}),
+			};
+			const generated = generateWithCheck(generationState, resolvedValue, type, isDark);
+			if (JSON.stringify(items) !== JSON.stringify(generated) || color[countKey] !== count)
+				next = { ...next, [key]: generated, [countKey]: count };
+		}
+	}
+	return next;
+}
+
+export function refreshColorSystemReferences(state: ColorSystemFormData): ColorSystemFormData {
+	if (state.isDisabled) return state;
+	let next = state;
+	// A reference may target another colour's generated block. Resolve those
+	// dependencies in bounded passes, stopping as soon as the values settle.
+	const limit = state.groups.reduce((sum, group) => sum + group.colors.length, 0);
+	for (let pass = 0; pass < limit; pass++) {
+		const variables = colorGroupsToVariables(next) as ColorVariable[];
+		let changed = false;
+		const groups = next.groups.map((group) => {
+			if (group.isDisabled) return group;
+			const colors = group.colors.map((color) => {
+				const refreshed = refreshColorReferences(color, variables, variables);
+				if (refreshed !== color) changed = true;
+				return refreshed;
+			});
+			return { ...group, colors };
+		});
+		if (!changed) return next;
+		next = { ...next, groups };
+	}
+	return next;
+}
diff --git a/packages/core/src/components/modules/colorSystem/functions/singleColorReducer.ts b/packages/core/src/components/modules/colorSystem/functions/singleColorReducer.ts
index 0ffc36e..6487db5 100644
--- a/packages/core/src/components/modules/colorSystem/functions/singleColorReducer.ts
+++ b/packages/core/src/components/modules/colorSystem/functions/singleColorReducer.ts
@@ -1,3 +1,4 @@
+import { refreshColorReferences } from "./refreshColorReferences";
 import { ColorItem, Shade, SingleColorReducerAction } from "../types";
 import { colord } from "colord";
 import { convertToDesiredColorFormat } from "utils";
@@ -6,6 +7,8 @@ import { getColor } from "./getColor";
 
 export const singleColorReducer = (state: ColorItem, action: SingleColorReducerAction): ColorItem => {
 	switch (action.type) {
+		case "refreshReferences":
+			return refreshColorReferences(state, action.payload.previousVariables, action.payload.colorVariables);
 		case "restore":
 			return action.payload;
 		case "rename": {
@@ -28,17 +31,14 @@ export const singleColorReducer = (state: ColorItem, action: SingleColorReducerA
 		}
 		case "updateColor": {
 			const { value, colorVariables } = action.payload;
-			const isRaw = state.format === "raw";
 
 			return {
 				...state,
 				value,
 				...(state.isShades
-					? { shades: generateWithCheck(state, isRaw ? getColor(value, colorVariables) : value, "shade") }
-					: {}),
-				...(state.isTints
-					? { tints: generateWithCheck(state, isRaw ? getColor(value, colorVariables) : value, "tint") }
+					? { shades: generateWithCheck(state, value, "shade", false, colorVariables) }
 					: {}),
+				...(state.isTints ? { tints: generateWithCheck(state, value, "tint", false, colorVariables) } : {}),
 			};
 		}
 		case "updateFormat": {
@@ -49,7 +49,7 @@ export const singleColorReducer = (state: ColorItem, action: SingleColorReducerA
 			const colorInDesiredFormat = convertToDesiredColorFormat(colorInstance, format);
 
 			const colorDarkInstance =
-				isDarkMode && darkValue ? colord(getColor(darkValue, colorVariables, false, true)) : colorInstance;
+				isDarkMode && darkValue ? colord(getColor(darkValue, colorVariables, true)) : colorInstance;
 			const colorDarkInDesiredFormat =
 				isDarkMode && darkValue
 					? convertToDesiredColorFormat(colorDarkInstance, format)
@@ -74,27 +74,12 @@ export const singleColorReducer = (state: ColorItem, action: SingleColorReducerA
 		case "updateDarkColor": {
 			const { value, colorVariables } = action.payload;
 			if (!value) return state;
-			const isRaw = state.format === "raw";
 
 			return {
 				...state,
 				darkValue: value,
-				darkShades: state.isShades
-					? generateWithCheck(
-							state,
-							isRaw ? getColor(value, colorVariables, false, true) : value,
-							"shade",
-							true,
-					  )
-					: [],
-				darkTints: state.isTints
-					? generateWithCheck(
-							state,
-							isRaw ? getColor(value, colorVariables, false, true) : value,
-							"tint",
-							true,
-					  )
-					: [],
+				darkShades: state.isShades ? generateWithCheck(state, value, "shade", true, colorVariables) : [],
+				darkTints: state.isTints ? generateWithCheck(state, value, "tint", true, colorVariables) : [],
 			};
 		}
 	}
diff --git a/packages/core/src/components/modules/colorSystem/functions/updateColorVariations.ts b/packages/core/src/components/modules/colorSystem/functions/updateColorVariations.ts
new file mode 100644
index 0000000..ad99cd9
--- /dev/null
+++ b/packages/core/src/components/modules/colorSystem/functions/updateColorVariations.ts
@@ -0,0 +1,61 @@
+import { ColorItem, ColorVariable } from "../types";
+import { generateWithCheck } from "./generateShadesTints";
+import { colord } from "colord";
+
+export function updateColorVariations(
+	color: ColorItem,
+	type: "shade" | "tint",
+	isActive: boolean,
+	number: number,
+	colorVariables: ColorVariable[],
+	prevFormat?: string,
+): ColorItem {
+	number = Math.max(3, Math.min(10, Number.isFinite(number) ? Math.round(number) : 3));
+	const isShade = type === "shade";
+	const countKey = isShade ? "shadesNumber" : "tintsNumber";
+	const itemsKey = isShade ? "shades" : "tints";
+	const darkItemsKey = isShade ? "darkShades" : "darkTints";
+	const next = { ...color, [isShade ? "isShades" : "isTints"]: isActive, [countKey]: number };
+	if (!isActive) return next;
+
+	const generationState = { ...next, prevFormat };
+	return {
+		...next,
+		[itemsKey]: generateWithCheck(generationState, color.value, type, false, colorVariables),
+		[darkItemsKey]:
+			color.isDarkMode && color.darkValue
+				? generateWithCheck(generationState, color.darkValue, type, true, colorVariables)
+				: [],
+	};
+}
+
+export function updateColorVariation(
+	color: ColorItem,
+	type: "shade" | "tint",
+	index: number,
+	value: string,
+	isDark = false,
+	reset = false,
+): ColorItem {
+	const key = isDark
+		? type === "shade"
+			? "darkShades"
+			: "darkTints"
+		: type === "shade"
+			? "shades"
+			: "tints";
+	const items = color[key];
+	const item = items?.[index];
+	if (!item) return color;
+	// Opening and closing the picker can emit the same colour in another format.
+	const unchanged =
+		item.value === value ||
+		(colord(item.value).isValid() &&
+			colord(value).isValid() &&
+			colord(item.value).toHex() === colord(value).toHex());
+	if (!reset && unchanged) return color;
+	return {
+		...color,
+		[key]: items.map((item, i) => (i === index ? { ...item, value, isCustom: !reset } : item)),
+	};
+}
diff --git a/packages/core/src/components/modules/colorSystem/schema/colorSystem.schema.ts b/packages/core/src/components/modules/colorSystem/schema/colorSystem.schema.ts
index 9f1c8f7..8f22261 100644
--- a/packages/core/src/components/modules/colorSystem/schema/colorSystem.schema.ts
+++ b/packages/core/src/components/modules/colorSystem/schema/colorSystem.schema.ts
@@ -23,6 +23,7 @@ const AVAILABLE_FORMATS = [
 const shadeOrTintSchema = z.object({
 	name: z.string(),
 	value: z.string(),
+	isCustom: z.boolean().optional(),
 });
 
 export const colorItemSchema = z.object({
diff --git a/packages/core/src/components/modules/colorSystem/types/index.d.ts b/packages/core/src/components/modules/colorSystem/types/index.d.ts
index c28248a..6cabbc0 100644
--- a/packages/core/src/components/modules/colorSystem/types/index.d.ts
+++ b/packages/core/src/components/modules/colorSystem/types/index.d.ts
@@ -96,6 +96,10 @@ export type FormAction =
 	  };
 
 export type SingleColorReducerAction =
+	| {
+			type: "refreshReferences";
+			payload: { previousVariables: ColorVariable[]; colorVariables: ColorVariable[] };
+	  }
 	| {
 			type: "restore";
 			payload: ColorItem;
@@ -131,6 +135,8 @@ export type SingleColorReducerAction =
 export type Shade = {
 	name: string;
 	value: string;
+	/** Undefined in legacy presets, which did not record manual edits. */
+	isCustom?: boolean;
 };
 
 export type ColorFormatValue = ColorFormat | "raw";
@@ -141,7 +147,3 @@ export type ColorVariable = {
 	transparent?: number;
 	colorDarkValue?: string;
 };
-
-export interface UpdatedWindow {
-	colorVariables: ColorVariable[];
-}
diff --git a/packages/wp/src/components/Side.tsx b/packages/wp/src/components/Side.tsx
index a738581..f45e00b 100644
--- a/packages/wp/src/components/Side.tsx
+++ b/packages/wp/src/components/Side.tsx
@@ -1,7 +1,6 @@
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Book } from "../assets/icons/Book.icon";
 import { useChangeDetection } from "../hooks/useChangeDetection";
-import { useGetColor } from "../hooks/useGetColor";
 import { clsx } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
 import { flags } from "flags";
@@ -12,7 +11,6 @@ import { hasUnsavedChangesAtom, isHandleSave } from "../state/saveAtom";
 import { viewAtom } from "state";
 import { Stats } from "./Stats";
 import { Loader } from "./basic/Loader";
-import { UpdatedWindow } from "./modules/colorSystem";
 import { Tooltip } from "./ui/Tooltip";
 
 type RollingContentItem = {
@@ -65,7 +63,6 @@ export const Side = memo(() => {
 	const canBeSaved = useAtomValue(isHandleSave);
 	const hasUnsavedChanges = useAtomValue(hasUnsavedChangesAtom);
 
-	const { colorVariables } = useGetColor();
 	const { handlePush, state } = usePush();
 
 	// Use the change detection hook
@@ -140,7 +137,6 @@ export const Side = memo(() => {
 			<div className="grid gap-s">
 				<button
 					onClick={() => {
-						(window as unknown as UpdatedWindow).colorVariables = colorVariables;
 						setView("PREVIEW");
 					}}
 					className={"btn-tertiary btn-m full-width"}
diff --git a/packages/wp/src/functions/preparePresetToLoad.ts b/packages/wp/src/functions/preparePresetToLoad.ts
index e9a98bd..0a1c2ac 100644
--- a/packages/wp/src/functions/preparePresetToLoad.ts
+++ b/packages/wp/src/functions/preparePresetToLoad.ts
@@ -7,6 +7,7 @@ import { ulid } from "ulid";
 import { compareVersion, withDevTimeLogger } from "utils";
 import { DEFAULT_SHADES_COUNT } from "components/modules/colorSystem";
 import { generateShades, generateTints } from "components/modules/colorSystem/functions/generateShadesTints";
+import { refreshColorSystemReferences } from "@core-framework/core/components/modules/colorSystem/functions/refreshColorReferences";
 import {
 	COLUMN_LAYOUTS_GROUP_NAME,
 	COLUMN_VARIABLES_GROUP_NAME,
@@ -64,6 +65,12 @@ function addNewGroups({ preset, since, where, placeAsLast, groups }: addNewGroup
 }
 
 export function prepareColorSystem(preset: Preset): Preset {
+	const currentColors = preset.modulesData?.COLOR_SYSTEM;
+	if (currentColors) {
+		const refreshed = refreshColorSystemReferences(currentColors);
+		if (refreshed !== currentColors)
+			preset = { ...preset, modulesData: { ...preset.modulesData, COLOR_SYSTEM: refreshed } };
+	}
 	const { modulesData, app_version } = preset;
 
 	if (
@@ -99,6 +106,11 @@ export function prepareColorSystem(preset: Preset): Preset {
 
 		const newColors = colors
 			.map((color) => {
+				// A zero counter does not prove that saved blocks were never edited.
+				if (!color.shadesNumber && color.shades?.length)
+					color = { ...color, shadesNumber: color.shades.length };
+				if (!color.tintsNumber && color.tints?.length)
+					color = { ...color, tintsNumber: color.tints.length };
 				if (!color?.shadesNumber && color?.isShades) {
 					const shades = generateShades({
 						midColor: color.value,
diff --git a/packages/wp/src/hooks/useGetColor.ts b/packages/wp/src/hooks/useGetColor.ts
index af46d21..3f9e78f 100644
--- a/packages/wp/src/hooks/useGetColor.ts
+++ b/packages/wp/src/hooks/useGetColor.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from "react";
+import { useMemo, useRef } from "react";
 import { ColorVariable } from "../components/modules/colorSystem";
 import { colorGroupsToVariables } from "../components/modules/colorSystem/functions/colorGroupsToVariables";
 import cssColorNames from "../data/cssColorNames";
@@ -7,7 +7,7 @@ import { ColorFormat } from "@mantine/core/lib/ColorPicker/types";
 import type { Color } from "@adobe/react-spectrum";
 import { parseColor } from "@adobe/react-spectrum";
 import { colord } from "colord";
-import { useAtomCallback } from "jotai/utils";
+import { useAtomValue } from "jotai";
 import { colorSystemFormDataAtom } from "../state";
 
 const errors = {
@@ -16,11 +16,8 @@ const errors = {
 };
 
 export function useGetColor() {
-	const getColorSystemFormDataAtom = useAtomCallback(useCallback((get) => get(colorSystemFormDataAtom), []));
-	const colorVariables = useMemo(
-		() => colorGroupsToVariables(getColorSystemFormDataAtom()),
-		[getColorSystemFormDataAtom().groups],
-	) as ColorVariable[];
+	const colorSystem = useAtomValue(colorSystemFormDataAtom);
+	const colorVariables = useMemo(() => colorGroupsToVariables(colorSystem), [colorSystem]) as ColorVariable[];
 
 	const errorMsg = useRef("");
 	const variableRegex = /^var\(--(.*?)\)$/;
@@ -40,7 +37,7 @@ export function useGetColor() {
 
 		if (variable) {
 			visited.add(varName);
-			const color = isDark ? variable.colorDarkValue || "" : variable.colorValue;
+			const color = isDark ? variable.colorDarkValue || variable.colorValue : variable.colorValue;
 			return getColor(color, isDark, visited);
 		}
 		return cssColorNames[value] ?? value;
@@ -68,7 +65,7 @@ export function useGetColor() {
 
 		if (variable) {
 			visited.add(varName);
-			const color = isDark ? variable.colorDarkValue || "" : variable.colorValue;
+			const color = isDark ? variable.colorDarkValue || variable.colorValue : variable.colorValue;
 			return checkInfinite(color, isDark, visited);
 		}
 
diff --git a/packages/wp/src/hooks/usePush.ts b/packages/wp/src/hooks/usePush.ts
index f9e76d5..bb9ed49 100644
--- a/packages/wp/src/hooks/usePush.ts
+++ b/packages/wp/src/hooks/usePush.ts
@@ -1,4 +1,6 @@
 import { useCallback, useMemo, useState } from "react";
+import { colorGroupsToVariables } from "components/modules/colorSystem/functions/colorGroupsToVariables";
+import type { ColorVariable } from "components/modules/colorSystem";
 import { devLog } from "functions/devLog";
 import { getClassNamesGroupedByGroups } from "functions/getClassNamesGroupedByGroups";
 import { minifyCss } from "functions/minifyCss";
@@ -202,6 +204,7 @@ export function usePush() {
 			return;
 		}
 
+		const colorVariables = colorGroupsToVariables(colorSystemFormData) as ColorVariable[];
 		const colors = [];
 
 		for (const group of colorSystemFormData.groups) {
@@ -240,7 +243,7 @@ export function usePush() {
 								name = "",
 								value = "",
 								id = "",
-							} = getTransparentVariable(colorItem, variant, true) || {};
+							} = getTransparentVariable(colorItem, variant, true, false, false, colorVariables) || {};
 
 							if (!id) return;
 
@@ -347,7 +350,14 @@ export function usePush() {
 
 					if (transparent && transparentVariables && transparentVariables.length) {
 						transparentVariables.forEach((variant) => {
-							const transparentColor = getTransparentVariable(colorItem, variant, false, true);
+							const transparentColor = getTransparentVariable(
+								colorItem,
+								variant,
+								false,
+								true,
+								false,
+								colorVariables,
+							);
 							if (!transparentColor) {
 								return;
 							}
diff --git a/packages/www/src/components/Side.tsx b/packages/www/src/components/Side.tsx
index 239610e..023c87e 100644
--- a/packages/www/src/components/Side.tsx
+++ b/packages/www/src/components/Side.tsx
@@ -1,7 +1,6 @@
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Book } from "../assets/icons/Book.icon";
 import { useChangeDetection } from "../hooks/useChangeDetection";
-import { useGetColor } from "../hooks/useGetColor";
 import { clsx } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
 import { flags } from "flags";
@@ -11,7 +10,6 @@ import { hasUnsavedChangesAtom, isHandleSave } from "../state/saveAtom";
 import { viewAtom } from "state";
 import { Stats } from "./Stats";
 import { Loader } from "./basic/Loader";
-import { UpdatedWindow } from "./modules/colorSystem";
 import { Tooltip } from "./ui/Tooltip";
 
 type RollingContentItem = {
@@ -66,7 +64,6 @@ export const Side = memo(() => {
 	const canBeSaved = useAtomValue(isHandleSave);
 	const hasUnsavedChanges = useAtomValue(hasUnsavedChangesAtom);
 
-	const { colorVariables } = useGetColor();
 	const { handlePush, isLoading } = usePush();
 
 	// Use the change detection hook
@@ -118,7 +115,6 @@ export const Side = memo(() => {
 			<div className="grid gap-s">
 				<button
 					onClick={() => {
-						(window as unknown as UpdatedWindow).colorVariables = colorVariables;
 						setView("PREVIEW");
 					}}
 					className={"btn-tertiary btn-m full-width"}
diff --git a/packages/www/src/functions/preparePresetToLoad.ts b/packages/www/src/functions/preparePresetToLoad.ts
index 9e793cf..2056958 100644
--- a/packages/www/src/functions/preparePresetToLoad.ts
+++ b/packages/www/src/functions/preparePresetToLoad.ts
@@ -7,6 +7,7 @@ import { ulid } from "ulid";
 import { compareVersion, withDevTimeLogger } from "utils";
 import { DEFAULT_SHADES_COUNT } from "components/modules/colorSystem";
 import { generateShades, generateTints } from "components/modules/colorSystem/functions/generateShadesTints";
+import { refreshColorSystemReferences } from "@core-framework/core/components/modules/colorSystem/functions/refreshColorReferences";
 import {
 	COLUMN_LAYOUTS_GROUP_NAME,
 	COLUMN_VARIABLES_GROUP_NAME,
@@ -62,6 +63,12 @@ function addNewGroups({ preset, since, where, placeAsLast, groups }: addNewGroup
 }
 
 export function prepareColorSystem(preset: Preset): Preset {
+	const currentColors = preset.modulesData?.COLOR_SYSTEM;
+	if (currentColors) {
+		const refreshed = refreshColorSystemReferences(currentColors);
+		if (refreshed !== currentColors)
+			preset = { ...preset, modulesData: { ...preset.modulesData, COLOR_SYSTEM: refreshed } };
+	}
 	const { modulesData, app_version } = preset;
 
 	if (
@@ -97,6 +104,11 @@ export function prepareColorSystem(preset: Preset): Preset {
 
 		const newColors = colors
 			.map((color) => {
+				// A zero counter does not prove that saved blocks were never edited.
+				if (!color.shadesNumber && color.shades?.length)
+					color = { ...color, shadesNumber: color.shades.length };
+				if (!color.tintsNumber && color.tints?.length)
+					color = { ...color, tintsNumber: color.tints.length };
 				if (!color?.shadesNumber && color?.isShades) {
 					const shades = generateShades({
 						midColor: color.value,
diff --git a/packages/www/src/hooks/useGetColor.ts b/packages/www/src/hooks/useGetColor.ts
index 26778b2..3eddb60 100644
--- a/packages/www/src/hooks/useGetColor.ts
+++ b/packages/www/src/hooks/useGetColor.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from "react";
+import { useMemo, useRef } from "react";
 import { ColorVariable } from "../components/modules/colorSystem";
 import { colorGroupsToVariables } from "../components/modules/colorSystem/functions/colorGroupsToVariables";
 import cssColorNames from "../data/cssColorNames";
@@ -7,7 +7,7 @@ import { ColorFormat } from "@mantine/core/lib/ColorPicker/types";
 import type { Color } from "@adobe/react-spectrum";
 import { parseColor } from "@adobe/react-spectrum";
 import { colord } from "colord";
-import { useAtomCallback } from "jotai/utils";
+import { useAtomValue } from "jotai";
 import { colorSystemFormDataAtom } from "../state";
 
 const errors = {
@@ -16,11 +16,8 @@ const errors = {
 };
 
 export function useGetColor() {
-	const getColorSystemFormDataAtom = useAtomCallback(useCallback((get) => get(colorSystemFormDataAtom), []));
-	const colorVariables = useMemo(
-		() => colorGroupsToVariables(getColorSystemFormDataAtom()),
-		[getColorSystemFormDataAtom],
-	) as ColorVariable[];
+	const colorSystem = useAtomValue(colorSystemFormDataAtom);
+	const colorVariables = useMemo(() => colorGroupsToVariables(colorSystem), [colorSystem]) as ColorVariable[];
 
 	const errorMsg = useRef("");
 	const variableRegex = /^var\(--(.*?)\)$/;
@@ -40,7 +37,7 @@ export function useGetColor() {
 
 		if (variable) {
 			visited.add(varName);
-			const color = isDark ? variable.colorDarkValue || "" : variable.colorValue;
+			const color = isDark ? variable.colorDarkValue || variable.colorValue : variable.colorValue;
 			return getColor(color, isDark, visited);
 		}
 		return cssColorNames[value] ?? value;
@@ -68,7 +65,7 @@ export function useGetColor() {
 
 		if (variable) {
 			visited.add(varName);
-			const color = isDark ? variable.colorDarkValue || "" : variable.colorValue;
+			const color = isDark ? variable.colorDarkValue || variable.colorValue : variable.colorValue;
 			return checkInfinite(color, isDark, visited);
 		}
 
diff --git a/packages/www/src/hooks/usePushFigmaSync.ts b/packages/www/src/hooks/usePushFigmaSync.ts
index bbc3c05..1c218ed 100644
--- a/packages/www/src/hooks/usePushFigmaSync.ts
+++ b/packages/www/src/hooks/usePushFigmaSync.ts
@@ -1,4 +1,6 @@
 import { useCallback } from "react";
+import { colorGroupsToVariables } from "components/modules/colorSystem/functions/colorGroupsToVariables";
+import type { ColorVariable } from "components/modules/colorSystem";
 import { getClassNamesGroupedByGroups } from "functions/getClassNamesGroupedByGroups";
 import { minifyCss } from "functions/minifyCss";
 import {
@@ -112,6 +114,7 @@ export function usePushFigmaSync() {
 			return;
 		}
 
+		const colorVariables = colorGroupsToVariables(colorSystemFormData) as ColorVariable[];
 		const colors = [];
 
 		for (const group of colorSystemFormData.groups) {
@@ -148,7 +151,7 @@ export function usePushFigmaSync() {
 								name = "",
 								value = "",
 								id = "",
-							} = getTransparentVariable(colorItem, variant, true) || {};
+							} = getTransparentVariable(colorItem, variant, true, false, false, colorVariables) || {};
 
 							if (!id) return;
 
@@ -255,7 +258,14 @@ export function usePushFigmaSync() {
 
 					if (transparent && transparentVariables && transparentVariables.length) {
 						transparentVariables.forEach((variant) => {
-							const transparentColor = getTransparentVariable(colorItem, variant, false, true);
+							const transparentColor = getTransparentVariable(
+								colorItem,
+								variant,
+								false,
+								true,
+								false,
+								colorVariables,
+							);
 							if (!transparentColor) {
 								return;
 							}