Skip to content

Phase 1: composer + tool-header design tokens #89

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: composer + tool-header design tokens #89

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
17 changes: 2 additions & 15 deletions ...s/workbench/contrib/cortexide/browser/react/src/sidebar-tsx/composer/CommandBarInChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,28 +184,15 @@ export const CommandBarInChat = () => {
<div className='px-2'>
<div
className={`
select-none
flex w-full rounded-t-lg bg-void-bg-3
text-void-fg-3 text-xs text-nowrap

select-none cortex-tool-header-bar text-nowrap
overflow-hidden transition-all duration-200 ease-in-out
${isFileDetailsOpened ? 'max-h-24' : 'max-h-0'}
`}
>
{fileDetailsContent}
</div>
</div>
<div
className={`
select-none
flex w-full rounded-t-lg bg-void-bg-3
text-void-fg-3 text-xs text-nowrap
border-t border-l border-r border-zinc-300/10

px-2 py-1
justify-between
`}
>
<div className="select-none cortex-tool-header-bar text-nowrap px-2 py-1 justify-between">
<div className="flex gap-2 items-center">
{fileDetailsButton}
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/vs/workbench/contrib/cortexide/browser/react/src/sidebar-tsx/composer/VoidChatArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,7 @@ export const VoidChatArea: React.FC<CortexideChatAreaProps> = ({
<button
type="button"
onClick={handleImageUploadClick}
className="flex-shrink-0 p-1.5 rounded hover:bg-void-bg-2-alt text-void-fg-4 hover:text-void-fg-2 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
className="cortex-composer-icon-btn"
aria-label="Upload images"
title="Upload images (or paste/drag & drop)"
>
Expand All @@ -461,7 +461,7 @@ export const VoidChatArea: React.FC<CortexideChatAreaProps> = ({
<button
type="button"
onClick={handlePDFUploadClick}
className="flex-shrink-0 p-1.5 rounded hover:bg-void-bg-2-alt text-void-fg-4 hover:text-void-fg-2 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
className="cortex-composer-icon-btn"
aria-label="Upload PDFs"
title="Upload PDFs (or paste/drag & drop)"
>
Expand Down Expand Up @@ -499,11 +499,11 @@ export const VoidChatArea: React.FC<CortexideChatAreaProps> = ({
</div>

{/* Bottom row - Model selector and settings */}
<div className='flex flex-row justify-between items-center gap-2 mt-1 pt-1 border-t border-void-border-3/50'>
<div className='cortex-composer-toolbar flex flex-row justify-between items-center gap-2'>
{showModelDropdown && (
<div className='flex items-center flex-wrap gap-x-2 gap-y-1 text-nowrap flex-1 min-w-0'>
{featureName === 'Chat' && <ChatModeDropdown className='text-xs text-void-fg-3 bg-void-bg-1 border border-void-border-2 rounded py-0.5 px-1.5' />}
<ModelDropdown featureName={featureName} className='text-xs text-void-fg-3 bg-void-bg-1 rounded' />
{featureName === 'Chat' && <ChatModeDropdown className='cortex-composer-control' />}
<ModelDropdown featureName={featureName} className='cortex-composer-control' />
<ReasoningOptionSlider featureName={featureName} />
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/contrib/cortexide/browser/react/src/sidebar-tsx/tools/ToolHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const ToolHeaderWrapper = ({
>{desc1}</span>

return (<div className=''>
<div className={`w-full border border-void-border-3 rounded px-2 py-1 bg-void-bg-3 overflow-hidden ${className}`}>
<div className={`cortex-tool-header ${className ?? ''}`.trim()}>
{/* header */}
<div className={`select-none flex items-center min-h-[24px]`}>
<div className={`flex items-center w-full gap-x-2 overflow-hidden justify-between ${isRejected ? 'line-through' : ''}`}>
Expand Down
62 changes: 62 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 @@ -492,3 +492,65 @@ body.vscode-light .void-scope .btn-submit:not(:disabled):hover {
border: 1px solid color-mix(in srgb, var(--cortex-warning) 30%, transparent);
border-radius: var(--cortex-radius-lg);
}

.void-scope .cortex-composer-toolbar {
border-top: 1px solid color-mix(in srgb, var(--cortex-border-weak) 50%, transparent);
padding-top: var(--cortex-space-xs);
margin-top: var(--cortex-space-xs);
}

.void-scope .cortex-composer-icon-btn {
flex-shrink: 0;
padding: var(--cortex-space-sm);
border-radius: var(--cortex-radius-sm);
color: var(--cortex-text-subtle);
background: transparent;
border: none;
cursor: pointer;
transition:
background-color var(--cortex-transition-base),
color var(--cortex-transition-base);
}

.void-scope .cortex-composer-icon-btn:not(:disabled):hover {
background: var(--cortex-surface-2-alt);
color: var(--cortex-text-muted);
}

.void-scope .cortex-composer-icon-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

.void-scope .cortex-composer-control {
font-size: var(--cortex-font-label);
color: var(--cortex-text-muted);
background: var(--cortex-surface-1);
border: 1px solid var(--cortex-border-base);
border-radius: var(--cortex-radius-sm);
padding: 2px var(--cortex-space-sm);
}

.void-scope .cortex-tool-header {
width: 100%;
border: 1px solid var(--cortex-border-base);
border-radius: var(--cortex-radius-sm);
padding: var(--cortex-space-xs) var(--cortex-space-sm);
background: var(--cortex-surface-3);
color: var(--cortex-text-muted);
overflow: hidden;
}

.void-scope .cortex-tool-header-bar {
display: flex;
width: 100%;
border-top-left-radius: var(--cortex-radius-lg);
border-top-right-radius: var(--cortex-radius-lg);
background: var(--cortex-surface-3);
color: var(--cortex-text-muted);
font-size: var(--cortex-font-label);
padding: var(--cortex-space-xs) var(--cortex-space-sm);
border-top: 1px solid color-mix(in srgb, var(--cortex-border-weak) 40%, transparent);
border-left: 1px solid color-mix(in srgb, var(--cortex-border-weak) 40%, transparent);
border-right: 1px solid color-mix(in srgb, var(--cortex-border-weak) 40%, transparent);
}
33 changes: 33 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 @@ -78,6 +78,9 @@ const voidOnboardingPath = join(dirname(fileURLToPath(import.meta.url)), '../../
const settingsPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/settings/Settings.tsx');
const sidebarChatPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/SidebarChat.tsx');
const stagingContextChipsPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/composer/StagingContextChips.tsx');
const voidChatAreaPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/composer/VoidChatArea.tsx');
const toolHeaderPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/tools/ToolHeader.tsx');
const commandBarInChatPath = join(dirname(fileURLToPath(import.meta.url)), '../../browser/react/src/sidebar-tsx/composer/CommandBarInChat.tsx');

suite('designSystem (Phase 1 — void onboarding adoption)', () => {

Expand Down Expand Up @@ -138,3 +141,33 @@ suite('designSystem (Phase 1 — sidebar chat shell)', () => {
assert.ok(src.includes('onRemoveAt(idx)'), 'remove button should target clicked chip');
});
});

suite('designSystem (Phase 1 — composer tool headers)', () => {

test('.cortex-tool-header uses cortex surface tokens', () => {
assert.ok(
hasRule(/\.void-scope\s+\.cortex-tool-header\s*\{[^}]*background:\s*var\(--cortex-surface-3\)/s),
'expected cortex-tool-header background token',
);
assert.ok(
hasRule(/\.void-scope\s+\.cortex-tool-header-bar\s*\{[^}]*background:\s*var\(--cortex-surface-3\)/s),
'expected cortex-tool-header-bar background token',
);
});

test('VoidChatArea composer footer uses design-system controls', () => {
const src = readFileSync(voidChatAreaPath, 'utf8');
assert.ok(src.includes('cortex-composer-toolbar'), 'expected composer toolbar class');
assert.ok(src.includes('cortex-composer-icon-btn'), 'expected composer icon button class');
assert.ok(src.includes('cortex-composer-control'), 'expected composer control class');
assert.ok(!src.includes('border-void-border-3/50'), 'toolbar should not use legacy void border');
});

test('Tool and command bar headers use cortex-tool-header tokens', () => {
const toolHeaderSrc = readFileSync(toolHeaderPath, 'utf8');
const commandBarSrc = readFileSync(commandBarInChatPath, 'utf8');
assert.ok(toolHeaderSrc.includes('cortex-tool-header'), 'ToolHeaderWrapper should use cortex-tool-header');
assert.ok(commandBarSrc.includes('cortex-tool-header-bar'), 'CommandBarInChat should use cortex-tool-header-bar');
assert.ok(!commandBarSrc.includes('bg-void-bg-3'), 'CommandBarInChat should not use legacy void background');
});
});
Loading