@primer/primitives 10.6.0-rc.efb715c5 → 10.6.1-rc.3c635ac2

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

@@ -12,3 +12,4 @@ export { isNumber } from './isNumber.js';
 export { isShadow } from './isShadow.js';
 export { isSource } from './isSource.js';
 export { isTypography } from './isTypography.js';
+export { isTransition } from './isTransition.js';

package/dist/build/filters/index.js

@@ -12,3 +12,4 @@ export { isNumber } from './isNumber.js';
 export { isShadow } from './isShadow.js';
 export { isSource } from './isSource.js';
 export { isTypography } from './isTypography.js';
+export { isTransition } from './isTransition.js';

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

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

package/dist/build/filters/isTransition.js

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

package/dist/build/platforms/css.js

@@ -30,6 +30,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
             'shadow/css',
             'border/css',
             'typography/css',
+            'transition/css',
             'fontFamily/css',
             'fontWeight/number',
             'gradient/css',

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, gradientToCss, 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, transitionToCss, } 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';
@@ -82,6 +82,7 @@ PrimerStyleDictionary.registerTransform(namePathToSlashNotation);
 PrimerStyleDictionary.registerTransform(shadowToCss);
 PrimerStyleDictionary.registerTransform(borderToCss);
 PrimerStyleDictionary.registerTransform(typographyToCss);
+PrimerStyleDictionary.registerTransform(transitionToCss);
 PrimerStyleDictionary.registerTransform(fontWeightToNumber);
 PrimerStyleDictionary.registerTransform(fontFamilyToCss);
 PrimerStyleDictionary.registerTransform(fontFamilyToFigma);

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

package/dist/build/schemas/designToken.js

@@ -13,6 +13,7 @@ import { shadowToken } from './shadowToken.js';
 import { durationToken } from './durationToken.js';
 import { cubicBezierToken } from './cubicBezierToken.js';
 import { gradientToken } from './gradientToken.js';
+import { transitionToken } from './transitionToken.js';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: TODO: fix this
 export const designToken = z.record(tokenName, z.lazy(() => {
@@ -31,6 +32,7 @@ export const designToken = z.record(tokenName, z.lazy(() => {
             numberToken,
             durationToken,
             stringToken,
+            transitionToken,
         ]),
         designToken,
     ]);

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

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

@@ -13,7 +13,7 @@ export declare const gradientToken: z.ZodObject<z.objectUtil.extendShape<{
         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">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.gradient': z.ZodObject<{
             angle: z.ZodOptional<z.ZodNumber>;
@@ -36,7 +36,7 @@ export declare const gradientToken: z.ZodObject<z.objectUtil.extendShape<{
         color: string;
         position: number;
     }[];
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
@@ -49,7 +49,7 @@ export declare const gradientToken: z.ZodObject<z.objectUtil.extendShape<{
         color: string;
         position: number;
     }[];
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {

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

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

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

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

package/dist/build/schemas/transitionToken.js

@@ -0,0 +1,19 @@
+import { z } from 'zod';
+import { baseToken } from './baseToken.js';
+import { referenceValue } from './referenceValue.js';
+import { durationToken } from './durationToken.js';
+import { cubicBezierToken } from './cubicBezierToken.js';
+import { tokenType } from './tokenType.js';
+export const transitionToken = baseToken
+    .extend({
+    $value: z.union([
+        z.object({
+            duration: z.union([durationToken.shape.$value, referenceValue]),
+            timingFunction: z.union([cubicBezierToken.shape.$value, referenceValue]),
+            delay: z.union([durationToken.shape.$value, referenceValue]).optional(),
+        }),
+        referenceValue,
+    ]),
+    $type: tokenType('transition'),
+})
+    .strict();

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" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "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" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "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" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "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", "gradient", "number", "string", "custom-viewportRange"];
+declare const validTypes: readonly ["color", "cubicBezier", "typography", "dimension", "duration", "border", "shadow", "fontFamily", "fontWeight", "gradient", "number", "string", "transition", "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

@@ -13,6 +13,7 @@ const validTypes = [
     'gradient',
     'number',
     'string',
+    'transition',
     'custom-viewportRange',
 ];
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

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

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

@@ -6,3 +6,4 @@ import type { Transform } from 'style-dictionary/types';
  * @transformer returns a css cubic-bezier function
  */
 export declare const cubicBezierToCss: Transform;
+export declare const cubicBezierArrayToCss: (value: number[], path: string[]) => string;

package/dist/build/transformers/cubicBezierToCss.js

@@ -13,11 +13,14 @@ export const cubicBezierToCss = {
     transform: (token, _config) => {
         var _a;
         const value = (_a = token.$value) !== null && _a !== void 0 ? _a : token.value;
-        // throw value of more or less than 4 items in array
-        if (value.length !== 4 || value.some((item) => typeof item !== 'number')) {
-            throw new Error(`Invalid cubicBezier token ${token.path.join('.')}, must be an array with 4 numbers, but got this instead: ${JSON.stringify(value)}`);
-        }
-        // return value
-        return `cubic-bezier(${value.join(',')})`;
+        return cubicBezierArrayToCss(value, token.path);
     },
 };
+export const cubicBezierArrayToCss = (value, path) => {
+    // throw value of more or less than 4 items in array
+    if (value.length !== 4 || value.some((item) => typeof item !== 'number')) {
+        throw new Error(`Invalid cubicBezier token ${path.join('.')}, must be an array with 4 numbers, but got this instead: ${JSON.stringify(value)}`);
+    }
+    // return value
+    return `cubic-bezier(${value.join(',')})`;
+};

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

@@ -23,3 +23,4 @@ export { namePathToKebabCase } from './namePathToKebabCase.js';
 export { namePathToSlashNotation } from './namePathToSlashNotation.js';
 export { shadowToCss } from './shadowToCss.js';
 export { typographyToCss } from './typographyToCss.js';
+export { transitionToCss } from './transitionToCss.js';

package/dist/build/transformers/index.js

@@ -23,3 +23,4 @@ export { namePathToKebabCase } from './namePathToKebabCase.js';
 export { namePathToSlashNotation } from './namePathToSlashNotation.js';
 export { shadowToCss } from './shadowToCss.js';
 export { typographyToCss } from './typographyToCss.js';
+export { transitionToCss } from './transitionToCss.js';

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

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

package/dist/build/transformers/transitionToCss.js

@@ -0,0 +1,27 @@
+import { isTransition } from '../filters/index.js';
+import { cubicBezierArrayToCss } from './cubicBezierToCss.js';
+import { checkRequiredTokenProperties } from './utilities/checkRequiredTokenProperties.js';
+import { getTokenValue } from './utilities/getTokenValue.js';
+/**
+ * @description converts transition tokens to CSS transition string
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `transition`
+ * @transformer returns css transition `string`
+ */
+export const transitionToCss = {
+    name: 'transition/css',
+    type: 'value',
+    transitive: true,
+    filter: isTransition,
+    transform: (token) => {
+        // extract value
+        const value = getTokenValue(token);
+        // if value is a string, it's probably a reference, return as is
+        if (typeof value === 'string') {
+            return value;
+        }
+        // check required properties
+        checkRequiredTokenProperties(value, ['duration', 'timingFunction']);
+        return `${value.duration} ${cubicBezierArrayToCss(value.timingFunction, token.path)} ${value.delay ? value.delay : ''}`.trim();
+    },
+};

package/dist/figma/figma.json

@@ -80,10 +80,10 @@
       "groups": [
         "shadow",
         "component (internal)",
-        "component shadow",
-        "component",
         "semantic",
-        "syntax"
+        "component",
+        "syntax",
+        "component shadow"
       ]
     },
     "base/typography": {