colorsbymax 0.4.0 → 0.4.1

package/dist/{ThemeSwitcher-DB_-2YB8.js → ThemeSwitcher-BFOWqFUZ.js}

@@ -6121,11 +6121,28 @@ function PaletteFromFile() {
 		]
 	});
 }
+var EXPORT_FORMATS = [{
+	id: "json",
+	label: "JSON",
+	type: "application/json",
+	ext: "theme.json",
+	what: "theme JSON"
+}, {
+	id: "css",
+	label: "CSS",
+	type: "text/css",
+	ext: "theme.css",
+	what: "theme CSS"
+}];
 function ImportExport() {
-	const { exportTheme, importTheme } = useTheme();
+	const { exportTheme, importTheme, tokens } = useTheme();
 	const { toast } = usePanel();
 	const savedToYours = useSavedToYours();
 	const json = exportTheme();
+	const themeName = JSON.parse(json).name;
+	const [format, setFormat] = useState("json");
+	const out = EXPORT_FORMATS.find((f) => f.id === format);
+	const text = format === "css" ? `/* ${themeName.replace(/\*\//g, "")}, from colorsbymax */\n${cssSnippet(tokens)}\n` : json;
 	const [status, setStatus] = useState(null);
 	const [input, setInput] = useState("");
 	const exportId = useId();
@@ -6152,15 +6169,30 @@ function ImportExport() {
 			/* @__PURE__ */ jsxs("div", {
 				className: "space-y-1.5",
 				children: [
-					/* @__PURE__ */ jsx("label", {
-						htmlFor: exportId,
-						className: "block text-xs font-medium text-zinc-700",
-						children: "Current theme as JSON"
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ jsxs("label", {
+							htmlFor: exportId,
+							className: "block text-xs font-medium text-zinc-700",
+							children: ["Current theme as ", out.label]
+						}), /* @__PURE__ */ jsx("div", {
+							role: "radiogroup",
+							"aria-label": "Export as",
+							className: "flex shrink-0 items-center rounded-lg border border-zinc-200 p-0.5",
+							children: EXPORT_FORMATS.map((f) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								role: "radio",
+								"aria-checked": format === f.id,
+								onClick: () => setFormat(f.id),
+								className: `h-6 rounded-md px-2 text-[11px] font-semibold cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 ${format === f.id ? "bg-zinc-900 text-white" : "text-zinc-700 hover:bg-zinc-100"}`,
+								children: f.label
+							}, f.id))
+						})]
 					}),
 					/* @__PURE__ */ jsx("textarea", {
 						id: exportId,
 						readOnly: true,
-						value: json,
+						value: text,
 						rows: 5,
 						className: `${field} font-mono text-[11px]`
 					}),
@@ -6171,9 +6203,9 @@ function ImportExport() {
 							className: btn,
 							onClick: async () => {
 								try {
-									await navigator.clipboard.writeText(json);
+									await navigator.clipboard.writeText(text);
 									setStatus(null);
-									toast("Copied the theme JSON to your clipboard.");
+									toast(`Copied the ${out.what} to your clipboard.`);
 								} catch {
 									setStatus({
 										ok: false,
@@ -6189,10 +6221,10 @@ function ImportExport() {
 							type: "button",
 							className: btn,
 							onClick: () => {
-								const url = URL.createObjectURL(new Blob([json], { type: "application/json" }));
+								const url = URL.createObjectURL(new Blob([text], { type: out.type }));
 								const a = document.createElement("a");
 								a.href = url;
-								a.download = `${JSON.parse(json).name.toLowerCase().replace(/[^a-z0-9]+/g, "-")}.theme.json`;
+								a.download = `${themeName.toLowerCase().replace(/[^a-z0-9]+/g, "-")}.${out.ext}`;
 								a.click();
 								toast(`Downloaded ${a.download}.`);
 								URL.revokeObjectURL(url);
@@ -6898,7 +6930,12 @@ function Switcher() {
 		width: settings.panelWidth,
 		height: settings.panelHeight
 	};
-	const layout = panelLayout(placed ?? (position === "top-right" ? null : cornerPoint(position, viewport)), viewport, size);
+	const offsetTop = useTopOffset();
+	const corner = placed ?? (position === "top-right" ? null : cornerPoint(position, viewport));
+	const layout = panelLayout(corner && !placed && position.startsWith("top") ? {
+		...corner,
+		top: corner.top + offsetTop
+	} : corner, viewport, size, offsetTop);
 	const onResizeStart = (edges) => (e) => {
 		if (e.button !== 0) return;
 		e.preventDefault();
@@ -7135,7 +7172,7 @@ function Switcher() {
 					onPointerUp: onDragEnd,
 					onPointerCancel: onDragEnd,
 					onLostPointerCapture: onDragEnd,
-					style: placed ?? void 0,
+					style: placed ?? (offsetTop && position.startsWith("top") ? { marginTop: offsetTop } : void 0),
 					className: `theme-switcher fixed z-[60] ${placed ? "" : CORNERS[position]} grid place-items-center w-9 h-9 rounded-full border border-zinc-200 bg-white/90 text-zinc-700 backdrop-blur hover:bg-white hover:text-zinc-900 transition-[color,background-color,box-shadow,scale] select-none ${settings.draggable ? "touch-none" : ""} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-2 ${dragPoint ? "scale-110 shadow-xl cursor-grabbing" : "shadow-md cursor-pointer"} ${entering ? "theme-arrive" : ""}`,
 					children: [
 						/* @__PURE__ */ jsx(Palette, {
@@ -7313,6 +7350,29 @@ function TooltipLayer({ rootRef }) {
 	});
 }
 /** Viewport size without scrollbars: the area fixed elements are placed in. */
+/**
+* How far a bar the site pins to the top of the page (above its nav, e.g. an announcement) pushes
+* the colour button and panel down: the CSS variable --colorsbymax-offset-top on <html>, in px.
+*/
+function useTopOffset() {
+	const read = () => parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--colorsbymax-offset-top")) || 0;
+	const [offset, setOffset] = useState(read);
+	useLayoutEffect(() => {
+		const update = () => setOffset(read());
+		const observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["style", "class"]
+		});
+		window.addEventListener("resize", update);
+		update();
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", update);
+		};
+	}, []);
+	return offset;
+}
 function useViewport() {
 	const read = () => ({
 		width: document.documentElement.clientWidth,
@@ -7367,7 +7427,7 @@ function cornerPoint(position, { width, height }) {
 * @param {{ left: number, top: number } | null} button
 * @param {{ width: number | null, height: number | 'full' | null }} size
 */
-function panelLayout(button, { width: vw, height: vh }, size) {
+function panelLayout(button, { width: vw, height: vh }, size, offsetTop = 0) {
 	const narrow = vw < 640;
 	const style = {};
 	const free = {
@@ -7380,7 +7440,7 @@ function panelLayout(button, { width: vw, height: vh }, size) {
 	let maxHeight;
 	if (!button) {
 		const wide = vw >= 1200;
-		style.top = wide ? 72 : 128;
+		style.top = (wide ? 72 : 128) + offsetTop;
 		style.right = narrow ? EDGE : wide ? 16 : 24;
 		maxHeight = vh - style.top - EDGE;
 		free.bottom = true;

package/dist/auto.js

@@ -1,4 +1,4 @@
-import { o as ThemeProvider, t as ThemeSwitcher } from "./ThemeSwitcher-DB_-2YB8.js";
+import { o as ThemeProvider, t as ThemeSwitcher } from "./ThemeSwitcher-BFOWqFUZ.js";
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
 //#region src/auto.js

package/dist/index.js

@@ -1,2 +1,2 @@
-import { A as PAIRINGS, C as TOKEN_KEYS, D as MIN_CONTRAST_NON_TEXT, E as MIN_CONTRAST_LARGE_TEXT, F as contrastRatio, I as normalizeHex, M as checkTheme, N as fixAll, O as MIN_CONTRAST_TEXT, P as suggestFix, S as TOKEN_GROUPS, T as deriveAppTokens, _ as darkTokens, a as themeFromPalette, b as BASE_TOKENS, c as useTheme, d as DEFAULT_SETTINGS, f as collectColors, g as themeFromRoles, h as suggestThemes, i as rolesFromPalette, j as checkRamp, k as MIN_RAMP_STEP_DELTA_E, l as DEFAULT_STORAGE_KEY, m as inferRoles, n as coloursFromFile, o as ThemeProvider, p as detectSiteName, r as dominantColours, s as applyTokens, t as ThemeSwitcher, u as prePaintScript, v as isDarkTheme, w as completeTokens, x as PRESETS, y as toDark } from "./ThemeSwitcher-DB_-2YB8.js";
+import { A as PAIRINGS, C as TOKEN_KEYS, D as MIN_CONTRAST_NON_TEXT, E as MIN_CONTRAST_LARGE_TEXT, F as contrastRatio, I as normalizeHex, M as checkTheme, N as fixAll, O as MIN_CONTRAST_TEXT, P as suggestFix, S as TOKEN_GROUPS, T as deriveAppTokens, _ as darkTokens, a as themeFromPalette, b as BASE_TOKENS, c as useTheme, d as DEFAULT_SETTINGS, f as collectColors, g as themeFromRoles, h as suggestThemes, i as rolesFromPalette, j as checkRamp, k as MIN_RAMP_STEP_DELTA_E, l as DEFAULT_STORAGE_KEY, m as inferRoles, n as coloursFromFile, o as ThemeProvider, p as detectSiteName, r as dominantColours, s as applyTokens, t as ThemeSwitcher, u as prePaintScript, v as isDarkTheme, w as completeTokens, x as PRESETS, y as toDark } from "./ThemeSwitcher-BFOWqFUZ.js";
 export { BASE_TOKENS, DEFAULT_SETTINGS, DEFAULT_STORAGE_KEY, MIN_CONTRAST_LARGE_TEXT, MIN_CONTRAST_NON_TEXT, MIN_CONTRAST_TEXT, MIN_RAMP_STEP_DELTA_E, PAIRINGS, PRESETS, TOKEN_GROUPS, TOKEN_KEYS, ThemeProvider, ThemeSwitcher, applyTokens, checkRamp, checkTheme, collectColors, coloursFromFile, completeTokens, contrastRatio, darkTokens, deriveAppTokens, detectSiteName, dominantColours, fixAll, inferRoles, isDarkTheme, normalizeHex, prePaintScript, rolesFromPalette, suggestFix, suggestThemes, themeFromPalette, themeFromRoles, toDark, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colorsbymax",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A live theme switcher for any website: site themes, 700+ palettes, for light/dark modes and WCAG contrast checks.",
   "keywords": [
     "theme",