From cad2c23f7c0771b11ca05ec7c7a85a963a225e81 Mon Sep 17 00:00:00 2001 From: gcb4 Date: Fri, 4 Nov 2022 00:11:41 -0700 Subject: [PATCH 1/5] Use css variables for editor scrollbar --- .../browser/ui/scrollbar/media/scrollbars.css | 15 ++++++ .../editorScrollbar/editorScrollbar.ts | 52 +------------------ 2 files changed, 16 insertions(+), 51 deletions(-) diff --git a/src/vs/base/browser/ui/scrollbar/media/scrollbars.css b/src/vs/base/browser/ui/scrollbar/media/scrollbars.css index d50aa58526c..eaceedb9fed 100644 --- a/src/vs/base/browser/ui/scrollbar/media/scrollbars.css +++ b/src/vs/base/browser/ui/scrollbar/media/scrollbars.css @@ -36,6 +36,7 @@ left: 3px; height: 3px; width: 100%; + box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset; } .monaco-scrollable-element > .shadow.left { display: block; @@ -43,6 +44,7 @@ left: 0; height: 100%; width: 3px; + box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset; } .monaco-scrollable-element > .shadow.top-left-corner { display: block; @@ -50,4 +52,17 @@ left: 0; height: 3px; width: 3px; + box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset; +} + +.monaco-scrollable-element > .scrollbar > .slider { + background: var(--vscode-scrollbarSlider-background); +} + +.monaco-scrollable-element > .scrollbar > .slider:hover { + background: var(--vscode-scrollbarSlider-hoverBackground); +} + +.monaco-scrollable-element > .scrollbar > .slider.active { + background: var(--vscode-scrollbarSlider-activeBackground); } diff --git a/src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts b/src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts index 04d9e42787b..597eaec3166 100644 --- a/src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts +++ b/src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts @@ -12,10 +12,8 @@ import { INewScrollPosition, ScrollType } from 'vs/editor/common/editorCommon'; import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/browser/view/renderingContext'; import { ViewContext } from 'vs/editor/common/viewModel/viewContext'; import * as viewEvents from 'vs/editor/common/viewEvents'; -import { registerThemingParticipant, getThemeTypeSelector } from 'vs/platform/theme/common/themeService'; +import { getThemeTypeSelector } from 'vs/platform/theme/common/themeService'; import { EditorOption } from 'vs/editor/common/config/editorOptions'; -import { scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground } from 'vs/platform/theme/common/colorRegistry'; - export class EditorScrollbar extends ViewPart { private readonly scrollbar: SmoothScrollableElement; @@ -180,51 +178,3 @@ export class EditorScrollbar extends ViewPart { this.scrollbar.renderNow(); } } - -registerThemingParticipant((theme, collector) => { - - // Scrollbars - const scrollbarShadowColor = theme.getColor(scrollbarShadow); - if (scrollbarShadowColor) { - collector.addRule(` - .monaco-scrollable-element > .shadow.top { - box-shadow: ${scrollbarShadowColor} 0 6px 6px -6px inset; - } - - .monaco-scrollable-element > .shadow.left { - box-shadow: ${scrollbarShadowColor} 6px 0 6px -6px inset; - } - - .monaco-scrollable-element > .shadow.top.left { - box-shadow: ${scrollbarShadowColor} 6px 6px 6px -6px inset; - } - `); - } - - const scrollbarSliderBackgroundColor = theme.getColor(scrollbarSliderBackground); - if (scrollbarSliderBackgroundColor) { - collector.addRule(` - .monaco-scrollable-element > .scrollbar > .slider { - background: ${scrollbarSliderBackgroundColor}; - } - `); - } - - const scrollbarSliderHoverBackgroundColor = theme.getColor(scrollbarSliderHoverBackground); - if (scrollbarSliderHoverBackgroundColor) { - collector.addRule(` - .monaco-scrollable-element > .scrollbar > .slider:hover { - background: ${scrollbarSliderHoverBackgroundColor}; - } - `); - } - - const scrollbarSliderActiveBackgroundColor = theme.getColor(scrollbarSliderActiveBackground); - if (scrollbarSliderActiveBackgroundColor) { - collector.addRule(` - .monaco-scrollable-element > .scrollbar > .slider.active { - background: ${scrollbarSliderActiveBackgroundColor}; - } - `); - } -}); From 45bd20b4692b038ba5af1c541daafbe5d6dbf3c4 Mon Sep 17 00:00:00 2001 From: gcb4 Date: Fri, 4 Nov 2022 20:59:05 -0700 Subject: [PATCH 2/5] CSS Variable refactoring-accessibilityHelpWidget --- .../browser/accessibility/accessibility.css | 4 ++++ .../browser/accessibility/accessibility.ts | 24 ------------------- 2 files changed, 4 insertions(+), 24 deletions(-) diff --git a/src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.css b/src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.css index 8e6ddaf4512..11d5f7a9f18 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.css +++ b/src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.css @@ -7,4 +7,8 @@ padding: 10px; vertical-align: middle; overflow: auto; + background-color: var(--vscode-editorWidget-background); + color: var(--vscode-editorWidget-foreground); + box-shadow: 0 2px 8px var(--vscode-widget-shadow); + border: 2px solid var(--vscode-contrastBorder); } diff --git a/src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.ts b/src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.ts index 171de4378e1..b6e15e9300d 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.ts +++ b/src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.ts @@ -27,8 +27,6 @@ import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiati import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry'; import { IOpenerService } from 'vs/platform/opener/common/opener'; -import { contrastBorder, editorWidgetBackground, widgetShadow, editorWidgetForeground } from 'vs/platform/theme/common/colorRegistry'; -import { registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility'; import { Action2, registerAction2 } from 'vs/platform/actions/common/actions'; import { ICommandService } from 'vs/platform/commands/common/commands'; @@ -329,25 +327,3 @@ registerEditorCommand(new AccessibilityHelpCommand({ primary: KeyCode.Escape, secondary: [KeyMod.Shift | KeyCode.Escape] } })); - -registerThemingParticipant((theme, collector) => { - const widgetBackground = theme.getColor(editorWidgetBackground); - if (widgetBackground) { - collector.addRule(`.monaco-editor .accessibilityHelpWidget { background-color: ${widgetBackground}; }`); - } - - const widgetForeground = theme.getColor(editorWidgetForeground); - if (widgetBackground) { - collector.addRule(`.monaco-editor .accessibilityHelpWidget { color: ${widgetForeground}; }`); - } - - const widgetShadowColor = theme.getColor(widgetShadow); - if (widgetShadowColor) { - collector.addRule(`.monaco-editor .accessibilityHelpWidget { box-shadow: 0 2px 8px ${widgetShadowColor}; }`); - } - - const hcBorder = theme.getColor(contrastBorder); - if (hcBorder) { - collector.addRule(`.monaco-editor .accessibilityHelpWidget { border: 2px solid ${hcBorder}; }`); - } -}); From dc9e8ecb3f3dd94d978214a85fe1790b84ec5ea5 Mon Sep 17 00:00:00 2001 From: gcb4 Date: Fri, 4 Nov 2022 21:10:48 -0700 Subject: [PATCH 3/5] CSS Variables refactor - find widget --- .../browser/find/simpleFindWidget.css | 14 +++++ .../browser/find/simpleFindWidget.ts | 51 +------------------ 2 files changed, 16 insertions(+), 49 deletions(-) diff --git a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.css b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.css index 74b3d08aebd..508f43deed5 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.css +++ b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.css @@ -28,6 +28,10 @@ align-items: center; pointer-events: all; transition: top 200ms linear; + background-color: var(--vscode-editorWidget-background) !important; + color: var(--vscode-editorWidget-foreground); + box-shadow: 0 0 8px 2px var(--vscode-widget-shadow); + border: 1px solid var(--vscode-contrastBorder); } .monaco-workbench.reduce-motion .monaco-editor .find-widget { @@ -83,3 +87,13 @@ div.simple-find-part-wrapper div.button { border-radius: 5px; } + +.no-results.matchesCount { + color: var(--vscode-errorForeground); +} + +div.simple-find-part-wrapper div.button:hover:not(.disabled) { + background-color: var(--vscode-toolbar-hoverBackground); + outline: 1px dashed var(--vscode-toolbar-hoverOutline); + outline-offset: -1px; +} diff --git a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts index 10d1756462d..016548cb48f 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts +++ b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts @@ -15,8 +15,8 @@ import { IMessage as InputBoxMessage } from 'vs/base/browser/ui/inputbox/inputBo import { SimpleButton, findPreviousMatchIcon, findNextMatchIcon, NLS_NO_RESULTS, NLS_MATCHES_LOCATION } from 'vs/editor/contrib/find/browser/findWidget'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { editorWidgetBackground, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground, errorForeground, toolbarHoverBackground, toolbarHoverOutline, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; -import { IColorTheme, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; +import { inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground } from 'vs/platform/theme/common/colorRegistry'; +import { IColorTheme } from 'vs/platform/theme/common/themeService'; import { ContextScopedFindInput } from 'vs/platform/history/browser/contextScopedHistoryWidget'; import { widgetClose } from 'vs/platform/theme/common/iconRegistry'; import * as strings from 'vs/base/common/strings'; @@ -395,50 +395,3 @@ export abstract class SimpleFindWidget extends Widget { return nls.localize('ariaSearchNoResultWithLineNumNoCurrentMatch', "{0} found for '{1}'", label, searchString); } } - -// theming -registerThemingParticipant((theme, collector) => { - const findWidgetBGColor = theme.getColor(editorWidgetBackground); - if (findWidgetBGColor) { - collector.addRule(`.monaco-workbench .simple-find-part { background-color: ${findWidgetBGColor} !important; }`); - } - - const widgetForeground = theme.getColor(editorWidgetForeground); - if (widgetForeground) { - collector.addRule(`.monaco-workbench .simple-find-part { color: ${widgetForeground}; }`); - } - - const widgetShadowColor = theme.getColor(widgetShadow); - if (widgetShadowColor) { - collector.addRule(`.monaco-workbench .simple-find-part { box-shadow: 0 0 8px 2px ${widgetShadowColor}; }`); - } - - const hcBorder = theme.getColor(contrastBorder); - if (hcBorder) { - collector.addRule(`.monaco-workbench .simple-find-part { border: 1px solid ${hcBorder}; }`); - } - - const error = theme.getColor(errorForeground); - if (error) { - collector.addRule(`.no-results.matchesCount { color: ${error}; }`); - } - - const toolbarHoverBackgroundColor = theme.getColor(toolbarHoverBackground); - if (toolbarHoverBackgroundColor) { - collector.addRule(` - div.simple-find-part-wrapper div.button:hover:not(.disabled) { - background-color: ${toolbarHoverBackgroundColor}; - } - `); - } - - const toolbarHoverOutlineColor = theme.getColor(toolbarHoverOutline); - if (toolbarHoverOutlineColor) { - collector.addRule(` - div.simple-find-part-wrapper div.button:hover:not(.disabled) { - outline: 1px dashed ${toolbarHoverOutlineColor}; - outline-offset: -1px; - } - `); - } -}); From c15d4c020e3a87c2a96539855e0d2385a76130d5 Mon Sep 17 00:00:00 2001 From: gcb4 Date: Fri, 4 Nov 2022 21:16:12 -0700 Subject: [PATCH 4/5] Partial CSS Variable Refactor - Inspector Editor Tokens --- .../browser/inspectEditorTokens/inspectEditorTokens.css | 8 ++++++++ .../browser/inspectEditorTokens/inspectEditorTokens.ts | 7 +------ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.css b/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.css index 5f7ec45d7f7..d58a12221af 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.css +++ b/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.css @@ -10,6 +10,14 @@ padding: 10px; } +.monaco-editor .token-inspect-widget { + background-color: var(--vscode-editorHoverWidget-background); +} + +.monaco-editor .token-inspect-widget .tiw-metadata-separator { + background-color: var(--vscode-editorHoverWidget-border) +} + .tiw-token { font-family: var(--monaco-monospace-font); } diff --git a/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.ts b/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.ts index 34ca4a85e99..fc66d5ddbaa 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.ts +++ b/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.ts @@ -20,7 +20,7 @@ import { SemanticTokensLegend, SemanticTokens } from 'vs/editor/common/languages import { FontStyle, ColorId, StandardTokenType, TokenMetadata } from 'vs/editor/common/encodedTokenAttributes'; import { ILanguageService } from 'vs/editor/common/languages/language'; import { INotificationService } from 'vs/platform/notification/common/notification'; -import { editorHoverBackground, editorHoverBorder } from 'vs/platform/theme/common/colorRegistry'; +import { editorHoverBorder } from 'vs/platform/theme/common/colorRegistry'; import { registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { findMatchingThemeRule } from 'vs/workbench/services/textMate/common/TMHelper'; import { ITextMateService } from 'vs/workbench/services/textMate/browser/textMate'; @@ -676,10 +676,5 @@ registerThemingParticipant((theme, collector) => { if (border) { const borderWidth = isHighContrast(theme.type) ? 2 : 1; collector.addRule(`.monaco-editor .token-inspect-widget { border: ${borderWidth}px solid ${border}; }`); - collector.addRule(`.monaco-editor .token-inspect-widget .tiw-metadata-separator { background-color: ${border}; }`); - } - const background = theme.getColor(editorHoverBackground); - if (background) { - collector.addRule(`.monaco-editor .token-inspect-widget { background-color: ${background}; }`); } }); From 46201a0576f22cd057b02333ae594e6acb68c91b Mon Sep 17 00:00:00 2001 From: gcb4 Date: Fri, 4 Nov 2022 21:25:34 -0700 Subject: [PATCH 5/5] CSS Variables refactor - untitledTextEditor --- .../codeEditor/browser/codeEditor.contribution.ts | 2 +- .../untitledTextEditorHint.css | 12 ++++++++++++ .../untitledTextEditorHint.ts | 14 +------------- 3 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint/untitledTextEditorHint.css rename src/vs/workbench/contrib/codeEditor/browser/{ => untitledTextEditorHint}/untitledTextEditorHint.ts (91%) diff --git a/src/vs/workbench/contrib/codeEditor/browser/codeEditor.contribution.ts b/src/vs/workbench/contrib/codeEditor/browser/codeEditor.contribution.ts index 06f90fcfd98..d10833a37f5 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/codeEditor.contribution.ts +++ b/src/vs/workbench/contrib/codeEditor/browser/codeEditor.contribution.ts @@ -19,5 +19,5 @@ import './toggleMultiCursorModifier'; import './toggleRenderControlCharacter'; import './toggleRenderWhitespace'; import './toggleWordWrap'; -import './untitledTextEditorHint'; +import './untitledTextEditorHint/untitledTextEditorHint'; import './workbenchReferenceSearch'; diff --git a/src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint/untitledTextEditorHint.css b/src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint/untitledTextEditorHint.css new file mode 100644 index 00000000000..538b988c4b3 --- /dev/null +++ b/src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint/untitledTextEditorHint.css @@ -0,0 +1,12 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.monaco-editor .contentWidgets .untitled-hint { + color: var(--vscode-input-placeholderForeground); +} + +.monaco-editor .contentWidgets .untitled-hint a { + color: var(--vscode-textLink-foreground) +} diff --git a/src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint.ts b/src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint/untitledTextEditorHint.ts similarity index 91% rename from src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint.ts rename to src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint/untitledTextEditorHint.ts index fa456018f48..efea7eaffed 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint.ts +++ b/src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint/untitledTextEditorHint.ts @@ -3,12 +3,11 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +import 'vs/css!./untitledTextEditorHint'; import * as dom from 'vs/base/browser/dom'; import { DisposableStore, dispose, IDisposable } from 'vs/base/common/lifecycle'; import { ContentWidgetPositionPreference, ICodeEditor, IContentWidget, IContentWidgetPosition } from 'vs/editor/browser/editorBrowser'; import { localize } from 'vs/nls'; -import { registerThemingParticipant } from 'vs/platform/theme/common/themeService'; -import { inputPlaceholderForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry'; import { ChangeLanguageAction } from 'vs/workbench/browser/parts/editor/editorStatus'; import { ICommandService } from 'vs/platform/commands/common/commands'; import { PLAINTEXT_LANGUAGE_ID } from 'vs/editor/common/languages/modesRegistry'; @@ -193,15 +192,4 @@ class UntitledTextEditorHintContentWidget implements IContentWidget { } } -registerThemingParticipant((theme, collector) => { - const inputPlaceholderForegroundColor = theme.getColor(inputPlaceholderForeground); - if (inputPlaceholderForegroundColor) { - collector.addRule(`.monaco-editor .contentWidgets .untitled-hint { color: ${inputPlaceholderForegroundColor}; }`); - } - const textLinkForegroundColor = theme.getColor(textLinkForeground); - if (textLinkForegroundColor) { - collector.addRule(`.monaco-editor .contentWidgets .untitled-hint a { color: ${textLinkForegroundColor}; }`); - } -}); - registerEditorContribution(UntitledTextEditorHintContribution.ID, UntitledTextEditorHintContribution);