Skip to content

Commit 86f0f9b

Browse files
rebornixrebornix
authored
Move notebook editor widget theme to css variables (microsoft#165300)
1 parent f945df1 commit 86f0f9b

File tree

5 files changed

+181
-254
lines changed

5 files changed

+181
-254
lines changed

‎src/vs/workbench/contrib/interactive/browser/interactiveEditor.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -222,24 +222,24 @@ export class InteractiveEditor extends EditorPane {
222222
if (focusIndicator === 'gutter') {
223223
styleSheets.push(`
224224
.interactive-editor .input-cell-container:focus-within .input-focus-indicator::before {
225-
border-color: var(--notebook-focused-cell-border-color) !important;
225+
border-color: var(--vscode-notebook-focusedCellBorder) !important;
226226
}
227227
.interactive-editor .input-focus-indicator::before {
228-
border-color: var(--notebook-inactive-focused-cell-border-color) !important;
228+
border-color: var(--vscode-notebook-inactiveFocusedCellBorder) !important;
229229
}
230230
.interactive-editor .input-cell-container .input-focus-indicator {
231231
display: block;
232232
top: ${INPUT_CELL_VERTICAL_PADDING}px;
233233
}
234234
.interactive-editor .input-cell-container {
235-
border-top: 1px solid var(--notebook-inactive-focused-cell-border-color);
235+
border-top: 1px solid var(--vscode-notebook-inactiveFocusedCellBorder);
236236
}
237237
`);
238238
} else {
239239
// border
240240
styleSheets.push(`
241241
.interactive-editor .input-cell-container {
242-
border-top: 1px solid var(--notebook-inactive-focused-cell-border-color);
242+
border-top: 1px solid var(--vscode-notebook-inactiveFocusedCellBorder);
243243
}
244244
.interactive-editor .input-cell-container .input-focus-indicator {
245245
display: none;
@@ -687,10 +687,10 @@ export class InteractiveEditor extends EditorPane {
687687
registerThemingParticipant((theme, collector) => {
688688
collector.addRule(`
689689
.interactive-editor .input-cell-container:focus-within .input-editor-container .monaco-editor {
690-
outline: solid 1px var(--notebook-focused-cell-border-color);
690+
outline: solid 1px var(--vscode-notebook-focusedCellBorder);
691691
}
692692
.interactive-editor .input-cell-container .input-editor-container .monaco-editor {
693-
outline: solid 1px var(--notebook-inactive-focused-cell-border-color);
693+
outline: solid 1px var(--vscode-notebook-inactiveFocusedCellBorder);
694694
}
695695
.interactive-editor .input-cell-container .input-focus-indicator {
696696
top: ${INPUT_CELL_VERTICAL_PADDING}px;

‎src/vs/workbench/contrib/notebook/browser/media/notebook.css

Lines changed: 168 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -252,11 +252,11 @@
252252
}
253253

254254
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapse-container .collapsed-execution-icon .codicon-notebook-state-success {
255-
color: var(--notebook-cell-status-icon-success);
255+
color: var(--vscode-notebookStatusSuccessIcon-foreground);
256256
}
257257

258258
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapse-container .collapsed-execution-icon .codicon-notebook-state-error {
259-
color: var(--notebook-cell-status-icon-error);
259+
color: var(--vscode-notebookStatusErrorIcon-foreground);
260260
}
261261

262262
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapse-container .cell-collapse-preview {
@@ -569,3 +569,169 @@
569569
.cell-comment-container.review-widget {
570570
background-color: var(--vscode-peekViewResult-background);
571571
}
572+
573+
/** Cell output show more*/
574+
.notebookOverlay .output-show-more-container a,
575+
.notebookOverlay div.output-show-more a {
576+
color: var(--vscode-textLink-foreground);
577+
}
578+
579+
.notebookOverlay .output-show-more-container a:active,
580+
.notebookOverlay .output-show-more a:active {
581+
color: var(--vscode-textLink-activeForeground);
582+
}
583+
584+
/** Notebook cell output background */
585+
.notebookOverlay .output,
586+
.notebookOverlay .output-element,
587+
.notebookOverlay .output-show-more-container {
588+
background-color: var(--vscode-notebook-outputContainerBackgroundColor);
589+
}
590+
591+
.notebookOverlay .output-element {
592+
border-top: none !important; border: 1px solid transparent; border-color: var(--vscode-notebook-outputContainerBorderColor) !important;
593+
}
594+
595+
/** Notebook editor background */
596+
.notebookOverlay .cell-drag-image .cell-editor-container > div {
597+
background: var(--vscode-editor-background) !important;
598+
}
599+
.notebookOverlay .monaco-list-row .cell-title-toolbar,
600+
.notebookOverlay .monaco-list-row.cell-drag-image,
601+
.notebookOverlay .cell-bottom-toolbar-container .action-item,
602+
.notebookOverlay .cell-list-top-cell-toolbar-container .action-item {
603+
background-color: var(--vscode-editor-background);
604+
}
605+
606+
.monaco-workbench .notebookOverlay.notebook-editor {
607+
background-color: var(--vscode-notebook-editorBackground);
608+
}
609+
610+
.notebookOverlay .cell .monaco-editor-background,
611+
.notebookOverlay .cell .margin-view-overlays,
612+
.notebookOverlay .cell .cell-statusbar-container {
613+
background: var(--vscode-notebook-cellEditorBackground, var(--vscode-editor-background));
614+
}
615+
616+
/** Cell toolbar separator */
617+
618+
.notebookOverlay .monaco-list-row .cell-title-toolbar,
619+
.notebookOverlay .cell-bottom-toolbar-container .action-item,
620+
.notebookOverlay .cell-list-top-cell-toolbar-container .action-item {
621+
border: solid 1px var(--vscode-notebook-cellToolbarSeparator);
622+
}
623+
.notebookOverlay .monaco-action-bar .action-item.verticalSeparator {
624+
background-color: var(--vscode-notebook-cellToolbarSeparator);
625+
}
626+
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapse-container {
627+
border-bottom: solid 1px var(--vscode-notebook-cellToolbarSeparator);
628+
}
629+
630+
/** Focused cell background */
631+
632+
.notebookOverlay .code-cell-row.focused .cell-focus-indicator,
633+
.notebookOverlay .markdown-cell-row.focused,
634+
.notebookOverlay .code-cell-row.focused .input-collapse-container {
635+
background-color: var(--vscode-notebook-focusedCellBackground) !important;
636+
}
637+
638+
/** Selected cell background */
639+
.notebookOverlay .monaco-list.selection-multiple .markdown-cell-row.selected,
640+
.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-top,
641+
.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-left,
642+
.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-right,
643+
.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-bottom {
644+
background-color: var(--vscode-notebook-selectedCellBackground, inherit) !important;
645+
}
646+
647+
.notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-focus-indicator-top:before,
648+
.notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-focus-indicator-bottom:before,
649+
.notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-left:before,
650+
.notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-right:before {
651+
border-color: var(--vscode-notebook-inactiveSelectedCellBorder, transparent) !important;
652+
}
653+
654+
/** Cell hover background */
655+
.notebookOverlay .code-cell-row:not(.focused):hover .cell-focus-indicator,
656+
.notebookOverlay .code-cell-row:not(.focused).cell-output-hover .cell-focus-indicator,
657+
.notebookOverlay .markdown-cell-row:not(.focused):hover {
658+
background-color: var(--vscode-notebook-cellHoverBackground) !important;
659+
}
660+
661+
.notebookOverlay .code-cell-row:not(.focused):hover .input-collapse-container,
662+
.notebookOverlay .code-cell-row:not(.focused).cell-output-hover .input-collapse-container {
663+
background-color: var(--vscode-notebook-cellHoverBackground);
664+
}
665+
666+
/** Cell symbol higlight */
667+
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-symbolHighlight .cell-focus-indicator,
668+
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-symbolHighlight {
669+
background-color: var(--vscode-notebook-symbolHighlightBackground) !important;
670+
}
671+
672+
/** Cell focused editor border */
673+
.notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-editor-part:before {
674+
outline: solid 1px var(--vscode-notebook-focusedEditorBorder);
675+
}
676+
677+
/** Cell border color */
678+
.notebookOverlay .cell.markdown h1 { border-color: var(--vscode-notebook-cellBorderColor); }
679+
.notebookOverlay .monaco-list-row .cell-editor-part:before { outline: solid 1px var(--vscode-notebook-cellBorderColor); }
680+
681+
/** Cell status bar */
682+
.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-language-picker:hover,
683+
.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-item.cell-status-item-has-command:hover {
684+
background-color: var(--vscode-notebook-cellStatusBarItemHoverBackground);
685+
}
686+
687+
/** Insert toolbar */
688+
.notebookOverlay > .cell-list-container > .cell-list-insertion-indicator {
689+
background-color: var(--vscode-notebook-cellInsertionIndicator);
690+
}
691+
692+
/** Scrollbar */
693+
.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .scrollbar > .slider {
694+
background: var(--vscode-notebookScrollbarSlider-background);
695+
}
696+
697+
.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .scrollbar > .slider:hover {
698+
background: var(--vscode-notebookScrollbarSlider-hoverBackground);
699+
}
700+
701+
.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .scrollbar > .slider.active {
702+
background: var(--vscode-notebookScrollbarSlider-activeBackground);
703+
}
704+
705+
/** Cell expand */
706+
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandInputIcon:hover,
707+
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandOutputIcon:hover,
708+
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-expand-part-button:hover {
709+
background-color: var(--vscode-toolbar-hoverBackground);
710+
}
711+
712+
/** Cell insertion/deletion */
713+
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-modified .cell-focus-indicator {
714+
background-color: var(--vscode-editorGutter-modifiedBackground) !important;
715+
}
716+
717+
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-modified {
718+
background-color: var(--vscode-editorGutter-modifiedBackground) !important;
719+
}
720+
721+
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-added .cell-focus-indicator {
722+
background-color: var(--vscode-diffEditor-insertedTextBackground) !important;
723+
}
724+
725+
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-added {
726+
background-color: var(--vscode-diffEditor-insertedTextBackground) !important;
727+
}
728+
729+
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-deleted .cell-focus-indicator {
730+
background-color: var(--vscode-diffEditor-removedTextBackground) !important;
731+
}
732+
733+
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-deleted {
734+
background-color: var(--vscode-diffEditor-removedTextBackground) !important;
735+
}
736+
737+
.monaco-workbench .notebookOverlay .codicon-debug-continue { color: var(--vscode-icon-foreground) !important; }

‎src/vs/workbench/contrib/notebook/browser/media/notebookFocusIndicator.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,19 @@
5454
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-top:before,
5555
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-bottom:before,
5656
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container.cell-editor-focus:before {
57-
border-color: var(notebook-selected-cell-border-color) !important;
57+
border-color: var(--vscode-notebook-selectedCellBorder) !important;
5858
}
5959

6060
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-top:before,
6161
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-bottom:before {
62-
border-color: var(--notebook-inactive-focused-cell-border-color) !important;
62+
border-color: var(--vscode-notebook-inactiveFocusedCellBorder) !important;
6363
}
6464

6565
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-top:before,
6666
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-bottom:before,
6767
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-left:before,
6868
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-right:before {
69-
border-color: var(--notebook-focused-cell-border-color) !important;
69+
border-color: var(--vscode-notebook-focusedCellBorder) !important;
7070
}
7171

7272
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-left .codeOutput-focus-indicator-container {

‎src/vs/workbench/contrib/notebook/browser/media/notebookToolbar.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,5 +82,5 @@
8282
}
8383

8484
.monaco-workbench .notebookOverlay .notebook-toolbar-container .monaco-action-bar .action-item .codicon-notebook-state-error {
85-
color: var(--notebook-cell-status-icon-error);
85+
color: var(--vscode-notebookStatusErrorIcon-foreground);
8686
}

0 commit comments

Comments
 (0)