Add tokenization and context provider API types

- Implemented window delineation tests for indentation-based tokenization.
- Created tokenizer module with various tokenization strategies including TTokenizer and ApproximateTokenizer.
- Added type definitions for authentication parameters and code citation notifications.
- Introduced context provider API for extensions to supply additional context items to Copilot.
- Defined core types and schemas for position and range.
- Established status types for agent status management in IDEs.

completions-sample-code/extension/src/panelShared/baseListDocument.ts

@@ -0,0 +1,110 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Position, Range } from 'vscode';
+import { IInstantiationService } from '../../../../../../util/vs/platform/instantiation/common/instantiation';
+import { postInsertionTasks } from '../../../lib/src/postInsertion';
+import { countLines } from '../../../lib/src/suggestions/partialSuggestions';
+import { IPosition, ITextDocument } from '../../../lib/src/textDocument';
+import { normalizeCompletionText, solutionCountTarget, SolutionManager } from '../lib/panelShared/common';
+import { UnformattedSolution } from '../lib/panelShared/panelTypes';
+import { BasePanelCompletion, ISuggestionsPanel } from './basePanelTypes';
+
+// BaseListDocument to be shared with both the copilot and comparison completion panels.
+export abstract class BaseListDocument<TPanelCompletion extends BasePanelCompletion> extends SolutionManager {
+	private _solutionCount = 0;
+	protected readonly _solutions: TPanelCompletion[] = [];
+
+	constructor(
+		textDocument: ITextDocument,
+		position: IPosition,
+		readonly panel: ISuggestionsPanel,
+		countTarget = solutionCountTarget,
+		@IInstantiationService protected readonly instantiationService: IInstantiationService
+	) {
+		super(textDocument, position, panel.cancellationToken, countTarget);
+	}
+
+	protected abstract createPanelCompletion(
+		unformatted: UnformattedSolution,
+		baseCompletion: BasePanelCompletion
+	): TPanelCompletion;
+	protected abstract shouldAddSolution(newItem: TPanelCompletion): boolean;
+	protected abstract runSolutionsImpl(): Promise<void>;
+
+	// Find if two solutions are duplicates by comparing their normalized text content.
+	protected areSolutionsDuplicates(solutionA: TPanelCompletion, solutionB: TPanelCompletion): boolean {
+		const stripA = normalizeCompletionText(solutionA.insertText);
+		const stripB = normalizeCompletionText(solutionB.insertText);
+		return stripA === stripB;
+	}
+
+	protected findDuplicateSolution(newItem: TPanelCompletion): TPanelCompletion | undefined {
+		return this._solutions.find(item => this.areSolutionsDuplicates(item, newItem));
+	}
+
+	onSolution(unformatted: UnformattedSolution) {
+		const offset = this.textDocument.offsetAt(this.targetPosition);
+		const rank = this._solutions.length;
+
+		const postInsertionCallback = () => {
+			const telemetryData = this.savedTelemetryData!.extendedBy(
+				{
+					choiceIndex: unformatted.choiceIndex.toString(),
+					engineName: unformatted.modelId || '',
+				},
+				{
+					compCharLen: unformatted.insertText.length,
+					meanProb: unformatted.meanProb,
+					rank,
+				}
+			);
+			return this.instantiationService.invokeFunction(postInsertionTasks,
+				'solution',
+				unformatted.insertText,
+				offset,
+				this.textDocument.uri,
+				telemetryData,
+				{
+					compType: 'full',
+					acceptedLength: unformatted.insertText.length,
+					acceptedLines: countLines(unformatted.insertText),
+				},
+				unformatted.copilotAnnotations
+			);
+		};
+
+		const baseCompletion: BasePanelCompletion = {
+			insertText: unformatted.insertText,
+			range: new Range(
+				new Position(unformatted.range.start.line, unformatted.range.start.character),
+				new Position(unformatted.range.end.line, unformatted.range.end.character)
+			),
+			copilotAnnotations: unformatted.copilotAnnotations,
+			postInsertionCallback,
+		};
+
+		const newItem = this.createPanelCompletion(unformatted, baseCompletion);
+
+		if (this.shouldAddSolution(newItem)) {
+			this.panel.onItem(newItem);
+			this._solutions.push(newItem);
+		}
+		this._solutionCount++;
+		this.panel.onWorkDone({ percentage: (100 * this._solutionCount) / this.solutionCountTarget });
+	}
+
+	onFinishedNormally() {
+		return this.panel.onFinished();
+	}
+
+	onFinishedWithError(_: string) {
+		return this.onFinishedNormally();
+	}
+
+	runQuery() {
+		return this.runSolutionsImpl();
+	}
+}

completions-sample-code/extension/src/panelShared/basePanelTypes.ts

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { CancellationToken, Range } from 'vscode';
+import { CopilotNamedAnnotationList } from '../../../../../../platform/completions-core/common/openai/copilotAnnotations';
+
+// Base interface for a completion displayed in the panel.
+export interface BasePanelCompletion {
+	insertText: string;
+	range: Range;
+	copilotAnnotations?: CopilotNamedAnnotationList;
+	postInsertionCallback: () => PromiseLike<void> | void;
+}
+
+// Interface for the suggestions panel, which handles work done notifications and item selections.
+export interface ISuggestionsPanel {
+	cancellationToken: CancellationToken;
+	onWorkDone(_: { percentage: number }): void;
+	onItem(_: BasePanelCompletion): void;
+	onFinished(): void;
+}
+
+// Configuration for webview panels for completions.
+export interface PanelConfig {
+	panelTitle: string;
+	webviewId: string;
+	webviewScriptName: string;
+	contextVariable: string;
+	commands: {
+		accept: string;
+		navigatePrevious: string;
+		navigateNext: string;
+	};
+	renderingMode: 'streaming' | 'batch';
+	shuffleSolutions: boolean;
+}
+
+// Configuration for webview panels, used to pass settings to the webview.
+export interface WebviewConfig {
+	renderingMode: 'batch' | 'streaming';
+	shuffleSolutions: boolean;
+}

completions-sample-code/extension/src/panelShared/baseSuggestionsPanel.ts

@@ -0,0 +1,338 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import {
+	CancellationTokenSource,
+	Disposable,
+	Event,
+	EventEmitter,
+	TextDocument,
+	Uri,
+	WebviewPanel,
+	WorkspaceEdit,
+	commands,
+	workspace,
+} from 'vscode';
+import { IVSCodeExtensionContext } from '../../../../../../platform/extContext/common/extensionContext';
+import { debounce } from '../../../../../../util/common/debounce';
+import { BasePanelCompletion, ISuggestionsPanel, PanelConfig } from './basePanelTypes';
+import { Highlighter } from './highlighter';
+import { getNonce, pluralize } from './utils';
+
+//import { IPCitationDetail } from '#lib/citationManager';
+interface IPCitationDetail {
+	license: string;
+	url: string;
+}
+
+export interface SuggestionsPanelManagerInterface {
+	activeWebviewPanel: BaseSuggestionsPanel<BasePanelCompletion> | undefined;
+	decrementPanelCount(): void;
+}
+
+export interface SolutionContent {
+	htmlSnippet: string;
+	citation?: { message: string; url: string };
+	[key: string]: unknown; // Allow additional properties for panel-specific content
+}
+
+export interface BaseWebviewMessage {
+	command: string;
+}
+
+interface AcceptSolutionMessage extends BaseWebviewMessage {
+	command: 'acceptSolution';
+	solutionIndex: number;
+}
+
+interface FocusSolutionMessage extends BaseWebviewMessage {
+	command: 'focusSolution';
+	solutionIndex: number;
+}
+
+interface SubmitFeedbackMessage extends BaseWebviewMessage {
+	command: 'submitFeedback';
+	solutionIndex: number;
+	feedback: string;
+}
+
+interface RefreshMessage extends BaseWebviewMessage {
+	command: 'refresh';
+}
+
+interface WebviewReadyMessage extends BaseWebviewMessage {
+	command: 'webviewReady';
+}
+
+export type WebviewMessage =
+	| AcceptSolutionMessage
+	| FocusSolutionMessage
+	| SubmitFeedbackMessage
+	| RefreshMessage
+	| WebviewReadyMessage;
+
+export abstract class BaseSuggestionsPanel<TPanelCompletion extends BasePanelCompletion> implements ISuggestionsPanel {
+	private _disposables: Disposable[] = [];
+	#items: TPanelCompletion[] = [];
+	#batchItems: TPanelCompletion[] = [];
+	#percentage = 0;
+	#highlighter: Thenable<Highlighter>;
+	private _focusedSolution: TPanelCompletion | undefined;
+	private _isDisposed: boolean = false;
+	#documentUri: Uri;
+	#cts = new CancellationTokenSource();
+
+	private _onDidDispose = new EventEmitter<void>();
+	readonly onDidDispose: Event<void> = this._onDidDispose.event;
+
+	get cancellationToken() {
+		return this.#cts.token;
+	}
+
+	constructor(
+		readonly webviewPanel: WebviewPanel,
+		document: TextDocument,
+		protected suggestionsPanelManager: SuggestionsPanelManagerInterface,
+		protected readonly config: PanelConfig,
+		@IVSCodeExtensionContext protected readonly contextService: IVSCodeExtensionContext,
+	) {
+		webviewPanel.onDidDispose(() => this._dispose(), null, this._disposables);
+		webviewPanel.webview.html = this._getWebviewContent();
+		this.#documentUri = document.uri;
+
+		this.#highlighter = Highlighter.create(document.languageId);
+
+		workspace.onDidChangeConfiguration(e => {
+			if (e.affectsConfiguration('workbench.colorTheme')) {
+				return this.render();
+			}
+		});
+
+		webviewPanel.webview.onDidReceiveMessage(async (message: WebviewMessage) => {
+			// First lest the subclass handle custom messages
+			if ((await this.handleCustomMessage(message)) === true) {
+				return;
+			}
+			switch (message.command) {
+				case 'focusSolution':
+					this._focusedSolution = this.#items[message.solutionIndex];
+					return;
+				case 'webviewReady':
+					// Send the config to the webview
+					void this.postMessage({
+						command: 'updateConfig',
+						config: {
+							renderingMode: this.config.renderingMode,
+							shuffleSolutions: this.config.shuffleSolutions,
+						},
+					});
+					return;
+			}
+		}, undefined);
+
+		webviewPanel.onDidChangeViewState(e => {
+			if (e.webviewPanel?.visible) {
+				this.suggestionsPanelManager.activeWebviewPanel = this;
+			}
+		});
+	}
+
+	protected async handleCustomMessage(message: BaseWebviewMessage): Promise<boolean> {
+		return Promise.resolve(false);
+	}
+	protected abstract renderSolutionContent(item: TPanelCompletion, baseContent: SolutionContent): SolutionContent;
+
+	private _buildExtensionUri(...path: string[]): Uri {
+		const extensionPath = Uri.joinPath(this.contextService.extensionUri, ...path);
+		return this.webviewPanel.webview.asWebviewUri(extensionPath);
+	}
+
+	private _getWebviewContent() {
+		const nonce = getNonce();
+		const scriptUri = this._buildExtensionUri('dist', this.config.webviewScriptName);
+
+		return `
+		<!DOCTYPE html>
+			<html lang="en">
+				<head>
+					<meta charset="UTF-8">
+					<meta name="viewport" content="width=device-width, initial-scale=1.0">
+					<meta
+						http-equiv="Content-Security-Policy"
+						content="default-src 'none'; font-src ${this.webviewPanel.webview.cspSource}; style-src 'unsafe-inline' ${this.webviewPanel.webview.cspSource}; script-src 'nonce-${nonce}';"
+					/>
+					<title>${this.config.panelTitle}</title>
+					<style>
+						.solutionHeading {
+							margin-top: 40px;
+						}
+						pre:focus-visible {
+							border: 1px solid var(--vscode-focusBorder);
+							outline: none;
+						}
+						pre {
+							margin-bottom: 6px;
+							display: block;
+							padding: 9.5px;
+							line-height: 1.42857143;
+							word-break: break-all;
+							word-wrap: break-word;
+							border: 1px solid #ccc;
+							border-radius: 4px;
+							border: 1px solid var(--vscode-notebook-cellBorderColor);
+							white-space: pre-wrap;
+							font-size: var(--vscode-editor-font-size);
+						}
+						pre.shiki {
+							padding: 0.5em 0.7em;
+							margin-top: 1em;
+							margin-bottom: 1em;
+							border-radius: 4px;
+						}
+						code {
+							background-color: transparent;
+						}
+					</style>
+				</head>
+				<body>
+					<h2>${this.config.panelTitle}</h2>
+					<div id="loadingContainer" aria-live="assertive" aria-atomic="true">
+						<label for="progress-bar">Loading suggestions:</label>
+						<progress id="progress-bar" max="100" value="0"></progress>
+					</div>
+					<div id="solutionsContainer" aria-busy="true" aria-describedby="progress-bar"></div>
+					<script nonce="${nonce}" type="module" src="${scriptUri.toString()}"></script>
+				</body>
+			</html>
+		`;
+	}
+
+	onWorkDone({ percentage }: { percentage: number }) {
+		this.#percentage = percentage;
+		void this.render();
+	}
+
+	onItem(item: TPanelCompletion) {
+		// If rendering mode is 'batch', we collect items and render them later
+		// Otherwise, we render immediately
+		if (this.config.renderingMode === 'batch') {
+			this.#batchItems.push(item);
+		} else {
+			this.#items.push(item);
+			void this.render();
+		}
+	}
+
+	clearSolutions() {
+		// Cancel any ongoing operations
+		this.#cts.cancel();
+		// Create a new cancellation token source for the next operation
+		this.#cts = new CancellationTokenSource();
+
+		// Clear all solutions and reset state
+		this.#items = [];
+		this.#batchItems = [];
+		this._focusedSolution = undefined;
+		this.#percentage = 0;
+		void this.render();
+	}
+
+	onFinished() {
+		this.#percentage = 100;
+
+		// If we have batch items, add them to the main items list, shuffle if needed, and render
+		if (this.#batchItems.length > 0) {
+			this.#items.push(...this.#batchItems);
+
+			if (this.config.shuffleSolutions) {
+				this.#items = this.#items.sort(() => Math.random() - 0.5);
+			}
+
+			this.#batchItems = [];
+		}
+
+		void this.render();
+	}
+
+	protected async acceptSolution(solution: TPanelCompletion, closePanel: boolean = true) {
+		if (this._isDisposed === false && solution?.range) {
+			const edit = new WorkspaceEdit();
+			edit.replace(this.#documentUri, solution.range, solution.insertText);
+			await workspace.applyEdit(edit);
+			this.#cts.cancel();
+			if (closePanel) {
+				await commands.executeCommand('workbench.action.closeActiveEditor');
+			}
+			await solution.postInsertionCallback();
+		}
+	}
+
+	protected items(): TPanelCompletion[] {
+		return this.#items;
+	}
+
+	async acceptFocusedSolution() {
+		const solution = this._focusedSolution;
+		if (solution) {
+			return this.acceptSolution(solution);
+		}
+	}
+
+	protected async renderSolutions() {
+		const highlighter = await this.#highlighter;
+		const content = this.#items.map(item => {
+			const firstCitation = item.copilotAnnotations?.ip_code_citations?.[0];
+			const details = firstCitation?.details.citations as IPCitationDetail[] | undefined;
+			let renderedCitatation: { message: string; url: string } | undefined;
+			if (details && details.length > 0) {
+				const licensesSet = new Set(details.map(d => d.license));
+				if (licensesSet.has('NOASSERTION')) {
+					licensesSet.delete('NOASSERTION');
+					licensesSet.add('unknown');
+				}
+				const allLicenses = Array.from(licensesSet).sort();
+				const licenseString = allLicenses.length === 1 ? allLicenses[0] : `[${allLicenses.join(', ')}]`;
+				renderedCitatation = {
+					message: `Similar code with ${pluralize(allLicenses.length, 'license type')} ${licenseString} detected.`,
+					url: details[0].url,
+				};
+			}
+
+			const baseContent = {
+				htmlSnippet: highlighter.createSnippet(item.insertText.trim()),
+				citation: renderedCitatation,
+			};
+
+			return this.renderSolutionContent(item, baseContent);
+		});
+
+		const message = this.createSolutionsMessage(content, this.#percentage);
+		await this.postMessage(message);
+	}
+
+	// Subclasses must implement this to create their specific message format
+	protected abstract createSolutionsMessage(content: SolutionContent[], percentage: number): unknown;
+
+	render = debounce(10, () => this.renderSolutions());
+
+	postMessage(message: unknown) {
+		if (this._isDisposed === false) {
+			return this.webviewPanel.webview.postMessage(message);
+		}
+	}
+
+	private _dispose() {
+		this._isDisposed = true;
+		this._onDidDispose.fire();
+		this.suggestionsPanelManager.decrementPanelCount();
+		while (this._disposables.length) {
+			const disposable = this._disposables.pop();
+			if (disposable) {
+				disposable.dispose();
+			}
+		}
+		this._onDidDispose.dispose();
+	}
+}

completions-sample-code/extension/src/panelShared/baseSuggestionsPanelManager.ts

@@ -0,0 +1,98 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { TextDocument, Uri, ViewColumn, WebviewPanel, commands, window } from 'vscode';
+import { IVSCodeExtensionContext } from '../../../../../../platform/extContext/common/extensionContext';
+import { DisposableStore, IDisposable } from '../../../../../../util/vs/base/common/lifecycle';
+import { IInstantiationService } from '../../../../../../util/vs/platform/instantiation/common/instantiation';
+import { IPosition, ITextDocument } from '../../../lib/src/textDocument';
+import { basename } from '../../../lib/src/util/uri';
+import { registerCommandWrapper } from '../telemetry';
+import { BasePanelCompletion, PanelConfig } from './basePanelTypes';
+import { BaseSuggestionsPanel, SuggestionsPanelManagerInterface } from './baseSuggestionsPanel';
+
+export interface ListDocumentInterface {
+	runQuery(): Promise<void>;
+}
+
+export abstract class BaseSuggestionsPanelManager<TPanelCompletion extends BasePanelCompletion>
+	implements SuggestionsPanelManagerInterface {
+	activeWebviewPanel: BaseSuggestionsPanel<TPanelCompletion> | undefined;
+	private _panelCount: number = 0;
+
+	constructor(
+		protected readonly config: PanelConfig,
+		@IInstantiationService protected readonly _instantiationService: IInstantiationService,
+		@IVSCodeExtensionContext protected readonly _extensionContext: IVSCodeExtensionContext,
+	) { }
+
+	protected abstract createListDocument(
+		wrapped: ITextDocument,
+		position: IPosition,
+		panel: BaseSuggestionsPanel<TPanelCompletion>
+	): ListDocumentInterface;
+
+	protected abstract createSuggestionsPanel(
+		panel: WebviewPanel,
+		document: TextDocument,
+		manager: this
+	): BaseSuggestionsPanel<TPanelCompletion>;
+
+	renderPanel(
+		document: TextDocument,
+		position: IPosition,
+		wrapped: ITextDocument
+	): BaseSuggestionsPanel<TPanelCompletion> {
+		const title = `${this.config.panelTitle} for ${basename(document.uri.toString()) || document.uri.toString()}`;
+		const panel = window.createWebviewPanel(this.config.webviewId, title, ViewColumn.Two, {
+			enableScripts: true,
+			localResourceRoots: [Uri.joinPath(this._extensionContext.extensionUri, 'dist')],
+			retainContextWhenHidden: true,
+		});
+
+		const suggestionPanel = this.createSuggestionsPanel(panel, document, this);
+		// Listen for the panel disposal event to clear our reference
+		suggestionPanel.onDidDispose(() => {
+			if (this.activeWebviewPanel === suggestionPanel) {
+				this.activeWebviewPanel = undefined;
+			}
+		});
+
+		void this.createListDocument(wrapped, position, suggestionPanel).runQuery();
+
+		this.activeWebviewPanel = suggestionPanel;
+		this._panelCount = this._panelCount + 1;
+		return suggestionPanel;
+	}
+
+	registerCommands(): IDisposable {
+		const disposableStore = new DisposableStore();
+
+		disposableStore.add(this._instantiationService.invokeFunction(registerCommandWrapper, this.config.commands.accept, () => {
+			return this.activeWebviewPanel?.acceptFocusedSolution();
+		}));
+
+		disposableStore.add(this._instantiationService.invokeFunction(registerCommandWrapper, this.config.commands.navigatePrevious, () => {
+			return this.activeWebviewPanel?.postMessage({
+				command: 'navigatePreviousSolution',
+			});
+		}));
+
+		disposableStore.add(this._instantiationService.invokeFunction(registerCommandWrapper, this.config.commands.navigateNext, () => {
+			return this.activeWebviewPanel?.postMessage({
+				command: 'navigateNextSolution',
+			});
+		}));
+
+		return disposableStore;
+	}
+
+	decrementPanelCount() {
+		this._panelCount = this._panelCount - 1;
+		if (this._panelCount === 0) {
+			void commands.executeCommand('setContext', this.config.contextVariable, false);
+		}
+	}
+}

completions-sample-code/extension/src/panelShared/highlighter.ts

@@ -0,0 +1,117 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { getSingletonHighlighterCore, HighlighterCore, ThemeRegistration, ThemeRegistrationAny } from 'shiki/core';
+import * as langs from 'shiki/langs';
+import { BundledLanguage } from 'shiki/langs';
+import getWasmInlined from 'shiki/wasm';
+import { ColorThemeKind, window, workspace } from 'vscode';
+import * as languages from './languages';
+import * as themes from './themes';
+
+export class Highlighter {
+	private constructor(
+		private languageId: string | undefined,
+		private highlighter: HighlighterCore | undefined
+	) { }
+
+	static async create(languageId = window.activeTextEditor?.document.languageId): Promise<Highlighter> {
+		if (!languageId) {
+			return new Highlighter(undefined, undefined);
+		}
+
+		const highlighter = await getSingletonHighlighterCore({
+			langs: Object.values(langs.bundledLanguages),
+			loadWasm: getWasmInlined,
+		});
+
+		// Load additional language if not out of the box for shiki
+		if (!langs.bundledLanguages[languageId as BundledLanguage]) {
+			const additionalLang = vscLanguageMap[languageId as keyof typeof vscLanguageMap];
+			if (additionalLang) {
+				await highlighter.loadLanguage(additionalLang);
+			}
+		}
+
+		return new Highlighter(languageId, highlighter);
+	}
+
+	createSnippet(text: string): string {
+		if (!this.highlighter || !this.languageId || !this.languageSupported()) {
+			return `<pre>${text}</pre>`;
+		}
+
+		return this.highlighter.codeToHtml(text, { lang: this.languageId, theme: getCurrentTheme() });
+	}
+
+	private languageSupported() {
+		if (!this.languageId) { return false; }
+
+		if (this.highlighter?.getLoadedLanguages().includes(this.languageId)) {
+			return true;
+		}
+
+		return false;
+	}
+}
+
+function getCurrentTheme(): ThemeRegistration {
+	const workbenchConfig = workspace.getConfiguration('workbench');
+	if (workbenchConfig) {
+		const vsCodeTheme = workbenchConfig.get<string>('colorTheme');
+		if (vsCodeTheme && isSupportedTheme(vsCodeTheme)) {
+			return vscThemeMap[vsCodeTheme];
+		}
+		const themeType = window.activeColorTheme;
+		const defaultTheme = vscDefaultMap[themeType.kind]; // fall back to default themes if we don't have a match
+
+		return defaultTheme;
+	} else {
+		return vscThemeMap['Default Dark Modern'];
+	}
+}
+
+const vscDefaultMap: { [key in ColorThemeKind]: ThemeRegistrationAny } = {
+	[ColorThemeKind.Dark]: themes.darkModern,
+	[ColorThemeKind.Light]: themes.lightModern,
+	[ColorThemeKind.HighContrast]: themes.darkHC,
+	[ColorThemeKind.HighContrastLight]: themes.lightHC,
+};
+
+// These are vs code themes that aren't out of the box in shiki but come standard with vs code
+const vscThemeMap: { [key: string]: ThemeRegistrationAny } = {
+	Abyss: themes.abyss,
+	'Dark High Contrast': themes.darkHC,
+	'Light High Constrast': themes.lightHC,
+	'Default Dark Modern': themes.darkModern,
+	'Kimbie Dark': themes.kimbieDark,
+	'Default Light Modern': themes.lightModern,
+	'Monokai Dimmed': themes.monokaiDim,
+	'Quiet Light': themes.quietLight,
+	Red: themes.red,
+	'Tomorrow Night Blue': themes.tomorrowNightBlue,
+	'Visual Studio Dark': themes.vsDark,
+	'Visual Studio Light': themes.vsLight,
+	'Default Dark+': themes.darkPlus,
+	'Default Light+': themes.lightPlus,
+	Monokai: themes.monokai,
+	'Solarized Dark': themes.solarizedDark,
+	'Solarized Light': themes.solarizedLight,
+} as const;
+
+function isSupportedTheme(theme: keyof typeof vscThemeMap): theme is keyof typeof vscThemeMap {
+	return theme in vscThemeMap;
+}
+
+// These are vs code themes that aren't out of the box in shiki but come standard with vs code
+const vscLanguageMap = {
+	'cuda-cpp': languages.cudaCpp,
+	javascriptreact: languages.javascriptreact,
+	markdown_latex_combined: languages.markdownLatexCombined,
+	'markdown-math': languages.markdownMath,
+	restructuredtext: languages.restructuredtext,
+	'search-result': languages.searchResult,
+	typescriptreact: languages.typescriptreact,
+} as const;

completions-sample-code/extension/src/panelShared/languages/index.ts

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+export { cudaCpp } from './cuda-cpp.tmLanguage';
+export { javascriptreact } from './javaScriptReact.tmLanguage';
+export { markdownLatexCombined } from './markdown-latex-combined.tmLanguage';
+export { markdownMath } from './md-math.tmLanguage';
+export { restructuredtext } from './rst.tmLanguage';
+export { searchResult } from './searchResult.tmLanguage';
+export { typescriptreact } from './typeScriptReact.tmLanguage';

completions-sample-code/extension/src/panelShared/languages/md-math.tmLanguage.ts

@@ -0,0 +1,113 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { LanguageInput } from 'shiki/core';
+
+// This file includes some grammar rules copied from https://github.com/James-Yu/LaTeX-Workshop/blob/master/syntax/TeX.tmLanguage.json',
+export const markdownMath: LanguageInput = {
+	name: 'markdown-math',
+	scopeName: 'text.html.markdown.math',
+	patterns: [
+		{
+			include: '#math',
+		},
+	],
+	repository: {
+		$self: {},
+		$base: {},
+		math: {
+			patterns: [
+				{
+					name: 'comment.line.math.tex',
+					match: '((?<!\\\\)%)(.+)$',
+					captures: {
+						'1': {
+							name: 'punctuation.definition.comment.math.tex',
+						},
+					},
+				},
+				{
+					name: 'line.separator.math.tex',
+					match: '(\\\\\\\\)$',
+					captures: {
+						'1': {
+							name: 'punctuation.line.separator.math.tex',
+						},
+					},
+				},
+				{
+					name: 'meta.function.math.tex',
+					begin: '((\\\\)([a-zA-Z_]+))\\s*(\\{)',
+					beginCaptures: {
+						'1': {
+							name: 'storage.type.function.math.tex',
+						},
+						'2': {
+							name: 'punctuation.definition.function.math.tex',
+						},
+						'3': {
+							name: 'entity.name.function.math.tex',
+						},
+						'4': {
+							name: 'punctuation.definition.arguments.begin.math.tex',
+						},
+					},
+					end: '\\}',
+					endCaptures: {
+						'0': {
+							name: 'punctuation.definition.arguments.end.math.tex',
+						},
+					},
+					patterns: [
+						{
+							include: '$self',
+						},
+					],
+				},
+				{
+					captures: {
+						'1': {
+							name: 'punctuation.definition.constant.math.tex',
+						},
+					},
+					match: '(\\\\)([a-zA-Z_]+)\\b',
+					name: 'constant.character.math.tex',
+				},
+				{
+					captures: {
+						'1': {
+							name: 'punctuation.definition.constant.math.tex',
+						},
+					},
+					match: '(\\\\)(?!begin\\*\\{|verb)([A-Za-z]+)',
+					name: 'constant.other.general.math.tex',
+				},
+				{
+					match: '(?<!\\\\)\\{',
+					name: 'punctuation.math.begin.bracket.curly',
+				},
+				{
+					match: '(?<!\\\\)\\}',
+					name: 'punctuation.math.end.bracket.curly',
+				},
+				{
+					match: '\\(',
+					name: 'punctuation.math.begin.bracket.round',
+				},
+				{
+					match: '\\)',
+					name: 'punctuation.math.end.bracket.round',
+				},
+				{
+					match: '(([0-9]*[\\.][0-9]+)|[0-9]+)',
+					name: 'constant.numeric.math.tex',
+				},
+				{
+					match: '[\\+\\*/_\\^-]',
+					name: 'punctuation.math.operator.latex',
+				},
+			],
+		},
+	},
+};

completions-sample-code/extension/src/panelShared/languages/rst.tmLanguage.ts

@@ -0,0 +1,740 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+/* eslint-disable local/no-unexternalized-strings */
+import { LanguageInput } from 'shiki/core';
+
+// This file has been converted from https://github.com/trond-snekvik/vscode-rst/blob/master/syntaxes/rst.tmLanguage.json
+// If you want to provide a fix or improvement, please create a pull request against the original repository.
+// Once accepted there, we are happy to receive an update request.
+// version: https://github.com/trond-snekvik/vscode-rst/commit/f0fe19ffde6509be52ad9267a57e1b3df665f072
+export const restructuredtext: LanguageInput = {
+	scopeName: 'source.rst',
+	name: 'restructuredtext',
+	patterns: [
+		{
+			include: '#body',
+		},
+	],
+	repository: {
+		$self: {},
+		$base: {},
+		body: {
+			patterns: [
+				{
+					include: '#title',
+				},
+				{
+					include: '#inline-markup',
+				},
+				{
+					include: '#anchor',
+				},
+				{
+					include: '#line-block',
+				},
+				{
+					include: '#replace-include',
+				},
+				{
+					include: '#footnote',
+				},
+				{
+					include: '#substitution',
+				},
+				{
+					include: '#blocks',
+				},
+				{
+					include: '#table',
+				},
+				{
+					include: '#simple-table',
+				},
+				{
+					include: '#options-list',
+				},
+			],
+		},
+		title: {
+			match: '^(\\*{3,}|#{3,}|\\={3,}|~{3,}|\\+{3,}|-{3,}|`{3,}|\\^{3,}|:{3,}|"{3,}|_{3,}|\'{3,})$',
+			name: 'markup.heading',
+		},
+		'inline-markup': {
+			patterns: [
+				{
+					include: '#escaped',
+				},
+				{
+					include: '#ignore',
+				},
+				{
+					include: '#ref',
+				},
+				{
+					include: '#literal',
+				},
+				{
+					include: '#monospaced',
+				},
+				{
+					include: '#citation',
+				},
+				{
+					include: '#bold',
+				},
+				{
+					include: '#italic',
+				},
+				{
+					include: '#list',
+				},
+				{
+					include: '#macro',
+				},
+				{
+					include: '#reference',
+				},
+				{
+					include: '#footnote-ref',
+				},
+			],
+		},
+		ignore: {
+			patterns: [
+				{
+					match: "'[`*]+'",
+				},
+				{
+					match: '<[`*]+>',
+				},
+				{
+					match: '{[`*]+}',
+				},
+				{
+					match: '\\([`*]+\\)',
+				},
+				{
+					match: '\\[[`*]+\\]',
+				},
+				{
+					match: '"[`*]+"',
+				},
+			],
+		},
+		table: {
+			begin: '^\\s*\\+[=+-]+\\+\\s*$',
+			end: '^(?![+|])',
+			beginCaptures: {
+				'0': {
+					name: 'keyword.control.table',
+				},
+			},
+			patterns: [
+				{
+					match: '[=+|-]',
+					name: 'keyword.control.table',
+				},
+			],
+		},
+		'simple-table': {
+			match: '^[=\\s]+$',
+			name: 'keyword.control.table',
+		},
+		ref: {
+			begin: '(:ref:)`',
+			end: '`|^\\s*$',
+			name: 'entity.name.tag',
+			beginCaptures: {
+				'1': {
+					name: 'keyword.control',
+				},
+			},
+			patterns: [
+				{
+					match: '<.*?>',
+					name: 'markup.underline.link',
+				},
+			],
+		},
+		reference: {
+			match: '[\\w-]*[a-zA-Z\\d-]__?\\b',
+			name: 'entity.name.tag',
+		},
+		macro: {
+			match: '\\|[^\\|]+\\|',
+			name: 'entity.name.tag',
+		},
+		literal: {
+			match: '(:\\S+:)(`.*?`\\\\?)',
+			captures: {
+				'1': {
+					name: 'keyword.control',
+				},
+				'2': {
+					name: 'entity.name.tag',
+				},
+			},
+		},
+		monospaced: {
+			begin: '(?<=[\\s"\'(\\[{<]|^)``[^\\s`]',
+			end: '``|^\\s*$',
+			name: 'string.interpolated',
+		},
+		citation: {
+			begin: '(?<=[\\s"\'(\\[{<]|^)`[^\\s`]',
+			end: '`_{,2}|^\\s*$',
+			name: 'entity.name.tag',
+			applyEndPatternLast: false,
+		},
+		bold: {
+			begin: '(?<=[\\s"\'(\\[{<]|^)\\*{2}[^\\s*]',
+			end: '\\*{2}|^\\s*$',
+			name: 'markup.bold',
+		},
+		italic: {
+			begin: '(?<=[\\s"\'(\\[{<]|^)\\*[^\\s*]',
+			end: '\\*|^\\s*$',
+			name: 'markup.italic',
+		},
+		escaped: {
+			match: '\\\\.',
+			name: 'constant.character.escape',
+		},
+		list: {
+			match: '^\\s*(\\d+\\.|\\* -|[a-zA-Z#]\\.|[iIvVxXmMcC]+\\.|\\(\\d+\\)|\\d+\\)|[*+-])\\s+',
+			name: 'keyword.control',
+		},
+		'line-block': {
+			match: '^\\|\\s+',
+			name: 'keyword.control',
+		},
+		'raw-html': {
+			begin: '^(\\s*)(\\.{2}\\s+raw\\s*::)\\s+(html)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'3': {
+					name: 'variable.parameter.html',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'text.html.derivative',
+				},
+			],
+		},
+		anchor: {
+			match: '^\\.{2}\\s+(_[^:]+:)\\s*',
+			name: 'entity.name.tag.anchor',
+		},
+		'replace-include': {
+			match: '^\\s*(\\.{2})\\s+(\\|[^\\|]+\\|)\\s+(replace::)',
+			captures: {
+				'1': {
+					name: 'keyword.control',
+				},
+				'2': {
+					name: 'entity.name.tag',
+				},
+				'3': {
+					name: 'keyword.control',
+				},
+			},
+		},
+		footnote: {
+			match: '^\\s*\\.{2}\\s+\\[(?:[\\w\\.-]+|[#*]|#\\w+)\\]\\s+',
+			name: 'entity.name.tag',
+		},
+		'footnote-ref': {
+			match: '\\[(?:[\\w\\.-]+|[#*])\\]_',
+			name: 'entity.name.tag',
+		},
+		substitution: {
+			match: '^\\.{2}\\s*\\|([^|]+)\\|',
+			name: 'entity.name.tag',
+		},
+		'options-list': {
+			match: '^((?:-\\w|--[\\w-]+|/\\w+)(?:,? ?[\\w-]+)*)(?:  |\\t|$)',
+			name: 'variable.parameter',
+		},
+		blocks: {
+			patterns: [
+				{
+					include: '#domains',
+				},
+				{
+					include: '#doctest',
+				},
+				{
+					include: '#code-block-cpp',
+				},
+				{
+					include: '#code-block-py',
+				},
+				{
+					include: '#code-block-console',
+				},
+				{
+					include: '#code-block-javascript',
+				},
+				{
+					include: '#code-block-yaml',
+				},
+				{
+					include: '#code-block-cmake',
+				},
+				{
+					include: '#code-block-kconfig',
+				},
+				{
+					include: '#code-block-ruby',
+				},
+				{
+					include: '#code-block-dts',
+				},
+				{
+					include: '#code-block',
+				},
+				{
+					include: '#doctest-block',
+				},
+				{
+					include: '#raw-html',
+				},
+				{
+					include: '#block',
+				},
+				{
+					include: '#literal-block',
+				},
+				{
+					include: '#block-comment',
+				},
+			],
+		},
+		'block-comment': {
+			begin: '^(\\s*)\\.{2}',
+			while: '^\\1(?=\\s)|^\\s*$',
+			name: 'comment.block',
+		},
+		'literal-block': {
+			begin: '^(\\s*)(.*)(::)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					patterns: [
+						{
+							include: '#inline-markup',
+						},
+					],
+				},
+				'3': {
+					name: 'keyword.control',
+				},
+			},
+		},
+		block: {
+			begin: '^(\\s*)(\\.{2}\\s+\\S+::)(.*)',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'3': {
+					name: 'variable',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: '#body',
+				},
+			],
+		},
+		'block-param': {
+			patterns: [
+				{
+					match: '(:param\\s+(.+?):)(?:\\s|$)',
+					captures: {
+						'1': {
+							name: 'keyword.control',
+						},
+						'2': {
+							name: 'variable.parameter',
+						},
+					},
+				},
+				{
+					match: '(:.+?:)(?:$|\\s+(.*))',
+					captures: {
+						'1': {
+							name: 'keyword.control',
+						},
+						'2': {
+							patterns: [
+								{
+									match: '\\b(0x[a-fA-F\\d]+|\\d+)\\b',
+									name: 'constant.numeric',
+								},
+								{
+									include: '#inline-markup',
+								},
+							],
+						},
+					},
+				},
+			],
+		},
+		domains: {
+			patterns: [
+				{
+					include: '#domain-cpp',
+				},
+				{
+					include: '#domain-py',
+				},
+				{
+					include: '#domain-auto',
+				},
+				{
+					include: '#domain-js',
+				},
+			],
+		},
+		'domain-cpp': {
+			begin: '^(\\s*)(\\.{2}\\s+(?:cpp|c):(?:class|struct|function|member|var|type|enum|enum-struct|enum-class|enumerator|union|concept)::)\\s*(?:(@\\w+)|(.*))',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'3': {
+					name: 'entity.name.tag',
+				},
+				'4': {
+					patterns: [
+						{
+							include: 'source.cpp',
+						},
+					],
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: '#body',
+				},
+			],
+		},
+		'domain-py': {
+			begin: '^(\\s*)(\\.{2}\\s+py:(?:module|function|data|exception|class|attribute|property|method|staticmethod|classmethod|decorator|decoratormethod)::)\\s*(.*)',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'3': {
+					patterns: [
+						{
+							include: 'source.python',
+						},
+					],
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: '#body',
+				},
+			],
+		},
+		'domain-auto': {
+			begin: '^(\\s*)(\\.{2}\\s+auto(?:class|module|exception|function|decorator|data|method|attribute|property)::)\\s*(.*)',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control.py',
+				},
+				'3': {
+					patterns: [
+						{
+							include: 'source.python',
+						},
+					],
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: '#body',
+				},
+			],
+		},
+		'domain-js': {
+			begin: '^(\\s*)(\\.{2}\\s+js:\\w+::)\\s*(.*)',
+			end: '^(?!\\1[ \\t]|$)',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'3': {
+					patterns: [
+						{
+							include: 'source.js',
+						},
+					],
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: '#body',
+				},
+			],
+		},
+		doctest: {
+			begin: '^(>>>)\\s*(.*)',
+			end: '^\\s*$',
+			beginCaptures: {
+				'1': {
+					name: 'keyword.control',
+				},
+				'2': {
+					patterns: [
+						{
+							include: 'source.python',
+						},
+					],
+				},
+			},
+		},
+		'code-block-cpp': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)\\s*(c|c\\+\\+|cpp|C|C\\+\\+|CPP|Cpp)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'4': {
+					name: 'variable.parameter.codeblock.cpp',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.cpp',
+				},
+			],
+		},
+		'code-block-console': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)\\s*(console|shell|bash)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'4': {
+					name: 'variable.parameter.codeblock.console',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.shell',
+				},
+			],
+		},
+		'code-block-py': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)\\s*(python)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'4': {
+					name: 'variable.parameter.codeblock.py',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.python',
+				},
+			],
+		},
+		'code-block-javascript': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)\\s*(javascript)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'4': {
+					name: 'variable.parameter.codeblock.js',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.js',
+				},
+			],
+		},
+		'code-block-yaml': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)\\s*(ya?ml)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'4': {
+					name: 'variable.parameter.codeblock.yaml',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.yaml',
+				},
+			],
+		},
+		'code-block-cmake': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)\\s*(cmake)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'4': {
+					name: 'variable.parameter.codeblock.cmake',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.cmake',
+				},
+			],
+		},
+		'code-block-kconfig': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)\\s*([kK]config)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'4': {
+					name: 'variable.parameter.codeblock.kconfig',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.kconfig',
+				},
+			],
+		},
+		'code-block-ruby': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)\\s*(ruby)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'4': {
+					name: 'variable.parameter.codeblock.ruby',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.ruby',
+				},
+			],
+		},
+		'code-block-dts': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)\\s*(dts|DTS|devicetree)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+				'4': {
+					name: 'variable.parameter.codeblock.dts',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.dts',
+				},
+			],
+		},
+		'code-block': {
+			begin: '^(\\s*)(\\.{2}\\s+(code|code-block)::)',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+			],
+		},
+		'doctest-block': {
+			begin: '^(\\s*)(\\.{2}\\s+doctest::)\\s*$',
+			while: '^\\1(?=\\s)|^\\s*$',
+			beginCaptures: {
+				'2': {
+					name: 'keyword.control',
+				},
+			},
+			patterns: [
+				{
+					include: '#block-param',
+				},
+				{
+					include: 'source.python',
+				},
+			],
+		},
+	},
+};

completions-sample-code/extension/src/panelShared/themes/abyss.ts

@@ -0,0 +1,343 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const abyss: ThemeRegistrationAny = {
+	type: 'dark',
+	colors: {
+		'activityBar.background': '#051336',
+		'badge.background': '#0063a5',
+		'button.background': '#2b3c5d',
+		'debugExceptionWidget.background': '#051336',
+		'debugExceptionWidget.border': '#ab395b',
+		'debugToolBar.background': '#051336',
+		'diffEditor.insertedTextBackground': '#31958a55',
+		'diffEditor.removedTextBackground': '#892f4688',
+		'dropdown.background': '#181f2f',
+		'editor.background': '#000c18',
+		'editor.findMatchHighlightBackground': '#eeeeee44',
+		'editor.foreground': '#6688cc',
+		'editor.lineHighlightBackground': '#082050',
+		'editor.selectionBackground': '#770811',
+		'editorCursor.foreground': '#ddbb88',
+		'editorGroup.border': '#2b2b4a',
+		'editorGroup.dropBackground': '#25375daa',
+		'editorGroupHeader.tabsBackground': '#1c1c2a',
+		'editorHoverWidget.background': '#000c38',
+		'editorHoverWidget.border': '#004c18',
+		'editorIndentGuide.activeBackground': '#204972',
+		'editorIndentGuide.background': '#002952',
+		'editorLineNumber.activeForeground': '#80a2c2',
+		'editorLineNumber.foreground': '#406385',
+		'editorLink.activeForeground': '#0063a5',
+		'editorMarkerNavigation.background': '#060621',
+		'editorMarkerNavigationError.background': '#ab395b',
+		'editorMarkerNavigationWarning.background': '#5b7e7a',
+		'editorWhitespace.foreground': '#103050',
+		'editorWidget.background': '#262641',
+		'extensionButton.prominentBackground': '#5f8b3b',
+		'extensionButton.prominentHoverBackground': '#5f8b3bbb',
+		focusBorder: '#596f99',
+		'input.background': '#181f2f',
+		'inputOption.activeBorder': '#1d4a87',
+		'inputValidation.errorBackground': '#a22d44',
+		'inputValidation.errorBorder': '#ab395b',
+		'inputValidation.infoBackground': '#051336',
+		'inputValidation.infoBorder': '#384078',
+		'inputValidation.warningBackground': '#5b7e7a',
+		'inputValidation.warningBorder': '#5b7e7a',
+		'list.activeSelectionBackground': '#08286b',
+		'list.dropBackground': '#041d52',
+		'list.highlightForeground': '#0063a5',
+		'list.hoverBackground': '#061940',
+		'list.inactiveSelectionBackground': '#152037',
+		'minimap.selectionHighlight': '#750000',
+		'panel.border': '#2b2b4a',
+		'peekView.border': '#2b2b4a',
+		'peekViewEditor.background': '#10192c',
+		'peekViewEditor.matchHighlightBackground': '#eeeeee33',
+		'peekViewResult.background': '#060621',
+		'peekViewResult.matchHighlightBackground': '#eeeeee44',
+		'peekViewTitle.background': '#10192c',
+		'pickerGroup.border': '#596f99',
+		'pickerGroup.foreground': '#596f99',
+		'ports.iconRunningProcessForeground': '#80a2c2',
+		'progressBar.background': '#0063a5',
+		'quickInputList.focusBackground': '#08286b',
+		'scrollbar.shadow': '#515e91aa',
+		'scrollbarSlider.activeBackground': '#3b3f5188',
+		'scrollbarSlider.background': '#1f2230aa',
+		'scrollbarSlider.hoverBackground': '#3b3f5188',
+		'sideBar.background': '#060621',
+		'sideBarSectionHeader.background': '#10192c',
+		'statusBar.background': '#10192c',
+		'statusBar.debuggingBackground': '#10192c',
+		'statusBar.noFolderBackground': '#10192c',
+		'statusBarItem.prominentBackground': '#0063a5',
+		'statusBarItem.prominentHoverBackground': '#0063a5dd',
+		'statusBarItem.remoteBackground': '#0063a5',
+		'tab.border': '#2b2b4a',
+		'tab.inactiveBackground': '#10192c',
+		'tab.lastPinnedBorder': '#2b3c5d',
+		'terminal.ansiBlack': '#111111',
+		'terminal.ansiBlue': '#bbdaff',
+		'terminal.ansiBrightBlack': '#333333',
+		'terminal.ansiBrightBlue': '#80baff',
+		'terminal.ansiBrightCyan': '#78ffff',
+		'terminal.ansiBrightGreen': '#b8f171',
+		'terminal.ansiBrightMagenta': '#d778ff',
+		'terminal.ansiBrightRed': '#ff7882',
+		'terminal.ansiBrightWhite': '#ffffff',
+		'terminal.ansiBrightYellow': '#ffe580',
+		'terminal.ansiCyan': '#99ffff',
+		'terminal.ansiGreen': '#d1f1a9',
+		'terminal.ansiMagenta': '#ebbbff',
+		'terminal.ansiRed': '#ff9da4',
+		'terminal.ansiWhite': '#cccccc',
+		'terminal.ansiYellow': '#ffeead',
+		'titleBar.activeBackground': '#10192c',
+	},
+	tokenColors: [
+		{
+			scope: ['meta.embedded', 'source.groovy.embedded', 'string meta.image.inline.markdown'],
+			settings: {
+				foreground: '#6688CC',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#384887',
+			},
+		},
+		{
+			scope: 'string',
+			settings: {
+				foreground: '#22AA44',
+			},
+		},
+		{
+			scope: 'constant.numeric',
+			settings: {
+				foreground: '#F280D0',
+			},
+		},
+		{
+			scope: 'constant.language',
+			settings: {
+				foreground: '#F280D0',
+			},
+		},
+		{
+			scope: ['constant.character', 'constant.other'],
+			settings: {
+				foreground: '#F280D0',
+			},
+		},
+		{
+			scope: 'variable',
+			settings: {
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#225588',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#225588',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'storage.type',
+			settings: {
+				foreground: '#9966B8',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: ['entity.name.class', 'entity.name.type', 'entity.name.namespace', 'entity.name.scope-resolution'],
+			settings: {
+				foreground: '#FFEEBB',
+				fontStyle: 'underline',
+			},
+		},
+		{
+			scope: 'entity.other.inherited-class',
+			settings: {
+				foreground: '#DDBB88',
+				fontStyle: 'italic underline',
+			},
+		},
+		{
+			scope: 'entity.name.function',
+			settings: {
+				foreground: '#DDBB88',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'variable.parameter',
+			settings: {
+				foreground: '#2277FF',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#225588',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name',
+			settings: {
+				foreground: '#DDBB88',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'support.function',
+			settings: {
+				foreground: '#9966B8',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'support.constant',
+			settings: {
+				foreground: '#9966B8',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: ['support.type', 'support.class'],
+			settings: {
+				foreground: '#9966B8',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'support.other.variable',
+			settings: {
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#A22D44',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'invalid.deprecated',
+			settings: {
+				foreground: '#A22D44',
+			},
+		},
+		{
+			scope: ['meta.diff', 'meta.diff.header'],
+			settings: {
+				foreground: '#E0EDDD',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#DC322F',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#CB4B16',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#219186',
+			},
+		},
+		{
+			scope: 'markup.quote',
+			settings: {
+				foreground: '#22AA44',
+			},
+		},
+		{
+			scope: ['markup.bold', 'markup.italic'],
+			settings: {
+				foreground: '#22AA44',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#9966B8',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: ['markup.heading', 'markup.heading.setext'],
+			settings: {
+				foreground: '#6688CC',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#B267E6',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/dark-hc.ts

@@ -0,0 +1,462 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const darkHC: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'dark',
+	colors: {
+		'actionBar.toggledBackground': '#383a49',
+		'editor.background': '#000000',
+		'editor.foreground': '#ffffff',
+		'editor.selectionBackground': '#ffffff',
+		'editorIndentGuide.activeBackground1': '#ffffff',
+		'editorIndentGuide.background1': '#ffffff',
+		'editorWhitespace.foreground': '#7c7c7c',
+		'ports.iconRunningProcessForeground': '#ffffff',
+		'selection.background': '#008000',
+		'sideBarTitle.foreground': '#ffffff',
+		'statusBarItem.remoteBackground': '#00000000',
+	},
+	tokenColors: [
+		{
+			scope: [
+				'meta.embedded',
+				'source.groovy.embedded',
+				'string meta.image.inline.markdown',
+				'variable.legacy.builtin.python',
+			],
+			settings: {
+				foreground: '#FFFFFF',
+			},
+		},
+		{
+			scope: 'emphasis',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'strong',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'meta.diff.header',
+			settings: {
+				foreground: '#000080',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#7CA668',
+			},
+		},
+		{
+			scope: 'constant.language',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: [
+				'constant.numeric',
+				'constant.other.color.rgb-value',
+				'constant.other.rgb-value',
+				'support.constant.color',
+			],
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'constant.regexp',
+			settings: {
+				foreground: '#B46695',
+			},
+		},
+		{
+			scope: 'constant.character',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'entity.name.tag.css',
+			settings: {
+				foreground: '#D7BA7D',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name',
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: [
+				'entity.other.attribute-name.class.css',
+				'entity.other.attribute-name.class.mixin.css',
+				'entity.other.attribute-name.id.css',
+				'entity.other.attribute-name.parent-selector.css',
+				'entity.other.attribute-name.pseudo-class.css',
+				'entity.other.attribute-name.pseudo-element.css',
+				'source.css.less entity.other.attribute-name.id',
+				'entity.other.attribute-name.scss',
+			],
+			settings: {
+				foreground: '#D7BA7D',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'markup.underline',
+			settings: {
+				fontStyle: 'underline',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.heading',
+			settings: {
+				foreground: '#6796E6',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: ['punctuation.definition.tag'],
+			settings: {
+				foreground: '#808080',
+			},
+		},
+		{
+			scope: 'meta.preprocessor',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.string',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.numeric',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'meta.structure.dictionary.key.python',
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'storage.type',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'storage.modifier',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'string',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'string.tag',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'string.value',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'string.regexp',
+			settings: {
+				foreground: '#D16969',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.template-expression.begin',
+				'punctuation.definition.template-expression.end',
+				'punctuation.section.embedded',
+			],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: ['meta.template.expression'],
+			settings: {
+				foreground: '#FFFFFF',
+			},
+		},
+		{
+			scope: [
+				'support.type.vendored.property-name',
+				'support.type.property-name',
+				'variable.css',
+				'variable.scss',
+				'variable.other.less',
+				'source.coffee.embedded',
+			],
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'keyword.control',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'keyword.operator',
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: [
+				'keyword.operator.new',
+				'keyword.operator.expression',
+				'keyword.operator.cast',
+				'keyword.operator.sizeof',
+				'keyword.operator.logical.python',
+			],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'keyword.other.unit',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'support.function.git-rebase',
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: 'constant.sha.git-rebase',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: ['storage.modifier.import.java', 'variable.language.wildcard.java', 'storage.modifier.package.java'],
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: 'variable.language.this',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: [
+				'entity.name.function',
+				'support.function',
+				'support.constant.handlebars',
+				'source.powershell variable.other.member',
+			],
+			settings: {
+				foreground: '#DCDCAA',
+			},
+		},
+		{
+			scope: [
+				'support.class',
+				'support.type',
+				'entity.name.type',
+				'entity.name.namespace',
+				'entity.name.scope-resolution',
+				'entity.name.class',
+				'storage.type.cs',
+				'storage.type.generic.cs',
+				'storage.type.modifier.cs',
+				'storage.type.variable.cs',
+				'storage.type.annotation.java',
+				'storage.type.generic.java',
+				'storage.type.java',
+				'storage.type.object.array.java',
+				'storage.type.primitive.array.java',
+				'storage.type.primitive.java',
+				'storage.type.token.java',
+				'storage.type.groovy',
+				'storage.type.annotation.groovy',
+				'storage.type.parameters.groovy',
+				'storage.type.generic.groovy',
+				'storage.type.object.array.groovy',
+				'storage.type.primitive.array.groovy',
+				'storage.type.primitive.groovy',
+			],
+			settings: {
+				foreground: '#4EC9B0',
+			},
+		},
+		{
+			scope: [
+				'meta.type.cast.expr',
+				'meta.type.new.expr',
+				'support.constant.math',
+				'support.constant.dom',
+				'support.constant.json',
+				'entity.other.inherited-class',
+			],
+			settings: {
+				foreground: '#4EC9B0',
+			},
+		},
+		{
+			scope: [
+				'keyword.control',
+				'source.cpp keyword.operator.new',
+				'source.cpp keyword.operator.delete',
+				'keyword.other.using',
+				'keyword.other.directive.using',
+				'keyword.other.operator',
+			],
+			settings: {
+				foreground: '#C586C0',
+			},
+		},
+		{
+			scope: ['variable', 'meta.definition.variable.name', 'support.variable'],
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: ['meta.object-literal.key'],
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: [
+				'support.constant.property-value',
+				'support.constant.font-name',
+				'support.constant.media-type',
+				'support.constant.media',
+				'constant.other.color.rgb-value',
+				'constant.other.rgb-value',
+				'support.constant.color',
+			],
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'meta.resultLinePrefix.contextLinePrefix.search',
+			settings: {
+				foreground: '#CBEDCB',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#008000',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#FF0000',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#B267E6',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/dark-modern.ts

@@ -0,0 +1,692 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const darkModern: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'dark',
+	colors: {
+		'actionBar.toggledBackground': '#383a49',
+		'activityBar.activeBorder': '#0078d4',
+		'activityBar.background': '#181818',
+		'activityBar.border': '#2b2b2b',
+		'activityBar.foreground': '#d7d7d7',
+		'activityBar.inactiveForeground': '#868686',
+		'activityBarBadge.background': '#0078d4',
+		'activityBarBadge.foreground': '#ffffff',
+		'badge.background': '#616161',
+		'badge.foreground': '#f8f8f8',
+		'button.background': '#0078d4',
+		'button.border': '#ffffff12',
+		'button.foreground': '#ffffff',
+		'button.hoverBackground': '#026ec1',
+		'button.secondaryBackground': '#313131',
+		'button.secondaryForeground': '#cccccc',
+		'button.secondaryHoverBackground': '#3c3c3c',
+		'chat.slashCommandBackground': '#34414b',
+		'chat.slashCommandForeground': '#40a6ff',
+		'checkbox.background': '#313131',
+		'checkbox.border': '#3c3c3c',
+		'debugToolBar.background': '#181818',
+		descriptionForeground: '#9d9d9d',
+		'dropdown.background': '#313131',
+		'dropdown.border': '#3c3c3c',
+		'dropdown.foreground': '#cccccc',
+		'dropdown.listBackground': '#1f1f1f',
+		'editor.background': '#1f1f1f',
+		'editor.findMatchBackground': '#9e6a03',
+		'editor.foreground': '#cccccc',
+		'editor.inactiveSelectionBackground': '#3a3d41',
+		'editor.selectionHighlightBackground': '#add6ff26',
+		'editorGroup.border': '#ffffff17',
+		'editorGroupHeader.tabsBackground': '#181818',
+		'editorGroupHeader.tabsBorder': '#2b2b2b',
+		'editorGutter.addedBackground': '#2ea043',
+		'editorGutter.deletedBackground': '#f85149',
+		'editorGutter.modifiedBackground': '#0078d4',
+		'editorIndentGuide.activeBackground1': '#707070',
+		'editorIndentGuide.background1': '#404040',
+		'editorLineNumber.activeForeground': '#cccccc',
+		'editorLineNumber.foreground': '#6e7681',
+		'editorOverviewRuler.border': '#010409',
+		'editorWidget.background': '#202020',
+		errorForeground: '#f85149',
+		focusBorder: '#0078d4',
+		foreground: '#cccccc',
+		'icon.foreground': '#cccccc',
+		'input.background': '#313131',
+		'input.border': '#3c3c3c',
+		'input.foreground': '#cccccc',
+		'input.placeholderForeground': '#818181',
+		'inputOption.activeBackground': '#2489db82',
+		'inputOption.activeBorder': '#2488db',
+		'keybindingLabel.foreground': '#cccccc',
+		'list.activeSelectionIconForeground': '#ffffff',
+		'list.dropBackground': '#383b3d',
+		'menu.background': '#1f1f1f',
+		'menu.border': '#454545',
+		'menu.foreground': '#cccccc',
+		'menu.separatorBackground': '#454545',
+		'notificationCenterHeader.background': '#1f1f1f',
+		'notificationCenterHeader.foreground': '#cccccc',
+		'notifications.background': '#1f1f1f',
+		'notifications.border': '#2b2b2b',
+		'notifications.foreground': '#cccccc',
+		'panel.background': '#181818',
+		'panel.border': '#2b2b2b',
+		'panelInput.border': '#2b2b2b',
+		'panelTitle.activeBorder': '#0078d4',
+		'panelTitle.activeForeground': '#cccccc',
+		'panelTitle.inactiveForeground': '#9d9d9d',
+		'peekViewEditor.background': '#1f1f1f',
+		'peekViewEditor.matchHighlightBackground': '#bb800966',
+		'peekViewResult.background': '#1f1f1f',
+		'peekViewResult.matchHighlightBackground': '#bb800966',
+		'pickerGroup.border': '#3c3c3c',
+		'ports.iconRunningProcessForeground': '#369432',
+		'progressBar.background': '#0078d4',
+		'quickInput.background': '#222222',
+		'quickInput.foreground': '#cccccc',
+		'settings.dropdownBackground': '#313131',
+		'settings.dropdownBorder': '#3c3c3c',
+		'settings.headerForeground': '#ffffff',
+		'settings.modifiedItemIndicator': '#bb800966',
+		'sideBar.background': '#181818',
+		'sideBar.border': '#2b2b2b',
+		'sideBar.foreground': '#cccccc',
+		'sideBarSectionHeader.background': '#181818',
+		'sideBarSectionHeader.border': '#2b2b2b',
+		'sideBarSectionHeader.foreground': '#cccccc',
+		'sideBarTitle.foreground': '#cccccc',
+		'statusBar.background': '#181818',
+		'statusBar.border': '#2b2b2b',
+		'statusBar.debuggingBackground': '#0078d4',
+		'statusBar.debuggingForeground': '#ffffff',
+		'statusBar.focusBorder': '#0078d4',
+		'statusBar.foreground': '#cccccc',
+		'statusBar.noFolderBackground': '#1f1f1f',
+		'statusBarItem.focusBorder': '#0078d4',
+		'statusBarItem.prominentBackground': '#6e768166',
+		'statusBarItem.remoteBackground': '#0078d4',
+		'statusBarItem.remoteForeground': '#ffffff',
+		'tab.activeBackground': '#1f1f1f',
+		'tab.activeBorder': '#1f1f1f',
+		'tab.activeBorderTop': '#0078d4',
+		'tab.activeForeground': '#ffffff',
+		'tab.border': '#2b2b2b',
+		'tab.hoverBackground': '#1f1f1f',
+		'tab.inactiveBackground': '#181818',
+		'tab.inactiveForeground': '#9d9d9d',
+		'tab.lastPinnedBorder': '#cccccc33',
+		'tab.unfocusedActiveBorder': '#1f1f1f',
+		'tab.unfocusedActiveBorderTop': '#2b2b2b',
+		'tab.unfocusedHoverBackground': '#1f1f1f',
+		'terminal.foreground': '#cccccc',
+		'terminal.inactiveSelectionBackground': '#3a3d41',
+		'terminal.tab.activeBorder': '#0078d4',
+		'textBlockQuote.background': '#2b2b2b',
+		'textBlockQuote.border': '#616161',
+		'textCodeBlock.background': '#2b2b2b',
+		'textLink.activeForeground': '#4daafc',
+		'textLink.foreground': '#4daafc',
+		'textPreformat.background': '#3c3c3c',
+		'textPreformat.foreground': '#d0d0d0',
+		'textSeparator.foreground': '#21262d',
+		'titleBar.activeBackground': '#181818',
+		'titleBar.activeForeground': '#cccccc',
+		'titleBar.border': '#2b2b2b',
+		'titleBar.inactiveBackground': '#1f1f1f',
+		'titleBar.inactiveForeground': '#9d9d9d',
+		'welcomePage.progress.foreground': '#0078d4',
+		'welcomePage.tileBackground': '#2b2b2b',
+		'widget.border': '#313131',
+	},
+	tokenColors: [
+		{
+			scope: [
+				'meta.embedded',
+				'source.groovy.embedded',
+				'string meta.image.inline.markdown',
+				'variable.legacy.builtin.python',
+			],
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: 'emphasis',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'strong',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'header',
+			settings: {
+				foreground: '#000080',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#6A9955',
+			},
+		},
+		{
+			scope: 'constant.language',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: [
+				'constant.numeric',
+				'variable.other.enummember',
+				'keyword.operator.plus.exponent',
+				'keyword.operator.minus.exponent',
+			],
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'constant.regexp',
+			settings: {
+				foreground: '#646695',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'entity.name.tag.css',
+			settings: {
+				foreground: '#D7BA7D',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name',
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: [
+				'entity.other.attribute-name.class.css',
+				'entity.other.attribute-name.class.mixin.css',
+				'entity.other.attribute-name.id.css',
+				'entity.other.attribute-name.parent-selector.css',
+				'entity.other.attribute-name.pseudo-class.css',
+				'entity.other.attribute-name.pseudo-element.css',
+				'source.css.less entity.other.attribute-name.id',
+				'entity.other.attribute-name.scss',
+			],
+			settings: {
+				foreground: '#D7BA7D',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'markup.underline',
+			settings: {
+				fontStyle: 'underline',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				foreground: '#569CD6',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.heading',
+			settings: {
+				foreground: '#569CD6',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'punctuation.definition.quote.begin.markdown',
+			settings: {
+				foreground: '#6A9955',
+			},
+		},
+		{
+			scope: 'punctuation.definition.list.begin.markdown',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'punctuation.definition.tag',
+			settings: {
+				foreground: '#808080',
+			},
+		},
+		{
+			scope: ['meta.preprocessor', 'entity.name.function.preprocessor'],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.string',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.numeric',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'meta.structure.dictionary.key.python',
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: 'meta.diff.header',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'storage.type',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: ['storage.modifier', 'keyword.operator.noexcept'],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: ['string', 'meta.embedded.assembly'],
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'string.tag',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'string.value',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'string.regexp',
+			settings: {
+				foreground: '#D16969',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.template-expression.begin',
+				'punctuation.definition.template-expression.end',
+				'punctuation.section.embedded',
+			],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: ['meta.template.expression'],
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: [
+				'support.type.vendored.property-name',
+				'support.type.property-name',
+				'variable.css',
+				'variable.scss',
+				'variable.other.less',
+				'source.coffee.embedded',
+			],
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'keyword.control',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'keyword.operator',
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: [
+				'keyword.operator.new',
+				'keyword.operator.expression',
+				'keyword.operator.cast',
+				'keyword.operator.sizeof',
+				'keyword.operator.alignof',
+				'keyword.operator.typeid',
+				'keyword.operator.alignas',
+				'keyword.operator.instanceof',
+				'keyword.operator.logical.python',
+				'keyword.operator.wordlike',
+			],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'keyword.other.unit',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: ['punctuation.section.embedded.begin.php', 'punctuation.section.embedded.end.php'],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'support.function.git-rebase',
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: 'constant.sha.git-rebase',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: ['storage.modifier.import.java', 'variable.language.wildcard.java', 'storage.modifier.package.java'],
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: 'variable.language',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: [
+				'entity.name.function',
+				'support.function',
+				'support.constant.handlebars',
+				'source.powershell variable.other.member',
+				'entity.name.operator.custom-literal',
+			],
+			settings: {
+				foreground: '#DCDCAA',
+			},
+		},
+		{
+			scope: [
+				'support.class',
+				'support.type',
+				'entity.name.type',
+				'entity.name.namespace',
+				'entity.other.attribute',
+				'entity.name.scope-resolution',
+				'entity.name.class',
+				'storage.type.numeric.go',
+				'storage.type.byte.go',
+				'storage.type.boolean.go',
+				'storage.type.string.go',
+				'storage.type.uintptr.go',
+				'storage.type.error.go',
+				'storage.type.rune.go',
+				'storage.type.cs',
+				'storage.type.generic.cs',
+				'storage.type.modifier.cs',
+				'storage.type.variable.cs',
+				'storage.type.annotation.java',
+				'storage.type.generic.java',
+				'storage.type.java',
+				'storage.type.object.array.java',
+				'storage.type.primitive.array.java',
+				'storage.type.primitive.java',
+				'storage.type.token.java',
+				'storage.type.groovy',
+				'storage.type.annotation.groovy',
+				'storage.type.parameters.groovy',
+				'storage.type.generic.groovy',
+				'storage.type.object.array.groovy',
+				'storage.type.primitive.array.groovy',
+				'storage.type.primitive.groovy',
+			],
+			settings: {
+				foreground: '#4EC9B0',
+			},
+		},
+		{
+			scope: [
+				'meta.type.cast.expr',
+				'meta.type.new.expr',
+				'support.constant.math',
+				'support.constant.dom',
+				'support.constant.json',
+				'entity.other.inherited-class',
+			],
+			settings: {
+				foreground: '#4EC9B0',
+			},
+		},
+		{
+			scope: [
+				'keyword.control',
+				'source.cpp keyword.operator.new',
+				'keyword.operator.delete',
+				'keyword.other.using',
+				'keyword.other.directive.using',
+				'keyword.other.operator',
+				'entity.name.operator',
+			],
+			settings: {
+				foreground: '#C586C0',
+			},
+		},
+		{
+			scope: [
+				'variable',
+				'meta.definition.variable.name',
+				'support.variable',
+				'entity.name.variable',
+				'constant.other.placeholder',
+			],
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: ['variable.other.constant', 'variable.other.enummember'],
+			settings: {
+				foreground: '#4FC1FF',
+			},
+		},
+		{
+			scope: ['meta.object-literal.key'],
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: [
+				'support.constant.property-value',
+				'support.constant.font-name',
+				'support.constant.media-type',
+				'support.constant.media',
+				'constant.other.color.rgb-value',
+				'constant.other.rgb-value',
+				'support.constant.color',
+			],
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.group.regexp',
+				'punctuation.definition.group.assertion.regexp',
+				'punctuation.definition.character-class.regexp',
+				'punctuation.character.set.begin.regexp',
+				'punctuation.character.set.end.regexp',
+				'keyword.operator.negation.regexp',
+				'support.other.parenthesis.regexp',
+			],
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: [
+				'constant.character.character-class.regexp',
+				'constant.other.character-class.set.regexp',
+				'constant.other.character-class.regexp',
+				'constant.character.set.regexp',
+			],
+			settings: {
+				foreground: '#D16969',
+			},
+		},
+		{
+			scope: ['keyword.operator.or.regexp', 'keyword.control.anchor.regexp'],
+			settings: {
+				foreground: '#DCDCAA',
+			},
+		},
+		{
+			scope: 'keyword.operator.quantifier.regexp',
+			settings: {
+				foreground: '#D7BA7D',
+			},
+		},
+		{
+			scope: ['constant.character', 'constant.other.option'],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'constant.character.escape',
+			settings: {
+				foreground: '#D7BA7D',
+			},
+		},
+		{
+			scope: 'entity.name.label',
+			settings: {
+				foreground: '#C8C8C8',
+			},
+		},
+		{
+			scope: 'ref.matchtext',
+			settings: {
+				foreground: '#FFFFFF',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#B267E6',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/index.ts

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+export { default as darkPlus } from 'shiki/themes/dark-plus.mjs';
+export { default as lightPlus } from 'shiki/themes/light-plus.mjs';
+export { default as monokai } from 'shiki/themes/monokai.mjs';
+export { default as solarizedDark } from 'shiki/themes/solarized-dark.mjs';
+export { default as solarizedLight } from 'shiki/themes/solarized-light.mjs';
+export { abyss } from './abyss';
+export { darkHC } from './dark-hc';
+export { darkModern } from './dark-modern';
+export { kimbieDark } from './kimbie-dark';
+export { lightHC } from './light-hc';
+export { lightModern } from './light-modern';
+export { monokaiDim } from './monokai-dim';
+export { quietLight } from './quiet-light';
+export { red } from './red';
+export { tomorrowNightBlue } from './tomorrow-night-blue';
+export { vsDark } from './vs-dark';
+export { vsLight } from './vs-light';

completions-sample-code/extension/src/panelShared/themes/kimbie-dark.ts

@@ -0,0 +1,374 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const kimbieDark: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'dark',
+	colors: {
+		'activityBar.background': '#221a0f',
+		'activityBar.foreground': '#d3af86',
+		'badge.background': '#7f5d38',
+		'button.background': '#6e583b',
+		'dropdown.background': '#51412c',
+		'editor.background': '#221a0f',
+		'editor.foreground': '#d3af86',
+		'editor.lineHighlightBackground': '#5e452b',
+		'editor.selectionBackground': '#84613daa',
+		'editorCursor.foreground': '#d3af86',
+		'editorGroupHeader.tabsBackground': '#131510',
+		'editorHoverWidget.background': '#221a14',
+		'editorLineNumber.activeForeground': '#adadad',
+		'editorWhitespace.foreground': '#a57a4c',
+		'editorWidget.background': '#131510',
+		focusBorder: '#a57a4c',
+		'input.background': '#51412c',
+		'inputOption.activeBorder': '#a57a4c',
+		'inputValidation.errorBackground': '#5f0d0d',
+		'inputValidation.errorBorder': '#9d2f23',
+		'inputValidation.infoBackground': '#2b2a42',
+		'inputValidation.infoBorder': '#1b60a5',
+		'inputValidation.warningBackground': '#51412c',
+		'list.activeSelectionBackground': '#7c5021',
+		'list.highlightForeground': '#e3b583',
+		'list.hoverBackground': '#7c502166',
+		'list.inactiveSelectionBackground': '#645342',
+		'menu.background': '#362712',
+		'menu.foreground': '#cccccc',
+		'minimap.selectionHighlight': '#84613daa',
+		'peekView.border': '#5e452b',
+		'peekViewEditor.background': '#221a14',
+		'peekViewEditor.matchHighlightBackground': '#84613daa',
+		'peekViewResult.background': '#362712',
+		'peekViewTitle.background': '#362712',
+		'pickerGroup.border': '#e3b583',
+		'pickerGroup.foreground': '#e3b583',
+		'ports.iconRunningProcessForeground': '#369432',
+		'progressBar.background': '#7f5d38',
+		'quickInputList.focusBackground': '#7c5021aa',
+		'selection.background': '#84613daa',
+		'sideBar.background': '#362712',
+		'statusBar.background': '#423523',
+		'statusBar.debuggingBackground': '#423523',
+		'statusBar.noFolderBackground': '#423523',
+		'statusBarItem.remoteBackground': '#6e583b',
+		'tab.inactiveBackground': '#131510',
+		'tab.lastPinnedBorder': '#51412c',
+		'titleBar.activeBackground': '#423523',
+	},
+	tokenColors: [
+		{
+			scope: [
+				'meta.embedded',
+				'source.groovy.embedded',
+				'string meta.image.inline.markdown',
+				'variable.legacy.builtin.python',
+			],
+			settings: {
+				foreground: '#D3AF86',
+			},
+		},
+		{
+			scope: 'variable.parameter.function',
+			settings: {
+				foreground: '#D3AF86',
+			},
+		},
+		{
+			scope: ['comment', 'punctuation.definition.comment'],
+			settings: {
+				foreground: '#A57A4C',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.string',
+				'punctuation.definition.variable',
+				'punctuation.definition.string',
+				'punctuation.definition.parameters',
+				'punctuation.definition.string',
+				'punctuation.definition.array',
+			],
+			settings: {
+				foreground: '#D3AF86',
+			},
+		},
+		{
+			scope: 'none',
+			settings: {
+				foreground: '#D3AF86',
+			},
+		},
+		{
+			scope: 'keyword.operator',
+			settings: {
+				foreground: '#D3AF86',
+			},
+		},
+		{
+			scope: [
+				'keyword',
+				'keyword.control',
+				'keyword.operator.new.cpp',
+				'keyword.operator.delete.cpp',
+				'keyword.other.using',
+				'keyword.other.directive.using',
+				'keyword.other.operator',
+			],
+			settings: {
+				foreground: '#98676A',
+			},
+		},
+		{
+			scope: 'variable',
+			settings: {
+				foreground: '#DC3958',
+			},
+		},
+		{
+			scope: ['entity.name.function', 'meta.require', 'support.function.any-method'],
+			settings: {
+				foreground: '#8AB1B0',
+			},
+		},
+		{
+			scope: [
+				'support.class',
+				'entity.name.class',
+				'entity.name.type',
+				'entity.name.namespace',
+				'entity.name.scope-resolution',
+			],
+			settings: {
+				foreground: '#F06431',
+			},
+		},
+		{
+			scope: 'keyword.other.special-method',
+			settings: {
+				foreground: '#8AB1B0',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#98676A',
+			},
+		},
+		{
+			scope: 'support.function',
+			settings: {
+				foreground: '#7E602C',
+			},
+		},
+		{
+			scope: ['string', 'constant.other.symbol', 'entity.other.inherited-class'],
+			settings: {
+				foreground: '#889B4A',
+			},
+		},
+		{
+			scope: 'constant.numeric',
+			settings: {
+				foreground: '#F79A32',
+			},
+		},
+		{
+			scope: 'none',
+			settings: {
+				foreground: '#F79A32',
+			},
+		},
+		{
+			scope: 'none',
+			settings: {
+				foreground: '#F79A32',
+			},
+		},
+		{
+			scope: 'constant',
+			settings: {
+				foreground: '#F79A32',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#DC3958',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name',
+			settings: {
+				foreground: '#F79A32',
+			},
+		},
+		{
+			scope: ['entity.other.attribute-name.id', 'punctuation.definition.entity'],
+			settings: {
+				foreground: '#8AB1B0',
+			},
+		},
+		{
+			scope: 'meta.selector',
+			settings: {
+				foreground: '#98676A',
+			},
+		},
+		{
+			scope: 'none',
+			settings: {
+				foreground: '#F79A32',
+			},
+		},
+		{
+			scope: ['markup.heading', 'markup.heading.setext', 'punctuation.definition.heading', 'entity.name.section'],
+			settings: {
+				foreground: '#8AB1B0',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'keyword.other.unit',
+			settings: {
+				foreground: '#F79A32',
+			},
+		},
+		{
+			scope: ['markup.bold', 'punctuation.definition.bold'],
+			settings: {
+				foreground: '#F06431',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: ['markup.italic', 'punctuation.definition.italic'],
+			settings: {
+				foreground: '#98676A',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#889B4A',
+			},
+		},
+		{
+			scope: 'string.other.link',
+			settings: {
+				foreground: '#DC3958',
+			},
+		},
+		{
+			scope: 'meta.link',
+			settings: {
+				foreground: '#F79A32',
+			},
+		},
+		{
+			scope: 'markup.list',
+			settings: {
+				foreground: '#DC3958',
+			},
+		},
+		{
+			scope: 'markup.quote',
+			settings: {
+				foreground: '#F79A32',
+			},
+		},
+		{
+			scope: 'meta.separator',
+			settings: {
+				foreground: '#D3AF86',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#889B4A',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#DC3958',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#98676A',
+			},
+		},
+		{
+			scope: 'constant.other.color',
+			settings: {
+				foreground: '#7E602C',
+			},
+		},
+		{
+			scope: 'string.regexp',
+			settings: {
+				foreground: '#7E602C',
+			},
+		},
+		{
+			scope: 'constant.character.escape',
+			settings: {
+				foreground: '#7E602C',
+			},
+		},
+		{
+			scope: ['punctuation.section.embedded', 'variable.interpolation'],
+			settings: {
+				foreground: '#088649',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#DC3958',
+			},
+		},
+		{
+			scope: 'ref.matchtext',
+			settings: {
+				foreground: '#FFFFFF',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#B267E6',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/light-hc.ts

@@ -0,0 +1,572 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const lightHC: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'light',
+	colors: {
+		'actionBar.toggledBackground': '#dddddd',
+	},
+	tokenColors: [
+		{
+			scope: ['meta.embedded', 'source.groovy.embedded', 'variable.legacy.builtin.python'],
+			settings: {
+				foreground: '#292929',
+			},
+		},
+		{
+			scope: 'emphasis',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'strong',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'meta.diff.header',
+			settings: {
+				foreground: '#062F4A',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#515151',
+			},
+		},
+		{
+			scope: 'constant.language',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: [
+				'constant.numeric',
+				'variable.other.enummember',
+				'keyword.operator.plus.exponent',
+				'keyword.operator.minus.exponent',
+			],
+			settings: {
+				foreground: '#096D48',
+			},
+		},
+		{
+			scope: 'constant.regexp',
+			settings: {
+				foreground: '#811F3F',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'entity.name.selector',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name',
+			settings: {
+				foreground: '#264F78',
+			},
+		},
+		{
+			scope: [
+				'entity.other.attribute-name.class.css',
+				'entity.other.attribute-name.class.mixin.css',
+				'entity.other.attribute-name.id.css',
+				'entity.other.attribute-name.parent-selector.css',
+				'entity.other.attribute-name.pseudo-class.css',
+				'entity.other.attribute-name.pseudo-element.css',
+				'source.css.less entity.other.attribute-name.id',
+				'entity.other.attribute-name.scss',
+			],
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#B5200D',
+			},
+		},
+		{
+			scope: 'markup.underline',
+			settings: {
+				fontStyle: 'underline',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				foreground: '#000080',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.heading',
+			settings: {
+				foreground: '#0F4A85',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#096D48',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#5A5A5A',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: ['punctuation.definition.quote.begin.markdown', 'punctuation.definition.list.begin.markdown'],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'punctuation.definition.tag',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: ['meta.preprocessor', 'entity.name.function.preprocessor'],
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.string',
+			settings: {
+				foreground: '#B5200D',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.numeric',
+			settings: {
+				foreground: '#096D48',
+			},
+		},
+		{
+			scope: 'meta.structure.dictionary.key.python',
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'storage.type',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: ['storage.modifier', 'keyword.operator.noexcept'],
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: ['string', 'meta.embedded.assembly'],
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: [
+				'string.comment.buffered.block.pug',
+				'string.quoted.pug',
+				'string.interpolated.pug',
+				'string.unquoted.plain.in.yaml',
+				'string.unquoted.plain.out.yaml',
+				'string.unquoted.block.yaml',
+				'string.quoted.single.yaml',
+				'string.quoted.double.xml',
+				'string.quoted.single.xml',
+				'string.unquoted.cdata.xml',
+				'string.quoted.double.html',
+				'string.quoted.single.html',
+				'string.unquoted.html',
+				'string.quoted.single.handlebars',
+				'string.quoted.double.handlebars',
+			],
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'string.regexp',
+			settings: {
+				foreground: '#811F3F',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.template-expression.begin',
+				'punctuation.definition.template-expression.end',
+				'punctuation.section.embedded',
+			],
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: ['meta.template.expression'],
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: [
+				'support.constant.property-value',
+				'support.constant.font-name',
+				'support.constant.media-type',
+				'support.constant.media',
+				'constant.other.color.rgb-value',
+				'constant.other.rgb-value',
+				'support.constant.color',
+			],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: [
+				'support.type.vendored.property-name',
+				'support.type.property-name',
+				'variable.css',
+				'variable.scss',
+				'variable.other.less',
+				'source.coffee.embedded',
+			],
+			settings: {
+				foreground: '#264F78',
+			},
+		},
+		{
+			scope: ['support.type.property-name.json'],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'keyword.control',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'keyword.operator',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: [
+				'keyword.operator.new',
+				'keyword.operator.expression',
+				'keyword.operator.cast',
+				'keyword.operator.sizeof',
+				'keyword.operator.alignof',
+				'keyword.operator.typeid',
+				'keyword.operator.alignas',
+				'keyword.operator.instanceof',
+				'keyword.operator.logical.python',
+				'keyword.operator.wordlike',
+			],
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'keyword.other.unit',
+			settings: {
+				foreground: '#096D48',
+			},
+		},
+		{
+			scope: ['punctuation.section.embedded.begin.php', 'punctuation.section.embedded.end.php'],
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'support.function.git-rebase',
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'constant.sha.git-rebase',
+			settings: {
+				foreground: '#096D48',
+			},
+		},
+		{
+			scope: ['storage.modifier.import.java', 'variable.language.wildcard.java', 'storage.modifier.package.java'],
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'variable.language',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: [
+				'entity.name.function',
+				'support.function',
+				'support.constant.handlebars',
+				'source.powershell variable.other.member',
+				'entity.name.operator.custom-literal',
+			],
+			settings: {
+				foreground: '#5E2CBC',
+			},
+		},
+		{
+			scope: [
+				'support.class',
+				'support.type',
+				'entity.name.type',
+				'entity.name.namespace',
+				'entity.other.attribute',
+				'entity.name.scope-resolution',
+				'entity.name.class',
+				'storage.type.numeric.go',
+				'storage.type.byte.go',
+				'storage.type.boolean.go',
+				'storage.type.string.go',
+				'storage.type.uintptr.go',
+				'storage.type.error.go',
+				'storage.type.rune.go',
+				'storage.type.cs',
+				'storage.type.generic.cs',
+				'storage.type.modifier.cs',
+				'storage.type.variable.cs',
+				'storage.type.annotation.java',
+				'storage.type.generic.java',
+				'storage.type.java',
+				'storage.type.object.array.java',
+				'storage.type.primitive.array.java',
+				'storage.type.primitive.java',
+				'storage.type.token.java',
+				'storage.type.groovy',
+				'storage.type.annotation.groovy',
+				'storage.type.parameters.groovy',
+				'storage.type.generic.groovy',
+				'storage.type.object.array.groovy',
+				'storage.type.primitive.array.groovy',
+				'storage.type.primitive.groovy',
+			],
+			settings: {
+				foreground: '#185E73',
+			},
+		},
+		{
+			scope: [
+				'meta.type.cast.expr',
+				'meta.type.new.expr',
+				'support.constant.math',
+				'support.constant.dom',
+				'support.constant.json',
+				'entity.other.inherited-class',
+			],
+			settings: {
+				foreground: '#185E73',
+			},
+		},
+		{
+			scope: [
+				'keyword.control',
+				'source.cpp keyword.operator.new',
+				'source.cpp keyword.operator.delete',
+				'keyword.other.using',
+				'keyword.other.directive.using',
+				'keyword.other.operator',
+				'entity.name.operator',
+			],
+			settings: {
+				foreground: '#B5200D',
+			},
+		},
+		{
+			scope: [
+				'variable',
+				'meta.definition.variable.name',
+				'support.variable',
+				'entity.name.variable',
+				'constant.other.placeholder',
+			],
+			settings: {
+				foreground: '#001080',
+			},
+		},
+		{
+			scope: ['variable.other.constant', 'variable.other.enummember'],
+			settings: {
+				foreground: '#02715D',
+			},
+		},
+		{
+			scope: ['meta.object-literal.key'],
+			settings: {
+				foreground: '#001080',
+			},
+		},
+		{
+			scope: [
+				'support.constant.property-value',
+				'support.constant.font-name',
+				'support.constant.media-type',
+				'support.constant.media',
+				'constant.other.color.rgb-value',
+				'constant.other.rgb-value',
+				'support.constant.color',
+			],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.group.regexp',
+				'punctuation.definition.group.assertion.regexp',
+				'punctuation.definition.character-class.regexp',
+				'punctuation.character.set.begin.regexp',
+				'punctuation.character.set.end.regexp',
+				'keyword.operator.negation.regexp',
+				'support.other.parenthesis.regexp',
+			],
+			settings: {
+				foreground: '#D16969',
+			},
+		},
+		{
+			scope: [
+				'constant.character.character-class.regexp',
+				'constant.other.character-class.set.regexp',
+				'constant.other.character-class.regexp',
+				'constant.character.set.regexp',
+			],
+			settings: {
+				foreground: '#811F3F',
+			},
+		},
+		{
+			scope: 'keyword.operator.quantifier.regexp',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: ['keyword.operator.or.regexp', 'keyword.control.anchor.regexp'],
+			settings: {
+				foreground: '#EE0000',
+			},
+		},
+		{
+			scope: 'constant.character',
+			settings: {
+				foreground: '#0F4A85',
+			},
+		},
+		{
+			scope: 'constant.character.escape',
+			settings: {
+				foreground: '#EE0000',
+			},
+		},
+		{
+			scope: 'entity.name.label',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#316BCD',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#CD3131',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#800080',
+			},
+		},
+		{
+			scope: 'ref.matchtext',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/light-modern.ts

@@ -0,0 +1,716 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const lightModern: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'light',
+	colors: {
+		'actionBar.toggledBackground': '#dddddd',
+		'activityBar.activeBorder': '#005fb8',
+		'activityBar.background': '#f8f8f8',
+		'activityBar.border': '#e5e5e5',
+		'activityBar.foreground': '#1f1f1f',
+		'activityBar.inactiveForeground': '#616161',
+		'activityBarBadge.background': '#005fb8',
+		'activityBarBadge.foreground': '#ffffff',
+		'badge.background': '#cccccc',
+		'badge.foreground': '#3b3b3b',
+		'button.background': '#005fb8',
+		'button.border': '#0000001a',
+		'button.foreground': '#ffffff',
+		'button.hoverBackground': '#0258a8',
+		'button.secondaryBackground': '#e5e5e5',
+		'button.secondaryForeground': '#3b3b3b',
+		'button.secondaryHoverBackground': '#cccccc',
+		'chat.slashCommandBackground': '#d2ecff',
+		'chat.slashCommandForeground': '#306ca2',
+		'checkbox.background': '#f8f8f8',
+		'checkbox.border': '#cecece',
+		descriptionForeground: '#3b3b3b',
+		'dropdown.background': '#ffffff',
+		'dropdown.border': '#cecece',
+		'dropdown.foreground': '#3b3b3b',
+		'dropdown.listBackground': '#ffffff',
+		'editor.background': '#ffffff',
+		'editor.foreground': '#3b3b3b',
+		'editor.inactiveSelectionBackground': '#e5ebf1',
+		'editor.selectionHighlightBackground': '#add6ff80',
+		'editorGroup.border': '#e5e5e5',
+		'editorGroupHeader.tabsBackground': '#f8f8f8',
+		'editorGroupHeader.tabsBorder': '#e5e5e5',
+		'editorGutter.addedBackground': '#2ea043',
+		'editorGutter.deletedBackground': '#f85149',
+		'editorGutter.modifiedBackground': '#005fb8',
+		'editorIndentGuide.activeBackground1': '#939393',
+		'editorIndentGuide.background1': '#d3d3d3',
+		'editorLineNumber.activeForeground': '#171184',
+		'editorLineNumber.foreground': '#6e7681',
+		'editorOverviewRuler.border': '#e5e5e5',
+		'editorSuggestWidget.background': '#f8f8f8',
+		'editorWidget.background': '#f8f8f8',
+		errorForeground: '#f85149',
+		focusBorder: '#005fb8',
+		foreground: '#3b3b3b',
+		'icon.foreground': '#3b3b3b',
+		'input.background': '#ffffff',
+		'input.border': '#cecece',
+		'input.foreground': '#3b3b3b',
+		'input.placeholderForeground': '#868686',
+		'inputOption.activeBackground': '#bed6ed',
+		'inputOption.activeBorder': '#005fb8',
+		'inputOption.activeForeground': '#000000',
+		'keybindingLabel.foreground': '#3b3b3b',
+		'list.activeSelectionBackground': '#e8e8e8',
+		'list.activeSelectionForeground': '#000000',
+		'list.activeSelectionIconForeground': '#000000',
+		'list.focusAndSelectionOutline': '#005fb8',
+		'list.hoverBackground': '#f2f2f2',
+		'menu.border': '#cecece',
+		'notebook.cellBorderColor': '#e5e5e5',
+		'notebook.selectedCellBackground': '#c8ddf150',
+		'notificationCenterHeader.background': '#ffffff',
+		'notificationCenterHeader.foreground': '#3b3b3b',
+		'notifications.background': '#ffffff',
+		'notifications.border': '#e5e5e5',
+		'notifications.foreground': '#3b3b3b',
+		'panel.background': '#f8f8f8',
+		'panel.border': '#e5e5e5',
+		'panelInput.border': '#e5e5e5',
+		'panelTitle.activeBorder': '#005fb8',
+		'panelTitle.activeForeground': '#3b3b3b',
+		'panelTitle.inactiveForeground': '#3b3b3b',
+		'peekViewEditor.matchHighlightBackground': '#bb800966',
+		'peekViewResult.background': '#ffffff',
+		'peekViewResult.matchHighlightBackground': '#bb800966',
+		'pickerGroup.border': '#e5e5e5',
+		'pickerGroup.foreground': '#8b949e',
+		'ports.iconRunningProcessForeground': '#369432',
+		'progressBar.background': '#005fb8',
+		'quickInput.background': '#f8f8f8',
+		'quickInput.foreground': '#3b3b3b',
+		'searchEditor.textInputBorder': '#cecece',
+		'settings.dropdownBackground': '#ffffff',
+		'settings.dropdownBorder': '#cecece',
+		'settings.headerForeground': '#1f1f1f',
+		'settings.modifiedItemIndicator': '#bb800966',
+		'settings.numberInputBorder': '#cecece',
+		'settings.textInputBorder': '#cecece',
+		'sideBar.background': '#f8f8f8',
+		'sideBar.border': '#e5e5e5',
+		'sideBar.foreground': '#3b3b3b',
+		'sideBarSectionHeader.background': '#f8f8f8',
+		'sideBarSectionHeader.border': '#e5e5e5',
+		'sideBarSectionHeader.foreground': '#3b3b3b',
+		'sideBarTitle.foreground': '#3b3b3b',
+		'statusBar.background': '#f8f8f8',
+		'statusBar.border': '#e5e5e5',
+		'statusBar.debuggingBackground': '#fd716c',
+		'statusBar.debuggingForeground': '#000000',
+		'statusBar.focusBorder': '#005fb8',
+		'statusBar.foreground': '#3b3b3b',
+		'statusBar.noFolderBackground': '#f8f8f8',
+		'statusBarItem.errorBackground': '#c72e0f',
+		'statusBarItem.focusBorder': '#005fb8',
+		'statusBarItem.prominentBackground': '#6e768166',
+		'statusBarItem.remoteBackground': '#005fb8',
+		'statusBarItem.remoteForeground': '#ffffff',
+		'tab.activeBackground': '#ffffff',
+		'tab.activeBorder': '#f8f8f8',
+		'tab.activeBorderTop': '#005fb8',
+		'tab.activeForeground': '#3b3b3b',
+		'tab.border': '#e5e5e5',
+		'tab.hoverBackground': '#ffffff',
+		'tab.inactiveBackground': '#f8f8f8',
+		'tab.inactiveForeground': '#868686',
+		'tab.lastPinnedBorder': '#d4d4d4',
+		'tab.unfocusedActiveBorder': '#f8f8f8',
+		'tab.unfocusedActiveBorderTop': '#e5e5e5',
+		'tab.unfocusedHoverBackground': '#f8f8f8',
+		'terminal.foreground': '#3b3b3b',
+		'terminal.inactiveSelectionBackground': '#e5ebf1',
+		'terminal.tab.activeBorder': '#005fb8',
+		'terminalCursor.foreground': '#005fb8',
+		'textBlockQuote.background': '#f8f8f8',
+		'textBlockQuote.border': '#e5e5e5',
+		'textCodeBlock.background': '#f8f8f8',
+		'textLink.activeForeground': '#005fb8',
+		'textLink.foreground': '#005fb8',
+		'textPreformat.background': '#0000001f',
+		'textPreformat.foreground': '#3b3b3b',
+		'textSeparator.foreground': '#21262d',
+		'titleBar.activeBackground': '#f8f8f8',
+		'titleBar.activeForeground': '#1e1e1e',
+		'titleBar.border': '#e5e5e5',
+		'titleBar.inactiveBackground': '#f8f8f8',
+		'titleBar.inactiveForeground': '#8b949e',
+		'welcomePage.tileBackground': '#f3f3f3',
+		'widget.border': '#e5e5e5',
+	},
+	tokenColors: [
+		{
+			scope: [
+				'meta.embedded',
+				'source.groovy.embedded',
+				'string meta.image.inline.markdown',
+				'variable.legacy.builtin.python',
+			],
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'emphasis',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'strong',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'meta.diff.header',
+			settings: {
+				foreground: '#000080',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#008000',
+			},
+		},
+		{
+			scope: 'constant.language',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: [
+				'constant.numeric',
+				'variable.other.enummember',
+				'keyword.operator.plus.exponent',
+				'keyword.operator.minus.exponent',
+			],
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: 'constant.regexp',
+			settings: {
+				foreground: '#811F3F',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'entity.name.selector',
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name',
+			settings: {
+				foreground: '#E50000',
+			},
+		},
+		{
+			scope: [
+				'entity.other.attribute-name.class.css',
+				'entity.other.attribute-name.class.mixin.css',
+				'entity.other.attribute-name.id.css',
+				'entity.other.attribute-name.parent-selector.css',
+				'entity.other.attribute-name.pseudo-class.css',
+				'entity.other.attribute-name.pseudo-element.css',
+				'source.css.less entity.other.attribute-name.id',
+				'entity.other.attribute-name.scss',
+			],
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#CD3131',
+			},
+		},
+		{
+			scope: 'markup.underline',
+			settings: {
+				fontStyle: 'underline',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				foreground: '#000080',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.heading',
+			settings: {
+				foreground: '#800000',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#A31515',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: ['punctuation.definition.quote.begin.markdown', 'punctuation.definition.list.begin.markdown'],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'punctuation.definition.tag',
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: ['meta.preprocessor', 'entity.name.function.preprocessor'],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.string',
+			settings: {
+				foreground: '#A31515',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.numeric',
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: 'meta.structure.dictionary.key.python',
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'storage.type',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: ['storage.modifier', 'keyword.operator.noexcept'],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: ['string', 'meta.embedded.assembly'],
+			settings: {
+				foreground: '#A31515',
+			},
+		},
+		{
+			scope: [
+				'string.comment.buffered.block.pug',
+				'string.quoted.pug',
+				'string.interpolated.pug',
+				'string.unquoted.plain.in.yaml',
+				'string.unquoted.plain.out.yaml',
+				'string.unquoted.block.yaml',
+				'string.quoted.single.yaml',
+				'string.quoted.double.xml',
+				'string.quoted.single.xml',
+				'string.unquoted.cdata.xml',
+				'string.quoted.double.html',
+				'string.quoted.single.html',
+				'string.unquoted.html',
+				'string.quoted.single.handlebars',
+				'string.quoted.double.handlebars',
+			],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'string.regexp',
+			settings: {
+				foreground: '#811F3F',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.template-expression.begin',
+				'punctuation.definition.template-expression.end',
+				'punctuation.section.embedded',
+			],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: ['meta.template.expression'],
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: [
+				'support.constant.property-value',
+				'support.constant.font-name',
+				'support.constant.media-type',
+				'support.constant.media',
+				'constant.other.color.rgb-value',
+				'constant.other.rgb-value',
+				'support.constant.color',
+			],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: [
+				'support.type.vendored.property-name',
+				'support.type.property-name',
+				'variable.css',
+				'variable.scss',
+				'variable.other.less',
+				'source.coffee.embedded',
+			],
+			settings: {
+				foreground: '#E50000',
+			},
+		},
+		{
+			scope: ['support.type.property-name.json'],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'keyword.control',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'keyword.operator',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: [
+				'keyword.operator.new',
+				'keyword.operator.expression',
+				'keyword.operator.cast',
+				'keyword.operator.sizeof',
+				'keyword.operator.alignof',
+				'keyword.operator.typeid',
+				'keyword.operator.alignas',
+				'keyword.operator.instanceof',
+				'keyword.operator.logical.python',
+				'keyword.operator.wordlike',
+			],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'keyword.other.unit',
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: ['punctuation.section.embedded.begin.php', 'punctuation.section.embedded.end.php'],
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'support.function.git-rebase',
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'constant.sha.git-rebase',
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: ['storage.modifier.import.java', 'variable.language.wildcard.java', 'storage.modifier.package.java'],
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'variable.language',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: [
+				'entity.name.function',
+				'support.function',
+				'support.constant.handlebars',
+				'source.powershell variable.other.member',
+				'entity.name.operator.custom-literal',
+			],
+			settings: {
+				foreground: '#795E26',
+			},
+		},
+		{
+			scope: [
+				'support.class',
+				'support.type',
+				'entity.name.type',
+				'entity.name.namespace',
+				'entity.other.attribute',
+				'entity.name.scope-resolution',
+				'entity.name.class',
+				'storage.type.numeric.go',
+				'storage.type.byte.go',
+				'storage.type.boolean.go',
+				'storage.type.string.go',
+				'storage.type.uintptr.go',
+				'storage.type.error.go',
+				'storage.type.rune.go',
+				'storage.type.cs',
+				'storage.type.generic.cs',
+				'storage.type.modifier.cs',
+				'storage.type.variable.cs',
+				'storage.type.annotation.java',
+				'storage.type.generic.java',
+				'storage.type.java',
+				'storage.type.object.array.java',
+				'storage.type.primitive.array.java',
+				'storage.type.primitive.java',
+				'storage.type.token.java',
+				'storage.type.groovy',
+				'storage.type.annotation.groovy',
+				'storage.type.parameters.groovy',
+				'storage.type.generic.groovy',
+				'storage.type.object.array.groovy',
+				'storage.type.primitive.array.groovy',
+				'storage.type.primitive.groovy',
+			],
+			settings: {
+				foreground: '#267F99',
+			},
+		},
+		{
+			scope: [
+				'meta.type.cast.expr',
+				'meta.type.new.expr',
+				'support.constant.math',
+				'support.constant.dom',
+				'support.constant.json',
+				'entity.other.inherited-class',
+			],
+			settings: {
+				foreground: '#267F99',
+			},
+		},
+		{
+			scope: [
+				'keyword.control',
+				'source.cpp keyword.operator.new',
+				'source.cpp keyword.operator.delete',
+				'keyword.other.using',
+				'keyword.other.directive.using',
+				'keyword.other.operator',
+				'entity.name.operator',
+			],
+			settings: {
+				foreground: '#AF00DB',
+			},
+		},
+		{
+			scope: [
+				'variable',
+				'meta.definition.variable.name',
+				'support.variable',
+				'entity.name.variable',
+				'constant.other.placeholder',
+			],
+			settings: {
+				foreground: '#001080',
+			},
+		},
+		{
+			scope: ['variable.other.constant', 'variable.other.enummember'],
+			settings: {
+				foreground: '#0070C1',
+			},
+		},
+		{
+			scope: ['meta.object-literal.key'],
+			settings: {
+				foreground: '#001080',
+			},
+		},
+		{
+			scope: [
+				'support.constant.property-value',
+				'support.constant.font-name',
+				'support.constant.media-type',
+				'support.constant.media',
+				'constant.other.color.rgb-value',
+				'constant.other.rgb-value',
+				'support.constant.color',
+			],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.group.regexp',
+				'punctuation.definition.group.assertion.regexp',
+				'punctuation.definition.character-class.regexp',
+				'punctuation.character.set.begin.regexp',
+				'punctuation.character.set.end.regexp',
+				'keyword.operator.negation.regexp',
+				'support.other.parenthesis.regexp',
+			],
+			settings: {
+				foreground: '#D16969',
+			},
+		},
+		{
+			scope: [
+				'constant.character.character-class.regexp',
+				'constant.other.character-class.set.regexp',
+				'constant.other.character-class.regexp',
+				'constant.character.set.regexp',
+			],
+			settings: {
+				foreground: '#811F3F',
+			},
+		},
+		{
+			scope: 'keyword.operator.quantifier.regexp',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: ['keyword.operator.or.regexp', 'keyword.control.anchor.regexp'],
+			settings: {
+				foreground: '#EE0000',
+			},
+		},
+		{
+			scope: ['constant.character', 'constant.other.option'],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'constant.character.escape',
+			settings: {
+				foreground: '#EE0000',
+			},
+		},
+		{
+			scope: 'entity.name.label',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'ref.matchtext',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#316BCD',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#CD3131',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#800080',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/monokai-dim.ts

@@ -0,0 +1,573 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const monokaiDim: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'dark',
+	colors: {
+		'activityBar.background': '#353535',
+		'activityBar.foreground': '#ffffff',
+		'activityBarBadge.background': '#3655b5',
+		'button.background': '#565656',
+		'dropdown.background': '#525252',
+		'editor.background': '#1e1e1e',
+		'editor.foreground': '#c5c8c6',
+		'editor.lineHighlightBackground': '#303030',
+		'editor.selectionBackground': '#676b7180',
+		'editor.selectionHighlightBackground': '#575b6180',
+		'editor.wordHighlightBackground': '#4747a180',
+		'editor.wordHighlightStrongBackground': '#6767ce80',
+		'editorCursor.foreground': '#c07020',
+		'editorGroupHeader.tabsBackground': '#282828',
+		'editorIndentGuide.activeBackground': '#707057',
+		'editorIndentGuide.background': '#505037',
+		'editorLineNumber.activeForeground': '#949494',
+		'editorWhitespace.foreground': '#505037',
+		focusBorder: '#3655b5',
+		'inputOption.activeBorder': '#3655b5',
+		'list.activeSelectionBackground': '#707070',
+		'list.highlightForeground': '#e58520',
+		'list.hoverBackground': '#444444',
+		'list.inactiveSelectionBackground': '#4e4e4e',
+		'menu.background': '#272727',
+		'menu.foreground': '#cccccc',
+		'minimap.selectionHighlight': '#676b7180',
+		'panelTitle.activeForeground': '#ffffff',
+		'peekView.border': '#3655b5',
+		'pickerGroup.foreground': '#b0b0b0',
+		'ports.iconRunningProcessForeground': '#cccccc',
+		'quickInputList.focusBackground': '#707070',
+		'sideBar.background': '#272727',
+		'sideBarSectionHeader.background': '#505050',
+		'statusBar.background': '#505050',
+		'statusBar.debuggingBackground': '#505050',
+		'statusBar.noFolderBackground': '#505050',
+		'statusBarItem.remoteBackground': '#3655b5',
+		'tab.border': '#303030',
+		'tab.inactiveBackground': '#404040',
+		'tab.inactiveForeground': '#d8d8d8',
+		'tab.lastPinnedBorder': '#505050',
+		'terminal.ansiBlack': '#1e1e1e',
+		'terminal.ansiBlue': '#6a7ec8',
+		'terminal.ansiBrightBlack': '#666666',
+		'terminal.ansiBrightBlue': '#819aff',
+		'terminal.ansiBrightCyan': '#66d9ef',
+		'terminal.ansiBrightGreen': '#a6e22e',
+		'terminal.ansiBrightMagenta': '#ae81ff',
+		'terminal.ansiBrightRed': '#f92672',
+		'terminal.ansiBrightWhite': '#f8f8f2',
+		'terminal.ansiBrightYellow': '#e2e22e',
+		'terminal.ansiCyan': '#56adbc',
+		'terminal.ansiGreen': '#86b42b',
+		'terminal.ansiMagenta': '#8c6bc8',
+		'terminal.ansiRed': '#c4265e',
+		'terminal.ansiWhite': '#e3e3dd',
+		'terminal.ansiYellow': '#b3b42b',
+		'terminal.inactiveSelectionBackground': '#676b7140',
+		'titleBar.activeBackground': '#505050',
+	},
+	tokenColors: [
+		{
+			scope: ['meta.embedded', 'source.groovy.embedded', 'variable.legacy.builtin.python'],
+			settings: {
+				foreground: '#C5C8C6',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#9A9B99',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'string',
+			settings: {
+				foreground: '#9AA83A',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'string source',
+			settings: {
+				foreground: '#D08442',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'constant.numeric',
+			settings: {
+				foreground: '#6089B4',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'constant.language',
+			settings: {
+				foreground: '#408080',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'constant.character, constant.other',
+			settings: {
+				foreground: '#8080FF',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#6089B4',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'support',
+			settings: {
+				foreground: '#C7444A',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#9872A2',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution',
+			settings: {
+				foreground: '#9B0000',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity.other.inherited-class',
+			settings: {
+				foreground: '#C7444A',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity.name.function',
+			settings: {
+				foreground: '#CE6700',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'variable.parameter',
+			settings: {
+				foreground: '#6089B4',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#9872A2',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name',
+			settings: {
+				foreground: '#9872A2',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'support.function',
+			settings: {
+				foreground: '#9872A2',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#676867',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'variable.other, variable.js, punctuation.separator.variable',
+			settings: {
+				foreground: '#6089B4',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html',
+			settings: {
+				foreground: '#008200',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#FF0B00',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'variable.other.php, variable.other.normal',
+			settings: {
+				foreground: '#6089B4',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.function-call.object',
+			settings: {
+				foreground: '#9872A2',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'variable.other.property',
+			settings: {
+				foreground: '#9872A2',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: [
+				'keyword.control',
+				'keyword.operator.new.cpp',
+				'keyword.operator.delete.cpp',
+				'keyword.other.using',
+				'keyword.other.directive.using',
+				'keyword.other.operator',
+			],
+			settings: {
+				foreground: '#9872A2',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.tag',
+			settings: {
+				foreground: '#D0B344',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#6089B4',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype',
+			settings: {
+				foreground: '#9AA83A',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.tag.inline source, text.html.php.source',
+			settings: {
+				foreground: '#9AA83A',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html',
+			settings: {
+				foreground: '#9872A2',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name, meta.tag punctuation.definition.string',
+			settings: {
+				foreground: '#D0B344',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.tag string -source -punctuation, text source text meta.tag string -punctuation',
+			settings: {
+				foreground: '#6089B4',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html',
+			settings: {
+				foreground: '#D0B344',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.toc-list.id',
+			settings: {
+				foreground: '#9AA83A',
+			},
+		},
+		{
+			scope: 'string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.end.html source, string.quoted.double.html source',
+			settings: {
+				foreground: '#9AA83A',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end',
+			settings: {
+				foreground: '#6089B4',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.selector.css entity.other.attribute-name.id',
+			settings: {
+				foreground: '#9872A2',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'support.type.property-name.css',
+			settings: {
+				foreground: '#676867',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css',
+			settings: {
+				foreground: '#C7444A',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'variable.language.js',
+			settings: {
+				foreground: '#CC555A',
+			},
+		},
+		{
+			scope: ['punctuation.definition.template-expression', 'punctuation.section.embedded.coffee'],
+			settings: {
+				foreground: '#D08442',
+			},
+		},
+		{
+			scope: ['meta.template.expression'],
+			settings: {
+				foreground: '#C5C8C6',
+			},
+		},
+		{
+			scope: 'meta.function-call.object.php',
+			settings: {
+				foreground: '#D0B344',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'punctuation.definition.string.end.php, punctuation.definition.string.begin.php',
+			settings: {
+				foreground: '#9AA83A',
+			},
+		},
+		{
+			scope: 'source.php.embedded.line.html',
+			settings: {
+				foreground: '#676867',
+			},
+		},
+		{
+			scope: 'punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php',
+			settings: {
+				foreground: '#D08442',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'constant.other.symbol.ruby',
+			settings: {
+				foreground: '#9AA83A',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'variable.language.ruby',
+			settings: {
+				foreground: '#D0B344',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'keyword.other.special-method.ruby',
+			settings: {
+				foreground: '#D9B700',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: ['punctuation.section.embedded.begin.ruby', 'punctuation.section.embedded.end.ruby'],
+			settings: {
+				foreground: '#D08442',
+			},
+		},
+		{
+			scope: 'keyword.other.DML.sql',
+			settings: {
+				foreground: '#D0B344',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.diff, meta.diff.header',
+			settings: {
+				foreground: '#E0EDDD',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#DC322F',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#CB4B16',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#219186',
+			},
+		},
+		{
+			scope: 'markup.quote',
+			settings: {
+				foreground: '#9872A2',
+			},
+		},
+		{
+			scope: 'markup.list',
+			settings: {
+				foreground: '#9AA83A',
+			},
+		},
+		{
+			scope: 'markup.bold, markup.italic',
+			settings: {
+				foreground: '#6089B4',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#FF0080',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'markup.heading',
+			settings: {
+				foreground: '#D0B344',
+			},
+		},
+		{
+			scope: 'markup.heading.setext',
+			settings: {
+				foreground: '#D0B344',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'markup.heading.markdown',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.quote.markdown',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.bold.markdown',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'string.other.link.title.markdown,string.other.link.description.markdown',
+			settings: {
+				foreground: '#AE81FF',
+			},
+		},
+		{
+			scope: 'markup.underline.link.markdown,markup.underline.link.image.markdown',
+			settings: {},
+		},
+		{
+			scope: 'markup.italic.markdown',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.list.unnumbered.markdown, markup.list.numbered.markdown',
+			settings: {},
+		},
+		{
+			scope: ['punctuation.definition.list.begin.markdown'],
+			settings: {},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#B267E6',
+			},
+		},
+		{
+			scope: 'variable.language',
+			settings: {
+				foreground: '#C7444A',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/quiet-light.ts

@@ -0,0 +1,465 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const quietLight: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'light',
+	colors: {
+		'activityBar.background': '#ededf5',
+		'activityBar.foreground': '#705697',
+		'activityBarBadge.background': '#705697',
+		'badge.background': '#705697aa',
+		'button.background': '#705697',
+		'dropdown.background': '#f5f5f5',
+		'editor.background': '#f5f5f5',
+		'editor.findMatchBackground': '#bf9cac',
+		'editor.findMatchHighlightBackground': '#edc9d899',
+		'editor.lineHighlightBackground': '#e4f6d4',
+		'editor.selectionBackground': '#c9d0d9',
+		'editorCursor.foreground': '#54494b',
+		'editorGroup.dropBackground': '#c9d0d988',
+		'editorIndentGuide.activeBackground': '#777777b0',
+		'editorIndentGuide.background': '#aaaaaa60',
+		'editorLineNumber.activeForeground': '#9769dc',
+		'editorLineNumber.foreground': '#6d705b',
+		'editorWhitespace.foreground': '#aaaaaa',
+		errorForeground: '#f1897f',
+		focusBorder: '#9769dc',
+		'inputOption.activeBorder': '#adafb7',
+		'inputValidation.errorBackground': '#ffeaea',
+		'inputValidation.errorBorder': '#f1897f',
+		'inputValidation.infoBackground': '#f2fcff',
+		'inputValidation.infoBorder': '#4ec1e5',
+		'inputValidation.warningBackground': '#fffee2',
+		'inputValidation.warningBorder': '#ffe055',
+		'list.activeSelectionBackground': '#c4d9b1',
+		'list.activeSelectionForeground': '#6c6c6c',
+		'list.highlightForeground': '#9769dc',
+		'list.hoverBackground': '#e0e0e0',
+		'list.inactiveSelectionBackground': '#d3dbcd',
+		'minimap.selectionHighlight': '#c9d0d9',
+		'panel.background': '#f5f5f5',
+		'peekView.border': '#705697',
+		'peekViewEditor.background': '#f2f8fc',
+		'peekViewEditor.matchHighlightBackground': '#c2dfe3',
+		'peekViewResult.background': '#f2f8fc',
+		'peekViewResult.matchHighlightBackground': '#93c6d6',
+		'peekViewTitle.background': '#f2f8fc',
+		'pickerGroup.border': '#749351',
+		'pickerGroup.foreground': '#a6b39b',
+		'ports.iconRunningProcessForeground': '#749351',
+		'progressBar.background': '#705697',
+		'quickInputList.focusBackground': '#cadeb9',
+		'selection.background': '#c9d0d9',
+		'sideBar.background': '#f2f2f2',
+		'sideBarSectionHeader.background': '#ede8ef',
+		'statusBar.background': '#705697',
+		'statusBar.debuggingBackground': '#705697',
+		'statusBar.noFolderBackground': '#705697',
+		'statusBarItem.remoteBackground': '#4e3c69',
+		'tab.lastPinnedBorder': '#c9d0d9',
+		'titleBar.activeBackground': '#c4b7d7',
+		'walkThrough.embeddedEditorBackground': '#00000014',
+		'welcomePage.tileBackground': '#f0f0f7',
+	},
+	tokenColors: [
+		{
+			scope: [
+				'meta.embedded',
+				'source.groovy.embedded',
+				'string meta.image.inline.markdown',
+				'variable.legacy.builtin.python',
+			],
+			settings: {
+				foreground: '#333333',
+			},
+		},
+		{
+			scope: ['comment', 'punctuation.definition.comment'],
+			settings: {
+				foreground: '#AAAAAA',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'comment.block.preprocessor',
+			settings: {
+				foreground: '#AAAAAA',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: [
+				'comment.documentation',
+				'comment.block.documentation',
+				'comment.block.documentation punctuation.definition.comment ',
+			],
+			settings: {
+				foreground: '#448C27',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#CD3131',
+			},
+		},
+		{
+			scope: 'invalid.illegal',
+			settings: {
+				foreground: '#660000',
+			},
+		},
+		{
+			scope: 'keyword.operator',
+			settings: {
+				foreground: '#777777',
+			},
+		},
+		{
+			scope: ['keyword', 'storage'],
+			settings: {
+				foreground: '#4B69C6',
+			},
+		},
+		{
+			scope: ['storage.type', 'support.type'],
+			settings: {
+				foreground: '#7A3E9D',
+			},
+		},
+		{
+			scope: ['constant.language', 'support.constant', 'variable.language'],
+			settings: {
+				foreground: '#9C5D27',
+			},
+		},
+		{
+			scope: ['variable', 'support.variable'],
+			settings: {
+				foreground: '#7A3E9D',
+			},
+		},
+		{
+			scope: ['entity.name.function', 'support.function'],
+			settings: {
+				foreground: '#AA3731',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: [
+				'entity.name.type',
+				'entity.name.namespace',
+				'entity.name.scope-resolution',
+				'entity.other.inherited-class',
+				'support.class',
+			],
+			settings: {
+				foreground: '#7A3E9D',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'entity.name.exception',
+			settings: {
+				foreground: '#660000',
+			},
+		},
+		{
+			scope: 'entity.name.section',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: ['constant.numeric', 'constant.character', 'constant'],
+			settings: {
+				foreground: '#9C5D27',
+			},
+		},
+		{
+			scope: 'string',
+			settings: {
+				foreground: '#448C27',
+			},
+		},
+		{
+			scope: 'constant.character.escape',
+			settings: {
+				foreground: '#777777',
+			},
+		},
+		{
+			scope: 'string.regexp',
+			settings: {
+				foreground: '#4B69C6',
+			},
+		},
+		{
+			scope: 'constant.other.symbol',
+			settings: {
+				foreground: '#9C5D27',
+			},
+		},
+		{
+			scope: 'punctuation',
+			settings: {
+				foreground: '#777777',
+			},
+		},
+		{
+			scope: [
+				'meta.tag.sgml.doctype',
+				'meta.tag.sgml.doctype string',
+				'meta.tag.sgml.doctype entity.name.tag',
+				'meta.tag.sgml punctuation.definition.tag.html',
+			],
+			settings: {
+				foreground: '#AAAAAA',
+			},
+		},
+		{
+			scope: [
+				'meta.tag',
+				'punctuation.definition.tag.html',
+				'punctuation.definition.tag.begin.html',
+				'punctuation.definition.tag.end.html',
+			],
+			settings: {
+				foreground: '#91B3E0',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#4B69C6',
+			},
+		},
+		{
+			scope: ['meta.tag entity.other.attribute-name', 'entity.other.attribute-name.html'],
+			settings: {
+				foreground: '#8190A0',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: ['constant.character.entity', 'punctuation.definition.entity'],
+			settings: {
+				foreground: '#9C5D27',
+			},
+		},
+		{
+			scope: ['meta.selector', 'meta.selector entity', 'meta.selector entity punctuation', 'entity.name.tag.css'],
+			settings: {
+				foreground: '#7A3E9D',
+			},
+		},
+		{
+			scope: ['meta.property-name', 'support.type.property-name'],
+			settings: {
+				foreground: '#9C5D27',
+			},
+		},
+		{
+			scope: ['meta.property-value', 'meta.property-value constant.other', 'support.constant.property-value'],
+			settings: {
+				foreground: '#448C27',
+			},
+		},
+		{
+			scope: 'keyword.other.important',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.error',
+			settings: {
+				foreground: '#660000',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'meta.link',
+			settings: {
+				foreground: '#4B69C6',
+			},
+		},
+		{
+			scope: ['markup.output', 'markup.raw'],
+			settings: {
+				foreground: '#777777',
+			},
+		},
+		{
+			scope: 'markup.prompt',
+			settings: {
+				foreground: '#777777',
+			},
+		},
+		{
+			scope: 'markup.heading',
+			settings: {
+				foreground: '#AA3731',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.traceback',
+			settings: {
+				foreground: '#660000',
+			},
+		},
+		{
+			scope: 'markup.underline',
+			settings: {
+				fontStyle: 'underline',
+			},
+		},
+		{
+			scope: 'markup.quote',
+			settings: {
+				foreground: '#7A3E9D',
+			},
+		},
+		{
+			scope: 'markup.list',
+			settings: {
+				foreground: '#4B69C6',
+			},
+		},
+		{
+			scope: ['markup.bold', 'markup.italic'],
+			settings: {
+				foreground: '#448C27',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#9C5D27',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: ['meta.diff.range', 'meta.diff.index', 'meta.separator'],
+			settings: {
+				foreground: '#434343',
+			},
+		},
+		{
+			scope: ['meta.diff.header.from-file', 'punctuation.definition.from-file.diff'],
+			settings: {
+				foreground: '#4B69C6',
+			},
+		},
+		{
+			scope: ['meta.diff.header.to-file', 'punctuation.definition.to-file.diff'],
+			settings: {
+				foreground: '#4B69C6',
+			},
+		},
+		{
+			scope: 'markup.deleted.diff',
+			settings: {
+				foreground: '#C73D20',
+			},
+		},
+		{
+			scope: 'markup.changed.diff',
+			settings: {
+				foreground: '#9C5D27',
+			},
+		},
+		{
+			scope: 'markup.inserted.diff',
+			settings: {
+				foreground: '#448C27',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.tag.js',
+				'punctuation.definition.tag.begin.js',
+				'punctuation.definition.tag.end.js',
+			],
+			settings: {
+				foreground: '#91B3E0',
+			},
+		},
+		{
+			scope: 'meta.jsx.children.js',
+			settings: {
+				foreground: '#333333',
+			},
+		},
+		{
+			scope: 'ref.matchtext',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#316BCD',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#CD3131',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#800080',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/red.ts

@@ -0,0 +1,376 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const red: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'dark',
+	colors: {
+		'activityBar.background': '#580000',
+		'badge.background': '#cc3333',
+		'button.background': '#883333',
+		'debugToolBar.background': '#660000',
+		'dropdown.background': '#580000',
+		'editor.background': '#390000',
+		'editor.foreground': '#f8f8f8',
+		'editor.hoverHighlightBackground': '#ff000044',
+		'editor.lineHighlightBackground': '#ff000033',
+		'editor.selectionBackground': '#750000',
+		'editor.selectionHighlightBackground': '#f5500039',
+		'editorCursor.foreground': '#970000',
+		'editorGroup.border': '#ff666633',
+		'editorGroupHeader.tabsBackground': '#330000',
+		'editorHoverWidget.background': '#300000',
+		'editorLineNumber.activeForeground': '#ffbbbb88',
+		'editorLineNumber.foreground': '#ff777788',
+		'editorLink.activeForeground': '#ffd0aa',
+		'editorSuggestWidget.background': '#300000',
+		'editorSuggestWidget.border': '#220000',
+		'editorWhitespace.foreground': '#c10000',
+		'editorWidget.background': '#300000',
+		errorForeground: '#ffeaea',
+		'extensionButton.prominentBackground': '#cc3333',
+		'extensionButton.prominentHoverBackground': '#cc333388',
+		focusBorder: '#ff6666aa',
+		'input.background': '#580000',
+		'inputOption.activeBorder': '#cc0000',
+		'inputValidation.infoBackground': '#550000',
+		'inputValidation.infoBorder': '#db7e58',
+		'list.activeSelectionBackground': '#880000',
+		'list.dropBackground': '#662222',
+		'list.highlightForeground': '#ff4444',
+		'list.hoverBackground': '#800000',
+		'list.inactiveSelectionBackground': '#770000',
+		'minimap.selectionHighlight': '#750000',
+		'peekView.border': '#ff000044',
+		'peekViewEditor.background': '#300000',
+		'peekViewResult.background': '#400000',
+		'peekViewTitle.background': '#550000',
+		'pickerGroup.border': '#ff000033',
+		'pickerGroup.foreground': '#cc9999',
+		'ports.iconRunningProcessForeground': '#db7e58',
+		'progressBar.background': '#cc3333',
+		'quickInputList.focusBackground': '#660000',
+		'selection.background': '#ff777788',
+		'sideBar.background': '#330000',
+		'statusBar.background': '#700000',
+		'statusBar.noFolderBackground': '#700000',
+		'statusBarItem.remoteBackground': '#cc3333',
+		'tab.activeBackground': '#490000',
+		'tab.inactiveBackground': '#300a0a',
+		'tab.lastPinnedBorder': '#ff000044',
+		'titleBar.activeBackground': '#770000',
+		'titleBar.inactiveBackground': '#772222',
+	},
+	tokenColors: [
+		{
+			scope: [
+				'meta.embedded',
+				'source.groovy.embedded',
+				'string meta.image.inline.markdown',
+				'variable.legacy.builtin.python',
+			],
+			settings: {
+				foreground: '#F8F8F8',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#E7C0C0',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'constant',
+			settings: {
+				foreground: '#994646',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#F12727',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity',
+			settings: {
+				foreground: '#FEC758',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#FF6262',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'string',
+			settings: {
+				foreground: '#CD8D8D',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'support',
+			settings: {
+				foreground: '#9DF39F',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'variable',
+			settings: {
+				foreground: '#FB9A4B',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#FFFFFF',
+			},
+		},
+		{
+			scope: 'entity.other.inherited-class',
+			settings: {
+				foreground: '#AA5507',
+				fontStyle: 'underline',
+			},
+		},
+		{
+			scope: 'constant.character',
+			settings: {
+				foreground: '#EC0D1E',
+			},
+		},
+		{
+			scope: ['string constant', 'constant.character.escape'],
+			settings: {
+				foreground: '#FFE862',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'string.regexp',
+			settings: {
+				foreground: '#FFB454',
+			},
+		},
+		{
+			scope: 'string variable',
+			settings: {
+				foreground: '#EDEF7D',
+			},
+		},
+		{
+			scope: 'support.function',
+			settings: {
+				foreground: '#FFB454',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: ['support.constant', 'support.variable'],
+			settings: {
+				foreground: '#EB939A',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: [
+				'declaration.sgml.html declaration.doctype',
+				'declaration.sgml.html declaration.doctype entity',
+				'declaration.sgml.html declaration.doctype string',
+				'declaration.xml-processing',
+				'declaration.xml-processing entity',
+				'declaration.xml-processing string',
+			],
+			settings: {
+				foreground: '#73817D',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: ['declaration.tag', 'declaration.tag entity', 'meta.tag', 'meta.tag entity'],
+			settings: {
+				foreground: '#EC0D1E',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.selector.css entity.name.tag',
+			settings: {
+				foreground: '#AA5507',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.selector.css entity.other.attribute-name.id',
+			settings: {
+				foreground: '#FEC758',
+			},
+		},
+		{
+			scope: 'meta.selector.css entity.other.attribute-name.class',
+			settings: {
+				foreground: '#41A83E',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'support.type.property-name.css',
+			settings: {
+				foreground: '#96DD3B',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: [
+				'meta.property-group support.constant.property-value.css',
+				'meta.property-value support.constant.property-value.css',
+			],
+			settings: {
+				foreground: '#FFE862',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: ['meta.property-value support.constant.named-color.css', 'meta.property-value constant'],
+			settings: {
+				foreground: '#FFE862',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.at-rule keyword.control.at-rule',
+			settings: {
+				foreground: '#FD6209',
+			},
+		},
+		{
+			scope: 'meta.constructor.argument.css',
+			settings: {
+				foreground: '#EC9799',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: ['meta.diff', 'meta.diff.header'],
+			settings: {
+				foreground: '#F8F8F8',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#EC9799',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#F8F8F8',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#41A83E',
+			},
+		},
+		{
+			scope: 'markup.quote',
+			settings: {
+				foreground: '#F12727',
+			},
+		},
+		{
+			scope: 'markup.list',
+			settings: {
+				foreground: '#FF6262',
+			},
+		},
+		{
+			scope: ['markup.bold', 'markup.italic'],
+			settings: {
+				foreground: '#FB9A4B',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#CD8D8D',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: ['markup.heading', 'markup.heading.setext', 'punctuation.definition.heading', 'entity.name.section'],
+			settings: {
+				foreground: '#FEC758',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.template-expression.begin',
+				'punctuation.definition.template-expression.end',
+				'punctuation.section.embedded',
+				'.format.placeholder',
+			],
+			settings: {
+				foreground: '#EC0D1E',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#B267E6',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/tomorrow-night-blue.ts

@@ -0,0 +1,265 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const tomorrowNightBlue: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'dark',
+	colors: {
+		'activityBar.background': '#001733',
+		'badge.background': '#bbdaffcc',
+		'badge.foreground': '#001733',
+		'debugToolBar.background': '#001c40',
+		'dropdown.background': '#001733',
+		'editor.background': '#002451',
+		'editor.foreground': '#ffffff',
+		'editor.lineHighlightBackground': '#00346e',
+		'editor.selectionBackground': '#003f8e',
+		'editorCursor.foreground': '#ffffff',
+		'editorGroup.border': '#404f7d',
+		'editorGroup.dropBackground': '#25375daa',
+		'editorGroupHeader.tabsBackground': '#001733',
+		'editorHoverWidget.background': '#001c40',
+		'editorHoverWidget.border': '#ffffff44',
+		'editorLineNumber.activeForeground': '#949494',
+		'editorWhitespace.foreground': '#404f7d',
+		'editorWidget.background': '#001c40',
+		errorForeground: '#a92049',
+		focusBorder: '#bbdaff',
+		'input.background': '#001733',
+		'list.activeSelectionBackground': '#ffffff60',
+		'list.highlightForeground': '#bbdaff',
+		'list.hoverBackground': '#ffffff30',
+		'list.inactiveSelectionBackground': '#ffffff40',
+		'minimap.selectionHighlight': '#003f8e',
+		'peekViewResult.background': '#001c40',
+		'pickerGroup.foreground': '#bbdaff',
+		'ports.iconRunningProcessForeground': '#bbdaff',
+		'progressBar.background': '#bbdaffcc',
+		'quickInputList.focusBackground': '#ffffff60',
+		'sideBar.background': '#001c40',
+		'statusBar.background': '#001126',
+		'statusBar.debuggingBackground': '#001126',
+		'statusBar.noFolderBackground': '#001126',
+		'statusBarItem.remoteBackground': '#0e639c',
+		'tab.inactiveBackground': '#001c40',
+		'tab.lastPinnedBorder': '#007acc80',
+		'terminal.ansiBlack': '#111111',
+		'terminal.ansiBlue': '#bbdaff',
+		'terminal.ansiBrightBlack': '#333333',
+		'terminal.ansiBrightBlue': '#80baff',
+		'terminal.ansiBrightCyan': '#78ffff',
+		'terminal.ansiBrightGreen': '#b8f171',
+		'terminal.ansiBrightMagenta': '#d778ff',
+		'terminal.ansiBrightRed': '#ff7882',
+		'terminal.ansiBrightWhite': '#ffffff',
+		'terminal.ansiBrightYellow': '#ffe580',
+		'terminal.ansiCyan': '#99ffff',
+		'terminal.ansiGreen': '#d1f1a9',
+		'terminal.ansiMagenta': '#ebbbff',
+		'terminal.ansiRed': '#ff9da4',
+		'terminal.ansiWhite': '#cccccc',
+		'terminal.ansiYellow': '#ffeead',
+		'titleBar.activeBackground': '#001126',
+	},
+	tokenColors: [
+		{
+			scope: [
+				'meta.embedded',
+				'source.groovy.embedded',
+				'meta.jsx.children',
+				'string meta.image.inline.markdown',
+				'variable.legacy.builtin.python',
+			],
+			settings: {
+				foreground: '#FFFFFF',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#7285B7',
+			},
+		},
+		{
+			scope: 'keyword.operator.class, keyword.operator, constant.other, source.php.embedded.line',
+			settings: {
+				foreground: '#FFFFFF',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter',
+			settings: {
+				foreground: '#FF9DA4',
+			},
+		},
+		{
+			scope: 'constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit',
+			settings: {
+				foreground: '#FFC58F',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution, support.type, support.class',
+			settings: {
+				foreground: '#FFEEAD',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'string, constant.other.symbol, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter',
+			settings: {
+				foreground: '#D1F1A9',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'keyword.operator, constant.other.color',
+			settings: {
+				foreground: '#99FFFF',
+			},
+		},
+		{
+			scope: 'entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter',
+			settings: {
+				foreground: '#BBDAFF',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'keyword, storage, storage.type, entity.name.tag.css',
+			settings: {
+				foreground: '#EBBBFF',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#A92049',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'meta.separator',
+			settings: {
+				foreground: '#FFFFFF',
+			},
+		},
+		{
+			scope: 'invalid.deprecated',
+			settings: {
+				foreground: '#CD9731',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'markup.inserted.diff, markup.deleted.diff, meta.diff.header.to-file, meta.diff.header.from-file',
+			settings: {
+				foreground: '#FFFFFF',
+			},
+		},
+		{
+			scope: 'markup.inserted.diff, meta.diff.header.to-file',
+			settings: {
+				foreground: '#718C00',
+			},
+		},
+		{
+			scope: 'markup.deleted.diff, meta.diff.header.from-file',
+			settings: {
+				foreground: '#C82829',
+			},
+		},
+		{
+			scope: 'meta.diff.header.from-file, meta.diff.header.to-file',
+			settings: {
+				foreground: '#4271AE',
+			},
+		},
+		{
+			scope: 'meta.diff.range',
+			settings: {
+				foreground: '#3E999F',
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.quote',
+			settings: {
+				foreground: '#FFC58F',
+			},
+		},
+		{
+			scope: 'markup.list',
+			settings: {
+				foreground: '#BBDAFF',
+			},
+		},
+		{
+			scope: 'markup.bold, markup.italic',
+			settings: {
+				foreground: '#FFC58F',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#FF9DA4',
+				fontStyle: '',
+			},
+		},
+		{
+			scope: 'markup.heading',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#B267E6',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/vs-dark.ts

@@ -0,0 +1,412 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const vsDark: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'dark',
+	colors: {
+		'actionBar.toggledBackground': '#383a49',
+		'activityBarBadge.background': '#007acc',
+		'checkbox.border': '#6b6b6b',
+		'editor.background': '#1e1e1e',
+		'editor.foreground': '#d4d4d4',
+		'editor.inactiveSelectionBackground': '#3a3d41',
+		'editor.selectionHighlightBackground': '#add6ff26',
+		'editorIndentGuide.activeBackground1': '#707070',
+		'editorIndentGuide.background1': '#404040',
+		'input.placeholderForeground': '#a6a6a6',
+		'list.activeSelectionIconForeground': '#ffffff',
+		'list.dropBackground': '#383b3d',
+		'menu.background': '#252526',
+		'menu.border': '#454545',
+		'menu.foreground': '#cccccc',
+		'menu.separatorBackground': '#454545',
+		'ports.iconRunningProcessForeground': '#369432',
+		'sideBarSectionHeader.background': '#00000000',
+		'sideBarSectionHeader.border': '#cccccc33',
+		'sideBarTitle.foreground': '#bbbbbb',
+		'statusBarItem.remoteBackground': '#16825d',
+		'statusBarItem.remoteForeground': '#ffffff',
+		'tab.lastPinnedBorder': '#cccccc33',
+		'terminal.inactiveSelectionBackground': '#3a3d41',
+		'widget.border': '#303031',
+	},
+	tokenColors: [
+		{
+			scope: [
+				'meta.embedded',
+				'source.groovy.embedded',
+				'string meta.image.inline.markdown',
+				'variable.legacy.builtin.python',
+			],
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: 'emphasis',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'strong',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'header',
+			settings: {
+				foreground: '#000080',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#6A9955',
+			},
+		},
+		{
+			scope: 'constant.language',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: [
+				'constant.numeric',
+				'variable.other.enummember',
+				'keyword.operator.plus.exponent',
+				'keyword.operator.minus.exponent',
+			],
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'constant.regexp',
+			settings: {
+				foreground: '#646695',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'entity.name.tag.css',
+			settings: {
+				foreground: '#D7BA7D',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name',
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: [
+				'entity.other.attribute-name.class.css',
+				'entity.other.attribute-name.class.mixin.css',
+				'entity.other.attribute-name.id.css',
+				'entity.other.attribute-name.parent-selector.css',
+				'entity.other.attribute-name.pseudo-class.css',
+				'entity.other.attribute-name.pseudo-element.css',
+				'source.css.less entity.other.attribute-name.id',
+				'entity.other.attribute-name.scss',
+			],
+			settings: {
+				foreground: '#D7BA7D',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'markup.underline',
+			settings: {
+				fontStyle: 'underline',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				foreground: '#569CD6',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.heading',
+			settings: {
+				foreground: '#569CD6',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'punctuation.definition.quote.begin.markdown',
+			settings: {
+				foreground: '#6A9955',
+			},
+		},
+		{
+			scope: 'punctuation.definition.list.begin.markdown',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'punctuation.definition.tag',
+			settings: {
+				foreground: '#808080',
+			},
+		},
+		{
+			scope: ['meta.preprocessor', 'entity.name.function.preprocessor'],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.string',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.numeric',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: 'meta.structure.dictionary.key.python',
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: 'meta.diff.header',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'storage.type',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: ['storage.modifier', 'keyword.operator.noexcept'],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: ['string', 'meta.embedded.assembly'],
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'string.tag',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'string.value',
+			settings: {
+				foreground: '#CE9178',
+			},
+		},
+		{
+			scope: 'string.regexp',
+			settings: {
+				foreground: '#D16969',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.template-expression.begin',
+				'punctuation.definition.template-expression.end',
+				'punctuation.section.embedded',
+			],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: ['meta.template.expression'],
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: [
+				'support.type.vendored.property-name',
+				'support.type.property-name',
+				'variable.css',
+				'variable.scss',
+				'variable.other.less',
+				'source.coffee.embedded',
+			],
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'keyword.control',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'keyword.operator',
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: [
+				'keyword.operator.new',
+				'keyword.operator.expression',
+				'keyword.operator.cast',
+				'keyword.operator.sizeof',
+				'keyword.operator.alignof',
+				'keyword.operator.typeid',
+				'keyword.operator.alignas',
+				'keyword.operator.instanceof',
+				'keyword.operator.logical.python',
+				'keyword.operator.wordlike',
+			],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'keyword.other.unit',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: ['punctuation.section.embedded.begin.php', 'punctuation.section.embedded.end.php'],
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'support.function.git-rebase',
+			settings: {
+				foreground: '#9CDCFE',
+			},
+		},
+		{
+			scope: 'constant.sha.git-rebase',
+			settings: {
+				foreground: '#B5CEA8',
+			},
+		},
+		{
+			scope: ['storage.modifier.import.java', 'variable.language.wildcard.java', 'storage.modifier.package.java'],
+			settings: {
+				foreground: '#D4D4D4',
+			},
+		},
+		{
+			scope: 'variable.language',
+			settings: {
+				foreground: '#569CD6',
+			},
+		},
+		{
+			scope: 'ref.matchtext',
+			settings: {
+				foreground: '#FFFFFF',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#6796E6',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#F44747',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#B267E6',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/themes/vs-light.ts

@@ -0,0 +1,435 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeRegistrationAny } from 'shiki';
+
+export const vsLight: ThemeRegistrationAny = {
+	$schema: 'vscode://schemas/color-theme',
+	type: 'light',
+	colors: {
+		'actionBar.toggledBackground': '#dddddd',
+		'activityBarBadge.background': '#007acc',
+		'checkbox.border': '#919191',
+		'editor.background': '#ffffff',
+		'editor.foreground': '#000000',
+		'editor.inactiveSelectionBackground': '#e5ebf1',
+		'editor.selectionHighlightBackground': '#add6ff80',
+		'editorIndentGuide.activeBackground1': '#939393',
+		'editorIndentGuide.background1': '#d3d3d3',
+		'editorSuggestWidget.background': '#f3f3f3',
+		'input.placeholderForeground': '#767676',
+		'list.activeSelectionIconForeground': '#ffffff',
+		'list.focusAndSelectionOutline': '#90c2f9',
+		'list.hoverBackground': '#e8e8e8',
+		'menu.border': '#d4d4d4',
+		'notebook.cellBorderColor': '#e8e8e8',
+		'notebook.selectedCellBackground': '#c8ddf150',
+		'ports.iconRunningProcessForeground': '#369432',
+		'searchEditor.textInputBorder': '#cecece',
+		'settings.numberInputBorder': '#cecece',
+		'settings.textInputBorder': '#cecece',
+		'sideBarSectionHeader.background': '#00000000',
+		'sideBarSectionHeader.border': '#61616130',
+		'sideBarTitle.foreground': '#6f6f6f',
+		'statusBarItem.errorBackground': '#c72e0f',
+		'statusBarItem.remoteBackground': '#16825d',
+		'statusBarItem.remoteForeground': '#ffffff',
+		'tab.lastPinnedBorder': '#61616130',
+		'terminal.inactiveSelectionBackground': '#e5ebf1',
+		'widget.border': '#d4d4d4',
+	},
+	tokenColors: [
+		{
+			scope: [
+				'meta.embedded',
+				'source.groovy.embedded',
+				'string meta.image.inline.markdown',
+				'variable.legacy.builtin.python',
+			],
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'emphasis',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'strong',
+			settings: {
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'meta.diff.header',
+			settings: {
+				foreground: '#000080',
+			},
+		},
+		{
+			scope: 'comment',
+			settings: {
+				foreground: '#008000',
+			},
+		},
+		{
+			scope: 'constant.language',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: [
+				'constant.numeric',
+				'variable.other.enummember',
+				'keyword.operator.plus.exponent',
+				'keyword.operator.minus.exponent',
+			],
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: 'constant.regexp',
+			settings: {
+				foreground: '#811F3F',
+			},
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'entity.name.selector',
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'entity.other.attribute-name',
+			settings: {
+				foreground: '#E50000',
+			},
+		},
+		{
+			scope: [
+				'entity.other.attribute-name.class.css',
+				'entity.other.attribute-name.class.mixin.css',
+				'entity.other.attribute-name.id.css',
+				'entity.other.attribute-name.parent-selector.css',
+				'entity.other.attribute-name.pseudo-class.css',
+				'entity.other.attribute-name.pseudo-element.css',
+				'source.css.less entity.other.attribute-name.id',
+				'entity.other.attribute-name.scss',
+			],
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'invalid',
+			settings: {
+				foreground: '#CD3131',
+			},
+		},
+		{
+			scope: 'markup.underline',
+			settings: {
+				fontStyle: 'underline',
+			},
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				foreground: '#000080',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.heading',
+			settings: {
+				foreground: '#800000',
+				fontStyle: 'bold',
+			},
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+			},
+		},
+		{
+			scope: 'markup.strikethrough',
+			settings: {
+				fontStyle: 'strikethrough',
+			},
+		},
+		{
+			scope: 'markup.inserted',
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: 'markup.deleted',
+			settings: {
+				foreground: '#A31515',
+			},
+		},
+		{
+			scope: 'markup.changed',
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: ['punctuation.definition.quote.begin.markdown', 'punctuation.definition.list.begin.markdown'],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'punctuation.definition.tag',
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: ['meta.preprocessor', 'entity.name.function.preprocessor'],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.string',
+			settings: {
+				foreground: '#A31515',
+			},
+		},
+		{
+			scope: 'meta.preprocessor.numeric',
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: 'meta.structure.dictionary.key.python',
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'storage',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'storage.type',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: ['storage.modifier', 'keyword.operator.noexcept'],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: ['string', 'meta.embedded.assembly'],
+			settings: {
+				foreground: '#A31515',
+			},
+		},
+		{
+			scope: [
+				'string.comment.buffered.block.pug',
+				'string.quoted.pug',
+				'string.interpolated.pug',
+				'string.unquoted.plain.in.yaml',
+				'string.unquoted.plain.out.yaml',
+				'string.unquoted.block.yaml',
+				'string.quoted.single.yaml',
+				'string.quoted.double.xml',
+				'string.quoted.single.xml',
+				'string.unquoted.cdata.xml',
+				'string.quoted.double.html',
+				'string.quoted.single.html',
+				'string.unquoted.html',
+				'string.quoted.single.handlebars',
+				'string.quoted.double.handlebars',
+			],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'string.regexp',
+			settings: {
+				foreground: '#811F3F',
+			},
+		},
+		{
+			scope: [
+				'punctuation.definition.template-expression.begin',
+				'punctuation.definition.template-expression.end',
+				'punctuation.section.embedded',
+			],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: ['meta.template.expression'],
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: [
+				'support.constant.property-value',
+				'support.constant.font-name',
+				'support.constant.media-type',
+				'support.constant.media',
+				'constant.other.color.rgb-value',
+				'constant.other.rgb-value',
+				'support.constant.color',
+			],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: [
+				'support.type.vendored.property-name',
+				'support.type.property-name',
+				'variable.css',
+				'variable.scss',
+				'variable.other.less',
+				'source.coffee.embedded',
+			],
+			settings: {
+				foreground: '#E50000',
+			},
+		},
+		{
+			scope: ['support.type.property-name.json'],
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'keyword',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'keyword.control',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'keyword.operator',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: [
+				'keyword.operator.new',
+				'keyword.operator.expression',
+				'keyword.operator.cast',
+				'keyword.operator.sizeof',
+				'keyword.operator.alignof',
+				'keyword.operator.typeid',
+				'keyword.operator.alignas',
+				'keyword.operator.instanceof',
+				'keyword.operator.logical.python',
+				'keyword.operator.wordlike',
+			],
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'keyword.other.unit',
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: ['punctuation.section.embedded.begin.php', 'punctuation.section.embedded.end.php'],
+			settings: {
+				foreground: '#800000',
+			},
+		},
+		{
+			scope: 'support.function.git-rebase',
+			settings: {
+				foreground: '#0451A5',
+			},
+		},
+		{
+			scope: 'constant.sha.git-rebase',
+			settings: {
+				foreground: '#098658',
+			},
+		},
+		{
+			scope: ['storage.modifier.import.java', 'variable.language.wildcard.java', 'storage.modifier.package.java'],
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'variable.language',
+			settings: {
+				foreground: '#0000FF',
+			},
+		},
+		{
+			scope: 'ref.matchtext',
+			settings: {
+				foreground: '#000000',
+			},
+		},
+		{
+			scope: 'token.info-token',
+			settings: {
+				foreground: '#316BCD',
+			},
+		},
+		{
+			scope: 'token.warn-token',
+			settings: {
+				foreground: '#CD9731',
+			},
+		},
+		{
+			scope: 'token.error-token',
+			settings: {
+				foreground: '#CD3131',
+			},
+		},
+		{
+			scope: 'token.debug-token',
+			settings: {
+				foreground: '#800080',
+			},
+		},
+	],
+};

completions-sample-code/extension/src/panelShared/utils.ts

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export function getNonce() {
+	let text = '';
+	const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	for (let i = 0; i < 32; i++) {
+		text += possible.charAt(Math.floor(Math.random() * possible.length));
+	}
+	return text;
+}
+
+export function pluralize(count: number, noun: string, suffix = 's') {
+	return `${count} ${noun}${count !== 1 ? suffix : ''}`;
+}