@primer/primitives 11.1.0-rc.f0583fc7 → 11.2.0-rc.1012e204

package/dist/build/schemas/shadowToken.js

@@ -55,15 +55,6 @@ export const shadowToken = baseToken
             'dark-protanopia-deuteranopia': override,
             'dark-high-contrast': override,
             'dark-dimmed': override,
-        }, {
-            errorMap: e => {
-                if (e.code === 'unrecognized_keys') {
-                    return {
-                        message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deuteranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deuteranopia, dark-high-contrast, dark-dimmed`,
-                    };
-                }
-                return { message: `Error: ${e.code}` };
-            },
         })
             .strict()
             .optional(),

package/dist/build/schemas/stringToken.d.ts

@@ -1,18 +1,7 @@
 import { z } from 'zod';
-export declare const stringToken: z.ZodObject<z.objectUtil.extendShape<{
+export declare const stringToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
-    $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
-}, {
-    $value: z.ZodUnion<[z.ZodString, z.ZodEffects<z.ZodString, string, string>]>;
+    $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
+    $value: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
-}>, "strict", z.ZodTypeAny, {
-    $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
-    $description?: string | undefined;
-    $deprecated?: string | boolean | undefined;
-}, {
-    $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
-    $description?: string | undefined;
-    $deprecated?: string | boolean | undefined;
-}>;
+}, z.core.$strict>;

package/dist/build/schemas/tokenName.d.ts

@@ -1,2 +1,2 @@
 import { z } from 'zod';
-export declare const tokenName: z.ZodEffects<z.ZodString, string, string>;
+export declare const tokenName: z.ZodString;

package/dist/build/schemas/tokenName.js

@@ -1,5 +1,10 @@
 import { z } from 'zod';
 import { schemaErrorMessage } from '../utilities/index.js';
-export const tokenName = z.string().refine(name => /(^[a-z0-9][A-Za-z0-9-]*$|^@$)/.test(name), name => ({
-    message: schemaErrorMessage(`Invalid token name: "${name}"`, 'Token name must be kebab-case or camelCase, and start with a lowercase letter or number and consist only of letters, numbers, and hyphens.'),
-}));
+export const tokenName = z.string().superRefine((name, ctx) => {
+    if (!/(^[a-z0-9][A-Za-z0-9-]*$|^@$)/.test(name)) {
+        ctx.addIssue({
+            code: 'custom',
+            message: schemaErrorMessage(`Invalid token name: "${name}"`, 'Token name must be kebab-case or camelCase, and start with a lowercase letter or number and consist only of letters, numbers, and hyphens.'),
+        });
+    }
+});

package/dist/build/schemas/transitionToken.d.ts

@@ -1,38 +1,11 @@
 import { z } from 'zod';
-export declare const transitionToken: z.ZodObject<z.objectUtil.extendShape<{
+export declare const transitionToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
-    $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
-}, {
-    $value: z.ZodUnion<[z.ZodObject<{
-        duration: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>, z.ZodEffects<z.ZodString, string, string>]>;
-        timingFunction: z.ZodUnion<[z.ZodUnion<[z.ZodArray<z.ZodNumber, "many">, z.ZodEffects<z.ZodString, string, string>]>, z.ZodEffects<z.ZodString, string, string>]>;
-        delay: z.ZodOptional<z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>, z.ZodEffects<z.ZodString, string, string>]>>;
-    }, "strip", z.ZodTypeAny, {
-        duration: string;
-        timingFunction: string | number[];
-        delay?: string | undefined;
-    }, {
-        duration: string;
-        timingFunction: string | number[];
-        delay?: string | undefined;
-    }>, z.ZodEffects<z.ZodString, string, string>]>;
+    $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
+    $value: z.ZodUnion<readonly [z.ZodObject<{
+        duration: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodString]>, z.ZodString]>;
+        timingFunction: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodArray<z.ZodNumber>, z.ZodString]>, z.ZodString]>;
+        delay: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodString]>, z.ZodString]>>;
+    }, z.core.$strip>, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
-}>, "strict", z.ZodTypeAny, {
-    $value: string | {
-        duration: string;
-        timingFunction: string | number[];
-        delay?: string | undefined;
-    };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
-    $description?: string | undefined;
-    $deprecated?: string | boolean | undefined;
-}, {
-    $value: string | {
-        duration: string;
-        timingFunction: string | number[];
-        delay?: string | undefined;
-    };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
-    $description?: string | undefined;
-    $deprecated?: string | boolean | undefined;
-}>;
+}, z.core.$strict>;

package/dist/build/schemas/typographyToken.d.ts

@@ -1,59 +1,18 @@
 import { z } from 'zod';
 export declare const typographyValue: z.ZodObject<{
-    fontSize: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
-    lineHeight: z.ZodOptional<z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>>;
-    fontWeight: z.ZodUnion<[z.ZodEffects<z.ZodNumber, number, number>, z.ZodEffects<z.ZodString, string, string>]>;
-    fontFamily: z.ZodUnion<[z.ZodString, z.ZodEffects<z.ZodString, string, string>]>;
-}, "strip", z.ZodTypeAny, {
-    fontFamily: string;
-    fontSize: string | 0;
-    fontWeight: string | number;
-    lineHeight?: string | 0 | undefined;
-}, {
-    fontFamily: string;
-    fontSize: string | 0;
-    fontWeight: string | number;
-    lineHeight?: string | 0 | undefined;
-}>;
-export declare const typographyToken: z.ZodObject<z.objectUtil.extendShape<{
+    fontSize: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>;
+    lineHeight: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>>;
+    fontWeight: z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>;
+    fontFamily: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
+}, z.core.$strip>;
+export declare const typographyToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
-    $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
-}, {
-    $value: z.ZodUnion<[z.ZodObject<{
-        fontSize: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
-        lineHeight: z.ZodOptional<z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>>;
-        fontWeight: z.ZodUnion<[z.ZodEffects<z.ZodNumber, number, number>, z.ZodEffects<z.ZodString, string, string>]>;
-        fontFamily: z.ZodUnion<[z.ZodString, z.ZodEffects<z.ZodString, string, string>]>;
-    }, "strip", z.ZodTypeAny, {
-        fontFamily: string;
-        fontSize: string | 0;
-        fontWeight: string | number;
-        lineHeight?: string | 0 | undefined;
-    }, {
-        fontFamily: string;
-        fontSize: string | 0;
-        fontWeight: string | number;
-        lineHeight?: string | 0 | undefined;
-    }>, z.ZodEffects<z.ZodString, string, string>]>;
+    $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
+    $value: z.ZodUnion<readonly [z.ZodObject<{
+        fontSize: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>;
+        lineHeight: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>>;
+        fontWeight: z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>;
+        fontFamily: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
+    }, z.core.$strip>, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
-}>, "strict", z.ZodTypeAny, {
-    $value: string | {
-        fontFamily: string;
-        fontSize: string | 0;
-        fontWeight: string | number;
-        lineHeight?: string | 0 | undefined;
-    };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
-    $description?: string | undefined;
-    $deprecated?: string | boolean | undefined;
-}, {
-    $value: string | {
-        fontFamily: string;
-        fontSize: string | 0;
-        fontWeight: string | number;
-        lineHeight?: string | 0 | undefined;
-    };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
-    $description?: string | undefined;
-    $deprecated?: string | boolean | undefined;
-}>;
+}, z.core.$strict>;

package/dist/build/schemas/validTokenType.d.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
 declare const validTypes: readonly ["color", "cubicBezier", "typography", "dimension", "duration", "border", "shadow", "fontFamily", "fontWeight", "gradient", "number", "string", "transition", "custom-viewportRange"];
 export type TokenType = (typeof validTypes)[number];
-export declare const validateType: z.ZodRecord<z.ZodString, z.ZodLazy<z.ZodTypeAny>>;
+export declare const validateType: z.ZodRecord<z.ZodString, z.ZodLazy<z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>>;
 export {};

package/dist/build/schemas/validTokenType.js

@@ -23,9 +23,14 @@ export const validateType = z.record(z.string(), z.lazy(() => {
         z
             .object({
             $value: z.any(),
-            $type: z.string().refine(type => validTypes.includes(type), val => ({
-                message: schemaErrorMessage(`Invalid token $type: "${val}"`, `Must be one of the following: ${joinFriendly([...validTypes], 'or')}`),
-            })),
+            $type: z.string().superRefine((value, ctx) => {
+                if (!validTypes.includes(value)) {
+                    ctx.addIssue({
+                        code: 'custom',
+                        message: schemaErrorMessage(`Invalid token $type: "${value}"`, `Must be one of the following: ${joinFriendly([...validTypes], 'or')}`),
+                    });
+                }
+            }),
         })
             .required(),
         validateType,

package/dist/build/schemas/viewportRangeToken.d.ts

@@ -1,18 +1,7 @@
 import { z } from 'zod';
-export declare const viewportRangeToken: z.ZodObject<z.objectUtil.extendShape<{
+export declare const viewportRangeToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
-    $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
-}, {
-    $value: z.ZodUnion<[z.ZodString, z.ZodEffects<z.ZodString, string, string>]>;
+    $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
+    $value: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
-}>, "strict", z.ZodTypeAny, {
-    $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
-    $description?: string | undefined;
-    $deprecated?: string | boolean | undefined;
-}, {
-    $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
-    $description?: string | undefined;
-    $deprecated?: string | boolean | undefined;
-}>;
+}, z.core.$strict>;

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

@@ -1,6 +1,8 @@
 export type TokenBuildInput = {
   // The output filename WITHOUT the extension
   filename: string
+  // defines if the theme should be exported to Figma
+  exportToFigma: boolean
   // Array of `filepaths` to token files that should be converted and included in the output. Accepts relative or glob paths.
   source: string[]
   // The mode of the theme

package/dist/build/utilities/log.js

@@ -17,14 +17,11 @@ const logMessage = (message, type = 'warning', config) => {
         return;
     }
     if (type === 'warning') {
-        // eslint-disable-next-line no-console
         return console.warn(message);
     }
     if (type === 'error') {
-        // eslint-disable-next-line no-console
         return console.error(message);
     }
-    // eslint-disable-next-line no-console
     console.log(message);
 };
 export const log = {

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

@@ -626,6 +626,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #d1d7e066;
+  --progressBar-bgColor-neutral: #656c76;
   --reactionButton-selected-bgColor-rest: #5cacff33;
   --reactionButton-selected-fgColor-hover: #91cbff;
   --selectMenu-bgColor-active: #1e60d5;
@@ -638,6 +639,8 @@
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
   --bgColor-closed-muted: #2128301a;
   --bgColor-default: #010409;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: #2128301a;
   --bgColor-inset: #010409;
   --bgColor-inverse: #ffffff;
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -661,6 +664,7 @@
   --border-success-muted: 0.0625rem solid #5cacff;
   --border-transparent: 0.0625rem solid #00000000;
   --borderColor-closed-muted: var(--borderColor-default);
+  --borderColor-draft-muted: var(--borderColor-default);
   --borderColor-emphasis: var(--borderColor-default);
   --borderColor-muted: var(--borderColor-default);
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -737,6 +741,7 @@
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-muted);
   --fgColor-default: #ffffff;
+  --fgColor-draft: var(--fgColor-neutral);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
@@ -763,6 +768,13 @@
   --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
   --overlay-bgColor: #010409;
   --overlay-borderColor: var(--borderColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3;
@@ -827,6 +839,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #409eff;
   --page-header-bgColor: var(--bgColor-default);
+  --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -835,6 +848,7 @@
   --tooltip-fgColor: var(--fgColor-onInverse);
   --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
   --border-neutral-muted: 0.0625rem solid #b7bdc8;
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
   --button-default-borderColor-active: var(--button-default-borderColor-rest);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-default-fgColor-rest: var(--control-fgColor-rest);
@@ -842,6 +856,7 @@
   --button-invisible-fgColor-hover: var(--control-fgColor-rest);
   --button-invisible-fgColor-rest: var(--control-fgColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1473,6 +1488,7 @@
     --label-yellow-fgColor-rest: #d3910d;
     --menu-bgColor-active: #151b23;
     --overlay-backdrop-bgColor: #d1d7e066;
+    --progressBar-bgColor-neutral: #656c76;
     --reactionButton-selected-bgColor-rest: #5cacff33;
     --reactionButton-selected-fgColor-hover: #91cbff;
     --selectMenu-bgColor-active: #1e60d5;
@@ -1485,6 +1501,8 @@
     --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
     --bgColor-closed-muted: #2128301a;
     --bgColor-default: #010409;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: #2128301a;
     --bgColor-inset: #010409;
     --bgColor-inverse: #ffffff;
     --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -1508,6 +1526,7 @@
     --border-success-muted: 0.0625rem solid #5cacff;
     --border-transparent: 0.0625rem solid #00000000;
     --borderColor-closed-muted: var(--borderColor-default);
+    --borderColor-draft-muted: var(--borderColor-default);
     --borderColor-emphasis: var(--borderColor-default);
     --borderColor-muted: var(--borderColor-default);
     --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -1584,6 +1603,7 @@
     --fgColor-black: #010409;
     --fgColor-closed: var(--fgColor-muted);
     --fgColor-default: #ffffff;
+    --fgColor-draft: var(--fgColor-neutral);
     --fgColor-onEmphasis: #ffffff;
     --fgColor-onInverse: #010409;
     --fgColor-white: #ffffff;
@@ -1610,6 +1630,13 @@
     --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
     --overlay-bgColor: #010409;
     --overlay-borderColor: var(--borderColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #194fb1b3;
@@ -1674,6 +1701,7 @@
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
     --focus-outline: 2px solid #409eff;
     --page-header-bgColor: var(--bgColor-default);
+    --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
     --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
     --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1682,6 +1710,7 @@
     --tooltip-fgColor: var(--fgColor-onInverse);
     --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
     --border-neutral-muted: 0.0625rem solid #b7bdc8;
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
     --button-default-borderColor-active: var(--button-default-borderColor-rest);
     --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --button-default-fgColor-rest: var(--control-fgColor-rest);
@@ -1689,6 +1718,7 @@
     --button-invisible-fgColor-hover: var(--control-fgColor-rest);
     --button-invisible-fgColor-rest: var(--control-fgColor-rest);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

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

@@ -645,6 +645,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #21283066;
+  --progressBar-track-borderColor: #00000000;
   --reactionButton-selected-bgColor-rest: #388bfd33;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --selectMenu-bgColor-active: #0c2d6b;
@@ -657,6 +658,8 @@
   --bgColor-black: #010409;
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
   --bgColor-closed-muted: #656c761a;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: #656c761a;
   --bgColor-inset: #010409;
   --bgColor-inverse: #ffffff;
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -682,6 +685,7 @@
   --border-transparent: 0.0625rem solid #00000000;
   --borderColor-closed-emphasis: var(--borderColor-emphasis);
   --borderColor-closed-muted: #3d444d66;
+  --borderColor-draft-muted: #3d444d66;
   --borderColor-muted: #3d444db3;
   --borderColor-neutral-emphasis: var(--borderColor-emphasis);
   --borderColor-translucent: #ffffff26;
@@ -773,6 +777,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-muted);
+  --fgColor-draft: var(--fgColor-neutral);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #010409;
   --fgColor-upsell: var(--fgColor-done);
@@ -781,6 +786,15 @@
   --header-fgColor-default: #ffffffb3;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3;
@@ -801,6 +815,7 @@
   --border-open-muted: var(--border-success-muted);
   --border-upsell-emphasis: 0.0625rem solid #8957e5;
   --border-upsell-muted: 0.0625rem solid #ab7df866;
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
   --borderColor-neutral-muted: var(--borderColor-muted);
   --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
   --button-danger-borderColor-rest: var(--control-borderColor-rest);
@@ -1492,6 +1507,7 @@
     --label-yellow-fgColor-rest: #d3910d;
     --menu-bgColor-active: #151b23;
     --overlay-backdrop-bgColor: #21283066;
+    --progressBar-track-borderColor: #00000000;
     --reactionButton-selected-bgColor-rest: #388bfd33;
     --reactionButton-selected-fgColor-hover: #79c0ff;
     --selectMenu-bgColor-active: #0c2d6b;
@@ -1504,6 +1520,8 @@
     --bgColor-black: #010409;
     --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
     --bgColor-closed-muted: #656c761a;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: #656c761a;
     --bgColor-inset: #010409;
     --bgColor-inverse: #ffffff;
     --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -1529,6 +1547,7 @@
     --border-transparent: 0.0625rem solid #00000000;
     --borderColor-closed-emphasis: var(--borderColor-emphasis);
     --borderColor-closed-muted: #3d444d66;
+    --borderColor-draft-muted: #3d444d66;
     --borderColor-muted: #3d444db3;
     --borderColor-neutral-emphasis: var(--borderColor-emphasis);
     --borderColor-translucent: #ffffff26;
@@ -1620,6 +1639,7 @@
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
     --fgColor-black: #010409;
     --fgColor-closed: var(--fgColor-muted);
+    --fgColor-draft: var(--fgColor-neutral);
     --fgColor-onEmphasis: #ffffff;
     --fgColor-onInverse: #010409;
     --fgColor-upsell: var(--fgColor-done);
@@ -1628,6 +1648,15 @@
     --header-fgColor-default: #ffffffb3;
     --overlay-bgColor: #010409;
     --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #1f6febb3;
@@ -1648,6 +1677,7 @@
     --border-open-muted: var(--border-success-muted);
     --border-upsell-emphasis: 0.0625rem solid #8957e5;
     --border-upsell-muted: 0.0625rem solid #ab7df866;
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
     --borderColor-neutral-muted: var(--borderColor-muted);
     --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
     --button-danger-borderColor-rest: var(--control-borderColor-rest);

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

@@ -631,6 +631,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #9198a166;
+  --progressBar-bgColor-neutral: #656c76;
   --reactionButton-selected-bgColor-rest: #4184e433;
   --reactionButton-selected-fgColor-hover: #6cb6ff;
   --selectMenu-bgColor-active: #143d79;
@@ -642,6 +643,8 @@
   --bgColor-black: #010409;
   --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
   --bgColor-closed-muted: var(--bgColor-danger-muted);
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: var(--bgColor-neutral-muted);
   --bgColor-inverse: #cdd9e5;
   --bgColor-open-emphasis: var(--bgColor-success-emphasis);
   --bgColor-open-muted: var(--bgColor-success-muted);
@@ -760,6 +763,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-danger);
+  --fgColor-draft: var(--fgColor-neutral);
   --fgColor-link: var(--fgColor-accent);
   --fgColor-onInverse: #010409;
   --fgColor-open: var(--fgColor-success);
@@ -789,6 +793,13 @@
   --overlay-bgColor: #010409;
   --overlay-borderColor: var(--borderColor-default);
   --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1b4b91b3;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -830,6 +841,7 @@
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
   --focus-outline: 2px solid #6cb6ff;
+  --progressBar-track-bgColor: var(--bgColor-inverse);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -839,9 +851,12 @@
   --tooltip-fgColor: var(--fgColor-onInverse);
   --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
   --border-neutral-muted: 0.0625rem solid #b7bdc8;
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+  --borderColor-draft-muted: var(--borderColor-neutral-muted);
   --button-default-borderColor-active: var(--button-default-borderColor-rest);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1478,6 +1493,7 @@
     --label-yellow-fgColor-rest: #d3910d;
     --menu-bgColor-active: #151b23;
     --overlay-backdrop-bgColor: #9198a166;
+    --progressBar-bgColor-neutral: #656c76;
     --reactionButton-selected-bgColor-rest: #4184e433;
     --reactionButton-selected-fgColor-hover: #6cb6ff;
     --selectMenu-bgColor-active: #143d79;
@@ -1489,6 +1505,8 @@
     --bgColor-black: #010409;
     --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
     --bgColor-closed-muted: var(--bgColor-danger-muted);
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: var(--bgColor-neutral-muted);
     --bgColor-inverse: #cdd9e5;
     --bgColor-open-emphasis: var(--bgColor-success-emphasis);
     --bgColor-open-muted: var(--bgColor-success-muted);
@@ -1607,6 +1625,7 @@
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
     --fgColor-black: #010409;
     --fgColor-closed: var(--fgColor-danger);
+    --fgColor-draft: var(--fgColor-neutral);
     --fgColor-link: var(--fgColor-accent);
     --fgColor-onInverse: #010409;
     --fgColor-open: var(--fgColor-success);
@@ -1636,6 +1655,13 @@
     --overlay-bgColor: #010409;
     --overlay-borderColor: var(--borderColor-default);
     --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #1b4b91b3;
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1677,6 +1703,7 @@
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-emphasis);
     --focus-outline: 2px solid #6cb6ff;
+    --progressBar-track-bgColor: var(--bgColor-inverse);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
     --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -1686,9 +1713,12 @@
     --tooltip-fgColor: var(--fgColor-onInverse);
     --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
     --border-neutral-muted: 0.0625rem solid #b7bdc8;
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+    --borderColor-draft-muted: var(--borderColor-neutral-muted);
     --button-default-borderColor-active: var(--button-default-borderColor-rest);
     --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);