Add CSS vars for slash commands and tweak styling (#189965)

Add css vars for slash commands and tweak styling
This commit is contained in:
David Dossett 2023-08-08 13:37:37 -07:00 committed by GitHub
parent 42b4bf0670
commit d1c4bf3fcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 10 deletions

View file

@ -38,6 +38,8 @@
"--vscode-charts-yellow",
"--vscode-chat-requestBackground",
"--vscode-chat-requestBorder",
"--vscode-chat-slashCommandBackground",
"--vscode-chat-slashCommandForeground",
"--vscode-checkbox-background",
"--vscode-checkbox-border",
"--vscode-checkbox-foreground",
@ -211,12 +213,14 @@
"--vscode-editorHoverWidget-foreground",
"--vscode-editorHoverWidget-highlightForeground",
"--vscode-editorHoverWidget-statusBarBackground",
"--vscode-editorIndentGuide-activeBackground",
"--vscode-editorIndentGuide-activeBackground1",
"--vscode-editorIndentGuide-activeBackground2",
"--vscode-editorIndentGuide-activeBackground3",
"--vscode-editorIndentGuide-activeBackground4",
"--vscode-editorIndentGuide-activeBackground5",
"--vscode-editorIndentGuide-activeBackground6",
"--vscode-editorIndentGuide-background",
"--vscode-editorIndentGuide-background1",
"--vscode-editorIndentGuide-background2",
"--vscode-editorIndentGuide-background3",
@ -312,6 +316,7 @@
"--vscode-inlineChat-regionHighlight",
"--vscode-inlineChat-shadow",
"--vscode-inlineChatDiff-inserted",
"--vscode-inlineChatDiff-removed",
"--vscode-inlineChatInput-background",
"--vscode-inlineChatInput-border",
"--vscode-inlineChatInput-focusBorder",
@ -529,6 +534,7 @@
"--vscode-sideBarTitle-foreground",
"--vscode-sideBySideEditor-horizontalBorder",
"--vscode-sideBySideEditor-verticalBorder",
"--vscode-simpleFindWidget-sashBorder",
"--vscode-statusBar-background",
"--vscode-statusBar-border",
"--vscode-statusBar-debuggingBackground",
@ -760,4 +766,4 @@
"--z-index-notebook-sticky-scroll",
"--zoom-factor"
]
}
}

View file

@ -19,6 +19,8 @@
"button.secondaryBackground": "#1F1F1F",
"button.secondaryForeground": "#CCCCCC",
"button.secondaryHoverBackground": "#2B2B2B",
"chat.slashCommandBackground": "#3E4C56",
"chat.slashCommandForeground": "#7FC3FF",
"checkbox.background": "#313131",
"checkbox.border": "#3C3C3C",
"debugToolBar.background": "#181818",

View file

@ -19,6 +19,8 @@
"button.secondaryBackground": "#E5E5E5",
"button.secondaryForeground": "#3B3B3B",
"button.secondaryHoverBackground": "#CBCBCB",
"chat.slashCommandBackground": "#D2ECFF",
"chat.slashCommandForeground": "#306CA2",
"checkbox.background": "#F8F8F8",
"checkbox.border": "#CECECE",
"descriptionForeground": "#3B3B3B",

View file

@ -4,16 +4,12 @@
*--------------------------------------------------------------------------------------------*/
.chat-slash-command-content-widget {
padding: 0.1em 0.3em;
border-radius: 2px;
background-color: var(--vscode-textCodeBlock-background);
color: var(--vscode-textLink-foreground);
padding: 0 3px 1px 3px;
border-radius: 3px;
background-color: var(--vscode-chat-slashCommandBackground);
color: var(--vscode-chat-slashCommandForeground);
}
.interactive-session .interactive-input-and-toolbar .chat-slash-command-content-widget {
top: 7px !important;
}
.inline-chat .chat-slash-command-content-widget {
top: 2px !important;
}

View file

@ -5,7 +5,7 @@
import { Color, RGBA } from 'vs/base/common/color';
import { localize } from 'vs/nls';
import { registerColor } from 'vs/platform/theme/common/colorRegistry';
import { badgeBackground, badgeForeground, registerColor } from 'vs/platform/theme/common/colorRegistry';
export const chatRequestBackground = registerColor(
@ -19,3 +19,15 @@ export const chatRequestBorder = registerColor(
{ dark: new Color(new RGBA(255, 255, 255, 0.10)), light: new Color(new RGBA(0, 0, 0, 0.10)), hcDark: null, hcLight: null, },
localize('chat.requestBorder', 'The border color of a chat request.')
);
export const chatSlashCommandBackground = registerColor(
'chat.slashCommandBackground',
{ dark: badgeBackground, light: badgeBackground, hcDark: Color.white, hcLight: badgeBackground },
localize('chat.slashCommandBackground', 'The background color of a chat slash command.')
);
export const chatSlashCommandForeground = registerColor(
'chat.slashCommandForeground',
{ dark: badgeForeground, light: badgeForeground, hcDark: Color.black, hcLight: badgeForeground },
localize('chat.slashCommandForeground', 'The foreground color of a chat slash command.')
);