@primer/primitives 9.1.2 → 10.0.0-rc.1bc5b670

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

@@ -1,26 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.invalidTokenValuePropertyError = exports.invalidTokenValueError = void 0;
-const namePathToDotNotation_1 = require("../namePathToDotNotation");
+import { namePathToDotNotation } from '../namePathToDotNotation.js';
 const composeValueErrorMessage = (token) => {
+    var _a, _b;
+    const originalValue = (_a = token.original.$value) !== null && _a !== void 0 ? _a : token.original.value;
+    const value = (_b = token.$value) !== null && _b !== void 0 ? _b : token.value;
     // eslint-disable-next-line i18n-text/no-en
-    return `Invalid token "${namePathToDotNotation_1.namePathToDotNotation.transformer(token, {})}" in file "${token.filePath}". Transformed value: "${JSON.stringify(token.value)}". ${token.original.value ? `Original value: "${JSON.stringify(token.original.value)}" ` : ''}This may be due to referencing a token that does not exists.`;
+    return `Invalid token "${namePathToDotNotation.transform(token, {}, {})}" in file "${token.filePath}". Transformed value: "${JSON.stringify(value)}". ${originalValue ? `Original value: "${JSON.stringify(originalValue)}" ` : ''}This may be due to referencing a token that does not exists.`;
 };
 const composeValuePropertyErrorMessage = (token, property) => {
+    var _a, _b;
+    const originalValue = (_a = token.original.$value) !== null && _a !== void 0 ? _a : token.original.value;
+    const value = (_b = token.$value) !== null && _b !== void 0 ? _b : token.value;
     // eslint-disable-next-line i18n-text/no-en
-    return `Invalid property "${property}" of token "${namePathToDotNotation_1.namePathToDotNotation.transformer(token, {})}" in file "${token.filePath}". Transformed property value: "${token.value[property]}". ${token.original.value ? `Original value: "${token.original.value[property]}" ` : ''}This may be due to referencing a token that does not exists.`;
+    return `Invalid property "${property}" of token "${namePathToDotNotation.transform(token, {}, {})}" in file "${token.filePath}". Transformed property value: "${value[property]}". ${originalValue ? `Original value: "${originalValue[property]}" ` : ''}This may be due to referencing a token that does not exists.`;
 };
-class invalidTokenValueError extends Error {
+export class invalidTokenValueError extends Error {
     constructor(token) {
         super(composeValueErrorMessage(token));
         Error.captureStackTrace(this, invalidTokenValueError);
     }
 }
-exports.invalidTokenValueError = invalidTokenValueError;
-class invalidTokenValuePropertyError extends Error {
+export class invalidTokenValuePropertyError extends Error {
     constructor(token, property) {
         super(composeValuePropertyErrorMessage(token, property));
         Error.captureStackTrace(this, invalidTokenValuePropertyError);
     }
 }
-exports.invalidTokenValuePropertyError = invalidTokenValuePropertyError;

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

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isRgbaFloat = void 0;
 // check if a value is an rgba float object
-const isRgbaFloat = (value) => {
+export const isRgbaFloat = (value) => {
     if (value &&
         typeof value === `object` &&
         'r' in value &&
@@ -21,4 +18,3 @@ const isRgbaFloat = (value) => {
     }
     return false;
 };
-exports.isRgbaFloat = isRgbaFloat;

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

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const color2k_1 = require("color2k");
+import { rgba, parseToRgba } from 'color2k';
 /**
  * Mixes two colors together. Taken from sass's implementation.
  */
@@ -8,8 +6,8 @@ function mix(color1, color2, weight) {
     const normalize = (n, index) => 
     // 3rd index is alpha channel which is already normalized
     index === 3 ? n : n / 255;
-    const [r1, g1, b1, a1] = (0, color2k_1.parseToRgba)(color1).map(normalize);
-    const [r2, g2, b2, a2] = (0, color2k_1.parseToRgba)(color2).map(normalize);
+    const [r1, g1, b1, a1] = parseToRgba(color1).map(normalize);
+    const [r2, g2, b2, a2] = parseToRgba(color2).map(normalize);
     // The formula is copied from the original Sass implementation:
     // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
     const normalizedWeight = 2 * weight - 1;
@@ -23,9 +21,9 @@ function mix(color1, color2, weight) {
     const g = Math.round((g1 * weight1 + g2 * weight2) * 255);
     const b = Math.round((b1 * weight1 + b2 * weight2) * 255);
     const a = a2 * weight + a1 * (1 - weight);
-    return (0, color2k_1.rgba)(r, g, b, a);
+    return rgba(r, g, b, a);
 }
-exports.default = mix;
+export default mix;
 // Number* weight = ARGR("$weight", Number, 0, 100);
 // double p = weight->value()/100;
 // double w = 2*p - 1;

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.rgbaFloatToHex = void 0;
-const rgbaFloatToHex = ({ r, g, b, a }, alpha = true) => {
+export 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.');
@@ -12,4 +9,3 @@ const rgbaFloatToHex = ({ r, g, b, a }, alpha = true) => {
         .padStart(2, '0'))
         .join('')}`;
 };
-exports.rgbaFloatToHex = rgbaFloatToHex;

package/dist/build/types/Border.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description a css border string
+ * @format color | style | width
+ */
+type Border = `${string} ${string} ${string}`

package/dist/build/types/BorderTokenValue.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Type definition for w3c border composite token value
+ * @link https://design-tokens.github.io/community-group/format/#border
+ */
+export type StrokeStyleString = 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'outset' | 'inset'
+export type BorderTokenValue = {
+  color: string
+  width: string
+  style: StrokeStyleString
+}

package/dist/build/types/ColorHex.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @description hex string (6 or 8-digit)
+ */
+type ColorHex = string

package/dist/build/types/PlatformInitializer.d.ts

@@ -0,0 +1,11 @@
+import type {LocalOptions, PlatformConfig} from 'style-dictionary/types'
+
+export type PlatformInitializer = (
+  // the filename including the extension (e.g. `.css`) and any subfolders after the buildPath (e.g. `functional`)
+  outputFile: string,
+  // the prefix is prepended to all tokens
+  prefix: string | undefined,
+  // the build path in which the `outputFile` is placed
+  buildPath: string,
+  options?: LocalOptions,
+) => PlatformConfig

package/dist/build/types/Shadow.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description a css shadow
+ * @format inset? | offset-x | offset-y | blur-radius? | spread-radius? | color?
+ */
+type Shadow = string

package/dist/build/types/ShadowTokenValue.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Type definition for w3c shadow composite token value
+ * @link https://design-tokens.github.io/community-group/format/#shadow
+ */
+export type ShadowTokenValue = {
+  color: string
+  offsetX: string
+  offsetY: string
+  blur: string
+  spread: string
+  // custom non w3c values
+  inset?: boolean
+  alpha?: number
+}

package/dist/build/types/SizeEm.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @description size in em
+ */
+type SizeEm = `${number}em`

package/dist/build/types/SizePx.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @description size in px
+ */
+type SizePx = `${number}px`

package/dist/build/types/SizeRem.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @description size in rem
+ */
+type SizeRem = `${number}rem`

package/dist/build/types/StyleDictionaryConfigGenerator.d.ts

@@ -0,0 +1,15 @@
+import type {Config, PlatformConfig} from 'style-dictionary/types'
+
+export type ConfigGeneratorOptions = {
+  buildPath: string
+  prefix?: string
+  themed?: boolean
+}
+
+export type StyleDictionaryConfigGenerator = (
+  outputName: string,
+  source: string[],
+  include: string[],
+  options: ConfigGeneratorOptions,
+  platforms?: Record<string, PlatformConfig | undefined>,
+) => Config

package/dist/build/types/TokenBuildInput.d.ts

@@ -0,0 +1,8 @@
+export type TokenBuildInput = {
+  // The output filename WITHOUT the extension
+  filename: string
+  // Array of `filepaths` to token files that should be converted and included in the output. Accepts relative or glob paths.
+  source: string[]
+  // Array of `filepaths` to token fils that should NOT be included in the output, but should be available to reference during compilation e.g. base color scales
+  include: string[]
+}

package/dist/build/types/TypographyTokenValue.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Type definition for w3c typography composite token value
+ * @link https://design-tokens.github.io/community-group/format/#typography
+ */
+export type TypographyTokenValue = {
+  fontFamily: string
+  fontSize: number
+  fontWeight: number
+  lineHeight: number
+  fontStyle?: string
+  letterSpacing?: number
+}

package/dist/build/types/w3cTransformedToken.d.ts

@@ -0,0 +1,8 @@
+import type {TransformedToken} from 'style-dictionary/types'
+
+export type w3cTokenType = 'color' | 'dimension' | 'fontFamily' | 'fontWeight' | 'duration' | 'cubicBezier'
+export type w3cCompositeTokenType = 'shadow' | 'border' | 'gradient' | 'transition' | 'strokeStyle' | 'typography'
+
+export interface w3cTransformedToken extends TransformedToken {
+  $type?: w3cTokenType | w3cCompositeTokenType
+}

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

@@ -3,6 +3,6 @@
  * @description Copies all files from source folder to destination
  * @param source path
  * @param destination path
- * @returns promise
+ * @returns promise of file name array
  */
-export declare const copyFromDir: (source: string, destination: string) => Promise<void>;
+export declare const copyFromDir: (source: string, destination: string) => Promise<string[]>;

package/dist/build/utilities/copyFromDir.js

@@ -1,4 +1,3 @@
-"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) {
@@ -8,27 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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");
+import { copyFile, readdir, mkdir } from 'fs/promises';
 /**
  * copyFromDir
  * @description Copies all files from source folder to destination
  * @param source path
  * @param destination path
- * @returns promise
+ * @returns promise of file name array
  */
-const copyFromDir = (source, destination) => __awaiter(void 0, void 0, void 0, function* () {
+export 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 });
+    yield mkdir(dest, { recursive: true });
     // read files from source
-    const files = yield (0, promises_1.readdir)(src);
+    const files = yield readdir(src);
     for (const file of files) {
-        (0, promises_1.copyFile)(`${src}/${file}`, `${dest}/${file}`);
+        copyFile(`${src}/${file}`, `${dest}/${file}`);
     }
+    return files;
 });
-exports.copyFromDir = copyFromDir;

package/dist/build/utilities/filterStringArray.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterStringArray = void 0;
-const filterStringArray = (string) => {
+export 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
@@ -14,4 +11,3 @@ const filterStringArray = (string) => {
         .filter((part) => Boolean(part) && typeof part === 'string');
     return stringArray;
 };
-exports.filterStringArray = filterStringArray;

package/dist/build/utilities/getFlag.js

@@ -1,6 +1,3 @@
-"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
@@ -8,9 +5,8 @@ exports.getFlag = void 0;
  * @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 = '--') => {
+export 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

@@ -1,3 +1,9 @@
-export { copyFromDir } from './copyFromDir';
-export { upperCaseFirstCharacter } from './upperCaseFirstCharacter';
-export { toCamelCase } from './toCamelCase';
+export { copyFromDir } from './copyFromDir.js';
+export { filterStringArray } from './filterStringArray.js';
+export { getFlag } from './getFlag.js';
+export { joinFriendly } from './joinFriendly.js';
+export { schemaErrorMessage } from './schemaErrorMessage.js';
+export { toCamelCase } from './toCamelCase.js';
+export { toPascalCase } from './toPascalCase.js';
+export { treeWalker } from './treeWalker.js';
+export { upperCaseFirstCharacter } from './upperCaseFirstCharacter.js';

package/dist/build/utilities/index.js

@@ -1,9 +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; } });
+export { copyFromDir } from './copyFromDir.js';
+export { filterStringArray } from './filterStringArray.js';
+export { getFlag } from './getFlag.js';
+export { joinFriendly } from './joinFriendly.js';
+export { schemaErrorMessage } from './schemaErrorMessage.js';
+export { toCamelCase } from './toCamelCase.js';
+export { toPascalCase } from './toPascalCase.js';
+export { treeWalker } from './treeWalker.js';
+export { upperCaseFirstCharacter } from './upperCaseFirstCharacter.js';

package/dist/build/utilities/joinFriendly.js

@@ -1,5 +1 @@
-"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;
+export const joinFriendly = (array, lastJoin = 'and') => array.length > 1 ? `${array.slice(0, -1).join(', ')} ${lastJoin} ${array.slice(-1)}` : `${array[0]}`;

package/dist/build/utilities/schemaErrorMessage.js

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

package/dist/build/utilities/toCamelCase.js

@@ -1,20 +1,16 @@
-"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) => {
+import { filterStringArray } from './filterStringArray.js';
+import { upperCaseFirstCharacter } from './upperCaseFirstCharacter.js';
+export const toCamelCase = (string) => {
     if (!Array.isArray(string)) {
         string = [string];
     }
-    return ((0, filterStringArray_1.filterStringArray)(string)
+    return (filterStringArray(string)
         // ucFirst all but first part
         .map((part, index) => {
         if (index > 0) {
-            return (0, upperCaseFirstCharacter_1.upperCaseFirstCharacter)(part);
+            return upperCaseFirstCharacter(part);
         }
         return part;
     })
         .join(''));
 };
-exports.toCamelCase = toCamelCase;

package/dist/build/utilities/toPascalCase.js

@@ -1,17 +1,13 @@
-"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) => {
+import { filterStringArray } from './filterStringArray.js';
+import { upperCaseFirstCharacter } from './upperCaseFirstCharacter.js';
+export const toPascalCase = (string) => {
     if (!Array.isArray(string)) {
         string = [string];
     }
-    return ((0, filterStringArray_1.filterStringArray)(string)
+    return (filterStringArray(string)
         // ucFirst all but first part
         .map((part) => {
-        return (0, upperCaseFirstCharacter_1.upperCaseFirstCharacter)(part);
+        return upperCaseFirstCharacter(part);
     })
         .join(''));
 };
-exports.toPascalCase = toPascalCase;

package/dist/build/utilities/treeWalker.js

@@ -1,6 +1,3 @@
-"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
@@ -8,7 +5,7 @@ exports.treeWalker = void 0;
  * @param validItem function to test if a node is a validItem to be transformed
  * @returns object
  */
-const treeWalker = (tree, callback, isValidItem) => {
+export const treeWalker = (tree, callback, isValidItem) => {
     // is a valid item -> pass through callback
     if (isValidItem(tree)) {
         return callback(tree);
@@ -20,8 +17,7 @@ const treeWalker = (tree, callback, isValidItem) => {
     // is obj -> continue
     const nextObj = {};
     for (const [prop, value] of Object.entries(tree)) {
-        nextObj[prop] = (0, exports.treeWalker)(value, callback, isValidItem);
+        nextObj[prop] = treeWalker(value, callback, isValidItem);
     }
     return nextObj;
 };
-exports.treeWalker = treeWalker;

package/dist/build/utilities/upperCaseFirstCharacter.js

@@ -1,6 +1,3 @@
-"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
@@ -8,7 +5,6 @@ exports.upperCaseFirstCharacter = void 0;
  * @param string
  * @returns string
  */
-const upperCaseFirstCharacter = ([firstLetter, ...restOfWord]) => {
+export const upperCaseFirstCharacter = ([firstLetter, ...restOfWord]) => {
     return firstLetter.toUpperCase() + restOfWord.join('');
 };
-exports.upperCaseFirstCharacter = upperCaseFirstCharacter;

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) */
 }