theme: fix unthemable icons in several areas (microsoft#209131)

* theme: fix unthemable icons in several areas

We manually used icon characters in several areas. These are/were entire unthemable. Fixing this required people to manually listen to the theme service and apply rules to their elements when icons change. This PRs adds theme variables that people can use instead.

Fixes microsoft#208343

* implement review comments

* fix font-family variable

---------

Co-authored-by: Martin Aeschlimann <[email protected]>

Author: connor4312

build/lib/stylelint/validateVariableNames.js

@@ -18,6 +18,8 @@ function getKnownVariableNames() {
 	return knownVariables;
 }
 
+const iconVariable = /^--vscode-icon-.+-(content|font-family)$/;
+
 export interface IValidator {
 	(value: string, report: (message: string) => void): void;
 }
@@ -29,7 +31,7 @@ export function getVariableNameValidator(): IValidator {
 		let match;
 		while (match = RE_VAR_PROP.exec(value)) {
 			const variableName = match[1];
-			if (variableName && !allVariables.has(variableName)) {
+			if (variableName && !allVariables.has(variableName) && !iconVariable.test(variableName)) {
 				report(variableName);
 			}
 		}

build/lib/stylelint/validateVariableNames.ts

@@ -9,7 +9,7 @@
 	src: url("./codicon.ttf?5d4d76ab2ce5108968ad644d591a16a6") format("truetype");
 }
 
-.codicon[class*='codicon-'] {
+.codicon {
 	font: normal normal normal 16px/1 codicon;
 	display: inline-block;
 	text-decoration: none;

src/vs/base/browser/ui/codicons/codicon/codicon.css

@@ -99,7 +99,8 @@
 
 .menubar:not(.compact) .menubar-menu-button:first-child .toolbar-toggle-more::before,
 .menubar.compact .toolbar-toggle-more::before {
-	content: "\eb94" !important;
+	content: var(--vscode-icon-menu-content) !important;
+	font-family: var(--vscode-icon-menu-font-family) !important;
 }
 
 /* Match behavior of outline for activity bar icons */

src/vs/base/browser/ui/menu/menubar.css

@@ -25,5 +25,6 @@
 }
 
 .inline-progress-widget:hover .icon::before {
-	content: "\ea76"; /* codicon-x */
+	content: var(--vscode-icon-x-content);
+	font-family: var(--vscode-icon-x-font-family);
 }

src/vs/editor/contrib/inlineProgress/browser/inlineProgressWidget.css

@@ -31,34 +31,41 @@ export function getIconsStyleSheet(themeService: IThemeService | undefined): IIc
 		getCSS() {
 			const productIconTheme = themeService ? themeService.getProductIconTheme() : new UnthemedProductIconTheme();
 			const usedFontIds: { [id: string]: IconFontDefinition } = {};
-			const formatIconRule = (contribution: IconContribution): string | undefined => {
+
+			const rules: string[] = [];
+			const rootAttribs: string[] = [];
+			for (const contribution of iconRegistry.getIcons()) {
 				const definition = productIconTheme.getIcon(contribution);
 				if (!definition) {
-					return undefined;
+					continue;
 				}
+
 				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;
-					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);
+					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}'; }`);
 				}
 			}
+
 			for (const id in usedFontIds) {
 				const definition = usedFontIds[id];
 				const fontWeight = definition.weight ? `font-weight: ${definition.weight};` : '';
 				const fontStyle = definition.style ? `font-style: ${definition.style};` : '';
 				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');
 		}
 	};

src/vs/platform/theme/browser/iconsStyleSheet.ts

@@ -4,7 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-workbench .quick-input-list .quick-input-list-entry.has-actions:hover .quick-input-list-entry-action-bar .action-label.dirty-workspace::before {
-	content: "\ea76"; /* Close icon flips between black dot and "X" for dirty workspaces */
+	/* 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);
 }
 
 .monaco-workbench .screencast-mouse {

src/vs/workbench/browser/actions/media/actions.css

@@ -196,7 +196,8 @@ body.web {
 }
 
 .monaco-workbench .select-container:after {
-	content: "\eab4";
+	content: var(--vscode-icon-chevron-down-content);
+	font-family: var(--vscode-icon-chevron-down-font-family);
 	font-family: codicon;
 	font-size: 16px;
 	width: 16px;

src/vs/workbench/browser/media/style.css

@@ -4,5 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 .quick-input-list .quick-input-list-entry.has-actions:hover .quick-input-list-entry-action-bar .action-label.dirty-editor::before {
-	content: "\ea76"; /* Close icon flips between black dot and "X" for dirty open editors */
+	/* 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);
 }

src/vs/workbench/browser/parts/editor/media/editorquickaccess.css

@@ -420,14 +420,16 @@
 
 .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 {
-	content: "\ebb2"; /* use `pinned-dirty` icon unicode for sticky-dirty indication */
-	font-family: 'codicon';
+	/* 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);
 }
 
 .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 {
-	content: "\ea71"; /* use `circle-filled` icon unicode for dirty indication */
-	font-family: 'codicon';
+	/* use `circle-filled` icon unicode for dirty indication */
+	content: var(--vscode-icon-circle-filled-content);
+	font-family: var(--vscode-icon-circle-filled-font-family);
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-actions .action-label,