From 6117f751b02ad8491450e7726c75848436d9da3f Mon Sep 17 00:00:00 2001
From: Tajudeen <pterjudinouin@outlook.com>
Date: Thu, 23 Jul 2026 12:29:20 +0100
Subject: [PATCH] feat(ui): migrate onboarding flows to design-system btn/input
 classes

Replace hardcoded gradient and border button styles in express and local
setup onboarding with .btn-primary/.btn-secondary/.btn-ghost, add native
.input:focus support, and extend design-system contract tests.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/onboarding/ExpressOnboardingFlow.tsx  | 47 +++++--------------
 .../react/src/onboarding/LocalSetupWizard.tsx | 34 +++++++-------
 .../cortexide/browser/react/src/styles.css    |  1 +
 .../test/common/designSystem.test.ts          | 26 ++++++++++
 4 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/ExpressOnboardingFlow.tsx b/src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/ExpressOnboardingFlow.tsx
index 66fcde65fc12..3a9967a27fb6 100644
--- a/src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/ExpressOnboardingFlow.tsx
+++ b/src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/ExpressOnboardingFlow.tsx
@@ -341,8 +341,7 @@ const ExpressShell = ({ children, onCustomize, onDismiss }: {
 					type="button"
 					onClick={onDismiss}
 					aria-label={t('express.dismiss')}
-					className="p-2 rounded-xl transition-colors"
-					style={{ color: 'var(--cortex-fg-3, rgba(255,255,255,0.6))' }}
+					className="btn btn-icon btn-ghost p-2"
 				>
 					<X className="w-4 h-4" />
 				</button>
@@ -357,8 +356,7 @@ const ExpressShell = ({ children, onCustomize, onDismiss }: {
 				<button
 					type="button"
 					onClick={onCustomize}
-					className="inline-flex items-center gap-2 text-xs font-medium transition-colors"
-					style={{ color: 'var(--cortex-fg-3, rgba(255,255,255,0.6))' }}
+					className="btn btn-ghost btn-sm inline-flex items-center gap-2 text-xs font-medium"
 				>
 					<Settings className="w-3.5 h-3.5" />
 					{t('express.customize')}
@@ -366,8 +364,7 @@ const ExpressShell = ({ children, onCustomize, onDismiss }: {
 				<button
 					type="button"
 					onClick={onDismiss}
-					className="text-xs font-medium transition-colors"
-					style={{ color: 'var(--cortex-fg-4, rgba(255,255,255,0.45))' }}
+					className="btn btn-ghost btn-sm text-xs font-medium"
 				>
 					{t('express.dismiss')}
 				</button>
@@ -422,19 +419,14 @@ const InstallConfirmPanel = ({ t, hardware, pack, onConfirm, onDecline }: {
 			<button
 				type="button"
 				onClick={onConfirm}
-				className="flex-1 px-4 py-2.5 rounded-xl font-medium text-white transition-transform hover:translate-y-[-1px]"
-				style={{ background: 'var(--cortex-brand, #6b5bff)' }}
+				className="btn btn-primary flex-1 px-4 py-2.5 font-medium"
 			>
 				{t('express.installConfirm')}
 			</button>
 			<button
 				type="button"
 				onClick={onDecline}
-				className="flex-1 px-4 py-2.5 rounded-xl font-medium transition-colors"
-				style={{
-					border: '1px solid var(--cortex-border-3, rgba(255,255,255,0.1))',
-					color: 'var(--cortex-fg-2, rgba(255,255,255,0.8))',
-				}}
+				className="btn btn-secondary flex-1 px-4 py-2.5 font-medium"
 			>
 				{t('express.installDecline')}
 			</button>
@@ -501,8 +493,7 @@ const ReadyPanel = ({ t, onStart }: {
 		<button
 			type="button"
 			onClick={onStart}
-			className="w-full px-4 py-2.5 rounded-xl font-medium text-white transition-transform hover:translate-y-[-1px]"
-			style={{ background: 'var(--cortex-brand, #6b5bff)' }}
+			className="btn btn-primary w-full px-4 py-2.5 font-medium"
 		>
 			{t('express.startChatting')}
 		</button>
@@ -530,12 +521,7 @@ const GroqFallbackPanel = ({ t, apiKey, onApiKeyChange, onSubmit, errorMessage }
 			href={GROQ_KEYS_URL}
 			target="_blank"
 			rel="noopener noreferrer"
-			className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors"
-			style={{
-				border: '1px solid var(--cortex-border-3, rgba(255,255,255,0.1))',
-				color: 'var(--cortex-fg-1, rgba(255,255,255,0.9))',
-				background: 'var(--cortex-bg-3, rgba(255,255,255,0.04))',
-			}}
+			className="btn btn-secondary inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium"
 		>
 			<ExternalLink className="w-4 h-4" />
 			{t('express.openGroqKeyPage')}
@@ -549,12 +535,7 @@ const GroqFallbackPanel = ({ t, apiKey, onApiKeyChange, onSubmit, errorMessage }
 				value={apiKey}
 				onChange={(e) => onApiKeyChange(e.target.value)}
 				placeholder={t('express.pasteKeyPlaceholder')}
-				className="w-full px-3 py-2.5 rounded-xl text-sm font-mono outline-none"
-				style={{
-					background: 'var(--cortex-bg-3, rgba(255,255,255,0.04))',
-					border: '1px solid var(--cortex-border-3, rgba(255,255,255,0.1))',
-					color: 'var(--cortex-fg-0, #ffffff)',
-				}}
+				className="input w-full px-3 py-2.5 text-sm font-mono outline-none"
 			/>
 			{errorMessage && (
 				<p className="text-xs" style={{ color: 'rgb(248, 113, 113)' }}>{errorMessage}</p>
@@ -565,8 +546,7 @@ const GroqFallbackPanel = ({ t, apiKey, onApiKeyChange, onSubmit, errorMessage }
 			type="button"
 			onClick={onSubmit}
 			disabled={!apiKey.trim()}
-			className="w-full px-4 py-2.5 rounded-xl font-medium text-white transition-transform disabled:opacity-50 disabled:cursor-not-allowed enabled:hover:translate-y-[-1px]"
-			style={{ background: 'var(--cortex-brand, #6b5bff)' }}
+			className="btn btn-primary w-full px-4 py-2.5 font-medium"
 		>
 			{t('express.useGroqKey')}
 		</button>
@@ -587,19 +567,14 @@ const ErrorPanel = ({ t, message, onRetry, onFallback }: {
 			<button
 				type="button"
 				onClick={onRetry}
-				className="flex-1 px-4 py-2.5 rounded-xl font-medium text-white transition-transform hover:translate-y-[-1px]"
-				style={{ background: 'var(--cortex-brand, #6b5bff)' }}
+				className="btn btn-primary flex-1 px-4 py-2.5 font-medium"
 			>
 				{t('express.retry')}
 			</button>
 			<button
 				type="button"
 				onClick={onFallback}
-				className="flex-1 px-4 py-2.5 rounded-xl font-medium transition-colors"
-				style={{
-					border: '1px solid var(--cortex-border-3, rgba(255,255,255,0.1))',
-					color: 'var(--cortex-fg-2, rgba(255,255,255,0.8))',
-				}}
+				className="btn btn-secondary flex-1 px-4 py-2.5 font-medium"
 			>
 				{t('express.useCloudInstead')}
 			</button>
diff --git a/src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/LocalSetupWizard.tsx b/src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/LocalSetupWizard.tsx
index 07191ab324e5..db354c7bcc54 100644
--- a/src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/LocalSetupWizard.tsx
+++ b/src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/LocalSetupWizard.tsx
@@ -240,7 +240,7 @@ export const LocalSetupWizard = ({ onComplete, onSkip }: LocalSetupWizardProps)
 								</button>
 								<button
                   onClick={onSkip}
-                  className="px-6 py-3 rounded-2xl bg-gradient-to-r from-[var(--cortex-brand)] to-[var(--cortex-brand-dim)] text-white font-medium">
+                  className="btn btn-primary px-6 py-3 font-medium">
 
 									Skip Setup
 								</button>
@@ -262,7 +262,7 @@ export const LocalSetupWizard = ({ onComplete, onSkip }: LocalSetupWizardProps)
 						{progress.canCancel &&
             <button
               onClick={handleCancel}
-              className="text-sm text-fg-3 hover:text-fg-1">
+              className="btn btn-ghost btn-sm text-sm">
 
 								Cancel
 							</button>
@@ -304,7 +304,7 @@ const ChoiceStep = ({ onChoice, onBack }: {onChoice: (choice: 'local' | 'cloud'
 			<div className="flex items-center gap-4 mb-4">
 				<button
           onClick={onBack}
-          className="flex items-center gap-2 px-4 py-2 rounded-xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all">
+          className="btn btn-secondary flex items-center gap-2 px-4 py-2">
 
 					<ChevronLeft className="w-4 h-4" />
 					Back
@@ -381,7 +381,7 @@ const SystemCheckStep = ({ systemCheck, onInstall, onNext, onBack, canGoBack }:
 				{canGoBack &&
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-5 py-3 rounded-2xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all">
+          className="btn btn-secondary flex items-center gap-2 px-5 py-3">
 
 						<ChevronLeft className="w-4 h-4" />
 						Back
@@ -390,7 +390,7 @@ const SystemCheckStep = ({ systemCheck, onInstall, onNext, onBack, canGoBack }:
 				{!systemCheck.ollamaInstalled &&
         <button
           onClick={onInstall}
-          className="px-6 py-3 rounded-2xl bg-gradient-to-r from-[var(--cortex-brand)] to-[var(--cortex-brand-dim)] text-white font-medium">
+          className="btn btn-primary px-6 py-3 font-medium">
 
 						Install Ollama
 					</button>
@@ -398,7 +398,7 @@ const SystemCheckStep = ({ systemCheck, onInstall, onNext, onBack, canGoBack }:
 				{systemCheck.ollamaRunning &&
         <button
           onClick={onNext}
-          className="px-6 py-3 rounded-2xl border border-border-2 bg-bg-3 text-fg-0 font-medium">
+          className="btn btn-secondary px-6 py-3 font-medium">
 
 						Next
 					</button>
@@ -429,7 +429,7 @@ const ModelPackStep = ({ selectedPack, onSelect, onDownload, state, onBack, canG
 				{canGoBack &&
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-4 py-2 rounded-xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all">
+          className="btn btn-secondary flex items-center gap-2 px-4 py-2">
 
 						<ChevronLeft className="w-4 h-4" />
 						Back
@@ -506,7 +506,7 @@ const ModelPackStep = ({ selectedPack, onSelect, onDownload, state, onBack, canG
         <button
           onClick={onBack}
           disabled={isDownloading}
-          className="flex items-center gap-2 px-5 py-3 rounded-2xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+          className="btn btn-secondary flex items-center gap-2 px-5 py-3 disabled:opacity-50">
 
 						<ChevronLeft className="w-4 h-4" />
 						Back
@@ -515,7 +515,7 @@ const ModelPackStep = ({ selectedPack, onSelect, onDownload, state, onBack, canG
 				<button
           onClick={onDownload}
           disabled={isDownloading}
-          className="flex-1 px-6 py-3 rounded-2xl bg-gradient-to-r from-[var(--cortex-brand)] to-[var(--cortex-brand-dim)] text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed">
+          className="btn btn-primary flex-1 px-6 py-3 font-medium disabled:opacity-50">
 
 					{isDownloading ? 'Downloading...' : 'Download Models'}
 				</button>
@@ -534,7 +534,7 @@ const VerificationStep = ({ onVerify, onSkip, state, onBack, canGoBack }: {onVer
         <button
           onClick={onBack}
           disabled={isVerifying}
-          className="flex items-center gap-2 px-4 py-2 rounded-xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+          className="btn btn-secondary flex items-center gap-2 px-4 py-2 disabled:opacity-50">
 
 						<ChevronLeft className="w-4 h-4" />
 						Back
@@ -560,7 +560,7 @@ const VerificationStep = ({ onVerify, onSkip, state, onBack, canGoBack }: {onVer
 					{canGoBack &&
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-5 py-3 rounded-2xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all">
+          className="btn btn-secondary flex items-center gap-2 px-5 py-3">
 
 							<ChevronLeft className="w-4 h-4" />
 							Back
@@ -568,14 +568,14 @@ const VerificationStep = ({ onVerify, onSkip, state, onBack, canGoBack }: {onVer
         }
 					<button
           onClick={onVerify}
-          className="flex-1 px-6 py-3 rounded-2xl bg-gradient-to-r from-[var(--cortex-brand)] to-[var(--cortex-brand-dim)] text-white font-medium">
+          className="btn btn-primary flex-1 px-6 py-3 font-medium">
 
 						Run Verification
 					</button>
 					{onSkip &&
         <button
           onClick={onSkip}
-          className="px-6 py-3 rounded-2xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all">
+          className="btn btn-secondary px-6 py-3 font-medium">
 
 							Skip
 						</button>
@@ -596,7 +596,7 @@ const VerificationResultsStep = ({ results, onNext, onBack, canGoBack }: {result
 				{canGoBack &&
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-4 py-2 rounded-xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all">
+          className="btn btn-secondary flex items-center gap-2 px-4 py-2">
 
 						<ChevronLeft className="w-4 h-4" />
 						Back
@@ -626,7 +626,7 @@ const VerificationResultsStep = ({ results, onNext, onBack, canGoBack }: {result
 				{canGoBack &&
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-5 py-3 rounded-2xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all">
+          className="btn btn-secondary flex items-center gap-2 px-5 py-3">
 
 						<ChevronLeft className="w-4 h-4" />
 						Back
@@ -634,7 +634,7 @@ const VerificationResultsStep = ({ results, onNext, onBack, canGoBack }: {result
         }
 				<button
           onClick={onNext}
-          className="flex-1 px-6 py-3 rounded-2xl bg-gradient-to-r from-[var(--cortex-brand)] to-[var(--cortex-brand-dim)] text-white font-medium">
+          className="btn btn-primary flex-1 px-6 py-3 font-medium">
 
 					{allPassed ? 'Continue' : 'Continue Anyway'}
 				</button>
@@ -665,7 +665,7 @@ const DefaultsStep = ({ onComplete, onBack, canGoBack }: {onComplete: () => void
 				{canGoBack &&
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-4 py-2 rounded-xl border border-border-3 bg-bg-3/40 text-fg-3 hover:text-fg-1 hover:border-border-2 transition-all">
+          className="btn btn-secondary flex items-center gap-2 px-4 py-2">
 
 						<ChevronLeft className="w-4 h-4" />
 						Back
diff --git a/src/vs/workbench/contrib/cortexide/browser/react/src/styles.css b/src/vs/workbench/contrib/cortexide/browser/react/src/styles.css
index 7bf1af244b2e..e4d5723227e4 100644
--- a/src/vs/workbench/contrib/cortexide/browser/react/src/styles.css
+++ b/src/vs/workbench/contrib/cortexide/browser/react/src/styles.css
@@ -416,6 +416,7 @@ body.vscode-light .void-scope .btn-submit:not(:disabled):hover {
 	transition: border-color var(--cortex-transition-base), box-shadow var(--cortex-transition-base);
 }
 
+.void-scope .input:focus,
 .void-scope .input:focus-within,
 .void-scope .cortex-composer-shell:focus-within {
 	border-color: var(--cortex-border-strong);
diff --git a/src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts b/src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts
index 1cfb95455c27..2df2d6bce37d 100644
--- a/src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts
+++ b/src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts
@@ -46,4 +46,30 @@ suite('designSystem (Phase 1 Sprint 2 — composer tokens)', () => {
 			'expected input border token',
 		);
 	});
+
+	test('.input:focus styles native inputs', () => {
+		assert.ok(
+			hasRule(/\.void-scope\s+\.input:focus,/s),
+			'expected native input focus rule',
+		);
+	});
+});
+
+const expressOnboardingPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/onboarding/ExpressOnboardingFlow.tsx');
+const localSetupPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/onboarding/LocalSetupWizard.tsx');
+
+suite('designSystem (Phase 1 — onboarding adoption)', () => {
+
+	test('Express onboarding uses btn-primary and btn-secondary', () => {
+		const src = readFileSync(expressOnboardingPath, 'utf8');
+		assert.ok(src.includes('btn btn-primary'), 'expected btn-primary in express onboarding');
+		assert.ok(src.includes('btn btn-secondary'), 'expected btn-secondary in express onboarding');
+		assert.ok(src.includes('className="input '), 'expected .input class on Groq key field');
+	});
+
+	test('Local setup wizard uses design-system nav buttons', () => {
+		const src = readFileSync(localSetupPath, 'utf8');
+		assert.ok(src.includes('btn btn-primary'), 'expected btn-primary in local setup wizard');
+		assert.ok(src.includes('btn btn-secondary'), 'expected btn-secondary in local setup wizard');
+	});
 });