terrazzo-plugin-figma-json 0.1.1 → 0.2.0

package/README.md

@@ -81,6 +81,9 @@ Without a resolver, all tokens are output to a single file (`tokens.figma.json`
 | `fontWeight` | Number or String | Values pass through with validation |
 | `number` | Number or Boolean | Numbers pass through; use `com.figma.type: "boolean"` for booleans |
 | `typography` | Split tokens | Split into fontFamily, fontSize, fontWeight, lineHeight, letterSpacing |
+| `shadow` | Split tokens | Split into color, offsetX, offsetY, blur, spread; indexed for multiple layers (`inset` not applicable in Figma) |
+| `border` | Split tokens (partial) | Split into color, width (`style` not applicable in Figma) |
+| `gradient` | Split tokens (partial) | Stop colors extracted (`position` not applicable in Figma) |
 
 ### Typography Token Splitting
 
@@ -121,11 +124,113 @@ Figma doesn't support composite typography tokens, so they're automatically spli
 
 Note: `lineHeight` is converted from a unitless multiplier to absolute px (see [Figma Limitations](#figma-limitations)).
 
+### Shadow Token Splitting
+
+Shadow tokens are split into individual sub-tokens. Array shadows (multiple layers) use indexed prefixes.
+
+**Input:**
+```json
+{
+  "shadow": {
+    "$type": "shadow",
+    "medium": {
+      "$value": {
+        "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.2 },
+        "offsetX": { "value": 0, "unit": "px" },
+        "offsetY": { "value": 4, "unit": "px" },
+        "blur": { "value": 8, "unit": "px" },
+        "spread": { "value": 0, "unit": "px" }
+      }
+    }
+  }
+}
+```
+
+**Output:**
+```json
+{
+  "shadow": {
+    "medium": {
+      "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.2 } },
+      "offsetX": { "$type": "dimension", "$value": { "value": 0, "unit": "px" } },
+      "offsetY": { "$type": "dimension", "$value": { "value": 4, "unit": "px" } },
+      "blur": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } },
+      "spread": { "$type": "dimension", "$value": { "value": 0, "unit": "px" } }
+    }
+  }
+}
+```
+
+Note: Single shadows produce flat sub-tokens. Multiple shadow layers (arrays with 2+ items) use indexed prefixes (`0.color`, `0.offsetX`, ..., `1.color`, etc.). The `inset` property is dropped since variables cannot be applied to inset shadows in Figma.
+
+### Border Token Splitting (Partial)
+
+Border tokens are partially split — only `color` and `width` are extracted. The `style` property is dropped since variables cannot be applied to border style in Figma.
+
+**Input:**
+```json
+{
+  "border": {
+    "$type": "border",
+    "default": {
+      "$value": {
+        "color": { "colorSpace": "srgb", "components": [0.8, 0.8, 0.8] },
+        "width": { "value": 1, "unit": "px" },
+        "style": "solid"
+      }
+    }
+  }
+}
+```
+
+**Output:**
+```json
+{
+  "border": {
+    "default": {
+      "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.8, 0.8, 0.8], "alpha": 1 } },
+      "width": { "$type": "dimension", "$value": { "value": 1, "unit": "px" } }
+    }
+  }
+}
+```
+
+### Gradient Token Splitting (Partial)
+
+Gradient tokens are partially split — only stop colors are extracted. Stop `position` values are dropped since variables cannot be applied to gradient stop positions in Figma.
+
+**Input:**
+```json
+{
+  "gradient": {
+    "$type": "gradient",
+    "primary": {
+      "$value": [
+        { "color": { "colorSpace": "srgb", "components": [1, 0, 0] }, "position": 0 },
+        { "color": { "colorSpace": "srgb", "components": [0, 0, 1] }, "position": 1 }
+      ]
+    }
+  }
+}
+```
+
+**Output:**
+```json
+{
+  "gradient": {
+    "primary": {
+      "0": { "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 0, 0], "alpha": 1 } } },
+      "1": { "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 0, 1], "alpha": 1 } } }
+    }
+  }
+}
+```
+
 ## Unsupported Token Types
 
 The following DTCG token types are **not supported** by Figma and will be skipped:
 
-- `shadow`, `border`, `gradient`, `transition`, `strokeStyle`, `cubicBezier`
+- `transition`, `strokeStyle`, `cubicBezier`
 
 ## Alias Handling
 

package/dist/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AASzD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAChD,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACjD,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAsSD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,aAAa,EACb,OAAO,EACP,SAAS,EACT,kBAAyB,EACzB,QAAQ,GACT,EAAE,YAAY,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAqOpC"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AASzD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAChD,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACjD,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAsSD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,aAAa,EACb,OAAO,EACP,SAAS,EACT,kBAAyB,EACzB,QAAQ,GACT,EAAE,YAAY,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CA6OpC"}

package/dist/constants.d.ts

@@ -15,12 +15,12 @@ export declare const INTERNAL_KEYS: {
 /**
  * Token types supported by Figma.
  */
-export declare const SUPPORTED_TYPES: readonly ["color", "dimension", "duration", "fontFamily", "fontWeight", "number", "typography"];
+export declare const SUPPORTED_TYPES: readonly ["color", "dimension", "duration", "fontFamily", "fontWeight", "number", "typography", "shadow", "border", "gradient"];
 export type SupportedType = (typeof SUPPORTED_TYPES)[number];
 /**
  * Token types that are not supported by Figma and will be dropped with a warning.
  */
-export declare const UNSUPPORTED_TYPES: readonly ["shadow", "border", "gradient", "transition", "strokeStyle", "cubicBezier"];
+export declare const UNSUPPORTED_TYPES: readonly ["transition", "strokeStyle", "cubicBezier"];
 export type UnsupportedType = (typeof UNSUPPORTED_TYPES)[number];
 /**
  * Color spaces that Figma natively supports.

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,+BAA+B,CAAC;AAExD,eAAO,MAAM,SAAS,eAAe,CAAC;AAEtC;;;GAGG;AACH,eAAO,MAAM,aAAa;IACxB,2CAA2C;;IAE3C,8DAA8D;;IAE9D,oCAAoC;;CAE5B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe,iGAQlB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D;;GAEG;AACH,eAAO,MAAM,iBAAiB,uFAAwF,CAAC;AAEvH,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,kBAAkB,0BAA2B,CAAC;AAE3D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,+BAA+B,CAAC;AAExD,eAAO,MAAM,SAAS,eAAe,CAAC;AAEtC;;;GAGG;AACH,eAAO,MAAM,aAAa;IACxB,2CAA2C;;IAE3C,8DAA8D;;IAE9D,oCAAoC;;CAE5B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe,iIAWlB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D;;GAEG;AACH,eAAO,MAAM,iBAAiB,uDAAwD,CAAC;AAEvF,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,kBAAkB,0BAA2B,CAAC;AAE3D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/converters/border.d.ts

@@ -0,0 +1,8 @@
+import type { ConverterContext, ConverterResult } from '../types.js';
+/**
+ * Convert a DTCG border value to Figma-compatible format.
+ * Border tokens are partially split into individual sub-tokens.
+ * Only color and width are supported; style is dropped.
+ */
+export declare function convertBorder(value: unknown, context: ConverterContext): ConverterResult;
+//# sourceMappingURL=border.d.ts.map

package/dist/converters/border.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../src/converters/border.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAY,MAAM,aAAa,CAAC;AAK/E;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAqExF"}

package/dist/converters/gradient.d.ts

@@ -0,0 +1,8 @@
+import type { ConverterContext, ConverterResult } from '../types.js';
+/**
+ * Convert a DTCG gradient value to Figma-compatible format.
+ * Gradient tokens are partially split: only stop colors are extracted.
+ * Stop positions are dropped since they can't be represented as Figma variables.
+ */
+export declare function convertGradient(value: unknown, context: ConverterContext): ConverterResult;
+//# sourceMappingURL=gradient.d.ts.map

package/dist/converters/gradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../src/converters/gradient.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAY,MAAM,aAAa,CAAC;AAI/E;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,GAAG,eAAe,CA2D1F"}

package/dist/converters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/converters/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAgC,KAAK,aAAa,EAAqB,MAAM,iBAAiB,CAAC;AACtG,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AASrE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,KAAK,eAAe,CAAC;AAevF;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,aAAa,CAEnE;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAEvD;AA6CD;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAgE/G"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/converters/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAgC,KAAK,aAAa,EAAqB,MAAM,iBAAiB,CAAC;AACtG,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAYrE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,KAAK,eAAe,CAAC;AAkBvF;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,aAAa,CAEnE;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAEvD;AA6CD;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAgE/G"}

package/dist/converters/shadow.d.ts

@@ -0,0 +1,11 @@
+import type { ConverterContext, ConverterResult } from '../types.js';
+/**
+ * Convert a DTCG shadow value to Figma-compatible format.
+ * Shadow tokens are split into individual sub-tokens since Figma
+ * doesn't support the composite shadow type.
+ *
+ * Single shadows produce: color, offsetX, offsetY, blur, spread
+ * Multiple shadow layers produce indexed sub-tokens: 0.color, 0.offsetX, ..., 1.color, etc.
+ */
+export declare function convertShadow(value: unknown, context: ConverterContext): ConverterResult;
+//# sourceMappingURL=shadow.d.ts.map

package/dist/converters/shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../src/converters/shadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAA6B,MAAM,aAAa,CAAC;AAiIhG;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,GAAG,eAAe,CA0CxF"}

package/dist/converters/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/converters/typography.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAY,MAAM,aAAa,CAAC;AA+C/E;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAiI5F"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/converters/typography.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAY,MAAM,aAAa,CAAC;AAO/E;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAiI5F"}

package/dist/index.js

@@ -23,15 +23,15 @@ const SUPPORTED_TYPES = [
 	"fontFamily",
 	"fontWeight",
 	"number",
-	"typography"
+	"typography",
+	"shadow",
+	"border",
+	"gradient"
 ];
 /**
 * Token types that are not supported by Figma and will be dropped with a warning.
 */
 const UNSUPPORTED_TYPES = [
-	"shadow",
-	"border",
-	"gradient",
 	"transition",
 	"strokeStyle",
 	"cubicBezier"
@@ -154,6 +154,44 @@ function isDTCGDurationValue(value) {
 function isDTCGTypographyValue(value) {
 	return value !== null && typeof value === "object" && !Array.isArray(value);
 }
+/**
+* Type guard to validate DTCGShadowValue structure.
+* Accepts a single shadow object or an array of shadow objects.
+*/
+function isDTCGShadowValue(value) {
+	if (Array.isArray(value)) return value.length > 0 && value.every((item) => item !== null && typeof item === "object");
+	return value !== null && typeof value === "object";
+}
+/**
+* Type guard to validate DTCGBorderValue structure.
+* Only checks that it's an object - individual properties are validated during conversion.
+*/
+function isDTCGBorderValue(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+/**
+* Type guard to validate DTCGGradientValue structure.
+* Checks that it's an array of gradient stops.
+*/
+function isDTCGGradientValue(value) {
+	return Array.isArray(value) && value.length > 0 && value.every((item) => item !== null && typeof item === "object");
+}
+/**
+* Get the correct alias reference for a composite sub-property.
+* When a composite property references another composite token of the same type,
+* the alias needs to point to the corresponding sub-token.
+*
+* @param aliasOf - The referenced token ID, or undefined if not an alias
+* @param propertyName - The sub-property name (e.g., fontFamily, color, offsetX)
+* @param allTokens - Map of all tokens for type lookup
+* @param parentType - The composite token type (e.g., 'typography', 'shadow', 'border', 'gradient')
+* @returns Adjusted alias target, or undefined if not an alias
+*/
+function getSubTokenAlias(aliasOf, propertyName, allTokens, parentType) {
+	if (!aliasOf) return;
+	if ((allTokens?.[aliasOf])?.$type === parentType) return `${aliasOf}.${propertyName}`;
+	return aliasOf;
+}
 
 //#endregion
 //#region src/build.ts
@@ -349,12 +387,18 @@ function buildFigmaJson({ getTransforms, exclude, tokenName, preserveReferences
 		if (transforms.length === 0) return /* @__PURE__ */ new Map();
 		const output = {};
 		for (const transform of transforms) {
-			if (!transform.token) continue;
-			const tokenId = transform.token.id;
-			if (shouldExclude(tokenId)) continue;
-			const outputName = tokenName?.(transform.token) ?? tokenId;
 			const parsedValue = parseTransformValue(transform.value);
 			if (!parsedValue) continue;
+			let tokenId;
+			let outputName;
+			if (transform.token) {
+				tokenId = transform.token.id;
+				outputName = tokenName?.(transform.token) ?? tokenId;
+			} else if (parsedValue[INTERNAL_KEYS.SPLIT_FROM] && parsedValue[INTERNAL_KEYS.TOKEN_ID]) {
+				tokenId = parsedValue[INTERNAL_KEYS.TOKEN_ID];
+				outputName = tokenId;
+			} else continue;
+			if (shouldExclude(tokenId)) continue;
 			removeInternalMetadata(parsedValue);
 			setNestedProperty(output, outputName, parsedValue);
 		}
@@ -666,6 +710,77 @@ function convertDimension(value, context) {
 	};
 }
 
+//#endregion
+//#region src/converters/border.ts
+/**
+* Convert a DTCG border value to Figma-compatible format.
+* Border tokens are partially split into individual sub-tokens.
+* Only color and width are supported; style is dropped.
+*/
+function convertBorder(value, context) {
+	if (!isDTCGBorderValue(value)) {
+		context.logger.warn({
+			group: "plugin",
+			label: PLUGIN_NAME,
+			message: `Token "${context.tokenId}" has invalid border value: expected object, got ${typeof value}`
+		});
+		return {
+			value: void 0,
+			skip: true
+		};
+	}
+	const border = value;
+	const partialAliasOf = context.partialAliasOf;
+	const subTokens = [];
+	if (border.color !== void 0) {
+		const aliasOf = getSubTokenAlias(partialAliasOf?.color, "color", context.allTokens, "border");
+		const result = convertColor(border.color, {
+			...context,
+			tokenId: `${context.tokenId}.color`
+		});
+		if (!result.skip) subTokens.push({
+			idSuffix: "color",
+			$type: "color",
+			value: result.value,
+			aliasOf
+		});
+	}
+	if (border.width !== void 0) {
+		const aliasOf = getSubTokenAlias(partialAliasOf?.width, "width", context.allTokens, "border");
+		const result = convertDimension(border.width, {
+			...context,
+			tokenId: `${context.tokenId}.width`
+		});
+		if (!result.skip) subTokens.push({
+			idSuffix: "width",
+			$type: "dimension",
+			value: result.value,
+			aliasOf
+		});
+	}
+	if (border.style !== void 0) context.logger.info({
+		group: "plugin",
+		label: PLUGIN_NAME,
+		message: `Token "${context.tokenId}" border "style" property dropped (variables cannot be applied to border style in Figma)`
+	});
+	if (subTokens.length === 0) {
+		context.logger.warn({
+			group: "plugin",
+			label: PLUGIN_NAME,
+			message: `Token "${context.tokenId}" border value has no valid sub-properties`
+		});
+		return {
+			value: void 0,
+			skip: true
+		};
+	}
+	return {
+		value: void 0,
+		split: true,
+		subTokens
+	};
+}
+
 //#endregion
 //#region src/converters/duration.ts
 /**
@@ -865,6 +980,69 @@ function convertFontWeight(value, context) {
 	};
 }
 
+//#endregion
+//#region src/converters/gradient.ts
+/**
+* Convert a DTCG gradient value to Figma-compatible format.
+* Gradient tokens are partially split: only stop colors are extracted.
+* Stop positions are dropped since they can't be represented as Figma variables.
+*/
+function convertGradient(value, context) {
+	if (!isDTCGGradientValue(value)) {
+		context.logger.warn({
+			group: "plugin",
+			label: PLUGIN_NAME,
+			message: `Token "${context.tokenId}" has invalid gradient value: expected array of gradient stops, got ${typeof value}`
+		});
+		return {
+			value: void 0,
+			skip: true
+		};
+	}
+	const partialAliasOf = context.partialAliasOf;
+	const subTokens = [];
+	let hasPosition = false;
+	for (let i = 0; i < value.length; i++) {
+		const stop = value[i];
+		if (stop.color !== void 0) {
+			const aliasKey = `${i}.color`;
+			const aliasOf = getSubTokenAlias(partialAliasOf?.[aliasKey], aliasKey, context.allTokens, "gradient");
+			const result = convertColor(stop.color, {
+				...context,
+				tokenId: `${context.tokenId}.${aliasKey}`
+			});
+			if (!result.skip) subTokens.push({
+				idSuffix: aliasKey,
+				$type: "color",
+				value: result.value,
+				aliasOf
+			});
+		}
+		if (stop.position !== void 0) hasPosition = true;
+	}
+	if (hasPosition) context.logger.info({
+		group: "plugin",
+		label: PLUGIN_NAME,
+		message: `Token "${context.tokenId}" gradient "position" values dropped (variables cannot be applied to gradient stop positions in Figma)`
+	});
+	if (subTokens.length === 0) {
+		context.logger.warn({
+			group: "plugin",
+			label: PLUGIN_NAME,
+			message: `Token "${context.tokenId}" gradient value has no valid color stops`
+		});
+		return {
+			value: void 0,
+			skip: true
+		};
+	}
+	return {
+		value: void 0,
+		split: true,
+		subTokens
+	};
+}
+
 //#endregion
 //#region src/converters/number.ts
 /**
@@ -908,6 +1086,148 @@ function convertNumber(value, context) {
 	return { value };
 }
 
+//#endregion
+//#region src/converters/shadow.ts
+/**
+* Convert a single shadow object's properties into sub-tokens.
+*
+* @param shadow - The shadow value object
+* @param prefix - Prefix for sub-token IDs (empty for single, "0." for arrays)
+* @param context - Converter context
+* @param partialAliasOf - Alias information for sub-properties
+* @returns Array of sub-tokens
+*/
+function convertShadowLayer(shadow, prefix, context, partialAliasOf) {
+	const subTokens = [];
+	if (shadow.color !== void 0) {
+		const aliasKey = `${prefix}color`;
+		const aliasOf = getSubTokenAlias(partialAliasOf?.[aliasKey], aliasKey, context.allTokens, "shadow");
+		const result = convertColor(shadow.color, {
+			...context,
+			tokenId: `${context.tokenId}.${aliasKey}`
+		});
+		if (!result.skip) subTokens.push({
+			idSuffix: aliasKey,
+			$type: "color",
+			value: result.value,
+			aliasOf
+		});
+	}
+	if (shadow.offsetX !== void 0) {
+		const aliasKey = `${prefix}offsetX`;
+		const aliasOf = getSubTokenAlias(partialAliasOf?.[aliasKey], aliasKey, context.allTokens, "shadow");
+		const result = convertDimension(shadow.offsetX, {
+			...context,
+			tokenId: `${context.tokenId}.${aliasKey}`
+		});
+		if (!result.skip) subTokens.push({
+			idSuffix: aliasKey,
+			$type: "dimension",
+			value: result.value,
+			aliasOf
+		});
+	}
+	if (shadow.offsetY !== void 0) {
+		const aliasKey = `${prefix}offsetY`;
+		const aliasOf = getSubTokenAlias(partialAliasOf?.[aliasKey], aliasKey, context.allTokens, "shadow");
+		const result = convertDimension(shadow.offsetY, {
+			...context,
+			tokenId: `${context.tokenId}.${aliasKey}`
+		});
+		if (!result.skip) subTokens.push({
+			idSuffix: aliasKey,
+			$type: "dimension",
+			value: result.value,
+			aliasOf
+		});
+	}
+	if (shadow.blur !== void 0) {
+		const aliasKey = `${prefix}blur`;
+		const aliasOf = getSubTokenAlias(partialAliasOf?.[aliasKey], aliasKey, context.allTokens, "shadow");
+		const result = convertDimension(shadow.blur, {
+			...context,
+			tokenId: `${context.tokenId}.${aliasKey}`
+		});
+		if (!result.skip) subTokens.push({
+			idSuffix: aliasKey,
+			$type: "dimension",
+			value: result.value,
+			aliasOf
+		});
+	}
+	if (shadow.spread !== void 0) {
+		const aliasKey = `${prefix}spread`;
+		const aliasOf = getSubTokenAlias(partialAliasOf?.[aliasKey], aliasKey, context.allTokens, "shadow");
+		const result = convertDimension(shadow.spread, {
+			...context,
+			tokenId: `${context.tokenId}.${aliasKey}`
+		});
+		if (!result.skip) subTokens.push({
+			idSuffix: aliasKey,
+			$type: "dimension",
+			value: result.value,
+			aliasOf
+		});
+	}
+	if (shadow.inset !== void 0) context.logger.info({
+		group: "plugin",
+		label: PLUGIN_NAME,
+		message: `Token "${context.tokenId}" shadow "inset" property dropped (variables cannot be applied to inset shadows in Figma)`
+	});
+	return subTokens;
+}
+/**
+* Convert a DTCG shadow value to Figma-compatible format.
+* Shadow tokens are split into individual sub-tokens since Figma
+* doesn't support the composite shadow type.
+*
+* Single shadows produce: color, offsetX, offsetY, blur, spread
+* Multiple shadow layers produce indexed sub-tokens: 0.color, 0.offsetX, ..., 1.color, etc.
+*/
+function convertShadow(value, context) {
+	if (!isDTCGShadowValue(value)) {
+		context.logger.warn({
+			group: "plugin",
+			label: PLUGIN_NAME,
+			message: `Token "${context.tokenId}" has invalid shadow value: expected object or array, got ${typeof value}`
+		});
+		return {
+			value: void 0,
+			skip: true
+		};
+	}
+	const partialAliasOf = context.partialAliasOf;
+	const subTokens = [];
+	if (Array.isArray(value)) if (value.length === 1) {
+		const layerTokens = convertShadowLayer(value[0], "", context, partialAliasOf);
+		subTokens.push(...layerTokens);
+	} else for (let i = 0; i < value.length; i++) {
+		const layer = value[i];
+		const layerTokens = convertShadowLayer(layer, `${i}.`, context, partialAliasOf);
+		subTokens.push(...layerTokens);
+	}
+	else {
+		const layerTokens = convertShadowLayer(value, "", context, partialAliasOf);
+		subTokens.push(...layerTokens);
+	}
+	if (subTokens.length === 0) {
+		context.logger.warn({
+			group: "plugin",
+			label: PLUGIN_NAME,
+			message: `Token "${context.tokenId}" shadow value has no valid sub-properties`
+		});
+		return {
+			value: void 0,
+			skip: true
+		};
+	}
+	return {
+		value: void 0,
+		split: true,
+		subTokens
+	};
+}
+
 //#endregion
 //#region src/converters/line-height.ts
 /**
@@ -1002,30 +1322,6 @@ function convertLineHeight(value, context) {
 //#endregion
 //#region src/converters/typography.ts
 /**
-* Get the correct alias reference for a typography sub-property.
-* When a typography property references another typography token,
-* the alias needs to point to the corresponding sub-token.
-*
-* @param aliasOf - The referenced token ID, or undefined if not an alias
-* @param propertyName - The sub-property name (fontFamily, fontSize, etc.)
-* @param allTokens - Map of all tokens for type lookup
-* @returns Adjusted alias target, or undefined if not an alias
-*
-* @example
-* // If typography.base is a typography token:
-* getSubTokenAlias("typography.base", "fontFamily", tokens)
-* // "typography.base.fontFamily"
-*
-* // If dimension.100 is a primitive:
-* getSubTokenAlias("dimension.100", "fontSize", tokens)
-* // "dimension.100" (unchanged)
-*/
-function getSubTokenAlias(aliasOf, propertyName, allTokens) {
-	if (!aliasOf) return;
-	if ((allTokens?.[aliasOf])?.$type === "typography") return `${aliasOf}.${propertyName}`;
-	return aliasOf;
-}
-/**
 * Convert a DTCG typography value to Figma-compatible format.
 * Typography tokens are split into individual sub-tokens since Figma
 * doesn't support the composite typography type.
@@ -1057,7 +1353,7 @@ function convertTypography(value, context) {
 	const partialAliasOf = context.partialAliasOf;
 	const subTokens = [];
 	if (typography.fontFamily !== void 0) {
-		const aliasOf = getSubTokenAlias(partialAliasOf?.fontFamily, "fontFamily", context.allTokens);
+		const aliasOf = getSubTokenAlias(partialAliasOf?.fontFamily, "fontFamily", context.allTokens, "typography");
 		const result = convertFontFamily(typography.fontFamily, {
 			...context,
 			tokenId: `${context.tokenId}.fontFamily`
@@ -1071,7 +1367,7 @@ function convertTypography(value, context) {
 	}
 	let resolvedFontSize;
 	if (typography.fontSize !== void 0) {
-		const aliasOf = getSubTokenAlias(partialAliasOf?.fontSize, "fontSize", context.allTokens);
+		const aliasOf = getSubTokenAlias(partialAliasOf?.fontSize, "fontSize", context.allTokens, "typography");
 		const result = convertDimension(typography.fontSize, {
 			...context,
 			tokenId: `${context.tokenId}.fontSize`
@@ -1087,7 +1383,7 @@ function convertTypography(value, context) {
 		}
 	}
 	if (typography.fontWeight !== void 0) {
-		const aliasOf = getSubTokenAlias(partialAliasOf?.fontWeight, "fontWeight", context.allTokens);
+		const aliasOf = getSubTokenAlias(partialAliasOf?.fontWeight, "fontWeight", context.allTokens, "typography");
 		const result = convertFontWeight(typography.fontWeight, {
 			...context,
 			tokenId: `${context.tokenId}.fontWeight`
@@ -1112,7 +1408,7 @@ function convertTypography(value, context) {
 		});
 	}
 	if (typography.letterSpacing !== void 0) {
-		const aliasOf = getSubTokenAlias(partialAliasOf?.letterSpacing, "letterSpacing", context.allTokens);
+		const aliasOf = getSubTokenAlias(partialAliasOf?.letterSpacing, "letterSpacing", context.allTokens, "typography");
 		const result = convertDimension(typography.letterSpacing, {
 			...context,
 			tokenId: `${context.tokenId}.letterSpacing`
@@ -1154,7 +1450,10 @@ const converters = {
 	fontFamily: convertFontFamily,
 	fontWeight: convertFontWeight,
 	number: convertNumber,
-	typography: convertTypography
+	typography: convertTypography,
+	shadow: convertShadow,
+	border: convertBorder,
+	gradient: convertGradient
 };
 /**
 * Check if a token type is supported by Figma.
@@ -1450,5 +1749,5 @@ function figmaJsonPlugin(options) {
 }
 
 //#endregion
-export { FIGMA_COLOR_SPACES, FORMAT_ID, INTERNAL_KEYS, PLUGIN_NAME, SUPPORTED_TYPES, UNSUPPORTED_TYPES, buildDefaultInput, createExcludeMatcher, figmaJsonPlugin as default, getPartialAliasOf, hasValidResolverConfig, isDTCGColorValue, isDTCGDimensionValue, isDTCGDurationValue, isDTCGTypographyValue, parseTransformValue, removeInternalMetadata };
+export { FIGMA_COLOR_SPACES, FORMAT_ID, INTERNAL_KEYS, PLUGIN_NAME, SUPPORTED_TYPES, UNSUPPORTED_TYPES, buildDefaultInput, createExcludeMatcher, figmaJsonPlugin as default, getPartialAliasOf, getSubTokenAlias, hasValidResolverConfig, isDTCGBorderValue, isDTCGColorValue, isDTCGDimensionValue, isDTCGDurationValue, isDTCGGradientValue, isDTCGShadowValue, isDTCGTypographyValue, parseTransformValue, removeInternalMetadata };
 //# sourceMappingURL=index.js.map