diff --git a/build/lib/stylelint/validateVariableNames.js b/build/lib/stylelint/validateVariableNames.js index 6a50d1d6894..57b2aad957f 100644 --- a/build/lib/stylelint/validateVariableNames.js +++ b/build/lib/stylelint/validateVariableNames.js @@ -17,7 +17,6 @@ function getKnownVariableNames() { } return knownVariables; } -const iconVariable = /^--vscode-icon-.+-(content|font-family)$/; function getVariableNameValidator() { const allVariables = getKnownVariableNames(); return (value, report) => { @@ -25,7 +24,7 @@ function getVariableNameValidator() { let match; while (match = RE_VAR_PROP.exec(value)) { const variableName = match[1]; - if (variableName && !allVariables.has(variableName) && !iconVariable.test(variableName)) { + if (variableName && !allVariables.has(variableName)) { report(variableName); } } diff --git a/build/lib/stylelint/validateVariableNames.ts b/build/lib/stylelint/validateVariableNames.ts index 6d9fa8a7cef..56e5f84a81f 100644 --- a/build/lib/stylelint/validateVariableNames.ts +++ b/build/lib/stylelint/validateVariableNames.ts @@ -18,8 +18,6 @@ function getKnownVariableNames() { return knownVariables; } -const iconVariable = /^--vscode-icon-.+-(content|font-family)$/; - export interface IValidator { (value: string, report: (message: string) => void): void; } @@ -31,7 +29,7 @@ export function getVariableNameValidator(): IValidator { let match; while (match = RE_VAR_PROP.exec(value)) { const variableName = match[1]; - if (variableName && !allVariables.has(variableName) && !iconVariable.test(variableName)) { + if (variableName && !allVariables.has(variableName)) { report(variableName); } } diff --git a/src/vs/base/browser/ui/codicons/codicon/codicon.css b/src/vs/base/browser/ui/codicons/codicon/codicon.css index 45311945420..02154e77b68 100644 --- a/src/vs/base/browser/ui/codicons/codicon/codicon.css +++ b/src/vs/base/browser/ui/codicons/codicon/codicon.css @@ -9,7 +9,7 @@ src: url("./codicon.ttf?5d4d76ab2ce5108968ad644d591a16a6") format("truetype"); } -.codicon { +.codicon[class*='codicon-'] { font: normal normal normal 16px/1 codicon; display: inline-block; text-decoration: none; diff --git a/src/vs/base/browser/ui/menu/menubar.css b/src/vs/base/browser/ui/menu/menubar.css index 45eebe98553..3a65f9a8829 100644 --- a/src/vs/base/browser/ui/menu/menubar.css +++ b/src/vs/base/browser/ui/menu/menubar.css @@ -99,8 +99,7 @@ .menubar:not(.compact) .menubar-menu-button:first-child .toolbar-toggle-more::before, .menubar.compact .toolbar-toggle-more::before { - content: var(--vscode-icon-menu-content) !important; - font-family: var(--vscode-icon-menu-font-family) !important; + content: "\eb94" !important; } /* Match behavior of outline for activity bar icons */ diff --git a/src/vs/editor/contrib/inlineProgress/browser/inlineProgressWidget.css b/src/vs/editor/contrib/inlineProgress/browser/inlineProgressWidget.css index cb376acc002..105c60d52b5 100644 --- a/src/vs/editor/contrib/inlineProgress/browser/inlineProgressWidget.css +++ b/src/vs/editor/contrib/inlineProgress/browser/inlineProgressWidget.css @@ -25,6 +25,5 @@ } .inline-progress-widget:hover .icon::before { - content: var(--vscode-icon-x-content); - font-family: var(--vscode-icon-x-font-family); + content: "\ea76"; /* codicon-x */ } diff --git a/src/vs/platform/theme/browser/iconsStyleSheet.ts b/src/vs/platform/theme/browser/iconsStyleSheet.ts index 96ec62103aa..6bfce5b466d 100644 --- a/src/vs/platform/theme/browser/iconsStyleSheet.ts +++ b/src/vs/platform/theme/browser/iconsStyleSheet.ts @@ -31,31 +31,27 @@ export function getIconsStyleSheet(themeService: IThemeService | undefined): IIc getCSS() { const productIconTheme = themeService ? themeService.getProductIconTheme() : new UnthemedProductIconTheme(); const usedFontIds: { [id: string]: IconFontDefinition } = {}; - - const rules: string[] = []; - const rootAttribs: string[] = []; - for (const contribution of iconRegistry.getIcons()) { + const formatIconRule = (contribution: IconContribution): string | undefined => { const definition = productIconTheme.getIcon(contribution); if (!definition) { - continue; + return undefined; } - const fontContribution = definition.font; - const fontFamilyVar = `--vscode-icon-${contribution.id}-font-family`; - const contentVar = `--vscode-icon-${contribution.id}-content`; if (fontContribution) { usedFontIds[fontContribution.id] = fontContribution.definition; - rootAttribs.push( - `${fontFamilyVar}: ${asCSSPropertyValue(fontContribution.id)};`, - `${contentVar}: '${definition.fontCharacter}';`, - ); - rules.push(`.codicon-${contribution.id}:before { content: '${definition.fontCharacter}'; font-family: ${asCSSPropertyValue(fontContribution.id)}; }`); - } else { - rootAttribs.push(`${contentVar}: '${definition.fontCharacter}'; ${fontFamilyVar}: 'codicon';`); - rules.push(`.codicon-${contribution.id}:before { content: '${definition.fontCharacter}'; }`); + return `.codicon-${contribution.id}:before { content: '${definition.fontCharacter}'; font-family: ${asCSSPropertyValue(fontContribution.id)}; }`; + } + // default font (codicon) + return `.codicon-${contribution.id}:before { content: '${definition.fontCharacter}'; }`; + }; + + const rules = []; + for (const contribution of iconRegistry.getIcons()) { + const rule = formatIconRule(contribution); + if (rule) { + rules.push(rule); } } - for (const id in usedFontIds) { const definition = usedFontIds[id]; const fontWeight = definition.weight ? `font-weight: ${definition.weight};` : ''; @@ -63,9 +59,6 @@ export function getIconsStyleSheet(themeService: IThemeService | undefined): IIc const src = definition.src.map(l => `${asCSSUrl(l.location)} format('${l.format}')`).join(', '); rules.push(`@font-face { src: ${src}; font-family: ${asCSSPropertyValue(id)};${fontWeight}${fontStyle} font-display: block; }`); } - - rules.push(`:root { ${rootAttribs.join(' ')} }`); - return rules.join('\n'); } }; diff --git a/src/vs/workbench/browser/actions/media/actions.css b/src/vs/workbench/browser/actions/media/actions.css index 0d71343d1e0..1e8b67d48f4 100644 --- a/src/vs/workbench/browser/actions/media/actions.css +++ b/src/vs/workbench/browser/actions/media/actions.css @@ -4,9 +4,7 @@ *--------------------------------------------------------------------------------------------*/ .monaco-workbench .quick-input-list .quick-input-list-entry.has-actions:hover .quick-input-list-entry-action-bar .action-label.dirty-workspace::before { - /* Close icon flips between black dot and "X" for dirty workspaces */ - content: var(--vscode-icon-x-content); - font-family: var(--vscode-icon-x-font-family); + content: "\ea76"; /* Close icon flips between black dot and "X" for dirty workspaces */ } .monaco-workbench .screencast-mouse { diff --git a/src/vs/workbench/browser/media/style.css b/src/vs/workbench/browser/media/style.css index 8d4313f5f15..9299856d6ff 100644 --- a/src/vs/workbench/browser/media/style.css +++ b/src/vs/workbench/browser/media/style.css @@ -196,8 +196,7 @@ body.web { } .monaco-workbench .select-container:after { - content: var(--vscode-icon-chevron-down-content); - font-family: var(--vscode-icon-chevron-down-font-family); + content: "\eab4"; font-family: codicon; font-size: 16px; width: 16px; diff --git a/src/vs/workbench/browser/parts/editor/media/editorquickaccess.css b/src/vs/workbench/browser/parts/editor/media/editorquickaccess.css index 2e25284a83e..89390b0c7e5 100644 --- a/src/vs/workbench/browser/parts/editor/media/editorquickaccess.css +++ b/src/vs/workbench/browser/parts/editor/media/editorquickaccess.css @@ -4,7 +4,5 @@ *--------------------------------------------------------------------------------------------*/ .quick-input-list .quick-input-list-entry.has-actions:hover .quick-input-list-entry-action-bar .action-label.dirty-editor::before { - /* Close icon flips between black dot and "X" for dirty open editors */ - content: var(--vscode-icon-x-content); - font-family: var(--vscode-icon-x-font-family); + content: "\ea76"; /* Close icon flips between black dot and "X" for dirty open editors */ } diff --git a/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css b/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css index 557a5ff4b0f..f7d5341d2cf 100644 --- a/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css @@ -420,16 +420,14 @@ .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.sticky.dirty > .tab-actions .action-label:not(:hover)::before, .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky.dirty > .tab-actions .action-label:not(:hover)::before { - /* use `pinned-dirty` icon unicode for sticky-dirty indication */ - content: var(--vscode-icon-pinned-dirty-content); - font-family: var(--vscode-icon-pinned-dirty-font-family); + content: "\ebb2"; /* use `pinned-dirty` icon unicode for sticky-dirty indication */ + font-family: 'codicon'; } .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.dirty > .tab-actions .action-label:not(:hover)::before, .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label:not(:hover)::before { - /* use `circle-filled` icon unicode for dirty indication */ - content: var(--vscode-icon-circle-filled-content); - font-family: var(--vscode-icon-circle-filled-font-family); + content: "\ea71"; /* use `circle-filled` icon unicode for dirty indication */ + font-family: 'codicon'; } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-actions .action-label, diff --git a/src/vs/workbench/contrib/chat/electron-sandbox/actions/media/voiceChatActions.css b/src/vs/workbench/contrib/chat/electron-sandbox/actions/media/voiceChatActions.css index ba4f2a36513..f386a4a0089 100644 --- a/src/vs/workbench/contrib/chat/electron-sandbox/actions/media/voiceChatActions.css +++ b/src/vs/workbench/contrib/chat/electron-sandbox/actions/media/voiceChatActions.css @@ -7,8 +7,8 @@ * Replace with "microphone" icon. */ .monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::before { - content: var(--vscode-icon-mic-filled-content); - font-family: var(--vscode-icon-mic-filled-font-family); + content: "\ec1c"; + font-family: 'codicon'; } /* @@ -22,6 +22,6 @@ * Replace with "stop" icon when reduced motion is enabled. */ .monaco-workbench.reduce-motion .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::before { - content: var(--vscode-icon-debug-stop-content); - font-family: var(--vscode-icon-debug-stop-font-family); + content: "\ead7"; + font-family: 'codicon'; } diff --git a/src/vs/workbench/contrib/comments/browser/media/review.css b/src/vs/workbench/contrib/comments/browser/media/review.css index 0ee64b833ea..05c074921a3 100644 --- a/src/vs/workbench/contrib/comments/browser/media/review.css +++ b/src/vs/workbench/contrib/comments/browser/media/review.css @@ -530,8 +530,7 @@ div.preview.inline .monaco-editor .comment-range-glyph { .monaco-editor .margin-view-overlays > div:hover > .comment-range-glyph.comment-diff-added:before, .monaco-editor .margin-view-overlays .comment-range-glyph.line-hover:before { - content: var(--vscode-icon-plus-content); - font-family: var(--vscode-icon-plus-font-family); + content: "\ea60"; font-family: "codicon"; border-radius: 3px; width: 18px !important; @@ -558,13 +557,11 @@ div.preview.inline .monaco-editor .comment-range-glyph { } .monaco-editor .comment-range-glyph.comment-thread:before { - content: var(--vscode-icon-comment-add-content); - font-family: var(--vscode-icon-comment-add-font-family); + content: "\ea6b"; } .monaco-editor .comment-range-glyph.comment-thread-unresolved:before { - content: var(--vscode-icon-comment-unresolved-content); - font-family: var(--vscode-icon-comment-unresolved-font-family); + content: "\ec0a"; } .monaco-editor.inline-comment .margin-view-overlays .codicon-folding-expanded, diff --git a/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css b/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css index 31aee0ee41c..fcf0513b04f 100644 --- a/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css +++ b/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css @@ -36,8 +36,7 @@ .codicon-debug-breakpoint-conditional.codicon-debug-stackframe::after, .codicon-debug-breakpoint.codicon-debug-stackframe-focused::after, .codicon-debug-breakpoint.codicon-debug-stackframe::after { - content: var(--vscode-icon-circle-small-filled-content); - font-family: var(--vscode-icon-circle-small-filled-font-family); + content: '\eb8a'; position: absolute; } diff --git a/src/vs/workbench/contrib/files/browser/views/media/openeditors.css b/src/vs/workbench/contrib/files/browser/views/media/openeditors.css index 344f9790e52..cb154b83db9 100644 --- a/src/vs/workbench/contrib/files/browser/views/media/openeditors.css +++ b/src/vs/workbench/contrib/files/browser/views/media/openeditors.css @@ -37,15 +37,13 @@ } .open-editors .monaco-list .monaco-list-row.dirty:not(:hover) > .monaco-action-bar .codicon-pinned::before { - /* use `pinned-dirty` icon unicode for sticky-dirty indication */ - content: var(--vscode-icon-pinned-dirty-content); - font-family: var(--vscode-icon-pinned-dirty-font-family); + content: "\ebb2"; /* use `pinned-dirty` icon unicode for sticky-dirty indication */ + font-family: 'codicon'; } .open-editors .monaco-list .monaco-list-row.dirty:not(:hover) > .monaco-action-bar .codicon-close::before { - /* use `circle-filled` icon unicode for dirty indication */ - content: var(--vscode-icon-circle-filled-content); - font-family: var(--vscode-icon-circle-filled-font-family); + content: "\ea71"; /* use `circle-filled` icon unicode for dirty indication */ + font-family: 'codicon'; } .open-editors .monaco-list .monaco-list-row > .monaco-action-bar .action-close-all-files, diff --git a/src/vs/workbench/contrib/search/browser/media/anythingQuickAccess.css b/src/vs/workbench/contrib/search/browser/media/anythingQuickAccess.css index d910424d4f1..7804edf9678 100644 --- a/src/vs/workbench/contrib/search/browser/media/anythingQuickAccess.css +++ b/src/vs/workbench/contrib/search/browser/media/anythingQuickAccess.css @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ .quick-input-list .quick-input-list-entry.has-actions:hover .quick-input-list-entry-action-bar .action-label.dirty-anything::before { - /* Close icon flips between black dot and "X" for dirty open editors */ - content: var(--vscode-icon-x-content); - font-family: var(--vscode-icon-x-font-family); + content: "\ea76"; /* Close icon flips between black dot and "X" for dirty open editors */ + font-family: 'codicon'; } diff --git a/src/vs/workbench/electron-sandbox/actions/media/actions.css b/src/vs/workbench/electron-sandbox/actions/media/actions.css index 5669d90f585..553c68adf9f 100644 --- a/src/vs/workbench/electron-sandbox/actions/media/actions.css +++ b/src/vs/workbench/electron-sandbox/actions/media/actions.css @@ -4,7 +4,5 @@ *--------------------------------------------------------------------------------------------*/ .monaco-workbench .quick-input-list .quick-input-list-entry.has-actions:hover .quick-input-list-entry-action-bar .action-label.dirty-window::before { - /* Close icon flips between black dot and "X" for dirty open editors */ - content: var(--vscode-icon-x-content); - font-family: var(--vscode-icon-x-font-family); + content: "\ea76"; /* Close icon flips between black dot and "X" for dirty windows */ }