@primer/primitives 10.0.0-rc.fd912e08 → 10.0.0

package/dist/build/schemas/scopes.js

@@ -0,0 +1,29 @@
+import { z } from 'zod';
+import { joinFriendly, schemaErrorMessage } from '../utilities/index.js';
+const validScopes = [
+    'all',
+    'bgColor',
+    'fgColor',
+    'borderColor',
+    'borderWidth',
+    'size',
+    'gap',
+    'radius',
+    'effectColor',
+    'effectFloat',
+    'opacity',
+    'fontFamily',
+    'fontStyle',
+    'fontWeight',
+    'fontSize',
+    'lineHeight',
+    'letterSpacing',
+    'paragraphSpacing',
+    'paragraphIndent',
+];
+export const scopes = (scopeSubset) => {
+    const scopeArray = scopeSubset !== null && scopeSubset !== void 0 ? scopeSubset : validScopes;
+    return z.array(z.string()).refine(value => value.every(item => scopeArray.includes(item)), value => ({
+        message: schemaErrorMessage(`Invalid scope: "${value}"`, `Valid scopes are: ${joinFriendly(scopeArray)}`),
+    }));
+};

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

@@ -0,0 +1,164 @@
+import { z } from 'zod';
+export declare const shadowValue: z.ZodObject<{
+    color: z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>;
+    alpha: z.ZodUnion<[z.ZodEffects<z.ZodAny, any, any>, z.ZodEffects<z.ZodString, string, string>]>;
+    offsetX: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+    offsetY: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+    blur: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+    spread: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+    inset: z.ZodOptional<z.ZodBoolean>;
+}, "strict", z.ZodTypeAny, {
+    color: string;
+    blur: string | 0;
+    offsetX: string | 0;
+    offsetY: string | 0;
+    spread: string | 0;
+    alpha?: any;
+    inset?: boolean | undefined;
+}, {
+    color: string;
+    blur: string | 0;
+    offsetX: string | 0;
+    offsetY: string | 0;
+    spread: string | 0;
+    alpha?: any;
+    inset?: boolean | undefined;
+}>;
+export declare const shadowToken: z.ZodObject<z.objectUtil.extendShape<{
+    $description: z.ZodOptional<z.ZodString>;
+    $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
+}, {
+    $value: z.ZodUnion<[z.ZodObject<{
+        color: z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>;
+        alpha: z.ZodUnion<[z.ZodEffects<z.ZodAny, any, any>, z.ZodEffects<z.ZodString, string, string>]>;
+        offsetX: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+        offsetY: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+        blur: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+        spread: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+        inset: z.ZodOptional<z.ZodBoolean>;
+    }, "strict", z.ZodTypeAny, {
+        color: string;
+        blur: string | 0;
+        offsetX: string | 0;
+        offsetY: string | 0;
+        spread: string | 0;
+        alpha?: any;
+        inset?: boolean | undefined;
+    }, {
+        color: string;
+        blur: string | 0;
+        offsetX: string | 0;
+        offsetY: string | 0;
+        spread: string | 0;
+        alpha?: any;
+        inset?: boolean | undefined;
+    }>, z.ZodArray<z.ZodObject<{
+        color: z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>;
+        alpha: z.ZodUnion<[z.ZodEffects<z.ZodAny, any, any>, z.ZodEffects<z.ZodString, string, string>]>;
+        offsetX: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+        offsetY: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+        blur: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+        spread: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+        inset: z.ZodOptional<z.ZodBoolean>;
+    }, "strict", z.ZodTypeAny, {
+        color: string;
+        blur: string | 0;
+        offsetX: string | 0;
+        offsetY: string | 0;
+        spread: string | 0;
+        alpha?: any;
+        inset?: boolean | undefined;
+    }, {
+        color: string;
+        blur: string | 0;
+        offsetX: string | 0;
+        offsetY: string | 0;
+        spread: string | 0;
+        alpha?: any;
+        inset?: boolean | undefined;
+    }>, "many">, z.ZodEffects<z.ZodString, string, string>]>;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $extensions: z.ZodOptional<z.ZodObject<{
+        'org.primer.figma': z.ZodObject<{
+            collection: z.ZodOptional<z.ZodEffects<z.ZodString, string, string>>;
+            modeOverride: z.ZodOptional<z.ZodEffects<z.ZodString, string, string>>;
+            group: z.ZodOptional<z.ZodString>;
+        }, "strict", z.ZodTypeAny, {
+            group?: string | undefined;
+            collection?: string | undefined;
+            modeOverride?: string | undefined;
+        }, {
+            group?: string | undefined;
+            collection?: string | undefined;
+            modeOverride?: string | undefined;
+        }>;
+    }, "strip", z.ZodTypeAny, {
+        'org.primer.figma': {
+            group?: string | undefined;
+            collection?: string | undefined;
+            modeOverride?: string | undefined;
+        };
+    }, {
+        'org.primer.figma': {
+            group?: string | undefined;
+            collection?: string | undefined;
+            modeOverride?: string | undefined;
+        };
+    }>>;
+}>, "strict", z.ZodTypeAny, {
+    $value: string | {
+        color: string;
+        blur: string | 0;
+        offsetX: string | 0;
+        offsetY: string | 0;
+        spread: string | 0;
+        alpha?: any;
+        inset?: boolean | undefined;
+    } | {
+        color: string;
+        blur: string | 0;
+        offsetX: string | 0;
+        offsetY: string | 0;
+        spread: string | 0;
+        alpha?: any;
+        inset?: boolean | undefined;
+    }[];
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+    $extensions?: {
+        'org.primer.figma': {
+            group?: string | undefined;
+            collection?: string | undefined;
+            modeOverride?: string | undefined;
+        };
+    } | undefined;
+}, {
+    $value: string | {
+        color: string;
+        blur: string | 0;
+        offsetX: string | 0;
+        offsetY: string | 0;
+        spread: string | 0;
+        alpha?: any;
+        inset?: boolean | undefined;
+    } | {
+        color: string;
+        blur: string | 0;
+        offsetX: string | 0;
+        offsetY: string | 0;
+        spread: string | 0;
+        alpha?: any;
+        inset?: boolean | undefined;
+    }[];
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+    $extensions?: {
+        'org.primer.figma': {
+            group?: string | undefined;
+            collection?: string | undefined;
+            modeOverride?: string | undefined;
+        };
+    } | undefined;
+}>;

package/dist/build/schemas/shadowToken.js

@@ -0,0 +1,46 @@
+import { z } from 'zod';
+import { baseToken } from './baseToken.js';
+import { referenceValue } from './referenceValue.js';
+import { colorHexValue } from './colorHexValue.js';
+import { alphaValue } from './alphaValue.js';
+import { dimensionValue } from './dimensionValue.js';
+import { tokenType } from './tokenType.js';
+import { collection, mode } from './collections.js';
+export const shadowValue = z
+    .object({
+    color: z.union([colorHexValue, referenceValue]),
+    alpha: z.union([alphaValue, referenceValue]),
+    offsetX: z.union([dimensionValue, referenceValue]),
+    offsetY: z.union([dimensionValue, referenceValue]),
+    blur: z.union([dimensionValue, referenceValue]),
+    spread: z.union([dimensionValue, referenceValue]),
+    inset: z.boolean().optional(),
+})
+    .strict();
+export const shadowToken = baseToken
+    .extend({
+    $value: z.union([shadowValue, z.array(shadowValue), referenceValue]),
+    $type: tokenType('shadow'),
+    $extensions: z
+        .object({
+        'org.primer.figma': z
+            .object({
+            collection: collection(['mode']).optional(),
+            modeOverride: mode([
+                'light',
+                'dark',
+                'dark dimmed',
+                'light high contrast',
+                'dark high contrast',
+                'light colorblind',
+                'dark colorblind',
+                'light tritanopia',
+                'dark tritanopia',
+            ]).optional(),
+            group: z.string().optional(),
+        })
+            .strict(),
+    })
+        .optional(),
+})
+    .strict();

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

@@ -0,0 +1,18 @@
+import { z } from 'zod';
+export declare const stringToken: z.ZodObject<z.objectUtil.extendShape<{
+    $description: z.ZodOptional<z.ZodString>;
+    $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" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+}>, "strict", z.ZodTypeAny, {
+    $value: string;
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}, {
+    $value: string;
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}>;

package/dist/build/schemas/stringToken.js

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+import { baseToken } from './baseToken.js';
+import { referenceValue } from './referenceValue.js';
+import { tokenType } from './tokenType.js';
+export const stringToken = baseToken
+    .extend({
+    $value: z.union([z.string(), referenceValue]),
+    $type: tokenType('string'),
+})
+    .strict();

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

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export declare const tokenName: z.ZodEffects<z.ZodString, string, string>;

package/dist/build/schemas/tokenName.js

@@ -0,0 +1,5 @@
+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

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

package/dist/build/schemas/tokenType.js

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export const tokenType = ($type) => z.literal($type);

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

@@ -0,0 +1,59 @@
+import { z } from 'zod';
+export declare const typographyValue: z.ZodObject<{
+    fontSize: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+    lineHeight: z.ZodOptional<z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>>;
+    fontWeight: z.ZodUnion<[z.ZodEffects<z.ZodNumber, number, number>, z.ZodEffects<z.ZodString, string, string>]>;
+    fontFamily: z.ZodUnion<[z.ZodString, z.ZodEffects<z.ZodString, string, string>]>;
+}, "strip", z.ZodTypeAny, {
+    fontFamily: string;
+    fontSize: string | 0;
+    fontWeight: string | number;
+    lineHeight?: string | 0 | undefined;
+}, {
+    fontFamily: string;
+    fontSize: string | 0;
+    fontWeight: string | number;
+    lineHeight?: string | 0 | undefined;
+}>;
+export declare const typographyToken: z.ZodObject<z.objectUtil.extendShape<{
+    $description: z.ZodOptional<z.ZodString>;
+    $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
+}, {
+    $value: z.ZodUnion<[z.ZodObject<{
+        fontSize: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+        lineHeight: z.ZodOptional<z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>>;
+        fontWeight: z.ZodUnion<[z.ZodEffects<z.ZodNumber, number, number>, z.ZodEffects<z.ZodString, string, string>]>;
+        fontFamily: z.ZodUnion<[z.ZodString, z.ZodEffects<z.ZodString, string, string>]>;
+    }, "strip", z.ZodTypeAny, {
+        fontFamily: string;
+        fontSize: string | 0;
+        fontWeight: string | number;
+        lineHeight?: string | 0 | undefined;
+    }, {
+        fontFamily: string;
+        fontSize: string | 0;
+        fontWeight: string | number;
+        lineHeight?: string | 0 | undefined;
+    }>, z.ZodEffects<z.ZodString, string, string>]>;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+}>, "strict", z.ZodTypeAny, {
+    $value: string | {
+        fontFamily: string;
+        fontSize: string | 0;
+        fontWeight: string | number;
+        lineHeight?: string | 0 | undefined;
+    };
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}, {
+    $value: string | {
+        fontFamily: string;
+        fontSize: string | 0;
+        fontWeight: string | number;
+        lineHeight?: string | 0 | undefined;
+    };
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}>;

package/dist/build/schemas/typographyToken.js

@@ -0,0 +1,18 @@
+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]),
+});
+export const typographyToken = baseToken
+    .extend({
+    $value: z.union([typographyValue, referenceValue]),
+    $type: tokenType('typography'),
+})
+    .strict();

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

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+declare const validTypes: readonly ["color", "cubicBezier", "typography", "dimension", "duration", "border", "shadow", "fontFamily", "fontWeight", "number", "string", "custom-viewportRange"];
+export type TokenType = (typeof validTypes)[number];
+export declare const validateType: z.ZodRecord<z.ZodString, z.ZodLazy<z.ZodTypeAny>>;
+export {};

package/dist/build/schemas/validTokenType.js

@@ -0,0 +1,31 @@
+import { z } from 'zod';
+import { joinFriendly, schemaErrorMessage } from '../utilities/index.js';
+const validTypes = [
+    'color',
+    'cubicBezier',
+    'typography',
+    'dimension',
+    'duration',
+    'border',
+    'shadow',
+    'fontFamily',
+    'fontWeight',
+    'number',
+    'string',
+    'custom-viewportRange',
+];
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: TODO: fix this
+export const validateType = z.record(z.string(), z.lazy(() => {
+    return z.union([
+        z
+            .object({
+            $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(),
+        validateType,
+    ]);
+}));

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

@@ -0,0 +1,18 @@
+import { z } from 'zod';
+export declare const viewportRangeToken: z.ZodObject<z.objectUtil.extendShape<{
+    $description: z.ZodOptional<z.ZodString>;
+    $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" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+}>, "strict", z.ZodTypeAny, {
+    $value: string;
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}, {
+    $value: string;
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}>;

package/dist/build/schemas/viewportRangeToken.js

@@ -0,0 +1,10 @@
+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: z.union([z.string(), referenceValue]),
+    $type: tokenType('custom-viewportRange'),
+})
+    .strict();

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

@@ -0,0 +1,8 @@
+import type { Transform } from 'style-dictionary/types';
+/**
+ * @description converts w3c border tokens in css border string
+ * @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: Transform;

package/dist/build/transformers/borderToCss.js

@@ -0,0 +1,38 @@
+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) => {
+    if ('color' in border && 'width' in border && 'style' in border) {
+        return true;
+    }
+    return false;
+};
+/**
+ * @description converts w3c border tokens in css border string
+ * @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 const borderToCss = {
+    name: 'border/css',
+    type: 'value',
+    transitive: true,
+    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

@@ -0,0 +1,8 @@
+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: Transform;

package/dist/build/transformers/colorToHex.js

@@ -0,0 +1,24 @@
+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
+ */
+export const colorToHex = {
+    name: 'color/hex',
+    type: 'value',
+    transitive: true,
+    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 toHex(getTokenValue(token));
+        }
+        return toHex(alpha(getTokenValue(token), alphaValue, token));
+    },
+};

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

@@ -0,0 +1,8 @@
+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: Transform;

package/dist/build/transformers/colorToHexMix.js

@@ -0,0 +1,20 @@
+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
+ */
+export const colorToHexMix = {
+    name: 'color/hexMix',
+    type: 'value',
+    transitive: true,
+    filter: isColorWithMix,
+    transform: (token) => {
+        var _a, _b;
+        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

@@ -0,0 +1,8 @@
+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: Transform;

package/dist/build/transformers/colorToRgbAlpha.js

@@ -0,0 +1,20 @@
+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
+ */
+export const colorToRgbAlpha = {
+    name: 'color/rgbAlpha',
+    type: 'value',
+    transitive: true,
+    filter: isColorWithAlpha,
+    transform: (token) => {
+        if (token.alpha === null)
+            return getTokenValue(token);
+        return alpha(getTokenValue(token), token.alpha, token);
+    },
+};

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

@@ -0,0 +1,8 @@
+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: Transform;

package/dist/build/transformers/colorToRgbaFloat.js

@@ -0,0 +1,46 @@
+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 = getTokenValue(token);
+    let tokenMixColor = (_a = token.mix) === null || _a === void 0 ? void 0 : _a.color;
+    // get hex value from color string
+    if (isRgbaFloat(tokenValue)) {
+        tokenValue = rgbaFloatToHex(tokenValue, false);
+    }
+    if (tokenMixColor && isRgbaFloat(tokenMixColor)) {
+        tokenMixColor = rgbaFloatToHex(tokenMixColor, false);
+    }
+    let hex = toHex(tokenValue);
+    // mix color with mix color and weight
+    if (token.mix && token.mix.color && token.mix.weight) {
+        hex = toHex(mix(tokenValue, tokenMixColor, token.mix.weight));
+    }
+    // return color as RgbaFloat
+    return hexToRgbaFloat(hex, alpha);
+};
+/**
+ * @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 const colorToRgbaFloat = {
+    name: 'color/rgbaFloat',
+    type: 'value',
+    transitive: true,
+    filter: isColor,
+    transform: (token) => {
+        const value = getTokenValue(token);
+        // skip if value is already rgb float
+        if (isRgbaFloat(value) && !('mix' in token) && !('alpha' in token))
+            return value;
+        // convert hex or rgb values to rgba float
+        return toRgbaFloat(token, token.alpha);
+    },
+};