Adding draft role token by lukasoppermann · Pull Request #1255 · primer/primitives

lukasoppermann · 2025-09-10T16:03:54Z

Summary

Adding new draft role token in bgColor, fgColor and borderColor

List of notable changes:

What should reviewers focus on?

Steps to test:

changeset-bot · 2025-09-10T16:03:57Z

🦋 Changeset detected

Latest commit: 3272deb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copilot

Pull Request Overview

This pull request adds new draft role design tokens for foreground, background, and border colors to the Primer design system.

Introduces draft-specific color tokens (fgColor-draft, bgColor-draft-*, borderColor-draft-*)
Adds colorblind accessibility overrides for various vision conditions
Updates documentation with new draft color previews

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/tokens/functional/color/fgColor.json5	Adds draft foreground color token
src/tokens/functional/color/borderColor.json5	Adds draft border color tokens for muted and emphasis variants
src/tokens/functional/color/bgColor.json5	Adds draft background color tokens for muted and emphasis variants
docs/storybook/stories/Color/Functional/Roles.stories.tsx	Adds storybook preview for new draft color tokens
.changeset/nine-nails-shop.md	Documents the minor version change

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

github-actions · 2025-09-10T16:05:31Z

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.

github-actions · 2025-09-10T16:05:32Z

Design Token Diff (Figma)

/figma/themes/dark-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-colorblind.json	2025-09-10 20:44:57.854374558 +0000
@@ -1381,6 +1381,45 @@
   }
 },
 {
+    "name": "bgColor/draft-muted",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 0.1
+    },
+    "type": "COLOR",
+    "alpha": 0.1,
+    "refId": "mode/bgColor/draft-muted",
+    "reference": "mode/bgColor/neutral-muted",
+    "collection": "mode",
+    "mode": "dark protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-muted)"
+    }
+  },
+  {
+    "name": "bgColor/draft-emphasis",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-emphasis",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "bgColor/done-muted",
   "value": {
     "r": 0.6705882352941176,
@@ -1907,6 +1946,45 @@
   }
 },
 {
+    "name": "borderColor/draft-muted",
+    "value": {
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
+      "a": 0.4
+    },
+    "type": "COLOR",
+    "alpha": 0.4,
+    "refId": "mode/borderColor/draft-muted",
+    "reference": "mode/borderColor/default",
+    "collection": "mode",
+    "mode": "dark protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-muted) */"
+    }
+  },
+  {
+    "name": "borderColor/draft-emphasis",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-emphasis",
+    "reference": "mode/borderColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "borderColor/done-muted",
   "value": {
     "r": 0.6705882352941176,
@@ -8249,6 +8327,25 @@
   }
 },
 {
+    "name": "fgColor/draft",
+    "value": {
+      "r": 0.5686274509803921,
+      "g": 0.596078431372549,
+      "b": 0.6313725490196078,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/draft",
+    "reference": "mode/fgColor/neutral",
+    "collection": "mode",
+    "mode": "dark protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--fgColor-draft)"
+    }
+  },
+  {
   "name": "fgColor/done",
   "value": {
     "r": 0.6705882352941176,

/figma/themes/dark-dimmed.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-dimmed.json	2025-09-10 20:44:57.218368948 +0000
@@ -1379,6 +1379,44 @@
   }
 },
 {
+    "name": "bgColor/draft-muted",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 0.2
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-muted",
+    "reference": "mode/bgColor/neutral-muted",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-muted)"
+    }
+  },
+  {
+    "name": "bgColor/draft-emphasis",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-emphasis",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "bgColor/done-muted",
   "value": {
     "r": 0.596078431372549,
@@ -1904,6 +1942,44 @@
   }
 },
 {
+    "name": "borderColor/draft-muted",
+    "value": {
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
+      "a": 0.7
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-muted",
+    "reference": "mode/borderColor/neutral-muted",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-muted) */"
+    }
+  },
+  {
+    "name": "borderColor/draft-emphasis",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-emphasis",
+    "reference": "mode/borderColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "borderColor/done-muted",
   "value": {
     "r": 0.596078431372549,
@@ -8244,6 +8320,25 @@
   }
 },
 {
+    "name": "fgColor/draft",
+    "value": {
+      "r": 0.5686274509803921,
+      "g": 0.596078431372549,
+      "b": 0.6313725490196078,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/draft",
+    "reference": "mode/fgColor/neutral",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--fgColor-draft)"
+    }
+  },
+  {
   "name": "fgColor/done",
   "value": {
     "r": 0.596078431372549,

/figma/themes/dark-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-high-contrast.json	2025-09-10 20:44:58.248378034 +0000
@@ -1378,6 +1378,44 @@
   }
 },
 {
+    "name": "bgColor/draft-muted",
+    "value": {
+      "r": 0.12941176470588237,
+      "g": 0.1568627450980392,
+      "b": 0.18823529411764706,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-muted",
+    "reference": "mode/bgColor/neutral-muted",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-muted)"
+    }
+  },
+  {
+    "name": "bgColor/draft-emphasis",
+    "value": {
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-emphasis",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "bgColor/done-muted",
   "value": {
     "r": 0.7490196078431373,
@@ -1902,6 +1940,44 @@
   }
 },
 {
+    "name": "borderColor/draft-muted",
+    "value": {
+      "r": 0.7176470588235294,
+      "g": 0.7411764705882353,
+      "b": 0.7843137254901961,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-muted",
+    "reference": "mode/borderColor/neutral-muted",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-muted) */"
+    }
+  },
+  {
+    "name": "borderColor/draft-emphasis",
+    "value": {
+      "r": 0.7176470588235294,
+      "g": 0.7411764705882353,
+      "b": 0.7843137254901961,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-emphasis",
+    "reference": "mode/borderColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "borderColor/done-muted",
   "value": {
     "r": 0.7490196078431373,
@@ -8242,6 +8318,25 @@
   }
 },
 {
+    "name": "fgColor/draft",
+    "value": {
+      "r": 0.8196078431372549,
+      "g": 0.8431372549019608,
+      "b": 0.8784313725490196,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/draft",
+    "reference": "mode/fgColor/neutral",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--fgColor-draft)"
+    }
+  },
+  {
   "name": "fgColor/done",
   "value": {
     "r": 0.8274509803921568,

/figma/themes/dark-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-tritanopia.json	2025-09-10 20:44:57.532371718 +0000
@@ -1381,6 +1381,45 @@
   }
 },
 {
+    "name": "bgColor/draft-muted",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 0.1
+    },
+    "type": "COLOR",
+    "alpha": 0.1,
+    "refId": "mode/bgColor/draft-muted",
+    "reference": "mode/bgColor/neutral-muted",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-muted)"
+    }
+  },
+  {
+    "name": "bgColor/draft-emphasis",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-emphasis",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "bgColor/done-muted",
   "value": {
     "r": 0.6705882352941176,
@@ -1906,6 +1945,45 @@
   }
 },
 {
+    "name": "borderColor/draft-muted",
+    "value": {
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
+      "a": 0.4
+    },
+    "type": "COLOR",
+    "alpha": 0.4,
+    "refId": "mode/borderColor/draft-muted",
+    "reference": "mode/borderColor/default",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-muted) */"
+    }
+  },
+  {
+    "name": "borderColor/draft-emphasis",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-emphasis",
+    "reference": "mode/borderColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "borderColor/done-muted",
   "value": {
     "r": 0.6705882352941176,
@@ -8248,6 +8326,25 @@
   }
 },
 {
+    "name": "fgColor/draft",
+    "value": {
+      "r": 0.5686274509803921,
+      "g": 0.596078431372549,
+      "b": 0.6313725490196078,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/draft",
+    "reference": "mode/fgColor/neutral",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--fgColor-draft)"
+    }
+  },
+  {
   "name": "fgColor/done",
   "value": {
     "r": 0.6705882352941176,

/figma/themes/dark.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark.json	2025-09-10 20:44:56.874365914 +0000
@@ -1379,6 +1379,44 @@
   }
 },
 {
+    "name": "bgColor/draft-muted",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 0.2
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-muted",
+    "reference": "mode/bgColor/neutral-muted",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-muted)"
+    }
+  },
+  {
+    "name": "bgColor/draft-emphasis",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-emphasis",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "bgColor/done-muted",
   "value": {
     "r": 0.6705882352941176,
@@ -1903,6 +1941,44 @@
   }
 },
 {
+    "name": "borderColor/draft-muted",
+    "value": {
+      "r": 0.23921568627450981,
+      "g": 0.26666666666666666,
+      "b": 0.30196078431372547,
+      "a": 0.7
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-muted",
+    "reference": "mode/borderColor/neutral-muted",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-muted) */"
+    }
+  },
+  {
+    "name": "borderColor/draft-emphasis",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-emphasis",
+    "reference": "mode/borderColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "borderColor/done-muted",
   "value": {
     "r": 0.6705882352941176,
@@ -8245,6 +8321,25 @@
   }
 },
 {
+    "name": "fgColor/draft",
+    "value": {
+      "r": 0.5686274509803921,
+      "g": 0.596078431372549,
+      "b": 0.6313725490196078,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/draft",
+    "reference": "mode/fgColor/neutral",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--fgColor-draft)"
+    }
+  },
+  {
   "name": "fgColor/done",
   "value": {
     "r": 0.6705882352941176,

/figma/themes/light-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-colorblind.json	2025-09-10 20:44:56.165359660 +0000
@@ -1374,6 +1374,44 @@
   }
 },
 {
+    "name": "bgColor/draft-muted",
+    "value": {
+      "r": 0.5058823529411764,
+      "g": 0.5450980392156862,
+      "b": 0.596078431372549,
+      "a": 0.12
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-muted",
+    "reference": "mode/bgColor/neutral-muted",
+    "collection": "mode",
+    "mode": "light protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-muted)"
+    }
+  },
+  {
+    "name": "bgColor/draft-emphasis",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-emphasis",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "light protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "bgColor/done-muted",
   "value": {
     "r": 0.984313725490196,
@@ -1898,6 +1936,45 @@
   }
 },
 {
+    "name": "borderColor/draft-muted",
+    "value": {
+      "r": 0.8196078431372549,
+      "g": 0.8509803921568627,
+      "b": 0.8784313725490196,
+      "a": 0.4
+    },
+    "type": "COLOR",
+    "alpha": 0.4,
+    "refId": "mode/borderColor/draft-muted",
+    "reference": "mode/borderColor/default",
+    "collection": "mode",
+    "mode": "light protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-muted) */"
+    }
+  },
+  {
+    "name": "borderColor/draft-emphasis",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-emphasis",
+    "reference": "mode/borderColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "light protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "borderColor/done-muted",
   "value": {
     "r": 0.7607843137254902,
@@ -8241,6 +8318,25 @@
   }
 },
 {
+    "name": "fgColor/draft",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/draft",
+    "reference": "mode/fgColor/neutral",
+    "collection": "mode",
+    "mode": "light protanopia deuteranopia",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--fgColor-draft)"
+    }
+  },
+  {
   "name": "fgColor/done",
   "value": {
     "r": 0.5098039215686274,

/figma/themes/light-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-high-contrast.json	2025-09-10 20:44:56.512362721 +0000
@@ -1373,6 +1373,44 @@
   }
 },
 {
+    "name": "bgColor/draft-muted",
+    "value": {
+      "r": 0.8784313725490196,
+      "g": 0.9019607843137255,
+      "b": 0.9215686274509803,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-muted",
+    "reference": "mode/bgColor/neutral-muted",
+    "collection": "mode",
+    "mode": "light high contrast",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-muted)"
+    }
+  },
+  {
+    "name": "bgColor/draft-emphasis",
+    "value": {
+      "r": 0.27058823529411763,
+      "g": 0.2980392156862745,
+      "b": 0.32941176470588235,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-emphasis",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "light high contrast",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "bgColor/done-muted",
   "value": {
     "r": 0.9803921568627451,
@@ -1895,6 +1933,44 @@
   }
 },
 {
+    "name": "borderColor/draft-muted",
+    "value": {
+      "r": 0.27058823529411763,
+      "g": 0.2980392156862745,
+      "b": 0.32941176470588235,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-muted",
+    "reference": "mode/borderColor/neutral-muted",
+    "collection": "mode",
+    "mode": "light high contrast",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-muted) */"
+    }
+  },
+  {
+    "name": "borderColor/draft-emphasis",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-emphasis",
+    "reference": "mode/borderColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "light high contrast",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "borderColor/done-muted",
   "value": {
     "r": 0.6392156862745098,
@@ -8235,6 +8311,25 @@
   }
 },
 {
+    "name": "fgColor/draft",
+    "value": {
+      "r": 0.2235294117647059,
+      "g": 0.24705882352941178,
+      "b": 0.27450980392156865,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/draft",
+    "reference": "mode/fgColor/neutral",
+    "collection": "mode",
+    "mode": "light high contrast",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--fgColor-draft)"
+    }
+  },
+  {
   "name": "fgColor/done",
   "value": {
     "r": 0.3176470588235294,

/figma/themes/light-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-tritanopia.json	2025-09-10 20:44:55.836356723 +0000
@@ -1374,6 +1374,44 @@
   }
 },
 {
+    "name": "bgColor/draft-muted",
+    "value": {
+      "r": 0.5058823529411764,
+      "g": 0.5450980392156862,
+      "b": 0.596078431372549,
+      "a": 0.12
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-muted",
+    "reference": "mode/bgColor/neutral-muted",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-muted)"
+    }
+  },
+  {
+    "name": "bgColor/draft-emphasis",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-emphasis",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "bgColor/done-muted",
   "value": {
     "r": 0.984313725490196,
@@ -1898,6 +1936,45 @@
   }
 },
 {
+    "name": "borderColor/draft-muted",
+    "value": {
+      "r": 0.8196078431372549,
+      "g": 0.8509803921568627,
+      "b": 0.8784313725490196,
+      "a": 0.4
+    },
+    "type": "COLOR",
+    "alpha": 0.4,
+    "refId": "mode/borderColor/draft-muted",
+    "reference": "mode/borderColor/default",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-muted) */"
+    }
+  },
+  {
+    "name": "borderColor/draft-emphasis",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-emphasis",
+    "reference": "mode/borderColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "borderColor/done-muted",
   "value": {
     "r": 0.7607843137254902,
@@ -8240,6 +8317,25 @@
   }
 },
 {
+    "name": "fgColor/draft",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/draft",
+    "reference": "mode/fgColor/neutral",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--fgColor-draft)"
+    }
+  },
+  {
   "name": "fgColor/done",
   "value": {
     "r": 0.5098039215686274,

/figma/themes/light.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light.json	2025-09-10 20:44:55.434353025 +0000
@@ -1373,6 +1373,44 @@
   }
 },
 {
+    "name": "bgColor/draft-muted",
+    "value": {
+      "r": 0.5058823529411764,
+      "g": 0.5450980392156862,
+      "b": 0.596078431372549,
+      "a": 0.12
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-muted",
+    "reference": "mode/bgColor/neutral-muted",
+    "collection": "mode",
+    "mode": "light",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-muted)"
+    }
+  },
+  {
+    "name": "bgColor/draft-emphasis",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/bgColor/draft-emphasis",
+    "reference": "mode/bgColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "semantic",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--bgColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "bgColor/done-muted",
   "value": {
     "r": 0.984313725490196,
@@ -1895,6 +1933,44 @@
   }
 },
 {
+    "name": "borderColor/draft-muted",
+    "value": {
+      "r": 0.8196078431372549,
+      "g": 0.8509803921568627,
+      "b": 0.8784313725490196,
+      "a": 0.7
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-muted",
+    "reference": "mode/borderColor/neutral-muted",
+    "collection": "mode",
+    "mode": "light",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-muted) */"
+    }
+  },
+  {
+    "name": "borderColor/draft-emphasis",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/borderColor/draft-emphasis",
+    "reference": "mode/borderColor/neutral-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "semantic",
+    "scopes": ["STROKE_COLOR"],
+    "codeSyntax": {
+      "web": "var(--borderColor-draft-emphasis)"
+    }
+  },
+  {
   "name": "borderColor/done-muted",
   "value": {
     "r": 0.7607843137254902,
@@ -8237,6 +8313,25 @@
   }
 },
 {
+    "name": "fgColor/draft",
+    "value": {
+      "r": 0.34901960784313724,
+      "g": 0.38823529411764707,
+      "b": 0.43137254901960786,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/draft",
+    "reference": "mode/fgColor/neutral",
+    "collection": "mode",
+    "mode": "light",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"],
+    "codeSyntax": {
+      "web": "var(--fgColor-draft)"
+    }
+  },
+  {
   "name": "fgColor/done",
   "value": {
     "r": 0.5098039215686274,

github-actions · 2025-09-10T16:07:11Z

Design Token Diff (CSS)

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind-high-contrast.css	2025-09-10 20:44:50.634308867 +0000
@@ -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);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2025-09-10 20:44:49.178295473 +0000
@@ -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);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed-high-contrast.css	2025-09-10 20:44:44.736254457 +0000
@@ -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);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2025-09-10 20:44:43.267240873 +0000
@@ -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);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2025-09-10 20:44:52.172323016 +0000
@@ -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);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia-high-contrast.css	2025-09-10 20:44:47.718282032 +0000
@@ -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);

/css/functional/themes/dark-tritanopia.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2025-09-10 20:44:46.193267930 +0000
@@ -661,6 +661,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);
@@ -686,6 +688,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;
@@ -776,6 +779,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);
@@ -813,6 +817,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);
@@ -1518,6 +1523,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);
@@ -1543,6 +1550,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;
@@ -1633,6 +1641,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);
@@ -1670,6 +1679,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);

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2025-09-10 20:44:41.785227168 +0000
@@ -652,6 +652,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-inset: #010409;
 --bgColor-inverse: #ffffff;
 --bgColor-open-emphasis: var(--bgColor-success-emphasis);
@@ -774,6 +776,7 @@
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
 --fgColor-black: #010409;
 --fgColor-closed: var(--fgColor-danger);
+  --fgColor-draft: var(--fgColor-neutral);
 --fgColor-onEmphasis: #ffffff;
 --fgColor-onInverse: #010409;
 --fgColor-open: var(--fgColor-success);
@@ -812,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);
@@ -842,6 +846,7 @@
 --overlay-borderColor: var(--borderColor-muted);
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --border-neutral-muted: 0.0625rem solid #3d444db3;
+  --borderColor-draft-muted: var(--borderColor-neutral-muted);
 --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
 --button-default-borderColor-active: var(--button-default-borderColor-rest);
 --button-default-borderColor-hover: var(--button-default-borderColor-rest);
@@ -1509,6 +1514,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-inset: #010409;
   --bgColor-inverse: #ffffff;
   --bgColor-open-emphasis: var(--bgColor-success-emphasis);
@@ -1631,6 +1638,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-danger);
+    --fgColor-draft: var(--fgColor-neutral);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #010409;
   --fgColor-open: var(--fgColor-success);
@@ -1669,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);
@@ -1699,6 +1708,7 @@
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;
+    --borderColor-draft-muted: var(--borderColor-neutral-muted);
   --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-default-borderColor-active: var(--button-default-borderColor-rest);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);

/css/functional/themes/light-colorblind-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind-high-contrast.css	2025-09-10 20:44:38.848200201 +0000
@@ -629,6 +629,8 @@
 --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
 --bgColor-closed-muted: var(--bgColor-neutral-muted);
 --bgColor-default: #ffffff;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: var(--bgColor-neutral-muted);
 --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
 --bgColor-upsell-muted: var(--bgColor-done-muted);
 --bgColor-white: #ffffff;
@@ -651,6 +653,8 @@
 --border-success-muted: 0.0625rem solid #368cf9;
 --border-transparent: 0.0625rem solid #ffffff00;
 --borderColor-closed-muted: var(--borderColor-default);
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+  --borderColor-draft-muted: var(--borderColor-default);
 --borderColor-emphasis: var(--borderColor-default);
 --borderColor-muted: var(--borderColor-default);
 --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -744,6 +748,7 @@
 --fgColor-black: #010409;
 --fgColor-closed: var(--fgColor-muted);
 --fgColor-default: #010409;
+  --fgColor-draft: var(--fgColor-neutral);
 --fgColor-link: var(--fgColor-accent);
 --fgColor-onEmphasis: #ffffff;
 --fgColor-onInverse: #ffffff;
@@ -1486,6 +1491,8 @@
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
   --bgColor-closed-muted: var(--bgColor-neutral-muted);
   --bgColor-default: #ffffff;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: var(--bgColor-neutral-muted);
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
   --bgColor-upsell-muted: var(--bgColor-done-muted);
   --bgColor-white: #ffffff;
@@ -1508,6 +1515,8 @@
   --border-success-muted: 0.0625rem solid #368cf9;
   --border-transparent: 0.0625rem solid #ffffff00;
   --borderColor-closed-muted: var(--borderColor-default);
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+    --borderColor-draft-muted: var(--borderColor-default);
   --borderColor-emphasis: var(--borderColor-default);
   --borderColor-muted: var(--borderColor-default);
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -1601,6 +1610,7 @@
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-muted);
   --fgColor-default: #010409;
+    --fgColor-draft: var(--fgColor-neutral);
   --fgColor-link: var(--fgColor-accent);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #ffffff;

/css/functional/themes/light-colorblind.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2025-09-10 20:44:37.258185788 +0000
@@ -644,6 +644,8 @@
 --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
 --bgColor-closed-muted: var(--bgColor-neutral-muted);
 --bgColor-default: #ffffff;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: var(--bgColor-neutral-muted);
 --bgColor-inset: var(--bgColor-muted);
 --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
 --bgColor-upsell-muted: var(--bgColor-done-muted);
@@ -669,6 +671,8 @@
 --border-transparent: 0.0625rem solid #ffffff00;
 --borderColor-closed-emphasis: var(--borderColor-emphasis);
 --borderColor-closed-muted: #d1d9e066;
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+  --borderColor-draft-muted: #d1d9e066;
 --borderColor-muted: #d1d9e0b3;
 --borderColor-translucent: #1f232826;
 --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -763,6 +767,7 @@
 --fgColor-black: #1f2328;
 --fgColor-closed: var(--fgColor-muted);
 --fgColor-default: #1f2328;
+  --fgColor-draft: var(--fgColor-neutral);
 --fgColor-link: var(--fgColor-accent);
 --fgColor-onEmphasis: #ffffff;
 --fgColor-onInverse: #ffffff;
@@ -1501,6 +1506,8 @@
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
   --bgColor-closed-muted: var(--bgColor-neutral-muted);
   --bgColor-default: #ffffff;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: var(--bgColor-neutral-muted);
   --bgColor-inset: var(--bgColor-muted);
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
   --bgColor-upsell-muted: var(--bgColor-done-muted);
@@ -1526,6 +1533,8 @@
   --border-transparent: 0.0625rem solid #ffffff00;
   --borderColor-closed-emphasis: var(--borderColor-emphasis);
   --borderColor-closed-muted: #d1d9e066;
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+    --borderColor-draft-muted: #d1d9e066;
   --borderColor-muted: #d1d9e0b3;
   --borderColor-translucent: #1f232826;
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -1620,6 +1629,7 @@
   --fgColor-black: #1f2328;
   --fgColor-closed: var(--fgColor-muted);
   --fgColor-default: #1f2328;
+    --fgColor-draft: var(--fgColor-neutral);
   --fgColor-link: var(--fgColor-accent);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #ffffff;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2025-09-10 20:44:40.355213944 +0000
@@ -622,6 +622,8 @@
 --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
 --bgColor-closed-muted: var(--bgColor-danger-muted);
 --bgColor-default: #ffffff;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: var(--bgColor-neutral-muted);
 --bgColor-open-emphasis: var(--bgColor-success-emphasis);
 --bgColor-open-muted: var(--bgColor-success-muted);
 --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -647,6 +649,7 @@
 --border-transparent: 0.0625rem solid #ffffff00;
 --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
 --borderColor-closed-muted: var(--borderColor-danger-muted);
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
 --borderColor-emphasis: var(--borderColor-default);
 --borderColor-muted: var(--borderColor-default);
 --borderColor-open-emphasis: var(--borderColor-success-emphasis);
@@ -744,6 +747,7 @@
 --fgColor-black: #010409;
 --fgColor-closed: var(--fgColor-danger);
 --fgColor-default: #010409;
+  --fgColor-draft: var(--fgColor-neutral);
 --fgColor-link: var(--fgColor-accent);
 --fgColor-onEmphasis: #ffffff;
 --fgColor-onInverse: #ffffff;
@@ -853,6 +857,7 @@
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --underlineNav-borderColor-hover: var(--borderColor-muted);
 --border-neutral-muted: 0.0625rem solid #454c54;
+  --borderColor-draft-muted: var(--borderColor-neutral-muted);
 --button-default-borderColor-hover: var(--button-default-borderColor-rest);
 --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
}
@@ -1479,6 +1484,8 @@
   --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
   --bgColor-closed-muted: var(--bgColor-danger-muted);
   --bgColor-default: #ffffff;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: var(--bgColor-neutral-muted);
   --bgColor-open-emphasis: var(--bgColor-success-emphasis);
   --bgColor-open-muted: var(--bgColor-success-muted);
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -1504,6 +1511,7 @@
   --border-transparent: 0.0625rem solid #ffffff00;
   --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
   --borderColor-closed-muted: var(--borderColor-danger-muted);
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
   --borderColor-emphasis: var(--borderColor-default);
   --borderColor-muted: var(--borderColor-default);
   --borderColor-open-emphasis: var(--borderColor-success-emphasis);
@@ -1601,6 +1609,7 @@
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-danger);
   --fgColor-default: #010409;
+    --fgColor-draft: var(--fgColor-neutral);
   --fgColor-link: var(--fgColor-accent);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #ffffff;
@@ -1710,6 +1719,7 @@
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #454c54;
+    --borderColor-draft-muted: var(--borderColor-neutral-muted);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }

/css/functional/themes/light-tritanopia-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia-high-contrast.css	2025-09-10 20:44:35.737172000 +0000
@@ -629,6 +629,8 @@
 --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
 --bgColor-closed-muted: var(--bgColor-neutral-muted);
 --bgColor-default: #ffffff;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: var(--bgColor-neutral-muted);
 --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
 --bgColor-upsell-muted: var(--bgColor-done-muted);
 --bgColor-white: #ffffff;
@@ -651,6 +653,8 @@
 --border-success-muted: 0.0625rem solid #368cf9;
 --border-transparent: 0.0625rem solid #ffffff00;
 --borderColor-closed-muted: var(--borderColor-default);
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+  --borderColor-draft-muted: var(--borderColor-default);
 --borderColor-emphasis: var(--borderColor-default);
 --borderColor-muted: var(--borderColor-default);
 --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -744,6 +748,7 @@
 --fgColor-black: #010409;
 --fgColor-closed: var(--fgColor-muted);
 --fgColor-default: #010409;
+  --fgColor-draft: var(--fgColor-neutral);
 --fgColor-link: var(--fgColor-accent);
 --fgColor-onEmphasis: #ffffff;
 --fgColor-onInverse: #ffffff;
@@ -1486,6 +1491,8 @@
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
   --bgColor-closed-muted: var(--bgColor-neutral-muted);
   --bgColor-default: #ffffff;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: var(--bgColor-neutral-muted);
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
   --bgColor-upsell-muted: var(--bgColor-done-muted);
   --bgColor-white: #ffffff;
@@ -1508,6 +1515,8 @@
   --border-success-muted: 0.0625rem solid #368cf9;
   --border-transparent: 0.0625rem solid #ffffff00;
   --borderColor-closed-muted: var(--borderColor-default);
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+    --borderColor-draft-muted: var(--borderColor-default);
   --borderColor-emphasis: var(--borderColor-default);
   --borderColor-muted: var(--borderColor-default);
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -1601,6 +1610,7 @@
   --fgColor-black: #010409;
   --fgColor-closed: var(--fgColor-muted);
   --fgColor-default: #010409;
+    --fgColor-draft: var(--fgColor-neutral);
   --fgColor-link: var(--fgColor-accent);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #ffffff;

/css/functional/themes/light-tritanopia.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css	2025-09-10 20:44:34.219158239 +0000
@@ -649,6 +649,8 @@
 --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
 --bgColor-closed-muted: var(--bgColor-neutral-muted);
 --bgColor-default: #ffffff;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: var(--bgColor-neutral-muted);
 --bgColor-inset: var(--bgColor-muted);
 --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
 --bgColor-upsell-muted: var(--bgColor-done-muted);
@@ -674,6 +676,8 @@
 --border-transparent: 0.0625rem solid #ffffff00;
 --borderColor-closed-emphasis: var(--borderColor-emphasis);
 --borderColor-closed-muted: #d1d9e066;
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+  --borderColor-draft-muted: #d1d9e066;
 --borderColor-muted: #d1d9e0b3;
 --borderColor-translucent: #1f232826;
 --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -764,6 +768,7 @@
 --fgColor-black: #1f2328;
 --fgColor-closed: var(--fgColor-muted);
 --fgColor-default: #1f2328;
+  --fgColor-draft: var(--fgColor-neutral);
 --fgColor-link: var(--fgColor-accent);
 --fgColor-onEmphasis: #ffffff;
 --fgColor-onInverse: #ffffff;
@@ -1506,6 +1511,8 @@
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis);
   --bgColor-closed-muted: var(--bgColor-neutral-muted);
   --bgColor-default: #ffffff;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: var(--bgColor-neutral-muted);
   --bgColor-inset: var(--bgColor-muted);
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
   --bgColor-upsell-muted: var(--bgColor-done-muted);
@@ -1531,6 +1538,8 @@
   --border-transparent: 0.0625rem solid #ffffff00;
   --borderColor-closed-emphasis: var(--borderColor-emphasis);
   --borderColor-closed-muted: #d1d9e066;
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
+    --borderColor-draft-muted: #d1d9e066;
   --borderColor-muted: #d1d9e0b3;
   --borderColor-translucent: #1f232826;
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
@@ -1621,6 +1630,7 @@
   --fgColor-black: #1f2328;
   --fgColor-closed: var(--fgColor-muted);
   --fgColor-default: #1f2328;
+    --fgColor-draft: var(--fgColor-neutral);
   --fgColor-link: var(--fgColor-accent);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #ffffff;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2025-09-10 20:44:31.406132648 +0000
@@ -646,6 +646,8 @@
 --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
 --bgColor-closed-muted: var(--bgColor-danger-muted);
 --bgColor-default: #ffffff;
+  --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+  --bgColor-draft-muted: var(--bgColor-neutral-muted);
 --bgColor-inset: var(--bgColor-muted);
 --bgColor-open-muted: var(--bgColor-success-muted);
 --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -672,6 +674,7 @@
 --border-transparent: 0.0625rem solid #ffffff00;
 --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
 --borderColor-closed-muted: var(--borderColor-danger-muted);
+  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
 --borderColor-muted: #d1d9e0b3;
 --borderColor-open-emphasis: var(--borderColor-success-emphasis);
 --borderColor-open-muted: var(--borderColor-success-muted);
@@ -764,6 +767,7 @@
 --diffBlob-hunkNum-bgColor-hover: var(--bgColor-accent-emphasis);
 --fgColor-black: #1f2328;
 --fgColor-default: #1f2328;
+  --fgColor-draft: var(--fgColor-neutral);
 --fgColor-link: var(--fgColor-accent);
 --fgColor-onEmphasis: #ffffff;
 --fgColor-onInverse: #ffffff;
@@ -844,6 +848,7 @@
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --underlineNav-borderColor-hover: var(--borderColor-muted);
 --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
+  --borderColor-draft-muted: var(--borderColor-neutral-muted);
 --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
 --button-default-borderColor-hover: var(--button-default-borderColor-rest);
 --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
@@ -1503,6 +1508,8 @@
   --bgColor-closed-emphasis: var(--bgColor-danger-emphasis);
   --bgColor-closed-muted: var(--bgColor-danger-muted);
   --bgColor-default: #ffffff;
+    --bgColor-draft-emphasis: var(--bgColor-neutral-emphasis);
+    --bgColor-draft-muted: var(--bgColor-neutral-muted);
   --bgColor-inset: var(--bgColor-muted);
   --bgColor-open-muted: var(--bgColor-success-muted);
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
@@ -1529,6 +1536,7 @@
   --border-transparent: 0.0625rem solid #ffffff00;
   --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
   --borderColor-closed-muted: var(--borderColor-danger-muted);
+    --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis);
   --borderColor-muted: #d1d9e0b3;
   --borderColor-open-emphasis: var(--borderColor-success-emphasis);
   --borderColor-open-muted: var(--borderColor-success-muted);
@@ -1621,6 +1629,7 @@
   --diffBlob-hunkNum-bgColor-hover: var(--bgColor-accent-emphasis);
   --fgColor-black: #1f2328;
   --fgColor-default: #1f2328;
+    --fgColor-draft: var(--fgColor-neutral);
   --fgColor-link: var(--fgColor-accent);
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #ffffff;
@@ -1701,6 +1710,7 @@
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
+    --borderColor-draft-muted: var(--borderColor-neutral-muted);
   --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-primary-borderColor-active: var(--button-primary-borderColor-rest);

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings September 10, 2025 16:03

lukasoppermann requested review from a team as code owners September 10, 2025 16:03

lukasoppermann requested a review from langermank September 10, 2025 16:03

Copilot AI reviewed Sep 10, 2025

View reviewed changes

Comment thread src/tokens/functional/color/bgColor.json5 Resolved

Comment thread src/tokens/functional/color/borderColor.json5 Resolved

lukasoppermann temporarily deployed to github-pages September 10, 2025 16:07 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) September 10, 2025 16:07 Inactive

lukasoppermann temporarily deployed to github-pages September 10, 2025 16:18 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) September 10, 2025 16:18 Inactive

lukasoppermann added the update snapshots Update visual regression test snapshots label Sep 10, 2025

github-actions Bot removed the update snapshots Update visual regression test snapshots label Sep 10, 2025

primer Bot temporarily deployed to github-pages September 10, 2025 17:30 Inactive

github-actions Bot temporarily deployed to Preview (Storybook) September 10, 2025 17:31 Inactive

lukasoppermann and others added 5 commits September 10, 2025 22:41

adding draft token

beb75b0

added storybook story and changeset

227e73d

Update src/tokens/functional/color/bgColor.json5

77d38ad

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions[bot] Regenerated snapshots

0ec2677

adding draft role to all roles story

3272deb

lukasoppermann force-pushed the draft-token branch from 368b795 to 3272deb Compare September 10, 2025 20:43

lukasoppermann temporarily deployed to github-pages September 10, 2025 20:45 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) September 10, 2025 20:46 Inactive

langermank approved these changes Sep 15, 2025

View reviewed changes

lukasoppermann merged commit 092dea7 into main Sep 15, 2025

lukasoppermann deleted the draft-token branch September 15, 2025 14:17

primer Bot mentioned this pull request Sep 15, 2025

Release Tracking #1258

Merged

Conversation

lukasoppermann commented Sep 10, 2025

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

Uh oh!

changeset-bot Bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff (StyleLint)

Uh oh!

github-actions Bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff (Figma)

/figma/themes/dark-colorblind.json

/figma/themes/dark-dimmed.json

/figma/themes/dark-high-contrast.json

/figma/themes/dark-tritanopia.json

/figma/themes/dark.json

/figma/themes/light-colorblind.json

/figma/themes/light-high-contrast.json

/figma/themes/light-tritanopia.json

/figma/themes/light.json

Uh oh!

github-actions Bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff (CSS)

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

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

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

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

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

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

/css/functional/themes/dark-tritanopia.css

/css/functional/themes/dark.css

/css/functional/themes/light-colorblind-high-contrast.css

/css/functional/themes/light-colorblind.css

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

/css/functional/themes/light-tritanopia-high-contrast.css

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Sep 10, 2025 •

edited

Loading

github-actions Bot commented Sep 10, 2025 •

edited

Loading

github-actions Bot commented Sep 10, 2025 •

edited

Loading

github-actions Bot commented Sep 10, 2025 •

edited

Loading