@filipgutica/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Filip Gutica
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# @filipgutica/ui
+
+A compact Vue 3 design system built on [Reka UI](https://reka-ui.com), with
+Tailwind CSS 4 tokens and safe VS Code/Open VSX color-theme normalization.
+
+## Install
+
+```sh
+pnpm add @filipgutica/ui
+```
+
+Import Tailwind and the shared theme files from your application stylesheet:
+
+```css
+@import "tailwindcss";
+@import "@filipgutica/ui/theme.css";
+@import "@filipgutica/ui/components.css";
+```
+
+The theme exposes Tailwind utilities such as `bg-ui-bg`, `bg-ui-surface`,
+`text-ui-text`, `text-ui-muted`, `border-ui-border`, and `text-ui-error`.
+
+## Vue components
+
+```vue
+<template>
+  <UiButton variant="secondary" size="compact">
+    Inspect evidence
+  </UiButton>
+</template>
+
+<script setup lang="ts">
+import { UiButton } from '@filipgutica/ui'
+</script>
+```
+
+## VS Code themes
+
+The browser-safe theme entry point parses VS Code JSON/JSONC and maps supported
+workbench colors into the package's finite semantic token contract:
+
+```ts
+import { applySemanticTheme, parseVsCodeTheme } from '@filipgutica/ui/theme'
+
+const theme = parseVsCodeTheme({ source, fileName })
+applySemanticTheme({ root: document.documentElement, theme })
+```
+
+The Node-only Open VSX entry point searches and imports theme extensions without
+executing extension code:
+
+```ts
+import { createOpenVsxThemeService } from '@filipgutica/ui/open-vsx'
+
+const themes = await createOpenVsxThemeService().search('Catppuccin')
+```
+
+Open VSX packages are untrusted input. The importer restricts origins, validates
+identifiers and archive paths, caps downloaded and expanded sizes, checks the
+advertised SHA-256 checksum, and retains only normalized colors. Consumers that
+redistribute theme assets remain responsible for their licenses.
+
+## Boundaries
+
+- Open VSX themes control color and light/dark/high-contrast appearance only.
+- Typography, spacing, radius, motion, and component structure remain owned by
+  this package so applications keep a consistent design language.
+- `@filipgutica/ui/open-vsx` is Node-only. Do not import it into browser bundles.
+
+## Development
+
+```sh
+pnpm install
+pnpm verify
+```

package/dist/components/UiButton.vue.d.ts

@@ -0,0 +1,24 @@
+export interface UiButtonProps {
+    disabled?: boolean;
+    size?: 'default' | 'compact';
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'text';
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiButtonProps> & Readonly<{}>, {
+    disabled: boolean;
+    size: "default" | "compact";
+    type: "button" | "submit" | "reset";
+    variant: "primary" | "secondary" | "text";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UiButton } from './components/UiButton.vue';
+export type { UiButtonProps } from './components/UiButton.vue';

package/dist/index.js

@@ -0,0 +1,36 @@
+import { createBlock as e, defineComponent as t, openBlock as n, renderSlot as r, unref as i, withCtx as a } from "vue";
+import { Primitive as o } from "reka-ui";
+//#endregion
+//#region src/components/UiButton.vue
+var s = /* @__PURE__ */ t({
+	__name: "UiButton",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "default" },
+		type: { default: "button" },
+		variant: { default: "primary" }
+	},
+	setup(t) {
+		return (s, c) => (n(), e(i(o), {
+			as: "button",
+			class: "fg-button",
+			"data-size": t.size,
+			"data-variant": t.variant,
+			disabled: t.disabled,
+			type: t.type
+		}, {
+			default: a(() => [r(s.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"data-size",
+			"data-variant",
+			"disabled",
+			"type"
+		]));
+	}
+});
+//#endregion
+export { s as UiButton };

package/dist/open-vsx/index.d.ts

@@ -0,0 +1,11 @@
+import type { OpenVsxThemeSearchResult, ThemeImportResult } from '../theme/index.js';
+type PreferredAppearance = 'light' | 'dark';
+interface OpenVsxThemeServiceDependencies {
+    fetchImpl?: typeof fetch;
+}
+export interface OpenVsxThemeService {
+    search: (query: string) => Promise<OpenVsxThemeSearchResult>;
+    importTheme: (extensionId: string, preferredAppearance: PreferredAppearance) => Promise<ThemeImportResult>;
+}
+export declare const createOpenVsxThemeService: ({ fetchImpl, }?: OpenVsxThemeServiceDependencies) => OpenVsxThemeService;
+export {};

package/dist/open-vsx.js

@@ -0,0 +1,342 @@
+import { ThemeValidationError as e, parseVsCodeTheme as t } from "./theme.js";
+import { parse as n } from "jsonc-parser";
+import { createHash as r } from "node:crypto";
+import i from "jszip";
+//#region src/open-vsx/index.ts
+var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144, l = 262144, u = 1048576, d = 20971520, f = 5e3, p = 104857600, m = 200, h = 40, g = 8, _ = 15e3, v = class extends Error {
+	code;
+	constructor(e, t) {
+		super(t), this.name = "OpenVsxThemeError", this.code = e;
+	}
+}, y = (e) => typeof e == "object" && !!e && !Array.isArray(e), b = (e, t) => {
+	let r = [], i = n(e, r, { allowTrailingComma: !0 });
+	if (r.length > 0 || !y(i)) throw new v("unsupported-extension", `${t} is not valid JSON.`);
+	return i;
+}, x = (e) => {
+	if (typeof e != "string") return null;
+	try {
+		let t = new URL(e);
+		return t.origin.toLowerCase() === a ? t.toString() : null;
+	} catch {
+		return null;
+	}
+}, S = (e) => {
+	let t = /^([a-z0-9][a-z0-9_-]{0,99})\.([a-z0-9][a-z0-9_-]{0,99})$/i.exec(e);
+	if (!t?.[1] || !t[2]) throw new v("unsupported-extension", "The selected Open VSX extension identifier is invalid.");
+	return [t[1], t[2]];
+}, C = (e) => {
+	let t = y(e.contributes) ? e.contributes : null;
+	return Array.isArray(t?.themes) ? t.themes.filter(y) : [];
+}, w = async (e, t, n) => {
+	let r = Number(e.headers.get("content-length"));
+	if (Number.isFinite(r) && r > t) throw new v("file-too-large", n);
+	if (!e.body) {
+		let r = new Uint8Array(await e.arrayBuffer());
+		if (r.byteLength > t) throw new v("file-too-large", n);
+		return r;
+	}
+	let i = e.body.getReader(), a = [], o = 0;
+	try {
+		for (;;) {
+			let { done: e, value: r } = await i.read();
+			if (e) break;
+			if (o += r.byteLength, o > t) throw await i.cancel(), new v("file-too-large", n);
+			a.push(r);
+		}
+	} finally {
+		i.releaseLock();
+	}
+	let s = new Uint8Array(o), c = 0;
+	for (let e of a) s.set(e, c), c += e.byteLength;
+	return s;
+}, T = (e) => async ({ url: t, limit: n, failureMessage: r, tooLargeMessage: i }) => {
+	let a = new AbortController(), o = setTimeout(() => a.abort(), _);
+	try {
+		let o = x(String(t));
+		if (!o) throw new v("open-vsx-unavailable", r);
+		let s = await e(o, {
+			redirect: "follow",
+			signal: a.signal
+		});
+		if (!x(s.url || o) || !s.ok) throw new v("open-vsx-unavailable", r);
+		return await w(s, n, i);
+	} catch (e) {
+		throw e instanceof v ? e : new v("open-vsx-unavailable", a.signal.aborted ? "Open VSX took too long to respond." : r);
+	} finally {
+		clearTimeout(o);
+	}
+}, E = (e) => {
+	if (!y(e)) return null;
+	let t = typeof e.namespace == "string" ? e.namespace.trim() : "", n = typeof e.name == "string" ? e.name.trim() : "";
+	if (!t || !n) return null;
+	let r = typeof e.displayName == "string" && e.displayName.trim() ? e.displayName.trim() : n;
+	return {
+		id: `${t}.${n}`,
+		name: r.slice(0, 100),
+		publisher: t.slice(0, 100),
+		description: typeof e.description == "string" ? e.description.slice(0, 300) : "",
+		downloadCount: typeof e.downloadCount == "number" && Number.isFinite(e.downloadCount) ? Math.max(0, e.downloadCount) : 0
+	};
+}, D = (e) => {
+	if (e.length > 1024 || e.includes("\0") || e.startsWith("/") || /^[a-z]:/i.test(e)) throw new v("unsupported-extension", "A theme path is not safe.");
+}, O = ({ path: e, initialSegments: t, minimumDepth: n }) => {
+	D(e);
+	let r = [...t];
+	for (let t of e.replaceAll("\\", "/").split("/")) if (!(!t || t === ".")) {
+		if (t === "..") {
+			if (r.length <= n) throw new v("unsupported-extension", "A theme path escapes its package.");
+			r.pop();
+		} else r.push(t);
+	}
+	return r.join("/");
+}, k = (e, t = "extension/") => {
+	let n = t.split("/").slice(0, -1);
+	return n[0] !== "extension" && n.unshift("extension"), O({
+		path: e,
+		initialSegments: n,
+		minimumDepth: 1
+	});
+}, A = (e) => {
+	let t = O({
+		path: e,
+		initialSegments: [],
+		minimumDepth: 0
+	});
+	if (!t) throw new v("unsupported-extension", "The extension package has an invalid file name.");
+	return t;
+}, j = (e) => {
+	let t = e.byteLength, n = Math.max(0, t - 65557), r = t - 22;
+	for (; r >= n && (e.getUint32(r, !0) !== 101010256 || r + 22 + e.getUint16(r + 20, !0) !== t);) --r;
+	if (r < n) throw new v("unsupported-extension", "The extension package is not a valid ZIP file.");
+	return r;
+}, M = (e) => {
+	let t = j(e), n = e.getUint32(t + 12, !0), r = e.getUint32(t + 16, !0), i = r + n;
+	if (i !== t || i > e.byteLength) throw new v("unsupported-extension", "The extension package has an invalid ZIP directory.");
+	return {
+		start: r,
+		end: i
+	};
+}, N = ({ bytes: e, view: t, offset: n, directoryEnd: r }) => {
+	if (n + 46 > r || t.getUint32(n, !0) !== 33639248) throw new v("unsupported-extension", "The extension package has an invalid ZIP directory.");
+	let i = t.getUint32(n + 20, !0), a = t.getUint32(n + 24, !0), o = t.getUint16(n + 28, !0), s = t.getUint16(n + 30, !0), c = t.getUint16(n + 32, !0), l = n + 46 + o + s + c;
+	if (l > r || i === 4294967295 || a === 4294967295 || a > 0 && (i === 0 || a / i > m)) throw new v("unsupported-extension", "The extension package has unsafe ZIP metadata.");
+	try {
+		return {
+			name: new TextDecoder("utf-8", { fatal: !0 }).decode(e.subarray(n + 46, n + 46 + o)),
+			uncompressed: a,
+			nextOffset: l
+		};
+	} catch {
+		throw new v("unsupported-extension", "The extension package has an invalid file name.");
+	}
+}, P = (e) => {
+	let t = new DataView(e.buffer, e.byteOffset, e.byteLength), n = M(t), r = /* @__PURE__ */ new Map(), i = 0, a = 0, o = n.start;
+	for (; o < n.end;) {
+		if (a += 1, a > f) throw new v("unsupported-extension", "The extension package has an invalid ZIP directory.");
+		let s = N({
+			bytes: e,
+			view: t,
+			offset: o,
+			directoryEnd: n.end
+		});
+		if (i += s.uncompressed, i > p) throw new v("file-too-large", "The extension package expands beyond the safe limit.");
+		r.set(A(s.name), s.uncompressed), o = s.nextOffset;
+	}
+	return r;
+}, F = async ({ zip: e, sizes: t, path: n, description: r }) => {
+	let i = t.get(n);
+	if (i === void 0) throw new v("unsupported-extension", `${r} is missing.`);
+	if (i > u) throw new v("file-too-large", `${r} is too large.`);
+	let a = e.file(n);
+	if (!a) throw new v("unsupported-extension", `${r} is missing.`);
+	return a.async("string");
+}, I = async ({ zip: e, sizes: t, path: n, ancestors: r = /* @__PURE__ */ new Set() }) => {
+	if (r.size >= g || r.has(n)) throw new v("unsupported-extension", "Theme includes are cyclic or too deeply nested.");
+	let i = b(await F({
+		zip: e,
+		sizes: t,
+		path: n,
+		description: `Theme file ${n}`
+	}), `Theme file ${n}`);
+	if (typeof i.include != "string") return i;
+	let a = new Set(r);
+	a.add(n);
+	let o = await I({
+		zip: e,
+		sizes: t,
+		path: k(i.include, n),
+		ancestors: a
+	});
+	return {
+		...o,
+		...i,
+		colors: {
+			...y(o.colors) ? o.colors : {},
+			...y(i.colors) ? i.colors : {}
+		}
+	};
+}, L = (e) => e === "vs" ? "light" : e === "vs-dark" ? "dark" : e === "hc-black" ? "hc" : e === "hc-light" ? "hcLight" : null, R = (e, t) => e.find((e) => t === "dark" ? e.appearance === "dark" || e.appearance === "high-contrast-dark" : e.appearance === "light" || e.appearance === "high-contrast-light") ?? e[0], z = async ({ request: e, extensionId: t }) => {
+	let [n, r] = S(t), i = await e({
+		url: `${a}/api/${encodeURIComponent(n)}/${encodeURIComponent(r)}`,
+		limit: c,
+		failureMessage: "Open VSX theme details are unavailable right now.",
+		tooLargeMessage: "Open VSX returned unexpectedly large theme details."
+	}), o = JSON.parse(new TextDecoder().decode(i));
+	if (!y(o) || !y(o.files)) throw new v("unsupported-extension", "Open VSX returned malformed theme details.");
+	let s = x(o.files.manifest), l = x(o.files.download), u = x(o.files.sha256), d = typeof o.version == "string" ? o.version : "";
+	if (!s || !l || !u || !d) throw new v("unsupported-extension", "Open VSX returned malformed theme details.");
+	return {
+		extensionName: r,
+		manifestUrl: s,
+		packageUrl: l,
+		checksumUrl: u,
+		version: d
+	};
+}, B = async ({ request: e, manifestUrl: t }) => {
+	let n = await e({
+		url: t,
+		limit: l,
+		failureMessage: "That extension has no readable manifest.",
+		tooLargeMessage: "That extension manifest is too large."
+	}), r = C(b(new TextDecoder().decode(n), "The extension manifest"));
+	if (r.length === 0 || r.length > h) throw new v("unsupported-extension", "That extension does not contain a supported number of color themes.");
+}, V = async ({ request: e, packageUrl: t, checksumUrl: n }) => {
+	let [i, a] = await Promise.all([e({
+		url: t,
+		limit: d,
+		failureMessage: "That Open VSX theme could not be downloaded.",
+		tooLargeMessage: "That theme extension is too large to import safely."
+	}), e({
+		url: n,
+		limit: 256,
+		failureMessage: "That Open VSX theme has no readable checksum.",
+		tooLargeMessage: "That Open VSX checksum response is invalid."
+	})]), o = new TextDecoder().decode(a).trim().split(/\s+/)[0], s = r("sha256").update(i).digest("hex");
+	if (!o || !/^[a-f\d]{64}$/i.test(o)) throw new v("integrity-failed", "That Open VSX theme has an invalid checksum.");
+	if (o.toLowerCase() !== s) throw new v("integrity-failed", "That Open VSX theme failed its integrity check.");
+	return i;
+}, H = async (e) => {
+	let t = P(e);
+	try {
+		return {
+			zip: await i.loadAsync(e),
+			sizes: t
+		};
+	} catch {
+		throw new v("unsupported-extension", "That extension package could not be opened.");
+	}
+}, U = async ({ zip: e, sizes: t, extensionId: n, version: r }) => {
+	let i = b(await F({
+		zip: e,
+		sizes: t,
+		path: "extension/package.json",
+		description: "The packaged extension manifest"
+	}), "The packaged extension manifest");
+	if ((typeof i.publisher == "string" && typeof i.name == "string" ? `${i.publisher}.${i.name}` : "").toLowerCase() !== n.toLowerCase() || i.version !== r) throw new v("integrity-failed", "The downloaded package does not match the selected Open VSX theme.");
+	return i;
+}, W = async ({ zip: e, sizes: n, manifest: r, fallbackName: i }) => {
+	let a = C(r);
+	if (a.length === 0 || a.length > h) throw new v("unsupported-extension", "That extension has no compatible color themes.");
+	let o = [];
+	for (let r of a) {
+		if (typeof r.path != "string") throw new v("unsupported-extension", "A contributed theme has no valid path.");
+		let a = k(r.path), s = await I({
+			zip: e,
+			sizes: n,
+			path: a
+		}), c = L(r.uiTheme), l = typeof r.label == "string" && r.label.trim() ? r.label.trim() : i;
+		o.push(t({
+			source: JSON.stringify({
+				...s,
+				name: l,
+				...c ? { type: c } : {}
+			}),
+			fileName: a
+		}));
+	}
+	return o;
+}, G = ({ fetchImpl: t = fetch } = {}) => {
+	let n = T(t);
+	return {
+		search: async (e) => {
+			let t = e.trim();
+			if (!t) return {
+				status: "success",
+				themes: []
+			};
+			if (t.length > 100) return {
+				status: "error",
+				message: "Search terms must be 100 characters or fewer."
+			};
+			try {
+				let e = new URL(o);
+				e.searchParams.set("query", t), e.searchParams.set("category", "Themes"), e.searchParams.set("sortBy", "downloadCount"), e.searchParams.set("sortOrder", "desc"), e.searchParams.set("size", "12");
+				let r = await n({
+					url: e,
+					limit: s,
+					failureMessage: "Open VSX search is unavailable right now.",
+					tooLargeMessage: "Open VSX returned an unexpectedly large search response."
+				}), i = JSON.parse(new TextDecoder().decode(r));
+				if (!y(i) || !Array.isArray(i.extensions)) throw Error("invalid response");
+				return {
+					status: "success",
+					themes: i.extensions.flatMap((e) => {
+						let t = E(e);
+						return t ? [t] : [];
+					}).slice(0, 12)
+				};
+			} catch {
+				return {
+					status: "error",
+					message: "Open VSX search is unavailable right now."
+				};
+			}
+		},
+		importTheme: async (t, r) => {
+			try {
+				let e = await z({
+					request: n,
+					extensionId: t
+				});
+				await B({
+					request: n,
+					manifestUrl: e.manifestUrl
+				});
+				let { zip: i, sizes: a } = await H(await V({
+					request: n,
+					...e
+				}));
+				return {
+					status: "success",
+					theme: R(await W({
+						zip: i,
+						sizes: a,
+						manifest: await U({
+							zip: i,
+							sizes: a,
+							extensionId: t,
+							version: e.version
+						}),
+						fallbackName: e.extensionName
+					}), r)
+				};
+			} catch (t) {
+				return t instanceof e || t instanceof v ? {
+					status: "error",
+					error: {
+						code: t.code,
+						message: t.message
+					}
+				} : {
+					status: "error",
+					error: {
+						code: "open-vsx-unavailable",
+						message: "Could not import that Open VSX theme."
+					}
+				};
+			}
+		}
+	};
+};
+//#endregion
+export { G as createOpenVsxThemeService };

package/dist/theme/index.d.ts

@@ -0,0 +1,125 @@
+export type ThemeAppearance = 'light' | 'dark' | 'high-contrast-light' | 'high-contrast-dark';
+export interface SemanticThemeTokens {
+    pageBackground: string;
+    surface: string;
+    surfaceRaised: string;
+    surfaceMuted: string;
+    textPrimary: string;
+    textMuted: string;
+    border: string;
+    borderSubtle: string;
+    link: string;
+    accent: string;
+    focus: string;
+    buttonBackground: string;
+    buttonForeground: string;
+    buttonHoverBackground: string;
+    inputBackground: string;
+    inputForeground: string;
+    inputBorder: string;
+    inputPlaceholder: string;
+    rowHoverBackground: string;
+    rowSelectedBackground: string;
+    rowSelectedForeground: string;
+    codeBackground: string;
+    codeForeground: string;
+    error: string;
+    warning: string;
+    success: string;
+    info: string;
+    progress: string;
+}
+export interface NormalizedTheme {
+    name: string;
+    appearance: ThemeAppearance;
+    tokens: SemanticThemeTokens;
+}
+export type ThemeImportErrorCode = ThemeValidationErrorCode | 'file-too-large' | 'integrity-failed' | 'open-vsx-unavailable' | 'persistence-failed' | 'read-failed' | 'unsupported-extension' | 'unsupported-file-type';
+export interface ThemeImportError {
+    code: ThemeImportErrorCode;
+    message: string;
+}
+export type ThemeImportResult = {
+    status: 'cancelled';
+} | {
+    status: 'success';
+    theme: NormalizedTheme;
+} | {
+    status: 'error';
+    error: ThemeImportError;
+};
+export type ThemeRemovalResult = {
+    status: 'success';
+} | {
+    status: 'error';
+    error: ThemeImportError;
+};
+export interface OpenVsxThemeSummary {
+    id: string;
+    name: string;
+    publisher: string;
+    description: string;
+    downloadCount: number;
+}
+export type OpenVsxThemeSearchResult = {
+    status: 'success';
+    themes: OpenVsxThemeSummary[];
+} | {
+    status: 'error';
+    message: string;
+};
+export type ThemeValidationErrorCode = 'invalid-color' | 'invalid-shape' | 'malformed-json' | 'missing-colors' | 'unsupported-type';
+export declare class ThemeValidationError extends Error {
+    readonly code: ThemeValidationErrorCode;
+    constructor(code: ThemeValidationErrorCode, message: string);
+}
+declare const semanticTokenKeys: readonly ["pageBackground", "surface", "surfaceRaised", "surfaceMuted", "textPrimary", "textMuted", "border", "borderSubtle", "link", "accent", "focus", "buttonBackground", "buttonForeground", "buttonHoverBackground", "inputBackground", "inputForeground", "inputBorder", "inputPlaceholder", "rowHoverBackground", "rowSelectedBackground", "rowSelectedForeground", "codeBackground", "codeForeground", "error", "warning", "success", "info", "progress"];
+export declare const parseVsCodeTheme: ({ source, fileName, }: {
+    source: string;
+    fileName: string;
+}) => NormalizedTheme;
+export declare const isNormalizedTheme: (value: unknown) => value is NormalizedTheme;
+export declare const semanticCssVariables: {
+    readonly pageBackground: "--color-bg";
+    readonly surface: "--color-surface";
+    readonly surfaceRaised: "--color-surface-raised";
+    readonly surfaceMuted: "--color-surface-muted";
+    readonly textPrimary: "--color-text";
+    readonly textMuted: "--color-muted";
+    readonly border: "--color-border";
+    readonly borderSubtle: "--color-border-subtle";
+    readonly link: "--color-link";
+    readonly accent: "--color-accent";
+    readonly focus: "--color-focus";
+    readonly buttonBackground: "--color-button-bg";
+    readonly buttonForeground: "--color-button-text";
+    readonly buttonHoverBackground: "--color-button-hover";
+    readonly inputBackground: "--color-input-bg";
+    readonly inputForeground: "--color-input-text";
+    readonly inputBorder: "--color-input-border";
+    readonly inputPlaceholder: "--color-input-placeholder";
+    readonly rowHoverBackground: "--color-row-hover";
+    readonly rowSelectedBackground: "--color-row-selected";
+    readonly rowSelectedForeground: "--color-row-selected-text";
+    readonly codeBackground: "--color-code";
+    readonly codeForeground: "--color-code-text";
+    readonly error: "--color-error";
+    readonly warning: "--color-warning";
+    readonly success: "--color-success";
+    readonly info: "--color-info";
+    readonly progress: "--color-progress";
+};
+export interface SemanticThemeRoot {
+    classList: {
+        toggle: (name: string, force?: boolean) => unknown;
+    };
+    style: {
+        removeProperty: (name: string) => unknown;
+        setProperty: (name: string, value: string) => unknown;
+    };
+}
+export declare const applySemanticTheme: ({ root, theme, }: {
+    root: SemanticThemeRoot;
+    theme: NormalizedTheme | null;
+}) => void;
+export { semanticTokenKeys };

package/dist/theme.js

@@ -0,0 +1,375 @@
+import { parse as e, printParseErrorCode as t } from "jsonc-parser";
+//#region src/theme/index.ts
+var n = class extends Error {
+	code;
+	constructor(e, t) {
+		super(t), this.name = "ThemeValidationError", this.code = e;
+	}
+}, r = /* @__PURE__ */ "pageBackground.surface.surfaceRaised.surfaceMuted.textPrimary.textMuted.border.borderSubtle.link.accent.focus.buttonBackground.buttonForeground.buttonHoverBackground.inputBackground.inputForeground.inputBorder.inputPlaceholder.rowHoverBackground.rowSelectedBackground.rowSelectedForeground.codeBackground.codeForeground.error.warning.success.info.progress".split("."), i = /* @__PURE__ */ new Set(/* @__PURE__ */ "editor.background,editor.foreground,foreground,sideBar.background,panel.background,editorWidget.background,descriptionForeground,disabledForeground,panel.border,sideBar.border,contrastBorder,contrastActiveBorder,focusBorder,textLink.foreground,textLink.activeForeground,button.background,button.foreground,button.hoverBackground,input.background,input.foreground,input.border,input.placeholderForeground,list.hoverBackground,list.activeSelectionBackground,list.activeSelectionForeground,list.inactiveSelectionBackground,list.inactiveSelectionForeground,errorForeground,editorError.foreground,notificationsErrorIcon.foreground,notificationsWarningIcon.foreground,editorWarning.foreground,notificationsInfoIcon.foreground,editorInfo.foreground,testing.iconPassed,terminal.ansiGreen,progressBar.background".split(",")), a = {
+	pageBackground: "#EFF1F5",
+	surface: "#E6E9EF",
+	surfaceRaised: "#FFFFFF",
+	surfaceMuted: "#DCE0E8",
+	textPrimary: "#4C4F69",
+	textMuted: "#6C6F85",
+	border: "#ACB0BE",
+	borderSubtle: "#CCD0DA",
+	link: "#1E66F5",
+	accent: "#8839EF",
+	focus: "#1E66F5",
+	buttonBackground: "#1E66F5",
+	buttonForeground: "#FFFFFF",
+	buttonHoverBackground: "#1A5AD7",
+	inputBackground: "#FFFFFF",
+	inputForeground: "#4C4F69",
+	inputBorder: "#9CA0B0",
+	inputPlaceholder: "#7C7F93",
+	rowHoverBackground: "#DCE0E8",
+	rowSelectedBackground: "#D9E2FA",
+	rowSelectedForeground: "#4C4F69",
+	codeBackground: "#E6E9EF",
+	codeForeground: "#4C4F69",
+	error: "#D20F39",
+	warning: "#8A5600",
+	success: "#287D3C",
+	info: "#176B87",
+	progress: "#8839EF"
+}, o = {
+	pageBackground: "#1E1E2E",
+	surface: "#181825",
+	surfaceRaised: "#242435",
+	surfaceMuted: "#313244",
+	textPrimary: "#CDD6F4",
+	textMuted: "#A6ADC8",
+	border: "#585B70",
+	borderSubtle: "#45475A",
+	link: "#89B4FA",
+	accent: "#CBA6F7",
+	focus: "#89B4FA",
+	buttonBackground: "#89B4FA",
+	buttonForeground: "#11111B",
+	buttonHoverBackground: "#B4BEFE",
+	inputBackground: "#11111B",
+	inputForeground: "#CDD6F4",
+	inputBorder: "#6C7086",
+	inputPlaceholder: "#9399B2",
+	rowHoverBackground: "#313244",
+	rowSelectedBackground: "#45475A",
+	rowSelectedForeground: "#CDD6F4",
+	codeBackground: "#11111B",
+	codeForeground: "#CDD6F4",
+	error: "#F38BA8",
+	warning: "#F9E2AF",
+	success: "#A6E3A1",
+	info: "#89DCEB",
+	progress: "#CBA6F7"
+}, s = (e) => typeof e == "object" && !!e && !Array.isArray(e), c = (e) => typeof e == "string" && /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e), l = (e) => typeof e == "string" && /^#[0-9a-f]{6}(?:[0-9a-f]{2})?$/i.test(e), u = (e) => e.length === 4 || e.length === 5 ? `#${[...e.slice(1)].map((e) => e.repeat(2)).join("")}` : e, d = (e) => {
+	let t = e.length === 4 || e.length === 5 ? [...e.slice(1)].map((e) => e.repeat(2)).join("") : e.slice(1);
+	return [
+		Number.parseInt(t.slice(0, 2), 16),
+		Number.parseInt(t.slice(2, 4), 16),
+		Number.parseInt(t.slice(4, 6), 16),
+		t.length === 8 ? Number.parseInt(t.slice(6, 8), 16) / 255 : 1
+	];
+}, f = (e, t, n) => {
+	let [r, i, a] = d(n), o = (e) => {
+		let [t, n, o, s] = d(e);
+		return [
+			t * s + r * (1 - s),
+			n * s + i * (1 - s),
+			o * s + a * (1 - s)
+		];
+	}, s = ([e, t, n]) => {
+		let r = [
+			e,
+			t,
+			n
+		].map((e) => {
+			let t = e / 255;
+			return t <= .04045 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+		});
+		return .2126 * r[0] + .7152 * r[1] + .0722 * r[2];
+	}, c = s(o(e)), l = s(o(t));
+	return (Math.max(c, l) + .05) / (Math.min(c, l) + .05);
+}, p = ({ background: e, preferred: t, underlay: n }) => f(t, e, n) >= 4.5 ? t : [
+	t,
+	"#000000",
+	"#FFFFFF"
+].reduce((t, r) => f(r, e, n) > f(t, e, n) ? r : t), m = ({ color: e, against: t, fallback: n }) => f(e, t, t) >= 3 ? e : f(n, t, t) >= 3 ? n : p({
+	background: t,
+	preferred: n,
+	underlay: t
+}), h = ({ color: e, background: t, underlay: n, fallback: r }) => f(e, t, n) >= 4.5 ? e : p({
+	background: t,
+	preferred: r,
+	underlay: n
+}), g = ({ color: e, backgrounds: t, underlay: n, fallbacks: r }) => {
+	let i = [e, ...r];
+	return i.find((e) => t.every((t) => f(e, t, n) >= 4.5)) || i.reduce((e, r) => Math.min(...t.map((e) => f(r, e, n))) > Math.min(...t.map((t) => f(e, t, n))) ? r : e);
+}, _ = (e, t) => d(e)[3] === 1 ? e : t, v = (e) => {
+	let [t, n, r] = d(e);
+	return (.2126 * t + .7152 * n + .0722 * r) / 255 < .5 ? "dark" : "light";
+}, y = (e, t) => {
+	if (e === void 0) return v(t);
+	if (e === "light") return "light";
+	if (e === "dark") return "dark";
+	if (e === "hc") return "high-contrast-dark";
+	if (e === "hcLight") return "high-contrast-light";
+	throw new n("unsupported-type", "The theme type must be \"light\", \"dark\", \"hc\", or \"hcLight\".");
+}, b = (e, t, n) => {
+	for (let n of t) {
+		let t = e[n];
+		if (c(t)) return u(t);
+	}
+	return n;
+}, x = (e, t) => {
+	let n = e.slice(0, t).split("\n");
+	return {
+		line: n.length,
+		column: (n.at(-1)?.length ?? 0) + 1
+	};
+}, S = (e) => ((e.split(/[\\/]/).at(-1) ?? "Imported theme").replace(/\.jsonc?$/i, "") || "Imported theme").slice(0, 80), C = ({ colors: e, appearance: t, background: n, foreground: r }) => {
+	let i = t === "dark" || t === "high-contrast-dark" ? o : a, s = b(e, t.startsWith("high-contrast") ? [
+		"contrastBorder",
+		"contrastActiveBorder",
+		"panel.border",
+		"sideBar.border",
+		"focusBorder"
+	] : [
+		"panel.border",
+		"sideBar.border",
+		"contrastBorder",
+		"input.border",
+		"focusBorder"
+	], i.border), c = t.startsWith("high-contrast") ? m({
+		color: s,
+		against: n,
+		fallback: i.border
+	}) : s, l = b(e, [
+		"textLink.foreground",
+		"focusBorder",
+		"progressBar.background",
+		"button.background"
+	], i.link), u = b(e, [
+		"focusBorder",
+		"progressBar.background",
+		"textLink.foreground",
+		"button.background"
+	], l), d = p({
+		background: n,
+		preferred: r,
+		underlay: n
+	}), _ = b(e, [
+		"sideBar.background",
+		"panel.background",
+		"editor.background"
+	], i.surface), v = f(d, _, n) >= 4.5 ? _ : n, y = b(e, [
+		"panel.background",
+		"sideBar.background",
+		"editorWidget.background",
+		"editor.background"
+	], v), x = f(d, y, n) >= 4.5 ? y : v, S = g({
+		color: l,
+		backgrounds: [n, v],
+		underlay: n,
+		fallbacks: [i.link, d]
+	}), C = m({
+		color: u,
+		against: v,
+		fallback: i.accent
+	}), w = g({
+		color: b(e, [
+			"descriptionForeground",
+			"disabledForeground",
+			"foreground",
+			"editor.foreground"
+		], i.textMuted),
+		backgrounds: [n, v],
+		underlay: n,
+		fallbacks: [i.textMuted, d]
+	}), T = b(e, [
+		"editorWidget.background",
+		"list.hoverBackground",
+		"sideBar.background",
+		"panel.background"
+	], i.surfaceMuted), E = f(d, T, v) >= 4.5 && f(w, T, v) >= 4.5 ? T : v, D = b(e, ["button.background"], i.buttonBackground), O = p({
+		background: D,
+		preferred: b(e, ["button.foreground"], i.buttonForeground),
+		underlay: v
+	}), k = b(e, ["button.hoverBackground", "button.background"], i.buttonHoverBackground), A = f(O, k, v) >= 4.5 ? k : D, j = b(e, [
+		"focusBorder",
+		"contrastActiveBorder",
+		"textLink.activeForeground"
+	], i.focus), M = b(e, [
+		"panel.border",
+		"sideBar.border",
+		"contrastBorder"
+	], c), N = t.startsWith("high-contrast") ? m({
+		color: M,
+		against: v,
+		fallback: c
+	}) : M, P = b(e, ["input.background"], v), F = b(e, t.startsWith("high-contrast") ? [
+		"contrastBorder",
+		"input.border",
+		"focusBorder"
+	] : [
+		"input.border",
+		"contrastBorder",
+		"focusBorder"
+	], c), I = (t, r) => h({
+		color: b(e, t, r),
+		background: v,
+		underlay: n,
+		fallback: r
+	}), L = b(e, ["list.hoverBackground"], i.rowHoverBackground), R = f(d, L, v) >= 4.5 ? L : v;
+	return {
+		pageBackground: n,
+		surface: v,
+		surfaceRaised: x,
+		surfaceMuted: E,
+		textPrimary: d,
+		textMuted: w,
+		border: c,
+		borderSubtle: N,
+		link: S,
+		accent: C,
+		focus: m({
+			color: j,
+			against: n,
+			fallback: i.focus
+		}),
+		buttonBackground: D,
+		buttonForeground: O,
+		buttonHoverBackground: A,
+		inputBackground: P,
+		inputForeground: p({
+			background: P,
+			preferred: b(e, [
+				"input.foreground",
+				"editor.foreground",
+				"foreground"
+			], d),
+			underlay: v
+		}),
+		inputBorder: t.startsWith("high-contrast") ? m({
+			color: F,
+			against: P,
+			fallback: c
+		}) : F,
+		inputPlaceholder: h({
+			color: b(e, ["input.placeholderForeground", "descriptionForeground"], w),
+			background: P,
+			underlay: v,
+			fallback: i.textMuted
+		}),
+		rowHoverBackground: R,
+		rowSelectedBackground: b(e, ["list.activeSelectionBackground", "list.inactiveSelectionBackground"], i.rowSelectedBackground),
+		rowSelectedForeground: p({
+			background: b(e, ["list.activeSelectionBackground", "list.inactiveSelectionBackground"], i.rowSelectedBackground),
+			preferred: b(e, ["list.activeSelectionForeground", "list.inactiveSelectionForeground"], i.rowSelectedForeground),
+			underlay: v
+		}),
+		codeBackground: b(e, ["editor.background"], i.codeBackground),
+		codeForeground: p({
+			background: b(e, ["editor.background"], i.codeBackground),
+			preferred: b(e, ["editor.foreground", "foreground"], i.codeForeground),
+			underlay: n
+		}),
+		error: I([
+			"errorForeground",
+			"notificationsErrorIcon.foreground",
+			"editorError.foreground"
+		], i.error),
+		warning: I(["notificationsWarningIcon.foreground", "editorWarning.foreground"], i.warning),
+		success: I(["testing.iconPassed", "terminal.ansiGreen"], i.success),
+		info: I([
+			"notificationsInfoIcon.foreground",
+			"editorInfo.foreground",
+			"textLink.foreground"
+		], i.info),
+		progress: m({
+			color: b(e, [
+				"progressBar.background",
+				"focusBorder",
+				"textLink.foreground"
+			], C),
+			against: E,
+			fallback: i.progress
+		})
+	};
+}, w = ({ source: r, fileName: l }) => {
+	let u = [], d = e(r, u, { allowTrailingComma: !0 }), f = u[0];
+	if (f) {
+		let { line: e, column: i } = x(r, f.offset);
+		throw new n("malformed-json", `The theme could not be parsed (${t(f.error)} at line ${e}, column ${i}).`);
+	}
+	if (!s(d)) throw new n("invalid-shape", "The theme file must contain a JSON object.");
+	if (d.name !== void 0 && typeof d.name != "string") throw new n("invalid-shape", "The theme name must be a string when provided.");
+	if (!s(d.colors)) throw new n("invalid-shape", "The theme must contain a \"colors\" object.");
+	let p = d.colors;
+	for (let e of i) {
+		let t = p[e];
+		if (t !== void 0 && !c(t)) throw new n("invalid-color", `The color for "${e}" must be a 3-, 4-, 6-, or 8-digit hexadecimal value.`);
+	}
+	let m = b(p, [
+		"editor.background",
+		"sideBar.background",
+		"panel.background"
+	], ""), h = b(p, ["editor.foreground", "foreground"], "");
+	if (!m || !h) throw new n("missing-colors", "The theme must define a supported background color and foreground color.");
+	let g = y(d.type, m), v = _(m, (g === "dark" || g === "high-contrast-dark" ? o : a).pageBackground);
+	return {
+		name: d.name?.trim().replace(/\s+/g, " ").slice(0, 80) || S(l),
+		appearance: g,
+		tokens: C({
+			colors: p,
+			appearance: g,
+			background: v,
+			foreground: h
+		})
+	};
+}, T = (e) => {
+	if (!s(e) || typeof e.name != "string" || e.name.trim().length === 0 || e.name.length > 80) return !1;
+	let t = e.appearance;
+	if (t !== "light" && t !== "dark" && t !== "high-contrast-light" && t !== "high-contrast-dark") return !1;
+	let n = e.tokens;
+	return !s(n) || Object.keys(n).length !== r.length ? !1 : r.every((e) => l(n[e]));
+}, E = {
+	pageBackground: "--color-bg",
+	surface: "--color-surface",
+	surfaceRaised: "--color-surface-raised",
+	surfaceMuted: "--color-surface-muted",
+	textPrimary: "--color-text",
+	textMuted: "--color-muted",
+	border: "--color-border",
+	borderSubtle: "--color-border-subtle",
+	link: "--color-link",
+	accent: "--color-accent",
+	focus: "--color-focus",
+	buttonBackground: "--color-button-bg",
+	buttonForeground: "--color-button-text",
+	buttonHoverBackground: "--color-button-hover",
+	inputBackground: "--color-input-bg",
+	inputForeground: "--color-input-text",
+	inputBorder: "--color-input-border",
+	inputPlaceholder: "--color-input-placeholder",
+	rowHoverBackground: "--color-row-hover",
+	rowSelectedBackground: "--color-row-selected",
+	rowSelectedForeground: "--color-row-selected-text",
+	codeBackground: "--color-code",
+	codeForeground: "--color-code-text",
+	error: "--color-error",
+	warning: "--color-warning",
+	success: "--color-success",
+	info: "--color-info",
+	progress: "--color-progress"
+}, D = ({ root: e, theme: t }) => {
+	for (let n of r) {
+		let r = E[n];
+		t ? e.style.setProperty(r, t.tokens[n]) : e.style.removeProperty(r);
+	}
+	let n = t?.appearance;
+	e.classList.toggle("dark", n === "dark" || n === "high-contrast-dark"), e.classList.toggle("high-contrast", n === "high-contrast-light" || n === "high-contrast-dark");
+};
+//#endregion
+export { n as ThemeValidationError, D as applySemanticTheme, T as isNormalizedTheme, w as parseVsCodeTheme, E as semanticCssVariables, r as semanticTokenKeys };

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@filipgutica/ui",
+  "version": "0.1.0",
+  "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/theme.css",
+    "src/components.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./open-vsx": {
+      "types": "./dist/open-vsx/index.d.ts",
+      "import": "./dist/open-vsx.js"
+    },
+    "./theme.css": "./src/theme.css",
+    "./components.css": "./src/components.css"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "prepublishOnly": "pnpm verify",
+    "test": "vitest run",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit",
+    "verify": "pnpm typecheck && pnpm test && pnpm build && pnpm pack --dry-run"
+  },
+  "engines": {
+    "node": ">=22.12"
+  },
+  "packageManager": "pnpm@11.6.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/filipgutica/ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/filipgutica/ui/issues"
+  },
+  "homepage": "https://github.com/filipgutica/ui#readme",
+  "dependencies": {
+    "jsonc-parser": "^3.3.1",
+    "jszip": "^3.10.1",
+    "reka-ui": "^2.10.4"
+  },
+  "peerDependencies": {
+    "vue": ">=3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.0.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.12.2",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^5.9.3",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11",
+    "vue": "^3.5.42",
+    "vue-tsc": "^3.3.11"
+  }
+}

package/src/components.css

@@ -0,0 +1,59 @@
+@layer components {
+  .fg-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border: 1px solid transparent;
+    border-radius: var(--radius-control);
+    padding: 0.65rem 0.9rem;
+    color: var(--color-button-text);
+    background: var(--color-button-bg);
+    font: inherit;
+    font-weight: 650;
+    cursor: pointer;
+  }
+
+  .fg-button:hover:not(:disabled) {
+    background: var(--color-button-hover);
+  }
+
+  .fg-button:focus-visible {
+    outline: 3px solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .fg-button:disabled {
+    cursor: wait;
+    opacity: 0.6;
+  }
+
+  .fg-button[data-size="compact"] {
+    padding: 0.45rem 0.65rem;
+    font-size: 0.78rem;
+  }
+
+  .fg-button[data-variant="secondary"] {
+    border-color: var(--color-border);
+    color: var(--color-text);
+    background: var(--color-surface);
+  }
+
+  .fg-button[data-variant="text"] {
+    padding-inline: 0;
+    color: var(--color-link);
+    background: transparent;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  .fg-button[data-variant="text"]:hover:not(:disabled) {
+    color: var(--color-link);
+    background: transparent;
+  }
+
+  :root.high-contrast .fg-button {
+    border-width: 2px;
+    border-color: var(--color-border);
+  }
+}

package/src/theme.css

@@ -0,0 +1,96 @@
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  color-scheme: light;
+  --color-bg: #eff1f5;
+  --color-surface: #e6e9ef;
+  --color-surface-raised: #fff;
+  --color-surface-muted: #dce0e8;
+  --color-text: #4c4f69;
+  --color-muted: #6c6f85;
+  --color-link: #1e66f5;
+  --color-accent: #8839ef;
+  --color-focus: #1e66f5;
+  --color-border: #acb0be;
+  --color-border-subtle: #ccd0da;
+  --color-button-bg: #1e66f5;
+  --color-button-text: #fff;
+  --color-button-hover: #1a5ad7;
+  --color-input-bg: #fff;
+  --color-input-text: #4c4f69;
+  --color-input-border: #9ca0b0;
+  --color-input-placeholder: #7c7f93;
+  --color-row-hover: #dce0e8;
+  --color-row-selected: #d9e2fa;
+  --color-row-selected-text: #4c4f69;
+  --color-code: #e6e9ef;
+  --color-code-text: #4c4f69;
+  --color-error: #d20f39;
+  --color-warning: #8a5600;
+  --color-success: #287d3c;
+  --color-info: #176b87;
+  --color-progress: #8839ef;
+  --color-shadow: rgb(0 0 0 / 8%);
+  --color-overlay: rgb(0 0 0 / 42%);
+  --color-error-surface: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
+  --color-warning-surface: color-mix(in srgb, var(--color-warning) 13%, var(--color-surface));
+  --color-success-surface: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
+  --color-info-surface: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
+  --radius-control: 0.55rem;
+  --radius-panel: 0.9rem;
+  --duration-fast: 180ms;
+}
+
+:root.dark {
+  color-scheme: dark;
+  --color-bg: #1e1e2e;
+  --color-surface: #181825;
+  --color-surface-raised: #242435;
+  --color-surface-muted: #313244;
+  --color-text: #cdd6f4;
+  --color-muted: #a6adc8;
+  --color-link: #89b4fa;
+  --color-accent: #cba6f7;
+  --color-focus: #89b4fa;
+  --color-border: #585b70;
+  --color-border-subtle: #45475a;
+  --color-button-bg: #89b4fa;
+  --color-button-text: #11111b;
+  --color-button-hover: #b4befe;
+  --color-input-bg: #11111b;
+  --color-input-text: #cdd6f4;
+  --color-input-border: #6c7086;
+  --color-input-placeholder: #9399b2;
+  --color-row-hover: #313244;
+  --color-row-selected: #45475a;
+  --color-row-selected-text: #cdd6f4;
+  --color-code: #11111b;
+  --color-code-text: #cdd6f4;
+  --color-error: #f38ba8;
+  --color-warning: #f9e2af;
+  --color-success: #a6e3a1;
+  --color-info: #89dceb;
+  --color-progress: #cba6f7;
+  --color-shadow: rgb(0 0 0 / 28%);
+  --color-overlay: rgb(0 0 0 / 62%);
+}
+
+@theme inline {
+  --color-ui-bg: var(--color-bg);
+  --color-ui-surface: var(--color-surface);
+  --color-ui-surface-raised: var(--color-surface-raised);
+  --color-ui-surface-muted: var(--color-surface-muted);
+  --color-ui-text: var(--color-text);
+  --color-ui-muted: var(--color-muted);
+  --color-ui-link: var(--color-link);
+  --color-ui-accent: var(--color-accent);
+  --color-ui-focus: var(--color-focus);
+  --color-ui-border: var(--color-border);
+  --color-ui-border-subtle: var(--color-border-subtle);
+  --color-ui-error: var(--color-error);
+  --color-ui-warning: var(--color-warning);
+  --color-ui-success: var(--color-success);
+  --color-ui-info: var(--color-info);
+  --radius-ui-control: var(--radius-control);
+  --radius-ui-panel: var(--radius-panel);
+}