@primer/primitives 9.1.2 → 10.0.0-rc.29e661a3

package/dist/build/schemas/tokenName.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tokenName = void 0;
-const zod_1 = require("zod");
-const schemaErrorMessage_1 = require("../utilities/schemaErrorMessage");
-exports.tokenName = zod_1.z.string().refine(name => /(^[a-z0-9][A-Za-z0-9-]*$|^@$)/.test(name), name => ({
-    message: (0, schemaErrorMessage_1.schemaErrorMessage)(`Invalid token name: "${name}"`, 'Token name must be kebab-case or camelCase, and start with a lowercase letter or number and consist only of letters, numbers, and hyphens.'),
+import { z } from 'zod';
+import { schemaErrorMessage } from '../utilities/index.js';
+export const tokenName = z.string().refine(name => /(^[a-z0-9][A-Za-z0-9-]*$|^@$)/.test(name), name => ({
+    message: schemaErrorMessage(`Invalid token name: "${name}"`, 'Token name must be kebab-case or camelCase, and start with a lowercase letter or number and consist only of letters, numbers, and hyphens.'),
 }));

package/dist/build/schemas/tokenType.d.ts

@@ -1,3 +1,3 @@
 import { z } from 'zod';
-import type { TokenType } from './validTokenType';
-export declare const tokenType: ($type: TokenType) => z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "shadow" | "typography" | "duration" | "custom-viewportRange">;
+import type { TokenType } from './validTokenType.js';
+export declare const tokenType: ($type: TokenType) => z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "custom-viewportRange">;

package/dist/build/schemas/tokenType.js

@@ -1,6 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tokenType = void 0;
-const zod_1 = require("zod");
-const tokenType = ($type) => zod_1.z.literal($type);
-exports.tokenType = tokenType;
+import { z } from 'zod';
+export const tokenType = ($type) => z.literal($type);

package/dist/build/schemas/typographyToken.d.ts

@@ -35,25 +35,25 @@ export declare const typographyToken: z.ZodObject<z.objectUtil.extendShape<{
         fontWeight: string | number;
         lineHeight?: string | 0 | undefined;
     }>, z.ZodEffects<z.ZodString, string, string>]>;
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "shadow" | "typography" | "duration" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "custom-viewportRange">;
 }>, "strict", z.ZodTypeAny, {
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "shadow" | "typography" | "duration" | "custom-viewportRange";
     $value: string | {
         fontFamily: string;
         fontSize: string | 0;
         fontWeight: string | number;
         lineHeight?: string | 0 | undefined;
     };
-    deprecated?: string | boolean | undefined;
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "custom-viewportRange";
     $description?: string | undefined;
+    deprecated?: string | boolean | undefined;
 }, {
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "shadow" | "typography" | "duration" | "custom-viewportRange";
     $value: string | {
         fontFamily: string;
         fontSize: string | 0;
         fontWeight: string | number;
         lineHeight?: string | 0 | undefined;
     };
-    deprecated?: string | boolean | undefined;
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "custom-viewportRange";
     $description?: string | undefined;
+    deprecated?: string | boolean | undefined;
 }>;

package/dist/build/schemas/typographyToken.js

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.typographyToken = exports.typographyValue = void 0;
-const zod_1 = require("zod");
-const referenceValue_1 = require("./referenceValue");
-const dimensionValue_1 = require("./dimensionValue");
-const baseToken_1 = require("./baseToken");
-const fontWeightValue_1 = require("./fontWeightValue");
-const tokenType_1 = require("./tokenType");
-exports.typographyValue = zod_1.z.object({
-    fontSize: zod_1.z.union([dimensionValue_1.dimensionValue, referenceValue_1.referenceValue]),
-    lineHeight: zod_1.z.union([dimensionValue_1.dimensionValue, referenceValue_1.referenceValue]).optional(),
-    fontWeight: zod_1.z.union([fontWeightValue_1.fontWeightValue, referenceValue_1.referenceValue]),
-    fontFamily: zod_1.z.union([zod_1.z.string().min(1), referenceValue_1.referenceValue]),
+import { z } from 'zod';
+import { referenceValue } from './referenceValue.js';
+import { dimensionValue } from './dimensionValue.js';
+import { baseToken } from './baseToken.js';
+import { fontWeightValue } from './fontWeightValue.js';
+import { tokenType } from './tokenType.js';
+export const typographyValue = z.object({
+    fontSize: z.union([dimensionValue, referenceValue]),
+    lineHeight: z.union([dimensionValue, referenceValue]).optional(),
+    fontWeight: z.union([fontWeightValue, referenceValue]),
+    fontFamily: z.union([z.string().min(1), referenceValue]),
 });
-exports.typographyToken = baseToken_1.baseToken
+export const typographyToken = baseToken
     .extend({
-    $value: zod_1.z.union([exports.typographyValue, referenceValue_1.referenceValue]),
-    $type: (0, tokenType_1.tokenType)('typography'),
+    $value: z.union([typographyValue, referenceValue]),
+    $type: tokenType('typography'),
 })
     .strict();

package/dist/build/schemas/validTokenType.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateType = void 0;
-const zod_1 = require("zod");
-const joinFriendly_1 = require("../utilities/joinFriendly");
-const schemaErrorMessage_1 = require("../utilities/schemaErrorMessage");
+import { z } from 'zod';
+import { joinFriendly, schemaErrorMessage } from '../utilities/index.js';
 const validTypes = [
     'color',
     'typography',
@@ -19,16 +15,16 @@ const validTypes = [
 ];
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: TODO: fix this
-exports.validateType = zod_1.z.record(zod_1.z.string(), zod_1.z.lazy(() => {
-    return zod_1.z.union([
-        zod_1.z
+export const validateType = z.record(z.string(), z.lazy(() => {
+    return z.union([
+        z
             .object({
-            $value: zod_1.z.any(),
-            $type: zod_1.z.string().refine(type => validTypes.includes(type), val => ({
-                message: (0, schemaErrorMessage_1.schemaErrorMessage)(`Invalid token $type: "${val}"`, `Must be one of the following: ${(0, joinFriendly_1.joinFriendly)([...validTypes], 'or')}`),
+            $value: z.any(),
+            $type: z.string().refine(type => validTypes.includes(type), val => ({
+                message: schemaErrorMessage(`Invalid token $type: "${val}"`, `Must be one of the following: ${joinFriendly([...validTypes], 'or')}`),
             })),
         })
             .required(),
-        exports.validateType,
+        validateType,
     ]);
 }));

package/dist/build/schemas/viewportRangeToken.d.ts

@@ -4,15 +4,15 @@ export declare const viewportRangeToken: z.ZodObject<z.objectUtil.extendShape<{
     deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
 }, {
     $value: z.ZodUnion<[z.ZodString, z.ZodEffects<z.ZodString, string, string>]>;
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "shadow" | "typography" | "duration" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "custom-viewportRange">;
 }>, "strict", z.ZodTypeAny, {
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "shadow" | "typography" | "duration" | "custom-viewportRange";
     $value: string;
-    deprecated?: string | boolean | undefined;
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "custom-viewportRange";
     $description?: string | undefined;
+    deprecated?: string | boolean | undefined;
 }, {
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "shadow" | "typography" | "duration" | "custom-viewportRange";
     $value: string;
-    deprecated?: string | boolean | undefined;
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "custom-viewportRange";
     $description?: string | undefined;
+    deprecated?: string | boolean | undefined;
 }>;

package/dist/build/schemas/viewportRangeToken.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.viewportRangeToken = void 0;
-const zod_1 = require("zod");
-const baseToken_1 = require("./baseToken");
-const referenceValue_1 = require("./referenceValue");
-const tokenType_1 = require("./tokenType");
-exports.viewportRangeToken = baseToken_1.baseToken
+import { z } from 'zod';
+import { baseToken } from './baseToken.js';
+import { referenceValue } from './referenceValue.js';
+import { tokenType } from './tokenType.js';
+export const viewportRangeToken = baseToken
     .extend({
-    $value: zod_1.z.union([zod_1.z.string(), referenceValue_1.referenceValue]),
-    $type: (0, tokenType_1.tokenType)('custom-viewportRange'),
+    $value: z.union([z.string(), referenceValue]),
+    $type: tokenType('custom-viewportRange'),
 })
     .strict();

package/dist/build/transformers/borderToCss.d.ts

@@ -1,8 +1,8 @@
-import type StyleDictionary from 'style-dictionary';
+import type { Transform } from 'style-dictionary/types';
 /**
  * @description converts w3c border tokens in css border string
- * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @type valueTransformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `border`
  * @transformer returns css border `string`
  */
-export declare const borderToCss: StyleDictionary.Transform;
+export declare const borderToCss: Transform;

package/dist/build/transformers/borderToCss.js

@@ -1,37 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.borderToCss = void 0;
-const isBorder_1 = require("../filters/isBorder");
+import { isBorder } from '../filters/isBorder.js';
 /**
  * checks if all required properties exist on shadow token
  * @param object - BorderTokenValue
  * @returns void or throws error
  */
 const checkForBorderTokenProperties = (border) => {
-    const requiredProperties = ['color', 'width', 'style'];
-    for (const prop of requiredProperties) {
-        if (prop in border === false) {
-            throw new Error(`Missing propery: ${prop} on border token ${JSON.stringify(border)}`);
-        }
+    if ('color' in border && 'width' in border && 'style' in border) {
+        return true;
     }
+    return false;
 };
 /**
  * @description converts w3c border tokens in css border string
- * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @type valueTransformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `border`
  * @transformer returns css border `string`
  */
-exports.borderToCss = {
-    type: `value`,
+export const borderToCss = {
+    name: 'border/css',
+    type: 'value',
     transitive: true,
-    matcher: isBorder_1.isBorder,
-    transformer: ({ value }) => {
-        //
-        checkForBorderTokenProperties(value);
+    filter: isBorder,
+    transform: (token) => {
+        var _a;
+        const value = (_a = token.$value) !== null && _a !== void 0 ? _a : token.value;
         // if value === string it was probably already transformed
         if (typeof value === 'string') {
             return value;
         }
+        //
+        if (!checkForBorderTokenProperties(value)) {
+            throw new Error(`Invalid border token property ${JSON.stringify(value)}. Must be an object with color, width and style properties.`);
+        }
         /* color | style | width */
         return `${value.color} ${value.style} ${value.width}`;
     },

package/dist/build/transformers/colorToHex.d.ts

@@ -1,8 +1,8 @@
-import type StyleDictionary from 'style-dictionary';
+import type { Transform } from 'style-dictionary/types';
 /**
  * @description converts color tokens value to `hex6` or `hex8`
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `color`
  * @transformer returns a `hex` string
  */
-export declare const colorToHex: StyleDictionary.Transform;
+export declare const colorToHex: Transform;

package/dist/build/transformers/colorToHex.js

@@ -1,26 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorToHex = void 0;
-const color2k_1 = require("color2k");
-const filters_1 = require("../filters");
-const getTokenValue_1 = require("./utilities/getTokenValue");
-const alpha_1 = require("./utilities/alpha");
+import { toHex } from 'color2k';
+import { isColor } from '../filters/index.js';
+import { getTokenValue } from './utilities/getTokenValue.js';
+import { alpha } from './utilities/alpha.js';
 /**
  * @description converts color tokens value to `hex6` or `hex8`
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `color`
  * @transformer returns a `hex` string
  */
-exports.colorToHex = {
-    type: `value`,
+export const colorToHex = {
+    name: 'color/hex',
+    type: 'value',
     transitive: true,
-    matcher: filters_1.isColor,
-    transformer: (token) => {
+    filter: isColor,
+    transform: (token) => {
         var _a, _b;
         const alphaValue = (_a = token.alpha) !== null && _a !== void 0 ? _a : (_b = token.$extensions) === null || _b === void 0 ? void 0 : _b.alpha;
         if (alphaValue === null || alphaValue === undefined) {
-            return (0, color2k_1.toHex)((0, getTokenValue_1.getTokenValue)(token));
+            return toHex(getTokenValue(token));
         }
-        return (0, color2k_1.toHex)((0, alpha_1.alpha)((0, getTokenValue_1.getTokenValue)(token), alphaValue, token));
+        return toHex(alpha(getTokenValue(token), alphaValue, token));
     },
 };

package/dist/build/transformers/colorToHexMix.d.ts

@@ -1,8 +1,8 @@
-import type StyleDictionary from 'style-dictionary';
+import type { Transform } from 'style-dictionary/types';
 /**
  * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `color` with an `alpha` property
  * @transformer returns `hex8` string
  */
-export declare const colorToHexMix: StyleDictionary.Transform;
+export declare const colorToHexMix: Transform;

package/dist/build/transformers/colorToHexMix.js

@@ -1,25 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorToHexMix = void 0;
-const color2k_1 = require("color2k");
-const filters_1 = require("../filters");
-const getTokenValue_1 = require("./utilities/getTokenValue");
-const mix_1 = __importDefault(require("./utilities/mix"));
+import { toHex } from 'color2k';
+import { isColorWithMix } from '../filters/index.js';
+import { getTokenValue } from './utilities/getTokenValue.js';
+import mix from './utilities/mix.js';
 /**
  * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `color` with an `alpha` property
  * @transformer returns `hex8` string
  */
-exports.colorToHexMix = {
-    type: `value`,
+export const colorToHexMix = {
+    name: 'color/hexMix',
+    type: 'value',
     transitive: true,
-    matcher: filters_1.isColorWithMix,
-    transformer: (token) => {
+    filter: isColorWithMix,
+    transform: (token) => {
         var _a, _b;
-        return (0, color2k_1.toHex)((0, mix_1.default)((0, getTokenValue_1.getTokenValue)(token), ((_a = token.mix) === null || _a === void 0 ? void 0 : _a.color) || (0, getTokenValue_1.getTokenValue)(token), ((_b = token.mix) === null || _b === void 0 ? void 0 : _b.weight) || 0));
+        return toHex(mix(getTokenValue(token), ((_a = token.mix) === null || _a === void 0 ? void 0 : _a.color) || getTokenValue(token), ((_b = token.mix) === null || _b === void 0 ? void 0 : _b.weight) || 0));
     },
 };

package/dist/build/transformers/colorToRgbAlpha.d.ts

@@ -1,8 +1,8 @@
-import type StyleDictionary from 'style-dictionary';
+import type { Transform } from 'style-dictionary/types';
 /**
  * @description replaces tokens value with `rgba` color using the tokens `alpha` property to specify the value used for alpha
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `color` with an `alpha` property
  * @transformer returns `rgba` string
  */
-export declare const colorToRgbAlpha: StyleDictionary.Transform;
+export declare const colorToRgbAlpha: Transform;

package/dist/build/transformers/colorToRgbAlpha.js

@@ -1,22 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorToRgbAlpha = void 0;
-const filters_1 = require("../filters");
-const alpha_1 = require("./utilities/alpha");
-const getTokenValue_1 = require("./utilities/getTokenValue");
+import { isColorWithAlpha } from '../filters/index.js';
+import { alpha } from './utilities/alpha.js';
+import { getTokenValue } from './utilities/getTokenValue.js';
 /**
  * @description replaces tokens value with `rgba` color using the tokens `alpha` property to specify the value used for alpha
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `color` with an `alpha` property
  * @transformer returns `rgba` string
  */
-exports.colorToRgbAlpha = {
-    type: `value`,
+export const colorToRgbAlpha = {
+    name: 'color/rgbAlpha',
+    type: 'value',
     transitive: true,
-    matcher: filters_1.isColorWithAlpha,
-    transformer: (token) => {
+    filter: isColorWithAlpha,
+    transform: (token) => {
         if (token.alpha === null)
-            return (0, getTokenValue_1.getTokenValue)(token);
-        return (0, alpha_1.alpha)((0, getTokenValue_1.getTokenValue)(token), token.alpha, token);
+            return getTokenValue(token);
+        return alpha(getTokenValue(token), token.alpha, token);
     },
 };

package/dist/build/transformers/colorToRgbaFloat.d.ts

@@ -1,8 +1,8 @@
-import type StyleDictionary from 'style-dictionary';
+import type { Transform } from 'style-dictionary/types';
 /**
  * @description converts color tokens rgba float with values from 0 - 1
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `color`
  * @transformer returns a `rgb` float object
  */
-export declare const colorToRgbaFloat: StyleDictionary.Transform;
+export declare const colorToRgbaFloat: Transform;

package/dist/build/transformers/colorToRgbaFloat.js

@@ -1,34 +1,28 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorToRgbaFloat = void 0;
-const color2k_1 = require("color2k");
-const filters_1 = require("../filters");
-const getTokenValue_1 = require("./utilities/getTokenValue");
-const rgbaFloatToHex_1 = require("./utilities/rgbaFloatToHex");
-const mix_1 = __importDefault(require("./utilities/mix"));
-const hexToRgbaFloat_1 = require("./utilities/hexToRgbaFloat");
-const isRgbaFloat_1 = require("./utilities/isRgbaFloat");
-const toRgbaFloat = (token, alpha) => {
+import { toHex } from 'color2k';
+import { isColor } from '../filters/index.js';
+import { getTokenValue } from './utilities/getTokenValue.js';
+import { rgbaFloatToHex } from './utilities/rgbaFloatToHex.js';
+import mix from './utilities/mix.js';
+import { hexToRgbaFloat } from './utilities/hexToRgbaFloat.js';
+import { isRgbaFloat } from './utilities/isRgbaFloat.js';
+const toRgbaFloat = (token, alpha = undefined) => {
     var _a;
-    let tokenValue = (0, getTokenValue_1.getTokenValue)(token);
+    let tokenValue = getTokenValue(token);
     let tokenMixColor = (_a = token.mix) === null || _a === void 0 ? void 0 : _a.color;
     // get hex value from color string
-    if ((0, isRgbaFloat_1.isRgbaFloat)(tokenValue)) {
-        tokenValue = (0, rgbaFloatToHex_1.rgbaFloatToHex)(tokenValue, false);
+    if (isRgbaFloat(tokenValue)) {
+        tokenValue = rgbaFloatToHex(tokenValue, false);
     }
-    if (tokenMixColor && (0, isRgbaFloat_1.isRgbaFloat)(tokenMixColor)) {
-        tokenMixColor = (0, rgbaFloatToHex_1.rgbaFloatToHex)(tokenMixColor, false);
+    if (tokenMixColor && isRgbaFloat(tokenMixColor)) {
+        tokenMixColor = rgbaFloatToHex(tokenMixColor, false);
     }
-    let hex = (0, color2k_1.toHex)(tokenValue);
+    let hex = toHex(tokenValue);
     // mix color with mix color and weight
     if (token.mix && token.mix.color && token.mix.weight) {
-        hex = (0, color2k_1.toHex)((0, mix_1.default)(tokenValue, tokenMixColor, token.mix.weight));
+        hex = toHex(mix(tokenValue, tokenMixColor, token.mix.weight));
     }
     // return color as RgbaFloat
-    return (0, hexToRgbaFloat_1.hexToRgbaFloat)(hex, alpha);
+    return hexToRgbaFloat(hex, alpha);
 };
 /**
  * @description converts color tokens rgba float with values from 0 - 1
@@ -36,14 +30,16 @@ const toRgbaFloat = (token, alpha) => {
  * @matcher matches all tokens of $type `color`
  * @transformer returns a `rgb` float object
  */
-exports.colorToRgbaFloat = {
-    type: `value`,
+export const colorToRgbaFloat = {
+    name: 'color/rgbaFloat',
+    type: 'value',
     transitive: true,
-    matcher: filters_1.isColor,
-    transformer: (token) => {
+    filter: isColor,
+    transform: (token) => {
+        const value = getTokenValue(token);
         // skip if value is already rgb float
-        if ((0, isRgbaFloat_1.isRgbaFloat)(token.value) && !('mix' in token) && !('alpha' in token))
-            return token.value;
+        if (isRgbaFloat(value) && !('mix' in token) && !('alpha' in token))
+            return value;
         // convert hex or rgb values to rgba float
         return toRgbaFloat(token, token.alpha);
     },

package/dist/build/transformers/dimensionToPixelUnitless.d.ts

@@ -1,8 +1,8 @@
-import type StyleDictionary from 'style-dictionary';
+import type { Transform } from 'style-dictionary/types';
 /**
  * @description converts dimension tokens value to pixel value without unit, ignores `em` as they are relative to the font size of the parent element
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `dimension`
  * @transformer returns a float number
  */
-export declare const dimensionToPixelUnitless: StyleDictionary.Transform;
+export declare const dimensionToPixelUnitless: Transform;

package/dist/build/transformers/dimensionToPixelUnitless.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dimensionToPixelUnitless = void 0;
-const filters_1 = require("../filters");
+import { isDimension } from '../filters/index.js';
 /**
  * @description base font size from options or 16
  * @param options
@@ -26,25 +23,27 @@ const hasUnit = (value, unit) => {
  * @matcher matches all tokens of $type `dimension`
  * @transformer returns a float number
  */
-exports.dimensionToPixelUnitless = {
-    type: `value`,
+export const dimensionToPixelUnitless = {
+    name: 'dimension/pixelUnitless',
+    type: 'value',
     transitive: true,
-    matcher: filters_1.isDimension,
-    transformer: (token, options) => {
-        const baseFont = getBasePxFontSize(options);
-        const floatVal = parseFloat(token.value);
+    filter: isDimension,
+    transform: (token, config, options) => {
+        const valueProp = options.usesDtcg ? '$value' : 'value';
+        const baseFont = getBasePxFontSize(config);
+        const floatVal = parseFloat(token[valueProp]);
         if (isNaN(floatVal)) {
-            throw new Error(`Invalid dimension token: '${token.name}: ${token.value}' is not valid and cannot be transform to 'float' \n`);
+            throw new Error(`Invalid dimension token: '${token.path.join('.')}: ${token[valueProp]}' is not valid and cannot be transform to 'float' \n`);
         }
         if (floatVal === 0) {
             return 0;
         }
-        if (hasUnit(token.value, 'rem')) {
+        if (hasUnit(token[valueProp], 'rem')) {
             return floatVal * baseFont;
         }
-        if (hasUnit(token.value, 'px')) {
+        if (hasUnit(token[valueProp], 'px')) {
             return floatVal;
         }
-        return token.value;
+        return token[valueProp];
     },
 };

package/dist/build/transformers/dimensionToRem.d.ts

@@ -1,8 +1,8 @@
-import type StyleDictionary from 'style-dictionary';
+import type { Transform } from 'style-dictionary/types';
 /**
  * @description converts dimension tokens value to `rem`, ignores `em` as they are relative to the font size of the parent element
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `dimension`
  * @transformer returns a `rem` string
  */
-export declare const dimensionToRem: StyleDictionary.Transform;
+export declare const dimensionToRem: Transform;

package/dist/build/transformers/dimensionToRem.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dimensionToRem = void 0;
-const filters_1 = require("../filters");
+import { isDimension } from '../filters/index.js';
 /**
  * @description base font size from options or 16
  * @param options
@@ -26,21 +23,23 @@ const hasUnit = (value, unit) => {
  * @matcher matches all tokens of $type `dimension`
  * @transformer returns a `rem` string
  */
-exports.dimensionToRem = {
-    type: `value`,
+export const dimensionToRem = {
+    name: 'dimension/rem',
+    type: 'value',
     transitive: true,
-    matcher: filters_1.isDimension,
-    transformer: (token, options) => {
-        const baseFont = getBasePxFontSize(options);
-        const floatVal = parseFloat(token.value);
+    filter: isDimension,
+    transform: (token, config, options) => {
+        const valueProp = options.usesDtcg ? '$value' : 'value';
+        const baseFont = getBasePxFontSize(config);
+        const floatVal = parseFloat(token[valueProp]);
         if (isNaN(floatVal)) {
-            throw new Error(`Invalid dimension token: '${token.name}: ${token.value}' is not valid and cannot be transform to 'rem' \n`);
+            throw new Error(`Invalid dimension token: '${token.name}: ${token[valueProp]}' is not valid and cannot be transform to 'rem' \n`);
         }
         if (floatVal === 0) {
             return '0';
         }
-        if (hasUnit(token.value, 'rem') || hasUnit(token.value, 'em')) {
-            return token.value;
+        if (hasUnit(token[valueProp], 'rem') || hasUnit(token[valueProp], 'em')) {
+            return token[valueProp];
         }
         return `${floatVal / baseFont}rem`;
     },

package/dist/build/transformers/dimensionToRemPxArray.d.ts

@@ -1,8 +1,8 @@
-import type StyleDictionary from 'style-dictionary';
+import type { Transform } from 'style-dictionary/types';
 /**
  * @description converts dimension tokens value to `rem`, ignores `em` as they are relative to the font size of the parent element
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `dimension`
  * @transformer returns an array with the `rem` and `pixel` string
  */
-export declare const dimensionToRemPxArray: StyleDictionary.Transform;
+export declare const dimensionToRemPxArray: Transform;