diff --git a/playground/entries/ProgressBar.tsx b/playground/entries/ProgressBar.tsx
index de7da825a4..6bdbd0fc93 100644
--- a/playground/entries/ProgressBar.tsx
+++ b/playground/entries/ProgressBar.tsx
@@ -23,8 +23,8 @@ const entry: PlaygroundEntry<NSProgressBar.Props> = {
     },
     theme: {
       type: 'select',
-      value: 'invert',
-      options: ['invert', 'dark'],
+      value: 'default',
+      options: ['default', 'brand', 'invert'],
       displayName: 'Theme',
     },
     duration: {
diff --git a/semcore/progress-bar/__tests__/progress-bar.axe-test.ts b/semcore/progress-bar/__tests__/progress-bar.axe-test.ts
index a6d6b98c4a..707c6dc54c 100644
--- a/semcore/progress-bar/__tests__/progress-bar.axe-test.ts
+++ b/semcore/progress-bar/__tests__/progress-bar.axe-test.ts
@@ -10,8 +10,8 @@ test.describe(`@progress-bar ${TAG.ACCESSIBILITY}`, () => {
     expect(violations).toEqual([]);
   });
 
-  test('Customizing the bar', async ({ page }) => {
-    await loadPage(page, 'stories/components/progress-bar/docs/examples/customizing_the_bar.tsx', 'en');
+  test('All themes on light and dark backgrounds', async ({ page }) => {
+    await loadPage(page, 'stories/components/progress-bar/advanced/examples/all_themes.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
     expect(violations).toEqual([]);
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx
index 732fcd267a..c62d51a7dd 100644
--- a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx
+++ b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx
@@ -1,53 +1,73 @@
 import { expect, test } from '@semcore/testing-utils/playwright';
+import type { Page } from '@semcore/testing-utils/playwright';
 import { loadPage } from '@semcore/testing-utils/shared/helpers';
 import { TAG } from '@semcore/testing-utils/shared/tags';
 
+const BAR_EXAMPLE = 'stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx';
+
+/** The example is mounted into `#root`, so snapshots are scoped to it instead of the whole viewport. */
+const stand = (page: Page) => page.locator('#root');
+
+/**
+ * `default`, `invert` and `brand` are the built-in themes; any other value falls
+ * through to the custom-theme path, so one custom token is covered alongside them.
+ */
+const BAR_THEMES = ['default', 'invert', 'brand', 'violet-100'];
+const SIZES = ['s', 'm', 'l'] as const;
+/** One boundary value per size, so each snapshot also covers a distinct edge case. */
+const BOUNDARY_VALUE_BY_SIZE = { s: 1, m: 99, l: 110 } as const;
+
+const barMatrix = BAR_THEMES.flatMap((theme) =>
+  SIZES.map((size) => ({ theme, size, value: BOUNDARY_VALUE_BY_SIZE[size] })),
+);
+
+/**
+ * `theme` on ProgressBar.Value is deprecated ("Use only predefined themes") and accepts
+ * a color token only, so it gets a single regression guard instead of a matrix — just
+ * enough to catch the deprecated path breaking before it is removed.
+ */
+const deprecatedValueTheme = {
+  theme: 'default',
+  size: 'm',
+  value: 99,
+  valueTheme: 'violet-100',
+} as const;
+
 /* =====================================================
 @visual
 Visual states, hover and focus styles, paddings, margins, and snapshots.
 ===================================================== */
 test.describe(`${TAG.VISUAL}`, () => {
-  const variablesBarCustomization = [
-    { theme: 'invert', size: 's', value: 0 },
-    { theme: 'dark', size: 'm', value: 110 },
-    { theme: 'violet-100', size: 'l', value: 50 },
-  ];
-  variablesBarCustomization.forEach((item) => {
+  // Every case renders the theme on both light and dark backgrounds, across
+  // value=<case>, value=0, value=100 and the no value state.
+  barMatrix.forEach((item) => {
     test(`Verify progress bar with background customization with value=${item.value}, size=${item.size}, theme=${item.theme}`, {
       tag: [TAG.PRIORITY_HIGH, '@progress-bar'],
     }, async ({ page }) => {
-      await loadPage(page, 'stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx', 'en', item);
+      await loadPage(page, BAR_EXAMPLE, 'en', item);
 
       await test.step('Verify progress bar visual with keyboard focus', async () => {
         await page.keyboard.press('Tab');
-        await expect(page).toHaveScreenshot();
+        await expect(stand(page)).toHaveScreenshot();
       });
     });
   });
 
-  const variablesValueCustomization = [
-    { value: 0, theme: 'inviolet-500', size: 's' },
-    { value: 110, theme: 'violet-100', size: 'm' },
-    { value: 50, theme: 'violet-100', size: 'l' },
-  ];
-  variablesValueCustomization.forEach((item) => {
-    test(`Verify progress bar value customization with value=${item.value}, size=${item.size}, theme=${item.theme}`, {
-      tag: [TAG.PRIORITY_HIGH, '@progress-bar'],
-    }, async ({ page }) => {
-      await loadPage(page, 'stories/components/progress-bar/tests/examples/customizing_the_value.tsx', 'en', item);
+  test(`Verify progress bar value customization with value=${deprecatedValueTheme.value}, size=${deprecatedValueTheme.size}, valueTheme=${deprecatedValueTheme.valueTheme}`, {
+    tag: [TAG.PRIORITY_MEDIUM, '@progress-bar'],
+  }, async ({ page }) => {
+    await loadPage(page, BAR_EXAMPLE, 'en', deprecatedValueTheme);
 
-      await test.step('Verify progress bar value visual with keyboard focus', async () => {
-        await page.keyboard.press('Tab');
-        await expect(page).toHaveScreenshot();
-      });
+    await test.step('Verify progress bar value visual with keyboard focus', async () => {
+      await page.keyboard.press('Tab');
+      await expect(stand(page)).toHaveScreenshot();
     });
   });
 
-  test('Verify both value and progress bar customized', {
-    tag: [TAG.PRIORITY_MEDIUM, '@progress-bar'],
+  test('Verify all themes on light and dark backgrounds', {
+    tag: [TAG.PRIORITY_HIGH, '@progress-bar'],
   }, async ({ page }) => {
-    await loadPage(page, 'stories/components/progress-bar/docs/examples/customizing_the_bar.tsx', 'en');
-    await page.keyboard.press('Tab');
-    await expect(page).toHaveScreenshot();
+    await loadPage(page, 'stories/components/progress-bar/advanced/examples/all_themes.tsx', 'en');
+    await expect(stand(page)).toHaveScreenshot();
   });
 });
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-all-themes-on-light-and-dark-backgrounds-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-all-themes-on-light-and-dark-backgrounds-1-chromium-linux.png
new file mode 100644
index 0000000000..e8669ee531
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-all-themes-on-light-and-dark-backgrounds-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-all-themes-on-light-and-dark-backgrounds-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-all-themes-on-light-and-dark-backgrounds-1-firefox-linux.png
new file mode 100644
index 0000000000..7e6887ae9e
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-all-themes-on-light-and-dark-backgrounds-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-all-themes-on-light-and-dark-backgrounds-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-all-themes-on-light-and-dark-backgrounds-1-webkit-linux.png
new file mode 100644
index 0000000000..9e6ef34b32
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-all-themes-on-light-and-dark-backgrounds-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-both-value-and-progress-bar-customized-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-both-value-and-progress-bar-customized-1-chromium-linux.png
deleted file mode 100644
index 598a5c4440..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-both-value-and-progress-bar-customized-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-both-value-and-progress-bar-customized-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-both-value-and-progress-bar-customized-1-firefox-linux.png
deleted file mode 100644
index 17f2a0bbc2..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-both-value-and-progress-bar-customized-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-both-value-and-progress-bar-customized-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-both-value-and-progress-bar-customized-1-webkit-linux.png
deleted file mode 100644
index e080b1e73c..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-both-value-and-progress-bar-customized-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-0-size-s-theme-inviolet-500-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-0-size-s-theme-inviolet-500-1-chromium-linux.png
deleted file mode 100644
index 1a1b6be335..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-0-size-s-theme-inviolet-500-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-0-size-s-theme-inviolet-500-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-0-size-s-theme-inviolet-500-1-firefox-linux.png
deleted file mode 100644
index 25bd145314..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-0-size-s-theme-inviolet-500-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-0-size-s-theme-inviolet-500-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-0-size-s-theme-inviolet-500-1-webkit-linux.png
deleted file mode 100644
index 5ca0c9b09c..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-0-size-s-theme-inviolet-500-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-110-size-m-theme-violet-100-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-110-size-m-theme-violet-100-1-chromium-linux.png
deleted file mode 100644
index a463ada205..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-110-size-m-theme-violet-100-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-110-size-m-theme-violet-100-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-110-size-m-theme-violet-100-1-firefox-linux.png
deleted file mode 100644
index 7128e69fb4..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-110-size-m-theme-violet-100-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-110-size-m-theme-violet-100-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-110-size-m-theme-violet-100-1-webkit-linux.png
deleted file mode 100644
index c1aad2afa6..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-110-size-m-theme-violet-100-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-50-size-l-theme-violet-100-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-50-size-l-theme-violet-100-1-chromium-linux.png
deleted file mode 100644
index 1e768d4555..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-50-size-l-theme-violet-100-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-50-size-l-theme-violet-100-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-50-size-l-theme-violet-100-1-firefox-linux.png
deleted file mode 100644
index d0e7dabf3e..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-50-size-l-theme-violet-100-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-50-size-l-theme-violet-100-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-50-size-l-theme-violet-100-1-webkit-linux.png
deleted file mode 100644
index 55f93d01f1..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-50-size-l-theme-violet-100-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-99-size-m-valueTheme-violet-100-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-99-size-m-valueTheme-violet-100-1-chromium-linux.png
new file mode 100644
index 0000000000..a6138ae854
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-99-size-m-valueTheme-violet-100-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-99-size-m-valueTheme-violet-100-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-99-size-m-valueTheme-violet-100-1-firefox-linux.png
new file mode 100644
index 0000000000..890387e76e
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-99-size-m-valueTheme-violet-100-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-99-size-m-valueTheme-violet-100-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-99-size-m-valueTheme-violet-100-1-webkit-linux.png
new file mode 100644
index 0000000000..ca00fb1727
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-value-customization-with-value-99-size-m-valueTheme-violet-100-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-0-size-s-theme-invert-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-0-size-s-theme-invert-1-chromium-linux.png
deleted file mode 100644
index 097bfaf4b9..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-0-size-s-theme-invert-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-0-size-s-theme-invert-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-0-size-s-theme-invert-1-firefox-linux.png
deleted file mode 100644
index 8ea3e78857..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-0-size-s-theme-invert-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-0-size-s-theme-invert-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-0-size-s-theme-invert-1-webkit-linux.png
deleted file mode 100644
index 642108d820..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-0-size-s-theme-invert-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-brand-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-brand-1-chromium-linux.png
new file mode 100644
index 0000000000..91724ef66c
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-brand-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-brand-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-brand-1-firefox-linux.png
new file mode 100644
index 0000000000..1625cae585
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-brand-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-brand-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-brand-1-webkit-linux.png
new file mode 100644
index 0000000000..a1177eefe9
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-brand-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-default-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-default-1-chromium-linux.png
new file mode 100644
index 0000000000..c3b7f67234
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-default-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-default-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-default-1-firefox-linux.png
new file mode 100644
index 0000000000..180f1dc1e1
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-default-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-default-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-default-1-webkit-linux.png
new file mode 100644
index 0000000000..0cf3ef36e5
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-default-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-invert-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-invert-1-chromium-linux.png
new file mode 100644
index 0000000000..d4597cf92c
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-invert-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-invert-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-invert-1-firefox-linux.png
new file mode 100644
index 0000000000..6449f71b10
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-invert-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-invert-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-invert-1-webkit-linux.png
new file mode 100644
index 0000000000..741e150e90
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-invert-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-violet-100-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-violet-100-1-chromium-linux.png
new file mode 100644
index 0000000000..d6693613b9
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-violet-100-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-violet-100-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-violet-100-1-firefox-linux.png
new file mode 100644
index 0000000000..6908771952
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-violet-100-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-violet-100-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-violet-100-1-webkit-linux.png
new file mode 100644
index 0000000000..d36429e680
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-1-size-s-theme-violet-100-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-brand-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-brand-1-chromium-linux.png
new file mode 100644
index 0000000000..86c75fcadf
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-brand-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-brand-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-brand-1-firefox-linux.png
new file mode 100644
index 0000000000..cfe885ab7e
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-brand-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-brand-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-brand-1-webkit-linux.png
new file mode 100644
index 0000000000..d22bd05436
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-brand-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-default-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-default-1-chromium-linux.png
new file mode 100644
index 0000000000..0e56dfe4b6
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-default-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-default-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-default-1-firefox-linux.png
new file mode 100644
index 0000000000..6ea55b8908
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-default-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-default-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-default-1-webkit-linux.png
new file mode 100644
index 0000000000..e0c0ad2b9e
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-default-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-invert-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-invert-1-chromium-linux.png
new file mode 100644
index 0000000000..2832eaab5d
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-invert-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-invert-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-invert-1-firefox-linux.png
new file mode 100644
index 0000000000..1f46b9708a
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-invert-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-invert-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-invert-1-webkit-linux.png
new file mode 100644
index 0000000000..5e469626fc
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-invert-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-violet-100-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-violet-100-1-chromium-linux.png
new file mode 100644
index 0000000000..f28c0dad82
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-violet-100-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-violet-100-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-violet-100-1-firefox-linux.png
new file mode 100644
index 0000000000..08dfcef65f
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-violet-100-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-violet-100-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-violet-100-1-webkit-linux.png
new file mode 100644
index 0000000000..8c73ce89e5
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-l-theme-violet-100-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-m-theme-dark-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-m-theme-dark-1-chromium-linux.png
deleted file mode 100644
index d89553a50a..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-m-theme-dark-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-m-theme-dark-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-m-theme-dark-1-firefox-linux.png
deleted file mode 100644
index f5e472b7b0..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-m-theme-dark-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-m-theme-dark-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-m-theme-dark-1-webkit-linux.png
deleted file mode 100644
index b33b6d2c89..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-110-size-m-theme-dark-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-50-size-l-theme-violet-100-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-50-size-l-theme-violet-100-1-chromium-linux.png
deleted file mode 100644
index 4628d4a09c..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-50-size-l-theme-violet-100-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-50-size-l-theme-violet-100-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-50-size-l-theme-violet-100-1-firefox-linux.png
deleted file mode 100644
index 668a005040..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-50-size-l-theme-violet-100-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-50-size-l-theme-violet-100-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-50-size-l-theme-violet-100-1-webkit-linux.png
deleted file mode 100644
index 952e8590f8..0000000000
Binary files a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-50-size-l-theme-violet-100-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-brand-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-brand-1-chromium-linux.png
new file mode 100644
index 0000000000..9ea3dd1e74
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-brand-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-brand-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-brand-1-firefox-linux.png
new file mode 100644
index 0000000000..5e1dd62f8f
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-brand-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-brand-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-brand-1-webkit-linux.png
new file mode 100644
index 0000000000..8872e3795d
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-brand-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-default-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-default-1-chromium-linux.png
new file mode 100644
index 0000000000..eafc692919
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-default-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-default-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-default-1-firefox-linux.png
new file mode 100644
index 0000000000..f5242adda3
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-default-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-default-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-default-1-webkit-linux.png
new file mode 100644
index 0000000000..c3e23de730
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-default-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-invert-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-invert-1-chromium-linux.png
new file mode 100644
index 0000000000..5ca4c62904
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-invert-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-invert-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-invert-1-firefox-linux.png
new file mode 100644
index 0000000000..6960b768b1
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-invert-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-invert-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-invert-1-webkit-linux.png
new file mode 100644
index 0000000000..d476e3c7b8
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-invert-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-violet-100-1-chromium-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-violet-100-1-chromium-linux.png
new file mode 100644
index 0000000000..454d95adcf
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-violet-100-1-chromium-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-violet-100-1-firefox-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-violet-100-1-firefox-linux.png
new file mode 100644
index 0000000000..0aeeeaee64
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-violet-100-1-firefox-linux.png differ
diff --git a/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-violet-100-1-webkit-linux.png b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-violet-100-1-webkit-linux.png
new file mode 100644
index 0000000000..be54f108cf
Binary files /dev/null and b/semcore/progress-bar/__tests__/progress-bar.browser-test.tsx-snapshots/-visual-Verify-progress-bar-with-background-customization-with-value-99-size-m-theme-violet-100-1-webkit-linux.png differ
diff --git a/semcore/progress-bar/src/ProgressBar.tsx b/semcore/progress-bar/src/ProgressBar.tsx
index ac90642e33..9f965fd23f 100644
--- a/semcore/progress-bar/src/ProgressBar.tsx
+++ b/semcore/progress-bar/src/ProgressBar.tsx
@@ -10,7 +10,7 @@ import style from './style/progress-bar.shadow.css';
 function isCustomTheme(theme?: string) {
   if (!theme) return false;
 
-  return !['dark', 'invert'].includes(theme);
+  return !['default', 'invert', 'brand'].includes(theme);
 }
 
 class ProgressBarRoot extends Component<
@@ -27,7 +27,7 @@ class ProgressBarRoot extends Component<
   static defaultProps = () => ({
     duration: 1000,
     size: 'm',
-    theme: 'invert',
+    theme: 'default',
     children: <ProgressBar.Value />,
   } as const);
 
@@ -73,12 +73,28 @@ function Value(
   const { styles, value, theme, duration, resolveColor } = props;
   const width = `${value}%`;
 
+  const [stopAnimation, setStopAnimation] = React.useState(value === 100);
+
+  const handleTransitionEnd = React.useCallback(() => {
+    if (value === 100) {
+      setTimeout(() => {
+        setStopAnimation(true);
+      });
+    } else {
+      setTimeout(() => {
+        setStopAnimation(false);
+      });
+    }
+  }, [value]);
+
   return sstyled(styles)(
     <SValue
       render={Box}
       use:width={width}
       use:duration={`${duration}ms`}
       colorBg={resolveColor(theme)}
+      onTransitionEnd={handleTransitionEnd}
+      stopAnimation={stopAnimation}
     />,
   );
 }
diff --git a/semcore/progress-bar/src/ProgressBar.type.ts b/semcore/progress-bar/src/ProgressBar.type.ts
index 1218cb371f..5d98efa317 100644
--- a/semcore/progress-bar/src/ProgressBar.type.ts
+++ b/semcore/progress-bar/src/ProgressBar.type.ts
@@ -5,9 +5,9 @@ declare namespace NSProgressBar {
   type Props = NSBox.Props & {
     /**
      * Progress bar theme
-     * @default invert
+     * @default default
      */
-    theme?: 'dark' | 'invert' | string;
+    theme?: 'default' | 'invert' | 'brand' | string;
     /**
      * Progress bar size
      * @default m
@@ -23,7 +23,7 @@ declare namespace NSProgressBar {
   type DefaultProps = {
     duration: 1000;
     size: 'm';
-    theme: 'invert';
+    theme: 'default';
     children: React.ReactNode;
   };
 
@@ -39,7 +39,10 @@ declare namespace NSProgressBar {
       value?: number;
       /** Animation diration in milliseconds for transitions */
       duration?: number;
-      /** Color theme */
+      /**
+       * Color theme
+       * @deprecated. Use only predefined themes.
+       */
       theme?: string;
     };
 
diff --git a/semcore/progress-bar/src/style/progress-bar.shadow.css b/semcore/progress-bar/src/style/progress-bar.shadow.css
index ec68f7e777..3a7a2875f6 100644
--- a/semcore/progress-bar/src/style/progress-bar.shadow.css
+++ b/semcore/progress-bar/src/style/progress-bar.shadow.css
@@ -2,11 +2,6 @@ SProgressBar {
   position: relative;
   width: 100%;
   overflow: hidden;
-  background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
-}
-
-SProgressBar[theme='dark'] {
-  background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.987 0.023 140 / 0.212));
 }
 
 SValue {
@@ -14,8 +9,6 @@ SValue {
   top: 0;
   left: 0;
   background-color: var(--intergalactic-progress-bar-value-bg, oklch(1 0 0));
-  background-image: var(--intergalactic-progress-bar-value-gradient,
-  linear-gradient(-45deg, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 25%, oklch(0.22 0.01 140) 0%, oklch(0.22 0.01 140) 50%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 75%, oklch(0.22 0.01 140) 0%));
   overflow: hidden;
 
   animation-name: loading;
@@ -26,9 +19,12 @@ SValue {
   width: var(--width);
   animation-duration: var(--duration);
   transition-duration: var(--duration);
-}
 
-SValue[theme] {
+  &[stopAnimation] {
+    animation-name: none;
+  }
+}
+SProgressBar[theme] SValue[colorBg] {
   background-color: var(--colorBg);
   background-image: var(--colorBg);
 }
@@ -54,12 +50,6 @@ SValue[size='l'] {
   background-size: 16px 16px;
 }
 
-
-
-SProgressBar[theme='invert'] {
-  background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
-}
-
 @keyframes loading {
   from {
     background-position: 0 0;
@@ -71,13 +61,43 @@ SProgressBar[theme='invert'] {
 }
 
 SProgressBar[animation] {
-  background-color: var(--intergalactic-progress-bar-value-bg, oklch(1 0 0));
   background-image: var(--intergalactic-progress-bar-pattern-gradient,
-  linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, oklch(0.157 0.029 176 / 0.11) 0%, oklch(0.157 0.029 176 / 0.11) 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, oklch(0.157 0.029 176 / 0.11) 0%));
+  linear-gradient(-45deg, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 25%, oklch(0.157 0.029 176 / 0.11) 0%, oklch(0.157 0.029 176 / 0.11) 50%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 0%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 75%, oklch(0.157 0.029 176 / 0.11) 0%));
   animation-name: loading;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-duration: var(--duration);
+  
+  &:not([theme='invert']) {
+    background-color: transparent;
+  }
+}
+
+SProgressBar[theme='default'] {
+  background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
+
+  SValue {
+    background-image: var(--intergalactic-progress-bar-value-gradient,
+    linear-gradient(-45deg, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 25%, oklch(0.22 0.01 140) 0%, oklch(0.22 0.01 140) 50%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 75%, oklch(0.22 0.01 140) 0%));
+  }
+}
+
+SProgressBar[theme='invert'] {
+  background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.987 0.023 140 / 0.212));
+
+  SValue {
+    background-image: var(--intergalactic-progress-bar-value-gradient-invert,
+    linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 75%, oklch(0.74 0.17 303) 0%));
+  }
+}
+
+SProgressBar[theme='brand'] {
+  background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
+
+  SValue {
+    background-image: var(--intergalactic-progress-bar-value-gradient-invert,
+    linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 75%, oklch(0.74 0.17 303) 0%));
+  }
 }
 
 SProgressBar[theme='custom'] {
@@ -94,4 +114,4 @@ SProgressBar[theme='custom'] {
   SProgressBar[animation] {
     animation-name: none;
   }
-}
\ No newline at end of file
+}
diff --git a/stories/components/progress-bar/advanced/examples/all_themes.tsx b/stories/components/progress-bar/advanced/examples/all_themes.tsx
index 5a51566c4c..6dad72f519 100644
--- a/stories/components/progress-bar/advanced/examples/all_themes.tsx
+++ b/stories/components/progress-bar/advanced/examples/all_themes.tsx
@@ -16,6 +16,29 @@ export default function AllThemes() {
           <ProgressBar value={100} aria-label='Progress 100%' />
         </Box>
       </Flex>
+      <Flex gap={6} flexWrap alignItems='flex-start' direction='column'>
+        <Box w={240}>
+          <ProgressBar
+            theme='brand'
+            value={0}
+            aria-label='Progress 0%, brand theme on light background'
+          />
+        </Box>
+        <Box w={240}>
+          <ProgressBar
+            theme='brand'
+            value={40}
+            aria-label='Progress 40%, brand theme on light background'
+          />
+        </Box>
+        <Box w={240}>
+          <ProgressBar
+            theme='brand'
+            value={100}
+            aria-label='Progress 100%, brand theme on light background'
+          />
+        </Box>
+      </Flex>
       <Box
         p={4}
         style={{
@@ -26,23 +49,23 @@ export default function AllThemes() {
         <Flex gap={6} flexWrap alignItems='flex-start' direction='column'>
           <Box w={240}>
             <ProgressBar
-              theme='dark'
+              theme='invert'
               value={0}
-              aria-label='Progress 0%, dark theme on dark background'
+              aria-label='Progress 0%, invert theme on dark background'
             />
           </Box>
           <Box w={240}>
             <ProgressBar
-              theme='dark'
+              theme='invert'
               value={40}
-              aria-label='Progress 40%, dark theme on dark background'
+              aria-label='Progress 40%, invert theme on dark background'
             />
           </Box>
           <Box w={240}>
             <ProgressBar
-              theme='dark'
+              theme='invert'
               value={100}
-              aria-label='Progress 100%, dark theme on dark background'
+              aria-label='Progress 100%, invert theme on dark background'
             />
           </Box>
         </Flex>
diff --git a/stories/components/progress-bar/advanced/examples/complex_usage_example.tsx b/stories/components/progress-bar/advanced/examples/complex_usage_example.tsx
deleted file mode 100644
index 00feb0e31f..0000000000
--- a/stories/components/progress-bar/advanced/examples/complex_usage_example.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Box } from '@semcore/ui/base-components';
-import ProgressBar from '@semcore/ui/progress-bar';
-import { Text } from '@semcore/ui/typography';
-import React from 'react';
-
-const maxValue = 2000;
-
-const Demo = () => {
-  const [value, setValue] = React.useState(0);
-
-  React.useEffect(() => {
-    const timerFetch = setInterval(() => {
-      setValue((value) => (value < maxValue ? value + 400 : 0));
-    }, 2000);
-    return () => {
-      clearInterval(timerFetch);
-    };
-  }, []);
-
-  return (
-    <div>
-      <Box mb={1}>
-        <Text size={200}>{value ? `${value}/${maxValue}` : 'Starting...'}</Text>
-      </Box>
-      <ProgressBar
-        tabIndex={0}
-        value={(value / maxValue) * 100}
-        aria-valuetext={`${value} of ${maxValue}`}
-        aria-label='Infinite emails processing'
-      />
-    </div>
-  );
-};
-
-export default Demo;
diff --git a/stories/components/progress-bar/advanced/progress-bar.stories.tsx b/stories/components/progress-bar/advanced/progress-bar.stories.tsx
index fd7a4ae37c..7303003ac2 100644
--- a/stories/components/progress-bar/advanced/progress-bar.stories.tsx
+++ b/stories/components/progress-bar/advanced/progress-bar.stories.tsx
@@ -2,7 +2,6 @@ import ProgressBar from '@semcore/ui/progress-bar';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import AllThemesExample from './examples/all_themes';
-import ComplexUsageExample from './examples/complex_usage_example';
 
 const meta: Meta<typeof ProgressBar> = {
   title: 'Components/ProgressBar/Advanced',
@@ -16,7 +15,3 @@ export const all_themes: Story = {
   name: 'All themes',
   render: AllThemesExample,
 };
-
-export const ComplexUsage: Story = {
-  render: ComplexUsageExample,
-};
diff --git a/stories/components/progress-bar/docs/examples/customizing_the_bar.tsx b/stories/components/progress-bar/docs/examples/customizing_the_bar.tsx
deleted file mode 100644
index f5e59a822d..0000000000
--- a/stories/components/progress-bar/docs/examples/customizing_the_bar.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import ProgressBar from '@semcore/ui/progress-bar';
-import type { NSProgressBar } from '@semcore/ui/progress-bar';
-import React from 'react';
-
-type ProgressBarExampleProps = NSProgressBar.Props;
-const Demo = (props: ProgressBarExampleProps) => {
-  return (
-    <ProgressBar tabIndex={0} value={props.value} size={props.size} theme={props.theme} aria-label='Custom theme example' duration={props.duration}>
-      <ProgressBar.Value theme='brand-secondary' />
-    </ProgressBar>
-  );
-};
-
-export const defaultProps: ProgressBarExampleProps = {
-  size: 'm',
-  value: 60,
-  theme: 'progress-bar-bg',
-  duration: undefined,
-};
-
-Demo.defaultProps = defaultProps;
-
-export default Demo;
diff --git a/stories/components/progress-bar/docs/progress-bar.stories.tsx b/stories/components/progress-bar/docs/progress-bar.stories.tsx
index 5d864aa998..b5574b2f3c 100644
--- a/stories/components/progress-bar/docs/progress-bar.stories.tsx
+++ b/stories/components/progress-bar/docs/progress-bar.stories.tsx
@@ -2,7 +2,6 @@ import ProgressBar from '@semcore/ui/progress-bar';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import BasicUsageExample from './examples/basic-usage';
-import CustomizingTheBarExample, { defaultProps as CustomizingTheBarProps } from './examples/customizing_the_bar';
 
 const meta: Meta<typeof ProgressBar> = {
   title: 'Components/ProgressBar/Documentation',
@@ -15,21 +14,3 @@ type Story = StoryObj<typeof ProgressBar>;
 export const BasicUsage: Story = {
   render: BasicUsageExample,
 };
-
-export const CustomizingTheBar: StoryObj<typeof CustomizingTheBarProps> = {
-  render: CustomizingTheBarExample,
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: ['s', 'm', 'l'],
-    },
-    theme: {
-      control: { type: 'select' },
-      options: ['invert', 'dark', 'violet-100'],
-    },
-    value: {
-      control: { type: 'number' },
-    },
-  },
-  args: CustomizingTheBarProps,
-};
diff --git a/stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx b/stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx
index 6c00af1d1d..01957478bf 100644
--- a/stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx
+++ b/stories/components/progress-bar/tests/examples/customizing_the_bar_with_background.tsx
@@ -1,23 +1,105 @@
-import { Box } from '@semcore/ui/base-components';
+import { Box, Flex } from '@semcore/ui/base-components';
 import ProgressBar from '@semcore/ui/progress-bar';
 import type { NSProgressBar } from '@semcore/ui/progress-bar';
+import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
-type ProgressBarExampleProps = NSProgressBar.Props;
+type ProgressBarExampleProps = NSProgressBar.Props & {
+  valueTheme?: string;
+};
+
+const BACKGROUNDS = [
+  { bg: 'bg-primary-neutral', textColor: 'text-primary', label: 'Light background' },
+  { bg: 'bg-primary-invert', textColor: 'text-primary-invert', label: 'Dark background' },
+] as const;
+
 const Demo = (props: ProgressBarExampleProps) => {
+  const { theme, size, value, duration, valueTheme } = props;
+  const valueProps = valueTheme ? { theme: valueTheme } : {};
+
   return (
-    <Box bg='bg-primary-invert' h={50}>
-      <ProgressBar tabIndex={0} value={props.value} size={props.size} theme={props.theme} aria-label='Custom theme example' duration={props.duration}>
-      </ProgressBar>
-    </Box>
+    <Flex direction='column' gap={6} w='100%'>
+      {BACKGROUNDS.map((background) => (
+        <Box key={background.bg} bg={background.bg} p={5}>
+          <Flex direction='column' gap={4} w='100%'>
+            <Text size={200} color={background.textColor}>
+              {background.label}
+              {' '}
+              — theme=
+              {String(theme)}
+              , size=
+              {String(size)}
+              {valueTheme ? `, value theme=${valueTheme}` : ''}
+            </Text>
+
+            <Flex direction='column' gap={2} w='100%'>
+              <Text size={100} color={background.textColor}>
+                controlled value: {String(value)}
+              </Text>
+              <ProgressBar
+                tabIndex={0}
+                theme={theme}
+                size={size}
+                value={value}
+                duration={duration}
+                aria-label={`Progress ${value}% on ${background.label}`}
+              >
+                <ProgressBar.Value {...valueProps} />
+              </ProgressBar>
+            </Flex>
+
+            <Flex direction='column' gap={2} w='100%'>
+              <Text size={100} color={background.textColor}>
+                value=0
+              </Text>
+              <ProgressBar
+                theme={theme}
+                size={size}
+                value={0}
+                duration={duration}
+                aria-label={`Progress 0% on ${background.label}`}
+              />
+            </Flex>
+
+            <Flex direction='column' gap={2} w='100%'>
+              <Text size={100} color={background.textColor}>
+                value=100
+              </Text>
+              <ProgressBar
+                theme={theme}
+                size={size}
+                value={100}
+                duration={duration}
+                aria-label={`Progress 100% on ${background.label}`}
+              >
+                <ProgressBar.Value {...valueProps} />
+              </ProgressBar>
+            </Flex>
+
+            <Flex direction='column' gap={2} w='100%'>
+              <Text size={100} color={background.textColor}>
+                no value prop
+              </Text>
+              {/* `value` is intentionally not passed: the animated pattern renders only when value === undefined */}
+              <ProgressBar
+                theme={theme}
+                size={size}
+                duration={duration}
+                aria-label={`Indeterminate progress on ${background.label}`}
+              />
+            </Flex>
+          </Flex>
+        </Box>
+      ))}
+    </Flex>
   );
 };
 
 export const defaultProps: ProgressBarExampleProps = {
+  theme: 'default',
   size: 'm',
-  value: 80,
-  theme: undefined,
-  duration: undefined,
+  value: 60,
+  duration: 1000,
 };
 
 Demo.defaultProps = defaultProps;
diff --git a/stories/components/progress-bar/tests/examples/customizing_the_value.tsx b/stories/components/progress-bar/tests/examples/customizing_the_value.tsx
deleted file mode 100644
index c2d85ab3b3..0000000000
--- a/stories/components/progress-bar/tests/examples/customizing_the_value.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Box } from '@semcore/ui/base-components';
-import ProgressBar from '@semcore/ui/progress-bar';
-import type { NSProgressBar } from '@semcore/ui/progress-bar';
-import React from 'react';
-
-type ProgressBarExampleProps = NSProgressBar.Value.Props;
-const Demo = (props: ProgressBarExampleProps) => {
-  return (
-    <Box>
-
-      <ProgressBar tabIndex={0} aria-label='Custom theme example'>
-        <ProgressBar.Value value={props.value} size={props.size} theme={props.theme} duration={props.duration} />
-      </ProgressBar>
-
-    </Box>
-  );
-};
-
-export const defaultProps: ProgressBarExampleProps = {
-  size: 'm',
-  value: 80,
-  theme: undefined,
-  duration: undefined,
-};
-
-Demo.defaultProps = defaultProps;
-
-export default Demo;
diff --git a/stories/components/progress-bar/tests/progress-bar.stories.tsx b/stories/components/progress-bar/tests/progress-bar.stories.tsx
index 400e74dd41..dc535d56e0 100644
--- a/stories/components/progress-bar/tests/progress-bar.stories.tsx
+++ b/stories/components/progress-bar/tests/progress-bar.stories.tsx
@@ -2,7 +2,6 @@ import ProgressBar from '@semcore/ui/progress-bar';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import CustomizingTheBarExample, { defaultProps as CustomizingTheBarProps } from './examples/customizing_the_bar_with_background';
-import CustomizingTheValueExample, { defaultProps as CustomizingTheValueProps } from './examples/customizing_the_value';
 
 const meta: Meta<typeof ProgressBar> = {
   title: 'Components/ProgressBar/Tests',
@@ -11,35 +10,41 @@ const meta: Meta<typeof ProgressBar> = {
 
 export default meta;
 
-const commonArgTypes = {
-  size: {
-    control: { type: 'select' },
-    options: ['s', 'm', 'l'],
-  },
-  value: {
-    control: { type: 'number' },
-  },
-  duration: {
-    control: { type: 'number' },
-  },
-  theme: {
-    control: { type: 'select' },
-    options: ['invert', 'dark', 'violet-100'],
-  },
-} as const;
+/** Built-in themes of the root component. Anything else is resolved as a color token. */
+const BUILT_IN_THEMES = ['default', 'invert', 'brand'];
+/** Colors used to exercise the custom-theme path. */
+const COLOR_TOKENS = ['violet-dusty-500', 'pink-400', 'violet-100', 'brand-secondary'];
 
 export const CustomizingTheBar: StoryObj<typeof CustomizingTheBarProps> = {
   render: CustomizingTheBarExample,
   argTypes: {
-    ...commonArgTypes,
+    size: {
+      control: { type: 'select' },
+      options: ['s', 'm', 'l'],
+      description: 'Height and border-radius of the bar',
+    },
+    value: {
+      control: { type: 'number' },
+      description: 'Progress as a percentage. Omit it to get the indeterminate animated bar',
+    },
+    duration: {
+      control: { type: 'number' },
+      description: 'Animation/transition duration in ms',
+    },
+    theme: {
+      control: { type: 'select' },
+      options: [...BUILT_IN_THEMES, ...COLOR_TOKENS],
+      description:
+        'Built-in themes are `default`, `invert` and `brand`. Any other value falls through to the custom-theme path and is resolved as a color token.',
+    },
+    valueTheme: {
+      control: { type: 'select' },
+      // only custom colors: a built-in theme name is not a color token, so it would
+      // leave ProgressBar.Value without a color
+      options: [undefined, ...COLOR_TOKENS],
+      description:
+        'Color token passed to `ProgressBar.Value`. Custom colors only. Deprecated on the component itself — prefer the root `theme`.',
+    },
   },
   args: CustomizingTheBarProps,
 };
-
-export const CustomizingTheValue: StoryObj<typeof CustomizingTheValueProps> = {
-  render: CustomizingTheValueExample,
-  argTypes: {
-    ...commonArgTypes,
-  },
-  args: CustomizingTheValueProps,
-};
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index 5dd49f065a..b7b7cab8a2 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -1441,7 +1441,7 @@ export const theme: Theme = {
         description: 'Hover state for the inverted version of the background color of the ProgressBar.',
       },
       progress_bar_pattern_gradient: {
-        value: 'linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, {semanticTokens.colors.progress.bar.bg} 0%, {semanticTokens.colors.progress.bar.bg} 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, {semanticTokens.colors.progress.bar.bg} 0%)',
+        value: 'linear-gradient(-45deg, oklch(from {semanticTokens.colors.progress.bar.bg} l c h / 0.18) 25%, {semanticTokens.colors.progress.bar.bg} 0%, {semanticTokens.colors.progress.bar.bg} 50%, oklch(from {semanticTokens.colors.progress.bar.bg} l c h / 0.18) 0%, oklch(from {semanticTokens.colors.progress.bar.bg} l c h / 0.18) 75%, {semanticTokens.colors.progress.bar.bg} 0%)',
         description: 'Null value gradient for the ProgressBar.',
       },
 
@@ -1449,10 +1449,14 @@ export const theme: Theme = {
         value: 'oklch(1 0 0)',
         description: 'Base value background for the ProgressBar. It is used to create gradients for the values.',
       },
-      progress_bar_value_gradient: {
+      progress_bar_value_gradient_DEFAULT: {
         value: 'linear-gradient(-45deg, oklch(from {semanticTokens.colors.brand.secondary} l c h / 0.78) 25%, {semanticTokens.colors.brand.secondary} 0%, {semanticTokens.colors.brand.secondary} 50%, oklch(from {semanticTokens.colors.brand.secondary} l c h / 0.78) 0%, oklch(from {semanticTokens.colors.brand.secondary} l c h / 0.78) 75%, {semanticTokens.colors.brand.secondary} 0%)',
         description: 'Value with gradient for the ProgressBar.',
       },
+      progress_bar_value_gradient_invert: {
+        value: 'linear-gradient(-45deg, oklch(from {semanticTokens.colors.brand.primary} l c h / 0.78) 25%, {semanticTokens.colors.brand.primary} 0%, {semanticTokens.colors.brand.primary} 50%, oklch(from {semanticTokens.colors.brand.primary} l c h / 0.78) 0%, oklch(from {semanticTokens.colors.brand.primary} l c h / 0.78) 75%, {semanticTokens.colors.brand.primary} 0%)',
+        description: 'Value with gradient for the ProgressBar.',
+      },
       scroll_area_dropdown_menu_bottom: {
         value: 'linear-gradient(to top, {baseTokens.colors.white} 34.38%, transparent 100%)',
         description: 'Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.',
@@ -3015,7 +3019,10 @@ type SemanticColors = {
         };
       };
       value: {
-        gradient: Value;
+        gradient: {
+          DEFAULT: Value;
+          invert: Value;
+        };
         bg: Value;
       };
       pattern: {
diff --git a/website/docs/components/progress-bar/progress-bar-code.md b/website/docs/components/progress-bar/progress-bar-code.md
index bf2f3894e3..8d2b4d2636 100644
--- a/website/docs/components/progress-bar/progress-bar-code.md
+++ b/website/docs/components/progress-bar/progress-bar-code.md
@@ -13,15 +13,3 @@ tabs: Design('progress-bar'), A11y('progress-bar-a11y'), API('progress-bar-api')
 </script>
 
 :::
-
-## Customizing the bar
-
-By default, you should use `<ProgressBar/>`. However, you can customize progress bar appearance using the `theme` property and the `ProgressBar.Value` component.
-
-::: sandbox
-
-<script lang="tsx">
-  export Demo from 'stories/components/progress-bar/docs/examples/customizing_the_bar.tsx';
-</script>
-
-:::
diff --git a/website/docs/components/progress-bar/progress-bar.md b/website/docs/components/progress-bar/progress-bar.md
index 079e2ac4cf..c22bae9787 100644
--- a/website/docs/components/progress-bar/progress-bar.md
+++ b/website/docs/components/progress-bar/progress-bar.md
@@ -30,22 +30,26 @@ Our ProgressBar has three sizes.
 
 Table: ProgressBar sizes and styles
 
-| Size (height in px) | Appearance example   | Border-radius token     | Where to use        |
-| ------------------- | -------------------- | ----------------------- | ------------------- |
-| S (4px)    | ![](static/size-s.png) | `--rounded-medium`  | Use in widgets inside reports/products.                               |
-| M (8px)    | ![](static/size-m.png) | `--rounded-medium`  | Use inside the product.                                               |
-| L (12px)    | ![](static/size-l.png) | `--rounded-medium` | Use in modal windows or the start screen. |
+| Size (height in px) | Appearance example     | Where to use                              |
+| ------------------- | ---------------------- | ----------------------------------------- |
+| S (4px)             | ![](static/size-s.png) | Use in widgets inside reports/products.   |
+| M (8px)             | ![](static/size-m.png) | Use inside the product.                   |
+| L (12px)            | ![](static/size-l.png) | Use in modal windows or the start screen. |
 
 ### Themes
 
-ProgressBar offers two themes: `dark` and `invert`, which are suitable for light and dark/colored backgrounds respectively. Both themes use the `--progress-bar-value` token for color with a gradient pattern to indicate progress.
+ProgressBar offers three themes: `default` and `brand` for light backgrounds, and `invert` for dark/colored ones.
+
+`brand` shares the light background of `default` but fills the value with the brand color, so use it when the progress itself should be accented.
 
 Table: ProgressBar themes
 
-| Theme  | Appearance example       | Background token            |
-| ------ | ------------------------ | --------------------------- |
-| Invert | ![](static/size-l.png)   | `--progress-bar-bg`         |
-| Dark   | ![](static/dark-theme.png) | `--progress-bar-bg-invert`|
+| Theme   | Appearance example                       |
+| ------- | ---------------------------------------- |
+| Default | ![](static/default-theme.png){width=300} |
+| Brand   | ![](static/brand-theme.png){width=300}   |
+| Invert  | ![](static/invert-theme.png){width=300}  |
+
 
 ## Interaction
 
@@ -55,11 +59,11 @@ The ProgressBar has three states:
 
 Table: ProgressBar states
 
-| State | Appearance example  |
-| ----- | ------------------- |
-| 0% – The progress bar is colored in gray and animated. | ![](static/loading-gray.png) |
-| 1-99% – The progress bar is partially filled and the pattern is animated. | ![](static/size-l.png) |
-| 100% – The progress bar is static and green. | ![](static/loaded.png) |
+| State                                                                     | Appearance example           |
+| ------------------------------------------------------------------------- | ---------------------------- |
+| 0% – The progress bar is colored in gray and animated.                    | ![](static/loading-gray.png) |
+| 1-99% – The progress bar is partially filled and the pattern is animated. | ![](static/size-l.png)       |
+| 100% – The progress bar is static and completely filled.                  | ![](static/loaded.png)       |
 
 The progress bar shouldn't remain in the 100% state. Once the process is completed, either a success message should be displayed, or the user should be provided with further actions.
 
diff --git a/website/docs/components/progress-bar/static/brand-theme.png b/website/docs/components/progress-bar/static/brand-theme.png
new file mode 100644
index 0000000000..99f63fe64e
Binary files /dev/null and b/website/docs/components/progress-bar/static/brand-theme.png differ
diff --git a/website/docs/components/progress-bar/static/dark-theme.png b/website/docs/components/progress-bar/static/dark-theme.png
deleted file mode 100644
index 6d35961230..0000000000
Binary files a/website/docs/components/progress-bar/static/dark-theme.png and /dev/null differ
diff --git a/website/docs/components/progress-bar/static/default-theme.png b/website/docs/components/progress-bar/static/default-theme.png
new file mode 100644
index 0000000000..a45ab04338
Binary files /dev/null and b/website/docs/components/progress-bar/static/default-theme.png differ
diff --git a/website/docs/components/progress-bar/static/invert-theme.png b/website/docs/components/progress-bar/static/invert-theme.png
new file mode 100644
index 0000000000..7bd98579e5
Binary files /dev/null and b/website/docs/components/progress-bar/static/invert-theme.png differ
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index 60e891e83e..3a29319129 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -2110,7 +2110,7 @@
   },
   {
     "name": "--intergalactic-progress-bar-pattern-gradient",
-    "value": "linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, oklch(0.157 0.029 176 / 0.11) 0%, oklch(0.157 0.029 176 / 0.11) 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, oklch(0.157 0.029 176 / 0.11) 0%)",
+    "value": "linear-gradient(-45deg, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 25%, oklch(0.157 0.029 176 / 0.11) 0%, oklch(0.157 0.029 176 / 0.11) 50%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 0%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 75%, oklch(0.157 0.029 176 / 0.11) 0%)",
     "description": "Null value gradient for the ProgressBar.",
     "components": [
       "progress-bar"
@@ -2132,6 +2132,14 @@
       "progress-bar"
     ]
   },
+  {
+    "name": "--intergalactic-progress-bar-value-gradient-invert",
+    "value": "linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 75%, oklch(0.74 0.17 303) 0%)",
+    "description": "Value with gradient for the ProgressBar.",
+    "components": [
+      "progress-bar"
+    ]
+  },
   {
     "name": "--intergalactic-scroll-area-dropdown-menu-bottom",
     "value": "linear-gradient(to top, #fff 34.38%, transparent 100%)",