@primer/primitives 10.0.0-rc.7806f5e4 → 10.0.0-rc.8fa0b911

package/README.md

@@ -138,10 +138,10 @@ In this case you can create the follwing structure. The `@` will be removed from
   bgColor: {
     accent: {
       '@': {
-        // values for accent (default)
+        // values for bgColor-accent (default)
       },
       muted: {
-        // values for accent-muted
+        // values for bgColor-accent-muted
       },
     },
   },

package/dist/build/PrimerStyleDictionary.js

@@ -1,5 +1,5 @@
 import StyleDictionary from 'style-dictionary';
-import { borderToCss, colorToRgbAlpha, colorToHex, colorToHexMix, colorToRgbaFloat, 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, colorToHexMix, 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 { javascriptCommonJs, javascriptEsm, typescriptExportDefinition, jsonNestedPrefixed, cssCustomMedia, jsonOneDimensional, jsonPostCssFallback, cssAdvanced, jsonFigma, } from './formats/index.js';
 /**
  * @name {@link PrimerStyleDictionary}
@@ -52,28 +52,29 @@ PrimerStyleDictionary.registerFormat({
  * Transformers
  *
  */
-PrimerStyleDictionary.registerTransform(Object.assign({}, colorToRgbAlpha));
-PrimerStyleDictionary.registerTransform(Object.assign({}, colorToRgbaFloat));
-PrimerStyleDictionary.registerTransform(Object.assign({}, colorToHexMix));
-PrimerStyleDictionary.registerTransform(Object.assign({}, colorToHex));
-PrimerStyleDictionary.registerTransform(Object.assign({}, floatToPixel));
-PrimerStyleDictionary.registerTransform(Object.assign({}, floatToPixelUnitless));
-PrimerStyleDictionary.registerTransform(Object.assign({}, dimensionToRem));
-PrimerStyleDictionary.registerTransform(Object.assign({}, dimensionToRemPxArray));
-PrimerStyleDictionary.registerTransform(Object.assign({}, dimensionToPixelUnitless));
-PrimerStyleDictionary.registerTransform(Object.assign({}, durationToCss));
-PrimerStyleDictionary.registerTransform(Object.assign({}, figmaAttributes));
-PrimerStyleDictionary.registerTransform(Object.assign({}, jsonDeprecated));
-PrimerStyleDictionary.registerTransform(Object.assign({}, namePathToCamelCase));
-PrimerStyleDictionary.registerTransform(Object.assign({}, namePathToPascalCase));
-PrimerStyleDictionary.registerTransform(Object.assign({}, namePathToDotNotation));
-PrimerStyleDictionary.registerTransform(Object.assign({}, namePathToFigma));
-PrimerStyleDictionary.registerTransform(Object.assign({}, namePathToCamelCase));
-PrimerStyleDictionary.registerTransform(Object.assign({}, namePathToKebabCase));
-PrimerStyleDictionary.registerTransform(Object.assign({}, namePathToSlashNotation));
-PrimerStyleDictionary.registerTransform(Object.assign({}, shadowToCss));
-PrimerStyleDictionary.registerTransform(Object.assign({}, borderToCss));
-PrimerStyleDictionary.registerTransform(Object.assign({}, typographyToCss));
-PrimerStyleDictionary.registerTransform(Object.assign({}, fontWeightToNumber));
-PrimerStyleDictionary.registerTransform(Object.assign({}, fontFamilyToCss));
-PrimerStyleDictionary.registerTransform(Object.assign({}, fontFamilyToFigma));
+PrimerStyleDictionary.registerTransform(colorToRgbAlpha);
+PrimerStyleDictionary.registerTransform(colorToRgbaFloat);
+PrimerStyleDictionary.registerTransform(colorToHexMix);
+PrimerStyleDictionary.registerTransform(colorToHex);
+PrimerStyleDictionary.registerTransform(cubicBezierToCss);
+PrimerStyleDictionary.registerTransform(floatToPixel);
+PrimerStyleDictionary.registerTransform(floatToPixelUnitless);
+PrimerStyleDictionary.registerTransform(dimensionToRem);
+PrimerStyleDictionary.registerTransform(dimensionToRemPxArray);
+PrimerStyleDictionary.registerTransform(dimensionToPixelUnitless);
+PrimerStyleDictionary.registerTransform(durationToCss);
+PrimerStyleDictionary.registerTransform(figmaAttributes);
+PrimerStyleDictionary.registerTransform(jsonDeprecated);
+PrimerStyleDictionary.registerTransform(namePathToCamelCase);
+PrimerStyleDictionary.registerTransform(namePathToPascalCase);
+PrimerStyleDictionary.registerTransform(namePathToDotNotation);
+PrimerStyleDictionary.registerTransform(namePathToFigma);
+PrimerStyleDictionary.registerTransform(namePathToCamelCase);
+PrimerStyleDictionary.registerTransform(namePathToKebabCase);
+PrimerStyleDictionary.registerTransform(namePathToSlashNotation);
+PrimerStyleDictionary.registerTransform(shadowToCss);
+PrimerStyleDictionary.registerTransform(borderToCss);
+PrimerStyleDictionary.registerTransform(typographyToCss);
+PrimerStyleDictionary.registerTransform(fontWeightToNumber);
+PrimerStyleDictionary.registerTransform(fontFamilyToCss);
+PrimerStyleDictionary.registerTransform(fontFamilyToFigma);

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

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

package/dist/build/filters/isCubicBezier.js

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

package/dist/build/platforms/css.js

@@ -23,6 +23,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
             'name/pathToKebabCase',
             'color/hex',
             'color/hexMix',
+            'cubicBezier/css',
             'dimension/rem',
             'duration/css',
             'shadow/css',

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" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange";
+    $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/colorToken.d.ts

@@ -4,7 +4,7 @@ export declare const colorToken: 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" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     alpha: z.ZodNullable<z.ZodOptional<z.ZodEffects<z.ZodAny, any, any>>>;
     mix: z.ZodOptional<z.ZodNullable<z.ZodObject<{
         color: z.ZodString;
@@ -48,7 +48,7 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
     }>>;
 }>, "strict", z.ZodTypeAny, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     alpha?: any;
     $description?: string | undefined;
     mix?: {
@@ -66,7 +66,7 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
     } | undefined;
 }, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     alpha?: any;
     $description?: string | undefined;
     mix?: {

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

@@ -0,0 +1,18 @@
+import { z } from 'zod';
+export declare const cubicBezierToken: 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.ZodNumber, "many">, 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 | number[];
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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";
+    $description?: string | undefined;
+    deprecated?: string | boolean | undefined;
+}>;

package/dist/build/schemas/cubicBezierToken.js

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+import { baseToken } from './baseToken.js';
+import { referenceValue } from './referenceValue.js';
+import { tokenType } from './tokenType.js';
+export const cubicBezierToken = baseToken.extend({
+    $value: z.union([z.array(z.number()).length(4), referenceValue]),
+    $type: tokenType('cubicBezier'),
+});

package/dist/build/schemas/designToken.js

@@ -11,12 +11,14 @@ import { colorToken } from './colorToken.js';
 import { fontFamilyToken } from './fontFamilyToken.js';
 import { shadowToken } from './shadowToken.js';
 import { durationToken } from './durationToken.js';
+import { cubicBezierToken } from './cubicBezierToken.js';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: TODO: fix this
 export const designToken = z.record(tokenName, z.lazy(() => {
     return z.union([
         z.discriminatedUnion('$type', [
             colorToken,
+            cubicBezierToken,
             dimensionToken,
             shadowToken,
             borderToken,
@@ -28,7 +30,6 @@ export const designToken = z.record(tokenName, z.lazy(() => {
             durationToken,
             stringToken,
         ]),
-        // referenceToken,
         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" | "shadow" | "typography" | "custom-viewportRange">;
+    $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.ZodEffects<z.ZodString, string, string>;
@@ -29,7 +29,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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     deprecated?: string | boolean | undefined;
     $extensions?: {
@@ -40,7 +40,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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange">;
+    $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" | "custom-viewportRange";
+    $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" | "custom-viewportRange";
+    $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/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" | "custom-viewportRange">;
+    $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>>;
@@ -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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "shadow" | "typography" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "shadow" | "typography" | "custom-viewportRange">;
+    $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>>;
@@ -118,7 +118,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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     deprecated?: string | boolean | undefined;
     $extensions?: {
@@ -145,7 +145,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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange">;
+    $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" | "custom-viewportRange";
+    $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" | "custom-viewportRange";
+    $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/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" | "custom-viewportRange">;
+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/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" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "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" | "custom-viewportRange";
+    $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/validTokenType.d.ts

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

@@ -2,6 +2,7 @@ import { z } from 'zod';
 import { joinFriendly, schemaErrorMessage } from '../utilities/index.js';
 const validTypes = [
     'color',
+    'cubicBezier',
     'typography',
     'dimension',
     'duration',

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

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

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

package/dist/build/transformers/cubicBezierToCss.js

@@ -0,0 +1,23 @@
+import { isCubicBezier } from '../filters/isCubicBezier.js';
+/**
+ * @description converts cubicBezeir tokens array value to a css cubic-bezier
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `duration`
+ * @transformer returns a css cubic-bezier function
+ */
+export const cubicBezierToCss = {
+    name: 'cubicBezeir/css',
+    type: 'value',
+    transitive: true,
+    filter: isCubicBezier,
+    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(',')})`;
+    },
+};

package/dist/build/transformers/durationToCss.js

@@ -13,8 +13,8 @@ export const durationToCss = {
     transform: (token, _config, options) => {
         const valueProp = options.usesDtcg ? '$value' : 'value';
         // throw an error if token value is not a string or does not end with `ms`
-        if (typeof token[valueProp] !== `string` || !token[valueProp].endsWith(`ms`)) {
-            throw new Error(`duration token value must be a string with an "ms" unit`);
+        if (typeof token[valueProp] !== `string` || !(token[valueProp].endsWith(`ms`) || token[valueProp].endsWith(`s`))) {
+            throw new Error(`duration token value must be a string with an "ms" || "s" unit, invalid token: ${token.name} with value: ${token[valueProp]}`);
         }
         // get value
         let value = parseInt(token[valueProp].replace('ms', ''));

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

@@ -3,6 +3,7 @@ export { colorToHex } from './colorToHex.js';
 export { colorToHexMix } from './colorToHexMix.js';
 export { colorToRgbAlpha } from './colorToRgbAlpha.js';
 export { colorToRgbaFloat } from './colorToRgbaFloat.js';
+export { cubicBezierToCss } from './cubicBezierToCss.js';
 export { floatToPixel } from './floatToPixel.js';
 export { floatToPixelUnitless } from './floatToPixel.js';
 export { dimensionToRem } from './dimensionToRem.js';

package/dist/build/transformers/index.js

@@ -3,6 +3,7 @@ export { colorToHex } from './colorToHex.js';
 export { colorToHexMix } from './colorToHexMix.js';
 export { colorToRgbAlpha } from './colorToRgbAlpha.js';
 export { colorToRgbaFloat } from './colorToRgbaFloat.js';
+export { cubicBezierToCss } from './cubicBezierToCss.js';
 export { floatToPixel } from './floatToPixel.js';
 export { floatToPixelUnitless } from './floatToPixel.js';
 export { dimensionToRem } from './dimensionToRem.js';

package/dist/css/base/motion/motion.css

@@ -0,0 +1,17 @@
+:root {
+  --base-easing-linear: cubic-bezier(0, 0, 1, 1); /* Ideal for non-movement properties, like opacity or background color. */
+  --base-easing-easeIn: cubic-bezier(0.7, 0.1, 0.75, 0.9); /* Ideal for movement that starts on the page and ends off the page. */
+  --base-easing-easeOut: cubic-bezier(0.16, 1, 0.3, 1); /* Ideal for movement that starts off the page and ends on the page. */
+  --base-easing-easeInOut: cubic-bezier(0.6, 0, 0.2, 1); /* Ideal for movement that starts and ends on the page. */
+  --base-duration-0: 0ms;
+  --base-duration-75: 75ms;
+  --base-duration-200: 200ms;
+  --base-duration-300: 300ms;
+  --base-duration-400: 400ms;
+  --base-duration-500: 500ms;
+  --base-duration-600: 600ms;
+  --base-duration-700: 700ms;
+  --base-duration-800: 800ms;
+  --base-duration-900: 900ms;
+  --base-duration-1000: 1s;
+}

package/dist/css/functional/motion/motion.css

@@ -1,5 +1,6 @@
 :root {
-  --motion-skeletonLoader-shimmer-duration-scale: 1s; /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
-  --motion-spinner-duration-rotation: 1s; /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
-  --motion-loading-delay-default: 1s; /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
+  --motion-loading-delay-default: var(--base-duration-1000); /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
+  --motion-spinner-duration-rotation: var(--base-duration-1000); /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
+  --motion-spinner-easing-rotation: var(--base-easing-linear); /* The easing curve for the "Spinner" loading indicator rotation */
+  --motion-skeletonLoader-shimmer-duration-scale: var(--base-duration-1000); /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
 }