@primer/primitives 9.1.2 → 10.0.0-rc.29e661a3

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