mirror of
https://github.com/Microsoft/vscode
synced 2024-10-30 08:06:04 +00:00
notebooks: remove deprecated vscode css vars from webview
See https://github.com/microsoft/vscode/issues/107985 https://github.com/microsoft/vscode/issues/93265#issuecomment-847150188
This commit is contained in:
parent
196e79256d
commit
6cfad71ce6
3 changed files with 38 additions and 25 deletions
|
@ -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 {
|
||||
|
|
|
@ -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];
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}`;
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue