Skip to content

Phase 1: VoidOnboarding card chrome design-system migration #88

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: VoidOnboarding card chrome design-system migration #88

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
64 changes: 20 additions & 44 deletions src/vs/workbench/contrib/cortexide/browser/react/src/onboarding/VoidOnboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,17 +232,13 @@ const AddProvidersPage = ({ pageIndex, setPageIndex }: { pageIndex: number, setP

<div className="flex flex-col md:flex-row flex-1 gap-6">
{/* Left rail */}
<div className="md:w-1/3 w-full flex flex-col gap-6 p-6 rounded-[28px] border border-void-border-3 bg-void-bg-2/70 shadow-[0_35px_90px_rgba(0,0,0,0.35)] h-full overflow-y-auto">
<div className="md:w-1/3 w-full flex flex-col gap-6 p-6 cortex-card h-full overflow-y-auto">
<div className="flex flex-wrap md:flex-col gap-2">
{[...tabNames, 'Cloud/Other'].map(tab => (
<button
type="button"
key={tab}
className={`
w-full rounded-2xl px-4 py-3 text-left text-sm font-medium tracking-wide transition-all duration-200
${currentTab === tab
? 'bg-gradient-to-r from-[#0e70c0] to-[#6b5bff] text-white shadow-[0_18px_40px_rgba(28,107,219,0.35)]'
: 'bg-void-bg-3/90 text-void-fg-2 border border-void-border-3 hover:border-void-border-1'}
`}
className={`btn w-full text-left px-4 py-3 text-sm font-medium tracking-wide ${currentTab === tab ? 'btn-primary' : 'btn-secondary'}`}
onClick={() => {
setCurrentTab(tab as TabName);
setErrorMessage(null);
Expand All @@ -258,7 +254,7 @@ const AddProvidersPage = ({ pageIndex, setPageIndex }: { pageIndex: number, setP
{featureNameMap.map(({ display, featureName }) => {
const hasModel = settingsState.modelSelectionOfFeature[featureName] !== null;
return (
<div key={featureName} className="flex items-center justify-between rounded-2xl border border-void-border-4/80 bg-void-bg-3/60 px-4 py-3">
<div key={featureName} className="flex items-center justify-between cortex-card-muted px-4 py-3">
<span>{display}</span>
{hasModel ? (
<span className="inline-flex items-center gap-1 text-emerald-400 text-xs font-medium">
Expand All @@ -274,7 +270,7 @@ const AddProvidersPage = ({ pageIndex, setPageIndex }: { pageIndex: number, setP
</div>

{/* Content */}
<div className="flex-1 flex flex-col rounded-[32px] border border-void-border-3 bg-void-bg-1/70 backdrop-blur-xl shadow-[0_45px_120px_rgba(0,0,0,0.45)] p-6">
<div className="flex-1 flex flex-col cortex-card p-6">
<div className="w-full max-w-xl mx-auto text-center mb-8 space-y-3">
<p className="text-xs uppercase tracking-[0.35em] text-void-fg-4">Active tab</p>
<div className="text-4xl font-light text-void-fg-0">{currentTab}</div>
Expand Down Expand Up @@ -318,7 +314,7 @@ const AddProvidersPage = ({ pageIndex, setPageIndex }: { pageIndex: number, setP
</ErrorBoundary>
)}
{(!showLocalWizard) && providerNamesOfTab[currentTab].map((providerName) => (
<div key={providerName} className="rounded-2xl border border-void-border-3/80 bg-void-bg-3/60 p-5 shadow-[0_10px_30px_rgba(0,0,0,0.35)]">
<div key={providerName} className="cortex-card-muted p-5">
<div className="flex items-center justify-between mb-3">
<div className="text-xl font-medium text-void-fg-0 flex items-center gap-2">
Add {displayInfoOfProviderName(providerName).title}
Expand Down Expand Up @@ -347,7 +343,7 @@ const AddProvidersPage = ({ pageIndex, setPageIndex }: { pageIndex: number, setP
<SettingsForProvider providerName={providerName} showProviderTitle={false} showProviderSuggestions={true} />

{providerName === 'ollama' && (
<div className="mt-4 rounded-xl border border-void-border-4/80 bg-black/20">
<div className="mt-4 cortex-card-muted bg-black/20">
<OllamaSetupInstructions />
</div>
)}
Expand All @@ -356,7 +352,7 @@ const AddProvidersPage = ({ pageIndex, setPageIndex }: { pageIndex: number, setP
</div>

{(currentTab === 'Local' || currentTab === 'Cloud/Other') && !showLocalWizard && (
<div className="w-full mt-6 rounded-2xl border border-void-border-4/80 bg-void-bg-2/70 p-6">
<div className="w-full mt-6 cortex-card-muted p-6">
<div className="flex items-center gap-2 mb-4">
<div className="text-xl font-medium">Models</div>
</div>
Expand All @@ -370,7 +366,7 @@ const AddProvidersPage = ({ pageIndex, setPageIndex }: { pageIndex: number, setP

<div className="flex flex-col gap-3 items-end w-full mt-6">
{errorMessage && (
<div className="w-full text-sm rounded-2xl border border-void-warning/30 bg-void-warning/15 text-void-warning px-4 py-3 text-right">
<div className="w-full text-sm cortex-alert-warning px-4 py-3 text-right">
{errorMessage}
</div>
)}
Expand Down Expand Up @@ -447,13 +443,8 @@ const NextButton = ({ onClick, ...props }: { onClick: () => void } & React.Butto
type="button"
onClick={disabled ? undefined : onClick}
onDoubleClick={onClick}
className={`
inline-flex items-center gap-2 px-6 py-2.5 rounded-2xl font-semibold tracking-tight transition-all duration-300 border border-white/10
${disabled
? 'bg-white/5 text-white/35 cursor-not-allowed'
: 'bg-gradient-to-r from-[#2a2c34] via-[#1b1c23] to-[#101117] text-white shadow-[0_25px_55px_rgba(0,0,0,0.55)] hover:translate-y-[-1px] hover:shadow-[0_30px_70px_rgba(0,0,0,0.65)]'}
${className}
`}
className={`btn btn-primary inline-flex items-center gap-2 ${className}`.trim()}
disabled={disabled}
{...disabled && {
'data-tooltip-id': 'cortex-tooltip',
"data-tooltip-content": 'Please enter all required fields or choose another provider',
Expand All @@ -472,7 +463,7 @@ const PreviousButton = ({ onClick, ...props }: { onClick: () => void } & React.B
<button
type="button"
onClick={onClick}
className="px-5 py-2.5 rounded-2xl border border-white/15 bg-white/5 text-white/70 hover:text-white hover:border-white/40 hover:bg-white/10 transition-all duration-200"
className="btn btn-secondary"
{...props}
>
Back
Expand All @@ -492,9 +483,7 @@ const OnboardingPageShell = ({ top, bottom, content, hasMaxWidth = true, classNa
return (
<div className={`min-h-[70vh] w-full ${className}`}>
<div className={`
text-lg flex flex-col gap-6 w-full h-full mx-auto px-8 py-10
rounded-[32px] border border-void-border-3 bg-void-bg-2/70 backdrop-blur-xl
shadow-[0_30px_90px_rgba(0,0,0,0.45)]
text-lg flex flex-col gap-6 w-full h-full mx-auto px-8 py-10 cortex-card
${hasMaxWidth ? 'max-w-[720px]' : ''}
max-h-[calc(100vh-6rem)]
overflow-y-auto
Expand All @@ -511,7 +500,7 @@ const WelcomePage = ({ onNext, onSkip }: { onNext: () => void; onSkip: () => voi
const { t } = useTranslation()
return (
<div className="space-y-8">
<div className="rounded-[32px] border border-void-border-2 bg-void-bg-2/90 backdrop-blur-2xl shadow-[0_60px_140px_rgba(0,0,0,0.75)] px-10 py-12">
<div className="cortex-card-elevated px-10 py-12">
<div className="flex flex-col lg:flex-row gap-10 items-center">
<div className="flex-1 flex flex-col gap-6 text-center lg:text-left">
<p className="text-xs uppercase tracking-[0.45em] text-void-fg-4">{t('onboarding.welcome')}</p>
Expand All @@ -523,7 +512,7 @@ const WelcomePage = ({ onNext, onSkip }: { onNext: () => void; onSkip: () => voi
</div>
<div className="flex flex-wrap gap-3 justify-center lg:justify-start">
{welcomeHighlights.map((highlight) => (
<span key={highlight} className="px-3 py-1.5 rounded-full border border-void-border-3 bg-void-bg-3/80 text-xs tracking-[0.3em] uppercase text-void-fg-3">
<span key={highlight} className="cortex-chip">
{highlight}
</span>
))}
Expand All @@ -536,13 +525,13 @@ const WelcomePage = ({ onNext, onSkip }: { onNext: () => void; onSkip: () => voi
<div className="flex-1 w-full flex flex-col items-center gap-6">
<div className="relative w-full max-w-sm aspect-square">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent blur-3xl rounded-[32px]" />
<div className="relative w-full h-full rounded-[28px] border border-void-border-2 bg-void-bg-3/80 shadow-[0_45px_110px_rgba(0,0,0,0.7)] flex items-center justify-center p-6">
<div className="relative w-full h-full cortex-card-muted flex items-center justify-center p-6">
<VoidIcon />
</div>
</div>
<div className="grid grid-cols-2 gap-4 w-full max-w-sm">
{welcomeStats.map(({ label, value, detail }) => (
<div key={label} className="rounded-2xl border border-void-border-3 bg-void-bg-3/80 p-4 text-center text-void-fg-2">
<div key={label} className="cortex-card-muted p-4 text-center text-void-fg-2">
<p className="text-[11px] uppercase tracking-[0.4em] text-void-fg-4">{label}</p>
<p className="text-lg font-medium text-void-fg-0 mt-2">{value}</p>
<p className="text-xs text-void-fg-3 mt-1">{detail}</p>
Expand Down Expand Up @@ -618,17 +607,10 @@ const PrimaryActionButton = ({ children, className = '', ringSize, ...props }: {
<button
type='button'
className={`
inline-flex items-center justify-center gap-2 rounded-[18px] font-semibold tracking-tight leading-normal
text-white border border-white/10 min-h-[44px]
bg-gradient-to-r from-[#3a3d47] via-[#23252c] to-[#111216]
shadow-[0_35px_80px_rgba(0,0,0,0.6)]
hover:shadow-[0_45px_100px_rgba(0,0,0,0.7)] hover:translate-y-[-1px]
focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-white/20
focus-visible:ring-offset-[#050612]
transition-all duration-300 group
btn btn-primary inline-flex items-center justify-center gap-2 font-semibold tracking-tight leading-normal min-h-[44px] group
${sizingClass}
${className}
`}
`.trim()}
{...props}
>
<span className="inline-flex items-center gap-2">{children}</span>
Expand All @@ -642,13 +624,7 @@ const PrimaryActionButton = ({ children, className = '', ringSize, ...props }: {
const SecondaryActionButton = ({ children, className = '', ...props }: { children: React.ReactNode } & React.ButtonHTMLAttributes<HTMLButtonElement>) => (
<button
type="button"
className={`
inline-flex items-center justify-center gap-2 rounded-2xl px-5 py-2.5
border border-void-border-2 text-void-fg-2
hover:text-void-fg-0 hover:border-void-border-1
transition-all duration-200
${className}
`}
className={`btn btn-secondary ${className}`.trim()}
{...props}
>
{children}
Expand Down
45 changes: 45 additions & 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 @@ -447,3 +447,48 @@ body.vscode-light .void-scope .btn-submit:not(:disabled):hover {
outline: 1px solid var(--cortex-ring-color);
outline-offset: 1px;
}

.void-scope .cortex-card {
background: color-mix(in srgb, var(--cortex-surface-2) 72%, transparent);
color: var(--cortex-text-base);
border: 1px solid var(--cortex-border-base);
border-radius: var(--cortex-radius-xl);
box-shadow: var(--cortex-shadow-soft);
backdrop-filter: blur(12px);
}

.void-scope .cortex-card-elevated {
background: color-mix(in srgb, var(--cortex-surface-2) 88%, transparent);
color: var(--cortex-text-base);
border: 1px solid var(--cortex-border-strong);
border-radius: var(--cortex-radius-xl);
box-shadow: var(--cortex-shadow-soft);
backdrop-filter: blur(16px);
}

.void-scope .cortex-card-muted {
background: color-mix(in srgb, var(--cortex-surface-3) 58%, transparent);
color: var(--cortex-text-base);
border: 1px solid var(--cortex-border-weak);
border-radius: var(--cortex-radius-lg);
}

.void-scope .cortex-chip {
display: inline-flex;
align-items: center;
padding: var(--cortex-space-xs) var(--cortex-space-md);
background: color-mix(in srgb, var(--cortex-surface-3) 80%, transparent);
color: var(--cortex-text-muted);
border: 1px solid var(--cortex-border-weak);
border-radius: 9999px;
font-size: var(--cortex-font-label);
letter-spacing: 0.3em;
text-transform: uppercase;
}

.void-scope .cortex-alert-warning {
background: color-mix(in srgb, var(--cortex-warning) 15%, transparent);
color: var(--cortex-warning);
border: 1px solid color-mix(in srgb, var(--cortex-warning) 30%, transparent);
border-radius: var(--cortex-radius-lg);
}
22 changes: 22 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 @@ -86,6 +86,28 @@ suite('designSystem (Phase 1 — void onboarding adoption)', () => {
assert.ok(src.includes('btn btn-primary'), 'expected btn-primary in void onboarding');
assert.ok(src.includes('btn btn-secondary'), 'expected btn-secondary in void onboarding');
});

test('Void onboarding uses design-system card chrome', () => {
const src = readFileSync(voidOnboardingPath, 'utf8');
assert.ok(src.includes('cortex-card'), 'expected cortex-card panels in void onboarding');
assert.ok(src.includes('cortex-card-muted'), 'expected muted cards for nested sections');
assert.ok(src.includes('cortex-chip'), 'expected cortex-chip highlight pills');
assert.ok(!src.includes('bg-gradient-to-r from-[#0e70c0]'), 'tab rail should use btn-primary, not legacy gradient');
});
});

suite('designSystem (Phase 1 — onboarding card tokens)', () => {

test('.cortex-card uses cortex surface tokens', () => {
assert.ok(
hasRule(/\.void-scope\s+\.cortex-card\s*\{[^}]*background:\s*color-mix\([^)]*var\(--cortex-surface-2\)/s),
'expected cortex-card background token',
);
assert.ok(
hasRule(/\.void-scope\s+\.cortex-card\s*\{[^}]*border:\s*1px solid var\(--cortex-border-base\)/s),
'expected cortex-card border token',
);
});
});

suite('designSystem (Phase 1 — settings adoption)', () => {
Expand Down
Loading