@vscode/webview-themes 0.0.0-stage → 0.0.2-1

package/dist/extractor/probe.cjs

@@ -0,0 +1,201 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.run = run;
+const vscode = __importStar(require("vscode"));
+const node_crypto_1 = require("node:crypto");
+const promises_1 = require("node:fs/promises");
+const node_path_1 = require("node:path");
+async function run() {
+    const { object, text, parseCatalog } = await import('../schema.js');
+    const request = object(JSON.parse(process.env.WEBVIEW_THEME_REQUEST ?? 'null'), 'extraction request');
+    if (!Array.isArray(request.themes) || !request.themes.every(id => typeof id === 'string')) {
+        throw new Error('Expected requested theme IDs');
+    }
+    if (!Array.isArray(request.extensions) || !request.extensions.every(id => typeof id === 'string')) {
+        throw new Error('Expected requested extension IDs');
+    }
+    const available = [];
+    const extensions = [];
+    for (const extension of vscode.extensions.all) {
+        const manifest = object(extension.packageJSON, 'extension manifest');
+        if (!manifest.contributes) {
+            continue;
+        }
+        const contributes = object(manifest.contributes, 'contributes');
+        if (!contributes.themes && !contributes.colors) {
+            continue;
+        }
+        extensions.push({ id: extension.id, version: text(manifest.version, `${extension.id}.version`) });
+        if (contributes.themes) {
+            if (!Array.isArray(contributes.themes)) {
+                throw new Error(`${extension.id}: expected themes array`);
+            }
+            for (const value of contributes.themes) {
+                const theme = object(value, 'theme contribution');
+                const kind = kindFromUiTheme(theme.uiTheme);
+                available.push({
+                    id: text(theme.id ?? theme.label, 'theme ID'), kind,
+                    extensionId: extension.id,
+                    themePath: text(theme.path, 'theme path'),
+                });
+            }
+        }
+    }
+    available.sort((a, b) => compare(a.id, b.id));
+    extensions.sort((a, b) => compare(a.id, b.id));
+    for (const id of request.extensions) {
+        if (!extensions.some(extension => extension.id.toLowerCase() === id)) {
+            throw new Error(`VS Code did not load the requested theme/color extension ${id}`);
+        }
+    }
+    if (new Set(available.map(theme => theme.id)).size !== available.length) {
+        throw new Error('Multiple installed themes have the same settings ID');
+    }
+    const selected = request.themes.length ? request.themes.map(id => {
+        const theme = available.find(theme => theme.id === id);
+        if (!theme) {
+            throw new Error(`Unknown theme: ${id}. Available: ${available.map(theme => theme.id).join(', ')}`);
+        }
+        return theme;
+    }).sort((a, b) => compare(a.id, b.id)) : available;
+    const themes = [];
+    for (const theme of selected) {
+        console.log(`Extracting ${theme.id}`);
+        await vscode.workspace.getConfiguration('workbench').update('colorTheme', theme.id, vscode.ConfigurationTarget.Global);
+        themes.push({
+            ...await captureTheme(theme.id, theme.kind),
+            extensionId: theme.extensionId,
+            themePath: theme.themePath,
+        });
+    }
+    const product = object(JSON.parse(await (0, promises_1.readFile)((0, node_path_1.join)(vscode.env.appRoot, 'product.json'), 'utf8')), 'VS Code product');
+    const catalog = parseCatalog({
+        schemaVersion: 1,
+        source: {
+            vscodeVersion: vscode.version,
+            vscodeCommit: text(product.commit, 'VS Code build commit'),
+            platform: process.platform,
+            arch: process.arch,
+            extensions,
+        },
+        themes,
+    });
+    await (0, promises_1.writeFile)(text(request.output, 'output path'), `${JSON.stringify(catalog, null, 2)}\n`);
+}
+function kindFromUiTheme(value) {
+    switch (value) {
+        case 'vs': return 'vscode-light';
+        case 'vs-dark': return 'vscode-dark';
+        case 'hc-black': return 'vscode-high-contrast';
+        case 'hc-light': return 'vscode-high-contrast-light';
+        default: throw new Error(`Unknown contributed uiTheme: ${String(value)}`);
+    }
+}
+async function captureTheme(id, expectedKind) {
+    const { getThemeKind, object, parseTheme } = await import('../schema.js');
+    const panel = vscode.window.createWebviewPanel('webview-theme-probe', `Extracting ${id}`, vscode.ViewColumn.One, {
+        enableScripts: true,
+        localResourceRoots: [],
+    });
+    try {
+        return await new Promise((resolve, reject) => {
+            const timer = setTimeout(() => {
+                listener.dispose();
+                reject(new Error(`Timed out waiting for injected webview theme ${id}`));
+            }, 30_000);
+            const listener = panel.webview.onDidReceiveMessage((value) => {
+                try {
+                    const message = object(value, 'webview response');
+                    if (message.error) {
+                        throw new Error(`Theme probe failed: ${String(message.error)}`);
+                    }
+                    const theme = parseTheme(message);
+                    const kind = getThemeKind(theme);
+                    if (theme.id !== id || kind !== expectedKind) {
+                        throw new Error(`Requested ${id} (${expectedKind}), received ${theme.id} (${kind})`);
+                    }
+                    resolve({ id: theme.id, label: theme.label, kind, variables: theme.cssVariableValues });
+                }
+                catch (error) {
+                    reject(error);
+                }
+                finally {
+                    clearTimeout(timer);
+                    listener.dispose();
+                }
+            });
+            const nonce = (0, node_crypto_1.randomBytes)(16).toString('hex');
+            panel.webview.html = `<!doctype html>
+<html><head><meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}'">
+</head><body><script nonce="${nonce}">
+const api = acquireVsCodeApi();
+const expected = ${JSON.stringify(id).replace(/</g, '\\u003c')};
+let done = false;
+function capture() {
+    if (done || document.body.dataset.vscodeThemeId !== expected) { return; }
+    const style = document.documentElement.style;
+    const variables = {};
+    for (const key of Array.from(style).sort()) {
+        if (key.startsWith('--vscode-') || key === '--text-link-decoration') {
+            variables[key] = style.getPropertyValue(key);
+        }
+    }
+    if (!variables['--vscode-editor-background']) { return; }
+    done = true;
+    observer.disconnect();
+    api.postMessage({
+        id: document.body.dataset.vscodeThemeId,
+        label: document.body.dataset.vscodeThemeName,
+        kind: document.body.dataset.vscodeThemeKind,
+        variables
+    });
+}
+window.addEventListener('error', event => api.postMessage({ error: event.message }));
+const observer = new MutationObserver(capture);
+observer.observe(document.documentElement, { attributes: true });
+observer.observe(document.body, { attributes: true });
+capture();
+</script></body></html>`;
+        });
+    }
+    finally {
+        panel.dispose();
+    }
+}
+function compare(a, b) {
+    return a < b ? -1 : a > b ? 1 : 0;
+}

package/dist/extractor/probe.d.cts

@@ -0,0 +1 @@
+export declare function run(): Promise<void>;

package/dist/extractor/themeFiles.d.ts

@@ -0,0 +1,3 @@
+import { type ThemeCatalog } from '../schema.js';
+export declare function generateThemeFiles(input: ThemeCatalog): ReadonlyMap<string, string>;
+export declare function writeThemeFiles(directory: string, catalog: ThemeCatalog): Promise<void>;

package/dist/extractor/themeFiles.js

@@ -0,0 +1,100 @@
+import { mkdir, readFile, readdir, rename, rm, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { object, parseCatalog, parseTheme, text } from '../schema.js';
+export function generateThemeFiles(input) {
+    const catalog = parseCatalog(input);
+    const knownVariables = [...new Set(catalog.themes.flatMap(theme => Object.keys(theme.variables)))].sort();
+    const files = new Map();
+    const entries = [];
+    for (const input of catalog.themes) {
+        const extensionId = text(input.extensionId, 'theme.extensionId');
+        const themePath = text(input.themePath, 'theme.themePath').replace(/\\/g, '/').replace(/^\.\//, '');
+        const asset = themePath.replace(/^themes\//, '').replace(/\.[^.\/]+$/, '');
+        const id = `${extensionId}-${asset}`.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+        if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(id)) {
+            throw new Error(`Cannot create theme ID from ${extensionId}:${themePath}`);
+        }
+        if (files.has(`${id}.json`)) {
+            throw new Error(`Theme ID collision: ${id}. Extension IDs and asset paths must produce distinct slugs.`);
+        }
+        const parsed = parseTheme(input);
+        const theme = {
+            id,
+            label: parsed.label,
+            settingsId: input.id,
+            light: parsed.light,
+            highContrast: parsed.highContrast,
+            cssVariableValues: Object.fromEntries(Object.entries(parsed.cssVariableValues).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0)),
+        };
+        const className = `vscode-theme-${id}`;
+        files.set(`${id}.json`, json(theme));
+        const declarations = knownVariables.map(name => {
+            const value = theme.cssVariableValues[name] ?? 'initial';
+            if (/[{};\r\n]|\/\*|\*\//.test(value)) {
+                throw new Error(`Cannot serialize CSS value for ${id}: ${name}`);
+            }
+            const property = name.replace(/[^a-zA-Z0-9_-]/gu, character => `\\${character.codePointAt(0).toString(16)} `);
+            return `    ${property}: ${value};`;
+        });
+        files.set(`${id}.css`, `/* Generated by @vscode/webview-themes. Do not edit. */\n.${className} {\n${declarations.join('\n')}\n}\n`);
+        entries.push({
+            id, label: theme.label, settingsId: input.id, extensionId, themePath,
+            light: theme.light, highContrast: theme.highContrast, className,
+            json: `./${id}.json`, css: `./${id}.css`,
+        });
+    }
+    entries.sort((a, b) => a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
+    const index = { schemaVersion: 1, source: catalog.source, themes: entries };
+    files.set('catalog.json', json(catalog));
+    files.set('index.json', json(index));
+    return new Map([...files].sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0));
+}
+export async function writeThemeFiles(directory, catalog) {
+    const files = generateThemeFiles(catalog);
+    await mkdir(directory, { recursive: true });
+    const existing = await readdir(directory);
+    const previousFiles = new Set();
+    if (existing.includes('index.json')) {
+        const index = object(JSON.parse(await readFile(join(directory, 'index.json'), 'utf8')), 'previous theme index');
+        if (index.schemaVersion !== 1 || !Array.isArray(index.themes)) {
+            throw new Error('Cannot update an unrecognized theme index');
+        }
+        for (const value of index.themes) {
+            const entry = object(value, 'previous theme');
+            for (const extension of ['json', 'css']) {
+                const path = text(entry[extension], `theme.${extension}`);
+                if (!/^\.\/[a-z0-9]+(?:-[a-z0-9]+)*\.(?:json|css)$/.test(path)) {
+                    throw new Error(`Unsafe generated theme path: ${path}`);
+                }
+                previousFiles.add(path.slice(2));
+            }
+        }
+    }
+    for (const name of existing) {
+        if (files.has(name) && name !== 'index.json' && name !== 'catalog.json' && !previousFiles.has(name)) {
+            throw new Error(`Refusing to overwrite untracked theme file: ${name}`);
+        }
+    }
+    // Publish the index last so it never points at files that have not been written yet.
+    const ordered = [...files].filter(([name]) => name !== 'index.json');
+    ordered.push(['index.json', files.get('index.json')]);
+    for (const [name, content] of ordered) {
+        const destination = join(directory, name);
+        const staging = `${destination}.tmp-${process.pid}`;
+        try {
+            await writeFile(staging, content);
+            await rename(staging, destination);
+        }
+        finally {
+            await rm(staging, { force: true });
+        }
+    }
+    for (const name of previousFiles) {
+        if (!files.has(name)) {
+            await rm(join(directory, name), { force: true });
+        }
+    }
+}
+function json(value) {
+    return `${JSON.stringify(value, null, 2)}\n`;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { applyTheme, applyThemeToDocument } from './theme.js';
+export type { ThemeController } from './theme.js';
+export { getTheme, getThemeKind, parseCatalog, parseTheme } from './schema.js';
+export type { LegacyTheme, Theme, ThemeCatalog, ThemeIndex, ThemeIndexEntry, ThemeKind, ThemeSource } from './schema.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { applyTheme, applyThemeToDocument } from './theme.js';
+export { getTheme, getThemeKind, parseCatalog, parseTheme } from './schema.js';

package/dist/schema.d.ts

@@ -0,0 +1,60 @@
+export interface Theme {
+    readonly id: string;
+    readonly label: string;
+    readonly settingsId?: string;
+    readonly light: boolean;
+    readonly highContrast: boolean;
+    readonly cssVariableValues: Readonly<Record<string, string>>;
+    /** @deprecated Compatibility accessor on parsed themes. Use light and highContrast. */
+    readonly kind?: ThemeKind;
+    /** @deprecated Compatibility accessor on parsed themes. Use cssVariableValues. */
+    readonly variables?: Readonly<Record<string, string>>;
+}
+export interface ThemeIndex {
+    readonly schemaVersion: 1;
+    readonly source: ThemeSource;
+    readonly themes: readonly ThemeIndexEntry[];
+}
+export interface ThemeIndexEntry extends Omit<Theme, 'cssVariableValues' | 'kind' | 'variables'> {
+    readonly settingsId: string;
+    readonly extensionId: string;
+    readonly themePath: string;
+    readonly className: string;
+    readonly json: string;
+    readonly css: string;
+}
+export interface ThemeSource {
+    readonly vscodeVersion: string;
+    readonly vscodeCommit: string;
+    readonly platform: string;
+    readonly arch: string;
+    readonly extensions: readonly {
+        readonly id: string;
+        readonly version: string;
+    }[];
+}
+/** @deprecated Use the lightweight ThemeIndex and individual Theme files. */
+export interface ThemeCatalog {
+    readonly schemaVersion: 1;
+    readonly source: ThemeSource;
+    readonly themes: readonly LegacyTheme[];
+}
+/** @deprecated Input format supported for existing fixture integrations. */
+export interface LegacyTheme {
+    readonly id: string;
+    readonly label: string;
+    readonly kind: ThemeKind;
+    readonly variables: Readonly<Record<string, string>>;
+    readonly extensionId?: string;
+    readonly themePath?: string;
+}
+export type ThemeKind = 'vscode-light' | 'vscode-dark' | 'vscode-high-contrast' | 'vscode-high-contrast-light';
+export declare const themeKinds: readonly ThemeKind[];
+/** @deprecated Load an individual theme JSON file and use parseTheme. */
+export declare function getTheme(catalog: ThemeCatalog, id: string): Theme;
+/** @deprecated Parses the compatibility aggregate catalog. */
+export declare function parseCatalog(value: unknown): ThemeCatalog;
+export declare function parseTheme(value: unknown): Theme;
+export declare function getThemeKind(theme: Pick<Theme, 'light' | 'highContrast'>): ThemeKind;
+export declare function object(value: unknown, name: string): Record<string, unknown>;
+export declare function text(value: unknown, name: string): string;

package/dist/schema.js

@@ -0,0 +1,108 @@
+export const themeKinds = [
+    'vscode-light', 'vscode-dark', 'vscode-high-contrast', 'vscode-high-contrast-light',
+];
+/** @deprecated Load an individual theme JSON file and use parseTheme. */
+export function getTheme(catalog, id) {
+    const theme = catalog.themes.find(theme => theme.id === id);
+    if (!theme) {
+        throw new Error(`Unknown theme: ${id}`);
+    }
+    return parseTheme(theme);
+}
+/** @deprecated Parses the compatibility aggregate catalog. */
+export function parseCatalog(value) {
+    const catalog = object(value, 'catalog');
+    if (catalog.schemaVersion !== 1) {
+        throw new Error('Unsupported theme catalog schemaVersion; expected 1');
+    }
+    const source = object(catalog.source, 'source');
+    if (!Array.isArray(source.extensions) || !Array.isArray(catalog.themes) || catalog.themes.length === 0) {
+        throw new Error('Expected source.extensions and a non-empty themes array');
+    }
+    const themes = catalog.themes.map(value => {
+        const input = object(value, 'theme');
+        const theme = parseTheme(input);
+        return {
+            id: theme.id,
+            label: theme.label,
+            kind: getThemeKind(theme),
+            variables: theme.cssVariableValues,
+            ...(input.extensionId === undefined ? {} : { extensionId: text(input.extensionId, 'extensionId') }),
+            ...(input.themePath === undefined ? {} : { themePath: text(input.themePath, 'themePath') }),
+        };
+    });
+    if (new Set(themes.map(theme => theme.id)).size !== themes.length) {
+        throw new Error('Duplicate theme IDs in catalog');
+    }
+    return {
+        schemaVersion: 1,
+        source: {
+            vscodeVersion: text(source.vscodeVersion, 'source.vscodeVersion'),
+            vscodeCommit: text(source.vscodeCommit, 'source.vscodeCommit'),
+            platform: text(source.platform, 'source.platform'),
+            arch: text(source.arch, 'source.arch'),
+            extensions: source.extensions.map(value => {
+                const extension = object(value, 'extension');
+                return { id: text(extension.id, 'extension.id'), version: text(extension.version, 'extension.version') };
+            }),
+        },
+        themes,
+    };
+}
+export function parseTheme(value) {
+    const theme = object(value, 'theme');
+    const legacy = !('cssVariableValues' in theme);
+    const kind = legacy ? themeKinds.find(kind => kind === theme.kind) : undefined;
+    if (legacy && !kind) {
+        throw new Error(`Unknown theme kind: ${String(theme.kind)}`);
+    }
+    const light = legacy ? kind === 'vscode-light' || kind === 'vscode-high-contrast-light' : boolean(theme.light, 'light');
+    const highContrast = legacy ? kind === 'vscode-high-contrast' || kind === 'vscode-high-contrast-light' : boolean(theme.highContrast, 'highContrast');
+    const entries = Object.entries(object(legacy ? theme.variables : theme.cssVariableValues, 'theme.cssVariableValues')).map(([key, value]) => {
+        if (!key.startsWith('--vscode-') && key !== '--text-link-decoration') {
+            throw new Error(`Unexpected theme variable: ${key}`);
+        }
+        return [key, text(value, key)];
+    });
+    const variables = Object.fromEntries(entries);
+    for (const required of ['--vscode-editor-background', '--vscode-editor-foreground', '--vscode-font-family']) {
+        if (!variables[required]) {
+            throw new Error(`Theme is missing ${required}`);
+        }
+    }
+    const result = {
+        id: text(theme.id, 'theme.id'),
+        label: text(theme.label, 'theme.label'),
+        ...(theme.settingsId === undefined ? {} : { settingsId: text(theme.settingsId, 'theme.settingsId') }),
+        light,
+        highContrast,
+        cssVariableValues: variables,
+    };
+    return Object.defineProperties(result, {
+        kind: { get: () => getThemeKind(result) },
+        variables: { get: () => result.cssVariableValues },
+    });
+}
+export function getThemeKind(theme) {
+    return theme.highContrast
+        ? theme.light ? 'vscode-high-contrast-light' : 'vscode-high-contrast'
+        : theme.light ? 'vscode-light' : 'vscode-dark';
+}
+function boolean(value, name) {
+    if (typeof value !== 'boolean') {
+        throw new Error(`Expected ${name} to be a boolean`);
+    }
+    return value;
+}
+export function object(value, name) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        throw new Error(`Expected ${name} to be an object`);
+    }
+    return value;
+}
+export function text(value, name) {
+    if (typeof value !== 'string' || value.length === 0) {
+        throw new Error(`Expected ${name} to be a non-empty string`);
+    }
+    return value;
+}

package/dist/theme.d.ts

@@ -0,0 +1,10 @@
+import { type LegacyTheme, type Theme } from './schema.js';
+export interface ThemeController {
+    readonly theme: Theme;
+    setTheme(theme: Theme | LegacyTheme): void;
+    dispose(): void;
+}
+/** Applies variables and VS Code theme metadata to a fixture subtree. */
+export declare function applyTheme(element: HTMLElement, theme: Theme | LegacyTheme): ThemeController;
+/** Use in an isolated iframe to also support selectors such as body.vscode-dark. */
+export declare function applyThemeToDocument(document: Document, theme: Theme | LegacyTheme): ThemeController;

package/dist/theme.js

@@ -0,0 +1,96 @@
+import { getThemeKind, parseTheme, themeKinds } from './schema.js';
+/** Applies variables and VS Code theme metadata to a fixture subtree. */
+export function applyTheme(element, theme) {
+    return createController(element, element, theme);
+}
+/** Use in an isolated iframe to also support selectors such as body.vscode-dark. */
+export function applyThemeToDocument(document, theme) {
+    if (!document.body) {
+        throw new Error('Cannot apply a theme before the document body exists');
+    }
+    return createController(document.documentElement, document.body, theme);
+}
+const owners = new WeakSet();
+const attributes = ['data-vscode-theme-id', 'data-vscode-theme-name', 'data-vscode-theme-kind'];
+function createController(variablesTarget, metadataTarget, initial) {
+    if (owners.has(variablesTarget) || owners.has(metadataTarget)) {
+        throw new Error('This element already has a theme controller; use setTheme instead');
+    }
+    let theme = parseTheme(initial);
+    const savedVariables = new Map();
+    const savedAttributes = attributes.map(name => [name, metadataTarget.getAttribute(name)]);
+    const savedClasses = themeKinds.filter(kind => metadataTarget.classList.contains(kind));
+    let disposed = false;
+    const remember = (key) => {
+        if (!savedVariables.has(key)) {
+            savedVariables.set(key, {
+                value: variablesTarget.style.getPropertyValue(key),
+                priority: variablesTarget.style.getPropertyPriority(key),
+            });
+        }
+    };
+    // An absent token must not inherit another fixture's or the Explorer's theme.
+    const computedStyle = variablesTarget.ownerDocument.defaultView?.getComputedStyle(variablesTarget);
+    if (computedStyle) {
+        for (let i = 0; i < computedStyle.length; i++) {
+            const key = computedStyle.item(i);
+            if (key.startsWith('--vscode-') || key === '--text-link-decoration') {
+                remember(key);
+            }
+        }
+    }
+    const apply = () => {
+        Object.keys(theme.cssVariableValues).forEach(remember);
+        for (const key of savedVariables.keys()) {
+            variablesTarget.style.setProperty(key, theme.cssVariableValues[key] ?? 'initial');
+        }
+        const kind = getThemeKind(theme);
+        metadataTarget.classList.remove(...themeKinds);
+        metadataTarget.classList.add(kind);
+        if (theme.light && theme.highContrast) {
+            metadataTarget.classList.add('vscode-high-contrast');
+        }
+        metadataTarget.setAttribute('data-vscode-theme-id', theme.settingsId ?? theme.id);
+        metadataTarget.setAttribute('data-vscode-theme-name', theme.label);
+        metadataTarget.setAttribute('data-vscode-theme-kind', kind);
+    };
+    owners.add(variablesTarget);
+    owners.add(metadataTarget);
+    apply();
+    return {
+        get theme() { return theme; },
+        setTheme(value) {
+            if (disposed) {
+                throw new Error('Cannot update a disposed theme controller');
+            }
+            theme = parseTheme(value);
+            apply();
+        },
+        dispose() {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            for (const [key, saved] of savedVariables) {
+                if (saved.value) {
+                    variablesTarget.style.setProperty(key, saved.value, saved.priority);
+                }
+                else {
+                    variablesTarget.style.removeProperty(key);
+                }
+            }
+            for (const [name, value] of savedAttributes) {
+                if (value === null) {
+                    metadataTarget.removeAttribute(name);
+                }
+                else {
+                    metadataTarget.setAttribute(name, value);
+                }
+            }
+            metadataTarget.classList.remove(...themeKinds);
+            metadataTarget.classList.add(...savedClasses);
+            owners.delete(variablesTarget);
+            owners.delete(metadataTarget);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,56 @@
 {
-  "name": "@vscode/webview-themes",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@vscode/webview-themes",
+    "version": "0.0.2-1",
+    "description": "Actual VS Code webview themes for component fixtures, with an automated extractor",
+    "type": "module",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/microsoft/vscode-packages.git",
+        "directory": "vscode-webview-themes"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./catalog.json": "./themes/catalog.json",
+        "./index.json": "./themes/index.json",
+        "./themes/*.json": "./themes/*.json",
+        "./themes/*.css": "./themes/*.css"
+    },
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "bin": {
+        "vscode-webview-themes": "./dist/extractor/cli.js"
+    },
+    "files": [
+        "dist",
+        "themes",
+        "catalog-sources.json",
+        "README.md",
+        "LICENSE",
+        "ThirdPartyNotices.txt"
+    ],
+    "scripts": {
+        "build": "tsc -p tsconfig.json",
+        "test": "node --import tsx --test test/*.test.ts",
+        "test:integration": "node --import tsx --test test/integration/*.test.ts",
+        "update-catalog": "node scripts/update-catalog.mjs",
+        "extract": "node dist/extractor/cli.js"
+    },
+    "engines": {
+        "node": ">=22"
+    },
+    "devDependencies": {
+        "@types/node": "^22.15.30",
+        "@types/vscode": "^1.100.0",
+        "@vscode/test-electron": "2.5.2",
+        "fflate": "0.8.2",
+        "playwright": "1.61.1",
+        "tsx": "4.22.4",
+        "typescript": "^5.9.3"
+    },
+    "gitHead": "efe1bb2fbeea60dd3b22314db182c8f4fdc2ea92"
+}