Update code cell bg, border, and output bg

microsoft · May 29, 2020 · 28a4232 · 28a4232
1 parent a537cb7
commit 28a4232
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css
@@ -400,7 +400,7 @@
 	opacity: 1;
 }
 
-.notebookOverlay .monaco-list-row.cell-editor-focus .cell-editor-part:before {
+.notebookOverlay .monaco-list-row .cell-editor-part:before {
 	z-index: 20;
 	content: "";
 	right: 0px;
@@ -513,11 +513,6 @@
 	line-height: 1.2;
 	border-bottom-width: 1px;
 	border-bottom-style: solid;
-	border-color: rgba(255, 255, 255, 0.18);
-}
-
-.monaco-workbench.vs .notebookOverlay .cell.markdown h1 {
-	border-color: rgba(0, 0, 0, 0.18);
 }
 
 .notebookOverlay .cell.markdown h1,

diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
@@ -25,7 +25,7 @@ import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/c
 import { IResourceEditorInput } from 'vs/platform/editor/common/editor';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
-import { contrastBorder, editorBackground, focusBorder, foreground, registerColor, textBlockQuoteBackground, textBlockQuoteBorder, textLinkActiveForeground, textLinkForeground, textPreformatForeground } from 'vs/platform/theme/common/colorRegistry';
+import { contrastBorder, editorBackground, focusBorder, foreground, registerColor, textBlockQuoteBackground, textBlockQuoteBorder, textLinkActiveForeground, textLinkForeground, textPreformatForeground, transparent } from 'vs/platform/theme/common/colorRegistry';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { EditorMemento } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { EditorOptions, IEditorMemento } from 'vs/workbench/common/editor';
@@ -42,13 +42,13 @@ import { CellViewModel, IModelDecorationsChangeAccessor, INotebookEditorViewStat
 import { CellKind, IProcessedOutput, INotebookKernelInfo, INotebookKernelInfoDto } from 'vs/workbench/contrib/notebook/common/notebookCommon';
 import { INotebookService } from 'vs/workbench/contrib/notebook/common/notebookService';
 import { Webview } from 'vs/workbench/contrib/webview/browser/webview';
-import { getExtraColor } from 'vs/workbench/contrib/welcome/walkThrough/common/walkThroughUtils';
 import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
 import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { generateUuid } from 'vs/base/common/uuid';
 import { Memento, MementoObject } from 'vs/workbench/common/memento';
 import { NotebookTextModel } from 'vs/workbench/contrib/notebook/common/model/notebookTextModel';
 import { URI } from 'vs/base/common/uri';
+import { PANEL_BORDER } from 'vs/workbench/common/theme';
 
 const $ = DOM.$;
 
@@ -1319,7 +1319,11 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
 	}
 }
 
-const embeddedEditorBackground = 'walkThrough.embeddedEditorBackground';
+export const notebookCellBorder = registerColor('notebook.cellBorderColor', {
+	dark: transparent(PANEL_BORDER, .4),
+	light: transparent(PANEL_BORDER, .4),
+	hc: null
+}, nls.localize('notebook.cellBorderColor', "The border color for notebook cells."));
 
 export const focusedCellIndicator = registerColor('notebook.focusedCellIndicator', {
 	light: new Color(new RGBA(102, 175, 224)),
@@ -1328,8 +1332,8 @@ export const focusedCellIndicator = registerColor('notebook.focusedCellIndicator
 }, nls.localize('notebook.focusedCellIndicator', "The color of the focused notebook cell indicator."));
 
 export const notebookOutputContainerColor = registerColor('notebook.outputContainerBackgroundColor', {
-	dark: new Color(new RGBA(255, 255, 255, 0.06)),
-	light: new Color(new RGBA(237, 239, 249)),
+	dark: notebookCellBorder,
+	light: notebookCellBorder,
 	hc: null
 }
 	, nls.localize('notebook.outputContainerBackgroundColor', "The Color of the notebook output container background."));
@@ -1348,7 +1352,8 @@ registerThemingParticipant((theme, collector) => {
 		box-sizing: border-box;
 	}`);
 
-	const color = getExtraColor(theme, embeddedEditorBackground, { dark: 'rgba(0, 0, 0, .4)', extra_dark: 'rgba(200, 235, 255, .064)', light: '#f4f4f4', hc: null });
+	// const color = getExtraColor(theme, embeddedEditorBackground, { dark: 'rgba(0, 0, 0, .4)', extra_dark: 'rgba(200, 235, 255, .064)', light: '#f4f4f4', hc: null });
+	const color = theme.getColor(editorBackground);
 	if (color) {
 		collector.addRule(`.notebookOverlay .cell .monaco-editor-background,
 			.notebookOverlay .cell .margin-view-overlays,
@@ -1412,6 +1417,16 @@ registerThemingParticipant((theme, collector) => {
 		collector.addRule(`.notebookOverlay .monaco-list-row.cell-editor-focus .cell-editor-part:before { outline: solid 1px ${focusedCellIndicatorColor}; }`);
 	}
 
+	const editorBorderColor = theme.getColor(notebookOutputContainerColor);
+	if (editorBorderColor) {
+		collector.addRule(`.notebookOverlay .monaco-list-row .cell-editor-part:before { outline: solid 1px ${editorBorderColor}; }`);
+	}
+
+	const headingBorderColor = theme.getColor(notebookCellBorder);
+	if (headingBorderColor) {
+		collector.addRule(`.notebookOverlay .cell.markdown h1 { border-color: ${headingBorderColor}; }`);
+	}
+
 	// const widgetShadowColor = theme.getColor(widgetShadow);
 	// if (widgetShadowColor) {
 	// 	collector.addRule(`.notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .monaco-toolbar {