From eaa64bf0cd1e73d35ce3094acc7817dbbe466484 Mon Sep 17 00:00:00 2001
From: GZolla <43836485+GZolla@users.noreply.github.com>
Date: Tue, 5 May 2026 18:57:51 -0700
Subject: [PATCH] Update progress to support semantic variables

---
 components/progress/progress.js            | 10 +++++-----
 components/progress/test/progress.vdiff.js |  7 ++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/progress/progress.js b/components/progress/progress.js
index cb76876e665..a8a93dc4583 100644
--- a/components/progress/progress.js
+++ b/components/progress/progress.js
@@ -69,12 +69,12 @@ class Progress extends LocalizeCoreElement(LitElement) {
 				}
 
 				progress {
-					--d2l-progress-color: var(--d2l-color-celestine);
+					--d2l-progress-color: var(--d2l-theme-brand-color-primary-default);
 					-moz-appearance: none;
 					-webkit-appearance: none;
 					appearance: none;
-					background-color: var(--d2l-color-gypsum);
-					box-shadow: inset 0 2px var(--d2l-color-mica);
+					background-color: var(--d2l-theme-background-color-interactive-secondary-default);
+					box-shadow: var(--d2l-theme-shadow-inset);
 					width: 100%;
 				}
 				.bar {
@@ -114,7 +114,7 @@ class Progress extends LocalizeCoreElement(LitElement) {
 				}
 
 				progress.complete {
-					--d2l-progress-color: var(--d2l-color-olivine);
+					--d2l-progress-color: var(--d2l-theme-status-color-success);
 				}
 				/* this is necessary to avoid white bleed over rounded corners in chrome and safari */
 				progress::-webkit-progress-bar {
@@ -137,7 +137,7 @@ class Progress extends LocalizeCoreElement(LitElement) {
 				.indeterminate-bar {
 					--d2l-progress-indeterminate-width: calc(100% / 3);
 					animation: 1450ms 50ms ease-in-out indeterminateState alternate infinite;
-					background-color: var(--d2l-color-celestine);
+					background-color: var(--d2l-theme-brand-color-primary-default);
 					height: 100%;
 					margin-inline-start: calc(var(--d2l-progress-indeterminate-width) * -0.75);
 					width: var(--d2l-progress-indeterminate-width);
diff --git a/components/progress/test/progress.vdiff.js b/components/progress/test/progress.vdiff.js
index 4dca7304323..1110251a8b6 100644
--- a/components/progress/test/progress.vdiff.js
+++ b/components/progress/test/progress.vdiff.js
@@ -12,7 +12,7 @@ describe('d2l-progress', () => {
 					<d2l-progress label="Complete" value="10" max="10" size="${size}"></d2l-progress>
 				</div>`, { rtl });
 
-				await expect(ele).to.be.golden();
+				await expect(ele).to.be.golden({ allColorModes: !rtl && size === 'medium' });
 			});
 		});
 
@@ -28,4 +28,9 @@ describe('d2l-progress', () => {
 			await expect(ele).to.be.golden();
 		});
 	});
+
+	it('indeterminate', async() => {
+		const ele = await fixture(html`<d2l-progress label="Indeterminate Progress"></d2l-progress>`);
+		await expect(ele).to.be.golden({ allColorModes: true });
+	});
 });