@filipgutica/ui 0.2.2 → 1.0.0

package/dist/theme.js

@@ -1,375 +1,2 @@
-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 };
+import { a as e, i as t, n, o as r, r as i, t as a } from "./theme-CIwueiir.js";
+export { a as ThemeValidationError, n as applySemanticTheme, i as isNormalizedTheme, t as parseVsCodeTheme, e as semanticCssVariables, r as semanticTokenKeys };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "0.2.2",
+  "version": "1.0.0",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [
@@ -31,12 +31,20 @@
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "docs:build": "vite build --config docs/vite.config.ts",
+    "docs:dev": "vite --config docs/vite.config.ts",
+    "docs:preview": "vite preview --config docs/vite.config.ts",
+    "docs:smoke": "node scripts/docs-smoke.mjs",
+    "docs:typecheck": "vue-tsc -p docs/tsconfig.json --noEmit",
+    "lint": "eslint . --max-warnings=0",
+    "lint:fix": "eslint . --fix --max-warnings=0",
     "prepublishOnly": "pnpm verify",
     "release": "semantic-release",
     "release:dry-run": "semantic-release --dry-run --no-ci",
     "test": "vitest run",
+    "test:e2e": "playwright test",
     "typecheck": "vue-tsc -p tsconfig.json --noEmit",
-    "verify": "pnpm typecheck && pnpm test && pnpm build && pnpm pack --dry-run && publint"
+    "verify": "pnpm lint && pnpm typecheck && pnpm docs:typecheck && pnpm test && pnpm test:e2e && pnpm build && pnpm docs:build && pnpm pack --dry-run && publint"
   },
   "engines": {
     "node": ">=22.12"
@@ -56,26 +64,36 @@
   },
   "homepage": "https://github.com/filipgutica/ui#readme",
   "dependencies": {
+    "@vueuse/core": "^14.4.0",
     "jsonc-parser": "^3.3.1",
     "jszip": "^3.10.1",
-    "reka-ui": "^2.10.4"
+    "reka-ui": "^2.10.4",
+    "shiki": "^3.23.0"
   },
   "peerDependencies": {
-    "vue": ">=3.4.0"
+    "vue": "^3.5.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^21.2.2",
     "@commitlint/config-conventional": "^21.2.2",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.62.1",
     "@semantic-release/commit-analyzer": "13.0.1",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/test-utils": "^2.4.6",
     "conventional-changelog-conventionalcommits": "^9.3.1",
+    "eslint": "^10.9.1",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.12.0",
     "happy-dom": "^20.12.2",
     "publint": "^0.3.24",
     "semantic-release": "^25.0.9",
+    "swrv": "^1.2.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.69.0",
     "vite": "^8.2.2",
     "vitest": "^4.1.11",
     "vue": "^3.5.42",