From e09a379dcc395790e63ae81a13cf27608bfe7cab Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Mon, 22 Jun 2026 18:47:54 +0000
Subject: [PATCH 1/2] feat: set upcoming steps' text color to
 text-content-disabled

---
 site/src/pages/TemplateBuilder/SelectionSummary.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/TemplateBuilder/SelectionSummary.tsx b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
index 543e5d514eca9..4a6ed0f5a164f 100644
--- a/site/src/pages/TemplateBuilder/SelectionSummary.tsx
+++ b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
@@ -75,7 +75,7 @@ const stepCircleVariants = cva(
 			variant: {
 				complete: "border-border-success bg-surface-green",
 				current: "border-border-success",
-				upcoming: "border-border text-content-secondary",
+				upcoming: "border-border text-content-disabled",
 			},
 		},
 	},
@@ -86,7 +86,7 @@ const stepLabelVariants = cva("font-normal mr-2", {
 		variant: {
 			complete: "text-content-primary",
 			current: "text-content-primary",
-			upcoming: "text-content-secondary",
+			upcoming: "text-content-disabled",
 		},
 	},
 });

From a6fcd4611168e097ea7bc30bffd832d9bef0733a Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Mon, 22 Jun 2026 18:54:41 +0000
Subject: [PATCH 2/2] feat: set template/module names' text color to
 text-content-secondary

---
 site/src/pages/TemplateBuilder/SelectionSummary.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/TemplateBuilder/SelectionSummary.tsx b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
index 4a6ed0f5a164f..9f4fc3c2c188c 100644
--- a/site/src/pages/TemplateBuilder/SelectionSummary.tsx
+++ b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
@@ -154,7 +154,7 @@ const BaseTemplateSelection: React.FC<BaseTemplateSelectionProps> = ({
 					alt={`${template.name} icon`}
 					className="w-6 h-6 p-1 rounded-sm border border-border border-solid bg-surface-secondary"
 				/>
-				<span className="ml-2">{template.name}</span>
+				<span className="ml-2 text-content-secondary">{template.name}</span>
 			</div>
 		</StepDivider>
 	);
@@ -183,7 +183,7 @@ const ModuleSelection: React.FC<ModuleSelectionProps> = ({
 							className="block w-6 h-6 p-1 rounded-sm border border-border border-solid bg-surface-secondary"
 						/>
 					</div>
-					<span className="ml-2">{module.name}</span>
+					<span className="ml-2 text-content-secondary">{module.name}</span>
 					<div className="h-[1lh] content-center">
 						<Button
 							size="xs"