@primer/primitives 11.1.0 → 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

@@ -639,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);
@@ -662,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);
@@ -738,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;
@@ -844,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);
@@ -1496,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);
@@ -1519,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);
@@ -1595,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;
@@ -1701,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);

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

@@ -658,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);
@@ -683,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;
@@ -774,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);
@@ -811,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);
@@ -1515,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);
@@ -1540,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;
@@ -1631,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);
@@ -1668,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

@@ -643,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);
@@ -761,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);
@@ -848,6 +851,8 @@
   --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);
@@ -1500,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);
@@ -1618,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);
@@ -1705,6 +1713,8 @@
     --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);

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

@@ -670,6 +670,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);
@@ -698,6 +700,7 @@
   --border-transparent: 0.0625rem solid #00000000;
   --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
   --borderColor-closed-muted: var(--borderColor-danger-muted);
+  --borderColor-draft-muted: var(--borderColor-neutral-muted);
   --borderColor-neutral-emphasis: var(--borderColor-emphasis);
   --borderColor-open-emphasis: var(--borderColor-success-emphasis);
   --borderColor-open-muted: var(--borderColor-success-muted);
@@ -792,6 +795,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-danger);
+  --fgColor-draft: var(--fgColor-neutral);
   --fgColor-onInverse: #010409;
   --fgColor-open: var(--fgColor-success);
   --fgColor-upsell: var(--fgColor-done);
@@ -833,6 +837,7 @@
   --border-open-muted: var(--border-success-muted);
   --border-upsell-emphasis: 0.0625rem solid #8256d0;
   --border-upsell-muted: 0.0625rem solid #986ee266;
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
   --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-fgColor-rest: var(--control-fgColor-rest);
@@ -1527,6 +1532,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);
@@ -1555,6 +1562,7 @@
     --border-transparent: 0.0625rem solid #00000000;
     --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
     --borderColor-closed-muted: var(--borderColor-danger-muted);
+    --borderColor-draft-muted: var(--borderColor-neutral-muted);
     --borderColor-neutral-emphasis: var(--borderColor-emphasis);
     --borderColor-open-emphasis: var(--borderColor-success-emphasis);
     --borderColor-open-muted: var(--borderColor-success-muted);
@@ -1649,6 +1657,7 @@
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
     --fgColor-black: #010409;
     --fgColor-closed: var(--fgColor-danger);
+    --fgColor-draft: var(--fgColor-neutral);
     --fgColor-onInverse: #010409;
     --fgColor-open: var(--fgColor-success);
     --fgColor-upsell: var(--fgColor-done);
@@ -1690,6 +1699,7 @@
     --border-open-muted: var(--border-success-muted);
     --border-upsell-emphasis: 0.0625rem solid #8256d0;
     --border-upsell-muted: 0.0625rem solid #986ee266;
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
     --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-fgColor-rest: var(--control-fgColor-rest);

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

@@ -633,6 +633,8 @@
   --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
   --bgColor-closed-muted: var(--bgColor-danger-muted);
   --bgColor-default: #010409;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: var(--bgColor-neutral-muted);
   --bgColor-inset: #010409;
   --bgColor-inverse: #ffffff;
   --bgColor-open-emphasis: var(--bgColor-success-emphasis);
@@ -739,6 +741,7 @@
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-danger);
   --fgColor-default: #ffffff;
+  --fgColor-draft: var(--fgColor-neutral);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
@@ -844,6 +847,8 @@
   --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);
   --button-default-fgColor-rest: var(--control-fgColor-rest);
@@ -1490,6 +1495,8 @@
     --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
     --bgColor-closed-muted: var(--bgColor-danger-muted);
     --bgColor-default: #010409;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: var(--bgColor-neutral-muted);
     --bgColor-inset: #010409;
     --bgColor-inverse: #ffffff;
     --bgColor-open-emphasis: var(--bgColor-success-emphasis);
@@ -1596,6 +1603,7 @@
     --fgColor-black: #010409;
     --fgColor-closed: var(--fgColor-danger);
     --fgColor-default: #ffffff;
+    --fgColor-draft: var(--fgColor-neutral);
     --fgColor-onEmphasis: #ffffff;
     --fgColor-onInverse: #010409;
     --fgColor-white: #ffffff;
@@ -1701,6 +1709,8 @@
     --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);
     --button-default-fgColor-rest: var(--control-fgColor-rest);

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

@@ -639,6 +639,8 @@
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
   --bgColor-closed-muted: var(--bgColor-danger-muted);
   --bgColor-default: #010409;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: var(--bgColor-neutral-muted);
   --bgColor-inset: #010409;
   --bgColor-inverse: #ffffff;
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -662,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);
@@ -738,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;
@@ -844,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);
@@ -1496,6 +1501,8 @@
     --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
     --bgColor-closed-muted: var(--bgColor-danger-muted);
     --bgColor-default: #010409;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: var(--bgColor-neutral-muted);
     --bgColor-inset: #010409;
     --bgColor-inverse: #ffffff;
     --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -1519,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);
@@ -1595,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;
@@ -1701,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);