@primer/primitives 10.0.0-rc.367a0502 → 10.0.0-rc.d2acd2c0

package/dist/build/utilities/filterStringArray.js

@@ -0,0 +1,13 @@
+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
+    const stringArray = string
+        .filter(Boolean)
+        .join(' ')
+        .replace(regex, ' ')
+        .split(' ')
+        // remove undefined if exists
+        .filter((part) => Boolean(part) && typeof part === 'string');
+    return stringArray;
+};

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

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+export declare const getFlag: (flag: string, prefix?: string) => string | null;

package/dist/build/utilities/getFlag.js

@@ -0,0 +1,12 @@
+/**
+ * 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
+ */
+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}=`, '');
+};

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+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.d.ts

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

package/dist/build/utilities/joinFriendly.js

@@ -0,0 +1 @@
+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.d.ts

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

package/dist/build/utilities/schemaErrorMessage.js

@@ -0,0 +1 @@
+export const schemaErrorMessage = (title, description) => `**${title}**${description ? `\n${description}` : ``}`;

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

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

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,23 @@
+/**
+ * @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 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] = treeWalker(value, callback, isValidItem);
+    }
+    return nextObj;
+};

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

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+export declare const upperCaseFirstCharacter: ([firstLetter, ...restOfWord]: string) => string;

package/dist/build/utilities/upperCaseFirstCharacter.js

@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+export const upperCaseFirstCharacter = ([firstLetter, ...restOfWord]) => {
+    return firstLetter.toUpperCase() + restOfWord.join('');
+};

package/dist/css/functional/themes/dark-colorblind.css

@@ -264,11 +264,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #e6713e;
+  --button-danger-fgColor-rest: #db6d28;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #db6d2880;
-  --button-danger-iconColor-rest: #e6713e;
+  --button-danger-iconColor-rest: #db6d28;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #212830;
   --button-danger-bgColor-hover: #9b4215;
@@ -833,11 +833,11 @@
     --button-outline-borderColor-hover: #3d444d;
     --button-outline-borderColor-selected: #3d444d;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #e6713e;
+    --button-danger-fgColor-rest: #db6d28;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #db6d2880;
-    --button-danger-iconColor-rest: #e6713e;
+    --button-danger-iconColor-rest: #db6d28;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #212830;
     --button-danger-bgColor-hover: #9b4215;

package/dist/css/functional/themes/dark-high-contrast.css

@@ -169,7 +169,7 @@
   --control-bgColor-selected: #262c36;
   --control-fgColor-rest: #ffffff;
   --control-fgColor-placeholder: #b7bdc8;
-  --control-fgColor-disabled: #9198a199;
+  --control-fgColor-disabled: #656c76;
   --control-borderColor-rest: #b7bdc8;
   --control-borderColor-emphasis: #b7bdc8;
   --control-borderColor-disabled: #9198a11f;
@@ -193,21 +193,21 @@
   --control-checked-bgColor-rest: #194fb1;
   --control-checked-bgColor-hover: #2b64c1;
   --control-checked-bgColor-active: #3c79d0;
-  --control-checked-bgColor-disabled: #9198a199;
+  --control-checked-bgColor-disabled: #656c76;
   --control-checked-fgColor-rest: #ffffff;
   --control-checked-fgColor-disabled: #010409;
   --control-checked-borderColor-rest: #91cbff;
   --control-checked-borderColor-hover: #91cbff;
   --control-checked-borderColor-active: #91cbff;
-  --control-checked-borderColor-disabled: #9198a199;
+  --control-checked-borderColor-disabled: #656c76;
   --controlTrack-bgColor-rest: #2a313c;
   --controlTrack-bgColor-hover: #2f3742;
   --controlTrack-bgColor-active: #3d444d;
-  --controlTrack-bgColor-disabled: #9198a199;
+  --controlTrack-bgColor-disabled: #656c76;
   --controlTrack-fgColor-rest: #ffffff;
   --controlTrack-fgColor-disabled: #ffffff;
   --controlTrack-borderColor-rest: #b7bdc8;
-  --controlTrack-borderColor-disabled: #9198a199;
+  --controlTrack-borderColor-disabled: #656c76;
   --controlKnob-bgColor-rest: #010409;
   --controlKnob-bgColor-disabled: #262c36;
   --controlKnob-bgColor-checked: #ffffff;
@@ -242,10 +242,10 @@
   --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
   --button-invisible-fgColor-rest: #ffffff;
   --button-invisible-fgColor-hover: #ffffff;
-  --button-invisible-fgColor-disabled: #9198a199;
+  --button-invisible-fgColor-disabled: #656c76;
   --button-invisible-iconColor-rest: #d1d7e0;
   --button-invisible-iconColor-hover: #d1d7e0;
-  --button-invisible-iconColor-disabled: #9198a199;
+  --button-invisible-iconColor-disabled: #656c76;
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #151b23;
   --button-invisible-bgColor-active: #212830;
@@ -264,11 +264,11 @@
   --button-outline-borderColor-hover: #b7bdc8;
   --button-outline-borderColor-selected: #b7bdc8;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #ffa8a6;
+  --button-danger-fgColor-rest: #ffb1af;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #ff949280;
-  --button-danger-iconColor-rest: #ffa8a6;
+  --button-danger-iconColor-rest: #ffb1af;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #262c36;
   --button-danger-bgColor-hover: #ad0116;
@@ -438,7 +438,7 @@
   --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
-  --fgColor-disabled: #9198a199;
+  --fgColor-disabled: #656c76;
   --fgColor-link: #74b9ff;
   --fgColor-neutral: #d1d7e0;
   --fgColor-accent: #74b9ff;
@@ -738,7 +738,7 @@
     --control-bgColor-selected: #262c36;
     --control-fgColor-rest: #ffffff;
     --control-fgColor-placeholder: #b7bdc8;
-    --control-fgColor-disabled: #9198a199;
+    --control-fgColor-disabled: #656c76;
     --control-borderColor-rest: #b7bdc8;
     --control-borderColor-emphasis: #b7bdc8;
     --control-borderColor-disabled: #9198a11f;
@@ -762,21 +762,21 @@
     --control-checked-bgColor-rest: #194fb1;
     --control-checked-bgColor-hover: #2b64c1;
     --control-checked-bgColor-active: #3c79d0;
-    --control-checked-bgColor-disabled: #9198a199;
+    --control-checked-bgColor-disabled: #656c76;
     --control-checked-fgColor-rest: #ffffff;
     --control-checked-fgColor-disabled: #010409;
     --control-checked-borderColor-rest: #91cbff;
     --control-checked-borderColor-hover: #91cbff;
     --control-checked-borderColor-active: #91cbff;
-    --control-checked-borderColor-disabled: #9198a199;
+    --control-checked-borderColor-disabled: #656c76;
     --controlTrack-bgColor-rest: #2a313c;
     --controlTrack-bgColor-hover: #2f3742;
     --controlTrack-bgColor-active: #3d444d;
-    --controlTrack-bgColor-disabled: #9198a199;
+    --controlTrack-bgColor-disabled: #656c76;
     --controlTrack-fgColor-rest: #ffffff;
     --controlTrack-fgColor-disabled: #ffffff;
     --controlTrack-borderColor-rest: #b7bdc8;
-    --controlTrack-borderColor-disabled: #9198a199;
+    --controlTrack-borderColor-disabled: #656c76;
     --controlKnob-bgColor-rest: #010409;
     --controlKnob-bgColor-disabled: #262c36;
     --controlKnob-bgColor-checked: #ffffff;
@@ -811,10 +811,10 @@
     --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
     --button-invisible-fgColor-rest: #ffffff;
     --button-invisible-fgColor-hover: #ffffff;
-    --button-invisible-fgColor-disabled: #9198a199;
+    --button-invisible-fgColor-disabled: #656c76;
     --button-invisible-iconColor-rest: #d1d7e0;
     --button-invisible-iconColor-hover: #d1d7e0;
-    --button-invisible-iconColor-disabled: #9198a199;
+    --button-invisible-iconColor-disabled: #656c76;
     --button-invisible-bgColor-rest: #00000000;
     --button-invisible-bgColor-hover: #151b23;
     --button-invisible-bgColor-active: #212830;
@@ -833,11 +833,11 @@
     --button-outline-borderColor-hover: #b7bdc8;
     --button-outline-borderColor-selected: #b7bdc8;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #ffa8a6;
+    --button-danger-fgColor-rest: #ffb1af;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #ff949280;
-    --button-danger-iconColor-rest: #ffa8a6;
+    --button-danger-iconColor-rest: #ffb1af;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #262c36;
     --button-danger-bgColor-hover: #ad0116;
@@ -1007,7 +1007,7 @@
     --fgColor-onInverse: #010409;
     --fgColor-white: #ffffff;
     --fgColor-black: #010409;
-    --fgColor-disabled: #9198a199;
+    --fgColor-disabled: #656c76;
     --fgColor-link: #74b9ff;
     --fgColor-neutral: #d1d7e0;
     --fgColor-accent: #74b9ff;

package/dist/css/functional/themes/light-high-contrast.css

@@ -186,7 +186,7 @@
   --control-transparent-borderColor-rest: #ffffff00;
   --control-transparent-borderColor-hover: #454c54;
   --control-transparent-borderColor-active: #454c54;
-  --control-danger-fgColor-rest: #8a071e;
+  --control-danger-fgColor-rest: #86061d;
   --control-danger-fgColor-hover: #ffffff;
   --control-danger-bgColor-hover: #a0111f;
   --control-danger-bgColor-active: #8c0b1d;
@@ -264,11 +264,11 @@
   --button-outline-borderColor-hover: #013d14;
   --button-outline-borderColor-active: #013d14;
   --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
-  --button-danger-fgColor-rest: #8a071e;
+  --button-danger-fgColor-rest: #86061d;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
-  --button-danger-fgColor-disabled: #8a071e80;
-  --button-danger-iconColor-rest: #8a071e;
+  --button-danger-fgColor-disabled: #86061d80;
+  --button-danger-iconColor-rest: #86061d;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #e0e6eb;
   --button-danger-bgColor-hover: #86061d;
@@ -295,7 +295,7 @@
   --buttonCounter-danger-bgColor-rest: #a0111f1a;
   --buttonCounter-danger-fgColor-rest: #980e1e;
   --buttonCounter-danger-fgColor-hover: #ffffff;
-  --buttonCounter-danger-fgColor-disabled: #8a071e80;
+  --buttonCounter-danger-fgColor-disabled: #86061d80;
   --reactionButton-selected-bgColor-rest: #dff7ff;
   --reactionButton-selected-bgColor-hover: #c7e9ff;
   --reactionButton-selected-fgColor-rest: #023b95;
@@ -447,8 +447,8 @@
   --fgColor-open: #024c1a;
   --fgColor-attention: #603700;
   --fgColor-severe: #702c00;
-  --fgColor-danger: #8a071e;
-  --fgColor-closed: #8a071e;
+  --fgColor-danger: #86061d;
+  --fgColor-closed: #86061d;
   --fgColor-done: #512598;
   --fgColor-upsell: #512598;
   --fgColor-sponsors: #7d0c57;
@@ -755,7 +755,7 @@
     --control-transparent-borderColor-rest: #ffffff00;
     --control-transparent-borderColor-hover: #454c54;
     --control-transparent-borderColor-active: #454c54;
-    --control-danger-fgColor-rest: #8a071e;
+    --control-danger-fgColor-rest: #86061d;
     --control-danger-fgColor-hover: #ffffff;
     --control-danger-bgColor-hover: #a0111f;
     --control-danger-bgColor-active: #8c0b1d;
@@ -833,11 +833,11 @@
     --button-outline-borderColor-hover: #013d14;
     --button-outline-borderColor-active: #013d14;
     --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
-    --button-danger-fgColor-rest: #8a071e;
+    --button-danger-fgColor-rest: #86061d;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
-    --button-danger-fgColor-disabled: #8a071e80;
-    --button-danger-iconColor-rest: #8a071e;
+    --button-danger-fgColor-disabled: #86061d80;
+    --button-danger-iconColor-rest: #86061d;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #e0e6eb;
     --button-danger-bgColor-hover: #86061d;
@@ -864,7 +864,7 @@
     --buttonCounter-danger-bgColor-rest: #a0111f1a;
     --buttonCounter-danger-fgColor-rest: #980e1e;
     --buttonCounter-danger-fgColor-hover: #ffffff;
-    --buttonCounter-danger-fgColor-disabled: #8a071e80;
+    --buttonCounter-danger-fgColor-disabled: #86061d80;
     --reactionButton-selected-bgColor-rest: #dff7ff;
     --reactionButton-selected-bgColor-hover: #c7e9ff;
     --reactionButton-selected-fgColor-rest: #023b95;
@@ -1016,8 +1016,8 @@
     --fgColor-open: #024c1a;
     --fgColor-attention: #603700;
     --fgColor-severe: #702c00;
-    --fgColor-danger: #8a071e;
-    --fgColor-closed: #8a071e;
+    --fgColor-danger: #86061d;
+    --fgColor-closed: #86061d;
     --fgColor-done: #512598;
     --fgColor-upsell: #512598;
     --fgColor-sponsors: #7d0c57;

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

@@ -1,23 +1,43 @@
 :root {
+  --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-codeInline-weight: var(--base-text-weight-normal);
   --text-codeInline-size: 0.9285em;
+  --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-codeBlock-weight: var(--base-text-weight-normal);
   --text-codeBlock-lineHeight: 1.5385;
   --text-codeBlock-size: 0.8125rem;
+  --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-caption-weight: var(--base-text-weight-normal);
   --text-caption-lineHeight: 1.3333;
   --text-caption-size: 0.75rem;
+  --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-body-weight: var(--base-text-weight-normal);
   --text-body-lineHeight-small: 1.6666;
   --text-body-lineHeight-medium: 1.4285;
   --text-body-lineHeight-large: 1.5;
   --text-body-size-small: 0.75rem;
   --text-body-size-medium: 0.875rem;
   --text-body-size-large: 1rem;
+  --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-subtitle-weight: var(--base-text-weight-normal);
   --text-subtitle-lineHeight: 1.6;
   --text-subtitle-size: 1.25rem;
+  --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-title-weight-small: var(--base-text-weight-semibold);
+  --text-title-weight-medium: var(--base-text-weight-semibold);
+  --text-title-weight-large: var(--base-text-weight-semibold);
   --text-title-lineHeight-small: 1.5;
   --text-title-lineHeight-medium: 1.6;
   --text-title-lineHeight-large: 1.5;
   --text-title-size-small: 1rem;
   --text-title-size-medium: 1.25rem;
   --text-title-size-large: 2rem;
+  --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. */
+  --text-display-weight: var(--base-text-weight-medium);
   --text-display-lineHeight: 1.4;
   --text-display-size: 2.5rem;
   --text-display-lineBoxHeight: 1.4;
@@ -25,24 +45,4 @@
   --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --text-codeInline-weight: var(--base-text-weight-normal);
-  --text-codeBlock-weight: var(--base-text-weight-normal);
-  --text-caption-weight: var(--base-text-weight-normal);
-  --text-body-weight: var(--base-text-weight-normal);
-  --text-subtitle-weight: var(--base-text-weight-normal);
-  --text-title-weight-small: var(--base-text-weight-semibold);
-  --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); /* 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

@@ -136,25 +136,45 @@
   --overlay-offset: 0.25rem;
 }
 :root {
+  --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-codeInline-weight: var(--base-text-weight-normal);
   --text-codeInline-size: 0.9285em;
+  --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-codeBlock-weight: var(--base-text-weight-normal);
   --text-codeBlock-lineHeight: 1.5385;
   --text-codeBlock-size: 0.8125rem;
+  --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-caption-weight: var(--base-text-weight-normal);
   --text-caption-lineHeight: 1.3333;
   --text-caption-size: 0.75rem;
+  --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-body-weight: var(--base-text-weight-normal);
   --text-body-lineHeight-small: 1.6666;
   --text-body-lineHeight-medium: 1.4285;
   --text-body-lineHeight-large: 1.5;
   --text-body-size-small: 0.75rem;
   --text-body-size-medium: 0.875rem;
   --text-body-size-large: 1rem;
+  --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-subtitle-weight: var(--base-text-weight-normal);
   --text-subtitle-lineHeight: 1.6;
   --text-subtitle-size: 1.25rem;
+  --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-title-weight-small: var(--base-text-weight-semibold);
+  --text-title-weight-medium: var(--base-text-weight-semibold);
+  --text-title-weight-large: var(--base-text-weight-semibold);
   --text-title-lineHeight-small: 1.5;
   --text-title-lineHeight-medium: 1.6;
   --text-title-lineHeight-large: 1.5;
   --text-title-size-small: 1rem;
   --text-title-size-medium: 1.25rem;
   --text-title-size-large: 2rem;
+  --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. */
+  --text-display-weight: var(--base-text-weight-medium);
   --text-display-lineHeight: 1.4;
   --text-display-size: 2.5rem;
   --text-display-lineBoxHeight: 1.4;
@@ -162,24 +182,4 @@
   --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --text-codeInline-weight: var(--base-text-weight-normal);
-  --text-codeBlock-weight: var(--base-text-weight-normal);
-  --text-caption-weight: var(--base-text-weight-normal);
-  --text-body-weight: var(--base-text-weight-normal);
-  --text-subtitle-weight: var(--base-text-weight-normal);
-  --text-title-weight-small: var(--base-text-weight-semibold);
-  --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); /* 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. */
 }