development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-10-30 08:06:04 +00:00
Code Issues Projects Releases Packages Wiki Activity

notebooks: remove deprecated vscode css vars from webview

Browse source 
See https://github.com/microsoft/vscode/issues/107985
https://github.com/microsoft/vscode/issues/93265#issuecomment-847150188
This commit is contained in:
Connor Peet 2021-05-24 14:55:27 -07:00
parent 196e79256d
commit 6cfad71ce6
No known key found for this signature in database
GPG key ID: CF8FD2EA0DBC61BD
3 changed files with 38 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
View file

@ -660,7 +660,7 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Disposable {
}
dragging {
background-color: var(--vscode-editor-background);
background-color: var(--theme-background);
}
</style>
</template>
@ -682,7 +682,7 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Disposable {
padding-bottom: var(--notebook-output-node-padding);
padding-left: var(--notebook-output-node-left-padding);
box-sizing: border-box;
background-color: var(--vscode-notebook-outputContainerBackgroundColor);
background-color: var(--theme-notebook-output-background);
}
/* markdown */
@ -697,7 +697,7 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Disposable {
white-space: nowrap;
overflow: hidden;
white-space: initial;
color: var(--vscode-foreground);
color: var(--theme-ui-foreground);
}
#container > div.preview.draggable {
@ -714,11 +714,11 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Disposable {
}
#container > div.preview.selected {
background: var(--vscode-notebook-selectedCellBackground);
background: var(--theme-notebook-cell-selected-background);
}
#container > div.preview.dragging {
background-color: var(--vscode-editor-background);
background-color: var(--theme-background);
}
.monaco-workbench.vs-dark .notebookOverlay .cell.markdown .latex img,
@ -727,15 +727,15 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Disposable {
}
#container > div.nb-symbolHighlight {
background-color: var(--vscode-notebook-symbolHighlightBackground);
background-color: var(--theme-notebook-symbol-highlight-background);
}
#container > div.nb-cellDeleted {
background-color: var(--vscode-diffEditor-removedTextBackground);
background-color: var(--theme-notebook-diff-removed-background);
}
#container > div.nb-cellAdded {
background-color: var(--vscode-diffEditor-insertedTextBackground);
background-color: var(--theme-notebook-diff-inserted-background);
}
#container > div > div:not(.preview) > div {

19
src/vs/workbench/contrib/notebook/browser/view/renderers/webviewThemeMapping.ts
View file

@ -5,16 +5,23 @@
import { WebviewStyles } from 'vs/workbench/contrib/webview/browser/webview';
const mapping: [target: string, src: string][] = [
const mapping: ReadonlyMap<string, string> = new Map([
['theme-font-family', 'vscode-font-family'],
['theme-font-weight', 'vscode-font-weight'],
['theme-font-size', 'vscode-font-size'],
['theme-code-font-family', 'vscode-editor-font-family'],
['theme-code-font-weight', 'vscode-editor-font-weight'],
['theme-code-font-size', 'vscode-editor-font-size'],
['theme-scrollbar-background', 'vscode-scrollbarSlider-background'],
['theme-scrollbar-hover-background', 'vscode-scrollbarSlider-hoverBackground'],
['theme-scrollbar-active-background', 'vscode-scrollbarSlider-activeBackground'],
['theme-quote-background', 'vscode-textBlockQuote-background'],
['theme-quote-border', 'vscode-textBlockQuote-border'],
['theme-code-foreground', 'vscode-textPreformat-foreground'],
// Editor
['theme-background', 'vscode-editor-background'],
['theme-foreground', 'vscode-editor-foreground'],
['theme-ui-foreground', 'vscode-foreground'],
['theme-link', 'vscode-textLink-foreground'],
['theme-link-active', 'vscode-textLink-activeForeground'],
// Buttons
@ -47,7 +54,13 @@ const mapping: [target: string, src: string][] = [
['theme-warning-foreground', 'vscode-foreground'],
['theme-info-background', 'vscode-inputValidation-infoBackground'],
['theme-info-foreground', 'vscode-foreground'],
];
// Notebook:
['theme-notebook-output-background', 'vscode-notebook-outputContainerBackgroundColor'],
['theme-notebook-cell-selected-background', 'vscode-notebook-selectedCellBackground'],
['theme-notebook-symbol-highlight-background', 'vscode-notebook-symbolHighlightBackground'],
['theme-notebook-diff-removed-background', 'vscode-diffEditor-removedTextBackground'],
['theme-notebook-diff-inserted-background', 'vscode-diffEditor-insertedTextBackground'],
]);
const constants: Readonly<WebviewStyles> = {
'theme-input-border-width': '1px',
@ -62,7 +75,7 @@ const constants: Readonly<WebviewStyles> = {
* @see https://github.com/microsoft/vscode/issues/107985 for context
*/
export const transformWebviewThemeVars = (s: Readonly<WebviewStyles>): WebviewStyles => {
const result = { ...s, ...constants }; // todo@connor4312: remove after a period of time to allow migration
const result = { ...constants };
for (const [target, src] of mapping) {
result[target] = s[src];
}

28
src/vs/workbench/contrib/webview/browser/pre/main.js
View file

@ -81,10 +81,10 @@ defaultStyles.textContent = `
body {
background-color: transparent;
color: var(--vscode-editor-foreground);
font-family: var(--vscode-font-family);
font-weight: var(--vscode-font-weight);
font-size: var(--vscode-font-size);
color: var(--vscode-editor-foreground, var(--theme-foreground));
font-family: var(--vscode-font-family, var(--theme-font-family));
font-weight: var(--vscode-font-weight, var(--theme-font-weight));
font-size: var(--vscode-font-size, var(--theme-font-size));
margin: 0;
padding: 0 20px;
}
@ -95,11 +95,11 @@ defaultStyles.textContent = `
}
a {
color: var(--vscode-textLink-foreground);
color: var(--vscode-textLink-foreground, var(--theme-link));
}
a:hover {
color: var(--vscode-textLink-activeForeground);
color: var(--vscode-textLink-activeForeground, var(--theme-link-active));
}
a:focus,
@ -111,16 +111,16 @@ defaultStyles.textContent = `
}
code {
color: var(--vscode-textPreformat-foreground);
color: var(--vscode-textPreformat-foreground, var(--theme-code-foreground));
}
blockquote {
background: var(--vscode-textBlockQuote-background);
border-color: var(--vscode-textBlockQuote-border);
background: var(--vscode-textBlockQuote-background, var(--theme-quote-background));
border-color: var(--vscode-textBlockQuote-border, var(--theme-quote-border));
}
kbd {
color: var(--vscode-editor-foreground);
color: var(--vscode-editor-foreground, var(--theme-foreground));
border-radius: 3px;
vertical-align: middle;
padding: 1px 3px;
@ -143,17 +143,17 @@ defaultStyles.textContent = `
}
::-webkit-scrollbar-corner {
background-color: var(--vscode-editor-background);
background-color: var(--vscode-editor-background, var(--theme-background));
}
::-webkit-scrollbar-thumb {
background-color: var(--vscode-scrollbarSlider-background);
background-color: var(--vscode-scrollbarSlider-background, var(--theme-scrollbar-background));
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--vscode-scrollbarSlider-hoverBackground);
background-color: var(--vscode-scrollbarSlider-hoverBackground, var(--theme-scrollbar-hover-background));
}
::-webkit-scrollbar-thumb:active {
background-color: var(--vscode-scrollbarSlider-activeBackground);
background-color: var(--vscode-scrollbarSlider-activeBackground, var(--theme-scrollbar-active-background));
}`;
/**