@nocoo/basalt 2.0.0 → 2.0.3

package/dist/providers/accent.js

@@ -4,107 +4,229 @@ import { jsx as o } from "react/jsx-runtime";
 //#region src/providers/accent.tsx
 var s = [
 	{
-		id: "blue",
-		label: "Blue",
-		light: "217 80% 36%",
-		dark: "217 80% 38%",
-		foreground: "0 0% 100%"
+		id: "primary",
+		label: "Primary",
+		token: "--basalt-chart-1",
+		light: "217 91% 60%",
+		dark: "217 91% 65%"
+	},
+	{
+		id: "sky",
+		label: "Sky",
+		token: "--basalt-chart-2",
+		light: "200 90% 55%",
+		dark: "200 90% 60%"
 	},
 	{
 		id: "teal",
 		label: "Teal",
-		light: "186 72% 28%",
-		dark: "186 72% 32%",
-		foreground: "0 0% 100%"
+		token: "--basalt-chart-3",
+		light: "186 80% 45%",
+		dark: "186 80% 50%"
+	},
+	{
+		id: "jade",
+		label: "Jade",
+		token: "--basalt-chart-4",
+		light: "166 72% 44%",
+		dark: "166 72% 50%"
 	},
 	{
 		id: "green",
 		label: "Green",
-		light: "142 64% 28%",
-		dark: "142 64% 32%",
-		foreground: "0 0% 100%"
+		token: "--basalt-chart-5",
+		light: "142 71% 45%",
+		dark: "142 71% 50%"
+	},
+	{
+		id: "lime",
+		label: "Lime",
+		token: "--basalt-chart-6",
+		light: "84 65% 46%",
+		dark: "84 65% 52%"
 	},
 	{
 		id: "amber",
 		label: "Amber",
-		light: "38 88% 44%",
-		dark: "38 88% 56%",
-		foreground: "0 0% 10%"
+		token: "--basalt-chart-7",
+		light: "45 93% 47%",
+		dark: "45 93% 52%"
 	},
 	{
 		id: "orange",
 		label: "Orange",
-		light: "24 86% 36%",
-		dark: "24 86% 38%",
-		foreground: "0 0% 100%"
+		token: "--basalt-chart-8",
+		light: "30 90% 55%",
+		dark: "30 90% 60%"
+	},
+	{
+		id: "vermilion",
+		label: "Vermilion",
+		token: "--basalt-chart-9",
+		light: "15 85% 52%",
+		dark: "15 85% 57%"
+	},
+	{
+		id: "red",
+		label: "Red",
+		token: "--basalt-chart-10",
+		light: "0 72% 51%",
+		dark: "0 72% 56%"
 	},
 	{
 		id: "rose",
 		label: "Rose",
-		light: "340 72% 36%",
-		dark: "340 72% 38%",
-		foreground: "0 0% 100%"
+		token: "--basalt-chart-11",
+		light: "340 82% 55%",
+		dark: "340 82% 60%"
+	},
+	{
+		id: "magenta",
+		label: "Magenta",
+		token: "--basalt-chart-12",
+		light: "320 70% 55%",
+		dark: "320 70% 60%"
+	},
+	{
+		id: "orchid",
+		label: "Orchid",
+		token: "--basalt-chart-13",
+		light: "290 65% 55%",
+		dark: "290 65% 60%"
 	},
 	{
 		id: "purple",
 		label: "Purple",
-		light: "270 52% 36%",
-		dark: "270 52% 38%",
-		foreground: "0 0% 100%"
+		token: "--basalt-chart-14",
+		light: "270 70% 60%",
+		dark: "270 70% 65%"
 	},
 	{
 		id: "indigo",
 		label: "Indigo",
-		light: "250 52% 36%",
-		dark: "250 52% 38%",
-		foreground: "0 0% 100%"
+		token: "--basalt-chart-15",
+		light: "250 65% 58%",
+		dark: "250 65% 63%"
+	},
+	{
+		id: "cobalt",
+		label: "Cobalt",
+		token: "--basalt-chart-16",
+		light: "230 70% 56%",
+		dark: "230 70% 61%"
+	},
+	{
+		id: "steel",
+		label: "Steel",
+		token: "--basalt-chart-17",
+		light: "210 55% 50%",
+		dark: "210 55% 56%"
+	},
+	{
+		id: "cadet",
+		label: "Cadet",
+		token: "--basalt-chart-18",
+		light: "195 45% 55%",
+		dark: "195 45% 60%"
+	},
+	{
+		id: "seafoam",
+		label: "Seafoam",
+		token: "--basalt-chart-19",
+		light: "160 50% 50%",
+		dark: "160 50% 55%"
+	},
+	{
+		id: "olive",
+		label: "Olive",
+		token: "--basalt-chart-20",
+		light: "100 50% 48%",
+		dark: "100 50% 53%"
+	},
+	{
+		id: "gold",
+		label: "Gold",
+		token: "--basalt-chart-21",
+		light: "60 65% 45%",
+		dark: "60 65% 50%"
+	},
+	{
+		id: "tangerine",
+		label: "Tangerine",
+		token: "--basalt-chart-22",
+		light: "22 80% 50%",
+		dark: "22 80% 55%"
+	},
+	{
+		id: "crimson",
+		label: "Crimson",
+		token: "--basalt-chart-23",
+		light: "350 65% 50%",
+		dark: "350 65% 55%"
+	},
+	{
+		id: "gray",
+		label: "Gray",
+		token: "--basalt-chart-24",
+		light: "0 0% 25%",
+		dark: "0 0% 65%"
 	}
-], c = "blue", l = "basalt-accent", u = e(null);
+], c = "primary", l = "basalt-accent", u = e(null);
 function d(e) {
 	return s.find((t) => t.id === e) ?? s[0];
 }
-function f(e, t = !1) {
+function f(e) {
+	return e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
+}
+function p(e) {
+	let [t, n, r] = e.trim().split(/\s+/), i = Number(t), a = Number(n.replace("%", "")) / 100, o = Number(r.replace("%", "")) / 100, s = a * Math.min(o, 1 - o), c = (e) => {
+		let t = (e + i / 30) % 12;
+		return o - s * Math.max(Math.min(t - 3, 9 - t, 1), -1);
+	};
+	return .2126 * f(c(0)) + .7152 * f(c(8)) + .0722 * f(c(4)) > .35 ? "0 0% 10%" : "0 0% 100%";
+}
+function m(e, t = !1) {
 	let n = d(e), r = t ? n.dark : n.light, i = document.documentElement;
-	i.style.setProperty("--basalt-primary", r), i.style.setProperty("--basalt-primary-foreground", n.foreground), i.style.setProperty("--basalt-ring", r), i.style.setProperty("--basalt-chart-1", r), i.dataset.accent = n.id;
+	i.style.setProperty("--basalt-primary", r), i.style.setProperty("--basalt-primary-foreground", p(r)), i.style.setProperty("--basalt-ring", r), i.dataset.accent = n.id;
 }
-function p() {
+function h() {
 	return d(window.localStorage.getItem(l)).id;
 }
-function m(e) {
+function g(e) {
 	return window.addEventListener("storage", e), () => window.removeEventListener("storage", e);
 }
-function h() {
+function _() {
 	return document.documentElement.classList.contains("dark");
 }
-function g({ children: e }) {
-	let n = a(m, p, () => c);
+function v({ children: e }) {
+	let n = a(g, h, () => c);
 	r(() => {
-		f(n, h());
-		let e = new MutationObserver(() => f(n, h()));
+		m(n, _());
+		let e = new MutationObserver(() => m(n, _()));
 		return e.observe(document.documentElement, {
 			attributes: !0,
 			attributeFilter: ["class"]
 		}), () => e.disconnect();
 	}, [n]);
-	let g = t((e) => {
+	let f = t((e) => {
 		let t = d(e).id;
-		window.localStorage.setItem(l, t), f(t, h()), window.dispatchEvent(new Event("storage"));
-	}, []), _ = i(() => ({
+		window.localStorage.setItem(l, t), m(t, _()), window.dispatchEvent(new Event("storage"));
+	}, []), p = i(() => ({
 		accent: n,
-		setAccent: g,
+		setAccent: f,
 		swatches: s
-	}), [n, g]);
+	}), [n, f]);
 	return /* @__PURE__ */ o(u.Provider, {
-		value: _,
+		value: p,
 		children: e
 	});
 }
-function _() {
+function y() {
 	let e = n(u);
 	if (!e) throw Error("useAccent must be used within AccentProvider");
 	return e;
 }
 //#endregion
-export { s as ACCENT_SWATCHES, g as AccentProvider, c as DEFAULT_ACCENT_ID, d as accentSwatchById, f as applyAccent, _ as useAccent };
+export { s as ACCENT_SWATCHES, v as AccentProvider, c as DEFAULT_ACCENT_ID, p as accentForeground, d as accentSwatchById, m as applyAccent, y as useAccent };
 
 //# sourceMappingURL=accent.js.map

package/dist/providers/accent.js.map

@@ -1 +1 @@
-{"version":3,"file":"accent.js","names":[],"sources":["../../src/providers/accent.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype ReactNode,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseSyncExternalStore,\n} from \"react\";\n\nexport type AccentSwatch = {\n\tid: string;\n\tlabel: string;\n\tlight: string;\n\tdark: string;\n\tforeground: string;\n};\n\nexport const ACCENT_SWATCHES: readonly AccentSwatch[] = [\n\t{ id: \"blue\", label: \"Blue\", light: \"217 80% 36%\", dark: \"217 80% 38%\", foreground: \"0 0% 100%\" },\n\t{ id: \"teal\", label: \"Teal\", light: \"186 72% 28%\", dark: \"186 72% 32%\", foreground: \"0 0% 100%\" },\n\t{\n\t\tid: \"green\",\n\t\tlabel: \"Green\",\n\t\tlight: \"142 64% 28%\",\n\t\tdark: \"142 64% 32%\",\n\t\tforeground: \"0 0% 100%\",\n\t},\n\t{ id: \"amber\", label: \"Amber\", light: \"38 88% 44%\", dark: \"38 88% 56%\", foreground: \"0 0% 10%\" },\n\t{\n\t\tid: \"orange\",\n\t\tlabel: \"Orange\",\n\t\tlight: \"24 86% 36%\",\n\t\tdark: \"24 86% 38%\",\n\t\tforeground: \"0 0% 100%\",\n\t},\n\t{ id: \"rose\", label: \"Rose\", light: \"340 72% 36%\", dark: \"340 72% 38%\", foreground: \"0 0% 100%\" },\n\t{\n\t\tid: \"purple\",\n\t\tlabel: \"Purple\",\n\t\tlight: \"270 52% 36%\",\n\t\tdark: \"270 52% 38%\",\n\t\tforeground: \"0 0% 100%\",\n\t},\n\t{\n\t\tid: \"indigo\",\n\t\tlabel: \"Indigo\",\n\t\tlight: \"250 52% 36%\",\n\t\tdark: \"250 52% 38%\",\n\t\tforeground: \"0 0% 100%\",\n\t},\n] as const;\n\nexport const DEFAULT_ACCENT_ID = \"blue\";\nconst STORAGE_KEY = \"basalt-accent\";\n\ntype AccentContextValue = {\n\taccent: string;\n\tsetAccent: (id: string) => void;\n\tswatches: readonly AccentSwatch[];\n};\n\nconst AccentContext = createContext<AccentContextValue | null>(null);\n\nexport function accentSwatchById(id: string | null | undefined): AccentSwatch {\n\treturn ACCENT_SWATCHES.find((swatch) => swatch.id === id) ?? ACCENT_SWATCHES[0];\n}\n\nexport function applyAccent(id: string, dark = false) {\n\tconst swatch = accentSwatchById(id);\n\tconst value = dark ? swatch.dark : swatch.light;\n\tconst root = document.documentElement;\n\troot.style.setProperty(\"--basalt-primary\", value);\n\troot.style.setProperty(\"--basalt-primary-foreground\", swatch.foreground);\n\troot.style.setProperty(\"--basalt-ring\", value);\n\troot.style.setProperty(\"--basalt-chart-1\", value);\n\troot.dataset.accent = swatch.id;\n}\n\nfunction readAccent(): string {\n\treturn accentSwatchById(window.localStorage.getItem(STORAGE_KEY)).id;\n}\n\nfunction subscribe(onStoreChange: () => void) {\n\twindow.addEventListener(\"storage\", onStoreChange);\n\treturn () => window.removeEventListener(\"storage\", onStoreChange);\n}\n\nfunction isDarkMode(): boolean {\n\treturn document.documentElement.classList.contains(\"dark\");\n}\n\nexport function AccentProvider({ children }: { children: ReactNode }) {\n\tconst accent = useSyncExternalStore(subscribe, readAccent, () => DEFAULT_ACCENT_ID);\n\tuseEffect(() => {\n\t\tapplyAccent(accent, isDarkMode());\n\t\tconst observer = new MutationObserver(() => applyAccent(accent, isDarkMode()));\n\t\tobserver.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n\t\treturn () => observer.disconnect();\n\t}, [accent]);\n\tconst setAccent = useCallback((id: string) => {\n\t\tconst next = accentSwatchById(id).id;\n\t\twindow.localStorage.setItem(STORAGE_KEY, next);\n\t\tapplyAccent(next, isDarkMode());\n\t\twindow.dispatchEvent(new Event(\"storage\"));\n\t}, []);\n\tconst value = useMemo(\n\t\t() => ({ accent, setAccent, swatches: ACCENT_SWATCHES }),\n\t\t[accent, setAccent],\n\t);\n\treturn <AccentContext.Provider value={value}>{children}</AccentContext.Provider>;\n}\n\nexport function useAccent() {\n\tconst ctx = useContext(AccentContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useAccent must be used within AccentProvider\");\n\t}\n\treturn ctx;\n}\n"],"mappings":";;;;AAkBA,IAAa,IAA2C;CACvD;EAAE,IAAI;EAAQ,OAAO;EAAQ,OAAO;EAAe,MAAM;EAAe,YAAY;CAAY;CAChG;EAAE,IAAI;EAAQ,OAAO;EAAQ,OAAO;EAAe,MAAM;EAAe,YAAY;CAAY;CAChG;EACC,IAAI;EACJ,OAAO;EACP,OAAO;EACP,MAAM;EACN,YAAY;CACb;CACA;EAAE,IAAI;EAAS,OAAO;EAAS,OAAO;EAAc,MAAM;EAAc,YAAY;CAAW;CAC/F;EACC,IAAI;EACJ,OAAO;EACP,OAAO;EACP,MAAM;EACN,YAAY;CACb;CACA;EAAE,IAAI;EAAQ,OAAO;EAAQ,OAAO;EAAe,MAAM;EAAe,YAAY;CAAY;CAChG;EACC,IAAI;EACJ,OAAO;EACP,OAAO;EACP,MAAM;EACN,YAAY;CACb;CACA;EACC,IAAI;EACJ,OAAO;EACP,OAAO;EACP,MAAM;EACN,YAAY;CACb;AACD,GAEa,IAAoB,QAC3B,IAAc,iBAQd,IAAgB,EAAyC,IAAI;AAEnE,SAAgB,EAAiB,GAA6C;CAC7E,OAAO,EAAgB,MAAM,MAAW,EAAO,OAAO,CAAE,KAAK,EAAgB;AAC9E;AAEA,SAAgB,EAAY,GAAY,IAAO,IAAO;CACrD,IAAM,IAAS,EAAiB,CAAE,GAC5B,IAAQ,IAAO,EAAO,OAAO,EAAO,OACpC,IAAO,SAAS;CAKtB,AAJA,EAAK,MAAM,YAAY,oBAAoB,CAAK,GAChD,EAAK,MAAM,YAAY,+BAA+B,EAAO,UAAU,GACvE,EAAK,MAAM,YAAY,iBAAiB,CAAK,GAC7C,EAAK,MAAM,YAAY,oBAAoB,CAAK,GAChD,EAAK,QAAQ,SAAS,EAAO;AAC9B;AAEA,SAAS,IAAqB;CAC7B,OAAO,EAAiB,OAAO,aAAa,QAAQ,CAAW,CAAC,CAAC,CAAC;AACnE;AAEA,SAAS,EAAU,GAA2B;CAE7C,OADA,OAAO,iBAAiB,WAAW,CAAa,SACnC,OAAO,oBAAoB,WAAW,CAAa;AACjE;AAEA,SAAS,IAAsB;CAC9B,OAAO,SAAS,gBAAgB,UAAU,SAAS,MAAM;AAC1D;AAEA,SAAgB,EAAe,EAAE,eAAqC;CACrE,IAAM,IAAS,EAAqB,GAAW,SAAkB,CAAiB;CAClF,QAAgB;EACf,EAAY,GAAQ,EAAW,CAAC;EAChC,IAAM,IAAW,IAAI,uBAAuB,EAAY,GAAQ,EAAW,CAAC,CAAC;EAE7E,OADA,EAAS,QAAQ,SAAS,iBAAiB;GAAE,YAAY;GAAM,iBAAiB,CAAC,OAAO;EAAE,CAAC,SAC9E,EAAS,WAAW;CAClC,GAAG,CAAC,CAAM,CAAC;CACX,IAAM,IAAY,GAAa,MAAe;EAC7C,IAAM,IAAO,EAAiB,CAAE,CAAC,CAAC;EAGlC,AAFA,OAAO,aAAa,QAAQ,GAAa,CAAI,GAC7C,EAAY,GAAM,EAAW,CAAC,GAC9B,OAAO,cAAc,IAAI,MAAM,SAAS,CAAC;CAC1C,GAAG,CAAC,CAAC,GACC,IAAQ,SACN;EAAE;EAAQ;EAAW,UAAU;CAAgB,IACtD,CAAC,GAAQ,CAAS,CACnB;CACA,OAAO,kBAAC,EAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AAChF;AAEA,SAAgB,IAAY;CAC3B,IAAM,IAAM,EAAW,CAAa;CACpC,IAAI,CAAC,GACJ,MAAU,MAAM,8CAA8C;CAE/D,OAAO;AACR"}
+{"version":3,"file":"accent.js","names":[],"sources":["../../src/providers/accent.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype ReactNode,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseSyncExternalStore,\n} from \"react\";\n\nexport type AccentSwatch = {\n\tid: string;\n\tlabel: string;\n\ttoken: string;\n\tlight: string;\n\tdark: string;\n};\n\nexport const ACCENT_SWATCHES: readonly AccentSwatch[] = [\n\t{\n\t\tid: \"primary\",\n\t\tlabel: \"Primary\",\n\t\ttoken: \"--basalt-chart-1\",\n\t\tlight: \"217 91% 60%\",\n\t\tdark: \"217 91% 65%\",\n\t},\n\t{ id: \"sky\", label: \"Sky\", token: \"--basalt-chart-2\", light: \"200 90% 55%\", dark: \"200 90% 60%\" },\n\t{\n\t\tid: \"teal\",\n\t\tlabel: \"Teal\",\n\t\ttoken: \"--basalt-chart-3\",\n\t\tlight: \"186 80% 45%\",\n\t\tdark: \"186 80% 50%\",\n\t},\n\t{\n\t\tid: \"jade\",\n\t\tlabel: \"Jade\",\n\t\ttoken: \"--basalt-chart-4\",\n\t\tlight: \"166 72% 44%\",\n\t\tdark: \"166 72% 50%\",\n\t},\n\t{\n\t\tid: \"green\",\n\t\tlabel: \"Green\",\n\t\ttoken: \"--basalt-chart-5\",\n\t\tlight: \"142 71% 45%\",\n\t\tdark: \"142 71% 50%\",\n\t},\n\t{ id: \"lime\", label: \"Lime\", token: \"--basalt-chart-6\", light: \"84 65% 46%\", dark: \"84 65% 52%\" },\n\t{\n\t\tid: \"amber\",\n\t\tlabel: \"Amber\",\n\t\ttoken: \"--basalt-chart-7\",\n\t\tlight: \"45 93% 47%\",\n\t\tdark: \"45 93% 52%\",\n\t},\n\t{\n\t\tid: \"orange\",\n\t\tlabel: \"Orange\",\n\t\ttoken: \"--basalt-chart-8\",\n\t\tlight: \"30 90% 55%\",\n\t\tdark: \"30 90% 60%\",\n\t},\n\t{\n\t\tid: \"vermilion\",\n\t\tlabel: \"Vermilion\",\n\t\ttoken: \"--basalt-chart-9\",\n\t\tlight: \"15 85% 52%\",\n\t\tdark: \"15 85% 57%\",\n\t},\n\t{ id: \"red\", label: \"Red\", token: \"--basalt-chart-10\", light: \"0 72% 51%\", dark: \"0 72% 56%\" },\n\t{\n\t\tid: \"rose\",\n\t\tlabel: \"Rose\",\n\t\ttoken: \"--basalt-chart-11\",\n\t\tlight: \"340 82% 55%\",\n\t\tdark: \"340 82% 60%\",\n\t},\n\t{\n\t\tid: \"magenta\",\n\t\tlabel: \"Magenta\",\n\t\ttoken: \"--basalt-chart-12\",\n\t\tlight: \"320 70% 55%\",\n\t\tdark: \"320 70% 60%\",\n\t},\n\t{\n\t\tid: \"orchid\",\n\t\tlabel: \"Orchid\",\n\t\ttoken: \"--basalt-chart-13\",\n\t\tlight: \"290 65% 55%\",\n\t\tdark: \"290 65% 60%\",\n\t},\n\t{\n\t\tid: \"purple\",\n\t\tlabel: \"Purple\",\n\t\ttoken: \"--basalt-chart-14\",\n\t\tlight: \"270 70% 60%\",\n\t\tdark: \"270 70% 65%\",\n\t},\n\t{\n\t\tid: \"indigo\",\n\t\tlabel: \"Indigo\",\n\t\ttoken: \"--basalt-chart-15\",\n\t\tlight: \"250 65% 58%\",\n\t\tdark: \"250 65% 63%\",\n\t},\n\t{\n\t\tid: \"cobalt\",\n\t\tlabel: \"Cobalt\",\n\t\ttoken: \"--basalt-chart-16\",\n\t\tlight: \"230 70% 56%\",\n\t\tdark: \"230 70% 61%\",\n\t},\n\t{\n\t\tid: \"steel\",\n\t\tlabel: \"Steel\",\n\t\ttoken: \"--basalt-chart-17\",\n\t\tlight: \"210 55% 50%\",\n\t\tdark: \"210 55% 56%\",\n\t},\n\t{\n\t\tid: \"cadet\",\n\t\tlabel: \"Cadet\",\n\t\ttoken: \"--basalt-chart-18\",\n\t\tlight: \"195 45% 55%\",\n\t\tdark: \"195 45% 60%\",\n\t},\n\t{\n\t\tid: \"seafoam\",\n\t\tlabel: \"Seafoam\",\n\t\ttoken: \"--basalt-chart-19\",\n\t\tlight: \"160 50% 50%\",\n\t\tdark: \"160 50% 55%\",\n\t},\n\t{\n\t\tid: \"olive\",\n\t\tlabel: \"Olive\",\n\t\ttoken: \"--basalt-chart-20\",\n\t\tlight: \"100 50% 48%\",\n\t\tdark: \"100 50% 53%\",\n\t},\n\t{\n\t\tid: \"gold\",\n\t\tlabel: \"Gold\",\n\t\ttoken: \"--basalt-chart-21\",\n\t\tlight: \"60 65% 45%\",\n\t\tdark: \"60 65% 50%\",\n\t},\n\t{\n\t\tid: \"tangerine\",\n\t\tlabel: \"Tangerine\",\n\t\ttoken: \"--basalt-chart-22\",\n\t\tlight: \"22 80% 50%\",\n\t\tdark: \"22 80% 55%\",\n\t},\n\t{\n\t\tid: \"crimson\",\n\t\tlabel: \"Crimson\",\n\t\ttoken: \"--basalt-chart-23\",\n\t\tlight: \"350 65% 50%\",\n\t\tdark: \"350 65% 55%\",\n\t},\n\t{ id: \"gray\", label: \"Gray\", token: \"--basalt-chart-24\", light: \"0 0% 25%\", dark: \"0 0% 65%\" },\n] as const;\n\nexport const DEFAULT_ACCENT_ID = \"primary\";\nconst STORAGE_KEY = \"basalt-accent\";\n\ntype AccentContextValue = {\n\taccent: string;\n\tsetAccent: (id: string) => void;\n\tswatches: readonly AccentSwatch[];\n};\n\nconst AccentContext = createContext<AccentContextValue | null>(null);\n\nexport function accentSwatchById(id: string | null | undefined): AccentSwatch {\n\treturn ACCENT_SWATCHES.find((swatch) => swatch.id === id) ?? ACCENT_SWATCHES[0];\n}\n\nfunction channel(c: number) {\n\treturn c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n}\n\nexport function accentForeground(hsl: string) {\n\tconst [hue, sat, light] = hsl.trim().split(/\\s+/);\n\tconst h = Number(hue);\n\tconst s = Number(sat.replace(\"%\", \"\")) / 100;\n\tconst l = Number(light.replace(\"%\", \"\")) / 100;\n\tconst a = s * Math.min(l, 1 - l);\n\tconst f = (n: number) => {\n\t\tconst k = (n + h / 30) % 12;\n\t\treturn l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n\t};\n\tconst luminance = 0.2126 * channel(f(0)) + 0.7152 * channel(f(8)) + 0.0722 * channel(f(4));\n\treturn luminance > 0.35 ? \"0 0% 10%\" : \"0 0% 100%\";\n}\n\nexport function applyAccent(id: string, dark = false) {\n\tconst swatch = accentSwatchById(id);\n\tconst value = dark ? swatch.dark : swatch.light;\n\tconst root = document.documentElement;\n\troot.style.setProperty(\"--basalt-primary\", value);\n\troot.style.setProperty(\"--basalt-primary-foreground\", accentForeground(value));\n\troot.style.setProperty(\"--basalt-ring\", value);\n\troot.dataset.accent = swatch.id;\n}\n\nfunction readAccent(): string {\n\treturn accentSwatchById(window.localStorage.getItem(STORAGE_KEY)).id;\n}\n\nfunction subscribe(onStoreChange: () => void) {\n\twindow.addEventListener(\"storage\", onStoreChange);\n\treturn () => window.removeEventListener(\"storage\", onStoreChange);\n}\n\nfunction isDarkMode(): boolean {\n\treturn document.documentElement.classList.contains(\"dark\");\n}\n\nexport function AccentProvider({ children }: { children: ReactNode }) {\n\tconst accent = useSyncExternalStore(subscribe, readAccent, () => DEFAULT_ACCENT_ID);\n\tuseEffect(() => {\n\t\tapplyAccent(accent, isDarkMode());\n\t\tconst observer = new MutationObserver(() => applyAccent(accent, isDarkMode()));\n\t\tobserver.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n\t\treturn () => observer.disconnect();\n\t}, [accent]);\n\tconst setAccent = useCallback((id: string) => {\n\t\tconst next = accentSwatchById(id).id;\n\t\twindow.localStorage.setItem(STORAGE_KEY, next);\n\t\tapplyAccent(next, isDarkMode());\n\t\twindow.dispatchEvent(new Event(\"storage\"));\n\t}, []);\n\tconst value = useMemo(\n\t\t() => ({ accent, setAccent, swatches: ACCENT_SWATCHES }),\n\t\t[accent, setAccent],\n\t);\n\treturn <AccentContext.Provider value={value}>{children}</AccentContext.Provider>;\n}\n\nexport function useAccent() {\n\tconst ctx = useContext(AccentContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useAccent must be used within AccentProvider\");\n\t}\n\treturn ctx;\n}\n"],"mappings":"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"}