Skip to content

Align chat UI with design tokens - #331791

Merged
Lee Murray (mrleemurray) merged 1 commit into
mainfrom
mrleemurray/gentle-salmon-dinosaur
Aug 20, 2026
Merged

Align chat UI with design tokens#331791
Lee Murray (mrleemurray) merged 1 commit into
mainfrom
mrleemurray/gentle-salmon-dinosaur

Conversation

@mrleemurray

@mrleemurray Lee Murray (mrleemurray) commented Aug 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Aligns the chat widget styling with the VS Code design system by replacing hardcoded visual values with semantic design tokens.

Changes

  • Uses design tokens for:
    • Font sizes and weights
    • Codicon sizes
    • Corner-radius tiers
    • Border and outline thickness
    • Spacing values
    • Theme-aware separator and shadow colors
  • Applies radius tokens according to component role, including controls, inner surfaces, overlays, avatars, and pills.
  • Preserves 22×22px action targets by sizing controls explicitly instead of relying on implicit 16px + 3px padding calculations.
  • Uses zero block padding and tokenized inline padding for text actions.
  • Retains existing chat behavior while making sizing and visual hierarchy more consistent and maintainable.

Validation

  • Ran targeted stylelint against chat.css.
  • Verified the diff with git diff --check.

Copilot AI balanced review requested due to automatic review settings August 20, 2026 12:52
@mrleemurray
Lee Murray (mrleemurray) enabled auto-merge (squash) August 20, 2026 12:52
Copilot AI reviewed Aug 20, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Aligns the chat interface with VS Code’s design-token system.

Changes:

  • Replaces hardcoded sizing, spacing, typography, radius, and stroke values.
  • Standardizes compact controls and codicon sizing.
  • Adopts theme-aware separator and shadow colors.

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread src/vs/workbench/contrib/chat/browser/widget/media/chat.css
Comment thread src/vs/workbench/contrib/chat/browser/widget/media/chat.css
@github-actions

github-actions Bot commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

Screenshot Changes

Base: e6a38b7e Current: 86d6d72c

Changed (132)

sessions/sessionChatInputToolbar/SessionChatView_ChangesPill/Dark
Before After
before after
sessions/sessionChatInputToolbar/SessionChatView_ChangesPill/Light
Before After
before after
sessions/sessionChatInputToolbar/SessionChatView_ChangesAndExternalPreview/Dark
Before After
before after
sessions/sessionChatInputToolbar/SessionChatView_ChangesAndExternalPreview/Light
Before After
before after
sessions/sessionChatInputToolbar/SessionChatView_ReadOnlyPills/Dark
Before After
before after
sessions/sessionChatInputToolbar/SessionChatView_ReadOnlyPills/Light
Before After
before after
chat/artifacts/chatArtifacts/SingleArtifact/Dark
Before After
before after
chat/artifacts/chatArtifacts/SingleArtifact/Light
Before After
before after
chat/artifacts/chatArtifacts/MultipleArtifacts/Dark
Before After
before after
chat/artifacts/chatArtifacts/MultipleArtifacts/Light
Before After
before after
chat/artifacts/chatArtifacts/MultipleArtifactsCollapsed/Dark
Before After
before after
chat/artifacts/chatArtifacts/MultipleArtifactsCollapsed/Light
Before After
before after
chat/artifacts/chatArtifacts/MultiSourceExpanded/Dark
Before After
before after
chat/artifacts/chatArtifacts/MultiSourceExpanded/Light
Before After
before after
chat/artifacts/chatArtifacts/MultiSourceHoveredRow/Dark
Before After
before after
chat/artifacts/chatArtifacts/MultiSourceHoveredRow/Light
Before After
before after
chat/input/chatInput/WithArtifacts/Dark
Before After
before after
chat/input/chatInput/WithArtifacts/Light
Before After
before after
chat/input/chatInput/WithNotificationAndTodos/Dark
Before After
before after
chat/input/chatInput/WithNotificationAndTodos/Light
Before After
before after
chat/input/chatInput/WithFileChanges/Dark
Before After
before after
chat/input/chatInput/WithFileChanges/Light
Before After
before after
chat/input/chatInput/WithTodos/Dark
Before After
before after
chat/input/chatInput/WithTodos/Light
Before After
before after
chat/input/chatInput/WithTodosAndFileChanges/Dark
Before After
before after
chat/input/chatInput/WithTodosAndFileChanges/Light
Before After
before after
chat/input/chatInput/WithArtifactsAndFileChanges/Dark
Before After
before after
chat/input/chatInput/WithArtifactsAndFileChanges/Light
Before After
before after
chat/input/chatInput/Full/Dark
Before After
before after
chat/input/chatInput/Full/Light
Before After
before after
chat/chatProgressContentPart/Completed/Dark
Before After
before after
chat/chatProgressContentPart/Completed/Light
Before After
before after
chat/chatProgressContentPart/WithCustomIcon/Dark
Before After
before after
chat/chatProgressContentPart/WithCustomIcon/Light
Before After
before after
chat/chatRichLink/inChat/Dark
Before After
before after
chat/chatRichLink/inChat/Light
Before After
before after
chat/chatRichLink/githubPullRequestInChat/Dark
Before After
before after
chat/chatRichLink/githubPullRequestInChat/Light
Before After
before after
chat/chatRichLink/loadingGithubPullRequestInChat/Dark
Before After
before after
chat/chatRichLink/loadingGithubPullRequestInChat/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - simple command/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - simple command/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Running - simple command/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Running - simple command/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - simple command/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - simple command/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Running sandbox - simple command/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Running sandbox - simple command/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - special chars/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - special chars/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - special chars/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - special chars/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - backticks/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - backticks/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - backticks/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - backticks/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - powershell backticks/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - powershell backticks/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - with intention/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - with intention/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Height parity - with and without intention/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Height parity - with and without intention/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Running - with intention/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Running - with intention/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - with intention/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran sandbox - with intention/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - long intention and command/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - long intention and command/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - long intention short command/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - long intention short command/Light
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - short intention long command/Dark
Before After
before after
chat/terminalCollapsible/chatTerminalCollapsible/Ran - short intention long command/Light
Before After
before after
chat/chatToolRiskBadge/Green/Dark
Before After
before after
chat/chatToolRiskBadge/Green/Light
Before After
before after
chat/chatToolRiskBadge/Orange/Dark
Before After
before after
chat/chatToolRiskBadge/Orange/Light
Before After
before after
chat/chatToolRiskBadge/Red/Dark
Before After
before after
chat/chatToolRiskBadge/Red/Light
Before After
before after
chat/chatToolRiskBadge/GreenInContext/Dark
Before After
before after
chat/chatToolRiskBadge/GreenInContext/Light
Before After
before after
chat/chatToolRiskBadge/OrangeInContext/Dark
Before After
before after
chat/chatToolRiskBadge/OrangeInContext/Light
Before After
before after
chat/chatToolRiskBadge/RedInContext/Dark
Before After
before after
chat/chatToolRiskBadge/RedInContext/Light
Before After
before after
chat/chatToolRiskBadge/GreenElicitationInContext/Dark
Before After
before after
chat/chatToolRiskBadge/GreenElicitationInContext/Light
Before After
before after
chat/chatToolRiskBadge/OrangeElicitationInContext/Dark
Before After
before after
chat/chatToolRiskBadge/OrangeElicitationInContext/Light
Before After
before after
chat/chatToolRiskBadge/RedElicitationInContext/Dark
Before After
before after
chat/chatToolRiskBadge/RedElicitationInContext/Light
Before After
before after
chat/chatToolRiskBadge/BadgeOffInContext/Dark
Before After
before after
chat/chatToolRiskBadge/BadgeOffInContext/Light
Before After
before after
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Dark
Before After
before after
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Light
Before After
before after
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Dark
Before After
before after
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Light
Before After
before after
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Dark
Before After
before after
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Light
Before After
before after
chat/chatToolRiskBadge/HoverPreviewNoDetails/Dark
Before After
before after
chat/chatToolRiskBadge/HoverPreviewNoDetails/Light
Before After
before after
chat/chatToolRiskBadge/HoverPreviewDisclaimer/Dark
Before After
before after
chat/chatToolRiskBadge/HoverPreviewDisclaimer/Light
Before After
before after
chat/chatToolRiskBadge/HoverPreviewUnsandboxed/Dark
Before After
before after
chat/chatToolRiskBadge/HoverPreviewUnsandboxed/Light
Before After
before after
chat/chatToolRiskBadge/HoverPreviewUnsandboxedWithDisclaimer/Dark
Before After
before after
chat/chatToolRiskBadge/HoverPreviewUnsandboxedWithDisclaimer/Light
Before After
before after
chat/chatTurnPills/part/ChangesOnly_Expanded/Dark
Before After
before after
chat/chatTurnPills/part/ChangesOnly_Expanded/Light
Before After
before after
chat/chatTurnPills/part/ChangesAndExternalPreview_Expanded/Dark
Before After
before after
chat/chatTurnPills/part/ChangesAndExternalPreview_Expanded/Light
Before After
before after
chat/chatTurnPills/inChat/Changes/Dark
Before After
before after
chat/chatTurnPills/inChat/Changes/Light
Before After
before after
chat/chatTurnPills/inChat/ChangesAndExternalPreview/Dark
Before After
before after
chat/chatTurnPills/inChat/ChangesAndExternalPreview/Light
Before After
before after
chat/widget/chatWidget/SimpleQA/Dark
Before After
before after
chat/widget/chatWidget/SimpleQA/Light
Before After
before after
chat/widget/chatWidget/ScrollToBottomAction/Dark
Before After
before after
chat/widget/chatWidget/ScrollToBottomAction/Light
Before After
before after
chat/widget/chatWidget/PendingToolApproval/Dark
Before After
before after
chat/widget/chatWidget/PendingToolApproval/Light
Before After
before after
chat/widget/chatWidget/CodeBlockInList/Dark
Before After
before after
chat/widget/chatWidget/CodeBlockInList/Light
Before After
before after
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Dark
Before After
before after
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Light
Before After
before after
chat/widget/chatWidget/MultiTurn/Dark
Before After
before after
chat/widget/chatWidget/MultiTurn/Light
Before After
before after
chat/widget/chatWidget/LastResponseContentHover/Dark
Before After
before after
chat/widget/chatWidget/LastResponseContentHover/Light
Before After
before after
chat/widget/chatWidget/ResponseActionKeyboardFocus/Dark
Before After
before after
chat/widget/chatWidget/ResponseActionKeyboardFocus/Light
Before After
before after
chat/widget/chatWidget/RequestTimestampKeyboardFocus/Dark
Before After
before after
chat/widget/chatWidget/RequestTimestampKeyboardFocus/Light
Before After
before after

@mrleemurray
Lee Murray (mrleemurray) merged commit d06ea12 into main Aug 20, 2026
28 checks passed
@mrleemurray
Lee Murray (mrleemurray) deleted the mrleemurray/gentle-salmon-dinosaur branch August 20, 2026 17:25
@vs-code-engineering vs-code-engineering Bot added this to the 1.135.0 milestone Aug 20, 2026
dmitrivMS
Dmitriy Vasyura (dmitrivMS) reviewed Aug 20, 2026
View reviewed changes
Comment thread src/vs/workbench/contrib/chat/browser/widget/media/chat.css

.chat-list-at-bottom .chat-progress-reservable > .value:has(> .rendered-markdown:last-child) {
padding-bottom: 37px;
padding-bottom: var(--vscode-spacing-size360);

@dmitrivMS Dmitriy Vasyura (dmitrivMS) Aug 20, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AI Review: This padding is a structural reservation, not visual spacing. When working progress is appended, the rule stops matching and the row normalizes to 81px; replacing 37px with the 36px spacing token makes the reserved state normalize to 80px first, reintroducing a one-pixel height change that can disturb bottom-scroll anchoring. Keep the 37px structural literal or derive an exactly equivalent reservation.

@mrleemurray Lee Murray (mrleemurray) Aug 21, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed in #331982

@mrleemurray Lee Murray (mrleemurray) mentioned this pull request Aug 21, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dmitrivMS Dmitriy Vasyura (dmitrivMS) dmitrivMS left review comments
Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@justschen Justin Chen (justschen) justschen approved these changes

Assignees

@mrleemurray Lee Murray (mrleemurray)

Labels

None yet

Projects

None yet

Milestone

1.135.0

Development

Successfully merging this pull request may close these issues.

4 participants

@mrleemurray @dmitrivMS @justschen