@primer/primitives 9.0.3 → 9.1.0-rc.56a8ee48

package/dist/build/transformers/utilities/rgbaFloatToHex.d.ts

@@ -0,0 +1,6 @@
+export declare const rgbaFloatToHex: ({ r, g, b, a }: {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}, alpha?: boolean) => string;

package/dist/build/transformers/utilities/rgbaFloatToHex.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rgbaFloatToHex = void 0;
+const rgbaFloatToHex = ({ r, g, b, a }, alpha = true) => {
+    const values = [r, g, b, alpha === true && a && a < 1 ? a : undefined].filter(item => item !== undefined);
+    if (r > 1 || r < 0 || g > 1 || g < 0 || b > 1 || b < 0) {
+        throw new Error('Invalid RgbaFloat value. R, G and B values must be between 0 and 1.');
+    }
+    return `#${values
+        .map(v => Number(parseInt(`${v * 255}`, 10))
+        .toString(16)
+        .padStart(2, '0'))
+        .join('')}`;
+};
+exports.rgbaFloatToHex = rgbaFloatToHex;

package/dist/build/utilities/copyFromDir.d.ts

@@ -0,0 +1,8 @@
+/**
+ * copyFromDir
+ * @description Copies all files from source folder to destination
+ * @param source path
+ * @param destination path
+ * @returns promise
+ */
+export declare const copyFromDir: (source: string, destination: string) => Promise<void>;

package/dist/build/utilities/copyFromDir.js

@@ -0,0 +1,34 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyFromDir = void 0;
+/* istanbul ignore file */
+const promises_1 = require("fs/promises");
+/**
+ * copyFromDir
+ * @description Copies all files from source folder to destination
+ * @param source path
+ * @param destination path
+ * @returns promise
+ */
+const copyFromDir = (source, destination) => __awaiter(void 0, void 0, void 0, function* () {
+    // adjust trailing slash
+    const src = `${source.replace(/\/$/, '')}`;
+    const dest = `${destination.replace(/\/$/, '')}`;
+    // create dest if it does not exists
+    yield (0, promises_1.mkdir)(dest, { recursive: true });
+    // read files from source
+    const files = yield (0, promises_1.readdir)(src);
+    for (const file of files) {
+        (0, promises_1.copyFile)(`${src}/${file}`, `${dest}/${file}`);
+    }
+});
+exports.copyFromDir = copyFromDir;

package/dist/build/utilities/filterStringArray.d.ts

@@ -0,0 +1 @@
+export declare const filterStringArray: (string: string[]) => string[];

package/dist/build/utilities/filterStringArray.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterStringArray = void 0;
+const filterStringArray = (string) => {
+    // match unsupported characters
+    const regex = /[^a-zA-Z0-9]+/g;
+    // replace any non-letter and non-number character and split into word array
+    const stringArray = string
+        .filter(Boolean)
+        .join(' ')
+        .replace(regex, ' ')
+        .split(' ')
+        // remove undefined if exists
+        .filter((part) => Boolean(part) && typeof part === 'string');
+    return stringArray;
+};
+exports.filterStringArray = filterStringArray;

package/{src/utilities/getFlag.ts → dist/build/utilities/getFlag.d.ts}

@@ -5,8 +5,4 @@
  * @returns null if flag is not found, otherwise the value of the flag or the flag name if the flag has no value
  * @example `getFlag('--silent')` returns `null` if `--silent` is not found, `--silent` if `--silent` is found with no value, and `true` if `--silent=true` is found
  */
-export const getFlag = (flag: string, prefix = '--') => {
-  flag = `${prefix}${flag.replace(prefix, '')}`
-  const index = process.argv.findIndex(arg => arg === flag || arg.startsWith(`${flag}=`))
-  return index === -1 ? null : process.argv[index].replace(`${flag}=`, '')
-}
+export declare const getFlag: (flag: string, prefix?: string) => string | null;

package/dist/build/utilities/getFlag.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFlag = void 0;
+/**
+ * Get the value of a flag from the command line
+ * @param flag name of the flag to get
+ * @param prefix default `--` but can be changed to `-` the part to the left of the flag name
+ * @returns null if flag is not found, otherwise the value of the flag or the flag name if the flag has no value
+ * @example `getFlag('--silent')` returns `null` if `--silent` is not found, `--silent` if `--silent` is found with no value, and `true` if `--silent=true` is found
+ */
+const getFlag = (flag, prefix = '--') => {
+    flag = `${prefix}${flag.replace(prefix, '')}`;
+    const index = process.argv.findIndex(arg => arg === flag || arg.startsWith(`${flag}=`));
+    return index === -1 ? null : process.argv[index].replace(`${flag}=`, '');
+};
+exports.getFlag = getFlag;

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

@@ -0,0 +1,3 @@
+export { copyFromDir } from './copyFromDir';
+export { upperCaseFirstCharacter } from './upperCaseFirstCharacter';
+export { toCamelCase } from './toCamelCase';

package/dist/build/utilities/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCamelCase = exports.upperCaseFirstCharacter = exports.copyFromDir = void 0;
+var copyFromDir_1 = require("./copyFromDir");
+Object.defineProperty(exports, "copyFromDir", { enumerable: true, get: function () { return copyFromDir_1.copyFromDir; } });
+var upperCaseFirstCharacter_1 = require("./upperCaseFirstCharacter");
+Object.defineProperty(exports, "upperCaseFirstCharacter", { enumerable: true, get: function () { return upperCaseFirstCharacter_1.upperCaseFirstCharacter; } });
+var toCamelCase_1 = require("./toCamelCase");
+Object.defineProperty(exports, "toCamelCase", { enumerable: true, get: function () { return toCamelCase_1.toCamelCase; } });

package/dist/build/utilities/joinFriendly.d.ts

@@ -0,0 +1 @@
+export declare const joinFriendly: (array: string[], lastJoin?: string) => string;

package/dist/build/utilities/joinFriendly.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.joinFriendly = void 0;
+const joinFriendly = (array, lastJoin = 'and') => array.length > 1 ? `${array.slice(0, -1).join(', ')} ${lastJoin} ${array.slice(-1)}` : `${array[0]}`;
+exports.joinFriendly = joinFriendly;

package/dist/build/utilities/schemaErrorMessage.d.ts

@@ -0,0 +1 @@
+export declare const schemaErrorMessage: (title: string, description?: string) => string;

package/dist/build/utilities/schemaErrorMessage.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.schemaErrorMessage = void 0;
+const schemaErrorMessage = (title, description) => `**${title}**${description ? `\n${description}` : ``}`;
+exports.schemaErrorMessage = schemaErrorMessage;

package/dist/build/utilities/toCamelCase.d.ts

@@ -0,0 +1 @@
+export declare const toCamelCase: (string: string | string[]) => string;

package/dist/build/utilities/toCamelCase.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCamelCase = void 0;
+const filterStringArray_1 = require("./filterStringArray");
+const upperCaseFirstCharacter_1 = require("./upperCaseFirstCharacter");
+const toCamelCase = (string) => {
+    if (!Array.isArray(string)) {
+        string = [string];
+    }
+    return ((0, filterStringArray_1.filterStringArray)(string)
+        // ucFirst all but first part
+        .map((part, index) => {
+        if (index > 0) {
+            return (0, upperCaseFirstCharacter_1.upperCaseFirstCharacter)(part);
+        }
+        return part;
+    })
+        .join(''));
+};
+exports.toCamelCase = toCamelCase;

package/dist/build/utilities/toPascalCase.d.ts

@@ -0,0 +1 @@
+export declare const toPascalCase: (string: string | string[]) => string;

package/dist/build/utilities/toPascalCase.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toPascalCase = void 0;
+const filterStringArray_1 = require("./filterStringArray");
+const upperCaseFirstCharacter_1 = require("./upperCaseFirstCharacter");
+const toPascalCase = (string) => {
+    if (!Array.isArray(string)) {
+        string = [string];
+    }
+    return ((0, filterStringArray_1.filterStringArray)(string)
+        // ucFirst all but first part
+        .map((part) => {
+        return (0, upperCaseFirstCharacter_1.upperCaseFirstCharacter)(part);
+    })
+        .join(''));
+};
+exports.toPascalCase = toPascalCase;

package/dist/build/utilities/treeWalker.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description converts tokens to type and returns array with used type
+ * @param tree object
+ * @param callback function to be run on valid items
+ * @param validItem function to test if a node is a validItem to be transformed
+ * @returns object
+ */
+export declare const treeWalker: (tree: unknown, callback: <T>(argument: T) => unknown, isValidItem: (argument: unknown) => boolean) => unknown;

package/dist/build/utilities/treeWalker.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.treeWalker = void 0;
+/**
+ * @description converts tokens to type and returns array with used type
+ * @param tree object
+ * @param callback function to be run on valid items
+ * @param validItem function to test if a node is a validItem to be transformed
+ * @returns object
+ */
+const treeWalker = (tree, callback, isValidItem) => {
+    // is a valid item -> pass through callback
+    if (isValidItem(tree)) {
+        return callback(tree);
+    }
+    // is non-object value -> ignore
+    if (typeof tree !== 'object' || tree === null) {
+        return;
+    }
+    // is obj -> continue
+    const nextObj = {};
+    for (const [prop, value] of Object.entries(tree)) {
+        nextObj[prop] = (0, exports.treeWalker)(value, callback, isValidItem);
+    }
+    return nextObj;
+};
+exports.treeWalker = treeWalker;

package/{src/utilities/upperCaseFirstCharacter.ts → dist/build/utilities/upperCaseFirstCharacter.d.ts}

@@ -5,6 +5,4 @@
  * @param string
  * @returns string
  */
-export const upperCaseFirstCharacter = ([firstLetter, ...restOfWord]: string): string => {
-  return firstLetter.toUpperCase() + restOfWord.join('')
-}
+export declare const upperCaseFirstCharacter: ([firstLetter, ...restOfWord]: string) => string;

package/dist/build/utilities/upperCaseFirstCharacter.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.upperCaseFirstCharacter = void 0;
+/**
+ * upperCaseFirstCharacter
+ * @scope custom implementation should only be used within `name path to ...` transformer
+ * @description changes first letter to uppercase but keeps the rest of the word as is
+ * @param string
+ * @returns string
+ */
+const upperCaseFirstCharacter = ([firstLetter, ...restOfWord]) => {
+    return firstLetter.toUpperCase() + restOfWord.join('');
+};
+exports.upperCaseFirstCharacter = upperCaseFirstCharacter;

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

@@ -1,5 +1,5 @@
 :root {
-  --motion-skeletonLoader-shimmer-duration-scale: 1s;
-  --motion-spinner-duration-rotation: 1s;
-  --motion-loading-delay-default: 1s;
+  --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. */
 }

package/dist/css/functional/size/border.css

@@ -1,5 +1,5 @@
 :root {
-  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
+  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
   --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
   --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
   --borderWidth-thin: max(1px, 0.0625rem);
@@ -8,7 +8,7 @@
   --borderRadius-small: 0.1875rem;
   --borderRadius-medium: 0.375rem;
   --borderRadius-large: 0.75rem;
-  --borderRadius-full: 624.9375rem;
+  --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
   --borderRadius-default: 0.375rem;
   --outline-focus-offset: -0.125rem;
   --outline-focus-width: 0.125rem;

package/dist/css/functional/typography/typography.css

@@ -34,15 +34,15 @@
   --text-title-weight-medium: var(--base-text-weight-semibold);
   --text-title-weight-large: var(--base-text-weight-semibold);
   --text-display-weight: var(--base-text-weight-medium);
-  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
-  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
-  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
-  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
-  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
-  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
-  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
+  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
+  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
+  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
+  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
+  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
+  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
+  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
 }

package/dist/css/primitives.css

@@ -26,12 +26,12 @@
   --base-text-weight-semibold: 600;
 }
 :root {
-  --motion-skeletonLoader-shimmer-duration-scale: 1s;
-  --motion-spinner-duration-rotation: 1s;
-  --motion-loading-delay-default: 1s;
+  --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. */
 }
 :root {
-  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
+  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
   --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
   --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
   --borderWidth-thin: max(1px, 0.0625rem);
@@ -40,7 +40,7 @@
   --borderRadius-small: 0.1875rem;
   --borderRadius-medium: 0.375rem;
   --borderRadius-large: 0.75rem;
-  --borderRadius-full: 624.9375rem;
+  --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
   --borderRadius-default: 0.375rem;
   --outline-focus-offset: -0.125rem;
   --outline-focus-width: 0.125rem;
@@ -171,15 +171,15 @@
   --text-title-weight-medium: var(--base-text-weight-semibold);
   --text-title-weight-large: var(--base-text-weight-semibold);
   --text-display-weight: var(--base-text-weight-medium);
-  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
-  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
-  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
-  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
-  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
-  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
-  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
+  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
+  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
+  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
+  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
+  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
+  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
+  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
 }

package/package.json

@@ -1,14 +1,10 @@
 {
   "name": "@primer/primitives",
-  "version": "9.0.3",
+  "version": "9.1.0-rc.56a8ee48",
   "description": "Typography, spacing, and color primitives for Primer design system",
-  "engines": {
-    "node": ">=18.18.0 <18.19.0"
-  },
   "files": [
     "dist",
-    "src/**/*",
-    "!src/**/*.test.ts"
+    "src/tokens"
   ],
   "repository": "https://github.com/primer/primitives",
   "keywords": [
@@ -26,11 +22,12 @@
   },
   "homepage": "https://github.com/primer/primitives#readme",
   "scripts": {
-    "build": "npm run build:v8 && npm run build:fallbacks && npm run build:figma",
+    "build": "npm run build:v8 && npm run build:fallbacks && npm run build:figma && npm run build:config",
     "build:next": "echo '\\033[31m 🛑 Use npm run build instead of npm run build:next\\033[0m'",
     "build:v8": "tsx ./scripts/buildTokens.ts",
     "build:fallbacks": "tsx ./scripts/buildFallbacks.ts",
     "build:figma": "tsx scripts/buildFigma.ts",
+    "build:config": "tsc -p buildConfig.tsconfig.jsonc",
     "tokenJson:check": "tsx scripts/diffThemes.ts && tsx scripts/diffTokenProps.ts",
     "contrast:check": "tsx scripts/color-contrast.ts",
     "format": "prettier --write  '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
@@ -43,7 +40,8 @@
     "prepack": "npm run build",
     "release": "changeset publish",
     "start:storybook": "npm run build && cd docs/storybook && npm run storybook",
-    "test": "vitest run --coverage"
+    "test": "vitest run --coverage",
+    "test:integration": "vitest run -r integration"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {

package/src/PrimerStyleDictionary.ts

@@ -1,232 +0,0 @@
-import StyleDictionary from 'style-dictionary'
-import {w3cJsonParser} from './parsers'
-import {
-  borderToCss,
-  colorToHexAlpha,
-  colorToRgbAlpha,
-  colorToHex,
-  colorToHexMix,
-  colorToRgbaFloat,
-  dimensionToRem,
-  dimensionToPixelUnitless,
-  durationToCss,
-  figmaAttributes,
-  fontFamilyToCss,
-  fontFamilyToFigma,
-  fontWeightToNumber,
-  jsonDeprecated,
-  namePathToDotNotation,
-  namePathToCamelCase,
-  namePathToKebabCase,
-  namePathToSlashNotation,
-  namePathToFigma,
-  shadowToCss,
-  typographyToCss,
-  dimensionToRemPxArray,
-  floatToPixel,
-  floatToPixelUnitless,
-} from './transformers'
-import {
-  javascriptCommonJs,
-  javascriptEsm,
-  typescriptExportDefinition,
-  jsonNestedPrefixed,
-  cssCustomMedia,
-  jsonOneDimensional,
-  jsonPostCssFallback,
-  cssAdvanced,
-  jsonFigma,
-} from './formats'
-
-/**
- * Parsers
- *
- */
-StyleDictionary.registerParser(w3cJsonParser)
-
-/**
- * Formats
- *
- */
-StyleDictionary.registerFormat({
-  name: 'css/advanced',
-  formatter: cssAdvanced,
-})
-
-StyleDictionary.registerFormat({
-  name: 'css/customMedia',
-  formatter: cssCustomMedia,
-})
-
-StyleDictionary.registerFormat({
-  name: 'javascript/esm',
-  formatter: javascriptEsm,
-})
-
-StyleDictionary.registerFormat({
-  name: 'javascript/commonJs',
-  formatter: javascriptCommonJs,
-})
-
-StyleDictionary.registerFormat({
-  name: 'typescript/export-definition',
-  formatter: typescriptExportDefinition,
-})
-
-StyleDictionary.registerFormat({
-  name: 'json/nested-prefixed',
-  formatter: jsonNestedPrefixed,
-})
-
-StyleDictionary.registerFormat({
-  name: 'json/one-dimensional',
-  formatter: jsonOneDimensional,
-})
-
-StyleDictionary.registerFormat({
-  name: 'json/postCss-fallback',
-  formatter: jsonPostCssFallback,
-})
-
-StyleDictionary.registerFormat({
-  name: 'json/figma',
-  formatter: jsonFigma,
-})
-
-/**
- * Transformers
- *
- */
-StyleDictionary.registerTransform({
-  name: 'color/rgbAlpha',
-  ...colorToRgbAlpha,
-})
-
-StyleDictionary.registerTransform({
-  name: 'color/rgbaFloat',
-  ...colorToRgbaFloat,
-})
-
-StyleDictionary.registerTransform({
-  name: 'color/hexAlpha',
-  ...colorToHexAlpha,
-})
-
-StyleDictionary.registerTransform({
-  name: 'color/hexMix',
-  ...colorToHexMix,
-})
-
-StyleDictionary.registerTransform({
-  name: 'color/hex',
-  ...colorToHex,
-})
-
-StyleDictionary.registerTransform({
-  name: 'float/pixel',
-  ...floatToPixel,
-})
-
-StyleDictionary.registerTransform({
-  name: 'float/pixelUnitless',
-  ...floatToPixelUnitless,
-})
-
-StyleDictionary.registerTransform({
-  name: 'dimension/rem',
-  ...dimensionToRem,
-})
-
-StyleDictionary.registerTransform({
-  name: 'dimension/remPxArray',
-  ...dimensionToRemPxArray,
-})
-
-StyleDictionary.registerTransform({
-  name: 'dimension/pixelUnitless',
-  ...dimensionToPixelUnitless,
-})
-
-StyleDictionary.registerTransform({
-  name: 'duration/css',
-  ...durationToCss,
-})
-
-StyleDictionary.registerTransform({
-  name: 'figma/attributes',
-  ...figmaAttributes,
-})
-
-StyleDictionary.registerTransform({
-  name: 'json/deprecated',
-  ...jsonDeprecated,
-})
-
-StyleDictionary.registerTransform({
-  name: 'name/pathToCamelCase',
-  ...namePathToCamelCase,
-})
-
-StyleDictionary.registerTransform({
-  name: 'name/pathToDotNotation',
-  ...namePathToDotNotation,
-})
-
-StyleDictionary.registerTransform({
-  name: 'name/pathToFigma',
-  ...namePathToFigma,
-})
-
-StyleDictionary.registerTransform({
-  name: 'name/pathToCamelCase',
-  ...namePathToCamelCase,
-})
-
-StyleDictionary.registerTransform({
-  name: 'name/pathToKebabCase',
-  ...namePathToKebabCase,
-})
-
-StyleDictionary.registerTransform({
-  name: 'name/pathToSlashNotation',
-  ...namePathToSlashNotation,
-})
-
-StyleDictionary.registerTransform({
-  name: 'shadow/css',
-  ...shadowToCss,
-})
-
-StyleDictionary.registerTransform({
-  name: 'border/css',
-  ...borderToCss,
-})
-
-StyleDictionary.registerTransform({
-  name: 'typography/css',
-  ...typographyToCss,
-})
-
-StyleDictionary.registerTransform({
-  name: 'fontWeight/number',
-  ...fontWeightToNumber,
-})
-
-StyleDictionary.registerTransform({
-  name: 'fontFamily/css',
-  ...fontFamilyToCss,
-})
-
-StyleDictionary.registerTransform({
-  name: 'fontFamily/figma',
-  ...fontFamilyToFigma,
-})
-
-/**
- * @name {@link PrimerStyleDictionary}
- * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers
- * @parsers [w3cJsonParser](https://github.com/primer/primitives/blob/main/config//parsers/w3c-json-parser.ts)
- * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts)
- * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts)
- */
-export const PrimerStyleDictionary: StyleDictionary.Core = StyleDictionary