@primer/primitives 10.4.0 → 10.5.0-rc.2284dc61

package/dist/build/filters/index.d.ts

@@ -7,6 +7,7 @@ export { isDuration } from './isDuration.js';
 export { isFromFile } from './isFromFile.js';
 export { isFontFamily } from './isFontFamily.js';
 export { isFontWeight } from './isFontWeight.js';
+export { isGradient } from './isGradient.js';
 export { isNumber } from './isNumber.js';
 export { isShadow } from './isShadow.js';
 export { isSource } from './isSource.js';

package/dist/build/filters/index.js

@@ -7,6 +7,7 @@ export { isDuration } from './isDuration.js';
 export { isFromFile } from './isFromFile.js';
 export { isFontFamily } from './isFontFamily.js';
 export { isFontWeight } from './isFontWeight.js';
+export { isGradient } from './isGradient.js';
 export { isNumber } from './isNumber.js';
 export { isShadow } from './isShadow.js';
 export { isSource } from './isSource.js';

package/dist/build/filters/isGradient.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `gradient`
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isGradient: (token: TransformedToken) => boolean;

package/dist/build/filters/isGradient.js

@@ -0,0 +1,10 @@
+/**
+ * @description Checks if token is of $type `gradient`
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isGradient = (token) => {
+    var _a;
+    const typeValue = (_a = token.$type) !== null && _a !== void 0 ? _a : token.type;
+    return typeValue === 'gradient';
+};

package/dist/build/platforms/css.js

@@ -32,6 +32,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
             'typography/css',
             'fontFamily/css',
             'fontWeight/number',
+            'gradient/css',
         ],
         options: {
             basePxFontSize: 16,

package/dist/build/primerStyleDictionary.js

@@ -1,5 +1,5 @@
 import StyleDictionary from 'style-dictionary';
-import { borderToCss, colorToRgbAlpha, colorToHex, colorToRgbaFloat, cubicBezierToCss, dimensionToRem, dimensionToPixelUnitless, durationToCss, figmaAttributes, fontFamilyToCss, fontFamilyToFigma, fontWeightToNumber, jsonDeprecated, namePathToDotNotation, namePathToCamelCase, namePathToPascalCase, namePathToKebabCase, namePathToSlashNotation, namePathToFigma, shadowToCss, typographyToCss, dimensionToRemPxArray, floatToPixel, floatToPixelUnitless, } from './transformers/index.js';
+import { borderToCss, colorToRgbAlpha, colorToHex, colorToRgbaFloat, cubicBezierToCss, dimensionToRem, dimensionToPixelUnitless, durationToCss, figmaAttributes, fontFamilyToCss, fontFamilyToFigma, fontWeightToNumber, gradientToCss, jsonDeprecated, namePathToDotNotation, namePathToCamelCase, namePathToPascalCase, namePathToKebabCase, namePathToSlashNotation, namePathToFigma, shadowToCss, typographyToCss, dimensionToRemPxArray, floatToPixel, floatToPixelUnitless, } from './transformers/index.js';
 import { javascriptCommonJs, javascriptEsm, typescriptExportDefinition, jsonNestedPrefixed, cssCustomMedia, jsonOneDimensional, jsonPostCssFallback, cssAdvanced, jsonFigma, } from './formats/index.js';
 import { themeOverrides } from './preprocessors/themeOverrides.js';
 import { colorAlphaToCss } from './transformers/colorAlphaToCss.js';
@@ -85,4 +85,5 @@ PrimerStyleDictionary.registerTransform(typographyToCss);
 PrimerStyleDictionary.registerTransform(fontWeightToNumber);
 PrimerStyleDictionary.registerTransform(fontFamilyToCss);
 PrimerStyleDictionary.registerTransform(fontFamilyToFigma);
+PrimerStyleDictionary.registerTransform(gradientToCss);
 PrimerStyleDictionary.registerPreprocessor(themeOverrides);

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

@@ -29,14 +29,14 @@ export declare const borderToken: z.ZodObject<z.objectUtil.extendShape<{
         color: string;
         style: "inset" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset";
     }>, z.ZodEffects<z.ZodString, string, string>]>;
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
 }>, "strict", z.ZodTypeAny, {
     $value: string | {
         width: string | 0;
         color: string;
         style: "inset" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset";
     };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }, {
@@ -45,7 +45,7 @@ export declare const borderToken: z.ZodObject<z.objectUtil.extendShape<{
         color: string;
         style: "inset" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset";
     };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }>;

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

@@ -6,7 +6,7 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<z.objectUt
     $value: z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>;
     alpha: z.ZodNullable<z.ZodOptional<z.ZodEffects<z.ZodAny, any, any>>>;
 }>, {
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.figma': z.ZodOptional<z.ZodObject<{
             collection: z.ZodOptional<z.ZodEffects<z.ZodString, string, string>>;
@@ -409,7 +409,7 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<z.objectUt
     }>>;
 }>, "strict", z.ZodTypeAny, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     alpha?: any;
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
@@ -479,7 +479,7 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<z.objectUt
     } | undefined;
 }, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     alpha?: any;
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;

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

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

package/dist/build/schemas/designToken.js

@@ -12,6 +12,7 @@ import { fontFamilyToken } from './fontFamilyToken.js';
 import { shadowToken } from './shadowToken.js';
 import { durationToken } from './durationToken.js';
 import { cubicBezierToken } from './cubicBezierToken.js';
+import { gradientToken } from './gradientToken.js';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: TODO: fix this
 export const designToken = z.record(tokenName, z.lazy(() => {
@@ -24,6 +25,7 @@ export const designToken = z.record(tokenName, z.lazy(() => {
             borderToken,
             fontFamilyToken,
             fontWeightToken,
+            gradientToken,
             typographyToken,
             viewportRangeToken,
             numberToken,

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

@@ -4,7 +4,7 @@ export declare const dimensionToken: z.ZodObject<z.objectUtil.extendShape<{
     $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
 }, {
     $value: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.figma': z.ZodObject<{
             collection: z.ZodEffects<z.ZodString, string, string>;
@@ -34,7 +34,7 @@ export declare const dimensionToken: z.ZodObject<z.objectUtil.extendShape<{
     }>>;
 }>, "strict", z.ZodTypeAny, {
     $value: string | 0;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
@@ -46,7 +46,7 @@ export declare const dimensionToken: z.ZodObject<z.objectUtil.extendShape<{
     } | undefined;
 }, {
     $value: string | 0;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {

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

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

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

@@ -4,7 +4,7 @@ export declare const fontFamilyToken: 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" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.figma': z.ZodObject<{
             collection: z.ZodOptional<z.ZodEffects<z.ZodString, string, string>>;
@@ -29,7 +29,7 @@ export declare const fontFamilyToken: z.ZodObject<z.objectUtil.extendShape<{
     }>>;
 }>, "strict", z.ZodTypeAny, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
@@ -40,7 +40,7 @@ export declare const fontFamilyToken: z.ZodObject<z.objectUtil.extendShape<{
     } | undefined;
 }, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {

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

@@ -3,7 +3,7 @@ export declare const fontWeightToken: z.ZodObject<z.objectUtil.extendShape<{
     $description: z.ZodOptional<z.ZodString>;
     $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
 }, {
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     $value: z.ZodUnion<[z.ZodEffects<z.ZodNumber, number, number>, z.ZodEffects<z.ZodString, string, string>]>;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.figma': z.ZodObject<{
@@ -29,7 +29,7 @@ export declare const fontWeightToken: z.ZodObject<z.objectUtil.extendShape<{
     }>>;
 }>, "strict", z.ZodTypeAny, {
     $value: string | number;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
@@ -40,7 +40,7 @@ export declare const fontWeightToken: z.ZodObject<z.objectUtil.extendShape<{
     } | undefined;
 }, {
     $value: string | number;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {

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

@@ -0,0 +1,60 @@
+import { z } from 'zod';
+export declare const gradientToken: z.ZodObject<z.objectUtil.extendShape<{
+    $description: z.ZodOptional<z.ZodString>;
+    $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
+}, {
+    $value: z.ZodUnion<[z.ZodArray<z.ZodObject<{
+        color: z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>;
+        position: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        color: string;
+        position: number;
+    }, {
+        color: string;
+        position: number;
+    }>, "many">, z.ZodEffects<z.ZodString, string, string>]>;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $extensions: z.ZodOptional<z.ZodObject<{
+        'org.primer.gradient': z.ZodObject<{
+            angle: z.ZodOptional<z.ZodNumber>;
+        }, "strip", z.ZodTypeAny, {
+            angle?: number | undefined;
+        }, {
+            angle?: number | undefined;
+        }>;
+    }, "strip", z.ZodTypeAny, {
+        'org.primer.gradient': {
+            angle?: number | undefined;
+        };
+    }, {
+        'org.primer.gradient': {
+            angle?: number | undefined;
+        };
+    }>>;
+}>, "strict", z.ZodTypeAny, {
+    $value: string | {
+        color: string;
+        position: number;
+    }[];
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+    $extensions?: {
+        'org.primer.gradient': {
+            angle?: number | undefined;
+        };
+    } | undefined;
+}, {
+    $value: string | {
+        color: string;
+        position: number;
+    }[];
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+    $extensions?: {
+        'org.primer.gradient': {
+            angle?: number | undefined;
+        };
+    } | undefined;
+}>;

package/dist/build/schemas/gradientToken.js

@@ -0,0 +1,26 @@
+import { z } from 'zod';
+import { baseToken } from './baseToken.js';
+import { referenceValue } from './referenceValue.js';
+import { tokenType } from './tokenType.js';
+import { colorHexValue } from './colorHexValue.js';
+export const gradientToken = baseToken
+    .extend({
+    $value: z.union([
+        z
+            .array(z.object({
+            color: z.union([colorHexValue, referenceValue]),
+            position: z.number().min(0).max(1),
+        }))
+            .min(2),
+        referenceValue,
+    ]),
+    $type: tokenType('gradient'),
+    $extensions: z
+        .object({
+        'org.primer.gradient': z.object({
+            angle: z.number().int().min(0).max(360).optional(),
+        }),
+    })
+        .optional(),
+})
+    .strict();

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

@@ -4,7 +4,7 @@ export declare const numberToken: z.ZodObject<z.objectUtil.extendShape<{
     $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
 }, {
     $value: z.ZodUnion<[z.ZodNumber, z.ZodEffects<z.ZodString, string, string>]>;
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.data': z.ZodOptional<z.ZodObject<{
             fontSize: z.ZodOptional<z.ZodNumber>;
@@ -42,7 +42,7 @@ export declare const numberToken: z.ZodObject<z.objectUtil.extendShape<{
     }>>;
 }>, "strict", z.ZodTypeAny, {
     $value: string | number;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
@@ -56,7 +56,7 @@ export declare const numberToken: z.ZodObject<z.objectUtil.extendShape<{
     } | undefined;
 }, {
     $value: string | number;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {

package/dist/build/schemas/referenceValue.js

@@ -1,5 +1,5 @@
 import { z } from 'zod';
 import { schemaErrorMessage } from '../utilities/index.js';
-export const referenceValue = z.string().refine(ref => /^{\w+(\.\w+)*(\.\w+|\.@)}$/.test(ref), ref => ({
+export const referenceValue = z.string().refine(ref => /^{[\w-]+(\.[\w-]+)*(\.[\w-]+|\.@)}$/.test(ref), ref => ({
     message: schemaErrorMessage(`Invalid reference: "${ref}"`, 'Reference must be a string in the format "{path.to.token}".'),
 }));

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

@@ -77,7 +77,7 @@ export declare const shadowToken: z.ZodObject<z.objectUtil.extendShape<{
         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">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.figma': z.ZodObject<{
             collection: z.ZodOptional<z.ZodEffects<z.ZodString, string, string>>;
@@ -1733,7 +1733,7 @@ export declare const shadowToken: z.ZodObject<z.objectUtil.extendShape<{
         alpha?: any;
         inset?: boolean | undefined;
     }[];
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
@@ -1952,7 +1952,7 @@ export declare const shadowToken: z.ZodObject<z.objectUtil.extendShape<{
         alpha?: any;
         inset?: boolean | undefined;
     }[];
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {

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

@@ -4,15 +4,15 @@ export declare const stringToken: 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" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
 }>, "strict", z.ZodTypeAny, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "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";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }>;

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

@@ -1,3 +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">;
+export declare const tokenType: ($type: TokenType) => z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;

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

@@ -35,7 +35,7 @@ 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" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
 }>, "strict", z.ZodTypeAny, {
     $value: string | {
         fontFamily: string;
@@ -43,7 +43,7 @@ export declare const typographyToken: z.ZodObject<z.objectUtil.extendShape<{
         fontWeight: string | number;
         lineHeight?: string | 0 | undefined;
     };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }, {
@@ -53,7 +53,7 @@ export declare const typographyToken: z.ZodObject<z.objectUtil.extendShape<{
         fontWeight: string | number;
         lineHeight?: string | 0 | undefined;
     };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }>;

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

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-declare const validTypes: readonly ["color", "cubicBezier", "typography", "dimension", "duration", "border", "shadow", "fontFamily", "fontWeight", "number", "string", "custom-viewportRange"];
+declare const validTypes: readonly ["color", "cubicBezier", "typography", "dimension", "duration", "border", "shadow", "fontFamily", "fontWeight", "gradient", "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

@@ -10,6 +10,7 @@ const validTypes = [
     'shadow',
     'fontFamily',
     'fontWeight',
+    'gradient',
     'number',
     'string',
     'custom-viewportRange',

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" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
 }>, "strict", z.ZodTypeAny, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "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";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }>;

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

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

package/dist/build/transformers/gradientToCss.js

@@ -0,0 +1,23 @@
+import { toHex } from 'color2k';
+import { isGradient } from '../filters/isGradient.js';
+import { getTokenValue } from './utilities/getTokenValue.js';
+/**
+ * @description converts gradient tokens value to css gradient
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `gradient`
+ * @transformer returns a `css gradient` string
+ */
+export const gradientToCss = {
+    name: 'gradient/css',
+    type: 'value',
+    transitive: true,
+    filter: isGradient,
+    transform: (token) => {
+        var _a, _b;
+        const { angle } = (_b = (_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.gradient']) !== null && _b !== void 0 ? _b : {};
+        const stops = getTokenValue(token).map(({ color, position }) => {
+            return `${toHex(color)} ${position * 100}%`;
+        });
+        return `linear-gradient(${angle || 180}deg, ${stops.join(', ')})`;
+    },
+};

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

@@ -5,6 +5,7 @@ export { colorToRgbaFloat } from './colorToRgbaFloat.js';
 export { cubicBezierToCss } from './cubicBezierToCss.js';
 export { floatToPixel } from './floatToPixel.js';
 export { floatToPixelUnitless } from './floatToPixel.js';
+export { gradientToCss } from './gradientToCss.js';
 export { dimensionToRem } from './dimensionToRem.js';
 export { dimensionToRemPxArray } from './dimensionToRemPxArray.js';
 export { dimensionToPixelUnitless } from './dimensionToPixelUnitless.js';

package/dist/build/transformers/index.js

@@ -5,6 +5,7 @@ export { colorToRgbaFloat } from './colorToRgbaFloat.js';
 export { cubicBezierToCss } from './cubicBezierToCss.js';
 export { floatToPixel } from './floatToPixel.js';
 export { floatToPixelUnitless } from './floatToPixel.js';
+export { gradientToCss } from './gradientToCss.js';
 export { dimensionToRem } from './dimensionToRem.js';
 export { dimensionToRemPxArray } from './dimensionToRemPxArray.js';
 export { dimensionToPixelUnitless } from './dimensionToPixelUnitless.js';