@arctura/theme 0.0.1

package/README.md

@@ -0,0 +1 @@
+# theme

package/dist/cli.cjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require("./parser-DyQY7ASD.cjs").c();

package/dist/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+import { c as e } from "./parser-DRqhbS0c.js";
+//#region src/cli.ts
+e();
+//#endregion

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useTheme } from './useTheme';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,32 @@
+/**
+ * ThemeMode represents the possible theme modes for the application.
+ *
+ * - 'light' | 'Light': Light mode
+ * - 'dark'  | 'Dark' : Dark mode
+ * - 'system'| 'System': Follows the system preference
+ */
+type ThemeMode = 'light' | 'dark' | 'system' | 'System' | 'Light' | 'Dark';
+/**
+ * List of supported theme modes for the application.
+ *
+ * Used for theme selection and validation.
+ * Only lowercase values are included for internal logic.
+ */
+declare const THEME_MODES: ThemeMode[];
+/**
+ * Options for theme mode selection UI.
+ *
+ * Each option contains a value (used internally) and a label (for display).
+ * Used in theme switchers and select components.
+ */
+declare const THEME_OPTIONS: {
+    value: ThemeMode;
+    label: ThemeMode;
+}[];
+declare function useTheme(): {
+    mode: ThemeMode;
+    setMode: (next: ThemeMode) => void;
+};
+export { THEME_MODES, THEME_OPTIONS, useTheme };
+export type { ThemeMode };
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/hooks/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3E;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,SAAS,EAAgC,CAAC;AAE7D;;;;;GAKG;AACH,QAAA,MAAM,aAAa,EAAE;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,EAI1D,CAAC;AAuBF,iBAAS,QAAQ;;oBAmBQ,SAAS;EAMjC;AAED,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react");var t=`theme-mode`;function n(){return typeof window>`u`?`system`:localStorage.getItem(t)||`system`}function r(e){return e===`system`?window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`:e}function i(e){document.documentElement.setAttribute(`data-theme`,r(e))}function a(e){return window.addEventListener(`storage`,e),()=>window.removeEventListener(`storage`,e)}function o(){let r=(0,e.useSyncExternalStore)(a,()=>n(),()=>`system`);return(0,e.useLayoutEffect)(()=>{if(i(r),r!==`system`)return;let e=window.matchMedia(`(prefers-color-scheme: dark)`),t=()=>i(`system`);return e.addEventListener(`change`,t),()=>e.removeEventListener(`change`,t)},[r]),{mode:r,setMode:e=>{localStorage.setItem(t,e),window.dispatchEvent(new StorageEvent(`storage`,{key:t}))}}}exports.useTheme=o;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { useTheme } from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,30 @@
+import { useLayoutEffect as e, useSyncExternalStore as t } from "react";
+//#region src/hooks/useTheme.ts
+var n = "theme-mode";
+function r() {
+	return typeof window > "u" ? "system" : localStorage.getItem(n) || "system";
+}
+function i(e) {
+	return e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : e;
+}
+function a(e) {
+	document.documentElement.setAttribute("data-theme", i(e));
+}
+function o(e) {
+	return window.addEventListener("storage", e), () => window.removeEventListener("storage", e);
+}
+function s() {
+	let i = t(o, () => r(), () => "system");
+	return e(() => {
+		if (a(i), i !== "system") return;
+		let e = window.matchMedia("(prefers-color-scheme: dark)"), t = () => a("system");
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, [i]), {
+		mode: i,
+		setMode: (e) => {
+			localStorage.setItem(n, e), window.dispatchEvent(new StorageEvent("storage", { key: n }));
+		}
+	};
+}
+//#endregion
+export { s as useTheme };

package/dist/parser-DRqhbS0c.js

@@ -0,0 +1,155 @@
+import e from "postcss";
+import { colord as t } from "colord";
+import n from "postcss-js";
+import { mkdir as r, writeFile as i } from "node:fs/promises";
+import { dirname as a, resolve as o } from "node:path";
+import { pathToFileURL as s } from "node:url";
+//#region src/errors/cli.ts
+var c = class extends Error {
+	argument;
+	value;
+	constructor(e, t, n) {
+		super(`Invalid value: ${t}, provived to the argument: ${e}`, { cause: n }), this.argument = e, this.value = t;
+	}
+}, l = class extends Error {
+	colorRef;
+	constructor(e, t) {
+		super(`Invalid color reference: ${e}`, { cause: t }), this.name = "ColorTokenParsingError", this.colorRef = e;
+	}
+}, u = "./theme.css", d = "./tokens.json", f = new Set(["-o", "--output"]), p = new Set(["-t", "--tokens"]);
+function m(e, t, n) {
+	let r = e.findIndex((e) => t.has(e));
+	if (r === -1) return;
+	let i = e[r + 1];
+	if (!i || i.startsWith("-")) {
+		let t = e[r];
+		throw new c(t, i, Error(`Missing ${n}`));
+	}
+	return i;
+}
+function h(e) {
+	return m(e, p, "tokens file path. Use -t <tokens-file> or --tokens <tokens-file>") ?? d;
+}
+function g(e) {
+	return m(e, f, "output file path. Use -o <output-file> or --output <output-file>") ?? u;
+}
+async function _(e) {
+	return (await import(s(o(e)).href, { with: { type: "json" } })).default;
+}
+function v(e) {
+	return e.replace(/^([ \t]*[^{}\r\n]+:[^\r\n;{}]+)\r?\n[ \t]*;[ \t]*$/gmu, "$1;").replace(/[ \t]*;?[ \t]*(?:\r?\n[ \t]*)+\}$/gu, ";\n}");
+}
+function y(e) {
+	let t = e.split(".");
+	if (t.length > 3 || t.length < 2 || t[0] !== "colors") throw new l(e, /* @__PURE__ */ Error("Color reference must be in the format \"colors.{family}.{scale}\" | \"colors.{name}\""));
+	let [n, r, i] = t;
+	return `var(--${n.replace("s", "")}-${r}${i ? `-${i}` : ""})`;
+}
+function b(n, r, i) {
+	let a = e.rule({ selector: ":root" });
+	Object.entries(r).forEach(([n, r]) => {
+		if (typeof r == "object") Object.entries(r).forEach(([r, i]) => {
+			let { r: o, g: s, b: c } = t(i).toRgb();
+			a.append(e.decl({
+				prop: `--color-${n}-${r}`,
+				value: `${o} ${s} ${c}`
+			}));
+		});
+		else if (typeof r == "string") {
+			let { r: i, g: o, b: s } = t(r).toRgb();
+			a.append(e.decl({
+				prop: `--color-${n}`,
+				value: `${i} ${o} ${s}`
+			}));
+		}
+	}), a.append(e.decl({
+		prop: "--space-unit",
+		value: i["space-unit"]
+	})), n.append(a);
+}
+function x(t, n) {
+	if (!n || !n.fontSize) return;
+	let r = e.rule({ selector: ":root" });
+	Object.entries(n.fontSize).forEach(([t, n]) => {
+		r.append(e.decl({
+			prop: `--font-size-${t}`,
+			value: `${n}`
+		}));
+	}), t.append(r);
+}
+function S(e) {
+	return e === "background" ? "--background-color" : e === "text" ? "--text-color" : e === "border" ? "--border-color" : e === "outline" ? "--outline-color" : e === "caret" ? "--caret-color" : e === "ring" ? "--ring-color" : `--color-${e}`;
+}
+function C(t, n, r, i, a, o) {
+	let s = e.atRule({
+		name: "theme",
+		params: "inline"
+	});
+	Object.entries(n).forEach(([t, n]) => {
+		let r = S(t);
+		Object.entries(n).forEach(([n]) => {
+			s.append(e.decl({
+				prop: `${r}-${n}`,
+				value: `var(--${t}-${n})`
+			}));
+		});
+	});
+	let c = Number(r["space-unit"].replace(/px$/, ""));
+	s.append(e.decl({
+		prop: "--spacing",
+		value: r["space-unit"]
+	})), Object.entries(i).forEach(([t, n]) => {
+		s.append(e.decl({
+			prop: `--border-width-${t}`,
+			value: n
+		}));
+	}), Object.entries(a).forEach(([t, n]) => {
+		s.append(e.decl({
+			prop: `--breakpoint-${t}`,
+			value: n
+		}));
+	}), Object.entries(r).forEach(([t, n]) => {
+		t !== "space-unit" && s.append(e.decl({
+			prop: `--spacing-${t}`,
+			value: `${c * n}px`
+		}));
+	}), o?.fontSize && Object.entries(o.fontSize).forEach(([t]) => {
+		s.append(e.decl({
+			prop: `--font-size-${t}`,
+			value: `var(--font-size-${t})`
+		}));
+	}), t.append(s);
+}
+function w(t, n, r) {
+	let i = e.rule({ selector: n });
+	Object.entries(r).forEach(([t, n]) => {
+		Object.entries(n).forEach(([n, r]) => {
+			try {
+				i.append(e.decl({
+					prop: `--${t}-${n}`,
+					value: `rgb(${y(r)})`
+				}));
+			} catch (e) {
+				(e instanceof l || e instanceof Error) && console.error(e.message), console.error("Unknown error while parsing semantic color:", n);
+			}
+		});
+	}), t.append(i);
+}
+function T(t) {
+	let n = e.root();
+	return b(n, t.colors, t.theme.spacing), x(n, t.theme?.typography), w(n, ":root", t.theme.colors.palette.light), C(n, t.theme.colors.palette.light, t.theme.spacing, t.theme.borderWidth, t.theme.breakpoints, t.theme.typography), w(n, "[data-theme=\"light\"]", t.theme.colors.palette.light), w(n, "[data-theme=\"dark\"]", t.theme.colors.palette.dark), n.toString();
+}
+async function E(t, o = u) {
+	let s = e.parse(t), c = n.objectify(s), l = await e().process(c, {
+		parser: n,
+		from: void 0
+	}), d = `${e.parse(l.css).nodes.map((e) => v(e.toString())).join("\n\n")}\n`;
+	await r(a(o), { recursive: !0 }), await i(o, d, "utf8"), console.log(`✅ Successfully wrote theme CSS to ${o}`);
+}
+async function D() {
+	let e = process.argv.slice(2), t = h(e), n = g(e), r = T(await _(t));
+	console.log("🎨 Generating CSS Theme..."), console.log(`💾 Writing theme CSS to ${n}...`), await E(r, n);
+}
+process.argv[1] && import.meta.url === s(process.argv[1]).href && D();
+//#endregion
+export { g as a, D as c, T as i, y as n, h as o, v as r, _ as s, E as t };

package/dist/parser-DyQY7ASD.cjs

@@ -0,0 +1,4 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("postcss");c=s(c,1);let l=require("colord"),u=require("postcss-js");u=s(u,1);let d=require("node:fs/promises"),f=require("node:path"),p=require("node:url");var m=class extends Error{argument;value;constructor(e,t,n){super(`Invalid value: ${t}, provived to the argument: ${e}`,{cause:n}),this.argument=e,this.value=t}},h=class extends Error{colorRef;constructor(e,t){super(`Invalid color reference: ${e}`,{cause:t}),this.name=`ColorTokenParsingError`,this.colorRef=e}},g=`./theme.css`,_=`./tokens.json`,v=new Set([`-o`,`--output`]),y=new Set([`-t`,`--tokens`]);function b(e,t,n){let r=e.findIndex(e=>t.has(e));if(r===-1)return;let i=e[r+1];if(!i||i.startsWith(`-`)){let t=e[r];throw new m(t,i,Error(`Missing ${n}`))}return i}function x(e){return b(e,y,`tokens file path. Use -t <tokens-file> or --tokens <tokens-file>`)??_}function S(e){return b(e,v,`output file path. Use -o <output-file> or --output <output-file>`)??g}async function C(e){return(await import((0,p.pathToFileURL)((0,f.resolve)(e)).href,{with:{type:`json`}})).default}function w(e){return e.replace(/^([ \t]*[^{}\r\n]+:[^\r\n;{}]+)\r?\n[ \t]*;[ \t]*$/gmu,`$1;`).replace(/[ \t]*;?[ \t]*(?:\r?\n[ \t]*)+\}$/gu,`;
+}`)}function T(e){let t=e.split(`.`);if(t.length>3||t.length<2||t[0]!==`colors`)throw new h(e,Error(`Color reference must be in the format "colors.{family}.{scale}" | "colors.{name}"`));let[n,r,i]=t;return`var(--${n.replace(`s`,``)}-${r}${i?`-${i}`:``})`}function E(e,t,n){let r=c.default.rule({selector:`:root`});Object.entries(t).forEach(([e,t])=>{if(typeof t==`object`)Object.entries(t).forEach(([t,n])=>{let{r:i,g:a,b:o}=(0,l.colord)(n).toRgb();r.append(c.default.decl({prop:`--color-${e}-${t}`,value:`${i} ${a} ${o}`}))});else if(typeof t==`string`){let{r:n,g:i,b:a}=(0,l.colord)(t).toRgb();r.append(c.default.decl({prop:`--color-${e}`,value:`${n} ${i} ${a}`}))}}),r.append(c.default.decl({prop:`--space-unit`,value:n[`space-unit`]})),e.append(r)}function D(e,t){if(!t||!t.fontSize)return;let n=c.default.rule({selector:`:root`});Object.entries(t.fontSize).forEach(([e,t])=>{n.append(c.default.decl({prop:`--font-size-${e}`,value:`${t}`}))}),e.append(n)}function O(e){return e===`background`?`--background-color`:e===`text`?`--text-color`:e===`border`?`--border-color`:e===`outline`?`--outline-color`:e===`caret`?`--caret-color`:e===`ring`?`--ring-color`:`--color-${e}`}function k(e,t,n,r,i,a){let o=c.default.atRule({name:`theme`,params:`inline`});Object.entries(t).forEach(([e,t])=>{let n=O(e);Object.entries(t).forEach(([t])=>{o.append(c.default.decl({prop:`${n}-${t}`,value:`var(--${e}-${t})`}))})});let s=Number(n[`space-unit`].replace(/px$/,``));o.append(c.default.decl({prop:`--spacing`,value:n[`space-unit`]})),Object.entries(r).forEach(([e,t])=>{o.append(c.default.decl({prop:`--border-width-${e}`,value:t}))}),Object.entries(i).forEach(([e,t])=>{o.append(c.default.decl({prop:`--breakpoint-${e}`,value:t}))}),Object.entries(n).forEach(([e,t])=>{e!==`space-unit`&&o.append(c.default.decl({prop:`--spacing-${e}`,value:`${s*t}px`}))}),a?.fontSize&&Object.entries(a.fontSize).forEach(([e])=>{o.append(c.default.decl({prop:`--font-size-${e}`,value:`var(--font-size-${e})`}))}),e.append(o)}function A(e,t,n){let r=c.default.rule({selector:t});Object.entries(n).forEach(([e,t])=>{Object.entries(t).forEach(([t,n])=>{try{r.append(c.default.decl({prop:`--${e}-${t}`,value:`rgb(${T(n)})`}))}catch(e){(e instanceof h||e instanceof Error)&&console.error(e.message),console.error(`Unknown error while parsing semantic color:`,t)}})}),e.append(r)}function j(e){let t=c.default.root();return E(t,e.colors,e.theme.spacing),D(t,e.theme?.typography),A(t,`:root`,e.theme.colors.palette.light),k(t,e.theme.colors.palette.light,e.theme.spacing,e.theme.borderWidth,e.theme.breakpoints,e.theme.typography),A(t,`[data-theme="light"]`,e.theme.colors.palette.light),A(t,`[data-theme="dark"]`,e.theme.colors.palette.dark),t.toString()}async function M(e,t=g){let n=c.default.parse(e),r=u.default.objectify(n),i=await(0,c.default)().process(r,{parser:u.default,from:void 0}),a=`${c.default.parse(i.css).nodes.map(e=>w(e.toString())).join(`
+
+`)}\n`;await(0,d.mkdir)((0,f.dirname)(t),{recursive:!0}),await(0,d.writeFile)(t,a,`utf8`),console.log(`✅ Successfully wrote theme CSS to ${t}`)}async function N(){let e=process.argv.slice(2),t=x(e),n=S(e),r=j(await C(t));console.log(`🎨 Generating CSS Theme...`),console.log(`💾 Writing theme CSS to ${n}...`),await M(r,n)}process.argv[1]&&{}.url===(0,p.pathToFileURL)(process.argv[1]).href&&N(),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return N}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return j}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return M}});

package/dist/parser.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./parser-DyQY7ASD.cjs");exports.buildCssFile=e.t,exports.colorRefToCssVar=e.n,exports.formatGeneratedCss=e.r,exports.generateTheme=e.i,exports.getOutputFilePathFromArgs=e.a,exports.getTokensFilePathFromArgs=e.o,exports.loadTokensFile=e.s,exports.runParserCli=e.c;

package/dist/parser.d.ts

@@ -0,0 +1,243 @@
+/**
+ * Resolves the design tokens file path from CLI arguments.
+ *
+ * @param args - CLI arguments passed after the parser script path.
+ * @returns The path provided by `-t` or `--tokens`, or the default `./tokens.json`.
+ * @throws {Error} If the tokens flag is present without a value.
+ */
+declare function getTokensFilePathFromArgs(args: string[]): string;
+/**
+ * Resolves the generated CSS output file path from CLI arguments.
+ *
+ * @param args - CLI arguments passed after the parser script path.
+ * @returns The path provided by `-o` or `--output`, or the default `./theme.css`.
+ * @throws {Error} If the output flag is present without a value.
+ */
+declare function getOutputFilePathFromArgs(args: string[]): string;
+/**
+ * Dynamically imports a JSON design tokens file from the provided filesystem path.
+ *
+ * @param tokensFilePath - Path to the tokens JSON file, resolved relative to the current working directory when relative.
+ * @returns The parsed design tokens object.
+ */
+declare function loadTokensFile(tokensFilePath: string): Promise<Tokens>;
+/**
+ * Normalizes PostCSS output where generated declarations can leave semicolons
+ * on their own line or omit the final semicolon before a block closes.
+ *
+ * @param css - CSS text generated by PostCSS.
+ * @returns CSS text with normalized declaration semicolons.
+ */
+declare function formatGeneratedCss(css: string): string;
+/**
+ * @type
+ * Mode: Represents the semantic color mapping for a specific theme mode (light or dark).
+ * Each key is a semantic color name (e.g. "primary", "secondary") and the value is a reference string to a base color token (e.g. "colors.sky.500").
+ * @property background - A nested object mapping semantic background color names to their token references.
+ * @property text - A nested object mapping semantic text color names to their token references.
+ * @property [key: string] - Allows for additional semantic color categories (e.g. "border", "accent") to be included in the future.
+ *
+ * @example
+ * ```ts
+ * const lightMode: Mode = {
+ *  background: {
+ *   primary: "colors.azure.900",
+ *   secondary: "colors.ocean.600",
+ * },
+ * text: {
+ *  primary: "colors.black",
+ *  secondary: "colors.ocean.500",
+ * }
+ * }
+ * ```
+ */
+type Mode = {
+    background: Record<string, string>;
+    text: Record<string, string>;
+    [key: string]: Record<string, string>;
+};
+/**
+ * Palette: Contains both light and dark Mode mappings for semantic colors.
+ * Example: { light: Mode, dark: Mode }
+ */
+type Palette = {
+    light: Mode;
+    dark: Mode;
+};
+/**
+ * ColorScale: Maps numeric scale steps (e.g. "100", "500") to hex color values.
+ * Example: { "100": "#f0f0f0", "500": "#0077ff" }
+ */
+type ColorScale = Record<string, string> | string;
+/**
+ * BaseColors: Maps color families (e.g. "sky", "mist") to their ColorScale.
+ * Example: { sky: ColorScale, mist: ColorScale }
+ */
+type BaseColors = Record<string, ColorScale>;
+/**
+ * @type
+ * SpacingScale: Defines the spacing scale for the theme.
+ * @property space-unit - The base spacing unit (e.g. "8px") that other spacing tokens are multiples of.
+ * @property [key: string] - Additional spacing tokens (e.g. "xs", "sm", "md", "lg", "xl") that map to numeric multiples of the base space unit.
+ *
+ * Example:
+ * {
+ *   'space-unit': '8px',
+ *   'xs': 0.5,
+ *   'sm': 1,
+ *   'md': 2,
+ *   'lg': 4,
+ *   'xl': 8
+ * }
+ */
+type SpacingScale = {
+    'space-unit': string;
+    [key: string]: string | number;
+};
+interface Typography {
+    fontSize: Record<string, string>;
+    [key: string]: string | Record<string, string>;
+}
+/**
+ * BorderWidthScale: Defines the border width scale for the theme.
+ *
+ * Maps border width token names (e.g., 'thin', 'medium', 'thick') to their CSS values (e.g., '1px', '2px').
+ *
+ * Example:
+ * {
+ *   'thin': '1px',
+ *   'medium': '2px',
+ *   'thick': '4px'
+ * }
+ */
+type BorderWidthScale = Record<string, string>;
+/**
+ * BreakpointScale: Defines the viewport min-width scale used by Tailwind v4
+ * responsive variants.
+ *
+ * Tailwind v4 consumes these through `--breakpoint-*` variables in `@theme`.
+ */
+type BreakpointScale = Record<string, string>;
+/**
+ * @interface
+ * Theme: Contains the semantic palette for both light and dark modes.
+ * @property colors - The semantic color palette for the theme, mapping to a Palette of light and dark modes.
+ * @property spacing - The spacing scale for the theme, mapping to a SpacingScale object.
+ * @property borderWidth - The border width scale for the theme, mapping to a BorderWidthScale object.
+ * @property [key: string] - Allows for additional theme properties (e.g. typography) to be included in the future.
+ *
+ * @example
+ * ```ts
+ * const theme: Theme = {
+ *  colors: {
+ *     palette: {
+ *       light: { primary: "colors.sky.500", accent: "colors.mist.500" },
+ *       dark: { primary: "colors.sky.100", accent: "colors.mist.100" }
+ *     }
+ *   },
+ *   spacing: {
+ *  'space-unit': '8px',
+ *   'xs': 0.5,
+ *   'sm': 1,
+ *   'md': 2,
+ *   'lg': 4,
+ *   'xl': 8
+ * }
+ * }
+ * ```
+ */
+interface Theme {
+    colors: {
+        palette: Palette;
+    };
+    spacing: SpacingScale;
+    typography: Typography;
+    borderWidth: BorderWidthScale;
+    breakpoints: BreakpointScale;
+    [key: string]: string | {
+        palette: Palette;
+    } | SpacingScale | BreakpointScale | BorderWidthScale | Record<string, Record<string, string>> | Typography;
+}
+/**
+ * @interface Tokens
+ * Tokens: Root object for all design tokens, including base color scales and theme palettes.
+ * @property colors - The base color scales, mapping color families to their scale steps and hex values.
+ * @property theme - The semantic color palette for the theme.
+ * @property [key: string] - Allows for additional token categories (e.g. typography) to be included in the future.
+ *
+ * @example
+ * ```ts
+ * const tokens: Tokens = {
+ *   colors: {
+ *     sky: { "100": "#f0f0f0", "500": "#0077ff" },
+ *     mist: { "100": "#e0e0e0", "500": "#00ccaa" }
+ *   },
+ *   theme: {
+ *     colors: {
+ *       palette: {
+ *         light: { primary: "colors.sky.500", accent: "colors.mist.500" },
+ *         dark: { primary: "colors.sky.100", accent: "colors.mist.100" }
+ *       }
+ *     },
+ *     spacing: {
+ *       'space-unit': '8px'
+ *       'xs': 0.5,
+ *       'sm': 1,
+ *       'md': 2,
+ *       'lg': 4,
+ *       'xl': 8
+ *     }
+ *   }
+ * }
+ * ```
+ */
+interface Tokens {
+    colors: BaseColors;
+    theme: Theme;
+    [key: string]: string | Record<string, string> | BaseColors | Theme | SpacingScale;
+}
+/**
+ * @function
+ * colorRefToCssVar - Converts a color reference string (e.g. "colors.sky.500") to a CSS variable reference (e.g. "var(--sky-500)").
+ * Throws an error if the reference is not in the expected format.
+ * @param colorRef - The color reference string from the palette (e.g. "colors.sky.500").
+ * @returns The CSS variable reference string (e.g. "var(--sky-500)").
+ * @throws {Error} If the color reference is not in the format "colors.{family}.{scale}".
+ *
+ * @example
+ * ```ts
+ * colorRefToCssVar("colors.sky.500") // returns "var(--sky-500)"
+ * ```
+ */
+declare function colorRefToCssVar(colorRef: string): string;
+/**
+ * Generates the complete CSS string for base color variables and semantic theme variables.
+ *
+ * Per Tailwind v4 docs, when using @custom-variant dark with a data-attribute selector,
+ * the @media (prefers-color-scheme: dark) @theme inline block conflicts with that approach.
+ * Instead, explicit [data-theme] selector rules are used so both dark: utilities and
+ * CSS variable-based colors respond to the same data-theme attribute.
+ *
+ * System preference is handled in JS via matchMedia.
+ *
+ * @param tokens - The full design tokens object containing base colors and theme palettes.
+ * @returns The generated CSS string.
+ */
+declare function generateTheme(tokens: Tokens): string;
+/**
+ * Formats generated CSS and writes it to disk.
+ *
+ * @param source - Raw generated CSS source to process.
+ * @param outputFilePath - Destination stylesheet path. Defaults to `./theme.css`.
+ * @returns A promise that resolves after the output directory exists and the file is written.
+ */
+declare function buildCssFile(source: string, outputFilePath?: string): Promise<void>;
+/**
+ * Runs the CLI flow for generating the theme stylesheet from a tokens file.
+ *
+ * @returns A promise that resolves when the stylesheet has been generated and written.
+ */
+declare function runParserCli(): Promise<void>;
+export { buildCssFile, colorRefToCssVar, formatGeneratedCss, generateTheme, getOutputFilePathFromArgs, getTokensFilePathFromArgs, loadTokensFile, runParserCli, };
+export type { Tokens };
+//# sourceMappingURL=parser.d.ts.map

package/dist/parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../src/parser.ts"],"names":[],"mappings":"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"}

package/dist/parser.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./parser-DRqhbS0c.js";
+export { s as buildCssFile, r as colorRefToCssVar, a as formatGeneratedCss, n as generateTheme, e as getOutputFilePathFromArgs, i as getTokensFilePathFromArgs, o as loadTokensFile, t as runParserCli };

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@arctura/theme",
+  "version": "0.0.1",
+  "type": "module",
+  "packageManager": "yarn@4.11.0",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "url": "https://github.com/marcomg-byte/arctura"
+  },
+  "bin": {
+    "arctura-theme": "dist/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./parser": {
+      "types": "./dist/parser.d.ts",
+      "import": "./dist/parser.js",
+      "require": "./dist/parser.cjs"
+    }
+  },
+  "files": [
+    "dist/cli.*",
+    "dist/hooks/*.d.ts",
+    "dist/hooks/*.d.ts.map",
+    "dist/index.*",
+    "dist/parser-*",
+    "dist/parser.*"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.json && rimraf dist/errors",
+    "clean": "rimraf dist theme.css",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:cov": "vitest run --coverage",
+    "test:debug": "vitest --inspect-brk --no-file-parallelism",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest watch",
+    "theme:parse": "tsx src/cli.ts",
+    "typecheck": "tsc -p tsconfig.eslint.json"
+  },
+  "dependencies": {
+    "colord": "^2.9.3",
+    "postcss": "^8.5.6",
+    "postcss-js": "^5.1.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19",
+    "@vitest/coverage-v8": "4.1.8",
+    "eslint": "^9.39.1",
+    "jsdom": "^29.1.1",
+    "rimraf": "^6.1.3",
+    "tsx": "^4.22.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.12",
+    "vitest": "4.1.8"
+  }
+}