Skip to content

Fix chat input border colors and animation duration#311933

Merged
mrleemurray merged 2 commits intomainfrom
mrleemurray/stale-emerald-mink
Apr 22, 2026
Merged

Fix chat input border colors and animation duration#311933
mrleemurray merged 2 commits intomainfrom
mrleemurray/stale-emerald-mink

Conversation

@mrleemurray
Copy link
Copy Markdown
Contributor

@mrleemurray mrleemurray commented Apr 22, 2026

This pull request updates the animated border colors for the chat input component to better align with the button background color, ensuring a more consistent and visually appealing theme across both light and dark modes. Additionally, it speeds up the chat send button's spinning animation for a snappier user experience.

Theme and color improvements:

  • Updated the definitions of chat.inputWorkingBorderColor1, chat.inputWorkingBorderColor2, and chat.inputWorkingBorderColor3 in chatColors.ts to derive their values from the buttonBackground color, using darken and lighten utilities for secondary and tertiary colors. This ensures the chat input border colors are consistent with button styling across themes.
  • Changed the values of chat.inputWorkingBorderColor1, chat.inputWorkingBorderColor2, and chat.inputWorkingBorderColor3 in both 2026-dark.json and 2026-light.json to match the new color scheme, further aligning theme files with the updated color logic. [1] [2]
  • Added imports for buttonBackground, darken, and lighten in chatColors.ts to support the new color calculations.

UI/Animation tweaks:

  • Reduced the duration of the chat-send-button-spin animation from 18 seconds to 8 seconds in chatInput.css, making the send button's activity indicator more responsive and noticeable. [1] [2]

Copilot AI review requested due to automatic review settings April 22, 2026 16:05
@mrleemurray mrleemurray enabled auto-merge (squash) April 22, 2026 16:05
@mrleemurray mrleemurray self-assigned this Apr 22, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Adjusts chat input “working” border color tokens to better align with button theming and speeds up the Sessions send-button gradient rotation to improve perceived responsiveness.

Changes:

  • Updated chat.inputWorkingBorderColor{1,2,3} defaults to derive from button.background (with lighten/darken transforms).
  • Reduced the experimental Sessions send-button gradient rotation animation duration from 18s to 8s.
  • Updated 2026 light/dark default theme overrides for the three chat input working border colors.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
src/vs/workbench/contrib/chat/common/widget/chatColors.ts Derives chat input working border color tokens from button.background (and transforms) for improved visibility/consistency.
src/vs/sessions/contrib/chat/browser/media/chatInput.css Speeds up the gradient rotation animation for the Sessions send button.
extensions/theme-defaults/themes/2026-light.json Updates 2026 light theme values for chat input working border colors.
extensions/theme-defaults/themes/2026-dark.json Updates 2026 dark theme values for chat input working border colors.

@mrleemurray mrleemurray merged commit 3cf9be6 into main Apr 22, 2026
44 of 45 checks passed
@mrleemurray mrleemurray deleted the mrleemurray/stale-emerald-mink branch April 22, 2026 17:18
@vs-code-engineering vs-code-engineering Bot added this to the 1.118.0 milestone Apr 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants