Add progress bar tokens #1242

langermank · 2025-08-01T01:49:40Z

Adds progressBar tokens to support high contrast themes. Default themes will respect the existing design, while high contrast themes will include custom item colors and an overall track outline.

Check out Primer React for a visual: https://primer-6385406b5d-13348165.drafts.github.io/storybook/?path=/story/components-progressbar-features--all-colors&globals=colorScheme:all

changeset-bot · 2025-08-01T01:49:44Z

🦋 Changeset detected

Latest commit: 2a4c52b

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

github-actions · 2025-08-01T01:54:02Z

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-08-01 18:13:09.529482276 +0000
@@ -626,6 +626,7 @@
 --label-yellow-fgColor-rest: #d3910d;
 --menu-bgColor-active: #151b23;
 --overlay-backdrop-bgColor: #d1d7e066;
+  --progressBar-bgColor-neutral: #656c76;
 --reactionButton-selected-bgColor-rest: #5cacff33;
 --reactionButton-selected-fgColor-hover: #91cbff;
 --selectMenu-bgColor-active: #1e60d5;
@@ -763,6 +764,13 @@
 --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
 --overlay-bgColor: #010409;
 --overlay-borderColor: var(--borderColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #194fb1b3;
@@ -827,6 +835,7 @@
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
 --focus-outline: 2px solid #409eff;
 --page-header-bgColor: var(--bgColor-default);
+  --progressBar-track-bgColor: var(--bgColor-inverse);
 --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
 --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
 --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -842,6 +851,7 @@
 --button-invisible-fgColor-hover: var(--control-fgColor-rest);
 --button-invisible-fgColor-rest: var(--control-fgColor-rest);
 --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
 --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
 --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
 --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1473,6 +1483,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #d1d7e066;
+    --progressBar-bgColor-neutral: #656c76;
   --reactionButton-selected-bgColor-rest: #5cacff33;
   --reactionButton-selected-fgColor-hover: #91cbff;
   --selectMenu-bgColor-active: #1e60d5;
@@ -1610,6 +1621,13 @@
   --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
   --overlay-bgColor: #010409;
   --overlay-borderColor: var(--borderColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3;
@@ -1674,6 +1692,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #409eff;
   --page-header-bgColor: var(--bgColor-default);
+    --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1689,6 +1708,7 @@
   --button-invisible-fgColor-hover: var(--control-fgColor-rest);
   --button-invisible-fgColor-rest: var(--control-fgColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2025-08-01 18:13:07.676470310 +0000
@@ -645,6 +645,7 @@
 --label-yellow-fgColor-rest: #d3910d;
 --menu-bgColor-active: #151b23;
 --overlay-backdrop-bgColor: #21283066;
+  --progressBar-track-borderColor: #00000000;
 --reactionButton-selected-bgColor-rest: #388bfd33;
 --reactionButton-selected-fgColor-hover: #79c0ff;
 --selectMenu-bgColor-active: #0c2d6b;
@@ -781,6 +782,15 @@
 --header-fgColor-default: #ffffffb3;
 --overlay-bgColor: #010409;
 --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #1f6febb3;
@@ -1492,6 +1502,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #21283066;
+    --progressBar-track-borderColor: #00000000;
   --reactionButton-selected-bgColor-rest: #388bfd33;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --selectMenu-bgColor-active: #0c2d6b;
@@ -1628,6 +1639,15 @@
   --header-fgColor-default: #ffffffb3;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed-high-contrast.css	2025-08-01 18:13:02.206434395 +0000
@@ -631,6 +631,7 @@
 --label-yellow-fgColor-rest: #d3910d;
 --menu-bgColor-active: #151b23;
 --overlay-backdrop-bgColor: #9198a166;
+  --progressBar-bgColor-neutral: #656c76;
 --reactionButton-selected-bgColor-rest: #4184e433;
 --reactionButton-selected-fgColor-hover: #6cb6ff;
 --selectMenu-bgColor-active: #143d79;
@@ -789,6 +790,13 @@
 --overlay-bgColor: #010409;
 --overlay-borderColor: var(--borderColor-default);
 --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #1b4b91b3;
 --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -830,6 +838,7 @@
 --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
 --controlTrack-borderColor-rest: var(--borderColor-emphasis);
 --focus-outline: 2px solid #6cb6ff;
+  --progressBar-track-bgColor: var(--bgColor-inverse);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
 --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -842,6 +851,7 @@
 --button-default-borderColor-active: var(--button-default-borderColor-rest);
 --button-default-borderColor-hover: var(--button-default-borderColor-rest);
 --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
 --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
 --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
 --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1478,6 +1488,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #9198a166;
+    --progressBar-bgColor-neutral: #656c76;
   --reactionButton-selected-bgColor-rest: #4184e433;
   --reactionButton-selected-fgColor-hover: #6cb6ff;
   --selectMenu-bgColor-active: #143d79;
@@ -1636,6 +1647,13 @@
   --overlay-bgColor: #010409;
   --overlay-borderColor: var(--borderColor-default);
   --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1b4b91b3;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1677,6 +1695,7 @@
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
   --focus-outline: 2px solid #6cb6ff;
+    --progressBar-track-bgColor: var(--bgColor-inverse);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -1689,6 +1708,7 @@
   --button-default-borderColor-active: var(--button-default-borderColor-rest);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2025-08-01 18:13:00.353421898 +0000
@@ -657,6 +657,7 @@
 --overlay-backdrop-bgColor: #262c3666;
 --overlay-bgColor: #2a313c;
 --overlay-borderColor: #3d444db3;
+  --progressBar-track-borderColor: #00000000;
 --reactionButton-selected-bgColor-rest: #4184e433;
 --reactionButton-selected-fgColor-hover: #6cb6ff;
 --selectMenu-bgColor-active: #143d79;
@@ -798,6 +799,15 @@
 --focus-outlineColor: var(--borderColor-accent-emphasis);
 --header-fgColor-default: #cdd9e5b3;
 --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #316dcab3;
@@ -1504,6 +1514,7 @@
   --overlay-backdrop-bgColor: #262c3666;
   --overlay-bgColor: #2a313c;
   --overlay-borderColor: #3d444db3;
+    --progressBar-track-borderColor: #00000000;
   --reactionButton-selected-bgColor-rest: #4184e433;
   --reactionButton-selected-fgColor-hover: #6cb6ff;
   --selectMenu-bgColor-active: #143d79;
@@ -1645,6 +1656,15 @@
   --focus-outlineColor: var(--borderColor-accent-emphasis);
   --header-fgColor-default: #cdd9e5b3;
   --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #316dcab3;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2025-08-01 18:13:11.374494190 +0000
@@ -620,6 +620,7 @@
 --label-yellow-fgColor-rest: #d3910d;
 --menu-bgColor-active: #151b23;
 --overlay-backdrop-bgColor: #d1d7e066;
+  --progressBar-bgColor-neutral: #656c76;
 --reactionButton-selected-bgColor-rest: #5cacff33;
 --reactionButton-selected-fgColor-hover: #91cbff;
 --selectMenu-bgColor-active: #1e60d5;
@@ -764,6 +765,13 @@
 --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
 --overlay-bgColor: #010409;
 --overlay-borderColor: var(--borderColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #194fb1b3;
@@ -827,6 +835,7 @@
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
 --focus-outline: 2px solid #409eff;
 --page-header-bgColor: var(--bgColor-default);
+  --progressBar-track-bgColor: var(--bgColor-inverse);
 --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
 --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
 --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -842,6 +851,7 @@
 --button-invisible-fgColor-hover: var(--control-fgColor-rest);
 --button-invisible-fgColor-rest: var(--control-fgColor-rest);
 --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
 --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
 --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
 --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1467,6 +1477,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #d1d7e066;
+    --progressBar-bgColor-neutral: #656c76;
   --reactionButton-selected-bgColor-rest: #5cacff33;
   --reactionButton-selected-fgColor-hover: #91cbff;
   --selectMenu-bgColor-active: #1e60d5;
@@ -1611,6 +1622,13 @@
   --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
   --overlay-bgColor: #010409;
   --overlay-borderColor: var(--borderColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3;
@@ -1674,6 +1692,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #409eff;
   --page-header-bgColor: var(--bgColor-default);
+    --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1689,6 +1708,7 @@
   --button-invisible-fgColor-hover: var(--control-fgColor-rest);
   --button-invisible-fgColor-rest: var(--control-fgColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia-high-contrast.css	2025-08-01 18:13:05.727457724 +0000
@@ -626,6 +626,7 @@
 --label-yellow-fgColor-rest: #d3910d;
 --menu-bgColor-active: #151b23;
 --overlay-backdrop-bgColor: #d1d7e066;
+  --progressBar-bgColor-neutral: #656c76;
 --reactionButton-selected-bgColor-rest: #5cacff33;
 --reactionButton-selected-fgColor-hover: #91cbff;
 --selectMenu-bgColor-active: #1e60d5;
@@ -763,6 +764,13 @@
 --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
 --overlay-bgColor: #010409;
 --overlay-borderColor: var(--borderColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #194fb1b3;
@@ -827,6 +835,7 @@
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
 --focus-outline: 2px solid #409eff;
 --page-header-bgColor: var(--bgColor-default);
+  --progressBar-track-bgColor: var(--bgColor-inverse);
 --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
 --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
 --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -842,6 +851,7 @@
 --button-invisible-fgColor-hover: var(--control-fgColor-rest);
 --button-invisible-fgColor-rest: var(--control-fgColor-rest);
 --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
 --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
 --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
 --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1473,6 +1483,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #d1d7e066;
+    --progressBar-bgColor-neutral: #656c76;
   --reactionButton-selected-bgColor-rest: #5cacff33;
   --reactionButton-selected-fgColor-hover: #91cbff;
   --selectMenu-bgColor-active: #1e60d5;
@@ -1610,6 +1621,13 @@
   --label-yellow-borderColor: var(--label-yellow-fgColor-rest);
   --overlay-bgColor: #010409;
   --overlay-borderColor: var(--borderColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3;
@@ -1674,6 +1692,7 @@
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #409eff;
   --page-header-bgColor: var(--bgColor-default);
+    --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
   --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
@@ -1689,6 +1708,7 @@
   --button-invisible-fgColor-hover: var(--control-fgColor-rest);
   --button-invisible-fgColor-rest: var(--control-fgColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2025-08-01 18:13:03.953446177 +0000
@@ -648,6 +648,7 @@
 --label-yellow-fgColor-rest: #d3910d;
 --menu-bgColor-active: #151b23;
 --overlay-backdrop-bgColor: #21283066;
+  --progressBar-track-borderColor: #00000000;
 --reactionButton-selected-bgColor-rest: #388bfd33;
 --reactionButton-selected-fgColor-hover: #79c0ff;
 --selectMenu-bgColor-active: #0c2d6b;
@@ -783,6 +784,15 @@
 --header-fgColor-default: #ffffffb3;
 --overlay-bgColor: #010409;
 --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #1f6febb3;
@@ -1495,6 +1505,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #21283066;
+    --progressBar-track-borderColor: #00000000;
   --reactionButton-selected-bgColor-rest: #388bfd33;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --selectMenu-bgColor-active: #0c2d6b;
@@ -1630,6 +1641,15 @@
   --header-fgColor-default: #ffffffb3;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2025-08-01 18:12:58.585411523 +0000
@@ -639,6 +639,7 @@
 --label-yellow-fgColor-rest: #d3910d;
 --menu-bgColor-active: #151b23;
 --overlay-backdrop-bgColor: #21283066;
+  --progressBar-track-borderColor: #00000000;
 --reactionButton-selected-bgColor-rest: #388bfd33;
 --reactionButton-selected-fgColor-hover: #79c0ff;
 --selectMenu-bgColor-active: #0c2d6b;
@@ -782,6 +783,15 @@
 --header-fgColor-default: #ffffffb3;
 --overlay-bgColor: #010409;
 --page-header-bgColor: var(--bgColor-default);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --selectMenu-borderColor: var(--borderColor-default);
 --selection-bgColor: #1f6febb3;
@@ -1486,6 +1496,7 @@
   --label-yellow-fgColor-rest: #d3910d;
   --menu-bgColor-active: #151b23;
   --overlay-backdrop-bgColor: #21283066;
+    --progressBar-track-borderColor: #00000000;
   --reactionButton-selected-bgColor-rest: #388bfd33;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --selectMenu-bgColor-active: #0c2d6b;
@@ -1629,6 +1640,15 @@
   --header-fgColor-default: #ffffffb3;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind-high-contrast.css	2025-08-01 18:12:55.002394985 +0000
@@ -612,6 +612,8 @@
 --label-yellow-fgColor-rest: #805900;
 --menu-bgColor-active: #ffffff00;
 --overlay-backdrop-bgColor: #393f4666;
+  --progressBar-bgColor-neutral: #818b98;
+  --progressBar-track-borderColor: #393f46;
 --reactionButton-selected-bgColor-rest: #dff7ff;
 --reactionButton-selected-fgColor-hover: #023b95;
 --selectMenu-bgColor-active: #9cd7ff;
@@ -772,6 +774,13 @@
 --overlay-bgColor: #ffffff;
 --overlay-borderColor: var(--borderColor-default);
 --page-header-bgColor: var(--bgColor-muted);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
 --selection-bgColor: #0349b433;
 --shadow-inset: inset 0px 1px 0px 0px #0104090a;
 --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
@@ -835,6 +844,7 @@
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
 --focus-outline: 2px solid #0349b4;
+  --progressBar-track-bgColor: var(--bgColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
 --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
@@ -1459,6 +1469,8 @@
   --label-yellow-fgColor-rest: #805900;
   --menu-bgColor-active: #ffffff00;
   --overlay-backdrop-bgColor: #393f4666;
+    --progressBar-bgColor-neutral: #818b98;
+    --progressBar-track-borderColor: #393f46;
   --reactionButton-selected-bgColor-rest: #dff7ff;
   --reactionButton-selected-fgColor-hover: #023b95;
   --selectMenu-bgColor-active: #9cd7ff;
@@ -1619,6 +1631,13 @@
   --overlay-bgColor: #ffffff;
   --overlay-borderColor: var(--borderColor-default);
   --page-header-bgColor: var(--bgColor-muted);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --selection-bgColor: #0349b433;
   --shadow-inset: inset 0px 1px 0px 0px #0104090a;
   --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
@@ -1682,6 +1701,7 @@
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #0349b4;
+    --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2025-08-01 18:12:53.164381805 +0000
@@ -627,6 +627,7 @@
 --label-yellow-fgColor-rest: #805900;
 --menu-bgColor-active: #ffffff00;
 --overlay-backdrop-bgColor: #c8d1da66;
+  --progressBar-track-borderColor: #ffffff00;
 --reactionButton-selected-bgColor-rest: #ddf4ff;
 --reactionButton-selected-fgColor-hover: #0550ae;
 --selectMenu-bgColor-active: #b6e3ff;
@@ -772,6 +773,15 @@
 --header-fgColor-logo: #ffffff;
 --overlay-bgColor: #ffffff;
 --page-header-bgColor: var(--bgColor-muted);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
 --selection-bgColor: #0969da33;
 --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
@@ -1474,6 +1484,7 @@
   --label-yellow-fgColor-rest: #805900;
   --menu-bgColor-active: #ffffff00;
   --overlay-backdrop-bgColor: #c8d1da66;
+    --progressBar-track-borderColor: #ffffff00;
   --reactionButton-selected-bgColor-rest: #ddf4ff;
   --reactionButton-selected-fgColor-hover: #0550ae;
   --selectMenu-bgColor-active: #b6e3ff;
@@ -1619,6 +1630,15 @@
   --header-fgColor-logo: #ffffff;
   --overlay-bgColor: #ffffff;
   --page-header-bgColor: var(--bgColor-muted);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
   --selection-bgColor: #0969da33;
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2025-08-01 18:12:56.765405635 +0000
@@ -605,6 +605,8 @@
 --label-yellow-fgColor-rest: #805900;
 --menu-bgColor-active: #ffffff00;
 --overlay-backdrop-bgColor: #393f4666;
+  --progressBar-bgColor-neutral: #818b98;
+  --progressBar-track-borderColor: #393f46;
 --reactionButton-selected-bgColor-rest: #dff7ff;
 --reactionButton-selected-fgColor-hover: #023b95;
 --selectMenu-bgColor-active: #9cd7ff;
@@ -773,6 +775,13 @@
 --overlay-bgColor: #ffffff;
 --overlay-borderColor: var(--borderColor-default);
 --page-header-bgColor: var(--bgColor-muted);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
 --selection-bgColor: #0349b433;
 --shadow-inset: inset 0px 1px 0px 0px #0104090a;
 --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
@@ -835,6 +844,7 @@
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
 --focus-outline: 2px solid #0349b4;
+  --progressBar-track-bgColor: var(--bgColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
 --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
@@ -1452,6 +1462,8 @@
   --label-yellow-fgColor-rest: #805900;
   --menu-bgColor-active: #ffffff00;
   --overlay-backdrop-bgColor: #393f4666;
+    --progressBar-bgColor-neutral: #818b98;
+    --progressBar-track-borderColor: #393f46;
   --reactionButton-selected-bgColor-rest: #dff7ff;
   --reactionButton-selected-fgColor-hover: #023b95;
   --selectMenu-bgColor-active: #9cd7ff;
@@ -1620,6 +1632,13 @@
   --overlay-bgColor: #ffffff;
   --overlay-borderColor: var(--borderColor-default);
   --page-header-bgColor: var(--bgColor-muted);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --selection-bgColor: #0349b433;
   --shadow-inset: inset 0px 1px 0px 0px #0104090a;
   --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
@@ -1682,6 +1701,7 @@
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #0349b4;
+    --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia-high-contrast.css	2025-08-01 18:12:51.358368854 +0000
@@ -612,6 +612,8 @@
 --label-yellow-fgColor-rest: #805900;
 --menu-bgColor-active: #ffffff00;
 --overlay-backdrop-bgColor: #393f4666;
+  --progressBar-bgColor-neutral: #818b98;
+  --progressBar-track-borderColor: #393f46;
 --reactionButton-selected-bgColor-rest: #dff7ff;
 --reactionButton-selected-fgColor-hover: #023b95;
 --selectMenu-bgColor-active: #9cd7ff;
@@ -772,6 +774,13 @@
 --overlay-bgColor: #ffffff;
 --overlay-borderColor: var(--borderColor-default);
 --page-header-bgColor: var(--bgColor-muted);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
 --selection-bgColor: #0349b433;
 --shadow-inset: inset 0px 1px 0px 0px #0104090a;
 --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
@@ -835,6 +844,7 @@
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
 --focus-outline: 2px solid #0349b4;
+  --progressBar-track-bgColor: var(--bgColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
 --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
@@ -1459,6 +1469,8 @@
   --label-yellow-fgColor-rest: #805900;
   --menu-bgColor-active: #ffffff00;
   --overlay-backdrop-bgColor: #393f4666;
+    --progressBar-bgColor-neutral: #818b98;
+    --progressBar-track-borderColor: #393f46;
   --reactionButton-selected-bgColor-rest: #dff7ff;
   --reactionButton-selected-fgColor-hover: #023b95;
   --selectMenu-bgColor-active: #9cd7ff;
@@ -1619,6 +1631,13 @@
   --overlay-bgColor: #ffffff;
   --overlay-borderColor: var(--borderColor-default);
   --page-header-bgColor: var(--bgColor-muted);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --selection-bgColor: #0349b433;
   --shadow-inset: inset 0px 1px 0px 0px #0104090a;
   --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
@@ -1682,6 +1701,7 @@
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
   --focus-outline: 2px solid #0349b4;
+    --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css	2025-08-01 18:12:49.535355782 +0000
@@ -632,6 +632,7 @@
 --label-yellow-fgColor-rest: #805900;
 --menu-bgColor-active: #ffffff00;
 --overlay-backdrop-bgColor: #c8d1da66;
+  --progressBar-track-borderColor: #ffffff00;
 --reactionButton-selected-bgColor-rest: #ddf4ff;
 --reactionButton-selected-fgColor-hover: #0550ae;
 --selectMenu-bgColor-active: #b6e3ff;
@@ -773,6 +774,15 @@
 --header-fgColor-logo: #ffffff;
 --overlay-bgColor: #ffffff;
 --page-header-bgColor: var(--bgColor-muted);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
 --selection-bgColor: #0969da33;
 --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
@@ -1479,6 +1489,7 @@
   --label-yellow-fgColor-rest: #805900;
   --menu-bgColor-active: #ffffff00;
   --overlay-backdrop-bgColor: #c8d1da66;
+    --progressBar-track-borderColor: #ffffff00;
   --reactionButton-selected-bgColor-rest: #ddf4ff;
   --reactionButton-selected-fgColor-hover: #0550ae;
   --selectMenu-bgColor-active: #b6e3ff;
@@ -1620,6 +1631,15 @@
   --header-fgColor-logo: #ffffff;
   --overlay-bgColor: #ffffff;
   --page-header-bgColor: var(--bgColor-muted);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
   --selection-bgColor: #0969da33;
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2025-08-01 18:12:46.192637438 +0000
@@ -628,6 +628,8 @@
 --label-yellow-fgColor-rest: #805900;
 --menu-bgColor-active: #ffffff00;
 --overlay-backdrop-bgColor: #c8d1da66;
+  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+  --progressBar-track-borderColor: #ffffff00;
 --reactionButton-selected-bgColor-rest: #ddf4ff;
 --reactionButton-selected-fgColor-hover: #0550ae;
 --selectMenu-bgColor-active: #b6e3ff;
@@ -773,6 +775,14 @@
 --header-fgColor-logo: #ffffff;
 --overlay-bgColor: #ffffff;
 --page-header-bgColor: var(--bgColor-muted);
+  --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+  --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+  --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+  --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+  --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+  --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+  --progressBar-track-bgColor: var(--borderColor-default);
 --selection-bgColor: #0969da33;
 --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
@@ -1475,6 +1485,8 @@
   --label-yellow-fgColor-rest: #805900;
   --menu-bgColor-active: #ffffff00;
   --overlay-backdrop-bgColor: #c8d1da66;
+    --progressBar-bgColor-success: var(--bgColor-success-emphasis);
+    --progressBar-track-borderColor: #ffffff00;
   --reactionButton-selected-bgColor-rest: #ddf4ff;
   --reactionButton-selected-fgColor-hover: #0550ae;
   --selectMenu-bgColor-active: #b6e3ff;
@@ -1620,6 +1632,14 @@
   --header-fgColor-logo: #ffffff;
   --overlay-bgColor: #ffffff;
   --page-header-bgColor: var(--bgColor-muted);
+    --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
+    --progressBar-bgColor-attention: var(--bgColor-attention-emphasis);
+    --progressBar-bgColor-danger: var(--bgColor-danger-emphasis);
+    --progressBar-bgColor-done: var(--bgColor-done-emphasis);
+    --progressBar-bgColor-neutral: var(--bgColor-neutral-emphasis);
+    --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
+    --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
+    --progressBar-track-bgColor: var(--borderColor-default);
   --selection-bgColor: #0969da33;
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;

github-actions · 2025-08-01T01:54:03Z

Design Token Diff (StyleLint)

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

github-actions · 2025-08-01T01:54:03Z

Design Token Diff (Figma)

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

langermank added 2 commits July 31, 2025 18:47

add tokens

7df1a36

copilot adds tokens

a4d65c1

fix

574dc8a

langermank temporarily deployed to github-pages August 1, 2025 01:53 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) August 1, 2025 01:54 Inactive

fix

0653058

langermank temporarily deployed to github-pages August 1, 2025 02:01 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) August 1, 2025 02:01 Inactive

fix order

4edf401

langermank temporarily deployed to github-pages August 1, 2025 02:18 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) August 1, 2025 02:19 Inactive

langermank added the update snapshots Update visual regression test snapshots label Aug 1, 2025

Create beige-pets-lie.md

cfdf0cf

langermank temporarily deployed to github-pages August 1, 2025 02:26 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) August 1, 2025 02:27 Inactive

github-actions[bot] Regenerated snapshots

e8ed0a5

github-actions bot removed the update snapshots Update visual regression test snapshots label Aug 1, 2025

primer bot temporarily deployed to github-pages August 1, 2025 02:57 Inactive

github-actions bot temporarily deployed to Preview (Storybook) August 1, 2025 02:57 Inactive

updates

ddcd584

langermank temporarily deployed to github-pages August 1, 2025 17:14 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) August 1, 2025 17:14 Inactive

fix sponsors

391a16f

langermank temporarily deployed to github-pages August 1, 2025 17:16 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) August 1, 2025 17:17 Inactive

langermank added the update snapshots Update visual regression test snapshots label Aug 1, 2025

github-actions[bot] Regenerated snapshots

2a4c52b

github-actions bot removed the update snapshots Update visual regression test snapshots label Aug 1, 2025

primer bot deployed to github-pages August 1, 2025 18:14 View deployment

github-actions bot temporarily deployed to Preview (Storybook) August 1, 2025 18:14 Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add progress bar tokens #1242

Add progress bar tokens #1242

Uh oh!

langermank commented Aug 1, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Aug 1, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 1, 2025 •

edited

Loading

/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!

github-actions bot commented Aug 1, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 1, 2025 •

edited

Loading

Uh oh!

Uh oh!

Add progress bar tokens #1242

Are you sure you want to change the base?

Add progress bar tokens #1242

Uh oh!

Conversation

langermank commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Aug 1, 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!

github-actions bot commented Aug 1, 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 Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff (Figma)

Uh oh!

Uh oh!

langermank commented Aug 1, 2025 •

edited

Loading

changeset-bot bot commented Aug 1, 2025 •

edited

Loading

github-actions bot commented Aug 1, 2025 •

edited

Loading

github-actions bot commented Aug 1, 2025 •

edited

Loading

github-actions bot commented Aug 1, 2025 •

edited

Loading