@primer/primitives 9.1.0-rc.e0e1c4b6 → 9.1.1-rc.694a8233

package/dist/build/PrimerStyleDictionary.js

@@ -71,6 +71,7 @@ style_dictionary_1.default.registerTransform(Object.assign({ name: 'duration/css
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'figma/attributes' }, transformers_1.figmaAttributes));
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'json/deprecated' }, transformers_1.jsonDeprecated));
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'name/pathToCamelCase' }, transformers_1.namePathToCamelCase));
+style_dictionary_1.default.registerTransform(Object.assign({ name: 'name/pathToPascalCase' }, transformers_1.namePathToPascalCase));
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'name/pathToDotNotation' }, transformers_1.namePathToDotNotation));
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'name/pathToFigma' }, transformers_1.namePathToFigma));
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'name/pathToCamelCase' }, transformers_1.namePathToCamelCase));

package/dist/build/formats/cssAdvanced.js

@@ -16,10 +16,10 @@ const wrapWithSelector = (css, selector) => {
 };
 const cssAdvanced = ({ dictionary: originalDictionary, options = {
     queries: [],
-}, file, platform, }) => {
+}, file, }) => {
     var _a, _b, _c, _d;
     // get options
-    const { outputReferences, descriptions } = options;
+    const { outputReferences, formatting } = options;
     // selector
     const selector = ((_a = file.options) === null || _a === void 0 ? void 0 : _a.selector) !== undefined ? file.options.selector : ':root';
     // query extension property
@@ -32,15 +32,9 @@ const cssAdvanced = ({ dictionary: originalDictionary, options = {
         },
     ];
     // set formatting
-    const formatting = {
-        commentStyle: descriptions ? 'long' : 'none',
-    };
+    const mergedFormatting = Object.assign({ commentStyle: 'long' }, formatting);
     // clone dictionary
     const dictionary = Object.assign({}, originalDictionary);
-    // add prefix to tokens
-    if (platform.prefix) {
-        dictionary.allTokens = dictionary.allTokens.map(token => (Object.assign(Object.assign({}, token), { name: `${platform.prefix}-${token.name}`, path: [platform.prefix, ...token.path] })));
-    }
     // get queries from tokens
     for (const designToken of dictionary.allTokens) {
         const query = (_d = designToken.$extensions) === null || _d === void 0 ? void 0 : _d[queryExtProp];
@@ -73,7 +67,12 @@ const cssAdvanced = ({ dictionary: originalDictionary, options = {
         if (!filteredDictionary.allTokens.length)
             continue;
         // add tokens into root
-        const css = formattedVariables({ format: 'css', dictionary: filteredDictionary, outputReferences, formatting });
+        const css = formattedVariables({
+            format: 'css',
+            dictionary: filteredDictionary,
+            outputReferences,
+            formatting: mergedFormatting,
+        });
         // wrap css
         const cssWithSelector = wrapWithSelector(css, query.selector !== undefined ? query.selector : selector);
         // add css with or without query

package/dist/build/formats/javascriptCommonJs.js

@@ -18,7 +18,7 @@ const javascriptCommonJs = ({ dictionary, file, platform }) => {
     // add prefix if defined
     const tokens = (0, prefixTokens_1.prefixTokens)(dictionary.tokens, platform);
     // add file header and convert output
-    const output = `${fileHeader({ file })}exports.default = ${JSON.stringify((0, jsonToNestedValue_1.jsonToNestedValue)(tokens), null, 2)}\n`;
+    const output = `${fileHeader({ file })}module.exports = ${JSON.stringify((0, jsonToNestedValue_1.jsonToNestedValue)(tokens), null, 2)}\n`;
     // return prettified
     return sync_1.default.format(output, { parser: 'typescript', printWidth: 500 });
 };

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

@@ -16,6 +16,7 @@ export { fontFamilyToFigma } from './fontFamilyToFigma';
 export { fontWeightToNumber } from './fontWeightToNumber';
 export { jsonDeprecated } from './jsonDeprecated';
 export { namePathToCamelCase } from './namePathToCamelCase';
+export { namePathToPascalCase } from './namePathToPascalCase';
 export { namePathToDotNotation } from './namePathToDotNotation';
 export { namePathToFigma } from './namePathToFigma';
 export { namePathToKebabCase } from './namePathToKebabCase';

package/dist/build/transformers/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typographyToCss = exports.shadowToCss = exports.namePathToSlashNotation = exports.namePathToKebabCase = exports.namePathToFigma = exports.namePathToDotNotation = exports.namePathToCamelCase = exports.jsonDeprecated = exports.fontWeightToNumber = exports.fontFamilyToFigma = exports.fontFamilyToCss = exports.figmaAttributes = exports.durationToCss = exports.dimensionToPixelUnitless = exports.dimensionToRemPxArray = exports.dimensionToRem = exports.floatToPixelUnitless = exports.floatToPixel = exports.colorToRgbaFloat = exports.colorToRgbAlpha = exports.colorToHexMix = exports.colorToHexAlpha = exports.colorToHex = exports.borderToCss = void 0;
+exports.typographyToCss = exports.shadowToCss = exports.namePathToSlashNotation = exports.namePathToKebabCase = exports.namePathToFigma = exports.namePathToDotNotation = exports.namePathToPascalCase = exports.namePathToCamelCase = exports.jsonDeprecated = exports.fontWeightToNumber = exports.fontFamilyToFigma = exports.fontFamilyToCss = exports.figmaAttributes = exports.durationToCss = exports.dimensionToPixelUnitless = exports.dimensionToRemPxArray = exports.dimensionToRem = exports.floatToPixelUnitless = exports.floatToPixel = exports.colorToRgbaFloat = exports.colorToRgbAlpha = exports.colorToHexMix = exports.colorToHexAlpha = exports.colorToHex = exports.borderToCss = void 0;
 var borderToCss_1 = require("./borderToCss");
 Object.defineProperty(exports, "borderToCss", { enumerable: true, get: function () { return borderToCss_1.borderToCss; } });
 var colorToHex_1 = require("./colorToHex");
@@ -37,6 +37,8 @@ var jsonDeprecated_1 = require("./jsonDeprecated");
 Object.defineProperty(exports, "jsonDeprecated", { enumerable: true, get: function () { return jsonDeprecated_1.jsonDeprecated; } });
 var namePathToCamelCase_1 = require("./namePathToCamelCase");
 Object.defineProperty(exports, "namePathToCamelCase", { enumerable: true, get: function () { return namePathToCamelCase_1.namePathToCamelCase; } });
+var namePathToPascalCase_1 = require("./namePathToPascalCase");
+Object.defineProperty(exports, "namePathToPascalCase", { enumerable: true, get: function () { return namePathToPascalCase_1.namePathToPascalCase; } });
 var namePathToDotNotation_1 = require("./namePathToDotNotation");
 Object.defineProperty(exports, "namePathToDotNotation", { enumerable: true, get: function () { return namePathToDotNotation_1.namePathToDotNotation; } });
 var namePathToFigma_1 = require("./namePathToFigma");

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,9 +1,10 @@
 {
   "name": "@primer/primitives",
-  "version": "9.1.0-rc.e0e1c4b6",
+  "version": "9.1.1-rc.694a8233",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
-    "dist"
+    "dist",
+    "src/tokens"
   ],
   "repository": "https://github.com/primer/primitives",
   "keywords": [
@@ -21,9 +22,8 @@
   },
   "homepage": "https://github.com/primer/primitives#readme",
   "scripts": {
-    "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": "npm run build:tokens && npm run build:fallbacks && npm run build:figma && npm run build:config",
+    "build:tokens": "tsx ./scripts/buildTokens.ts",
     "build:fallbacks": "tsx ./scripts/buildFallbacks.ts",
     "build:figma": "tsx scripts/buildFigma.ts",
     "build:config": "tsc -p buildConfig.tsconfig.jsonc",
@@ -39,16 +39,21 @@
     "prepack": "npm run build",
     "release": "changeset publish",
     "start:storybook": "npm run build && cd docs/storybook && npm run storybook",
-    "test": "vitest run --coverage"
+    "test": "npm run test:unit && npm run test:integration",
+    "test:unit": "vitest run --coverage",
+    "test:integration": "vitest run -r integration"
   },
   "prettier": "@github/prettier-config",
+  "dependencies": {
+    "prettier": "3.3",
+    "@prettier/sync": "^0.5.2"
+  },
   "devDependencies": {
     "@actions/github": "^6.0.0",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.7",
     "@github/prettier-config": "^0.0.6",
     "@playwright/test": "^1.45.1",
-    "@prettier/sync": "^0.5.2",
     "@types/node": "^20.14.9",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
@@ -68,7 +73,6 @@
     "eslint-plugin-storybook": "^0.8.0",
     "json5": "^2.2.1",
     "markdown-table-ts": "^1.0.3",
-    "prettier": "3.3",
     "style-dictionary": "^3.9.2",
     "tsx": "^4.16.2",
     "typescript": "5.5",