diff --git a/.changeset/lovely-vans-burn.md b/.changeset/lovely-vans-burn.md
new file mode 100644
index 00000000000..3622b0bbbbc
--- /dev/null
+++ b/.changeset/lovely-vans-burn.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add `border` and `background-color` tokens to `ProgressBar` CSS, which increases contrast for high contrast themes
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-colorblind-linux.png
similarity index 84%
rename from .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-high-contrast-linux.png
rename to .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-colorblind-linux.png
index d828f979366..ef9126dc77c 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-dimmed-linux.png
similarity index 77%
rename from .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-linux.png
rename to .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-dimmed-linux.png
index baf2d5630f7..17e54170119 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-tritanopia-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-high-contrast-linux.png
similarity index 84%
rename from .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-tritanopia-linux.png
rename to .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-high-contrast-linux.png
index 6fe55fca51d..ca12eae991e 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-linux.png
new file mode 100644
index 00000000000..61fd3df9b8a
Binary files /dev/null and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-colorblind-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-tritanopia-linux.png
similarity index 84%
rename from .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-colorblind-linux.png
rename to .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-tritanopia-linux.png
index 6fe55fca51d..79189b27430 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-colorblind-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-colorblind-linux.png
similarity index 76%
rename from .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-linux.png
rename to .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-colorblind-linux.png
index b272c909a6f..d82ca4f6409 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-dimmed-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-high-contrast-linux.png
similarity index 81%
rename from .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-dimmed-linux.png
rename to .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-high-contrast-linux.png
index 1aa04d731a1..6282a445da6 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-dimmed-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-linux.png
similarity index 74%
rename from .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-high-contrast-linux.png
rename to .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-linux.png
index ea3000d0cfd..7a923ba191c 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-tritanopia-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-tritanopia-linux.png
new file mode 100644
index 00000000000..c785f048b4d
Binary files /dev/null and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-All-Colors-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-colorblind-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-colorblind-linux.png
deleted file mode 100644
index faf3a67e8f3..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-dimmed-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-dimmed-linux.png
deleted file mode 100644
index ac3b4e98551..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-dimmed-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-high-contrast-linux.png
deleted file mode 100644
index 340167ec2fb..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-linux.png
deleted file mode 100644
index faf3a67e8f3..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-tritanopia-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-tritanopia-linux.png
deleted file mode 100644
index faf3a67e8f3..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-dark-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-colorblind-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-colorblind-linux.png
deleted file mode 100644
index d8ed75e00b3..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-high-contrast-linux.png
deleted file mode 100644
index e4fa82fd197..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-linux.png
deleted file mode 100644
index d8ed75e00b3..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-tritanopia-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-tritanopia-linux.png
deleted file mode 100644
index d8ed75e00b3..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Color-light-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Default-dark-high-contrast-linux.png
index ef2a10aeb12..1d5a114fc9f 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Default-light-high-contrast-linux.png
index b283bd048ca..5b2dd5327ea 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-colorblind-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-colorblind-linux.png
deleted file mode 100644
index 1fcdfa55c72..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-tritanopia-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-tritanopia-linux.png
deleted file mode 100644
index 1fcdfa55c72..00000000000
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Inline-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Inline-dark-high-contrast-linux.png
index ec11285ccb7..7296c25b60b 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Inline-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Inline-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Inline-light-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Inline-light-high-contrast-linux.png
index c2b339efe8b..3f140bd2912 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Inline-light-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Inline-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Done-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Done-dark-high-contrast-linux.png
index 32ef7cc4230..1accb21d43d 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Done-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Done-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Half-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Half-dark-high-contrast-linux.png
index d4c72cd5b24..f95be3593df 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Half-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Half-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Half-light-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Half-light-high-contrast-linux.png
index dec0af37bf7..9727f58fae5 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Half-light-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Half-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Zero-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Zero-dark-high-contrast-linux.png
index ef2a10aeb12..1d5a114fc9f 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Zero-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Zero-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Zero-light-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Zero-light-high-contrast-linux.png
index b283bd048ca..5b2dd5327ea 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Zero-light-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Progress-Zero-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Large-dark-high-contrast-linux.png
index 5e63ea9b9d8..0417600cee5 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Large-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Large-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Large-light-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Large-light-high-contrast-linux.png
index 2a5e0f8532d..af17dd094e7 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Large-light-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Large-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Small-dark-high-contrast-linux.png
index a7547cc361d..195fcb41fd7 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Small-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Small-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Small-light-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Small-light-high-contrast-linux.png
index 0af53f0cbda..2632268bc56 100644
Binary files a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Small-light-high-contrast-linux.png and b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Size-Small-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-linux.png
index 5cb9463c515..06967705847 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-linux.png differ
diff --git a/e2e/components/ProgressBar.test.ts b/e2e/components/ProgressBar.test.ts
index 9a7c2eb17ff..5bd3f7ea8b8 100644
--- a/e2e/components/ProgressBar.test.ts
+++ b/e2e/components/ProgressBar.test.ts
@@ -32,12 +32,8 @@ const stories = [
     id: 'components-progressbar-features--inline',
   },
   {
-    title: 'Color',
-    id: 'components-progressbar-features--color',
-  },
-  {
-    title: 'Dev SX Props',
-    id: 'components-progressbar-dev--default',
+    title: 'All Colors',
+    id: 'components-progressbar-features--all-colors',
   },
 ] as const
 
diff --git a/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx
deleted file mode 100644
index 13d81215b61..00000000000
--- a/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {ProgressBar} from '.'
-
-export default {
-  title: 'Components/ProgressBar/Dev',
-  component: ProgressBar,
-}
-
-export const Default = () => (
-  <ProgressBar
-    aria-label="Status"
-    progress={50}
-    sx={{
-      height: '20px',
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderColor: 'success.emphasis',
-    }}
-  />
-)
diff --git a/packages/react/src/ProgressBar/ProgressBar.docs.json b/packages/react/src/ProgressBar/ProgressBar.docs.json
index 9024b827964..d0764e80268 100644
--- a/packages/react/src/ProgressBar/ProgressBar.docs.json
+++ b/packages/react/src/ProgressBar/ProgressBar.docs.json
@@ -26,7 +26,7 @@
       "id": "components-progressbar-features--inline"
     },
     {
-      "id": "components-progressbar-features--color"
+      "id": "components-progressbar-features--all-colors"
     },
     {
       "id": "components-progressbar-features--multiple-items"
diff --git a/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx
index ddf4cc63736..f457b54dcb5 100644
--- a/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx
@@ -13,13 +13,23 @@ export const ProgressDone = () => <ProgressBar progress="100" aria-label="Upload
 export const SizeSmall = () => <ProgressBar progress="66" barSize="small" aria-label="Upload test.png" />
 export const SizeLarge = () => <ProgressBar progress="66" barSize="large" aria-label="Upload test.png" />
 
-export const Inline = () => <ProgressBar inline progress="66" sx={{width: '100px'}} aria-label="Upload test.png" />
+export const Inline = () => <ProgressBar inline progress="66" style={{width: '100px'}} aria-label="Upload test.png" />
 
-export const Color = () => <ProgressBar progress="66" bg="done.emphasis" aria-label="Upload test.png" />
+export const AllColors = () => (
+  <ProgressBar aria-label="Upload test.png">
+    <ProgressBar.Item progress={20} aria-label="Photo Usage" bg="accent.emphasis" />
+    <ProgressBar.Item progress={15} aria-label="Application Usage" bg="danger.emphasis" />
+    <ProgressBar.Item progress={12} aria-label="Music Usage" bg="severe.emphasis" />
+    <ProgressBar.Item progress={11} aria-label="Music Usage" bg="done.emphasis" />
+    <ProgressBar.Item progress={8} aria-label="Music Usage" bg="sponsors.emphasis" />
+    <ProgressBar.Item progress={7} aria-label="Music Usage" bg="neutral.emphasis" />
+    <ProgressBar.Item progress={7} aria-label="Music Usage" bg="attention.emphasis" />
+  </ProgressBar>
+)
 
 export const MultipleItems = () => (
   <ProgressBar>
-    <ProgressBar.Item progress={33} aria-label="Photo Usage" sx={{bg: 'accent.emphasis'}} />
+    <ProgressBar.Item progress={33} aria-label="Photo Usage" bg="accent.emphasis" />
     <ProgressBar.Item progress={23} aria-label="Application Usage" bg={'danger.emphasis'} />
     <ProgressBar.Item progress={14} aria-label="Music Usage" bg={'severe.emphasis'} />
   </ProgressBar>
diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css
index e9f3badcd38..21fdc407afb 100644
--- a/packages/react/src/ProgressBar/ProgressBar.module.css
+++ b/packages/react/src/ProgressBar/ProgressBar.module.css
@@ -28,9 +28,11 @@
   display: flex;
   overflow: hidden;
   /* stylelint-disable-next-line primer/colors */
-  background-color: var(--borderColor-default);
+  background-color: var(--progressBar-track-bgColor);
   border-radius: var(--borderRadius-small);
   gap: 2px;
+  outline: solid 1px var(--progressBar-track-borderColor);
+  outline-offset: -1px;
 
   &:where([data-progress-display='inline']) {
     display: inline-flex;
diff --git a/packages/react/src/ProgressBar/ProgressBar.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.stories.tsx
index 5b61aa2e095..19291d4528b 100644
--- a/packages/react/src/ProgressBar/ProgressBar.stories.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.stories.tsx
@@ -28,7 +28,7 @@ export const Playground = ({sections, ...args}: ProgressBarProps & {sections: nu
   }, [args.bg])
 
   if (sections === 1) {
-    return <ProgressBar {...args} sx={args.inline ? {width: '100px'} : {}} aria-label="Upload test.png" />
+    return <ProgressBar {...args} style={{...(args.inline ? {width: '100px'} : {})}} aria-label="Upload test.png" />
   } else {
     return (
       <ProgressBar aria-label="Upload test.png">
diff --git a/packages/react/src/ProgressBar/ProgressBar.test.tsx b/packages/react/src/ProgressBar/ProgressBar.test.tsx
index f08158f228a..11a6f1f4c5c 100644
--- a/packages/react/src/ProgressBar/ProgressBar.test.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.test.tsx
@@ -27,10 +27,6 @@ describe('ProgressBar', () => {
     expect(container.firstChild).toHaveAttribute('data-progress-display', 'inline')
   })
 
-  it('respects the "progress" prop', () => {
-    expect(render(<ProgressBar progress={80} aria-label="Upload test.png" />)).toMatchSnapshot()
-  })
-
   it('passed the `aria-label` down to the progress bar', () => {
     const {getByRole, getByLabelText} = render(<ProgressBar progress={80} aria-label="Upload test.png" />)
     expect(getByRole('progressbar')).toHaveAttribute('aria-label', 'Upload test.png')
@@ -76,4 +72,76 @@ describe('ProgressBar', () => {
 
     expect(getByRole('progressbar')).toHaveAttribute('aria-valuenow', '0')
   })
+
+  describe('bg prop', () => {
+    it('applies default success bg color when no bg prop is provided', () => {
+      const {getByRole} = render(<ProgressBar progress={50} aria-label="Upload test.png" />)
+      const progressBar = getByRole('progressbar') as HTMLElement
+
+      expect(progressBar.style.getPropertyValue('--progress-bg')).toBe('var(--bgColor-success-emphasis)')
+    })
+
+    it('applies custom bg color when bg prop is provided', () => {
+      const {getByRole} = render(<ProgressBar progress={50} bg="danger.emphasis" aria-label="Upload test.png" />)
+      const progressBar = getByRole('progressbar') as HTMLElement
+
+      expect(progressBar.style.getPropertyValue('--progress-bg')).toBe('var(--bgColor-danger-emphasis)')
+    })
+
+    it('handles different color variants correctly', () => {
+      const colorVariants = [
+        {input: 'danger.emphasis', expected: 'var(--bgColor-danger-emphasis)'},
+        {input: 'severe.emphasis', expected: 'var(--bgColor-severe-emphasis)'},
+        {input: 'sponsor.emphasis', expected: 'var(--bgColor-sponsor-emphasis)'},
+        {input: 'done.emphasis', expected: 'var(--bgColor-done-emphasis)'},
+        {input: 'accent.emphasis', expected: 'var(--bgColor-accent-emphasis)'},
+        {input: 'success.emphasis', expected: 'var(--bgColor-success-emphasis)'},
+        {input: 'neutral.emphasis', expected: 'var(--bgColor-neutral-emphasis)'},
+        {input: 'attention.emphasis', expected: 'var(--bgColor-attention-emphasis)'},
+      ]
+
+      for (const {input, expected} of colorVariants) {
+        const {getByRole, unmount} = render(<ProgressBar progress={50} bg={input} aria-label="Upload test.png" />)
+        const progressBar = getByRole('progressbar') as HTMLElement
+
+        expect(progressBar.style.getPropertyValue('--progress-bg')).toBe(expected)
+
+        // Clean up after each test to avoid multiple elements
+        unmount()
+      }
+    })
+
+    it('applies bg color to ProgressBar.Item when used in multi-item setup', () => {
+      const {container} = render(
+        <ProgressBar aria-label="Upload test.png">
+          <ProgressBar.Item progress={30} bg="danger.emphasis" aria-label="Danger item" />
+          <ProgressBar.Item progress={20} bg="success.emphasis" aria-label="Success item" />
+        </ProgressBar>,
+      )
+
+      const progressBars = container.querySelectorAll('[role="progressbar"]')
+
+      expect((progressBars[0] as HTMLElement).style.getPropertyValue('--progress-bg')).toBe(
+        'var(--bgColor-danger-emphasis)',
+      )
+      expect((progressBars[1] as HTMLElement).style.getPropertyValue('--progress-bg')).toBe(
+        'var(--bgColor-success-emphasis)',
+      )
+    })
+
+    it('handles bg values without emphasis gracefully', () => {
+      const {getByRole} = render(<ProgressBar progress={50} bg="danger" aria-label="Upload test.png" />)
+      const progressBar = getByRole('progressbar') as HTMLElement
+
+      expect(progressBar.style.getPropertyValue('--progress-bg')).toBe('var(--bgColor-danger-emphasis)')
+    })
+
+    it('preserves progress width regardless of bg color', () => {
+      const {getByRole} = render(<ProgressBar progress={75} bg="danger.emphasis" aria-label="Upload test.png" />)
+      const progressBar = getByRole('progressbar') as HTMLElement
+
+      expect(progressBar.style.getPropertyValue('--progress-width')).toBe('75%')
+      expect(progressBar.style.getPropertyValue('--progress-bg')).toBe('var(--bgColor-danger-emphasis)')
+    })
+  })
 })
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 69bfa985333..79f22c70688 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -33,6 +33,7 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
       'aria-valuetext': ariaValueText,
       className,
       style,
+      bg,
       ...rest
     },
     forwardRef,
@@ -51,9 +52,10 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
     const progressBarBg = '--progress-bg'
     const styles: {[key: string]: string} = {}
 
-    const bgType = rest.bg && rest.bg.split('.')
+    const bgType = bg && bg.split('.')
     styles[progressBarWidth] = progress ? `${progress}%` : '0%'
-    styles[progressBarBg] = (bgType && `var(--bgColor-${bgType[0]}-${bgType[1]})`) || 'var(--bgColor-success-emphasis)'
+    styles[progressBarBg] =
+      (bgType && `var(--bgColor-${bgType[0]}-${bgType[1] || 'emphasis'})`) || 'var(--bgColor-success-emphasis)'
 
     return (
       <BoxWithFallback
diff --git a/packages/react/src/ProgressBar/__snapshots__/ProgressBar.test.tsx.snap b/packages/react/src/ProgressBar/__snapshots__/ProgressBar.test.tsx.snap
deleted file mode 100644
index beb312ce168..00000000000
--- a/packages/react/src/ProgressBar/__snapshots__/ProgressBar.test.tsx.snap
+++ /dev/null
@@ -1,98 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`ProgressBar > respects the "progress" prop 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    
-  
-
-
-    <div>
-      <span
-        class="prc-ProgressBar-ProgressBarContainer-VJMc2"
-        data-progress-bar-size="default"
-        data-progress-display="block"
-      >
-        <span
-          aria-label="Upload test.png"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          aria-valuenow="80"
-          class="sc-aXZVg lfjCwU prc-ProgressBar-ProgressBarItem-NPfsV"
-          role="progressbar"
-          style="--progress-width: 80%; --progress-bg: var(--bgColor-success-emphasis);"
-        />
-      </span>
-    </div>
-  </body>,
-  "container": <div>
-    <span
-      class="prc-ProgressBar-ProgressBarContainer-VJMc2"
-      data-progress-bar-size="default"
-      data-progress-display="block"
-    >
-      <span
-        aria-label="Upload test.png"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="80"
-        class="sc-aXZVg lfjCwU prc-ProgressBar-ProgressBarItem-NPfsV"
-        role="progressbar"
-        style="--progress-width: 80%; --progress-bg: var(--bgColor-success-emphasis);"
-      />
-    </span>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;