diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 1248708ca5f..964129a60d7 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -384,6 +384,12 @@ "--vscode-interactive-responseBackground", "--vscode-interactive-responseActiveBackground", "--vscode-interactive-responseBorder", + "--vscode-interactiveEditor-border", + "--vscode-interactiveEditor-shadow", + "--vscode-interactiveEditorInput-border", + "--vscode-interactiveEditorInput-focusBorder", + "--vscode-interactiveEditorInput-placeholderForeground", + "--vscode-interactiveEditorInput-background", "--vscode-debugToolBar-background", "--vscode-debugToolBar-border", "--vscode-debugIcon-startForeground", @@ -662,62 +668,62 @@ "--vscode-terminal-ansiBrightWhite" ], "others": [ - "--background-dark", - "--background-light", - "--dropdown-padding-bottom", - "--dropdown-padding-top", - "--insert-border-color", - "--last-tab-margin-right", - "--monaco-monospace-font", - "--monaco-monospace-font", - "--notebook-cell-input-preview-font-family", - "--notebook-cell-input-preview-font-size", - "--notebook-cell-output-font-size", - "--notebook-diff-view-viewport-slider", - "--notebook-find-horizontal-padding", - "--notebook-find-width", - "--outline-element-color", - "--separator-border", - "--status-border-top-color", - "--tab-border-bottom-color", - "--tab-border-top-color", - "--tab-dirty-border-top-color", - "--tabs-border-bottom-color", - "--testMessageDecorationFontFamily", - "--testMessageDecorationFontSize", - "--title-border-bottom-color", - "--vscode-editorCodeLens-fontFamily", - "--vscode-editorCodeLens-fontFamilyDefault", - "--vscode-editorCodeLens-fontFeatureSettings", - "--vscode-editorCodeLens-fontSize", - "--vscode-editorCodeLens-lineHeight", - "--vscode-explorer-align-offset-margin-left", - "--vscode-interactive-result-editor-background-color", - "--vscode-repl-font-family", - "--vscode-repl-font-size-for-twistie", - "--vscode-repl-font-size", - "--vscode-repl-line-height", - "--vscode-sash-hover-size", - "--vscode-sash-size", - "--window-border-color", - "--workspace-trust-check-color", - "--workspace-trust-selected-color", - "--workspace-trust-unselected-color", - "--workspace-trust-x-color", - "--z-index-notebook-cell-bottom-toolbar-container", - "--z-index-notebook-cell-editor-outline", - "--z-index-notebook-cell-expand-part-button", - "--z-index-notebook-cell-output-toolbar", - "--z-index-notebook-cell-status", - "--z-index-notebook-cell-toolbar-dropdown-active", - "--z-index-notebook-cell-toolbar", - "--z-index-notebook-folding-indicator", - "--z-index-notebook-input-collapse-condicon", - "--z-index-notebook-list-insertion-indicator", - "--z-index-notebook-output", - "--z-index-notebook-progress-bar", - "--z-index-notebook-scrollbar", - "--z-index-run-button-container", - "--zoom-factor" - ] + "--background-dark", + "--background-light", + "--dropdown-padding-bottom", + "--dropdown-padding-top", + "--insert-border-color", + "--last-tab-margin-right", + "--monaco-monospace-font", + "--monaco-monospace-font", + "--notebook-cell-input-preview-font-family", + "--notebook-cell-input-preview-font-size", + "--notebook-cell-output-font-size", + "--notebook-diff-view-viewport-slider", + "--notebook-find-horizontal-padding", + "--notebook-find-width", + "--outline-element-color", + "--separator-border", + "--status-border-top-color", + "--tab-border-bottom-color", + "--tab-border-top-color", + "--tab-dirty-border-top-color", + "--tabs-border-bottom-color", + "--testMessageDecorationFontFamily", + "--testMessageDecorationFontSize", + "--title-border-bottom-color", + "--vscode-editorCodeLens-fontFamily", + "--vscode-editorCodeLens-fontFamilyDefault", + "--vscode-editorCodeLens-fontFeatureSettings", + "--vscode-editorCodeLens-fontSize", + "--vscode-editorCodeLens-lineHeight", + "--vscode-explorer-align-offset-margin-left", + "--vscode-interactive-result-editor-background-color", + "--vscode-repl-font-family", + "--vscode-repl-font-size-for-twistie", + "--vscode-repl-font-size", + "--vscode-repl-line-height", + "--vscode-sash-hover-size", + "--vscode-sash-size", + "--window-border-color", + "--workspace-trust-check-color", + "--workspace-trust-selected-color", + "--workspace-trust-unselected-color", + "--workspace-trust-x-color", + "--z-index-notebook-cell-bottom-toolbar-container", + "--z-index-notebook-cell-editor-outline", + "--z-index-notebook-cell-expand-part-button", + "--z-index-notebook-cell-output-toolbar", + "--z-index-notebook-cell-status", + "--z-index-notebook-cell-toolbar-dropdown-active", + "--z-index-notebook-cell-toolbar", + "--z-index-notebook-folding-indicator", + "--z-index-notebook-input-collapse-condicon", + "--z-index-notebook-list-insertion-indicator", + "--z-index-notebook-output", + "--z-index-notebook-progress-bar", + "--z-index-notebook-scrollbar", + "--z-index-run-button-container", + "--zoom-factor" + ] } diff --git a/src/vs/workbench/contrib/interactiveEditor/browser/interactiveEditor.css b/src/vs/workbench/contrib/interactiveEditor/browser/interactiveEditor.css index d2b92dd7c87..f9eb8d75143 100644 --- a/src/vs/workbench/contrib/interactiveEditor/browser/interactiveEditor.css +++ b/src/vs/workbench/contrib/interactiveEditor/browser/interactiveEditor.css @@ -19,30 +19,30 @@ display: flex; box-sizing: border-box; border-radius: 2px; - border: 1px solid var(--vscode-input-border); + border: 1px solid var(--vscode-interactiveEditorInput-border); } .monaco-editor .interactive-editor .body .content.synthetic-focus { - outline: 1px solid var(--vscode-focusBorder); + outline: 1px solid var(--vscode-interactiveEditorInput-focusBorder); } .monaco-editor .interactive-editor .body .content .input { padding: 2px 2px 2px 4px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; - background-color: var(--vscode-input-background); + background-color: var(--vscode-interactiveEditorInput-background); cursor: text; } .monaco-editor .interactive-editor .monaco-editor-background { - background-color: var(--vscode-input-background); + background-color: var(--vscode-interactiveEditorInput-background); } .monaco-editor .interactive-editor .body .content .input .editor-placeholder { position: absolute; z-index: 1; padding: 3px 0 0 0; - color: var(--vscode-input-placeholderForeground); + color: var(--vscode-interactiveEditorInput-placeholderForeground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -62,7 +62,7 @@ padding-right: 4px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; - background: var(--vscode-input-background); + background: var(--vscode-interactiveEditorInput-background); } .monaco-editor .interactive-editor .body .toolbar .actions-container { @@ -127,8 +127,8 @@ .monaco-editor .interactive-editor-block { border-radius: 6px; - border: 1px solid var(--vscode-widget-border); - box-shadow: 0 4px 8px var(--vscode-widget-shadow); + border: 1px solid var(--vscode-interactiveEditor-border); + box-shadow: 0 4px 8px var(--vscode-interactiveEditor-shadow); } .monaco-editor .interactive-editor-slash-command { diff --git a/src/vs/workbench/contrib/interactiveEditor/common/interactiveEditor.ts b/src/vs/workbench/contrib/interactiveEditor/common/interactiveEditor.ts index f128c09da98..91623d7713b 100644 --- a/src/vs/workbench/contrib/interactiveEditor/common/interactiveEditor.ts +++ b/src/vs/workbench/contrib/interactiveEditor/common/interactiveEditor.ts @@ -14,6 +14,7 @@ import { localize } from 'vs/nls'; import { MenuId } from 'vs/platform/actions/common/actions'; import { RawContextKey } from 'vs/platform/contextkey/common/contextkey'; import { createDecorator } from 'vs/platform/instantiation/common/instantiation'; +import { editorWidgetBorder, focusBorder, inputBackground, inputPlaceholderForeground, registerColor, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; export interface IInteractiveEditorSlashCommand { command: string; @@ -89,3 +90,12 @@ export const CTX_INTERACTIVE_EDITOR_INNER_CURSOR_FIRST = new RawContextKey('interactiveEditorInnerCursorLast', false, localize('interactiveEditorInnerCursorLast', "Whether the cursor of the iteractive editor input is on the last line")); export const CTX_INTERACTIVE_EDITOR_OUTER_CURSOR_POSITION = new RawContextKey<'above' | 'below' | ''>('interactiveEditorOuterCursorPosition', '', localize('interactiveEditorOuterCursorPosition', "Whether the cursor of the outer editor is above or below the interactive editor input")); export const CTX_INTERACTIVE_EDITOR_HAS_ACTIVE_REQUEST = new RawContextKey('interactiveEditorHasActiveRequest', false, localize('interactiveEditorHasActiveRequest', "Whether interactive editor has an active request")); + +// colors + +registerColor('interactiveEditor.border', { dark: editorWidgetBorder, light: editorWidgetBorder, hcDark: editorWidgetBorder, hcLight: editorWidgetBorder }, localize('interactiveEditor.border', "Border color of the interactive editor widget")); +registerColor('interactiveEditor.shadow', { dark: widgetShadow, light: widgetShadow, hcDark: widgetShadow, hcLight: widgetShadow }, localize('interactiveEditor.shadow', "Shadow color of the interactive editor widget")); +registerColor('interactiveEditorInput.border', { dark: editorWidgetBorder, light: editorWidgetBorder, hcDark: editorWidgetBorder, hcLight: editorWidgetBorder }, localize('interactiveEditorInput.border', "Border color of the interactive editor input")); +registerColor('interactiveEditorInput.focusBorder', { dark: focusBorder, light: focusBorder, hcDark: focusBorder, hcLight: focusBorder }, localize('interactiveEditorInput.focusBorder', "Border color of the interactive editor input when focused")); +registerColor('interactiveEditorInput.placeholderForeground', { dark: inputPlaceholderForeground, light: inputPlaceholderForeground, hcDark: inputPlaceholderForeground, hcLight: inputPlaceholderForeground }, localize('interactiveEditorInput.placeholderForeground', "Foreground color of the interactive editor input placeholder")); +registerColor('interactiveEditorInput.background', { dark: inputBackground, light: inputBackground, hcDark: inputBackground, hcLight: inputBackground }, localize('interactiveEditorInput.background', "Background color of the interactive editor input"));