Skip to content

Phase 1: onboarding design-system migration #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Pterjudin merged 1 commit into from
Jul 23, 2026
Merged

Phase 1: onboarding design-system migration #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 11 additions & 36 deletions src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/ExpressOnboardingFlow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -357,17 +356,15 @@ 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')}
</button>
<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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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')}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
34 changes: 17 additions & 17 deletions src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/LocalSetupWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -390,15 +390,15 @@ 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>
}
{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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -560,22 +560,22 @@ 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
</button>
}
<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>
Expand All @@ -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
Expand Down Expand Up @@ -626,15 +626,15 @@ 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
</button>
}
<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>
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/vs/workbench/contrib/cortexide/browser/react/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
26 changes: 26 additions & 0 deletions src/vs/workbench/contrib/cortexide/test/common/designSystem.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
Loading