@glasshome/ui 0.3.3 → 0.4.0

package/README.md

@@ -2,7 +2,7 @@
 
 SolidJS component library for GlassHome, built on [Kobalte](https://kobalte.dev).
 
-56 accessible, theme-aware components plus utility functions and a Tailwind v4 CSS preset — everything you need to build smart-home dashboards.
+56 accessible, theme-aware components plus utility functions and a Tailwind v4 CSS preset — everything you need to build smart-home dashboards. Powers [GlassHome](https://glasshome.app), the local-first dashboard for Home Assistant.
 
 ## Install
 

package/dist/tokens/hex.d.ts

@@ -0,0 +1,6 @@
+/**
+ * oklch() string -> sRGB hex, matching browser rendering: out-of-gamut colors
+ * are gamut-mapped by chroma reduction (CSS Color 4), not channel-clipped.
+ * For renderers that cannot parse oklch (librsvg, sharp SVG, canvas fills).
+ */
+export declare function oklchToHex(oklch: string): string;

package/dist/tokens/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Design tokens as data, framework-free. Must stay in sync with
+ * styles/theme.css (presets.ts is the machine-readable form of that palette).
+ */
+export * from "./hex";
+export * from "./presets";
+export * from "./theme-colors";

package/dist/tokens/index.js

@@ -0,0 +1,223 @@
+//#region src/tokens/theme-colors.ts
+var e = /^oklch\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s+([+-]?(?:\d+\.?\d*|\.\d+))\s+([+-]?(?:\d+\.?\d*|\.\d+))\s*\)$/i;
+function t(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function n(e) {
+	return String(Number.isInteger(e) ? e : Number(e.toFixed(6)));
+}
+function r(t) {
+	let n = e.exec(t.trim());
+	return n ? {
+		l: Number(n[1]),
+		c: Number(n[2]),
+		h: Number(n[3])
+	} : null;
+}
+function i(e, t, r) {
+	return `oklch(${n(e)} ${n(t)} ${n(r)})`;
+}
+function a(e, n) {
+	let a = r(e);
+	return a ? i(t(a.l + n, 0, 1), a.c, a.h) : e;
+}
+function o(e, n) {
+	let a = r(e);
+	return a ? i(t(n, 0, 1), t(a.c * .8, 0, .4), a.h) : e;
+}
+function s(e, t) {
+	return {
+		...e,
+		popover: e.card,
+		muted: t === "light" ? a(e.background, -.015) : a(e.background, .1),
+		mutedForeground: t === "light" ? "oklch(0.44 0 0)" : "oklch(0.71 0 0)",
+		input: t === "light" ? a(e.border, .01) : a(e.border, .04),
+		ring: e.accent,
+		destructive: t === "light" ? "oklch(0.629 0.1902 23.0704)" : "oklch(0.7106 0.1661 22.2162)"
+	};
+}
+function c(e) {
+	return s({
+		primary: a(e.primary, .15),
+		accent: a(e.accent, .1),
+		secondary: o(e.secondary, .14),
+		border: o(e.border, .26),
+		card: o(e.card, .17),
+		background: o(e.background, .12)
+	}, "dark");
+}
+var l = [
+	"primary",
+	"accent",
+	"secondary",
+	"border",
+	"card",
+	"background",
+	"muted",
+	"mutedForeground",
+	"input",
+	"ring",
+	"destructive",
+	"popover"
+];
+function u(e, t) {
+	let n = { ...s(e, t) };
+	for (let t of l) e[t] && (n[t] = e[t]);
+	return n;
+}
+//#endregion
+//#region src/tokens/hex.ts
+function d(e) {
+	let t = r(e);
+	if (!t) throw Error(`oklchToHex: cannot parse "${e}"`);
+	let n = f(t.l, t.c, t.h);
+	if (!p(n)) {
+		let e = 0, r = t.c;
+		for (let n = 0; n < 40; n++) {
+			let n = (e + r) / 2;
+			p(f(t.l, n, t.h)) ? e = n : r = n;
+		}
+		n = f(t.l, e, t.h);
+	}
+	return `#${n.map(m).map(h).join("")}`;
+}
+function f(e, t, n) {
+	let r = n * Math.PI / 180, i = t * Math.cos(r), a = t * Math.sin(r), o = (e + .3963377774 * i + .2158037573 * a) ** 3, s = (e - .1055613458 * i - .0638541728 * a) ** 3, c = (e - .0894841775 * i - 1.291485548 * a) ** 3;
+	return [
+		4.0767416621 * o - 3.3077115913 * s + .2309699292 * c,
+		-1.2684380046 * o + 2.6097574011 * s - .3413193965 * c,
+		-.0041960863 * o - .7034186147 * s + 1.707614701 * c
+	];
+}
+function p(e) {
+	return e.every((e) => e >= -1e-6 && e <= 1.000001);
+}
+function m(e) {
+	let t = e <= .0031308 ? 12.92 * e : 1.055 * Math.max(0, e) ** (1 / 2.4) - .055;
+	return Math.round(Math.min(1, Math.max(0, t)) * 255);
+}
+function h(e) {
+	return e.toString(16).padStart(2, "0");
+}
+//#endregion
+//#region src/tokens/presets.ts
+var g = "midnight-glass", _ = "\"Geist Variable\", ui-sans-serif, system-ui, sans-serif", v = "\"GeistMono Variable\", \"JetBrains Mono\", \"Fira Code\", Consolas, monospace";
+function y(e, t) {
+	return {
+		type: e === "default" ? "solid" : "static",
+		id: e,
+		themed: t?.themed ?? !0,
+		url: t?.url
+	};
+}
+function b(e, t, n, r, i, a, o) {
+	return {
+		id: e,
+		name: t,
+		radius: n,
+		swatch: r,
+		colors: {
+			light: s(i, "light"),
+			dark: o ? s(o, "dark") : c(i)
+		},
+		background: a
+	};
+}
+var x = [
+	{
+		id: "midnight-glass",
+		name: "Midnight Glass",
+		radius: 1.4,
+		swatch: ["#1a6baa", "#22b8cf"],
+		colors: {
+			light: {
+				primary: "oklch(0.48 0.2 215.221)",
+				accent: "oklch(0.6 0.2 195)",
+				secondary: "oklch(0.96 0.01 250)",
+				border: "oklch(0.93 0.0094 286.2156)",
+				card: "oklch(0.99 0.008 285)",
+				background: "oklch(0.985 0.002 247.8763)",
+				popover: "oklch(0.9911 0 0)",
+				muted: "oklch(0.9702 0 0)",
+				mutedForeground: "oklch(0.4386 0 0)",
+				input: "oklch(0.9401 0 0)",
+				ring: "oklch(0.6132 0.2294 291.7437)",
+				destructive: "oklch(0.629 0.1902 23.0704)"
+			},
+			dark: {
+				primary: "oklch(0.48 0.2 215.221)",
+				accent: "oklch(0.6 0.2 195)",
+				secondary: "oklch(0.14 0.01 250)",
+				border: "oklch(0.26 0.012 250)",
+				card: "oklch(0.17 0.01 250)",
+				background: "oklch(0.12 0.01 250)",
+				popover: "oklch(0.16 0.005 0)",
+				muted: "oklch(0.22 0.006 0)",
+				mutedForeground: "oklch(0.7058 0 0)",
+				input: "oklch(0.25 0.005 0)",
+				ring: "oklch(0.6132 0.2294 291.7437)",
+				destructive: "oklch(0.7106 0.1661 22.2162)"
+			}
+		},
+		background: y("geometric-houses", { url: "/backgrounds/geometric-houses.svg" })
+	},
+	b("sunrise-studio", "Sunrise Studio", 1.2, ["#e8590c", "#fab005"], {
+		primary: "oklch(0.68 0.16 50)",
+		accent: "oklch(0.74 0.14 28)",
+		secondary: "oklch(0.92 0.04 82)",
+		border: "oklch(0.84 0.03 78)",
+		card: "oklch(0.96 0.02 85)",
+		background: "oklch(0.985 0.01 90)"
+	}, y("diagonal-stripes")),
+	b("forest-zen", "Forest Zen", 1.5, ["#2f9e44", "#12b886"], {
+		primary: "oklch(0.58 0.13 145)",
+		accent: "oklch(0.66 0.1 165)",
+		secondary: "oklch(0.9 0.03 150)",
+		border: "oklch(0.82 0.02 155)",
+		card: "oklch(0.95 0.01 150)",
+		background: "oklch(0.98 0.01 160)"
+	}, y("trees")),
+	b("lavender-dreams", "Lavender Dreams", 1.6, ["#9c36b5", "#e64980"], {
+		primary: "oklch(0.62 0.14 300)",
+		accent: "oklch(0.7 0.12 320)",
+		secondary: "oklch(0.93 0.03 290)",
+		border: "oklch(0.85 0.03 295)",
+		card: "oklch(0.97 0.02 300)",
+		background: "oklch(0.99 0.01 305)"
+	}, y("streets", { url: "/backgrounds/streets.svg" })),
+	b("coral-reef", "Coral Reef", 1.3, ["#e03131", "#fd7e14"], {
+		primary: "oklch(0.66 0.19 20)",
+		accent: "oklch(0.7 0.16 45)",
+		secondary: "oklch(0.91 0.04 35)",
+		border: "oklch(0.83 0.03 28)",
+		card: "oklch(0.96 0.02 25)",
+		background: "oklch(0.985 0.01 30)"
+	}, y("beauty-over-cliff", {
+		url: "/backgrounds/beauty-over-cliff.jpg",
+		themed: !1
+	})),
+	b("monochrome-pro", "Monochrome Pro", 0, ["#868e96", "#495057"], {
+		primary: "oklch(0.4 0.01 260)",
+		accent: "oklch(0.55 0.01 260)",
+		secondary: "oklch(0.94 0.005 260)",
+		border: "oklch(0.86 0.005 260)",
+		card: "oklch(0.98 0.003 260)",
+		background: "oklch(0.995 0.002 260)"
+	}, y("grid")),
+	b("ocean-breeze", "Ocean Breeze", 1.45, ["#1098ad", "#3b5bdb"], {
+		primary: "oklch(0.6 0.16 235)",
+		accent: "oklch(0.68 0.11 205)",
+		secondary: "oklch(0.92 0.03 225)",
+		border: "oklch(0.84 0.02 230)",
+		card: "oklch(0.97 0.01 230)",
+		background: "oklch(0.99 0.01 235)"
+	}, y("ride-the-wave", { url: "/backgrounds/ride-the-wave.svg" }))
+];
+function S() {
+	return x;
+}
+function C(e) {
+	return x.find((t) => t.id === e);
+}
+//#endregion
+export { g as DEFAULT_THEME_ID, v as FONT_MONO, _ as FONT_SANS, x as THEME_PRESETS, t as clamp, c as deriveDarkFromLight, u as ensureFullThemeColors, S as getAllPresets, C as getPreset, d as oklchToHex, r as parseOklch, s as resolveThemeColors, i as toOklch };

package/dist/tokens/presets.d.ts

@@ -0,0 +1,17 @@
+import { type BackgroundConfig, type ThemeColorsConfig } from "./theme-colors";
+export interface ThemePreset {
+    id: string;
+    name: string;
+    radius: number;
+    colors: ThemeColorsConfig;
+    background: BackgroundConfig;
+    /** Curated two-stop gradient used for theme picker dots and marketing swatches. */
+    swatch: [string, string];
+}
+export declare const DEFAULT_THEME_ID = "midnight-glass";
+/** Font stacks as shipped in styles/theme.css. */
+export declare const FONT_SANS = "\"Geist Variable\", ui-sans-serif, system-ui, sans-serif";
+export declare const FONT_MONO = "\"GeistMono Variable\", \"JetBrains Mono\", \"Fira Code\", Consolas, monospace";
+export declare const THEME_PRESETS: ThemePreset[];
+export declare function getAllPresets(): ThemePreset[];
+export declare function getPreset(id: string): ThemePreset | undefined;

package/dist/tokens/theme-colors.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Theme color model + derivation. Framework-free: safe to import from servers,
+ * build scripts, and non-Solid renderers.
+ */
+export interface ThemeColors {
+    primary: string;
+    accent: string;
+    secondary: string;
+    border: string;
+    card: string;
+    background: string;
+    muted: string;
+    mutedForeground: string;
+    input: string;
+    ring: string;
+    destructive: string;
+    popover: string;
+}
+export interface ThemeColorsConfig {
+    light: ThemeColors;
+    dark: ThemeColors;
+}
+export interface BackgroundConfig {
+    type: "solid" | "static" | "custom";
+    id: string;
+    themed: boolean;
+    url?: string;
+    fit?: "cover" | "contain" | "tile";
+    overlay?: number;
+    blur?: number;
+}
+/** The 6 base colors used as input for resolving a full ThemeColors */
+export type ThemeBaseColors = Pick<ThemeColors, "primary" | "accent" | "secondary" | "border" | "card" | "background">;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function parseOklch(input: string): {
+    l: number;
+    c: number;
+    h: number;
+} | null;
+export declare function toOklch(l: number, c: number, h: number): string;
+/**
+ * Resolve the 6 base colors into a full ThemeColors.
+ * Used for presets and for backwards-compat with old DB data.
+ */
+export declare function resolveThemeColors(base: ThemeBaseColors, mode: "light" | "dark"): ThemeColors;
+export declare function deriveDarkFromLight(light: ThemeBaseColors): ThemeColors;
+/**
+ * Ensure a potentially partial colors object (from old DB data) has all fields.
+ * Existing values are preserved; missing ones are resolved from the base colors.
+ */
+export declare function ensureFullThemeColors(partial: ThemeBaseColors & Partial<ThemeColors>, mode: "light" | "dark"): ThemeColors;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@glasshome/ui",
-	"version": "0.3.3",
+	"version": "0.4.0",
 	"description": "SolidJS component library for GlassHome, built on Kobalte",
 	"type": "module",
 	"main": "./dist/index.js",
@@ -37,6 +37,11 @@
 			"types": "./dist/solid/index.d.ts",
 			"import": "./dist/solid/index.js"
 		},
+		"./tokens": {
+			"@glasshome/source": "./src/tokens/index.ts",
+			"types": "./dist/tokens/index.d.ts",
+			"import": "./dist/tokens/index.js"
+		},
 		"./styles": "./src/styles/globals.css",
 		"./package.json": "./package.json",
 		"./styles/theme": "./src/styles/theme.css"
@@ -47,6 +52,7 @@
 	],
 	"scripts": {
 		"build": "vite build && tsc",
+		"check:tokens": "bun scripts/check-tokens.ts",
 		"dev": "vite build --watch",
 		"lint": "biome check ."
 	},